cloudcommerce 2.4.1 → 2.4.3

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

@@ -1,69 +1,38 @@
-import type { WebContainer as IWebContainer } from '@webcontainer/api';
-import { RepoDatabase } from './indexeddb';
+import { WebContainer } from '@webcontainer/api';
+import { json as frozenSsrPkgJson, lock as frozenSsrPkgLock } from './ssr-package';
 
-export const genContainerFiles = ({ repo, ghToken }: {
+export const genContainerFiles = ({ repo, ghToken, repoDir }: {
   repo: string,
   ghToken?: string,
+  repoDir: string,
 }) => ({
   'git.js': {
     file: {
       contents: `
-import { join } from 'path';
-import { clone } from 'isomorphic-git';
-import * as http from 'isomorphic-git/http/node/index.cjs';
 import fs from 'node:fs';
-const exe = async () => {
-  const dir = join(process.cwd(), 'store');
-  const gitOptions = {
-    fs,
-    http,
-    dir,
-    url: 'https://github.com/${repo}.git',
-    singleBranch: true,
-    depth: 1,
-  };
-  ${(ghToken
+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
     ? `
-  gitOptions.oauth2format = 'github';
-  gitOptions.token = '${ghToken}';`
+options.oauth2format = 'github';
+options.token = '${ghToken}';`
     : '')}
-  await clone(gitOptions);
-};
-exe();
-`,
-    },
-  },
-  'unzipper.js': {
-    file: {
-      contents: `
-import AdmZip from 'adm-zip';
-const unzipDirectory = async (inputFilePath, outputDirectory) => {
-  const zip = new AdmZip(inputFilePath);
-  return new Promise((resolve, reject) => {
-    zip.extractAllToAsync(outputDirectory, true, (error) => {
-      if (error) {
-        console.error(error);
-        reject(error);
-      } else {
-        resolve();
-      }
-    });
-  });
-};
-await unzipDirectory('store.zip', 'store');
-`,
-    },
-  },
-  'zipper.js': {
-    file: {
-      contents: `
-import AdmZip from 'adm-zip';
-const zipDirectory = async (sourceDir, outputFilePath) => {
-  const zip = new AdmZip();
-  zip.addLocalFolder(sourceDir);
-  await zip.writeZipPromise(outputFilePath);
-};
-await zipDirectory('./store', './store.zip');
+if (isClone) {
+  options.url = 'https://github.com/${repo}.git';
+  options.depth = 1;
+  clone(options);
+} else {
+  pull(options);
+}
 `,
     },
   },
@@ -76,67 +45,60 @@ await zipDirectory('./store', './store.zip');
   "type": "module",
   "private": true,
   "description": "",
-  "main": "index.js",
   "author": "",
   "license": "ISC",
   "scripts": {
-    "start": "nodemon --watch './' index.js",
-    "git": "node git.js",
-    "unzipper": "node unzipper.js",
-    "zipper": "node zipper.js"
+    "git:clone": "node git.js --clone",
+    "git:pull": "node git.js --pull"
   },
   "dependencies": {
-    "dotenv": "^16.3.1",
-    "adm-zip": "^0.5.10",
-    "axios": "^1.6.2",
-    "isomorphic-git": "^1.25.2"
+    "isomorphic-git": "^1.25.3"
   }
 }`,
     },
   },
 });
 
