cloudcommerce 0.26.7 → 0.28.0

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

@@ -0,0 +1,409 @@
+---
+type Fallback = 'none' | 'animate' | 'swap';
+
+export interface Props {
+  fallback?: Fallback;
+}
+
+const { fallback = 'animate' } = Astro.props as Props;
+---
+
+<meta name="astro-view-transitions-enabled" content="true" />
+<meta name="astro-view-transitions-fallback" content={fallback} />
+<script>
+  type Fallback = 'none' | 'animate' | 'swap';
+  type Direction = 'forward' | 'back';
+  type State = {
+    index: number;
+    scrollY: number;
+  };
+  type Events = 'astro:load' | 'astro:beforeload';
+
+  const persistState = (state: State) => history.replaceState(state, '');
+  // @ts-ignore
+  const supportsViewTransitions = !!document.startViewTransition;
+  const transitionEnabledOnThisPage = () =>
+    !!document.querySelector('[name="astro-view-transitions-enabled"]');
+  const triggerEvent = (name: Events) => document.dispatchEvent(new Event(name));
+  const onload = () => triggerEvent('astro:load');
+  const PERSIST_ATTR = 'data-astro-transition-persist';
+
+  // The History API does not tell you if navigation is forward or back, so
+  // you can figure it using an index. On pushState the index is incremented so you
+  // can use that to determine popstate if going forward or back.
+  let currentHistoryIndex = history.state?.index || 0;
+  if (!history.state && transitionEnabledOnThisPage()) {
+    persistState({ index: currentHistoryIndex, scrollY: 0 });
+  }
+
+  const throttle = (cb: (...args: any[]) => any, delay: number) => {
+    let wait = false;
+    // During the waiting time additional events are lost.
+    // So repeat the callback at the end if we have swallowed events.
+    let onceMore = false;
+    return (...args: any[]) => {
+      if (wait) {
+        onceMore = true;
+        return;
+      }
+      cb(...args);
+      wait = true;
+      setTimeout(() => {
+        if (onceMore) {
+          onceMore = false;
+          cb(...args);
+        }
+        wait = false;
+      }, delay);
+    };
+  };
+
+  async function getHTML(href: string) {
+    const res = await fetch(href);
+    const html = await res.text();
+    return { ok: res.ok, html };
+  }
+
+  function getFallback(): Fallback {
+    const el = document.querySelector('[name="astro-view-transitions-fallback"]');
+    if (el) {
+      return el.getAttribute('content') as Fallback;
+    }
+    return 'animate';
+  }
+
+  function markScriptsExec() {
+    for (const script of document.scripts) {
+      script.dataset.astroExec = '';
+    }
+  }
+
+  function runScripts() {
+    let wait = Promise.resolve();
+    for (const script of Array.from(document.scripts)) {
+      if (script.dataset.astroExec === '') continue;
+      const s = document.createElement('script');
+      s.innerHTML = script.innerHTML;
+      for (const attr of script.attributes) {
+        if (attr.name === 'src') {
+          const p = new Promise((r) => {
+            s.onload = r;
+          });
+          wait = wait.then(() => p as any);
+        }
+        s.setAttribute(attr.name, attr.value);
+      }
+      s.dataset.astroExec = '';
+      script.replaceWith(s);
+    }
+    return wait;
+  }
+
+  const parser = new DOMParser();
+
+  async function updateDOM(html: string, state?: State, fallback?: Fallback) {
+    const doc = parser.parseFromString(html, 'text/html');
+
+    // Check for a head element that should persist, either because it has the data
+    // attribute or is a link el.
+    const persistedHeadElement = (el: Element): Element | null => {
+      const id = el.getAttribute(PERSIST_ATTR);
+      const newEl = id && doc.head.querySelector(`[${PERSIST_ATTR}="${id}"]`);
+      if (newEl) {
+        return newEl;
+      }
+      if (el.matches('link[rel=stylesheet]')) {
+        const href = el.getAttribute('href');
+        return doc.head.querySelector(`link[rel=stylesheet][href="${href}"]`);
+      }
+      if (el.tagName === 'SCRIPT') {
+        let s1 = el as HTMLScriptElement;
+        for (const s2 of doc.scripts) {
+          if (
+            // Inline
+            (s1.textContent && s1.textContent === s2.textContent) ||
+            // External
+            (s1.type === s2.type && s1.src && s1.src === s2.src)
+          ) {
+            return s2;
+          }
+        }
+      }
+      return null;
+    };
+
+    const swap = () => {
+      // noscript tags inside head element are not honored on swap (#7969).
+      // Remove them before swapping.
+      doc.querySelectorAll('head noscript').forEach((el) => el.remove());
+
+      // swap attributes of the html element
+      // - delete all attributes from the current document
+      // - insert all attributes from doc
+      // - reinsert all original attributes that are named 'data-astro-*'
+      const html = document.documentElement;
+      const astro = [...html.attributes].filter(
+        ({ name }) => (html.removeAttribute(name), name.startsWith('data-astro-'))
+      );
+      [...doc.documentElement.attributes, ...astro].forEach(({ name, value }) =>
+        html.setAttribute(name, value)
+      );
+
+      // Swap head
+      for (const el of Array.from(document.head.children)) {
+        const newEl = persistedHeadElement(el);
+        // If the element exists in the document already, remove it
+        // from the new document and leave the current node alone
+        if (newEl) {
+          newEl.remove();
+        } else {
+          // Otherwise remove the element in the head. It doesn't exist in the new page.
+          el.remove();
+        }
+      }
+      // Everything left in the new head is new, append it all.
+      document.head.append(...doc.head.children);
+
+      // Move over persist stuff in the body
+      const oldBody = document.body;
+      document.body.replaceWith(doc.body);
+      for (const el of oldBody.querySelectorAll(`[${PERSIST_ATTR}]`)) {
+        const id = el.getAttribute(PERSIST_ATTR);
+        const newEl = document.querySelector(`[${PERSIST_ATTR}="${id}"]`);
+        if (newEl) {
+          // The element exists in the new page, replace it with the element
+          // from the old page so that state is preserved.
+          newEl.replaceWith(el);
+        }
+      }
+
+      // Simulate scroll behavior of Safari and
+      // Chromium based browsers (Chrome, Edge, Opera, ...)
+      // @ts-ignore
+      scrollTo({ left: 0, top: 0, behavior: 'instant' });
+
+      if (state?.scrollY === 0 && location.hash) {
+        const id = decodeURIComponent(location.hash.slice(1));
+        const elem = document.getElementById(id);
+        // prefer scrollIntoView() over scrollTo() because it takes scroll-padding into account
+        if (elem) {
+          state.scrollY = elem.offsetTop;
+          persistState(state); // first guess, later updated by scroll handler
+          elem.scrollIntoView(); // for Firefox, this should better be {behavior: 'instant'}
+        }
+      } else if (state && state.scrollY !== 0) {
+        scrollTo(0, state.scrollY); // usings default scrollBehavior
+      }
+
+      triggerEvent('astro:beforeload');
+    };
+
+    // Wait on links to finish, to prevent FOUC
+    const links: Promise<any>[] = [];
+    for (const el of doc.querySelectorAll('head link[rel=stylesheet]')) {
+      // Do not preload links that are already on the page.
+      if (
+        !document.querySelector(
+          `[${PERSIST_ATTR}="${el.getAttribute(PERSIST_ATTR)}"], link[rel=stylesheet]`
+        )
+      ) {
+        const c = document.createElement('link');
+        c.setAttribute('rel', 'preload');
+        c.setAttribute('as', 'style');
+        c.setAttribute('href', el.getAttribute('href')!);
+        links.push(
+          new Promise<any>((resolve) => {
+            ['load', 'error'].forEach((evName) => c.addEventListener(evName, resolve));
+            document.head.append(c);
+          })
+        );
+      }
+    }
+    links.length && (await Promise.all(links));
+
+    if (fallback === 'animate') {
+      let isAnimating = false;
+      addEventListener('animationstart', () => (isAnimating = true), { once: true });
+
+      // Trigger the animations
+      document.documentElement.dataset.astroTransitionFallback = 'old';
+      await new Promise((resolve) => {
+        const fallbackSwap = () => {
+          removeEventListener('animationend', fallbackSwap);
+          clearTimeout(timeout);
+          swap();
+          resolve(true);
+          document.documentElement.dataset.astroTransitionFallback = 'new';
+        };
+        // If there are any animations, want for the animationend event.
+        addEventListener('animationend', fallbackSwap, { once: true });
+        // If there are no animations, go ahead and swap on next tick
+        // This is necessary because we do not know if there are animations.
+        // The setTimeout is a fallback in case there are none.
+        let timeout = setTimeout(() => !isAnimating && fallbackSwap());
+      });
+    } else {
+      swap();
+    }
+  }
+
+  async function navigate(dir: Direction, href: string, state?: State) {
+    let finished: Promise<void>;
+    const { html, ok } = await getHTML(href);
+    // If there is a problem fetching the new page, just do an MPA navigation to it.
+    if (!ok) {
+      location.href = href;
+      return;
+    }
+    document.documentElement.dataset.astroTransition = dir;
+    if (supportsViewTransitions) {
+      // @ts-ignore
+      finished = document.startViewTransition(() => updateDOM(html, state)).finished;
+    } else {
+      finished = updateDOM(html, state, getFallback());
+    }
+    try {
+      await finished;
+    } finally {
+      // skip this for the moment as it tends to stop fallback animations
+      // document.documentElement.removeAttribute('data-astro-transition');
+      await runScripts();
+      markScriptsExec();
+      onload();
+    }
+  }
+
+  // Prefetching
+  function maybePrefetch(pathname: string) {
+    if (document.querySelector(`link[rel=prefetch][href="${pathname}"]`)) return;
+    // @ts-ignore
+    if (navigator.connection) {
+      // @ts-ignore
+      let conn = navigator.connection;
+      if (conn.saveData || /(2|3)g/.test(conn.effectiveType || '')) return;
+    }
+    let link = document.createElement('link');
+    link.setAttribute('rel', 'prefetch');
+    link.setAttribute('href', pathname);
+    document.head.append(link);
+  }
+
+  if (supportsViewTransitions || getFallback() !== 'none') {
+    markScriptsExec();
+
+    document.addEventListener('click', (ev) => {
+      let link = ev.target;
+      if (link instanceof Element && link.tagName !== 'A') {
+        link = link.closest('a');
+      }
+      // This check verifies that the click is happening on an anchor
+      // that is going to another page within the same origin. Basically it determines
+      // same-origin navigation, but omits special key combos for new tabs, etc.
+      if (
+        !link ||
+        !(link instanceof HTMLAnchorElement) ||
+        !link.href ||
+        (link.target && link.target !== '_self') ||
+        link.origin !== location.origin ||
+        ev.button !== 0 || // left clicks only
+        ev.metaKey || // new tab (mac)
+        ev.ctrlKey || // new tab (windows)
+        ev.altKey || // download
+        ev.shiftKey || // new window
+        ev.defaultPrevented ||
+        !transitionEnabledOnThisPage()
+      )
+        // No page transitions in these cases,
+        // Let the browser standard action handle this
+        return;
+
+      // We do not need to handle same page links because there are no page transitions
+      // Same page means same path and same query params (but different hash)
+      if (location.pathname === link.pathname && location.search === link.search) {
+        if (link.hash) {
+          // The browser default action will handle navigations with hash fragments
+          return;
+        } else {
+          // Special case: self link without hash
+          // If handed to the browser it will reload the page
+          // But we want to handle it like any other same page navigation
+          // So we scroll to the top of the page but do not start page transitions
+          ev.preventDefault();
+          persistState({ ...history.state, scrollY });
+          // @ts-ignore
+          scrollTo({ left: 0, top: 0, behavior: 'instant' });
+          if (location.hash) {
+            // last target was different
+            const newState: State = { index: ++currentHistoryIndex, scrollY: 0 };
+            history.pushState(newState, '', link.href);
+          }
+          return;
+        }
+      }
+
+      // these are the cases we will handle: same origin, different page
+      ev.preventDefault();
+      navigate('forward', link.href, { index: ++currentHistoryIndex, scrollY: 0 });
+      const newState: State = { index: currentHistoryIndex, scrollY };
+      persistState({ index: currentHistoryIndex - 1, scrollY });
+      history.pushState(newState, '', link.href);
+    });
+
+    addEventListener('popstate', (ev) => {
+      if (!transitionEnabledOnThisPage() && ev.state) {
+        // The current page doesn't haven't View Transitions,
+        // respect that with a full page reload
+        // -- but only for transition managed by us (ev.state is set)
+        location.reload();
+        return;
+      }
+
+      // History entries without state are created by the browser (e.g. for hash links)
+      // Our view transition entries always have state.
+      // Just ignore stateless entries.
+      // The browser will handle navigation fine without our help
+      if (ev.state === null) {
+        return;
+      }
+
+      const state: State | undefined = history.state;
+      const nextIndex = state?.index ?? currentHistoryIndex + 1;
+      const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';
+      navigate(direction, location.href, state);
+      currentHistoryIndex = nextIndex;
+    });
+
+    ['mouseenter', 'touchstart', 'focus'].forEach((evName) => {
+      document.addEventListener(
+        evName,
+        (ev) => {
+          if (ev.target instanceof HTMLAnchorElement) {
+            let el = ev.target;
+            if (
+              el.origin === location.origin &&
+              el.pathname !== location.pathname &&
+              transitionEnabledOnThisPage()
+            ) {
+              maybePrefetch(el.pathname);
+            }
+          }
+        },
+        { passive: true, capture: true }
+      );
+    });
+    addEventListener('load', onload);
+    // There's not a good way to record scroll position before a back button.
+    // So the way we do it is by listening to scroll and just continuously recording it.
+    addEventListener(
+      'scroll',
+      throttle(() => {
+        // only updste history entries that are managed by us
+        // leave other entries alone and do not accidently add state.
+        if (history.state) {
+          persistState({ ...history.state, scrollY });
+        }
+      }, 300),
+      { passive: true }
+    );
+  }
+</script>

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

