@speedkit/cli 4.3.0 → 4.4.1

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [4.4.1](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v4.4.0...v4.4.1) (2026-05-13)
+
+
+### Bug Fixes
+
+* **sk-config:** mock methods ([d479dcf](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/d479dcff73b0251ced9c160623b92831cc39648e))
+
+# [4.4.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v4.3.0...v4.4.0) (2026-05-13)
+
+
+### Features
+
+* **wizard:** ssr defaults ([a4443c1](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/a4443c10d33088deda104d352d548399c5a17748))
+* **wizard:** ssr defaults ([e6b8a4d](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/e6b8a4d28cec310e381f25b7da217789ffa4c8f0))
+* **wizard:** templates ([2ee8f80](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/2ee8f80e94b16c00a125886ab4642498fb9c06a9))
+* **wizard:** templates ([8a322e7](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/8a322e70d899827ae43d6bfc2125cb15bbc6150a))
+
 # [4.3.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v4.2.1...v4.3.0) (2026-05-12)
 
 

package/README.md

@@ -21,7 +21,7 @@ $ npm install -g @speedkit/cli
 $ sk COMMAND
 running command...
 $ sk (--version)
-@speedkit/cli/4.3.0 linux-x64 node-v22.22.2
+@speedkit/cli/4.4.1 linux-x64 node-v22.22.2
 $ sk --help [COMMAND]
 USAGE
   $ sk COMMAND

package/dist/helpers/evaluate-speed-kit-config.js

