use esbuild instead of webpack

Author: wellmann

.babelrc

@@ -20,6 +20,11 @@
     exit;
 }
 
+define(__NAMESPACE__ . '\\MAIN_FILE', __FILE__);
+define(__NAMESPACE__ . '\\BASENAME', plugin_basename(MAIN_FILE));
+define(__NAMESPACE__ . '\\DIR_PATH', plugin_dir_path(MAIN_FILE));
+define(__NAMESPACE__ . '\\DIR_URL', plugin_dir_url(MAIN_FILE));
+
 const ADMIN_PAGE_SLUG = 'kwio-react-page';
 
 add_action('admin_menu', function () {
@@ -43,7 +48,7 @@ function () {
         return;
     }
 
-    $assetManifestFile = plugin_dir_path(__FILE__) . 'dist/app.asset.php';
+    $assetManifestFile = DIR_PATH . 'dist/app.asset.php';
     if (!file_exists($assetManifestFile)) {
         return;
     }
@@ -52,22 +57,22 @@ function () {
 
     wp_enqueue_script(
         ADMIN_PAGE_SLUG,
-        plugin_dir_url(__FILE__) . 'dist/app.js',
+        DIR_URL . 'dist/app.js',
         $assetManifest['dependencies'],
         $assetManifest['version']
     );
 
     wp_set_script_translations(
         ADMIN_PAGE_SLUG,
         'wp-react-page-admin-example',
-        plugin_dir_path(__FILE__) . 'lang'
+        DIR_PATH . 'lang'
     );
 
     wp_enqueue_style(
         ADMIN_PAGE_SLUG,
-        plugin_dir_url(__FILE__) . 'dist/app.css',
+        DIR_URL . 'dist/app.css',
         ['wp-components'],
-        filemtime(plugin_dir_path(__FILE__) . 'dist/app.css')
+        filemtime(DIR_PATH . 'dist/app.css')
     );
 });
 

bootstrap.php

@@ -1,4 +1,4 @@
-declare module '*.module.scss' {
+declare module '*.module.css' {
   const content: Record<string, string>;
   export default content;
 }

declaration.d.ts

@@ -0,0 +1,183 @@
+import * as esbuild from 'esbuild';
+import fs from 'fs';
+import crypto from 'crypto';
+
+const isWatchMode = process.argv.includes('--watch');
+
+// https://gist.github.com/adamziel/ab4bf95756d70c1aefd1dc56fbed2c62
+const wpDepsPlugin = {
+  name: 'import-wordpress-deps',
+  setup(currentBuild) {
+    currentBuild.onResolve({ filter: /^react|react-dom$/ }, (args) => ({
+      path: args.path,
+      namespace: 'wp-element',
+    }));
+    currentBuild.onLoad({ filter: /^react\/jsx-runtime$/ }, () => ({
+      contents:
+        'module.exports = { default: window.ReactJSXRuntime, ...window.ReactJSXRuntime }',
+      loader: 'js',
+    }));
+    currentBuild.onLoad({ filter: /.*/, namespace: 'wp-element' }, () => ({
+      contents:
+        'module.exports = { default: window.wp.element, ...window.wp.element }',
+      loader: 'js',
+    }));
+
+    const wpImportMap = {
+      '@wordpress/a11y': 'wp.a11y',
+      '@wordpress/api-fetch': 'wp.apiFetch',
+      '@wordpress/autop': 'wp.autop',
+      '@wordpress/blob': 'wp.blob',
+      '@wordpress/block-directory': 'wp.blockDirectory',
+      '@wordpress/block-editor': 'wp.blockEditor',
+      '@wordpress/block-library': 'wp.blockLibrary',
+      '@wordpress/block-serialization-default-parser':
+        'wp.blockSerializationDefaultParser',
+      '@wordpress/blocks': 'wp.blocks',
+      '@wordpress/components': 'wp.components',
+      '@wordpress/compose': 'wp.compose',
+      '@wordpress/core-data': 'wp.coreData',
+      '@wordpress/data': 'wp.data',
+      '@wordpress/date': 'wp.date',
+      '@wordpress/deprecated': 'wp.deprecated',
+      '@wordpress/dom': 'wp.dom',
+      '@wordpress/dom-ready': 'wp.domReady',
+      '@wordpress/edit-navigation': 'wp.editNavigation',
+      '@wordpress/edit-post': 'wp.editPost',
+      '@wordpress/edit-site': 'wp.editSite',
+      '@wordpress/edit-widgets': 'wp.editWidgets',
+      '@wordpress/editor': 'wp.editor',
+      '@wordpress/element': 'wp.element',
+      '@wordpress/escape-html': 'wp.escapeHtml',
+      '@wordpress/format-library': 'wp.formatLibrary',
+      '@wordpress/hooks': 'wp.hooks',
+      '@wordpress/html-entities': 'wp.htmlEntities',
+      '@wordpress/i18n': 'wp.i18n',
+      '@wordpress/icons': 'wp.icons',
+      '@wordpress/is-shallow-equal': 'wp.isShallowEqual',
+      '@wordpress/keyboard-shortcuts': 'wp.keyboardShortcuts',
+      '@wordpress/keycodes': 'wp.keycodes',
+      '@wordpress/notices': 'wp.notices',
+      '@wordpress/nux': 'wp.nux',
+      '@wordpress/plugins': 'wp.plugins',
+      '@wordpress/preferences': 'wp.preferences',
+      '@wordpress/preferences-persistence': 'wp.preferencesPersistence',
+      '@wordpress/primitives': 'wp.primitives',
+      '@wordpress/reusable-blocks': 'wp.reusableBlocks',
+      '@wordpress/rich-text': 'wp.richText',
+      '@wordpress/shortcode': 'wp.shortcode',
+      '@wordpress/url': 'wp.url',
+      '@wordpress/viewport': 'wp.viewport',
+      '@wordpress/warning': 'wp.warning',
+      '@wordpress/widgets': 'wp.widgets',
+      '@wordpress/wordcount': 'wp.wordcount',
+    };
+
+    const resolvedWpDeps = new Set();
+    for (const [src, dest] of Object.entries(wpImportMap)) {
+      currentBuild.onResolve({ filter: new RegExp(`^${src}$`) }, (args) => {
+        resolvedWpDeps.add(dest);
+        return {
+          path: args.path,
+          namespace: src,
+        };
+      });
+      currentBuild.onLoad({ filter: /.*/, namespace: src }, () => {
+        return {
+          contents: 'module.exports = ' + dest,
+          loader: 'js',
+        };
+      });
+    }
+
+    currentBuild.onEnd(() => {
+      // Get all entrypoints
+      const entrypoints = currentBuild.initialOptions.entryPoints;
+      const deps = JSON.stringify(
+        [...resolvedWpDeps]
+          // wp.element to wp-element
+          .map((dep) => dep.replace('.', '-'))
+          // wp-blockEditor to wp-block-editor
+          .map((dep) =>
+            dep.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
+          )
+      );
+      // Get all built files paths
+      for (const outfile in entrypoints) {
+        const builtFile =
+          currentBuild.initialOptions.outdir + '/' + outfile + '.js';
+        const hash = hashFiles([builtFile]);
+        const hashesFile =
+          currentBuild.initialOptions.outdir + `/${outfile}.asset.php`;
+        // Write hash and deps to a PHP file
+        fs.writeFileSync(
+          hashesFile,
+          `<?php return array(
+            'version' => '${hash}',
+            'dependencies' => ${deps}
+          );
+          `
+        );
+      }
+    });
+  },
+};
+
+const buildOptions = {
+  entryPoints: {
+    app: './src/entry.jsx'
+  },
+  outdir: 'dist',
+  bundle: true,
+  minify: !isWatchMode,
+  sourcemap: isWatchMode,
+  target: 'es6',
+  logLevel: 'info',
+  platform: 'browser',
+  jsxFactory: 'wp.element.createElement',
+  jsxImportSource: 'react',
+  jsxFragment: 'wp.element.Fragment',
+  plugins: [
+    wpDepsPlugin,
+    cleanup()
+  ]
+};
+
+if (isWatchMode) {
+  let ctx = await esbuild.context(buildOptions);
+  await ctx.watch();
+  console.log('Watching...');
+} else {
+  console.log('Building...');
+  await esbuild.build(buildOptions);
+}
+
+function hashFiles(filePaths) {
+  // if all files exist
+  if (!filePaths.every(fs.existsSync)) {
+    return '';
+  }
+  return sha256(
+    Buffer.concat(filePaths.map((filePath) => fs.readFileSync(filePath)))
+  );
+}
+
+function cleanup() {
+  return {
+    name: 'cleanupFiles',
+    setup(build) {
+      const options = build.initialOptions;
+      build.onStart(() => {
+        fs.readdirSync(options.outdir).forEach((path) => {
+          fs.unlinkSync(options.outdir + '/' + path);
+        });
+      });
+    },
+  };
+}
+
+function sha256(buffer) {
+  const hash = crypto.createHash('sha256');
+  hash.update(buffer);
+  return hash.digest('hex');
+}