@ordergroove/smi-serve 1.6.2 → 1.7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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.0",
   "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": "af9f006002d62c2fe095b0d6b46c672bcd45c899"
 }

package/src/partials/devmode.js

@@ -1,24 +1,18 @@
-/* eslint "no-undef": "off" */
-/* eslint "no-nested-ternary": "off" */
-const params = new URLSearchParams(document.location.hash.substring(1) || window.location.search);
+// 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*/
+const params = new URLSearchParams(window.location.search);
 
-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 env = params.get('env') || OG_ENV;
 
-export const merchant_id = params.has('auth')
-  ? template_merchant_id || auth_merchant_id || OG_MERCHANT_ID || '0e5de2bedc5e11e3a2e4bc764e106cf4'
-  : OG_MERCHANT_ID || '0e5de2bedc5e11e3a2e4bc764e106cf4';
+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';
 
-import { merchant_id, auth_config } from './runtime-config';
+import { merchant_id, auth_config, smi_core_version } from './runtime-config';
 
-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

@@ -4,10 +4,8 @@
     <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>
     <script>
       new EventSource('/esbuild').addEventListener('change', ev => {
-        console.log('HRM', ev.data);
         let stylesheet = document.querySelector('link');
         try {
           const { updated, added } = JSON.parse(ev.data);
@@ -20,7 +18,8 @@
             document.head.appendChild(stylesheet);
           }
           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

@@ -20,6 +20,9 @@ const setupSmiDevMode = async argv => {
     hmacAuth = customer && JSON.stringify([customer.merchant_user_id, customer.ts, customer.hash].join('|'));
   }
 
+  const packageJson = readPackageJson();
+  const smiCoreVersion = packageJson[packageJsonKeys.OG_SECTION]?.[packageJsonKeys.CORE_VERSION] || 'latest';
+
   return {
     name: 'resolve_smi_templates',
     setup(build) {
@@ -73,7 +76,8 @@ const setupSmiDevMode = async argv => {
               define: {
                 OG_MERCHANT_ID: merchant ? JSON.stringify(merchant.public_id) : "''",
                 OG_HMAC_AUTH: hmacAuth,
-                OG_ENV: JSON.stringify(argv.env)
+                OG_ENV: JSON.stringify(argv.env),
+                OG_SMI_CORE_VERSION: JSON.stringify(smiCoreVersion)
               }
             })
           ).code;
@@ -103,13 +107,8 @@ 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 buildConf = {