cloudcommerce 2.4.2 → 2.5.0

package/packages/storefront/src/lib/layouts/BaseHead.astro

@@ -93,7 +93,7 @@ window._emitApiContext = (id = null) => {
     url: $storefront.url,
     apiContext: $storefront.apiContext,
   });
-  console.log('[ctx] emit ' + id);
+  console.debug('[ctx] emit ' + id);
   window.dispatchEvent(new Event('storefront:apiContext'));
   window._emitedContextId = id;
   window.__sfIds = {};

package/packages/storefront/src/lib/scripts/decap-cms.ts

@@ -1,15 +1,30 @@
 import Deepmerge from '@fastify/deepmerge';
 import afetch from '../../helpers/afetch';
 import getCmsConfig from '../../decap-cms/get-cms-config';
-import genPreviewContainer from '../../decap-cms/gen-preview-container';
+import createPreviewComponent from '../../decap-cms/create-preview-component';
 
-let cmsConfig: Record<string, any> = getCmsConfig();
-let ghToken: string | undefined;
+let cmsConfig: Record<string, any> = {};
 const initCmsWithPreview = () => {
-  const { React, CMS } = window as any;
+  const { createClass, h, CMS } = window as any;
   CMS.init({ config: cmsConfig });
-  const Preview = genPreviewContainer({ React, cmsConfig, ghToken });
-  CMS.registerPreviewTemplate('general', Preview);
+  if (createClass && h) {
+    const Preview = createPreviewComponent({
+      createClass,
+      h,
+      cmsConfig,
+    });
+    cmsConfig.collections.forEach(({ name, files }) => {
+      const char = name.charAt(0);
+      if (char === '_' || char === '.') return;
+      if (files) {
+        files.forEach((file: Record<string, any>) => {
+          CMS.registerPreviewTemplate(file.name, Preview);
+        });
+        return;
+      }
+      CMS.registerPreviewTemplate(name, Preview);
+    });
+  }
 };
 
 const authAndInitCms = async () => {
@@ -18,8 +33,14 @@ const authAndInitCms = async () => {
     sessionStorage,
     ECOM_STORE_ID,
     GIT_REPO,
+    CMS_CUSTOM_CONFIG,
     CMS_SSO_URL = 'https://app.e-com.plus/pages/login?api_version=2',
   } = window;
+  cmsConfig = getCmsConfig();
+  if (CMS_CUSTOM_CONFIG) {
+    const deepmerge = Deepmerge();
+    cmsConfig = deepmerge(cmsConfig, CMS_CUSTOM_CONFIG);
+  }
   if (import.meta.env.DEV) {
     cmsConfig.local_backend = true;
     cmsConfig.backend = {
@@ -60,7 +81,7 @@ const authAndInitCms = async () => {
       ...cmsConfig.backend,
     };
     if (cmsConfig.backend.api_root?.startsWith('https://ecomplus.app/')) {
-      const res = await afetch('https://ecomplus.app/api/github-installation', {
+      const res = await afetch('https://ecomplus.app/api/github-installations', {
         headers: {
           'X-Store-ID': `${ECOM_STORE_ID}`,
           Authorization: `Bearer ${ssoToken}`,
@@ -76,7 +97,7 @@ const authAndInitCms = async () => {
           if (installation?.gh_token && installation.gh_token.charAt(0) !== '*') {
             // Consume GitHub REST API directly
             token = installation.gh_token as string;
-            ghToken = token;
+            // ghToken = token;
             delete cmsConfig.backend.api_root;
             cmsConfig.backend.repo = installation.repository;
             cmsConfig.backend.name = 'github';
@@ -118,26 +139,13 @@ const authAndInitCms = async () => {
 };
 
 if (!import.meta.env.SSR) {
-  if (window.CMS_CUSTOM_CONFIG) {
-    const deepmerge = Deepmerge();
-    cmsConfig = deepmerge(cmsConfig, window.CMS_CUSTOM_CONFIG);
-  }
   (window as any).CMS_MANUAL_INIT = true;
-  /* eslint-disable import/no-unresolved */
-  Promise.all([
-    // @ts-ignore
-    import(/* @vite-ignore */ 'https://esm.sh/react@^18'),
-    // @ts-ignore
-    import(/* @vite-ignore */ 'https://esm.sh/decap-cms-app@^3'),
-  ])
-    .then(([React, { default: CMS }]) => {
-      (window as any).React = React;
-      (window as any).CMS = CMS;
-      authAndInitCms();
-    })
-    .catch((err) => {
-      console.error(err);
-      // eslint-disable-next-line
-      window.alert('Failed importing Decap CMS app or preview dependencies');
-    });
+  if (window.CMS) {
+    authAndInitCms();
+  } else {
+    const cmsScript = document.createElement('script');
+    cmsScript.src = 'https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js';
+    cmsScript.onload = authAndInitCms;
+    document.body.appendChild(cmsScript);
+  }
 }

package/packages/storefront/src/lib/ssr-context.ts

@@ -118,7 +118,27 @@ const loadRouteContext = async (
   let urlPath = Astro.url.pathname;
   const isPreview = urlPath.startsWith('/~preview');
   if (isPreview) {
-    urlPath = urlPath.replace('/~preview', '');
+    urlPath = urlPath.replace(/^\/~[^/]+\/?/, '/');
+    const getQueryContent = (filename: string) => {
+      const contentJson = Astro.url.searchParams.get(`content:${filename}`);
+      if (typeof contentJson === 'string') {
+        try {
+          const content = JSON.parse(contentJson);
+          return content;
+        } catch {
+          //
+        }
+      }
+      return null;
+    };
+    global.$storefrontCmsHandler = ({ filename, loadLocal }) => {
+      const content = getQueryContent(filename);
+      if (filename === 'settings') return content || loadLocal();
+      return new Promise((resolve) => {
+        if (content) resolve(content);
+        loadLocal().then(resolve);
+      });
+    };
   }
   const isHomepage = urlPath === '/';
   const isSearchPage = !isHomepage && (urlPath.startsWith('/s/') || urlPath === '/s');
@@ -131,7 +151,9 @@ const loadRouteContext = async (
   }
   const config = getConfig();
   globalThis.$storefront.settings = config.settings;
-  let cmsContent: PageContent | null = { sections: [] };
+  let cmsContent: PageContent & { $filename?: `${string}/${string}` } | null = {
+    sections: [],
+  };
   const apiState: {
     categories?: CategoriesList,
     brands?: BrandsList,
@@ -157,13 +179,14 @@ const loadRouteContext = async (
     error: null,
   };
   const { slug } = Astro.params;
+  let contentFilename: `${string}/${string}` | undefined;
   if (isHomepage) {
-    cmsContent = await config.getContent('pages/home');
+    contentFilename = 'pages/home';
   } else if (isSearchPage) {
-    cmsContent = await config.getContent('pages/search');
+    contentFilename = 'pages/search';
   } else if (slug && typeof slug === 'string') {
     if (contentCollection) {
-      cmsContent = await config.getContent(`${contentCollection}/${slug}`);
+      contentFilename = `${contentCollection}/${slug}`;
     } else if (slug.startsWith('_api/') || slug === '_analytics') {
       const err: any = new Error(`/${slug} route not implemented on SSR directly`);
       Astro.response.status = 501;
@@ -177,10 +200,12 @@ const loadRouteContext = async (
             Object.assign(apiContext, response.data);
             const apiResource = apiContext.resource as
               Exclude<typeof apiContext.resource, undefined>;
-            config.getContent(`pages/${apiResource}`)
+            contentFilename = `pages/${apiResource}`;
+            config.getContent(contentFilename)
               .then((_cmsContent) => {
                 if (cmsContent && _cmsContent) {
                   Object.assign(cmsContent, _cmsContent);
+                  cmsContent.$filename = contentFilename;
                 }
               })
               .catch(console.warn);
@@ -212,6 +237,10 @@ const loadRouteContext = async (
       }
     }
   }
+  if (contentFilename) {
+    cmsContent = await config.getContent(contentFilename);
+    if (cmsContent) cmsContent.$filename = contentFilename;
+  }
   try {
     (await Promise.all(apiPrefetchings)).forEach((response) => {
       if (response) {
@@ -267,11 +296,6 @@ const loadRouteContext = async (
   } else {
     setResponseCache(Astro, 120, 180);
   }
-  if (isPreview || urlPath.startsWith('/admin/')) {
-    // https://webcontainers.io/guides/configuring-headers#configuring-headers
-    Astro.response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
-    Astro.response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
-  }
   const routeContext = {
     ...config,
     isHomepage,

package/packages/storefront/src/lib/state/use-cms-preview.ts

@@ -1,38 +1,99 @@
-import type { ContentFilename, ContentData } from '@@sf/content';
-import { shallowRef } from 'vue';
+import type { Ref, ShallowRef, ShallowReactive } from 'vue';
+import type { ContentFilename, ContentData as _ContentData } from '@@sf/content';
+import { watch, shallowRef } from 'vue';
 
-function getCmsUpdates<T extends ContentFilename>(
-  filename: T,
-  cb: (newData: NonNullable<ContentData<T>>) => void,
-) {
-  if (!import.meta.env.SSR) {
+type ContentData<T extends ContentFilename> = NonNullable<_ContentData<T>>;
+
+type SubfieldContentKeys<
+  T extends ContentFilename,
+  F extends undefined | keyof ContentData<T>,
+> = F extends keyof ContentData<T> ? keyof ContentData<T>[F] : undefined;
+
+type NestedContentData<
+  T extends ContentFilename,
+  F extends undefined | keyof ContentData<T>,
+  S extends SubfieldContentKeys<T, F>,
+> = F extends keyof ContentData<T>
+  ? S extends keyof ContentData<T>[F]
+    ? ContentData<T>[F][S] : ContentData<T>[F]
+  : ContentData<T>;
+
+export function useCmsPreview<
+  T extends ContentFilename,
+  F extends keyof ContentData<T>,
+  S extends SubfieldContentKeys<T, F>,
+>(filename: T | [T] | [T, F] | [T, F, S]) {
+  let field: F | undefined;
+  let subfield: S | undefined;
+  if (Array.isArray(filename)) {
+    field = filename[1];
+    subfield = filename[2];
+    filename = filename[0];
+  }
+  const liveContent = shallowRef<NestedContentData<T, F, S> | undefined>();
+  if (!import.meta.env.SSR && window.$isCmsPreview) {
     const id = btoa(JSON.stringify({ filename }));
-    window.parent.postMessage(
-      JSON.parse(JSON.stringify({
-        type: 'open',
-        filename,
-        id,
-      })),
-      window.location.origin,
-    );
+    const openMessage = {
+      type: 'open',
+      filename,
+      field,
+      subfield,
+      id,
+    };
+    window.parent.postMessage(openMessage, window.location.origin);
     window.addEventListener('message', (event) => {
       if (event.data.id === id) {
-        cb(event.data.data);
+        if (field) {
+          liveContent.value = subfield
+            ? event.data.data[field][subfield]
+            : event.data.data[field];
+        } else {
+          liveContent.value = event.data.data;
+        }
       }
     });
   }
-}
-
-const useCmsPreview = <T extends ContentFilename>(filename: T) => {
-  const liveContent = shallowRef<NonNullable<ContentData<T>> | null>(null);
-  if (!import.meta.env.SSR && window.$isCmsPreview) {
-    getCmsUpdates(filename, (newData) => {
-      liveContent.value = newData;
-    });
-  }
   return { liveContent };
-};
+}
 
 export default useCmsPreview;
 
-export { useCmsPreview, getCmsUpdates };
+export interface SectionPreviewProps {
+  cmsPreview?: {
+    contentFilename: `${string}/${string}`;
+    sectionIndex: number;
+  };
+}
+
+export const useSectionPreview = (
+  { cmsPreview }: SectionPreviewProps,
+  refs?: Record<string, Ref<any> | ShallowRef<any> | ShallowReactive<any>>,
+) => {
+  if (cmsPreview) {
+    const { contentFilename, sectionIndex } = cmsPreview;
+    const {
+      liveContent,
+    } = useCmsPreview([contentFilename, 'sections', sectionIndex]);
+    if (refs) {
+      watch(liveContent, (data) => {
+        if (!data) return;
+        Object.keys(refs).forEach((key) => {
+          if (refs[key].value !== undefined) {
+            if (data[key] === undefined) return;
+            refs[key].value = data[key];
+            return;
+          }
+          if (!data[key]) return;
+          if (Array.isArray(refs[key])) {
+            refs[key].splice(0);
+            data[key].forEach((v: any) => refs[key].push(v));
+            return;
+          }
+          Object.assign(refs[key], data[key]);
+        });
+      });
+    }
+    return { liveContent };
+  }
+  return null;
+};

package/packages/test-base/package.json

@@ -2,7 +2,7 @@
   "name": "@cloudcommerce/test-base",
   "private": true,
   "type": "module",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "description": "E-Com Plus Cloud Commerce basic setup for testing",
   "main": "lib/index.js",
   "repository": {

package/packages/types/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/types",
   "type": "module",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "description": "E-Com Plus Cloud Commerce reusable type definitions",
   "main": "index.ts",
   "repository": {

package/packages/storefront/config/astro/context-directive.mjs

@@ -1,46 +0,0 @@
-/**
- * Hydrate on context script executed (`$storefront.apiContext` ready)
- * Check event emits at BaseHead.astro and use-shared-data.ts
- * @type {import('astro').ClientDirective}
- */
-export default (load, opts) => {
-  const hy = async () => {
-    const hydrate = await load();
-    await hydrate();
-  };
-  const next = () => {
-    const arrOpts = Array.isArray(opts.value) ? opts.value : [opts.value];
-    for (let i = 0; i < arrOpts.length; i++) {
-      if (typeof arrOpts[i] === 'string' && arrOpts[i].startsWith('data:')) {
-        const field = arrOpts[i].substring(5);
-        if (!window.$storefront?.data?.[field]) {
-          window.addEventListener(
-            `storefront:data:${field}`,
-            next,
-            { once: true },
-          );
-          return;
-        }
-      }
-    }
-    if (arrOpts.includes('idle')) {
-      if (typeof window.requestIdleCallback === 'function') {
-        setTimeout(() => window.requestIdleCallback(hy), 9);
-        return;
-      }
-      setTimeout(hy, 200);
-      return;
-    }
-    hy();
-  };
-  const id = window.$storefront?.apiContext?.doc._id || null;
-  if (window._firstLoadContextId === id && window._emitedContextId === id) {
-    console.log('[ctx] first load');
-    next();
-    document.addEventListener('astro:beforeload', () => {
-      delete window._firstLoadContextId;
-    }, { once: true });
-    return;
-  }
-  window.addEventListener('storefront:apiContext', next, { once: true });
-};

package/packages/storefront/src/decap-cms/gen-preview-container.ts

@@ -1,51 +0,0 @@
-import type NReact from 'react';
-import { initWebcontainer } from './preview/webcontainer';
-
-export const genPreviewContainer = ({ React, cmsConfig, ghToken }: {
-  React: typeof NReact,
-  cmsConfig: Record<string, any>,
-  ghToken?: string,
-}) => {
-  const { repo } = cmsConfig.backend;
-  const cliTextareaId = 'webcontainerCli';
-  const serverIframeId = 'serverPreview';
-  // https://github.com/decaporg/decap-cms/issues/2183#issuecomment-997373169
-  return class Prevew extends React.Component {
-    render() {
-      const { entry } = (this as any).props;
-      console.log({ entry });
-      const slug = '';
-      const urlPath = `/~preview/${slug}`;
-      const html = `
-      <textarea id="${cliTextareaId}"></textarea>
-      <iframe
-        if="${serverIframeId}"
-        data-url="${urlPath}"
-        border="0"
-        width="100%"
-        height="100%"
-        style="border: 1px solid #EEE; height: calc(100vh - 30px)"
-      ></iframe>`;
-      return React.createElement('div', {
-        dangerouslySetInnerHTML: { __html: html },
-      });
-    }
-    componentDidMount() {
-      const iframe = document.getElementById('preview-pane') as HTMLIFrameElement;
-      const cliTextarea = iframe.contentWindow!.document
-        .getElementById(cliTextareaId) as HTMLTextAreaElement;
-      const previewIframe = iframe.contentWindow!.document
-        .getElementById(serverIframeId) as HTMLIFrameElement;
-      initWebcontainer({ repo, ghToken, cliTextarea })
-        .then(({ webcontainerInstance, startDevServer }) => {
-          webcontainerInstance.on('server-ready', (port, url) => {
-            console.log({ port, url });
-            previewIframe.src = `${url}${previewIframe.dataset.url}`;
-          });
-          startDevServer();
-        });
-    }
-  };
-};
-
-export default genPreviewContainer;

package/packages/storefront/src/decap-cms/preview/webcontainer.ts

@@ -1,104 +0,0 @@
-import { WebContainer } from '@webcontainer/api';
-
-export const genContainerFiles = ({ repo, ghToken, repoDir }: {
-  repo: string,
-  ghToken?: string,
-  repoDir: string,
-}) => ({
-  'git.js': {
-    file: {
-      contents: `
-import fs from 'node:fs';
-import { join as joinPath } from 'node:path';
-import { clone, pull } from 'isomorphic-git';
-import * as http from 'isomorphic-git/http/node/index.cjs';
-const dir = joinPath(process.cwd(), '${repoDir}');
-const isClone = process.argv.find((val) => val === '--clone');
-const options = {
-  fs,
-  http,
-  dir,
-  singleBranch: true,
-};
-${(ghToken
-    ? `
-options.oauth2format = 'github';
-options.token = '${ghToken}';`
-    : '')}
-if (isClone) {
-  options.url = 'https://github.com/${repo}.git';
-  options.depth = 1;
-  clone(options);
-} else {
-  pull(options);
-}
-`,
-    },
-  },
-  'package.json': {
-    file: {
-      contents: `
-{
-  "name": "git-app",
-  "version": "1.0.0",
-  "type": "module",
-  "private": true,
-  "description": "",
-  "author": "",
-  "license": "ISC",
-  "scripts": {
-    "git:clone": "node git.js --clone",
-    "git:pull": "node git.js --pull"
-  },
-  "dependencies": {
-    "isomorphic-git": "^1.25.3"
-  }
-}`,
-    },
-  },
-});
-
-export const initWebcontainer = async ({ repo, ghToken, cliTextarea }: {
-  repo: string,
-  ghToken?: string,
-  cliTextarea: HTMLTextAreaElement,
-}) => {
-  const webcontainerInstance = await WebContainer.boot();
-  const repoDir = 'store';
-  const files = genContainerFiles({ repo, ghToken, repoDir });
-  await webcontainerInstance.mount(files);
-  const exec = async (command: string, args: string[]) => {
-    const cliArgs = args.reduce((acc, opt) => `${acc} ${opt}`, '');
-    const cli = `$ ${command}${cliArgs}\n`;
-    cliTextarea.value += cli;
-    const proc = await webcontainerInstance.spawn(command, args);
-    if (import.meta.env.DEV || (window as any).DEBUG) {
-      proc.output.pipeTo(new WritableStream({
-        write(stdout) {
-          console.debug?.('webcontainer', { stdout });
-        },
-      }));
-    }
-    if (await proc.exit !== 0) {
-      throw new Error(`${command} failed`);
-    }
-  };
-  await exec('npm', ['install']);
-  await exec('npm', ['run', 'git:clone']);
-  const ssrDir = `${repoDir}/functions/ssr`;
-  await exec('npm', ['--prefix', ssrDir, 'i']);
-  await webcontainerInstance.fs.writeFile(
-    `${ssrDir}/.env`,
-    `ECOM_STORE_ID=${window.ECOM_STORE_ID}\n`,
-  );
-  const startDevServer = async () => {
-    await exec('npm', ['--prefix', ssrDir, 'run', 'dev']);
-    // Keep restarting dev server (can crash)
-    startDevServer();
-  };
-  return {
-    webcontainerInstance,
-    webcontainerExec: exec,
-    startDevServer,
-  };
-};