-export const initWebcontainer = async ({
-  repo,
-  ghToken,
-  WebContainer,
-  cliTextarea,
-}: {
+export const initWebcontainer = async ({ repo, ghToken, cliTextarea }: {
   repo: string,
   ghToken?: string,
-  WebContainer: Record<string, any>,
   cliTextarea: HTMLTextAreaElement,
 }) => {
-  const webcontainerInstance: IWebContainer = await WebContainer.boot();
-  const files = genContainerFiles({ repo, ghToken });
+  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 cmd = await webcontainerInstance.spawn(command, args);
-    cmd.output.pipeTo(new WritableStream({
-      write(stdout) {
-        console.debug?.('webcontainer', { stdout });
-      },
-    }));
-    if (await cmd.exit !== 0) {
+    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']);
-  const startDevServer = async (commitSha?: string) => {
-    const repoDatabase = new RepoDatabase(repo);
-    const storedRepoZip = commitSha ? await repoDatabase.get(commitSha) : null;
-    if (!storedRepoZip) {
-      await exec('npm', ['run', 'git']);
-      await exec('npm', ['--prefix', 'store', 'i']);
-      if (commitSha) {
-        await exec('npm', ['run', 'zipper']);
-        const repoZip = await webcontainerInstance.fs.readFile('./store.zip');
-        repoDatabase.put(commitSha, repoZip);
-      }
-    }
+  await exec('npm', ['run', 'git:clone']);
+  await exec('npm', ['--prefix', repoDir, 'ci']);
+  const ssrDir = `${repoDir}/functions/ssr`;
+  webcontainerInstance.fs.writeFile(`${ssrDir}/package.json`, frozenSsrPkgJson);
+  webcontainerInstance.fs.writeFile(`${ssrDir}/package-lock.json`, frozenSsrPkgLock);
+  await exec('npm', ['--prefix', ssrDir, 'ci']);
+  await webcontainerInstance.fs.writeFile(
+    `${ssrDir}/.env`,
+    `ECOM_STORE_ID=${window.ECOM_STORE_ID}\n`,
+  );
+  const startDevServer = async () => {
+    await exec('npm', ['--prefix', repoDir, 'run', 'dev']);
+    // Keep restarting dev server (can crash)
+    // startDevServer();
   };
   return {
     webcontainerInstance,

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

@@ -1,4 +1,7 @@
 ---
+import * as url from 'node:url';
+import { join as joinPath } from 'node:path';
+import { readFileSync } from 'node:fs';
 import '@@sf/assets/reset.css';
 import '@@sf/assets/base.css';
 import '@@sf/assets/forms.css';
@@ -7,6 +10,15 @@ import '@@sf/assets/tooltip.css';
 // import 'uno.css';
 import Picture from '@@sf/components/Picture.astro';
 
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+const pkgJson = readFileSync(joinPath(__dirname, '../../../package.json'), 'utf-8');
+const {
+  name: pkgName,
+  version: pkgVersion,
+} = JSON.parse(pkgJson);
+const getInlineVersionLog = () => {
+  return `console.log('%c${pkgName} v${pkgVersion}', 'font-weight:bold')`;
+};
 const { settings } = Astro.locals.routeContext;
 ---
 
@@ -28,4 +40,5 @@ const { settings } = Astro.locals.routeContext;
       hasImg={false}
     />
   }
+  <script is:inline set:html={getInlineVersionLog()} />
 </body>

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

@@ -6,18 +6,9 @@ import genPreviewContainer from '../../decap-cms/gen-preview-container';
 let cmsConfig: Record<string, any> = getCmsConfig();
 let ghToken: string | undefined;
 const initCmsWithPreview = () => {
-  const { React, CMS, WebContainer } = window as any as {
-    React: any,
-    CMS: Record<string, any>,
-    WebContainer: any,
-  };
+  const { React, CMS } = window as any;
   CMS.init({ config: cmsConfig });
-  const Preview = genPreviewContainer({
-    React,
-    WebContainer,
-    cmsConfig,
-    ghToken,
-  });
+  const Preview = genPreviewContainer({ React, cmsConfig, ghToken });
   CMS.registerPreviewTemplate('general', Preview);
 };
 
@@ -69,7 +60,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}`,
@@ -138,13 +129,10 @@ if (!import.meta.env.SSR) {
     import(/* @vite-ignore */ 'https://esm.sh/react@^18'),
     // @ts-ignore
     import(/* @vite-ignore */ 'https://esm.sh/decap-cms-app@^3'),
-    // @ts-ignore
-    import(/* @vite-ignore */ 'https://esm.sh/@webcontainer/api@^1'),
   ])
-    .then(([React, { default: CMS }, { WebContainer }]) => {
+    .then(([React, { default: CMS }]) => {
       (window as any).React = React;
       (window as any).CMS = CMS;
-      (window as any).WebContainer = WebContainer;
       authAndInitCms();
     })
     .catch((err) => {

package/packages/test-base/package.json

@@ -2,7 +2,7 @@
   "name": "@cloudcommerce/test-base",
   "private": true,
   "type": "module",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "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.1",
+  "version": "2.4.3",
   "description": "E-Com Plus Cloud Commerce reusable type definitions",
   "main": "index.ts",
   "repository": {

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

@@ -1,51 +0,0 @@
-let db: IDBDatabase;
-const storeName = 'repo';
-
-export const startingDb = new Promise<IDBDatabase>((resolve, reject) => {
-  const openRequest = indexedDB.open('ecomplus', 2);
-  openRequest.onerror = () => {
-    reject(new Error('Why didn\'t you allow my web app to use IndexedDB?!'));
-  };
-  openRequest.onsuccess = (ev) => {
-    db = (ev.target as any).result;
-    resolve(db!);
-  };
-  openRequest.onupgradeneeded = (ev) => {
-    db = (ev.target as any).result;
-    db!.createObjectStore(storeName, { keyPath: 'sha' });
-    resolve(db!);
-  };
-});
-
-export class RepoDatabase {
-  objectKey = '';
-  data: any;
-  constructor(repo: string) {
-    this.objectKey = repo;
-  }
-  async put(sha: string, zip: any) {
-    await startingDb;
-    const data = this.data || {};
-    data.sha = sha;
-    data.zip = zip;
-    const tx = db.transaction([storeName], 'readwrite');
-    const objectStore = tx.objectStore(storeName);
-    console.log({ data });
-    objectStore.put(data, this.objectKey);
-  }
-  async get(sha: string) {
-    await startingDb;
-    const tx = db.transaction([storeName]);
-    const objectStore = tx.objectStore(storeName);
-    const request = objectStore.get(this.objectKey);
-    return new Promise((resolve, reject) => {
-      request.onerror = (error) => {
-        reject(error);
-      };
-      request.onsuccess = (ev) => {
-        this.data = (ev.target as any).result;
-        resolve(sha === this.data?.sha ? this.data.zip : null);
-      };
-    });
-  }
-}