@speedkit/cli 3.9.1 → 3.10.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [3.10.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v3.9.1...v3.10.0) (2025-10-15)
+
+
+### Bug Fixes
+
+* **wizard:** ssr ([7f48214](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/7f48214e04aae0183b4027e1d0b103f22bbb8499))
+* **wizard:** ssr ([a848bb2](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/a848bb26f3fcafd79d12d7acbf4b9b4a32105ff4))
+
+
+### Features
+
+* **customer-config:** improve root-referencing style handling by parallelizing css fetching ([907d487](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/907d4875ed738ac6ba773562907a947a529ac198))
+* **customer-config:** move css processing from dh to lambda ([409da9b](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/409da9ba8c542ddcdc45feb5f25c06b3d98d37a3))
+* **customer-config:** optimise ssr handling + provide dom-parsing dh as default ([ac0c2fa](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/ac0c2fab72f926d8a818d21dd8c0a67c736d033d))
+* **customer-config:** prevent ssr shadow root container from being accessible by screen readers ([0743a91](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/0743a91a111ed1207fa3e8079c1a0f22166bc67c))
+* **customer-config:** remove ssr tv blacklisting due to deprecation ([5a7e6c2](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/5a7e6c2bfb12678153d1f7dd2b16790a47c27484))
+* **customer-config:** remove unnecessary ssr tablet disabling ([a48582f](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/a48582f65bb0f55019cc77476998c206f415d0ae))
+* **customer-config:** scope shadow app root container positioning to pre-rendered pages ([46e970b](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/46e970b35295794b9e05c588bf34fc80470a2f84))
+* **customer-config:** update ssr variation detection ([56a79b5](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/56a79b55f49b12628682bfbe9a23c403a39ebdba))
+* **customer-config:** update ssr variation detection ([8744274](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/87442749b5a3dc730195d5f009316501d80ed95c))
+
 ## [3.9.1](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v3.9.0...v3.9.1) (2025-10-15)
 
 

package/README.md

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

package/dist/services/customer-config/customer-config-service-model.d.ts

