cloudcommerce 2.3.2 → 2.3.3

package/packages/feeds/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/feeds",
   "type": "module",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "E-Com Plus Cloud Commerce catalog feeds",
   "main": "lib/index.js",
   "exports": {

package/packages/firebase/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/firebase",
   "type": "module",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "E-Com Plus Cloud Commerce on Firebase",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/packages/i18n/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/i18n",
   "type": "module",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "E-Com Plus Cloud Commerce i18n",
   "main": "lib/all.js",
   "exports": {

package/packages/modules/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/modules",
   "type": "module",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "E-Com Plus Cloud Commerce modules API",
   "main": "lib/index.cjs",
   "exports": {

package/packages/passport/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/passport",
   "type": "module",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "E-Com Plus Cloud Commerce customers authentication (passport) API",
   "main": "lib/index.js",
   "exports": {

package/packages/ssr/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/ssr",
   "type": "module",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "E-Com Plus Cloud Commerce storefront SSR",
   "main": "lib/index.js",
   "exports": {
@@ -32,7 +32,7 @@
     "@cloudcommerce/i18n": "workspace:*",
     "@ecomplus/utils": "1.5.0-rc.6",
     "@vueuse/core": "10.7.2",
-    "astro": "4.3.2",
+    "astro": "4.3.5",
     "astro-capo": "^0.0.1",
     "axios": "^1.6.7",
     "firebase-admin": "^12.0.0",

package/packages/storefront/client.d.ts

@@ -27,6 +27,9 @@ interface Window {
   ECOM_COUNTRY_CODE: string;
   GIT_BRANCH: string;
   AB_EXPERIMENT_ID?: string;
+  CMS_CUSTOM_CONFIG?: Record<string, any>;
+  CMS_SSO_URL?: string | null;
+  CMS_REPO_BASE_DIR?: string;
   $storefront?: import('@@sf/$storefront').$Storefront & {
     modulesInfoPreset?: Partial<typeof import('./src/lib/state/modules-info').default>,
   };

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"
@@ -43,7 +43,7 @@
     "@types/gtag.js": "^0.0.18",
     "@vite-pwa/astro": "^0.2.0",
     "@vueuse/core": "10.7.2",
-    "astro": "4.3.2",
+    "astro": "4.3.5",
     "astro-capo": "^0.0.1",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.4.1",
@@ -64,6 +64,7 @@
   },
   "devDependencies": {
     "@cloudcommerce/eslint": "workspace:*",
-    "@cloudcommerce/types": "workspace:*"
+    "@cloudcommerce/types": "workspace:*",
+    "@webcontainer/api": "^1.1.9"
   }
 }

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

@@ -0,0 +1,32 @@
+import type { WebContainer as IWebContainer } from '@webcontainer/api';
+
+export const genPreviewContainer = async ({ createClass, h, WebContainer }: {
+  createClass: (o: { render: () => HTMLElement }) => (...args: any) => any,
+  h: (n: string, ...args: any) => HTMLElement, // React.createElement
+  WebContainer: any,
+}) => {
+  const webcontainerInstance: IWebContainer = await WebContainer.boot();
+  console.log({ webcontainerInstance });
+  // https://github.com/decaporg/decap-cms/issues/2183#issuecomment-997373169
+  return createClass({
+    render() {
+      const { entry } = (this as any).props;
+      console.log({ entry });
+      const { host } = window.location;
+      const slug = '';
+      const isLocal = host.startsWith('localhost') || host.startsWith('127.0.0.');
+      const src = `${isLocal ? 'http' : 'https'}://${host}/~preview/${slug}`;
+      const html = `
+      <iframe
+        border="0"
+        src="${src}"
+        width="100%"
+        height="100%"
+        style="border: 1px solid #EEE; height: calc(100dvh - 12px)"
+      ></iframe>`;
+      return h('div', { dangerouslySetInnerHTML: { __html: html } });
+    },
+  });
+};
+
+export default genPreviewContainer;

package/packages/storefront/src/decap-cms/get-cms-config.ts

@@ -0,0 +1,59 @@
+export const getCmsConfig = () => {
+  const baseDir = window.CMS_REPO_BASE_DIR || 'functions/ssr/';
+  const config: Record<string, any> = {
+    load_config_file: false,
+    media_folder: `${baseDir}template/public/img/uploads`,
+    public_folder: '/img/uploads',
+    slug: {
+      encoding: 'ascii',
+      clean_accents: true,
+      sanitize_replacement: '-',
+    },
+    collections: [
+      {
+        name: 'settings',
+        label: 'Configurações',
+        description: 'Configurações gerais para identidade e metadados do site',
+        delete: false,
+        editor: {
+          preview: false,
+        },
+        files: [
+          {
+            name: 'general',
+            label: 'Configurações gerais',
+            file: `${baseDir}content/settings.json`,
+            editor: {
+              preview: true,
+            },
+            fields: [
+              {
+                label: 'E-Com Plus Store ID',
+                name: 'store_id',
+                widget: 'hidden',
+              },
+              {
+                label: 'Repositório',
+                name: 'repository',
+                widget: 'hidden',
+              },
+              {
+                label: 'Domínio',
+                name: 'domain',
+                widget: 'string',
+              },
+              {
+                label: 'Nome da loja',
+                name: 'name',
+                widget: 'string',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+  return config;
+};
+
+export default getCmsConfig;

package/packages/storefront/src/lib/components/ViewTransitions.astro

@@ -291,7 +291,8 @@ const { fallback = 'animate' } = Astro.props as Props;
 
   if (
     (supportsViewTransitions || getFallback() !== 'none') &&
-    !location.pathname.startsWith('/app/')
+    !location.pathname.startsWith('/app/') &&
+    !location.pathname.startsWith('/admin/')
   ) {
     markScriptsExec();
 
@@ -310,6 +311,7 @@ const { fallback = 'animate' } = Astro.props as Props;
         link.hasAttribute('download') ||
         !link.href ||
         link.pathname.startsWith('/app/') || // "real" SPA routes
+        link.pathname.startsWith('/admin/') || // CMS route
         (link.target && link.target !== '_self') ||
         link.origin !== location.origin ||
         ev.button !== 0 || // left clicks only
@@ -390,6 +392,7 @@ const { fallback = 'animate' } = Astro.props as Props;
               el.origin === location.origin &&
               el.pathname !== location.pathname &&
               !el.pathname.startsWith('/app/') && // "real" SPA routes
+              !el.pathname.startsWith('/admin/') && // CMS route
               el.dataset.astroReload === undefined &&
               !el.hasAttribute('download') &&
               /* <a role=button> commonly used as no-JS interaction fallback,

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

@@ -88,6 +88,11 @@ if (!ogImage) {
 
 let inlineClientJS = `
 window._emitApiContext = (id = null) => {
+  $storefront.url = new URL(window.location.toString());
+  $storefront.getSession = (/* sid */) => ({
+    url: $storefront.url,
+    apiContext: $storefront.apiContext,
+  });
   console.log('[ctx] emit ' + id);
   window.dispatchEvent(new Event('storefront:apiContext'));
   window._emitedContextId = id;
@@ -135,16 +140,11 @@ if (apiDoc) {
   inlineClientJS += `
 window._firstLoadContextId = '${apiDoc._id}';`;
   contextInlineClientJS = `
-$storefront.url = new URL(window.location.toString());
 $storefront.apiContext = ${JSON.stringify({
     resource: apiContext.resource,
     doc: minifyApiDoc({ ...apiDoc }),
     timestamp: Date.now(),
   })};
-$storefront.getSession = (/* sid */) => {
-  url: $storefront.url,
-  apiContext: $storefront.apiContext,
-};
 $storefront.context /* DEPRECATED */ = $storefront.apiContext;
 _emitApiContext('${apiDoc._id}');`;
 } else {

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

@@ -0,0 +1,117 @@
+import Deepmerge from '@fastify/deepmerge';
+import getCmsConfig from '../../decap-cms/get-cms-config';
+import genPreviewContainer from '../../decap-cms/gen-preview-container';
+
+let cmsConfig: Record<string, any> = getCmsConfig();
+const initCmsWithPreview = () => {
+  const {
+    CMS,
+    initCMS,
+    createClass,
+    h,
+  } = window as any as {
+    CMS: Record<string, any>,
+    initCMS: (c: { config: Record<string, any> }) => void,
+    createClass: any,
+    h: any,
+  };
+  initCMS({ config: cmsConfig });
+  /* eslint-disable import/no-unresolved */
+  // @ts-ignore
+  import(/* @vite-ignore */ 'https://esm.sh/@webcontainer/api@^1')
+    .then(({ WebContainer }) => {
+      const Preview = genPreviewContainer({ createClass, h, WebContainer });
+      CMS.registerPreviewTemplate('general', Preview);
+    })
+    .catch((err) => {
+      console.error(err);
+      // eslint-disable-next-line
+      window.alert('Failed importing WebContainer for live preview');
+    });
+};
+
+const initCmsAuth = () => {
+  if (import.meta.env.DEV) {
+    cmsConfig.local_backend = true;
+    cmsConfig.backend = { name: 'git-gateway' };
+    initCmsWithPreview();
+    return;
+  }
+  const {
+    location,
+    sessionStorage,
+    ECOM_STORE_ID,
+    CMS_SSO_URL = 'https://app.e-com.plus/pages/login?api_version=2',
+  } = window;
+  const sessionToken = sessionStorage.getItem('cms_token');
+  const searchParams = new URLSearchParams(location.search);
+  const ssoToken = searchParams.get('sso_token') || searchParams.get('access_token');
+  if (!cmsConfig.backend?.base_url) {
+    if (!sessionToken && !ssoToken && CMS_SSO_URL) {
+      const url = new URL(CMS_SSO_URL);
+      url.searchParams.set('sso_store_id', `${ECOM_STORE_ID}`);
+      url.searchParams.set('sso_redirect', location.href);
+      location.href = url.toString();
+      return;
+    }
+    cmsConfig.backend = {
+      repo: '_owner/_name',
+      api_root: 'https://ecomplus.app/api/git/github/',
+      name: 'github',
+      base_url: `https://${location.hostname}`,
+      auth_endpoint: location.pathname, // self
+      branch: 'main',
+      commit_messages: {
+        create: 'Create {{collection}} “{{slug}}”',
+        update: 'Update {{collection}} “{{slug}}”',
+        delete: 'Delete {{collection}} “{{slug}}”',
+        uploadMedia: 'Upload “{{path}}”',
+        deleteMedia: '[skip ci] Delete “{{path}}”',
+        openAuthoring: '{{message}}',
+        ...cmsConfig.backend?.commit_messages,
+      },
+      ...cmsConfig.backend,
+    };
+  }
+  if (sessionToken) {
+    initCmsWithPreview();
+    // Ref.: https://github.com/decaporg/decap-cms/blob/e93c94f1ce707719dfb7750af82b17c38b461831/packages/decap-cms-lib-auth/src/netlify-auth.js#L46
+    // E.g.: https://github.com/Herohtar/netlify-cms-oauth-firebase/blob/master/functions/index.js#L9-L25
+    const self = window.opener || window;
+    setTimeout(() => {
+      self.postMessage('authorizing:github', '*');
+      self.postMessage(
+        `authorization:github:success:${JSON.stringify({
+          sessionToken,
+          provider: cmsConfig.backend.name,
+        })}`,
+        cmsConfig.backend.base_url,
+      );
+    }, 100);
+    return;
+  }
+  if (ssoToken) {
+    window.history?.pushState(
+      'hide-token',
+      document.title,
+      `${location.pathname}${location.search}${location.hash}`,
+    );
+    const provider = cmsConfig.backend.name;
+    if (provider && provider !== 'git-gateway') {
+      sessionStorage.setItem('cms_token', ssoToken);
+    }
+  }
+  initCmsWithPreview();
+};
+
+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;
+  const cmsScript = document.createElement('script');
+  cmsScript.src = 'https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js';
+  cmsScript.onload = initCmsAuth;
+  document.body.appendChild(cmsScript);
+}

package/packages/test-base/package.json

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

package/packages/storefront/src/lib/scripts/git-cms-auth.ts

@@ -1,3 +0,0 @@
-// https://github.com/Herohtar/netlify-cms-oauth-firebase/blob/master/functions/index.js#L9-L25
-
-// window.postMessage(...);