Comment mettre en file d’attente les balises de script pour ReactDOM dans les functions.php de WordPress ?

Je ne sais pas où trouver le meilleur endroit pour poser cette question, mais en recherchant le crossoriginbut de React, j’ai trouvé la réponse sur MDN :

crossorigin
Les éléments de script normaux transmettent un minimum d’informations à window.onerror pour les scripts qui ne passent pas les vérifications CORS standard. Pour autoriser la journalisation des erreurs pour les sites qui utilisent un domaine distinct pour les médias statiques, utilisez cet attribut. Voir Attributs des paramètres CORS pour une explication plus descriptive des arguments valides.

— MDN

et en regardant utiliser ReactDOM, j’ai vu les balises de script au bas de:

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>window.ReactDOM || document.write('<script crossorigin src="path/to/react-dom.development.js"></script>')</script>

Dans WordPress, je connais une mise en file d’attente de base :

function theme_js() {
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_js' );

et avec WordPress, j’ai joint des scripts au pied de page avec :

function inline_script() {
    ?>
    <script type="text/javascript">
    // js code goes here
    </script>
    <?php
}
add_action( 'wp_footer', 'inline_script' );

Lors de l’exécution d’une requête via des questions précédentes avec les paramètres de [wordpress] crossoriginje n’ai pas vu cette question posée. Existe-t-il un moyen approprié de coder pour ReactDOM dans un thème WordPress en plus de l’appeler dans le pied de page avec quelque chose comme :

function react_dom() {
    ?>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script>window.ReactDOM || document.write('<script crossorigin src=" <?php get_template_directory_uri() ?>/react-dom.development.js"></script>')</script>
    <?php
}
add_action( 'wp_footer', 'react_dom' );

Comment ReactDOM devrait-il être wp_enqueue_scriptsou devrait-il être ajouté au pied de page ?

Pour référence, cela a été mentionné dans le chat : Comment ajouter la balise defer= »defer » dans les plugins javascripts ?

Solution n°1 trouvée

Je pense donc que vous pouvez utiliser le script_loader_tagfiltre pour remplacer HTML lors du chargement du script. Cela vous permettra de contrôler où vous mettez le script en file d’attente comme d’habitude via le wp_enqueue_scriptscrochet tout en vous permettant d’ajouter des attributs de script.

La file d’attente

/**
 * Enqueue whatever script we may need
 *
 * @return void
 */
function wpse302526_enqueue_react() {

    wp_enqueue_script(
        'react',    // File handle/slug
        $file_url,      // URL to file
        array(),        // Dependencies
        false,          // Version
        true            // Add to Header ( false ) or Footer ( true )
    );

}
add_action( 'wp_enqueue_scripts', 'wpse302526_enqueue_react' );

Nous ciblerons le script spécifiquement par le slug handle/script.

La fonction Rechercher/Remplacer

/**
 * Modify the enqueue script tag
 *
 * @param String $html      - Generated script HTML
 * @param String $handle    - Script slug/handle
 *
 * @return $html
 */
function wpse302526_modify_script_tags( $html, $handle ) {

    /** Add script attribute **/
    if( 'react' === $handle ) {

        /* Add `crossorigin` attribute */
        $html = str_replace(
            '<script',
            '<script crossorigin',
            $html
        );

        /* Initialize ReactDOM */
        $html = str_replace(
            '</script>',
            'window.ReactDOM</script>',
            $html
        );

    }

    return $html;

}
add_filter( 'script_loader_tag', 'wpse302526_modify_script_tags', 10, 2 );

J’ai l’impression que si vous le pouvez, vous devriez éviter de faire cette partie en dehors de votre file d’attente car cela pourrait être déroutant pour les développeurs qui la traversent. Garder toutes vos files d’attente et URL de script au même endroit (au lieu d’être déchirés entre les deux filtres) semble être le mieux. Si vous ne pouvez pas l’éviter, n’hésitez pas à l’ajouter.

document.write('<script crossorigin src=" <?php get_template_directory_uri() ?>/react-dom.development.js"></script>')

Si vous avez absolument besoin de la ligne ci-dessus, j’opterais pour l’ wp_footerapproche consistant à tout conserver au même endroit.