@speedkit/cli 3.9.1 → 3.11.0

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

@@ -1,53 +1,51 @@
-{{#unless addPreRendering}}
-  {{#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
-    }
+{{#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
+  const lazyLoadList = [
+    // TODO: adjust/replace this exemplary list
 
-      // Content page's stage image:
-      {
-        ...lazyLoadDefaultConfig,
-        parentClasses: [
-          'image-with-text-overlay__banner',
-        ],
-        limit: 1
-      },
+    // Content page's stage image:
+    {
+      ...lazyLoadDefaultConfig,
+      parentClasses: [
+        'image-with-text-overlay__banner',
+      ],
+      limit: 1
+    },
 
-      // PLP product images:
-      {
-        ...lazyLoadDefaultConfig,
-        parentClasses: [
-          'product-image__wrapper',
-        ],
-        limit: 4
-      },
+    // PLP product images:
+    {
+      ...lazyLoadDefaultConfig,
+      parentClasses: [
+        'product-image__wrapper',
+      ],
+      limit: 4
+    },
 
-      // PDP hero image:
-      {
-        ...lazyLoadDefaultConfig,
-        parentClasses: [
-          'product-gallery__image',
-        ],
-        limit: 1
-      },
-    ];
+    // PDP hero image:
+    {
+      ...lazyLoadDefaultConfig,
+      parentClasses: [
+        'product-gallery__image',
+      ],
+      limit: 1
+    },
+  ];
 
-  {{/if}}
-{{/unless}}
+{{/if}}
 const config = {
-  rejectHTML({db, {{#if addPreRendering}}document{{else}}html{{/if}}, variation, url, headers}) {
+  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
@@ -59,59 +57,58 @@ const config = {
       return false;
     {{/if}}
   },
-  blacklistHTML({db, {{#if addPreRendering}}document{{else}}html{{/if}}, variation, url, headers}) {
+  blacklistHTML({db, document, variation, url, headers}) {
     /* Use to configure guards to black-list e.g. specific page types */
-    {{#if addPreRendering}}
-    // dynamically blacklist unsupported variations as they are not covered in lambda
-    if (variation.toUpperCase() === "TABLET") {
-      return `Tablet viewport is unsupported: ${url}`;
-    }
-
-    {{/if}}
     {{#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}`;
-      }
+
+    // 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, {{#if addPreRendering}}document{{else}}html{{/if}}, variation, url, headers}) {
+  shouldTransform({db, document, variation, url, headers}) {
     return true;
   },
-  shouldDelayDom({db, {{#if addPreRendering}}document{{else}}html{{/if}}, variation, url, headers}) {
+  shouldDelayDom({db, document, variation, url, headers}) {
     {{#if isPlentymarkets}}
       return false; // Plentymarkets specific
     {{else}}
       return true;
     {{/if}}
   },
-  async preTransform({db, {{#if addPreRendering}}document{{else}}html{{/if}}, variation, url, headers}) {
-    {{#unless addPreRendering}}
-      return html;
-    {{else}}
+  async preTransform({db, document, variation, url, headers}) {
+    {{#if addPreRendering}}
+      // SSR specific:
       generateMainShadowRoot(document);
-    {{/unless}}
-  },
-  async postTransform({db, {{#if addPreRendering}}document{{else}}html{{/if}}, variation, url, headers}) {
-    {{#unless addPreRendering}}
-      {{#if includeServiceWorker}}
-        html = injectServiceWorkerScript(html, '{{includeServiceWorker}}');
-      {{/if}}
-      return html;
     {{else}}
+      // do nothing
+    {{/if}}
+  },
+  async postTransform({db, document, variation, url, headers}) {
+    {{#if includeServiceWorker}}
+      injectServiceWorkerScript(document, '{{includeServiceWorker}}');
+
+    {{/if}}
+    {{#if addSSR}}
+      // SSR specific:
       createPreloadsForInnerStyleLinks(document);
       removeInnerScriptNodes(document);
-      assignStylesToShadowDom(document);
+      assignDynamicStylesToShadowDom(document);
       addDeclarativeShadowDOMPolyfill(document);
+      wrapPreRenderedElementsWithCustomRootTags(document);
       addPolyFillAfterMainPreRenderTemplate(document);
-      hideCustomShadowDom(document);
-      showCustomShadowDom(document);
-    {{/unless}}
-    {{#if supportShadowDomInPreRendering}}
-      overrideCustomElementDefine(document);
-      walkPreRenderedElements(document);
+      triggerShadowRendering(document);
+      {{#if addSSRInnerShadowDomSupport}}
+
+        overrideCustomElementDefine(document);
+        walkPreRenderedElements(document);
+      {{/if}}
+    {{else}}
+      // do nothing
     {{/if}}
   },
 {{#if isPlentymarkets}}
@@ -130,11 +127,12 @@ const config = {
 {{else}}
   executeDeploymentDetection: true,
 {{/if}}
-  {{#unless addPreRendering}}
-    {{#if removeLazyLoading}}
-      lazyLoadList,
-    {{/if}}
-  {{else}}
+  {{#if removeLazyLoading}}
+    lazyLoadList,
+  {{/if}}
+  {{#if addSSR}}
+
+    // SSR specific:
     preRender: {
       lambdaUrl: '<generate-new-lambda-function-and-paste-url-endpoint-here>',
       elements: [
@@ -147,11 +145,11 @@ const config = {
             "body > style",
             "body > link[rel='stylesheet'][href]",
           ].join(","),
-          appendTo: ".sk-container template",
+          appendTo: "sk-shadow-app-root > template",
         },
         // 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", appendTo: ".sk-container template" },
+        { selector: "body > #app", appendTo: "sk-shadow-app-root > template" },
       ],
       guards: [
         {
@@ -160,7 +158,7 @@ const config = {
             // e.g. wait for first 4 images to be loaded
             '.products-list-page__products-list .products-list__tiles__element:nth-child(-n+4) img[src=""]',
           ],
-          {{#if supportShadowDomInPreRendering}}
+          {{#if addSSRInnerShadowDomSupport}}
             waitForCallback: waitForCallback.toString(),
           {{/if}}
         },
@@ -182,10 +180,10 @@ const config = {
         ],
       },
     },
-  {{/unless}}
+  {{/if}}
 }
 
-const documentHandler = new {{#if addPreRendering}}DomDocumentHandler{{else}}DocumentHandler{{/if}}({
+const documentHandler = new DomDocumentHandler({
   ...config,
   app: APP,
   dynamicFetcher: DYNAMIC_FETCHER,
@@ -196,44 +194,42 @@ const documentHandler = new {{#if addPreRendering}}DomDocumentHandler{{else}}Doc
 export const post = async (db, req, res) => {
   await documentHandler.transformAndSend(db, req, res);
 }
-{{#unless addPreRendering}}
-  {{#if includeServiceWorker}}
-
-    //================================================================================
-    // Utility Functions
-    //================================================================================
-
-    function prepend(string, searchString, prependString) {
-      const index = string.lastIndexOf(searchString);
-      return string.slice(0, index) + prependString + string.slice(index);
-    }
+{{#if includeServiceWorker}}
 
-    function injectServiceWorkerScript(html, searchedSwPath) {
-      return prepend(html, '</head>', `
-<script class="speed-kit-service-worker">
-    var serviceWorkerRegister = ServiceWorkerContainer.prototype.register;
-    ServiceWorkerContainer.prototype.register = function (swPath, options) {
+  /**
+    * 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.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 navigator.serviceWorker.getRegistration();
         }
         return serviceWorkerRegister.call(this, swPath, options);
-    };
-</script>
-  `);
-    }
-  {{/if}}
-{{/unless}}
+      };`;
+
+    document.head.appendChild(swScript);
+  }
+{{/if}}
+{{#if addSSR}}
 
-{{#if addPreRendering}}
   /**
    * Generates the main shadow root for the given DOM.
    * This is the parent element of the extracted pre-rendered content.
+   *
    * @param document
    */
   function generateMainShadowRoot(document) {
-    const customContainer = document.createElement("div");
-    customContainer.classList.add("sk-container");
-    customContainer.classList.add("speed-kit-shadow-app-root");
+    const customContainer = document.createElement("sk-shadow-app-root");
+    customContainer.setAttribute("aria-hidden", "true"); // hide from screen readers
+
     const template = document.createElement("template");
     template.setAttribute("shadowrootmode", "open");
     customContainer.appendChild(template);
@@ -245,21 +241,22 @@ export const post = async (db, req, res) => {
    * Creates preloads for inner style links in the given document.
    *
    * @param {Document} document - The document object to search for inner style links.
-   *
    * @return {void}
    */
   function createPreloadsForInnerStyleLinks(document) {
-    const innerStyleLinks = document.querySelectorAll(
-      '.speed-kit-pre-rendered-block-added[rel="stylesheet"][href]',
-    );
-    const head = document.querySelector("head");
-    innerStyleLinks.forEach((styleLink) => {
-      const link = document.createElement("link");
-      link.setAttribute("rel", "preload");
-      link.setAttribute("as", "stylesheet");
-      link.setAttribute("href", styleLink.getAttribute("href"));
-      head.append(link);
-    });
+    const customShadowRoots = getCustomShadowElements(document);
+    for (const customShadowRoot of customShadowRoots) {
+      const innerStyleLinks = customShadowRoot.querySelectorAll('link[rel="stylesheet"][href]');
+
+      const head = document.querySelector("head");
+      innerStyleLinks.forEach((styleLink) => {
+        const link = document.createElement("link");
+        link.setAttribute("rel", "preload");
+        link.setAttribute("as", "stylesheet");
+        link.setAttribute("href", styleLink.getAttribute("href"));
+        head.append(link);
+      });
+    }
   }
 
   /**
@@ -269,25 +266,28 @@ export const post = async (db, req, res) => {
    */
   function removeInnerScriptNodes(document) {
     // remove all innerShadowDom script, as they would be executed again
-    Array.from(
-      document.querySelectorAll(".speed-kit-pre-rendered-block-added script"),
-    ).forEach((scriptNode) => scriptNode.remove());
+    const customShadowRoots = getCustomShadowElements(document);
+    for (const customShadowRoot of customShadowRoots) {
+      Array.from(customShadowRoot.querySelectorAll("script")).forEach((scriptNode) => scriptNode.remove());
+    }
   }
 
   /**
-   * Assigns styles to the Shadow DOM of specified document.
+   * Assigns dynamic styles to the Shadow DOM of specified document.
    *
    * @param {Document} document - The document object to which styles are to be assigned.
    * @throws {Abort} Throws an error if `skStyles` is not found.
    */
-  function assignStylesToShadowDom(document) {
-    const skStyles = document.querySelector('[id="speed-kit-df-styles"]');
+  function assignDynamicStylesToShadowDom(document) {
+    const skStyles = document.querySelector("#speed-kit-df-styles");
 
     if (!skStyles) {
-      throw new Abort("skStyles not found");
+      throw new Abort("#speed-kit-df-styles not found");
     }
     const clonedStyles = document.createElement("style");
-    clonedStyles.classList.add("speed-kit-df-styles");
+    for (const attr of skStyles.attributes) {
+      clonedStyles.setAttribute(attr.name, attr.value);
+    }
     clonedStyles.textContent = skStyles.textContent;
 
     const customShadowElements = getCustomShadowElements(document);
@@ -298,15 +298,17 @@ export const post = async (db, req, res) => {
 
   /**
    * Helper function to select all template elements.
+   *
    * @param document
    * @returns {*}
    */
   function getCustomShadowElements(document) {
-    return document.querySelectorAll(".sk-container > template");
+    return document.querySelectorAll("sk-shadow-app-root > template");
   }
 
   /**
    * Adds the declarative shadow dom polyfill to the head of the document.
+   *
    * @param document
    */
   function addDeclarativeShadowDOMPolyfill(document) {
@@ -324,7 +326,6 @@ export const post = async (db, req, res) => {
    * https://developer.chrome.com/docs/css-ui/declarative-shadow-dom#polyfill
    *
    * @param {HTMLTemplateElement} template - The template element to be transformed into a Shadow Root.
-   *
    * @constructor
    */
   function SKShadowRootsPolyfill(template) {
@@ -344,49 +345,92 @@ export const post = async (db, req, res) => {
   }
 
   /**
-   * Calls the polyfill for shadowRoots after the main pre-rendered template.
+   * Wraps pre-rendered elements with custom sk-html and sk-body tags.
+   *
    * @param document
    */
-  function addPolyFillAfterMainPreRenderTemplate(document) {
-    let topLevelPreRenderElements = document.querySelectorAll(
-      ".speed-kit-pre-rendered-block-added",
-    );
-    topLevelPreRenderElements.forEach((element) => {
-      let topTemplate = element.querySelector('template[shadowrootmode="open"]');
-      if (!topTemplate) {
-        return;
+  function wrapPreRenderedElementsWithCustomRootTags(document) {
+    const customShadowRoots = getCustomShadowElements(document);
+
+    function createCustomElement(tagName, sourceSelector) {
+      const el = document.createElement(tagName);
+      const source = document.querySelector(sourceSelector);
+      if (source) {
+        for (const attr of source.attributes) {
+          el.setAttribute(attr.name, attr.value);
+        }
       }
+      return el;
+    }
 
-      // polyfill for shadowRoots
-      let polyfillScript = document.createElement("script");
-      polyfillScript.textContent = `SKShadowRootsPolyfill(document?.currentScript?.previousElementSibling)`;
-      topTemplate.after(polyfillScript);
-    });
+    for (const customShadowRoot of customShadowRoots) {
+      const skHtml = createCustomElement("sk-html", "html");
+      const skBody = createCustomElement("sk-body", "body");
+
+      // move all children from the shadow root element into sk-body
+      while (customShadowRoot.firstChild) {
+        // remove class which is no longer needed
+        customShadowRoot.firstChild.classList.remove("speed-kit-pre-rendered-block-added");
+
+        // move element to sk-body
+        skBody.appendChild(customShadowRoot.firstChild);
+      }
+
+      // append sk-body inside sk-html
+      skHtml.appendChild(skBody);
+
+      // append sk-html into the shadow root element
+      customShadowRoot.appendChild(skHtml);
+    }
   }
 
-  function hideCustomShadowDom(document) {
+  /**
+   * Calls the polyfill for shadowRoots after the main pre-rendered template.
+   *
+   * @param document
+   */
+  function addPolyFillAfterMainPreRenderTemplate(document) {
     const customShadowRoots = getCustomShadowElements(document);
+    for (const customShadowRoot of customShadowRoots) {
+      let topLevelPreRenderElements = customShadowRoot.querySelectorAll("sk-body > *");
+      topLevelPreRenderElements.forEach((element) => {
+        let topTemplate = element.querySelector('template[shadowrootmode="open"]');
+        if (!topTemplate) {
+          return;
+        }
 
-    customShadowRoots.forEach((element) => {
-      const style = document.createElement("style");
-      style.textContent = `.speed-kit-pre-rendered-block-added{visibility:hidden;}`;
-      element.prepend(style);
-    });
+        // polyfill for shadowRoots
+        let polyfillScript = document.createElement("script");
+        polyfillScript.textContent = `SKShadowRootsPolyfill(document?.currentScript?.previousElementSibling)`;
+        topTemplate.after(polyfillScript);
+      });
+    }
   }
 
-  function showCustomShadowDom(document) {
+  /**
+   * Forces rendering of elements within custom shadow DOMs by briefly toggling
+   * their visibility via injected style rules.
+   *
+   * @param document
+   */
+  function triggerShadowRendering(document) {
     const customShadowRoots = getCustomShadowElements(document);
-
-    customShadowRoots.forEach((element) => {
-      const style = document.createElement("style");
-      style.textContent = `.speed-kit-pre-rendered-block-added{visibility:visible;}`;
-      element.appendChild(style);
-    });
+    for (const customShadowRoot of customShadowRoots) {
+      const hidingStyle = document.createElement("style");
+      hidingStyle.textContent = `sk-html{visibility:hidden;}`;
+      customShadowRoot.prepend(hidingStyle);
+
+      const visibilityStyle = document.createElement("style");
+      visibilityStyle.textContent = `sk-html{visibility:visible;}`;
+      customShadowRoot.appendChild(visibilityStyle);
+    }
   }
-  {{#if supportShadowDomInPreRendering}}
+  {{#if addSSRInnerShadowDomSupport}}
+
     //================================================================================
-    // PuppeteerCallback
+    // Puppeteer Callback
     //================================================================================
+
     /**
      * Waits for the callback when custom elements are defined on the document.
      *
@@ -465,7 +509,7 @@ export const post = async (db, req, res) => {
           return instance;
         };
 
-        // create a dynamic proxy class which si overwriting all lifecycle hooks of the original class
+        // create a dynamic proxy class which is overwriting all lifecycle hooks of the original class
         skProxy.prototype = Object.create(o.prototype, {
           constructor: {
             value: skProxy,
@@ -495,7 +539,7 @@ export const post = async (db, req, res) => {
 
         Object.setPrototypeOf(skProxy, o);
 
-        const skContainer = document.querySelector(".speed-kit-shadow-app-root");
+        const skContainer = document.querySelector("sk-shadow-app-root");
         let skContainerParentNode;
         let skContainerNextNode;
         if (skContainer) {
@@ -560,6 +604,5 @@ export const post = async (db, req, res) => {
         }
       });
     }
-  {{else}}
   {{/if}}
 {{/if}}