cloudcommerce 2.3.1 → 2.3.3

package/packages/storefront/dist/server/renderers.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, h, createSSRApp } from 'vue';
 import { renderToString } from 'vue/server-renderer';
-import { m as mod, n as createApp } from './chunks/pages/__XOsz50la.mjs';
+import { o as mod, p as createApp } from './chunks/pages/__ZucPYaOo.mjs';
 
 const setup = async (app) => {
 	if ('default' in mod) {
@@ -8,6 +8,8 @@ const setup = async (app) => {
 	}
 };
 
+/* eslint-disable no-restricted-syntax */
+
 /**
  * Astro passes `children` as a string of HTML, so we need
  * a wrapper `div` to render that content as VNodes.
@@ -15,48 +17,57 @@ const setup = async (app) => {
  * This is the Vue + JSX equivalent of using `<div v-html="value" />`
  */
 const StaticHtml = defineComponent({
-	props: {
-		value: String,
-		name: String,
-		hydrate: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	setup({ name, value, hydrate }) {
-		if (!value) return () => null;
-		let tagName = hydrate ? 'astro-slot' : 'astro-static-slot';
-		return () => h(tagName, { name, innerHTML: value });
-	},
+  props: {
+    value: String,
+    name: String,
+    hydrate: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup({ name, value, hydrate }) {
+    if (!value) return () => null;
+    const tagName = hydrate ? 'astro-slot' : 'astro-static-slot';
+    return () => h(tagName, { name, innerHTML: value });
+  },
 });
 
+/**
+ * Other frameworks have `shouldComponentUpdate` in order to signal
+ * that this subtree is entirely static and will not be updated
+ *
+ * Fortunately, Vue is smart enough to figure that out without any
+ * help from us, so this just works out of the box!
+ */
+
 function check(Component) {
-	return !!Component['ssrRender'] || !!Component['__ssrInlineRender'];
+  return !!Component.ssrRender || !!Component.__ssrInlineRender;
 }
 
 async function renderToStaticMarkup(Component, inputProps, slotted, metadata) {
-	const slots = {};
-	const props = { ...inputProps };
-	delete props.slot;
-	for (const [key, value] of Object.entries(slotted)) {
-		slots[key] = () =>
-			h(StaticHtml, {
-				value,
-				name: key === 'default' ? undefined : key,
-				// Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot`
-				hydrate: metadata.astroStaticSlot ? !!metadata.hydrate : true,
-			});
-	}
-	const app = createSSRApp({ render: () => h(Component, props, slots) });
-	await setup(app);
-	const html = await renderToString(app);
-	return { html };
+  const slots = {};
+  const props = { ...inputProps };
+  delete props.slot;
+  const sid = this.result?.cookies?.get('sid')?.value;
+  for (const [key, value] of Object.entries(slotted)) {
+    slots[key] = () => h(StaticHtml, {
+      value,
+      name: key === 'default' ? undefined : key,
+      // Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot`
+      hydrate: metadata.astroStaticSlot ? !!metadata.hydrate : true,
+    });
+  }
+  const app = createSSRApp({ render: () => h(Component, props, slots) });
+  app.provide('sid', sid);
+  await setup(app);
+  const html = await renderToString(app);
+  return { html };
 }
 
 const _renderer0 = {
-	check,
-	renderToStaticMarkup,
-	supportsAstroStaticSlot: true,
+  check,
+  renderToStaticMarkup,
+  supportsAstroStaticSlot: true,
 };
 
 const renderers = [Object.assign({"name":"@astrojs/vue","clientEntrypoint":"@astrojs/vue/client.js","serverEntrypoint":"@astrojs/vue/server.js"}, { ssr: _renderer0 }),];

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"
@@ -43,18 +43,18 @@
     "@types/gtag.js": "^0.0.18",
     "@vite-pwa/astro": "^0.2.0",
     "@vueuse/core": "10.7.2",
-    "astro": "4.3.1",
+    "astro": "4.3.5",
     "astro-capo": "^0.0.1",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.4.1",
-    "firebase": "^10.7.2",
+    "firebase": "^10.8.0",
     "image-size": "^1.1.1",
     "mime": "^3.0.0",
     "mitt": "^3.0.1",
     "semver": "^7.5.4",
     "sharp": "^0.32.6",
     "tailwindcss": "^3.4.1",
-    "unocss": "^0.58.4",
+    "unocss": "^0.58.5",
     "unplugin-auto-import": "^0.17.5",
     "vite": "^5.0.11",
     "vite-plugin-pwa": "^0.17.5",
@@ -64,6 +64,7 @@
   },
   "devDependencies": {
     "@cloudcommerce/eslint": "workspace:*",
-    "@cloudcommerce/types": "workspace:*"
+    "@cloudcommerce/types": "workspace:*",
+    "@webcontainer/api": "^1.1.9"
   }
 }

package/packages/storefront/server.d.ts

@@ -11,7 +11,6 @@ declare global {
       assetsPrefix: string,
     }
   }
