@ordergroove/smi-serve 1.7.0 → 1.7.2

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.2](https://github.com/ordergroove/plush-toys/compare/@ordergroove/smi-serve@1.7.1...@ordergroove/smi-serve@1.7.2) (2024-04-19)
+
+**Note:** Version bump only for package @ordergroove/smi-serve
+
+
+
+
+
+## [1.7.1](https://github.com/ordergroove/plush-toys/compare/@ordergroove/smi-serve@1.7.0...@ordergroove/smi-serve@1.7.1) (2024-04-19)
+
+
+### Bug Fixes
+
+* get hot reloading working for less ([51fd2aa](https://github.com/ordergroove/plush-toys/commit/51fd2aad37234c0f931aafc4a268b9ad996f4a7b))
+* prevent FOUC when hot-reloading stylesheet ([6f6c416](https://github.com/ordergroove/plush-toys/commit/6f6c416c5b3f66f78eb0e7d0c5d2c39c2368ce7c))
+
+
+
+
+
 # [1.7.0](https://github.com/ordergroove/plush-toys/compare/@ordergroove/smi-serve@1.6.2...@ordergroove/smi-serve@1.7.0) (2024-04-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/smi-serve",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "Utility to serve a SMI template locally",
   "keywords": [],
   "author": "Eugenio Lattanzio <eugenio.lattanzio@ordergroove.com>",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/ordergroove/plush-toys/tree/master/packages/smi-serve#readme",
   "dependencies": {
-    "@ordergroove/smi-precompile": "^1.9.1",
+    "@ordergroove/smi-precompile": "^1.10.0",
     "adm-zip": "^0.5.10",
     "esbuild": "^0.19.2",
     "esbuild-plugin-less": "^1.2.4",
@@ -32,5 +32,5 @@
     "ora": "^5.4.1",
     "yargs": "^17.7.2"
   },
-  "gitHead": "af9f006002d62c2fe095b0d6b46c672bcd45c899"
+  "gitHead": "bcd26a4ae8649c4ae95019ae6ca6f9f15a45db4c"
 }

package/src/partials/devmode.js

@@ -1,5 +1,6 @@
-// specify global variables replaced at build time so eslint doesn't error
-/*global OG_ENV, OG_MERCHANT_ID, OG_HMAC_AUTH, OG_SMI_CORE_VERSION*/
+// virtual JSON file containing build-time variables
+import { OG_ENV, OG_MERCHANT_ID, OG_HMAC_AUTH, OG_SMI_CORE_VERSION } from 'virtual:globals.json';
+
 const params = new URLSearchParams(window.location.search);
 
 const env = params.get('env') || OG_ENV;

package/src/partials/entrypoint.js

@@ -1,7 +1,7 @@
-import './styles/main.less';
-import mainTemplate from './views/main.liquid';
+// ~/ refers to the working directory of the project using smi-serve
+import mainTemplate from '~/views/main.liquid';
 
-import { merchant_id, auth_config, smi_core_version } from './runtime-config';
+import { merchant_id, auth_config, smi_core_version } from './devmode';
 
 // only run on initial load, not hot reload
 if (!window.og?.smi) {

package/src/partials/index.html

@@ -3,19 +3,22 @@
     <title>SMI Demo Page</title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="/entrypoint.css" />
+    <link rel="stylesheet" href="/main.css" />
     <script>
       new EventSource('/esbuild').addEventListener('change', ev => {
-        let stylesheet = document.querySelector('link');
+        console.log('File changed, running hot reload');
+        let stylesheet = document.querySelector('link[rel="stylesheet"]');
         try {
           const { updated, added } = JSON.parse(ev.data);
           const ts = new Date().getTime();
-          if (updated.includes('/entrypoint.css') || added.includes('/entrypoint.css')) {
-            document.head.removeChild(stylesheet);
-            stylesheet = document.createElement('link');
-            stylesheet.rel = 'stylesheet';
-            stylesheet.href = '/entrypoint.css?_=' + ts;
-            document.head.appendChild(stylesheet);
+          if (updated.includes('/main.css') || added.includes('/main.css')) {
+            // https://esbuild.github.io/api/#hot-reloading-css
+            const newStylesheet = document.createElement('link');
+            newStylesheet.rel = 'stylesheet';
+            newStylesheet.href = '/main.css?_=' + ts;
+            // wait until new stylesheet has loading to prevent FOUC
+            newStylesheet.onload = () => stylesheet.remove();
+            document.head.appendChild(newStylesheet);
           }
           if (updated.includes('/entrypoint.js')) {
             import('./entrypoint.js?_=' + ts).then(({ mainTemplate }) => {

package/src/serve.js

@@ -8,7 +8,7 @@ const { getValidLoginAndCurrentMerchant } = require('./auth');
 const { open, getcwd, glob, readPackageJson, packageJsonKeys } = require('./utils');
 const { impersonate } = require('./impersonate');
 
-const setupSmiDevMode = async argv => {
+async function getGlobals(argv) {
   let hmacAuth = "''",
     merchant,
     customer,
@@ -17,13 +17,23 @@ const setupSmiDevMode = async argv => {
   if ('impersonate' in argv) {
     [_token, merchant, customer] = await impersonate(argv);
 
-    hmacAuth = customer && JSON.stringify([customer.merchant_user_id, customer.ts, customer.hash].join('|'));
+    hmacAuth = customer && [customer.merchant_user_id, customer.ts, customer.hash].join('|');
   }
 
   const packageJson = readPackageJson();
   const smiCoreVersion = packageJson[packageJsonKeys.OG_SECTION]?.[packageJsonKeys.CORE_VERSION] || 'latest';
 
   return {
+    OG_MERCHANT_ID: merchant ? merchant.public_id : '',
+    OG_HMAC_AUTH: hmacAuth,
+    OG_ENV: argv.env,
+    OG_SMI_CORE_VERSION: smiCoreVersion
+  };
+}
+
+const smiDevModePlugin = globals => {
+  /** @type {import('esbuild').Plugin} */
+  const plugin = {
     name: 'resolve_smi_templates',
     setup(build) {
       build.onLoad({ filter: /main\.liquid/ }, async () => {
@@ -48,50 +58,31 @@ const setupSmiDevMode = async argv => {
         };
       });
 
-      build.onResolve({ filter: /(^entrypoint\.js$|^\.\/runtime-config(\.js)?$)/ }, args => {
-        const c = {
+      // allow importing a non-existent 'virtual:globals.json' file containing build-time variables
+      const virtualGlobalsFilter = /^virtual:globals.json$/;
+      build.onResolve({ filter: virtualGlobalsFilter }, args => {
+        return {
           path: args.path,
-          namespace: 'entrypoint-ns'
+          namespace: 'virtual-globals'
+        };
+      });
+      build.onLoad({ filter: virtualGlobalsFilter }, () => {
+        return {
+          contents: JSON.stringify(globals),
+          loader: 'json'
         };
-        return c;
       });
 
-      // Load paths tagged with the "env-ns" namespace and behave as if
-      // they point to a JSON file containing the environment variables.
-      build.onLoad({ filter: /(^entrypoint\.js$|^\.\/runtime-config(\.js)?$)/ }, async args => {
-        // all this files have been resolved by precompile, here is only to list them in bundle
-        if (args.path === 'entrypoint.js')
-          return {
-            contents: fs.existsSync(`${getcwd()}/${args.path}`)
-              ? fs.readFileSync(`${getcwd()}/${args.path}`)
-              : fs.readFileSync(`${__dirname}/partials/entrypoint.js`),
-            resolveDir: getcwd(),
-            loader: 'js',
-            watchFiles: [path.resolve('./styles/main.less'), path.resolve('./views/main.liquid')]
-          };
-
-        if (args.path === './runtime-config') {
-          const smiIndexSource = (
-            await esbuild.transform(fs.readFileSync(`${__dirname}/partials/devmode.js`, 'utf8'), {
-              define: {
-                OG_MERCHANT_ID: merchant ? JSON.stringify(merchant.public_id) : "''",
-                OG_HMAC_AUTH: hmacAuth,
-                OG_ENV: JSON.stringify(argv.env),
-                OG_SMI_CORE_VERSION: JSON.stringify(smiCoreVersion)
-              }
-            })
-          ).code;
-
-          return {
-            contents: smiIndexSource,
-            loader: 'js',
-            resolveDir: getcwd()
-          };
-        }
-        throw new Error('Invalid loader');
+      // take imports starting with ~/ and resolve them inside the current working directory
+      build.onResolve({ filter: /^~\// }, args => {
+        return build.resolve(args.path.replace('~/', './'), {
+          kind: 'import-statement',
+          resolveDir: getcwd()
+        });
       });
     }
   };
+  return plugin;
 };
 
 async function serve(argv) {
@@ -111,10 +102,12 @@ async function serve(argv) {
   const smiIndexSource = fs.readFileSync(`${__dirname}/partials/index.html`, 'utf8');
   fs.writeFileSync(smiIndexFile, smiIndexSource, { encoding: 'utf8' });
 
+  const globals = await getGlobals(argv);
+
+  /** @type {import('esbuild').BuildOptions} */
   const buildConf = {
-    entryPoints: {
-      entrypoint: 'entrypoint.js'
-    },
+    entryPoints: [path.join(__dirname, 'partials', 'entrypoint.js'), mainLess],
+    entryNames: '[name]',
 
     logLevel: verbose ? 'verbose' : 'error',
     nodePaths: [path.join(getcwd(), 'node_modules')],
@@ -128,7 +121,7 @@ async function serve(argv) {
     sourcemap: true,
 
     outdir: path.join(getcwd(), outdir),
-    plugins: [await setupSmiDevMode(argv), lessLoader()]
+    plugins: [smiDevModePlugin(globals), lessLoader()]
   };
 
   if (!mainLess) {