cloudcommerce 2.8.7 → 2.9.0

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

@@ -304,7 +304,7 @@ export default async (req: Request, res: Response) => {
     }
     if (headers && BUNNYNET_API_KEY && DEPLOY_RAND) {
       // Tag for CDN cache purge
-      headers['CDN-Tag'] = `-d:${DEPLOY_RAND}-`;
+      headers['CDN-Tag'] = `[${DEPLOY_RAND}]`;
     }
     _writeHead.apply(res, [status, headers]);
   };

package/packages/storefront/astro.config.mjs

@@ -146,10 +146,7 @@ const _vitePWAOptions = {
   },
 };
 
-const viteAlias = [{
-  find: '@astrojs/vue/server.js',
-  replacement: joinPath(__dirname, 'config/astro/vue-server.mjs'),
-}];
+const viteAlias = [];
 if (isToServerless) {
   viteAlias.push({
     find: '@@sf/components/Picture.astro',
@@ -196,15 +193,15 @@ const genAstroConfig = ({
     {
       name: 'client:context',
       hooks: {
-        'astro:config:setup': ({ addClientDirective }) => {
-          addClientDirective({
-            name: 'context',
-            entrypoint: joinPath(__dirname, 'config/astro/client-sf-directive.mjs'),
-          });
+        'astro:config:setup': ({ addClientDirective, addMiddleware }) => {
           addClientDirective({
             name: 'sf',
             entrypoint: joinPath(__dirname, 'config/astro/client-sf-directive.mjs'),
           });
+          addMiddleware({
+            entrypoint: joinPath(__dirname, 'config/astro/node-middleware.mjs'),
+            order: 'pre',
+          });
         },
       },
     },

package/packages/storefront/client.d.ts

@@ -37,8 +37,9 @@ interface Window {
   $storefront?: import('@@sf/$storefront').$Storefront & {
     modulesInfoPreset?: Partial<typeof import('./src/lib/state/modules-info').default>,
   };
-  $isCmsPreview?: boolean;
+  $firstInteraction?: Promise<void>;
   $prefetch?: typeof import('astro:prefetch').prefetch;
+  $isCmsPreview?: boolean;
 }
 
 declare module 'gtag.js';

package/packages/storefront/config/astro/client-sf-directive.mjs

@@ -28,11 +28,13 @@ const firstInteraction = new Promise((resolve) => {
       () => {
         resolve();
         controller.abort();
+        window.dispatchEvent(new Event('firstInteraction'));
       },
       { once: true, passive: true, signal: controller.signal },
     );
   });
 });
+window.$firstInteraction = firstInteraction;
 
 /**
  * Hydrate on context script executed (`$storefront.apiContext` ready)
@@ -88,9 +90,6 @@ export default (load, opts, el) => {
   const id = window.$storefront?.apiContext?.doc._id || null;
   if (window._firstLoadContextId === id && window._emitedContextId === id) {
     next();
-    document.addEventListener('astro:beforeload', () => {
-      delete window._firstLoadContextId;
-    }, { once: true });
     return;
   }
   window.addEventListener('storefront:apiContext', next, { once: true });

package/packages/storefront/config/astro/node-middleware.mjs

@@ -0,0 +1,8 @@
+import { AsyncLocalStorage } from 'node:async_hooks';
+
+export const asyncLocalStorage = new AsyncLocalStorage();
+
+/* eslint-disable import/prefer-default-export */
+export function onRequest(ctx, next) {
+  return asyncLocalStorage.run({ sid: `${Date.now() + Math.random()}` }, next);
+}

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "2.8.7",
+  "version": "2.9.0",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"

package/packages/storefront/src/lib/components/globals/ALink.vue

@@ -37,25 +37,35 @@ const prefetchHref = computed(() => {
   return pathname;
 });
 if (prefetchHref.value) {
+  const prefetchOnNext = () => {
+    requestIdleCallback(() => {
+      const next = () => {
+        if (!prefetchHref.value) return;
+        window.$prefetch!(prefetchHref.value);
+      };
+      if (!window.$firstInteraction) {
+        window.addEventListener('firstInteraction', next, { once: true });
+      } else {
+        window.$firstInteraction.then(next);
+      }
+    });
+  };
   onMounted(() => {
     const { prefetch } = props;
     const isOnHover = prefetch === 'hover';
     if (isMobile && isOnHover) return;
     const isOnVisible = prefetch === 'visible';
-    const use = isOnVisible
+    const useElementEv = isOnVisible
       ? useElementVisibility
       : isOnHover && useElementHover;
-    if (!use) return;
-    const is = use(link.value);
-    const unwatch = watch(is, (_is) => {
-      if (!_is || !window.$prefetch) return;
+    if (!useElementEv) return;
+    const isActive = useElementEv(link.value);
+    const unwatch = watch(isActive, (_isActive) => {
+      if (!_isActive || !window.$prefetch) return;
       unwatch();
       setTimeout(() => {
-        if (isOnVisible && !is.value) return;
-        requestIdleCallback(() => {
-          if (!prefetchHref.value) return;
-          window.$prefetch!(prefetchHref.value);
-        });
+        if (isOnVisible && !isActive.value) return;
+        prefetchOnNext();
       }, isOnVisible ? 100 : 1);
     }, {
       immediate: true,

package/packages/storefront/src/lib/composables/use-sku-selector.ts

@@ -27,7 +27,7 @@ const useSkuSelector = (props: Props) => {
     || [],
   );
   if (!grids.length && !import.meta.env.SSR) {
-    window.addEventListener('storefront:data:data', () => {
+    window.addEventListener('storefront:data:grids', () => {
       globalThis.$storefront.data.grids?.forEach((grid) => grids.push(grid));
     }, { once: true });
   }

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

@@ -21,6 +21,11 @@ const { customCode } = await getContent('layout');
   <slot name="base-body-scripts">
     <script src="../scripts/session-utm"></script>
     <script src="../scripts/push-analytics-events"></script>
+    <script>
+      /* eslint-disable */
+      import { prefetch } from 'astro:prefetch';
+      window.$prefetch = prefetch;
+    </script>
   </slot>
   <slot name="before-body-end" />
 </BaseBody>

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

@@ -206,12 +206,7 @@ const generator = `e-com.plus @cloudcommerce/storefront, ${Astro.generator}`;
     && <link rel="manifest" href="/manifest.webmanifest" />}
 </>}
 
-<script is:inline set:html={inlineClientJS} transition:persist />
+<script is:inline set:html={inlineClientJS} />
 <script is:inline type="application/ld+json" set:html={inlineJSONLd} />
 
-<script>
-  /* eslint-disable */
-  import { prefetch } from 'astro:prefetch';
-  window.$prefetch = prefetch;
-</script>
 {contextInlineClientJS && <script is:inline set:html={contextInlineClientJS} />}

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

@@ -1,3 +1,4 @@
+import type { AsyncLocalStorage } from 'node:async_hooks';
 import type { AstroGlobal } from 'astro';
 import type { BaseConfig } from '@cloudcommerce/config';
 import type { ApiError, ApiEndpoint } from '@cloudcommerce/api';
@@ -5,8 +6,8 @@ import type { ResourceId, CategoriesList, BrandsList } from '@cloudcommerce/api/
 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 { asyncLocalStorage as _als } from '../../config/astro/node-middleware.mjs';
 import _getConfig from '../../config/storefront.config.mjs';
 import { termify } from '../helpers/sf-utils';
 
@@ -23,6 +24,8 @@ export type StorefrontConfig = {
   getContent: ContentGetter,
 };
 
+export const asyncLocalStorage = _als as AsyncLocalStorage<{ sid: string }>;
+
 const emitter = new EventEmitter();
 const getConfig: () => StorefrontConfig = _getConfig;
 
@@ -54,8 +57,8 @@ if (!globalThis.$storefront) {
     // @ts-expect-error: URL is retrived from `target.getSession().url`
     url: undefined,
     getSession(sid?: string) {
-      if (!sid && !!getCurrentInstance()) {
-        sid = inject('sid');
+      if (!sid) {
+        sid = asyncLocalStorage.getStore()?.sid;
       }
       const {
         url,
@@ -112,7 +115,7 @@ const loadRouteContext = async (
     apiPrefetchEndpoints?: ApiPrefetchEndpoints;
   } = {},
 ) => {
-  const sid = `${Date.now() + Math.random()}`;
+  const sid = asyncLocalStorage.getStore()?.sid || `${Date.now()}`;
   sessions[sid] = { url: Astro.url };
   global.__sfSession = sessions[sid];
   const startedAt = Date.now();

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

@@ -229,7 +229,6 @@ export const useAnalytics = ({
 }: {
   experimentId?: string,
 } = {}) => {
-  document.addEventListener('astro:beforeload', resetPageViewPromise);
   const {
     gtag,
     GTAG_TAG_ID,

package/packages/test-base/package.json

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

package/packages/storefront/config/astro/vue-server.mjs

@@ -1,64 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-import { h, createSSRApp, defineComponent } from 'vue';
-import { renderToString } from 'vue/server-renderer';
-import { setup } from 'virtual:@astrojs/vue/app';
-
-/**
- * Astro passes `children` as a string of HTML, so we need
- * a wrapper `div` to render that content as VNodes.
- *
- * 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;
-    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;
-}
-
-async function renderToStaticMarkup(Component, inputProps, slotted, metadata) {
-  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 };
-}
-
-export default {
-  check,
-  renderToStaticMarkup,
-  supportsAstroStaticSlot: true,
-};