Support for custom HAX themes; through importmap and new rollup-config

winstonwumbo · winstonwumbo · commit b870ca44e8ec · 2025-02-25T20:17:37.000-05:00
diff --git a/src/boilerplate/site/custom/package.json b/src/boilerplate/site/custom/package.json
@@ -11,17 +11,14 @@
     "start": "yarn run watch",
     "watch": "rollup --watch -c rollup.config.js"
   },
-  "dependencies": {
-  },
   "devDependencies": {
-    "@babel/plugin-transform-modules-amd": "^7.2.0",
-    "@babel/core": "^7.3.3",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-syntax-import-meta": "^7.2.0",
-    "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "rollup-plugin-terser": "5.2.0",
-    "rollup-plugin-rewrite-imports": "^2.0.0",
-    "rollup": "^1.6.0"
+    "rollup": "^2.0.0",
+    "rollup-plugin-terser": "7.0.2",
+    "@rollup/plugin-node-resolve": "16.0.0",
+    "@web/rollup-plugin-html": "^2.3.0",
+    "rollup-plugin-rewrite-imports": "2.0.0",
+    "@web/rollup-plugin-import-meta-assets": "^2.2.1",
+    "rollup-plugin-esbuild": "6.1.1",
+    "@rollup/plugin-babel": "6.0.4"
   }
-}
+}
diff --git a/src/boilerplate/site/custom/rollup.config.js b/src/boilerplate/site/custom/rollup.config.js
@@ -1,20 +1,41 @@
 // @ts-nocheck
-const { terser } = require('rollup-plugin-terser');
-const rewriteImports = require('rollup-plugin-rewrite-imports');
-const production = true;
-module.exports = function() {
-  return {
-    input: 'src/custom.js',
-    treeshake: !!production,
-    output: {
-      file: `build/custom.es6.js`,
-      format: 'esm',
-      sourcemap: false,
-    },
-    plugins: [
-      rewriteImports(`../../build/es6/node_modules/`),
-      // only minify if in production
-      production && terser(),
-    ],
-  };
+import nodeResolve from '@rollup/plugin-node-resolve';
+import babel from '@rollup/plugin-babel';
+import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
+import esbuild from 'rollup-plugin-esbuild';
+
+const inputFile = "src/custom.js";
+export default {
+  input : inputFile,
+  output: {
+    file: `build/custom.es6.js`,
+    format: 'es',
+    sourcemap: false,
+  },
+  external: (assetPath) => {
+    // remove current working directory for eval
+    let asset = assetPath.replace(process.cwd(), '');
+    // matches input file, or starts with ./ or /src/ then we know it's a local file for processing
+    // the goal is to be able to correctly reference @haxtheweb / other project bare assets
+    // and correctly assess that they are to be treated as 'external'
+    // @todo read off of wc-registry.json to make this assessment if local or otherwise need to hit a CDN based copy
+    if (asset.endsWith(inputFile) || asset.startsWith('./') || asset.startsWith('/src/')) {
+      return false;
+    }
+    return true;
+  },
+  preserveEntrySignatures: false,
+  plugins: [
+    /** Resolve bare module imports */
+    nodeResolve(),
+    /** Minify JS, compile JS to a lower language target */
+    esbuild({
+      minify: true,
+      target: ['chrome64', 'firefox67', 'safari11.1'],
+    }),
+    /** Bundle assets references via import.meta.url */
+    importMetaAssets(),
+    /** Minify html and css tagged template literals */
+    babel(),
+  ],
 };
diff --git a/src/boilerplate/site/index.html b/src/boilerplate/site/index.html
@@ -1,6 +1,15 @@
 <!DOCTYPE html>
 <html lang="en-US">
 <head>
+  <script type="importmap">
+    {
+      "scopes": {
+        "./custom/build/": {
+          "@haxtheweb/": "./build/es6/node_modules/@haxtheweb/"
+        }
+      }
+    }
+  </script>
   <meta charset="utf-8">
   <link rel="preconnect" crossorigin href="https://fonts.googleapis.com">
   <link rel="preconnect" crossorigin href="https://cdnjs.cloudflare.com">
diff --git a/src/boilerplate/site/index.php b/src/boilerplate/site/index.php
@@ -14,6 +14,15 @@
 <!DOCTYPE html>
 <html lang="<?php print $HAXSiteConfig->getLanguage(); ?>">
 <head>
+  <script type="importmap">
+    {
+      "scopes": {
+        "./custom/build/": {
+          "@haxtheweb/": "./build/es6/node_modules/@haxtheweb/"
+        }
+      }
+    }
+  </script>
   <?php print $HAXSiteConfig->getBaseTag(); ?>
   <?php print $HAXSiteConfig->getSiteMetadata($HAXSiteConfig->page); ?>
   <?php print $HAXSiteConfig->getServiceWorkerScript(null, FALSE, $HAXSiteConfig->getServiceWorkerStatus()); ?>