-  var astroUrl: URL;
 
   var $storefront: $Storefront & {
     onLoad: (callback: (...args: any[]) => void) => void,

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/$storefront.d.ts

@@ -7,24 +7,31 @@ import type {
 } from '@cloudcommerce/api/types';
 import type { SettingsContent } from '@@sf/content';
 
+export type StorefrontApiContext = {
+  resource: 'products',
+  doc: Products,
+  timestamp: number,
+} | {
+  resource: 'categories',
+  doc: Categories,
+  timestamp: number,
+} | {
+  resource: 'brands',
+  doc: Brands,
+  timestamp: number,
+} | {
+  resource: 'collections',
+  doc: Collections,
+  timestamp: number,
+};
+
 export type $Storefront = {
   settings: Partial<SettingsContent>,
-  apiContext?: {
-    resource: 'products',
-    doc: Products,
-    timestamp: number,
-  } | {
-    resource: 'categories',
-    doc: Categories,
-    timestamp: number,
-  } | {
-    resource: 'brands',
-    doc: Brands,
-    timestamp: number,
-  } | {
-    resource: 'collections',
-    doc: Collections,
-    timestamp: number,
+  url: URL,
+  apiContext?: StorefrontApiContext,
+  getSession: (sid?: string) => {
+    url: URL,
+    apiContext?: StorefrontApiContext,
   },
   data: Record<string, any> & {
     categories?: Array<Partial<Categories>>,

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/composables/use-pagination.ts

@@ -57,9 +57,7 @@ const usePagination = (props: Props) => {
 
   const baseUrl = ref('');
   watch(toRef(props, 'isUrlPath'), () => {
-    const url = import.meta.env.SSR
-      ? global.astroUrl
-      : new URL(window.location.toString());
+    const { url } = globalThis.$storefront;
     if (props.isUrlPath && !url.pathname.endsWith('/')) {
       url.pathname += '/';
     } else {

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;

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/storefront/src/lib/scripts/push-analytics-events.ts

@@ -18,27 +18,29 @@ type AnalyticsEvent = {
   name: string,
   params?: Record<string, any>,
 };
+type AnalyticsVariantCtx = Partial<ReturnType<typeof useAnalytics>>;
 let eventsToSend: Array<AnalyticsEvent> = [];
-const _sendServerEvents = useDebounceFn(() => {
+const _sendServerEvents = useDebounceFn((variantCtx?: AnalyticsVariantCtx) => {
   afetch(`/_analytics`, {
     method: 'POST',
     body: {
+      exp_variant_string: variantCtx?.expVariantString,
       ...getAnalyticsContext(),
       events: eventsToSend,
     },
   });
   eventsToSend = [];
 }, 200);
-const sendServerEvent = (analyticsEvent: AnalyticsEvent) => {
-  eventsToSend.push(analyticsEvent);
-  _sendServerEvents();
-};
 
 if (
   !import.meta.env.SSR
   && !window.location.search.includes(`__isrV=${deployRand}`)
 ) {
-  useAnalytics();
+  const variantCtx = useAnalytics();
+  const sendServerEvent = (analyticsEvent: AnalyticsEvent) => {
+    eventsToSend.push(analyticsEvent);
+    _sendServerEvents(variantCtx);
+  };
   watchGtagEvents(async (evMessage) => {
     const { name, params } = evMessage.event;
     sendServerEvent({ type: 'gtag', name, params });

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

@@ -3,7 +3,9 @@ import type { BaseConfig } from '@cloudcommerce/config';
 import type { ApiError, ApiEndpoint } from '@cloudcommerce/api';
 import type { ResourceId, CategoriesList, BrandsList } from '@cloudcommerce/api/types';
 import type { ContentGetter, SettingsContent, PageContent } from '@@sf/content';
+import type { StorefrontApiContext } from '@@sf/$storefront';
 import { EventEmitter } from 'node:events';
+import { inject, getCurrentInstance } from 'vue';
 import api from '@cloudcommerce/api';
 import _getConfig from '../../config/storefront.config.mjs';
 import { termify } from '../helpers/sf-utils';
@@ -38,14 +40,42 @@ declare global {
 if (!globalThis.$apiPrefetchEndpoints) {
   globalThis.$apiPrefetchEndpoints = [];
 }
+const sessions: Record<string, {
+  url: URL,
+  apiContext?: StorefrontApiContext,
+  _timer?: NodeJS.Timeout,
+}> = {};
+// Internal global just to early clear session objects from memory
+global.__sfSessions = sessions;
 if (!globalThis.$storefront) {
-  globalThis.$storefront = {
+  globalThis.$storefront = new Proxy({
     settings: {},
+    data: {},
+    url: undefined as any,
+    getSession(sid?: string) {
+      if (!sid && !!getCurrentInstance()) {
+        sid = inject('sid');
+      }
+      const {
+        url,
+        apiContext,
+      } = (sid && sessions[sid]) || (global.__sfSession as typeof sessions[string]);
+      return { url, apiContext };
+    },
     onLoad(callback: (...args: any[]) => void) {
       emitter.once('load', callback);
     },
-    data: {},
-  };
+  }, {
+    get(target, prop) {
+      if (prop === 'apiContext') {
+        return target.getSession().apiContext;
+      }
+      if (prop === 'url') {
+        return target.getSession().url;
+      }
+      return target[prop];
+    },
+  });
 }
 
 declare global {
@@ -81,7 +111,9 @@ const loadRouteContext = async (
     apiPrefetchEndpoints?: ApiPrefetchEndpoints;
   } = {},
 ) => {
-  globalThis.astroUrl = Astro.url;
+  const sid = `${Date.now() + Math.random()}`;
+  sessions[sid] = { url: Astro.url };
+  global.__sfSession = sessions[sid];
   const startedAt = Date.now();
   let urlPath = Astro.url.pathname;
   const isPreview = urlPath.startsWith('/~preview');
@@ -154,11 +186,16 @@ const loadRouteContext = async (
               .catch(console.warn);
             const apiDoc = apiContext.doc as Record<string, any>;
             apiState[`${apiResource}/${apiDoc._id}`] = apiDoc;
-            globalThis.$storefront.apiContext = {
+            sessions[sid].apiContext = {
               resource: apiResource,
               doc: apiDoc as any,
               timestamp: Date.now(),
             };
+            sessions[sid]._timer = setTimeout(() => {
+              // @ts-ignore
+              sessions[sid] = null;
+              delete sessions[sid];
+            }, 6000);
             resolve(null);
           })
           .catch((err: ApiError) => {
@@ -240,10 +277,13 @@ const loadRouteContext = async (
     apiContext,
     apiState,
     isPreview,
+    sid,
     // Astro,
   };
   Astro.locals.routeContext = routeContext;
-  emitter.emit('load', routeContext);
+  Astro.cookies.set('sid', sid);
+  Astro.response.headers.set('X-SId', sid);
+  emitter.emit('load', { ...config, apiState });
   globalThis.__sfIds = {}; // see helpers/sf-utils.ts
   return routeContext;
 };

package/packages/storefront/src/lib/state/use-analytics.ts

@@ -227,8 +227,13 @@ export const useAnalytics = ({
     gtag,
     GTAG_TAG_ID,
     GA_TRACKING_ID,
+    GIT_BRANCH,
   } = window as { [k:string]: any, gtag?: Gtag.Gtag };
   const tagId = GTAG_TAG_ID || GA_TRACKING_ID;
+  // https://developers.google.com/analytics/devguides/collection/ga4/integration
+  const expVariantString: string | null = GIT_BRANCH && experimentId
+    ? `${experimentId}-${GIT_BRANCH}`
+    : (GIT_BRANCH?.startsWith('main-') && GIT_BRANCH) || null;
   if (typeof gtag === 'function') {
     if (tagId) {
       ['client_id', 'session_id', 'gclid'].forEach((key) => {
@@ -237,17 +242,10 @@ export const useAnalytics = ({
         });
       });
     }
-    const { GIT_BRANCH } = window;
-    if (GIT_BRANCH) {
-      // https://developers.google.com/analytics/devguides/collection/ga4/integration
-      const expVariantString = experimentId
-        ? `${experimentId}-${window.GIT_BRANCH}`
-        : GIT_BRANCH.startsWith('main-') && GIT_BRANCH;
-      if (expVariantString) {
-        gtag('event', 'experience_impression', {
-          exp_variant_string: expVariantString,
-        });
-      }
+    if (expVariantString) {
+      gtag('event', 'experience_impression', {
+        exp_variant_string: expVariantString,
+      });
     }
   }
   const url = new URL(window.location.toString());
@@ -315,6 +313,9 @@ export const useAnalytics = ({
       }
     }, 300);
   }
+  return {
+    expVariantString,
+  };
 };
 
 export default useAnalytics;