chrono-meter · June 24, 2024 12:47 · Jun 24, 2024
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+Remove html id and pass arguments to React components.
+
+See [original version](https://developer.wordpress.org/news/2024/03/26/how-to-use-wordpress-react-components-for-plugin-pages/) for more information.
diff --git a/index.js b/index.js
@@ -0,0 +1,14 @@
+// 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 />);
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,9 @@
+{
+    "devDependencies": {
+        "@wordpress/scripts": "^27.0.0"
+    },
+    "scripts": {
+        "build": "wp-scripts build",
+        "start": "wp-scripts start"
+    }
+}
diff --git a/render.php b/render.php
@@ -0,0 +1,19 @@
+<?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>
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,15 @@
+// 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',
+    },
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Remove html id and pass arguments to React components.

		See [original version](https://developer.wordpress.org/news/2024/03/26/how-to-use-wordpress-react-components-for-plugin-pages/) for more information.
No results found