@speedkit/cli 2.33.0 → 2.35.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [2.35.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v2.34.0...v2.35.0) (2024-06-21)
+
+
+### Features
+
+* **customer-config:** add ignore assets ([8774d78](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/8774d78d042ee80937c13cdd38acff84ca5b7e4f))
+
+# [2.34.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v2.33.0...v2.34.0) (2024-06-21)
+
+
+### Features
+
+* **config-wizard:** update prerendering template ([7803e34](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/7803e34a2eb129e9e43badebb0d17414e1e076c8))
+
 # [2.33.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v2.32.0...v2.33.0) (2024-06-19)
 
 

package/README.md

@@ -21,7 +21,7 @@ $ npm install -g @speedkit/cli
 $ sk COMMAND
 running command...
 $ sk (--version)
-@speedkit/cli/2.33.0 linux-x64 node-v20.14.0
+@speedkit/cli/2.35.0 linux-x64 node-v20.14.0
 $ sk --help [COMMAND]
 USAGE
   $ sk COMMAND

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

@@ -50,6 +50,12 @@ const config = {
   },
   blacklistHTML({db, {{#if addPreRendering}}document{{else}}html{{/if}}, 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}}
     return false;
   },
   shouldTransform({db, {{#if addPreRendering}}document{{else}}html{{/if}}, variation, url, headers}) {
@@ -66,7 +72,7 @@ const config = {
     {{#unless addPreRendering}}
       return html;
     {{else}}
-      // do nothing
+      generateMainShadowRoot(document);
     {{/unless}}
   },
   postTransform({db, {{#if addPreRendering}}document{{else}}html{{/if}}, variation, url, headers}) {
@@ -76,17 +82,32 @@ const config = {
       {{/if}}
       return html;
     {{else}}
-      // do nothing
+      createPreloadsForInnerStyleLinks(document);
+      removeInnerScriptNodes(document);
+      assignStylesToShadowDom(document);
+      addDeclarativeShadowDOMPolyfill(document);
+      addPolyFillAfterMainPreRenderTemplate(document);
     {{/unless}}
+    {{#if supportShadowDomInPreRendering}}
+      overrideCustomElementDefine(document);
+      walkPreRenderedElements(document);
+    {{/if}}
   },
-  {{#if isPlentymarkets}}
-    stripComments: false, // Plentymarkets specific
-  {{/if}}
-  {{#if isShopify}}
-    delayScriptPath: "/apps/speed-kit/speed-kit-dom-ready.js", // Shopify specific
-  {{else}}
-    delayScriptPath: "/speed-kit-dom-ready.js",
-  {{/if}}
+{{#if isPlentymarkets}}
+  stripComments: false, // Plentymarkets specific
+{{/if}}
+{{#if addPreRendering}}
+  ignoreAssets: [
+    // keep aligned with dynamicBlockConfig.assetChangeDetection.ignoreAssets
+  ],
+{{else}}
+  ignoreAssets: [],
+{{/if}}
+{{#if isShopify}}
+  delayScriptPath: "/apps/speed-kit/speed-kit-dom-ready.js", // Shopify specific
+{{else}}
+  delayScriptPath: "/speed-kit-dom-ready.js",
+{{/if}}
   executeDeploymentDetection: true,
   {{#unless addPreRendering}}
     {{#if removeLazyLoading}}
@@ -94,19 +115,30 @@ const config = {
     {{/if}}
   {{else}}
     preRender: {
-      lambdaUrl: 'https://pw5wfiqnr2kqdzzc45tu3rdjue0zildl.lambda-url.eu-central-1.on.aws',
+      lambdaUrl: '<generate-new-lambda-function-and-paste-url-endpoint-here>',
       elements: [
-        // app shell e.g. vue often uses #app
         // this will be the main element to extract from the rendered DOM
-        {selector: '#app'}
+        { selector: "body > #app", appendTo: ".sk-container template" },
+        // append all extracted styles to all pre-rendered elements (as they are capsuled in shadow doms)
+        {
+          selector: 'head > link[href*="css"]',
+          appendTo: ".sk-container template",
+        },
+        {
+          selector: "head > style",
+          appendTo: ".sk-container template",
+        },
       ],
       guards: [
-        { // plp
-          whenPresent: '.products-list-page', // check wait for selectors, when this is present on current Page
+        {
+          whenPresent: 'body > #app',
           waitFor: [
             // 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}}
+            waitForCallback: waitForCallback.toString(),
+          {{/if}}
         },
       ],
       rules: {
@@ -116,11 +148,13 @@ const config = {
         ],
         resourceType: [
           // only resource types listed here will be fetched
-          'xhr',
-          'font',
-          'script',
-          'document',
-          'stylesheet',
+          "xhr",
+          "fetch",
+          "font",
+          "script",
+          "document",
+          "stylesheet",
+          "image",
         ],
       },
     },
@@ -165,3 +199,303 @@ export const post = async (db, req, res) => {
     }
   {{/if}}
 {{/unless}}
+
+{{#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 template = document.createElement("template");
+    template.setAttribute("shadowrootmode", "open");
+    customContainer.appendChild(template);
+
+    document.querySelector("body").prepend(customContainer);
+  }
+
+  /**
+   * 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);
+    });
+  }
+
+  /**
+   * Removes all inner script nodes from the given document.
+   *
+   * @param {Document} document - The document object from which to remove script nodes.
+   */
+  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());
+  }
+
+  /**
+   * Assigns 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"]');
+
+    if (!skStyles) {
+      throw new Abort("skStyles not found");
+    }
+    const clonedStyles = document.createElement("style");
+    clonedStyles.classList.add("speed-kit-df-styles");
+    clonedStyles.textContent = skStyles.textContent;
+
+    const customShadowElements = getCustomShadowElements(document);
+    customShadowElements.forEach((shadowElement) => {
+      shadowElement.prepend(clonedStyles);
+    });
+  }
+
+  /**
+   * Helper function to select all template elements.
+   * @param document
+   * @returns {*}
+   */
+  function getCustomShadowElements(document) {
+    return document.querySelectorAll(".sk-container > template");
+  }
+
+  /**
+   * Adds the declarative shadow dom polyfill to the head of the document.
+   * @param document
+   */
+  function addDeclarativeShadowDOMPolyfill(document) {
+    const head = document.querySelector("head");
+    if (head) {
+      const script = document.createElement("script");
+      script.textContent = SKShadowRootsPolyfill.toString();
+      head.append(script);
+    }
+  }
+
+  /**
+   * Polyfills the creation of Shadow Roots for browsers that do not support Shadow DOM.
+   * If the browser supports Shadow DOM, this method does nothing.
+   * 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) {
+    // If the browser supports Shadow DOM, do nothing, as template is already transformed to a shadowRoot.
+    if (!template) {
+      return;
+    }
+    const mode = template.getAttribute("shadowrootmode");
+    const shadowRoot = template.parentNode.attachShadow({ mode });
+    shadowRoot.appendChild(template.content);
+    template.remove();
+    shadowRoot
+      .querySelectorAll("template[shadowrootmode]")
+      .forEach((template) => {
+        SKShadowRootsPolyfill(template);
+      });
+  }
+
+  /**
+   * Calls the polyfill for shadowRoots after the main pre-rendered template.
+   * @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;
+      }
+
+      // polyfill for shadowRoots
+      let polyfillScript = document.createElement("script");
+      polyfillScript.textContent = `SKShadowRootsPolyfill(document?.currentScript?.previousElementSibling)`;
+      topTemplate.after(polyfillScript);
+    });
+  }
+  {{#if supportShadowDomInPreRendering}}
+    //================================================================================
+    // PuppeteerCallback
+    //================================================================================
+    /**
+     * 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)");
+
+      const promises = [...undefinedElements]
+        .filter((button) => button.localName.startsWith("{{shadowDomCustomElementPrefix}}"))
+        .map((button) => {
+          // eslint-disable-next-line no-undef
+          return customElements.whenDefined(button.localName);
+        });
+
+      return await Promise.race([
+        Promise.all(promises),
+        new Promise((resolve) => {
+          setTimeout(resolve, 5000);
+        }),
+      ]);
+    }
+
+    //================================================================================
+    // INLINE SCRIPTS
+    //================================================================================
+
+    /**
+     * Overrides the window.customElements.define method to add custom code before calling the original function.
+     */
+    function overrideDefine() {
+      // Store the original function
+      // eslint-disable-next-line no-undef
+      let originalDefine = window.customElements.define;
+
+      // Create new function
+      // eslint-disable-next-line no-undef
+      window.customElements.define = function (e, o, options) {
+        // Execute your custom code
+        // Create a class for the element
+        let skProxy = class extends o {
+          constructor() {
+            super();
+          }
+
+          connectedCallback() {
+            if (this.hasAttribute("data-sk-static")) {
+              return;
+            }
+            // normal functionality
+            super.connectedCallback();
+          }
+
+          disconnectedCallback() {
+            // for sk-shadow-root don't do anything
+            if (this.hasAttribute("data-sk-static")) {
+              return;
+            }
+            // normal functionality
+            super.disconnectedCallback();
+          }
+
+          adoptedCallback() {
+            // for sk-shadow-root don't do anything
+            if (this.hasAttribute("data-sk-static")) {
+              return;
+            }
+            // normal functionality
+            super.adoptedCallback();
+          }
+
+          attributeChangedCallback(name, oldValue, newValue) {
+            // for sk-shadow-root don't do anything
+            if (this.hasAttribute("data-sk-static")) {
+              return;
+            }
+            // normal functionality
+            super.attributeChangedCallback(name, oldValue, newValue);
+          }
+
+          attachShadow(mode) {
+            if (this.hasAttribute("data-sk-static")) {
+              return null;
+            }
+            return super.attachShadow(mode);
+          }
+        };
+
+        // Call the original function with modified arguments
+        // eslint-disable-next-line no-undef
+        originalDefine.call(window.customElements, e, skProxy, options);
+      };
+    }
+
+    /**
+     * Overrides the custom element definition in the given document.
+     *
+     * @param {Document} document - The document object where the custom element is defined.
+     *
+     * @return {void} - This method does not return anything.
+     */
+    function overrideCustomElementDefine(document) {
+      const script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.classList.add("sk-shadowroot-extension");
+      script.textContent = `(${overrideDefine.toString()})()`;
+      document.querySelector("head").appendChild(script);
+    }
+
+    /**
+     * Walks through pre-rendered elements and performs specific actions on each element.
+     *
+     * @param {Document} document - The HTML document object.
+     */
+    function walkPreRenderedElements(document) {
+      const customShadowElements = getCustomShadowElements(document);
+      walkElements(customShadowElements, (element) => {
+        addStaticContextForPrerenderedElements(element);
+        // TODO extend if shadow-doms should be modified, as access to the shadow dom is not possible via querySelectors from the outside
+      });
+    }
+
+    /**
+     * Recursively walks through a tree of elements and applies a callback function to each element.
+     *
+     * @param {Array} elements - The array of elements to walk through. Each element should be an object with a 'children' property.
+     * @param {Function} callback - The callback function to apply to each element. It should take a single argument, which will be the current element.
+     *
+     * @return {undefined}
+     */
+    function walkElements(elements, callback) {
+      elements.forEach((element) => {
+        callback(element);
+        if (element.children && element.children.length > 0) {
+          walkElements(element.children, callback);
+        }
+      });
+    }
+
+    /**
+     * Adds static context for prerendered elements.
+     *
+     * @param {Element} element The element to add static context for.
+     */
+    function addStaticContextForPrerenderedElements(element) {
+      if (
+        "name" in element &&
+        element.name !== undefined &&
+        element.name.startsWith("{{shadowDomCustomElementPrefix}}")
+      ) {
+        element.setAttribute("data-sk-static", "1");
+      }
+    }
+  {{else}}
+  {{/if}}
+{{/if}}

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

@@ -37,6 +37,14 @@
     dynamicScriptExecution: true, // Shopify specific
     // => as some async external scripts are injected more or less randomly into the html, destroying the order of local & remote scripts
 {{/if}}
+{{#if addPreRendering}}
+    assetChangeDetection: {
+      ignore: [
+        // keep aligned with DocumentHandler's config.ignoreAssets
+      ],
+    },
+{{/if}}
+
     blocks: [
       // TODO: adjust/replace this exemplary list
 {{#if addPreRendering}}

package/oclif.manifest.json

@@ -681,5 +681,5 @@
       ]
     }
   },
-  "version": "2.33.0"
+  "version": "2.35.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@speedkit/cli",
   "description": "Speed Kit CLI",
-  "version": "2.33.0",
+  "version": "2.35.0",
   "author": {
     "name": "Baqend.com",
     "email": "info@baqend.com"