@@ -56,10 +56,18 @@ function buildBrowserMock(origin, app) {
         serviceWorkerUrl: "",
         screen: { width: 0, height: 0 },
         devicePixelRatio: 1,
-        setTimeout: (callBack, time) => setTimeout(callBack, time),
-        clearTimeout: () => clearTimeout,
-        addEventListener: () => addEventListener,
-        removeEventListener: () => removeEventListener,
+        setTimeout: () => {
+            /* empty */
+        },
+        clearTimeout: () => {
+            /* empty */
+        },
+        addEventListener: () => {
+            /* empty */
+        },
+        removeEventListener: () => {
+            /* empty */
+        },
         navigator: {
             userAgent: "",
             connection: {},

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

@@ -99,19 +99,14 @@ import { ShopifyPlugin } from "speed-kit-config/ShopifyPlugin";
 {{#if addDeviceDetection}}
   {{#unless addSSR}}
     userAgentDetection: true,
-  {{/unless}}
     detectDevice: function(doc) {
-  {{#if addSSR}}
-      // SSR specific – identify device based on screen width:
-      // TODO: adjust devices + breakpoints to your needs
-      var width = window?.screen?.width || 1024;
-      if (width < 768) return "mobile";
-      return "desktop";
-  {{else}}
       // TODO: adjust condition to your needs
       return doc.querySelector('<mobile-specific-element>') ? "mobile" : "desktop";
-  {{/if}}
     },
+  {{/unless}}
+  {{#if addSSR}}
+    customDevice: customDevice(),
+  {{/if}}
 {{/if}}
 {{#if addSSR}}
     customVariation: [
@@ -440,6 +435,29 @@ import { ShopifyPlugin } from "speed-kit-config/ShopifyPlugin";
   // Utility Functions
   //================================================================================
 
+  {{#if addSSR}}
+      function customDevice() {
+        var width = window.innerWidth || 1025;
+        // TODO: adjust devices + breakpoints to your needs
+        if (width <= 820) {
+          return "mobile";
+        }
+        return "desktop";
+      }
+
+      // Re-evaluate device on orientation change and push to service worker
+      window.addEventListener("orientationchange", function () {
+        if (typeof SpeedKit !== "undefined" && SpeedKit.updateDevice) {
+          SpeedKit.updateDevice(customDevice());
+        }
+      });
+      window.addEventListener("resize", function () {
+        if (typeof SpeedKit !== "undefined" && SpeedKit.updateDevice) {
+          SpeedKit.updateDevice(customDevice());
+        }
+      });
+  {{/if}}
+
   function getEnabledHosts(enabledHostsConfigs) {
     var allHosts = [];
     enabledHostsConfigs.forEach(function (enabledHostsConfig) {

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

@@ -87,44 +87,16 @@ const config = {
     {{/if}}
   },
   async preTransform({db, document, variation, url, headers}) {
-    {{#if addSSR}}
-      // SSR specific:
-      generateMainShadowRoot(document);
-    {{else}}
-      // do nothing
-    {{/if}}
+    // do nothing
   },
   async postTransform({db, document, variation, url, headers}) {
     {{#if includeServiceWorker}}
       injectServiceWorkerScript(document, '{{includeServiceWorker}}');
 
     {{/if}}
-    {{#if addSSR}}
-      // SSR specific:
-      if (!isPreRendered(document)) return;
-      createPreloadsForInnerStyleLinks(document);
-      removeInnerScriptNodes(document);
-      assignDynamicStylesToShadowDom(document);
-      addDeclarativeShadowDOMPolyfill(document);
-      wrapPreRenderedElementsWithCustomRootTags(document);
-      addPolyFillAfterMainPreRenderTemplate(document);
-      triggerShadowRendering(document);
-      {{#if isShopify}}
-        // Shopify specific: inject scripts into sk-html which set css variables (normally set to html element)
-        injectCSSVariableScripts(document);
-      {{/if}}
-      {{#if addSSRInnerShadowDomSupport}}
-
-        overrideCustomElementDefine(document);
-        walkPreRenderedElements(document);
-      {{/if}}
-    {{else}}
-      {{#if isShopify}}
-        // Shopify specific: inject script which sets css variables on the html element
-        injectCSSVariableScripts(document);
-      {{else}}
-        // do nothing
-      {{/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}}
@@ -159,6 +131,17 @@ const config = {
 
     // 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
@@ -169,11 +152,10 @@ const config = {
             "body > style:not([media='print'])",
             "body > link[rel='stylesheet'][href]:not([media='print'])",
           ].join(","),
-          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-shadow-app-root > template" },
+        { selector: "body > #app" },
       ],
       guards: [
         {
@@ -259,420 +241,52 @@ export const post = async (db, req, res) => {
     document.querySelector("head").appendChild(swScript);
   }
 {{/if}}
-{{#if addSSR}}
-
-  /**
-   * 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("sk-shadow-app-root");
-    customContainer.setAttribute("aria-hidden", "true"); // hide from screen readers
+{{#if addSSRInnerShadowDomSupport}}
 
-    const template = document.createElement("template");
-    template.setAttribute("shadowrootmode", "open");
-    customContainer.appendChild(template);
-
-    document.querySelector("body").prepend(customContainer);
-  }
-
-  /**
-   * Checks if the document is pre-rendered.
-   *
-   * @param document
-   */
-  function isPreRendered(document) {
-    return !!document.querySelector("html.speed-kit-pre-rendered");
-  }
+  //================================================================================
+  // Puppeteer Callback
+  //================================================================================
 
   /**
-   * Creates preloads for inner style links in the given document.
+   * Waits for the callback when custom elements are defined on the document.
    *
-   * @param {Document} document - The document object to search for inner style links.
-   * @return {void}
+   * @return {Promise} - A promise that resolves when all custom elements are defined, or if a timeout of 5 seconds occurs.
    */
-  function createPreloadsForInnerStyleLinks(document) {
-    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);
-      });
-
-      // preload fonts by moving font declarations from nested css to the head, as they are not supported in shadow doms
-      customShadowRoot.querySelectorAll(".speed-kit-font-face-preloads").forEach((fontFaceRules) => {
-        head.append(fontFaceRules);
+  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);
       });
-    }
-  }
-
-  /**
-   * 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
-    const customShadowRoots = getCustomShadowElements(document);
-    for (const customShadowRoot of customShadowRoots) {
-      Array.from(customShadowRoot.querySelectorAll("script")).forEach((scriptNode) => scriptNode.remove());
-    }
-  }
 
-  /**
-   * 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 assignDynamicStylesToShadowDom(document) {
-    const skStyles = document.querySelector("#speed-kit-df-styles");
-
-    if (!skStyles) {
-      throw new Abort("#speed-kit-df-styles not found");
-    }
-    const clonedStyles = document.createElement("style");
-    for (const attr of skStyles.attributes) {
-      clonedStyles.setAttribute(attr.name, attr.value);
-    }
-    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-shadow-app-root > template");
+    return await Promise.race([
+      Promise.all(promises),
+      new Promise((resolve) => {
+        setTimeout(resolve, 5000);
+      }),
+    ]);
   }
-
-  /**
-   * 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);
-      });
-  }
-
-  /**
-   * Wraps pre-rendered elements with custom sk-html and sk-body tags.
-   *
-   * @param document
-   */
-  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;
-    }
-
-    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);
-    }
-  }
-
-  /**
-   * 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;
-        }
-
-        // polyfill for shadowRoots
-        let polyfillScript = document.createElement("script");
-        polyfillScript.textContent = `SKShadowRootsPolyfill(document?.currentScript?.previousElementSibling)`;
-        topTemplate.after(polyfillScript);
-      });
-    }
-  }
-
-  /**
-   * 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);
-    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 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);
-        }),
-      ]);
-    }
-
-    //================================================================================
-    // INLINE SCRIPTS
-    //================================================================================
-
-    /**
-     * Overrides the window.customElements.define method to add custom code before calling the original function.
-     */
-    function overrideDefine() {
-      /* global HTMLElement, window, customElements */
-
-      // 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) {
-        if (options?.is && options?.is.length > 0) {
-          // eslint-disable-next-line no-undef
-          return originalDefine.call(window.customElements, e, o, options);
-        }
-
-        const lifeCycleCallbacks = [
-          "connectedCallback",
-          "disconnectedCallback",
-          "adoptedCallback",
-          "connectedMoveCallback",
-          "attributeChangedCallback",
-          "formAssociatedCallback",
-          "formResetCallback",
-          "formDisabledCallback",
-          "formStateRestoreCallback",
-        ];
-
-        let preventInit = false;
-        let skProxy = function () {
-          // This constructor is invoked for every custom element.
-          // However, we can return a new instance in this constructor which is then used for upgrading the element.
-          // We are using the Reflect.construct method to prevent invoking the original constructor
-          // initialization code if we are in the static rendered DOM tree of Speed Kit
-          let instance;
-          if (preventInit) {
-            instance = Reflect.construct(HTMLElement, arguments, skProxy);
-            instance.__skStatic = preventInit;
-          } else {
-            instance = Reflect.construct(o, arguments, skProxy);
-          }
-
-          return instance;
-        };
-
-        // create a dynamic proxy class which is overwriting all lifecycle hooks of the original class
-        skProxy.prototype = Object.create(o.prototype, {
-          constructor: {
-            value: skProxy,
-            writable: true,
-            configurable: true,
-          },
-          ...Object.fromEntries(
-            lifeCycleCallbacks
-              .map((callbackName) => [callbackName, o.prototype[callbackName]])
-              .filter(([, hasCallback]) => hasCallback)
-              .map(([callbackName, callback]) => {
-                return [
-                  callbackName,
-                  {
-                    value: function () {
-                      if (!this.__skStatic) {
-                        return callback.apply(this, arguments);
-                      }
-                    },
-                    writable: true,
-                    configurable: true,
-                  },
-                ];
-              }),
-          ),
-        });
-
-        Object.setPrototypeOf(skProxy, o);
-
-        const skContainer = document.querySelector("sk-shadow-app-root");
-        let skContainerParentNode;
-        let skContainerNextNode;
-        if (skContainer) {
-          skContainerParentNode = skContainer.parentNode;
-          skContainerNextNode = skContainer.nextSibling;
-          skContainer.remove();
-        }
-
-        // Control the upgrade of the sk static dom tree by temporary removing the tree while
-        // defining the new custom element. Do then a controlled upgrade of the sk dom tree by
-        // preventing the constructor invocation of the custom element class
-        originalDefine.call(window.customElements, e, skProxy, options);
-        if (skContainer) {
-          preventInit = true;
-          skContainerParentNode.insertBefore(skContainer, skContainerNextNode);
-          customElements.upgrade(skContainer);
-          preventInit = false;
-        }
-      };
-    }
-
-    /**
-     * 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) => {
-        // 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);
-        }
-      });
-    }
-  {{/if}}
 {{/if}}
 {{#if isShopify}}
 
   /**
-   * Injects scripts into sk-html within each shadow root that set CSS custom
+   * 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.
+   * 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 = getCustomShadowElements(document);
+      const customShadowRoots = document.querySelectorAll("sk-shadow-app-root > template");
       for (const customShadowRoot of customShadowRoots) {
         const skHtml = customShadowRoot.querySelector("sk-html");
         if (!skHtml) continue;

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

@@ -180,6 +180,18 @@ import { PredictivePreloading } from 'predictive-preloading/predictivePreloading
     },
 {{/if}}
 {{/if}}
+{{#if addSSR}}
+  {
+    on: "nextTick",
+    track: function (controller) {
+      controller.trackCustomEvent(
+        "viewportSize",
+        JSON.stringify({ innerWidth: window.innerWidth, innerHeight: window.innerHeight }),
+        0,
+      );
+    },
+  },
+{{/if}}
 {{#if useGATracking}}
 
     // TODO: remove or adapt if events are not properly covered by GAEcommerceTrackingPlugin
@@ -237,7 +249,7 @@ import { PredictivePreloading } from 'predictive-preloading/predictivePreloading
     //   },
     // },
 {{else}}
-  
+
   {{#if isShopify}}
     // No custom ecAddToCart tracking event needed as it is already handled by the speed-kit-config/ShopifyPlugin
     // No custom ecConversion tracking event as it is already handled by the Speed Kit Extension for Shopify

package/oclif.manifest.json

@@ -751,5 +751,5 @@
       ]
     }
   },
-  "version": "4.3.0"
+  "version": "4.4.1"
 }

package/package.json

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