@speedkit/cli 4.21.0 → 4.22.0

package/dist/services/customer-config/templates/config_documentHandler.js.hbs

@@ -1,362 +0,0 @@
-{{#if removeLazyLoading}}
-  const lazyLoadDefaultConfig = {
-    attributes: [
-      // TODO adjust based on if original attribute should be preserved or renamed
-      //  when using find and set the original attribute is preserved
-      //  when using find and rename the original attribute is renamed
-      {find: 'data-src', set: 'src'},
-      {find: 'data-srcset', set: 'srcset'},
-    ],
-    lazyClass: 'lazyload',
-    lazyLoad: false,
-    preload: true  // preload lazy-removed images in head
-  }
-
-  const lazyLoadList = [
-    // TODO: adjust/replace this exemplary list
-
-    // Content page's stage image:
-    {
-      ...lazyLoadDefaultConfig,
-      elementSelectors: [
-        '.image-with-text-overlay__banner',
-        // e.g. <example-url>
-      ],
-      limit: 1
-    },
-
-    // PLP product images:
-    {
-      ...lazyLoadDefaultConfig,
-      elementSelectors: [
-        '.product-image__wrapper',
-        // e.g. <example-url>
-      ],
-      limit: 4
-    },
-
-    // PDP hero image:
-    {
-      ...lazyLoadDefaultConfig,
-      elementSelectors: [
-        '.product-gallery__image',
-        // e.g. <example-url>
-      ],
-      limit: 1
-    },
-  ];
-
-{{/if}}
-/**
- * @type {DomDocumentHandlerConfig}
- */
-const config = {
-  rejectHTML({db, document, variation, url, headers}) {
-    /* Use to configure guards to prevent e.g. error and captcha pages from being cached */
-    {{#if isPlentymarkets}}
-      // we don't want to cache CSR pages
-      if (!html.includes('data-server-rendered="true"')) {
-        return `CSR Page delivered on url ${url}`;
-      }
-      return false;
-    {{else}}
-      return false;
-    {{/if}}
-  },
-  blacklistHTML({db, document, variation, url, headers}) {
-    /* Use to configure guards to black-list e.g. specific page types */
-    {{#if useScrapingBee}}
-
-    // dynamically blacklist not 200 status codes from ScrapingBee
-    const spbStatusCode = headers["Spb-initial-status-code"];
-    if (spbStatusCode && spbStatusCode !== "200") {
-      return `initial status code unequal to 200 received from scrapingbee: ${url} ${spbStatusCode}`;
-    }
-
-    {{/if}}
-    return false;
-  },
-  shouldTransform({db, document, variation, url, headers}) {
-    return true;
-  },
-  shouldDelayDom({db, document, variation, url, headers}) {
-    {{#if isPlentymarkets}}
-      return false; // Plentymarkets specific
-    {{else}}
-      return true;
-    {{/if}}
-  },
-  async preTransform({db, document, variation, url, headers}) {
-    // do nothing
-  },
-  async postTransform({db, document, variation, url, headers}) {
-    {{#if includeServiceWorker}}
-      injectServiceWorkerScript(document, '{{includeServiceWorker}}');
-
-    {{/if}}
-    {{#if isShopify}}
-      // Shopify specific: inject scripts which set css variables{{#if addSSR}} (normally set on the html element, but in SSR mode they have to be set on sk-html inside the shadow DOM){{/if}}
-      injectCSSVariableScripts(document);
-    {{/if}}
-  },
-{{#if isPlentymarkets}}
-  stripComments: false, // Plentymarkets specific
-{{/if}}
-{{#if isShopify}}
-  ignoreAssets: ["accelerated-checkout-backwards-compat.css"],
-{{else}}
-  ignoreAssets: [],
-{{/if}}
-{{#if activateCfRocketLoaderPlugin}}
-  handleRocketLoader: true,
-{{/if}}
-{{#if handleUsercentrics}}
-  handleUsercentrics: true,
-{{/if}}
-{{#if isShopify}}
-  delayScriptPath: "/apps/speed-kit/speed-kit-dom-ready.js", // Shopify specific
-{{else}}
-  delayScriptPath: "/speed-kit-dom-ready.js",
-{{/if}}
-  executeDeploymentDetection: true,
-
-  // Advanced configuration example:
-  /*
-    executeDeploymentDetection: {
-      // Execute deployment detection scoped to locale subroutes
-      scope: true,
-
-      // Domains with unhashed assets to validate via content hash comparison
-      compareContentHashes: ['<domain>'],
-    }
-  */
-
-  {{#if removeLazyLoading}}
-    lazyLoadList,
-  {{/if}}
-  {{#if addSSR}}
-
-    // SSR specific:
-    preRender: {
-      // Wraps pre-rendered content in a shadow DOM and runs the standard SSR
-      // setup (style preloads, dynamic styles, declarative shadow DOM polyfill,
-      // sk-html/sk-body wrapping, render trigger). Pre-rendered fragments are
-      // appended to `sk-shadow-app-root > template` by default.
-      defaultShadowRoot: true,
-      {{#if addSSRInnerShadowDomSupport}}
-      // Overrides `customElements.define` so the static SSR DOM is upgraded
-      // without invoking custom element constructors (required when the
-      // customer ships its own shadow DOMs / web components).
-      innerShadowDOMSupport: true,
-      {{/if}}
-      elements: [
-        // append all extracted styles to all pre-rendered elements (as they are capsuled in shadow doms)
-        // TODO check if all necessary styles are extracted by this rule
-        {
-          selector: [
-            "head > style:not([media='print'])",
-            "head > link[rel='stylesheet'][href]:not([media='print'])",
-            "body > style:not([media='print'])",
-            "body > link[rel='stylesheet'][href]:not([media='print'])",
-          ].join(","),
-        },
-        // this will be the main element to extract from the rendered DOM
-        // TODO change selector to the main element of your page
-        { selector: "body > #app" },
-      ],
-      guards: [
-        {
-          whenPresent: 'body > #app',
-          waitFor: [
-            // TODO: adjust/replace this exemplary list
-
-            // PLP wait for first image to be loaded
-            // e.g. <example-url>
-            '.products-list-page__products-list .products-list__tiles__element:first-child img[src]',
-            // or the no results disclaimer appears:
-            '.products-list-page__products-list .no-results-found',
-          ],
-          {{#if addSSRInnerShadowDomSupport}}
-            waitForCallback: waitForCallback.toString(),
-          {{/if}}
-        },
-      ],
-      rules: {
-        url: [
-          // Asset Sub-Paths on Main Domains:
-          // TODO: identify and declare specific asset sub-paths instead of putting entire domains on the allowlist
-          //  (e.g. www.domain.de/media/css instead of www.domain.de)
-          "{{production.host}}",
-        {{#if staging.host}}
-          "{{staging.host}}",
-        {{/if}}
-
-          // Additional Asset Domains:
-          // '<domain>',
-        ],
-        // dynamicUrl: [
-        //   // Domains requested via POST:
-        //   '<domain>',
-        // ],
-        resourceType: [
-          // only resource types listed here will be fetched
-          "xhr",
-          "fetch",
-          "font",
-          "script",
-          "document",
-          "stylesheet",
-          "image",
-        ],
-      },
-    },
-  {{/if}}
-}
-
-const documentHandler = new DomDocumentHandler({
-  ...config,
-  app: APP,
-  dynamicFetcher: DYNAMIC_FETCHER,
-  dynamicFetcherConfig: DYNAMIC_FETCHER_CONFIG,
-  customStyles: CUSTOM_STYLES
-})
-
-export const post = async (db, req, res) => {
-  await documentHandler.transformAndSend(db, req, res);
-}
-{{#if includeServiceWorker}}
-
-  /**
-    * Injects a script into the document to override the service worker registration.
-    *
-    * @param {Document} document - The document object where the script will be injected.
-    * @param {string} searchedSwPath - The path of the service worker to be overridden.
-    */
-  function injectServiceWorkerScript(document, searchedSwPath) {
-    const swScript = document.createElement("script");
-    swScript.setAttribute("id", "speed-kit-service-worker");
-    swScript.setAttribute("type", "text/javascript");
-    swScript.innerHTML = `
-      var serviceWorkerRegister = ServiceWorkerContainer.prototype.register;
-      ServiceWorkerContainer.prototype.register = function (swPath, options) {
-        if (swPath.indexOf('${searchedSwPath}') === 0 && SpeedKit.group === 'A') {
-          return navigator.serviceWorker.getRegistration();
-        }
-        return serviceWorkerRegister.call(this, swPath, options);
-      };`;
-
-    document.querySelector("head").appendChild(swScript);
-  }
-{{/if}}
-{{#if addSSRInnerShadowDomSupport}}
-
-  //================================================================================
-  // Puppeteer Callback
-  //================================================================================
-
-  /**
-   * Waits for the callback when custom elements are defined on the document.
-   *
-   * @return {Promise} - A promise that resolves when all custom elements are defined, or if a timeout of 5 seconds occurs.
-   */
-  async function waitForCallback() {
-    const undefinedElements = document.querySelectorAll(":not(:defined)");
-    // need to be defined here as they are sent to the lambda function
-    const customElementNames = [
-      // TODO add correct custom element names (find them by executing document.querySelectorAll(":not(:defined)"))
-    ];
-
-    const promises = [...undefinedElements]
-      .filter((element) => customElementNames.some((name) => element.localName.includes(name)))
-      .map((element) => {
-        // eslint-disable-next-line no-undef
-        return customElements.whenDefined(element.localName);
-      });
-
-    return await Promise.race([
-      Promise.all(promises),
-      new Promise((resolve) => {
-        setTimeout(resolve, 5000);
-      }),
-    ]);
-  }
-{{/if}}
-{{#if isShopify}}
-
-  /**
-   * Injects scripts {{#if addSSR}}into sk-html within each shadow root that set CSS custom
-   * properties (e.g. --window-height, --announcement-bar-height, --header-height)
-   * on sk-html instead of the document's html element.{{else}}that set CSS custom properties
-   * (e.g. --window-height, --announcement-bar-height, --header-height) on the html element.{{/if}}
-   *
-   * @param document
-   */
-  function injectCSSVariableScripts(document) {
-    {{#if addSSR}}
-      const customShadowRoots = document.querySelectorAll("sk-shadow-app-root > template");
-      for (const customShadowRoot of customShadowRoots) {
-        const skHtml = customShadowRoot.querySelector("sk-html");
-        if (!skHtml) continue;
-
-        const script = document.createElement("script");
-        script.textContent = `(${setCSSVariablesOnSkHtml.toString()})();`;
-        // insert script before #main so styles are applied earlier
-        const main = skHtml.querySelector("#main");
-        if (main) {
-          main.before(script);
-        } else {
-          skHtml.appendChild(script);
-        }
-      }
-    {{else}}
-      const script = document.createElement("script");
-      script.textContent = `(${setCSSVariablesOnHtml.toString()})();`;
-      // insert script before #main so styles are applied earlier
-      const main = document.querySelector("#main");
-      if (!main) return;
-      main.before(script);
-    {{/if}}
-  }
-
-  /**
-   * Client-side script that sets CSS custom properties on {{#if addSSR}}sk-html{{else}}the html element{{/if}}
-   * (e.g. --window-height, --announcement-bar-height, --header-height).
-   * Injected via .toString() into the document.
-   *
-   * TODO: double check whether the set CSS variables are being used by the theme
-   *  and that the queried selectors are correct for this Shopify store.
-   */
-  /* eslint-disable no-undef -- client-side function serialised via .toString() */
-  function {{#if addSSR}}setCSSVariablesOnSkHtml{{else}}setCSSVariablesOnHtml{{/if}}() {
-    {{#if addSSR}}
-      const host = document.querySelector("sk-shadow-app-root");
-      const root = host?.shadowRoot;
-      if (!root) return;
-      const skHtml = root.querySelector("sk-html");
-      if (!skHtml) return;
-    {{else}}
-      const html = document.querySelector("html");
-      if (!html) return;
-    {{/if}}
-
-    requestAnimationFrame(() => {
-      const viewportHeight = window.visualViewport ? window.visualViewport.height : document.documentElement.clientHeight;
-      {{#if addSSR}}skHtml{{else}}html{{/if}}.style.setProperty("--window-height", viewportHeight + "px");
-    });
-
-    const announcementBar = {{#if addSSR}}root{{else}}document{{/if}}.querySelector('[id^="shopify-section"][id$="announcement-bar"]');
-    if (announcementBar) {
-      {{#if addSSR}}skHtml{{else}}html{{/if}}.style.setProperty("--announcement-bar-height", announcementBar.clientHeight + "px");
-    }
-
-    const headerElement = {{#if addSSR}}root{{else}}document{{/if}}.querySelector('[id^="shopify-section"][id$="header"]');
-    if (headerElement) {
-      const headerHeight = headerElement.clientHeight;
-      const headerHeightWithoutBottomNav = headerElement.querySelector(".header__wrapper")?.clientHeight;
-      {{#if addSSR}}skHtml{{else}}html{{/if}}.style.setProperty("--header-height", headerHeight + "px");
-      if (headerHeightWithoutBottomNav != null) {
-        {{#if addSSR}}skHtml{{else}}html{{/if}}.style.setProperty("--header-height-without-bottom-nav", headerHeightWithoutBottomNav + "px");
-      }
-    }
-  }
-{{/if}}

package/dist/services/customer-config/templates/config_dynamicBlocks.es6.hbs

@@ -1,163 +0,0 @@
-(function() {
-  /**
-   * @type {DynamicBlockConfig}
-   */
-  window.dynamicBlockConfig = {
-    dynamicScriptExecution: true,
-{{#if addDeviceDetection}}
-  {{#unless addSSR}}
-    detectDevice: (doc) => {
-      // Only if you need a DOM marker; for width checks the SK config's detectDevice suffices.
-      // TODO: set a marker present only in the mobile variation. Read it from `doc`.
-      return doc.querySelector('<mobile-specific-element>') ? "mobile" : "desktop";
-    },
-  {{/unless}}
-  {{#if addSSR}}
-    // Mirror config_SpeedKit.js detectDevice — keep the breakpoint identical.
-    detectDevice: (doc) => {
-      let width = document.documentElement.clientWidth;
-      if (!width) return null;
-      return width <= 820 ? "mobile" : "desktop";
-    },
-  {{/if}}
-{{/if}}
-    blocks: [
-      // TODO: adjust/replace this exemplary list
-      {
-        selector: "body",
-        {{#unless addSSR}}
-        detectChanges: [
-          // Main Headline:
-          {
-            find: "h1",
-            compare: ["text"],
-          },
-
-          // Top Banner:
-          {
-            find: ".header .top-banner",
-            compare: ["text"],
-          },
-
-          // First-Level Items of Header/Main Navigation:
-          {
-            find: ".header .main-navigation .first-level-item",
-            compare: ["text"],
-          },
-
-          // Stage Teaser:
-          // e.g. <example-url>
-          {
-            find: ".stage-teaser source",
-            compare: ["srcset"],
-          },
-
-          // PLP Items:
-          // e.g. <example-url>
-          {
-            find: ".product-grid .product img",
-            limit: 9, // only compare the first 9 products
-            compare: ["src"],
-          },
-
-          // PDP Hero Image:
-          // e.g. <example-url>
-          {
-            find: ".product-detail .slide.main img",
-            compare: ["src"],
-          },
-        ],
-        {{/unless}}
-      },
-{{#if isShopify}}
-
-      // Shopify specific:
-      {
-        selector: "#shopify-section-announcement-bar",
-{{#unless addSSR}}
-        merge: false, // TODO: remove if body is not the main block
-{{/unless}}
-        detectChanges: [{
-          find: ".announcement-bar--wrapper",
-          compare: ["text"],
-        }],
-      },
-      // Cover all the other high-level Shopify sections:
-      // TODO: activate if body is not the main block
-      // {
-      //   selector: "body > .shopify-section[id]",
-      //   idAttribute: "id",
-      // },
-{{/if}}
-{{#if isPlentymarkets}}
-
-      // Plentymarkets specific:
-      // cover JSON with site contents
-      {
-        selector: 'script[type="application/json"]',
-        merge: false,
-        detectChanges: [{compare: ['text']}],
-      },
-{{/if}}
-
-      // default entries
-      { selector: 'link[rel="canonical"]'},
-      { selector: 'link[rel="alternate"][hreflang]', idAttribute: "hreflang", removeIfMissing: true, appendTo: "head"},
-      { selector: "meta[name]", idAttribute: "name"},
-      { selector: 'meta[property]', idAttribute: "property"},
-      { selector: 'script[type="application/ld+json"]'},
-    ],
-{{#if addSSR}}
-
-    // SSR specific:
-    prerendered: [{ selector: "body > sk-shadow-app-root" }],
-    preRenderedRootConfig: [
-      // TODO: adjust/replace this exemplary list
-      {
-        selector: "sk-body, body",
-        detectChanges: [
-          // Main Headline:
-          {
-            find: "h1",
-            compare: ["text"],
-          },
-
-          // Top Banner:
-          {
-            find: ".header .top-banner",
-            compare: ["text"],
-          },
-
-          // First-Level Items of Header/Main Navigation:
-          {
-            find: ".header .main-navigation .first-level-item",
-            compare: ["text"],
-          },
-
-          // Stage Teaser:
-          // e.g. <example-url>
-          {
-            find: ".stage-teaser source",
-            compare: ["srcset"],
-          },
-
-          // PLP Items:
-          // e.g. <example-url>
-          {
-            find: ".product-grid .product img",
-            limit: 9, // only compare the first 9 products
-            compare: ["src"],
-          },
-
-          // PDP Hero Image:
-          // e.g. <example-url>
-          {
-            find: ".product-detail .slide.main img",
-            compare: ["src"],
-          },
-        ],
-      },
-    ],
-{{/if}}
-  };
-})();

package/dist/services/customer-config/templates/config_dynamicStyles.css.hbs

@@ -1,137 +0,0 @@
-@keyframes speed-kit-loading-dots {
-  0% {
-    box-shadow:
-      8px 0 #c8c8cd,
-      20px 0 #dddde0,
-      32px 0 #ededee;
-  }
-  33% {
-    box-shadow:
-      8px 0 #ededee,
-      20px 0 #c8c8cd,
-      32px 0 #dddde0;
-  }
-  66% {
-    box-shadow:
-      8px 0 #dddde0,
-      20px 0 #ededee,
-      32px 0 #c8c8cd;
-  }
-}
-
-@keyframes speed-kit-skeleton {
-  to {
-    background-position: calc(100% + 400px) 0;
-  }
-}
-{{#if addSSR}}
-
-/* SSR specific - container positioning until prerendering is ready */
-html.speed-kit-pre-rendered:not(.sk-prerender-ready) {
-  /* ensure full width for pre-rendered container */
-  sk-shadow-app-root {
-    display: block;
-  }
-
-  /* hide other body elements and prevent them from being considered LCP candidates */
-  body > *:not(sk-shadow-app-root) {
-    position: absolute !important;
-    pointer-events: none !important;
-    opacity: 0 !important;
-    z-index: -1 !important;
-
-    /* don't use display: none as it would corrupt hydrateability */
-    /* don't use visibility: hidden as it would corrupt innerText() */
-  }
-}
-
-/*
-  SSR specific:
-  remember to use sk-html/sk-body as additional selectors if you reference html/body to also cover the SSR case
-*/
-{{/if}}
-{{#if withGoogleOptimize}}
-
-/* Google Optimize Flicker Fix: */
-{{#if addSSR}}
-sk-html > sk-body,
-{{/if}}
-html > body {
-  opacity: 1 !important;
-}
-{{/if}}
-
-.speed-kit-dynamic-loading {
-  .dummy-price-class,
-  .dummy-availability-class {
-    visibility: hidden;
-  }
-
-  .dummy-price-class {
-    position: relative;
-
-    &::after {
-      content: "";
-      width: 8px;
-      height: 8px;
-      display: block;
-      position: absolute;
-      top: calc(50% - 4px);
-      border-radius: 50%;
-      box-shadow:
-      8px 0 #c8c8cd,
-      20px 0 #dddde0,
-      32px 0 #ededee;
-      will-change: box-shadow;
-      animation: speed-kit-loading-dots 1.5s infinite both;
-      visibility: visible;
-      z-index: 1;
-
-      /* --- align left --- */
-      left: -8px;
-
-      /* --- align right --- */
-      /* left: auto; */
-      /* right: 32px; */
-
-      /* --- align center --- */
-      /* left: calc(50% - 24px); */
-    }
-  }
-
-  /* Skeleton loading style: */
-  .dummy-add2cart-class,
-  .dummy-skeleton-container-class {
-    background-color: #ededed;
-    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
-    background-repeat: no-repeat;
-    background-size: 200px 100%;
-    background-position: calc(-1 * 200px) 0;
-    animation: speed-kit-skeleton 1.5s 500ms infinite; /* works best with a container width of ~300-500 px */
-    will-change: background-position;
-    text-indent: -9999px;
-
-    > * {
-      visibility: hidden;
-    }
-  }
-  .dummy-skeleton-container-class {
-    /* chunk skeleton background into smaller boxes: */
-    mask-size:
-      100% 98px,
-      100% 108px,
-      100% 98px;
-    mask-position:
-      0 0,
-      163px 123px,
-      0 259px;
-    mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
-    mask-repeat: no-repeat;
-  }
-
-  /* Disable Add2Cart: */
-  .dummy-add2cart-class {
-    pointer-events: none !important;
-    filter: grayscale(1) contrast(0.333) brightness(1.5) !important; /* = grayscale + blending 50% with white */
-  }
-}