@@ -23,6 +23,7 @@ export interface Props {
   loading?: 'lazy' | 'eager';
   decoding?: 'async' | 'sync' | 'auto';
   alt?: string;
+  preferredSize?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,7 +33,7 @@ const image = computed<Partial<PictureSize>>(() => {
   if ((props.picture as PictureSize).url) {
     return props.picture as PictureSize;
   }
-  return getImg(props.picture) || {};
+  return getImg(props.picture, undefined, props.preferredSize) || {};
 });
 const dimensions = computed(() => {
   return getImgSizes(image.value) as { width: number, height: number };

package/packages/storefront/src/lib/composables/use-pitch-bar.ts

@@ -13,8 +13,8 @@ export interface Props {
 
 const parseLayoutContent = (layoutContent: LayoutContent) => {
   const pitchBar: Props = { slides: [] };
-  if (layoutContent.header?.pitch_bar) {
-    pitchBar.slides = layoutContent.header.pitch_bar;
+  if (layoutContent.header?.pitchBar) {
+    pitchBar.slides = layoutContent.header.pitchBar;
   }
   return pitchBar;
 };

package/packages/storefront/src/lib/content.d.ts

@@ -18,16 +18,16 @@ export interface PageContent {
     autoplay?: number,
     slides: Array<{
       [k: string]: unknown,
-      start?: string,
-      end?: string,
+      startsAt?: string,
+      endsAt?: string,
       img: string,
       alt?: string,
-      mobile_img?: string,
+      mobileImg?: string,
       href?: string,
       title?: string,
       subtitle?: string
-      button_link?: string,
-      button_text?: string,
+      buttonLink?: string,
+      buttonText?: string,
     }>,
   };
   sections: Array<Record<string, any> & {

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

@@ -3,13 +3,13 @@ import { Head } from 'astro-capo';
 import BaseBody from '@@sf/layouts/BaseBody.astro';
 
 const { getContent } = Astro.locals.routeContext;
-const { custom_code: customCodeContent } = await getContent('layout');
+const { customCode } = await getContent('layout');
 ---
 
 <Head>
   <slot name="base-head" />
-  {customCodeContent?.css && <style>{customCodeContent.css}</style>}
-  {customCodeContent?.html_head && <Fragment set:html={customCodeContent.html_head} />}
+  {customCode?.css && <style>{customCode.css}</style>}
+  {customCode?.htmlHead && <Fragment set:html={customCode.htmlHead} />}
   <slot name="base-head-scripts">
     <script src="../scripts/modules-info-preset"></script>
   </slot>
@@ -17,7 +17,7 @@ const { custom_code: customCodeContent } = await getContent('layout');
 </Head>
 <BaseBody>
   <slot />
-  {customCodeContent?.html_body && <Fragment set:html={customCodeContent.html_body} />}
+  {customCode?.htmlBody && <Fragment set:html={customCode.htmlBody} />}
   <slot name="base-body-scripts">
     <script src="../scripts/session-utm"></script>
   </slot>

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

@@ -8,11 +8,9 @@ import '@@sf/assets/tooltip.css';
 import Picture from '@@sf/components/Picture.astro';
 
 const { settings } = Astro.locals.routeContext;
-const { contextInlineClientJS } = Astro.locals;
 ---
 
 <body style="visibility:hidden" class="!visible"> <!-- Prevent FOUC -->
-  {contextInlineClientJS && <script is:inline set:html={contextInlineClientJS} />}
   <div id="teleported-overlap" class="relative z-[59]"></div>
   <div id="teleported-top" class="relative z-[19]"></div>
   <slot />

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

@@ -1,8 +1,13 @@
 ---
 import { pwaInfo } from 'virtual:pwa-info';
-import { ViewTransitions } from 'astro:transitions';
 import { img as getImg, price as getPrice } from '@ecomplus/utils';
+import ViewTransitions from '@@sf/components/ViewTransitions.astro';
 
+export interface Props {
+  hasViewTransitions?: boolean;
+}
+
+const hasViewTransitions = Astro.props.hasViewTransitions !== false;
 const deployRand = import.meta.env.DEPLOY_RAND || '_';
 const getIconUrl = (size: number) => {
   return `/_image?f=png&w=${size}&h=${size}`
@@ -43,15 +48,20 @@ if (apiDoc) {
   ogImage = picture && picture.url;
 }
 if (!ogImage) {
-  if (metatagsContent?.og_image) {
-    ogImage = metatagsContent.og_image.charAt(0) === '/'
-      ? `https://${domain}${metatagsContent.og_image}` : metatagsContent.og_image;
+  if (metatagsContent?.ogImage) {
+    ogImage = metatagsContent.ogImage.charAt(0) === '/'
+      ? `https://${domain}${metatagsContent.ogImage}` : metatagsContent.ogImage;
   }
 } else {
   ogImage = ogImage.replace(/(\w+\.)?(ecoms\d)\.com/i, '$2-nyc3.nyc3.cdn.digitaloceanspaces.com');
 }
 
 let inlineClientJS = `
+window._emitApiContext = (id = null) => {
+  console.log('[ctx] emit ' + id);
+  window.dispatchEvent(new Event('storefront:apiContext'));
+  window._emitedContextId = id;
+};
 window.ECOM_STORE_ID = ${storeId};
 window.ECOM_LANG = '${lang}';
 window.ECOM_CURRENCY = '${currency}';
@@ -67,6 +77,7 @@ setTimeout(() => {
   window.location.replace("/~fallback?status=${statusCode}&url=${encodeURIComponent(url)}");
 }, 1);`;
 }
+let contextInlineClientJS: string | undefined;
 if (apiDoc) {
   if (typeof apiDoc.price === 'number') {
     apiDoc.price = getPrice(apiDoc);
@@ -89,18 +100,24 @@ if (apiDoc) {
     }
     return nestedDoc;
   };
-  Astro.locals.contextInlineClientJS = `
+  inlineClientJS += `
+window._firstLoadContextId = '${apiDoc._id}';`;
+  contextInlineClientJS = `
 $storefront.apiContext = ${JSON.stringify({
   resource: apiContext.resource,
   doc: minifyApiDoc({ ...apiDoc }),
   timestamp: Date.now(),
 })};
-$storefront.context /* DEPRECATED */ = $storefront.apiContext`;
+$storefront.context /* DEPRECATED */ = $storefront.apiContext;
+_emitApiContext('${apiDoc._id}');`;
 } else {
-  Astro.locals.contextInlineClientJS = `
+  inlineClientJS += `
+window._firstLoadContextId = null;`;
+  contextInlineClientJS = `
 $storefront.apiContext = null;
 delete $storefront.apiContext;
-delete $storefront.context;`;
+delete $storefront.context;
+_emitApiContext();`;
 }
 if (isPreview) {
   inlineClientJS += `
@@ -137,11 +154,11 @@ const inlineJSONLd = JSON.stringify({
 <meta property="og:type" content="website">
 <meta property="og:locale" content={ogLocale}>
 {ogImage && <meta property="og:image" content={ogImage} />}
-{metatagsContent?.fb_app_id &&
-  <meta property="fb:app_id" content={metatagsContent.fb_app_id} />}
+{metatagsContent?.fbAppId &&
+  <meta property="fb:app_id" content={metatagsContent.fbAppId} />}
 <meta name="twitter:card" content="summary">
-{metatagsContent?.twitter_username &&
-  <meta name="twitter:site" content={metatagsContent.twitter_username} />}
+{metatagsContent?.twitterUsername &&
+  <meta name="twitter:site" content={metatagsContent.twitterUsername} />}
 <meta name="ecom-store-id" content={String(storeId)}>
 
 <script>
@@ -152,7 +169,8 @@ const inlineJSONLd = JSON.stringify({
 {(!pwaInfo && !import.meta.env.DEV) &&
   <link rel="manifest" href="/manifest.webmanifest" />}
 
-<script is:inline set:html={inlineClientJS} />
+<script is:inline set:html={inlineClientJS} transition:persist />
 <script type="application/ld+json" set:html={inlineJSONLd} />
 
-<ViewTransitions />
+{hasViewTransitions && <ViewTransitions fallback="none" />}
+{contextInlineClientJS && <script is:inline set:html={contextInlineClientJS} />}

package/packages/storefront/src/lib/layouts/use-page-header.ts

@@ -13,7 +13,12 @@ export interface Props {
 const usePageHeader = async ({ routeContext, listedCategoryFields }: Props) => {
   const { apiState, getContent } = routeContext;
   const layoutContent = await getContent('layout');
-  const { header: headerContent } = layoutContent;
+  const {
+    header: {
+      inlineMenuCategories,
+      isAlphabeticalSortSubmenu,
+    },
+  } = layoutContent;
   const pitchBar = parseLayoutContent(layoutContent);
   let { categories } = apiState;
   if (!categories && listedCategoryFields !== null) {
@@ -36,9 +41,9 @@ const usePageHeader = async ({ routeContext, listedCategoryFields }: Props) => {
   }
   const shopHeader: ShopHeaderProps = {
     categories,
-    menuCategorySlugs: headerContent.inline_menu_categories?.featured,
-    menuRandomCategories: headerContent.inline_menu_categories?.random,
-    isAlphabeticalSortSubmenu: headerContent.alphabetical_sort_submenu,
+    menuCategorySlugs: inlineMenuCategories?.featured,
+    menuRandomCategories: inlineMenuCategories?.random,
+    isAlphabeticalSortSubmenu,
   };
   /*
   if (import.meta.env.DEV) {