@@ -29,11 +29,9 @@ export interface CustomerConfigSettings {
     includeServiceWorker?: string;
     activateImageOptimisation?: boolean;
     removeLazyLoading?: boolean;
-    addPreRendering?: boolean;
-    addUADetection?: boolean;
-    supportShadowDomInPreRendering?: boolean;
-    shadowDomCustomElementPrefix?: string;
-    activateRumTracking?: boolean;
+    addSSR?: boolean;
+    addSSRInnerShadowDomSupport?: boolean;
+    addDeviceDetection?: boolean;
     useGATracking?: boolean;
     useScrapingBee?: boolean;
     withGoogleOptimize?: boolean;

package/dist/services/customer-config/customer-config-service.js

@@ -136,7 +136,7 @@ class CustomerConfigService {
         return true;
     }
     async getConfigSettings() {
-        let { production, staging, activateScopedDeployments, subRouteScope, includeServiceWorker, activateImageOptimisation, removeLazyLoading, addPreRendering, addUADetection, supportShadowDomInPreRendering, shadowDomCustomElementPrefix, activateRumTracking, useGATracking, useScrapingBee, withGoogleOptimize, activateCfRocketLoaderWorkaround, hasSoftNavigations, isShopify, isShopware, isSalesforce, isOxid, isPlentymarkets, isPOV, } = {};
+        let { production, staging, activateScopedDeployments, subRouteScope, includeServiceWorker, activateImageOptimisation, removeLazyLoading, addSSR, addSSRInnerShadowDomSupport, addDeviceDetection, useGATracking, useScrapingBee, withGoogleOptimize, activateCfRocketLoaderWorkaround, hasSoftNavigations, isShopify, isShopware, isSalesforce, isOxid, isPlentymarkets, isPOV, } = {};
         this.appName = await this.cli.prompt(`[App Name] Enter desired SK app name:`, {
             validator: (input) => /^[\da-z]+(?:-[\da-z]+)*$/.test(input) ? "" : "No valid kebab-case",
             defaultAnswer: this.appName,
@@ -181,29 +181,23 @@ class CustomerConfigService {
         if (await this.cli.confirm("[Service Worker] Is there a Service Worker which needs to be included?", false)) {
             includeServiceWorker = await this.cli.prompt("[Service Worker] Enter path of Service Worker to be included:", { defaultAnswer: "/sw.js" });
         }
-        addUADetection = await this.cli.confirm("[Variation handling] Do mobile and desktop versions of the website differ in their HTML structure, which would require us to add variations?", false);
         activateImageOptimisation = await this.cli.confirm("[IO] Should image optimisation be activated?", false);
-        removeLazyLoading = await this.cli.confirm("[Lazy-Loading] Does the shop require us to resolve lazy-loaded content?");
-        if (await this.cli.confirm("[Lambda-SSR] Add server-side-rendering? This requires a set-up Lambda function to work. Also requires usage of the DOM-based DocumentHandler.", false)) {
-            addPreRendering = true;
-            if (await this.cli.confirm("[Lambda-SSR] Does the customer utilize Shadow DOMs? If so additional handling for this will be added.", false)) {
-                supportShadowDomInPreRendering = true;
-                shadowDomCustomElementPrefix = await this.cli.prompt("[Lambda-SSR] Please specify the prefix of the custom elements used (e.g. o2 uses tef-): ", { defaultAnswer: "custom-" });
+        removeLazyLoading = await this.cli.confirm("[Lazy Loading] Does the shop require us to resolve lazy-loaded content?");
+        if (await this.cli.confirm("[Lambda SSR] Add server-side-rendering? This requires a set-up Lambda function to work.", false)) {
+            addSSR = true;
+            if (await this.cli.confirm("[Lambda SSR] Does the customer utilize Shadow DOMs? If so additional handling for this will be added.", false)) {
+                addSSRInnerShadowDomSupport = true;
             }
-            await this.cli.confirm("Confirm that you increased the Node memory limit to at least 1024 as the SSR setup is memory intensive." +
-                ' BBQ App -> Data -> App -> Search for App -> Addons -> "nodeMemLimit": 1024', false);
         }
+        // ask for variation handling only if adding Lambda SSR is not needed, as it will come with device detection anyway
+        addDeviceDetection = addSSR
+            ? true
+            : await this.cli.confirm("[Device Detection] Do mobile and desktop versions of the website differ in their HTML structure, which would require us to add variations?", false);
         useScrapingBee = await this.cli.confirm("[ScrapingBee] Do customer responses differ geo-location-based which would require ScrapingBee API to fetch documents?", false);
-        activateRumTracking = true;
-        // activateRumTracking = await this.cli.confirm(
-        //   "[Tracking] Activate RUM Tracking?",
-        // );
-        // if (activateRumTracking) {
         if (!isShopify) {
             useGATracking = await this.cli.confirm("[Tracking] Add tracking based on Google Analytics' DataLayer?");
         }
         hasSoftNavigations = await this.cli.confirm("[Tracking] Add tracking for Soft Navigations?", false);
-        // }
         isPOV = await this.cli.confirm("[Tracking] Is a POV (proof of value) anticipated, so that additional tracking is needed?", false);
         withGoogleOptimize = await this.cli.confirm("[Services] Is Google Optimize used?", false);
         activateCfRocketLoaderWorkaround = isShopify
@@ -218,11 +212,9 @@ class CustomerConfigService {
             includeServiceWorker,
             activateImageOptimisation,
             removeLazyLoading,
-            addPreRendering,
-            addUADetection,
-            supportShadowDomInPreRendering,
-            shadowDomCustomElementPrefix,
-            activateRumTracking,
+            addSSR,
+            addSSRInnerShadowDomSupport,
+            addDeviceDetection,
             useGATracking,
             useScrapingBee,
             withGoogleOptimize,

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

@@ -25,30 +25,6 @@
   var ENABLED_HOSTS = getEnabledHosts(ENABLED_HOSTS_CONFIGS);
   var CURRENT_HOST_CONFIG = getCurrentHostConfig(ENABLED_HOSTS_CONFIGS);
 
-{{#if addPreRendering}}
-    // Lambda SSR specific: disable SK for tablets as they are not covered in lambda
-    function isTablet() {
-      var userAgent = window.navigator.userAgent.toLowerCase();
-      var tabletUAs = [
-        /tablet/,
-        /ipad/,
-        /nexus 7/,
-        /nexus 10/,
-        /silk\//,
-        /\bgt-[pn]\d{4}\b/,
-        /\bsm-t\d{3}\b/,
-        /^.*android(?!.*mobile|.*smart-tv|.*smarttv|.*aft[tm]|.*crkey).*$/,
-      ];
-
-      if ("ontouchend" in document && userAgent.indexOf("Macintosh") > -1) {
-        return true;
-      }
-      return tabletUAs.some(function (ua) {
-        return ua.test(userAgent);
-      });
-    }
-{{/if}}
-
   /**
    * @type {SpeedKitConfig}
    */
@@ -66,22 +42,36 @@
     includeServiceWorker: "{{includeServiceWorker}}",
 {{/if}}
     preloadDynamicBlocks: true,
-    rumTracking: {{activateRumTracking}},
-{{#if addPreRendering}}
-  // Lambda SSR specific: detect device to cover different resolutions when rendered in lambda
-  userAgentDetection: true,
-{{else if addUADetection}}
-  userAgentDetection: true,
+    rumTracking: true,
+{{#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}}
+    },
 {{/if}}
-{{#if addUADetection}}
-  detectDevice: function(doc) {
-    // TODO adjust condition to your needs
-    return doc.querySelector('<mobile-specific-element>') ? "mobile" : "desktop";
-  },
+{{#if addSSR}}
+    customVariation: [
+      {
+        variationFunction: function (request, device, cookies) {
+          // SSR specific – don't report a variation for specific page types NOT covered by SSR:
+          // TODO: adjust and activate if needed
+          // if (request.url.indexOf("<url-page-type-idenfier>") > -1) return "desktop";
+          return device;
+        },
+      },
+    ],
 {{/if}}
-    split: CURRENT_HOST_CONFIG.split,
-    splitTestId: CURRENT_HOST_CONFIG.splitTestId,
-    disabled: !CURRENT_HOST_CONFIG.enabled{{#if addPreRendering}} || isTablet(){{/if}},
 {{#if useScrapingBee}}
     customVariation: [
       {
@@ -94,6 +84,9 @@
       },
     ],
 {{/if}}
+    split: CURRENT_HOST_CONFIG.split,
+    splitTestId: CURRENT_HOST_CONFIG.splitTestId,
+    disabled: !CURRENT_HOST_CONFIG.enabled,
     enabledSites: [
       {
         pathname: [
@@ -150,12 +143,6 @@
 {{/if}}
     ],
     blacklist: [
-{{#if addPreRendering}}
-      // blacklist tv variations
-      {
-        tv: true,
-      },
-{{/if}}
       {
         pathname: [
           // TODO: adjust/replace this exemplary list

package/dist/services/customer-config/templates/config_customer.json.hbs

@@ -1,56 +1,46 @@
 {
-"production": {
-"_meta": {
-"shopSystem":
-{{#if isShopify}}
-  "Shopify"
-{{else if isShopware}}
-  "Shopware"
-{{else if isSalesforce}}
-  "Salesforce Commerce Cloud"
-{{else if isOxid}}
-  "OXID eShop"
-{{else if isPlentymarkets}}
-  "Plentymarkets"
-{{else}}
-  "TODO: enter name of system in use"
-{{/if}}
-},
-"app": "{{appName}}",
-"domain": "{{production.host}}",
-"origins": [
-"https://{{production.host}}"
-],
-{{#if isShopify}}
-  "swPath": "/apps/speed-kit/sw.js",
-{{else}}
-  "swPath": "/wrapper-sw.js",
-{{/if}}
-{{#if subRouteScope}}
-  "scope": "/{{subRouteScope}}/",
-{{else}}
-  "scope": "/",
-{{/if}}
-"forceInstall": {{production.forceInstall}}
-}
-{{#if staging.host}},
-"staging": {
-"name": "staging",
-"domain": "{{staging.host}}",
-"origins": [
-"https://{{staging.host}}"
-],
-"forceInstall": {{staging.forceInstall}},
-{{#if isShopify}}
-  "swPath": "/apps/speed-kit/sw.js",
-{{else}}
-  "swPath": "/wrapper-sw.js",
-{{/if}}
-{{#if subRouteScope}}
-  "scope": "/{{subRouteScope}}/"
-{{else}}
-  "scope": "/"
-{{/if}}
-}
-{{/if}}
+  "production": {
+    "_meta": {
+      "shopSystem":
+      {{#if isShopify}}
+        "Shopify"
+      {{else if isShopware}}
+        "Shopware"
+      {{else if isSalesforce}}
+        "Salesforce Commerce Cloud"
+      {{else if isOxid}}
+        "OXID eShop"
+      {{else if isPlentymarkets}}
+        "Plentymarkets"
+      {{else}}
+        "TODO: enter name of system in use"
+      {{/if}}
+    },
+    "app": "{{appName}}",
+    "domain": "{{production.host}}",
+    "origins": [
+      "https://{{production.host}}"
+    ],
+  {{#if isShopify}}
+    "swPath": "/apps/speed-kit/sw.js",
+  {{else}}
+    "swPath": "/wrapper-sw.js",
+  {{/if}}
+  {{#if subRouteScope}}
+    "scope": "/{{subRouteScope}}/",
+  {{else}}
+    "scope": "/",
+  {{/if}}
+    "forceInstall": {{production.forceInstall}}
+  }
+  {{#if staging.host}},
+  "staging": {
+    "name": "staging",
+    "domain": "{{staging.host}}",
+    "origins": [
+      "https://{{staging.host}}"
+    ],
+    "forceInstall": {{staging.forceInstall}},
+  }
+  {{/if}}
 }

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}}

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

@@ -4,20 +4,21 @@
    */
   window.dynamicBlockConfig = {
     dynamicScriptExecution: true,
-{{#if addPreRendering}}
-    // ssr container
-    prerendered: [{ selector: "body > .speed-kit-shadow-app-root" }],
-{{/if}}
-{{#if addUADetection}}
-  detectDevice: (doc) => {
-    // TODO adjust condition to your needs
-    return doc.querySelector('<mobile-specific-element>') ? "mobile" : "desktop";
-  },
+{{#if addDeviceDetection}}
+  {{#unless addSSR}}
+    detectDevice: (doc) => {
+      // keep only if you need to check the DOM – for screen width checks the SK config's detectDevice is sufficient
+
+      // TODO: adjust condition to your needs
+      return doc.querySelector('<mobile-specific-element>') ? "mobile" : "desktop";
+    },
+  {{/unless}}
 {{/if}}
     blocks: [
       // TODO: adjust/replace this exemplary list
       {
         selector: "body",
+        {{#unless addSSR}}
         detectChanges: [
           // Main Headline:
           {
@@ -56,12 +57,14 @@
             compare: ["src"],
           },
         ],
+        {{/unless}}
       },
 {{#if isShopify}}
+
       // Shopify specific:
       {
         selector: "#shopify-section-announcement-bar",
-{{#unless addPreRendering}}
+{{#unless addSSR}}
         merge: false, // TODO: remove if body is not the main block
 {{/unless}}
         detectChanges: [{
@@ -110,31 +113,55 @@
       { selector: 'meta[property]', idAttribute: "property"},
       { selector: 'script[type="application/ld+json"]'},
     ],
-    {{#if addPreRendering}}
+{{#if addSSR}}
+
+    // SSR specific:
+    prerendered: [{ selector: "body > sk-shadow-app-root" }],
     preRenderedRootConfig: [
       // TODO: adjust/replace this exemplary list
       {
-      selector: ".prerendered-top-level-element",
-      detectChanges: [
-        {
-          // header area
-          find: "#page-root > div > .aem-container > div:nth-of-type(1)",
-          detectChanges: [
-            // main categories
-            {
-              find: 'button[id^="menu-button"] p',
-              compare: ["text"],
-            },
-            // logo
-            {
-              find: "img[src]",
-              compare: ["src"],
-            },
-          ],
-        },
+        selector: "sk-body",
+        remoteSelector: "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:
+          {
+            find: ".stage-teaser source",
+            compare: ["srcset"],
+          },
+
+          // PLP Items:
+          {
+            find: ".product-grid .product img",
+            limit: 9, // only compare the first 9 products
+            compare: ["src"],
+          },
+
+          // PDP Hero Image:
+          {
+            find: ".product-detail .slide.main img",
+            compare: ["src"],
+          },
         ],
       },
-        ],
-    {{/if}}
+    ],
+{{/if}}
   };
 })();

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

@@ -24,20 +24,36 @@
     background-position: calc(100% + 400px) 0;
   }
 }
+{{#if addSSR}}
+
+/* SSR specific – positioning for pre-rendered container */
+.speed-kit-pre-rendered sk-shadow-app-root {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  left: 0;
+  right: 0;
+  z-index: 99999;
+  background: #fff;
+}
+
+/*
+  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 {
-{{#if addPreRendering}}
-  /* TODO: use the following wrapping selector if you want to apply those styles to the pre-rendered block instead: */
-  /* .speed-kit-pre-rendered-block-added */
-{{/if}}
-
   .dummy-price-class,
   .dummy-availability-class {
     visibility: hidden;
@@ -75,7 +91,6 @@ html > body {
     }
   }
 
-
   /* Prevent Add2Cart clicks: */
   .dummy-add2cart-class {
     pointer-events: none !important;
@@ -111,16 +126,3 @@ html > body {
     mask-repeat: no-repeat;
   }
 }
-{{#if addPreRendering}}
-
-/* Positioning for pre-rendered containers */
-html.speed-kit-pre-rendered body > .speed-kit-shadow-app-root {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  left: 0;
-  right: 0;
-  z-index: 99999;
-  background: #fff;
-}
-{{/if}}

package/oclif.manifest.json

@@ -732,5 +732,5 @@
       ]
     }
   },
-  "version": "3.9.1"
+  "version": "3.10.0"
 }

package/package.json

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