WordPress React components for plugin pages without node `id`.

README.md

Remove html id and pass arguments to React components.

See original version for more information.

index.js

// src/index.js
import {createRoot} from '@wordpress/element';


const SettingsPage = () => {
    return <div>Placeholder for settings page</div>;
};


export default function(container){
    const root = createRoot(container);

    root.render(<SettingsPage />);
};

package.json

{
    "devDependencies": {
        "@wordpress/scripts": "^27.0.0"
    },
    "scripts": {
        "build": "wp-scripts build",
        "start": "wp-scripts start"
    }
}

render.php

<?php
$asset = require __DIR__ . '/build/index.asset.php';

// Enqueue dependencies.
foreach ( $asset['dependencies'] as $dependency ) {
    wp_enqueue_script( $dependency );
}

?>
<div>
    <?php echo esc_html__( 'Loading page, please wait.' ); ?>
    <script>
        document.addEventListener('DOMContentLoaded', async function () {
            const {default: render} = await import(<?php echo wp_json_encode( plugins_url( 'build/index.js', __FILE__ ) ); ?>);

            render(this);
        }.bind(document.currentScript.parentElement));
    </script>
</div>

webpack.config.js

// https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#:~:text=Extending%20the%20webpack%20config
const defaultConfig = require('@wordpress/scripts/config/webpack.config');


module.exports = {
    ...defaultConfig,
    experiments: {
        ...defaultConfig.experiments,
        outputModule: true,
    },
    output: {
        ...defaultConfig.output,
        libraryTarget: 'module',
    },
};