@ordergroove/smi-serve 1.6.2 → 1.7.1

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Features
+
+* use smi-preview data in smi-serve ([4ed09e7](https://github.com/ordergroove/plush-toys/commit/4ed09e7494cde0352151e77d168e412c9c9a538b))
+
+
+
+
+
 ## [1.6.2](https://github.com/ordergroove/plush-toys/compare/@ordergroove/smi-serve@1.6.1...@ordergroove/smi-serve@1.6.2) (2024-04-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/smi-serve",
-  "version": "1.6.2",
+  "version": "1.7.1",
   "description": "Utility to serve a SMI template locally",
   "keywords": [],
   "author": "Eugenio Lattanzio <eugenio.lattanzio@ordergroove.com>",
@@ -32,5 +32,5 @@
     "ora": "^5.4.1",
     "yargs": "^17.7.2"
   },
-  "gitHead": "08e75f787367ce639b591f9e2f2402cfb8badfe6"
+  "gitHead": "6b6773a874a08a98783bae542c047dec8cfb69bf"
 }

package/src/partials/devmode.js

@@ -1,24 +1,19 @@
-/* eslint "no-undef": "off" */
-/* eslint "no-nested-ternary": "off" */
-const params = new URLSearchParams(document.location.hash.substring(1) || window.location.search);
+// 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 auth_merchant_id = params.get('m') || params.get('merchant_id') || (params.get('auth') || '').split('|')[3];
-const auth_env = params.get('env') || (params.has('prod') && 'prod') || (params.has('staging') && 'staging') || OG_ENV;
-const template_merchant_id = (params.get('t') || '').split(',')[0];
-const is_staging = auth_env.startsWith('s');
+const params = new URLSearchParams(window.location.search);
 
-export const merchant_id = params.has('auth')
-  ? template_merchant_id || auth_merchant_id || OG_MERCHANT_ID || '0e5de2bedc5e11e3a2e4bc764e106cf4'
-  : OG_MERCHANT_ID || '0e5de2bedc5e11e3a2e4bc764e106cf4';
+const env = params.get('env') || OG_ENV;
+
+export const merchant_id = params.get('merchant_id') || OG_MERCHANT_ID;
 
 export const auth_config = params.has('auth')
   ? {
-      env: is_staging ? 'staging' : 'prod',
-      auth: params.has('auth')
+      env,
+      auth: params.get('auth')
     }
   : OG_HMAC_AUTH
     ? { env: OG_ENV, auth: OG_HMAC_AUTH }
-    : {
-        auth_url: 'https://static-origin-server.ordergroove.com/0e5de2bedc5e11e3a2e4bc764e106cf4/demo/auth.json',
-        env: 'staging'
-      };
+    : null;
+
+export const smi_core_version = OG_SMI_CORE_VERSION;

package/src/partials/entrypoint.js

@@ -1,10 +1,36 @@
-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 } from './runtime-config';
+import { merchant_id, auth_config, smi_core_version } from './devmode';
 
-const smi = window.og.smi;
+// only run on initial load, not hot reload
+if (!window.og?.smi) {
+  if (auth_config && merchant_id) {
+    waitForScriptToLoad(`https://static.ordergroove.com/@ordergroove/smi-core/${smi_core_version}/dist/smi.js`).then(
+      () => {
+        window.og.smi.bootstrap({ merchant_id, ...auth_config }, mainTemplate);
+      }
+    );
+  } else {
+    waitForScriptToLoad(`https://static.ordergroove.com/@ordergroove/smi-preview/latest/`).then(() => {
+      const smiPreview = window.og['smi-preview'];
+      const preview = smiPreview.createPreview(document.body, smi_core_version);
+      preview.template = mainTemplate;
+      preview.locale = 'en-US';
+    });
+  }
+}
 
-smi.bootstrap({ merchant_id, ...auth_config }, mainTemplate);
+async function waitForScriptToLoad(src) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = src;
+    script.addEventListener('load', () => {
+      resolve();
+    });
+    document.body.appendChild(script);
+  });
+}
 
-export { mainTemplate, smi };
+// export for the live reload script to use
+export { mainTemplate };

package/src/partials/index.html

@@ -3,24 +3,26 @@
     <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" />
-    <script src="https://static.ordergroove.com/@ordergroove/smi-core/{{ SMI_CORE_VERSION }}/dist/smi.js"></script>
+    <link rel="stylesheet" href="/main.css" />
     <script>
       new EventSource('/esbuild').addEventListener('change', ev => {
-        console.log('HRM', ev.data);
-        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, smi }) => {
+            import('./entrypoint.js?_=' + ts).then(({ mainTemplate }) => {
+              const smi = window.og.smi;
               smi.HTMLSmiElement.template = mainTemplate(smi.html);
             });
           }

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,10 +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 () => {
@@ -45,49 +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)
-              }
-            })
-          ).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) {
@@ -103,19 +98,16 @@ async function serve(argv) {
 
   fs.mkdirSync(path.join(getcwd(), outdir), { recursive: true });
 
-  const packageJson = readPackageJson();
-  const smiCoreVersion = packageJson[packageJsonKeys.OG_SECTION]?.[packageJsonKeys.CORE_VERSION] || 'latest';
-
   const smiIndexFile = path.join(getcwd(), outdir, 'index.html');
-  const smiIndexSource = fs
-    .readFileSync(`${__dirname}/partials/index.html`, 'utf8')
-    .replace('{{ SMI_CORE_VERSION }}', smiCoreVersion);
+  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')],
@@ -129,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) {