@speedkit/cli 2.31.1 → 2.32.0

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

@@ -1,9 +1,34 @@
 (function() {
 {{#if addPreRendering}}
-
-  const MAIN_PRE_RENDERED_BLOCK_SELECTOR = "#app";
+  {{#unless supportShadowDomInPreRendering}}
+    const PRERENDER_TIMEOUT = 30_000; // 30s
+    const PRERENDER_CHECK_INTERVAL = 300; // 300ms
+    const preRenderedRootConfig = [
+      // TODO: adjust/replace this exemplary list
+      {
+        selector: "body > #app, #speed-kit-pre-rendered-app",
+        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"],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+  {{/unless}}
 {{/if}}
-
   /**
    * @type {DynamicBlockConfig}
    */
@@ -12,11 +37,21 @@
     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}}
-{{#unless addPreRendering}}
-{{/unless}}
-
     blocks: [
       // TODO: adjust/replace this exemplary list
+{{#if addPreRendering}}
+  {{#unless supportShadowDomInPreRendering}}
+    ...preRenderedRootConfig.map((config) => {
+      return {
+        selector: config.selector,
+        merge: (localBlock, remoteBlock) => {
+          handlePreRenderBlock(localBlock, remoteBlock);
+        },
+        detectChanges: false,
+      };
+    }),
+  {{/unless}}
+{{/if}}
 
 {{#if isShopify}}
       // Shopify specific:
@@ -55,27 +90,6 @@
           // ...
         ],
       },
-{{#if addPreRendering}}
-
-      // Pre-Rendering:
-      {
-          selector: MAIN_PRE_RENDERED_BLOCK_SELECTOR,
-          merge: (localBlock,remoteBlock) => {
-              // handle preRendering by inserting pre-rendered #app before initial #app
-              if(window.dynamicBlockConfig.prerender){
-                  localBlock.classList.add('speed-kit-shadow-app-root');
-                  let localId = localBlock.getAttribute('id');
-                  if (localId) {
-                      localBlock.setAttribute('id',`sk-${localId}`)
-                  }
-                  localBlock.before(remoteBlock)
-                  return;
-              }
-              SpeedKit.replaceBlock(localBlock,remoteBlock);
-          },
-          detectChanges: false,
-      },
-{{/if}}
 {{#if isPlentymarkets}}
 
       // Plentymarkets specific:
@@ -117,8 +131,171 @@
   //================================================================================
 
 {{#if addPreRendering}}
-  async function sleep(interval = 500) {
-    return new Promise(resolve => setTimeout(resolve, interval))
+{{#if supportShadowDomInPreRendering}}
+  const preRenderedRootConfig = [
+    // TODO: adjust/replace this exemplary list
+    // TODO: accessing elements within a shadow-dom, nested detectChanges is needed on that level
+    {
+      selector: ".sk-container",
+      remote: "body > #app",
+      detectChanges: [
+        {
+          find: "tef-carousel",
+          detectChanges: [
+            {
+              find: ".slide tef-stage-teaser",
+              detectChanges: [
+                {
+                  find: '[slot="visual"] source',
+                  compare: ["srcset"],
+                },
+                {
+                  find: '[slot="overline"]',
+                  compare: ["text"],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  document.addEventListener("dynamic-fetcher-data-ready", function () {
+    setTimeout(() => {
+      registerRemoteRenderObserver();
+    }, 500);
+  });
+
+  function registerRemoteRenderObserver() {
+    window?.performance?.mark("sk-prerender-observe-start");
+
+    let promises = [];
+    for (const preRenderedRoot of preRenderedRootConfig) {
+      const remoteSelector = preRenderedRoot.remote;
+      const remoteRootElement = document.querySelector(remoteSelector);
+      if (!remoteRootElement) {
+        continue;
+      }
+      promises = [...promises, ...collectWaitForEvents(remoteRootElement)];
+    }
+    removePlaceholderWhenResolved(promises);
+  }
+
+  function collectWaitForEvents(remoteRootElement) {
+    const undefinedElements =
+      remoteRootElement.querySelectorAll(":not(:defined)");
+    return [...undefinedElements]
+      .filter((element) => element.localName.startsWith("{{shadowDomCustomElementPrefix}}"))
+      .map((element) => {
+        return customElements.whenDefined(element.localName);
+      });
+  }
+
+  /**
+   * checks for all webComponents to be ready before switching to origin
+   *
+   * @param remoteRootElement
+   */
+  function removePlaceholderWhenResolved(promises) {
+    const preRenderedPlaceHolders = document.querySelectorAll(
+      ".speed-kit-shadow-app-root",
+    );
+    Promise.race([
+      Promise.all(promises),
+      new Promise((resolve) => {
+        setTimeout(resolve, 5000);
+      }),
+    ])
+      .catch((error) => {})
+      .then(() => {
+        try {
+          detectChanges();
+        } catch (error) {}
+        preRenderedPlaceHolders.forEach((localRootElement) =>
+          localRootElement.remove(),
+        );
+        dispatchReadyEvent(window.dynamicBlockConfig.preRenderWaitFor);
+      });
+  }
+{{else}}
+  function handlePreRenderBlock(localBlock, remoteBlock) {
+    // handle preRendering by inserting pre-rendered #app before initial #app
+    if (
+      window.dynamicBlockConfig.preRenderWaitFor &&
+      window.dynamicBlockConfig.preRenderWaitFor.length > 0
+    ) {
+      localBlock.classList.add("speed-kit-shadow-app-root");
+      localBlock.before(remoteBlock);
+      return;
+    }
+    SpeedKit.replaceBlock(localBlock, remoteBlock);
+  }
+
+  document.addEventListener("dynamic-fetcher-data-ready", () => {
+    function registerRemoteRenderObserver() {
+      window?.performance?.mark("sk-prerender-observe-start");
+
+      for (const preRenderedRoot of preRenderedRootConfig) {
+        const selector = preRenderedRoot.selector
+          .split(",")
+          .map((selector) => {
+            return selector + ".speed-kit-pre-rendered-block-added";
+          })
+          .join(",");
+
+        const localRootElement = document.querySelector(selector);
+
+        if (!localRootElement) {
+          continue;
+        }
+        removePlaceholder(localRootElement);
+      }
+    }
+    registerRemoteRenderObserver();
+  });
+
+  /**
+   * checks for all webComponents to be ready before switching to origin
+   *
+   * @param localRootElement
+   */
+  function removePlaceholder(localRootElement) {
+    let waitFor = [];
+    for (let selector of window.dynamicBlockConfig.preRenderWaitFor) {
+      waitFor.push(
+        querySelectorWithRetry(
+          document,
+          selector,
+          PRERENDER_CHECK_INTERVAL,
+          Math.floor(PRERENDER_TIMEOUT / PRERENDER_CHECK_INTERVAL),
+        ),
+      );
+    }
+
+    const promises = [...waitFor];
+
+    Promise.race([
+      Promise.all(promises),
+      new Promise((resolve) => {
+        setTimeout(resolve, PRERENDER_TIMEOUT);
+      }),
+    ])
+      .catch((error) => {})
+      .then(() => {
+        try {
+          detectChanges(
+            localRootElement,
+            window.dynamicBlockConfig.preRenderWaitFor,
+          );
+        } catch (error) {}
+        localRootElement.remove();
+        dispatchReadyEvent(window.dynamicBlockConfig.preRenderWaitFor);
+      });
+  }
+
+  async function sleep(interval = 100) {
+    return new Promise((resolve) => setTimeout(resolve, interval));
   }
 
   /**
@@ -129,119 +306,124 @@
    * @param maxAttempts
    * @returns {Promise<*>}
    */
-  async function querySelectorWithRetry(root, selector, retryInterval = 500, maxAttempts = 10) {
+  async function querySelectorWithRetry(
+    root,
+    selector,
+    retryInterval = 100,
+    maxAttempts = 50,
+  ) {
     for (let i = 0; i < maxAttempts; i++) {
       const element = root.querySelector(selector);
       if (element) {
-        return element
+        return element;
       }
-      await sleep(retryInterval)
+      await sleep(retryInterval);
     }
   }
-
-  // hide preRendered appRoot if configured waitForElements were found on remote block
-  const shadowAppRoot = document.querySelector(`body > ${MAIN_PRE_RENDERED_BLOCK_SELECTOR}.speed-kit-pre-rendered-block-added`);
-  if (shadowAppRoot) {
-    document.addEventListener('dynamic-fetcher-data-ready', () => {
-      if (window.dynamicBlockConfig.prerender) {
-        let waitFor = []
-        for (let selector of window.dynamicBlockConfig.prerender) {
-          waitFor.push(querySelectorWithRetry(document, prepareWaitForSelector(`body > ${MAIN_PRE_RENDERED_BLOCK_SELECTOR}:not(.speed-kit-pre-rendered-block-added) `, selector)))
-        }
-
-        return Promise.all(waitFor).catch(() => true).then(() => {
-          let appRoot = document.querySelector(`body > ${MAIN_PRE_RENDERED_BLOCK_SELECTOR}:not(.speed-kit-pre-rendered-block-added)`)
-          detectChanges(shadowAppRoot, appRoot, window.dynamicBlockConfig.prerender);
-          shadowAppRoot.remove();
-          dispatchReadyEvent();
-        })
-      }
-    })
-  }
-
-  /**
-   * prepare selector for querySelectorWithRetry
-   * @param root - root element
-   * @param selector - selector string
-   * @returns {*}
-   */
-  function prepareWaitForSelector(root, selector) {
-    return selector.split(',').map(string => {
-      return root + string
-    }).join(',');
-  }
-
+{{/if}}
   /**
    * dispatch prerender ready event after shadow app root was removed
    */
-  function dispatchReadyEvent() {
-    document.dispatchEvent(new CustomEvent('speed-kit-prerender-ready'))
+  function dispatchReadyEvent(preRenderWaitForElement) {
+    window?.performance?.mark("sk-prerender-observe-end");
+    document.dispatchEvent(
+      new CustomEvent("speed-kit-prerender-ready", {
+        detail: { element: preRenderWaitForElement },
+      }),
+    );
+    document.querySelector("html").classList.add("sk-prerender-ready");
   }
 
-  function detectChanges(local, remote, prerender) {
-    let changes = {}
-    let hasChanges = false;
-    for (let selector of prerender) {
-      let localBlock = local.querySelector(selector);
-      if (!localBlock) {
-        console.log(selector + ' not found')
-        continue;
-      }
+  function detectChanges() {
+    window?.performance?.mark("sk-prerender-change-detection-start");
 
-      let remoteBlock = remote.querySelector(selector)
-      let reason = []
+    for (const config of preRenderedRootConfig) {
+      const localRootElement = document.querySelector(
+        `${config.selector}.speed-kit-pre-rendered-block-added`,
+      );
+      const remoteRootElement = document.querySelector(
+        `${config.selector}:not(.speed-kit-pre-rendered-block-added)`,
+      );
 
-      if (localBlock && !remoteBlock) {
-        reason.push({selector, reason: 'remote block not found'})
-        changes[selector] = reason
-        hasChanges = true;
+      if (!localRootElement || !remoteRootElement) {
         continue;
       }
-
-      if (localBlock.hasAttribute('data-sk-change-detect')) {
-        continue;
+      if (config.detectChanges && config.detectChanges.length > 0) {
+        for (const detect of config.detectChanges) {
+          detectChangesInBlock(localRootElement, remoteRootElement, detect);
+        }
       }
+    }
+    window?.performance?.mark("sk-prerender-change-detection-end");
+  }
 
-      if (localBlock.hasAttribute('srcset') && (localBlock.getAttribute('srcset') !== remoteBlock.getAttribute('srcset'))) {
-        reason.push({selector, reason: 'srcset differs'})
-      }
+  function detectChangesInBlock(
+    parentLocalElement,
+    parentRemoteElement,
+    config,
+  ) {
+    const localRootElement = parentLocalElement.querySelector(config.find);
+    const remoteRootElement = parentRemoteElement.querySelector(config.find);
 
-      if (localBlock.hasAttribute('src') && (localBlock.getAttribute('src') !== remoteBlock.getAttribute('src'))) {
-        reason.push({selector, reason: 'src differs'})
-      }
+    if (!localRootElement) {
+      return;
+    }
+
+    if (!remoteRootElement) {
+      sendRevalidation(config.find, "remote block not found");
+    }
 
-      if (localBlock.hasAttribute('href') && (localBlock.getAttribute('href') !== remoteBlock.getAttribute('href'))) {
-        reason.push({selector, reason: 'href differs'})
+    // on next subElement search for changes
+    if (config.detectChanges && config.detectChanges.length > 0) {
+      for (const detect of config.detectChanges) {
+        detectChangesInBlock(localRootElement, remoteRootElement, detect);
       }
+      return;
+    }
+
+    if (!config.compare || config.compare.length === 0) {
+      return;
+    }
 
-      let localString = localBlock.innerHTML.replace(/\s+/g, '').replace(/<!--.*?-->/g, "");
-      let remoteString = remoteBlock.innerHTML.replace(/\s+/g, '').replace(/<!--.*?-->/g, "");
-      if (localString !== remoteString) {
-        reason.push({selector, reason: 'innerHTML differs'})
+    for (const compare of config.compare) {
+      if (
+        compare === "text" &&
+        localRootElement.innerHTML !== remoteRootElement.innerHTML
+      ) {
+        sendRevalidation(config.find, "content diffs");
+        continue;
       }
-      if (reason.length > 0) {
-        changes[selector] = reason
-        hasChanges = true;
+
+      if (
+        localRootElement.hasAttribute(compare) &&
+        remoteRootElement.hasAttribute(compare) &&
+        localRootElement.getAttribute(compare) !==
+        remoteRootElement.getAttribute(compare)
+      ) {
+        sendRevalidation(config.find, `${compare} diffs`);
       }
     }
-    if (hasChanges) {
-      sendRevalidation(window.location.href, changes)
-    }
   }
 
-  function sendRevalidation(url, selectors) {
-    let baqendAssetUrl = url;
+  /**
+   * @param selector {string}
+   * @param reason {string}
+   */
+  function sendRevalidation(selector, reason) {
+    let baqendAssetUrl = location.href;
     let userId = window.SpeedKit.userId || "";
     let sessionId = window.SpeedKit.sessionId || "";
     let navigateId = window.SpeedKit.navigateId;
 
     let detectedChanges = {
       url: baqendAssetUrl,
-      triggeredBy: selectors,
+      triggeredBy: { [selector]: [reason] },
     };
 
-    // Please note: *.appName is being provided by the DocumentHandler AFTER having this config processed
-    let beaconUrl = `https://${window.dynamicBlockConfig.appName}.app.baqend.com/v1/rum/pi`;
+    let beaconUrl =
+      "https://" +
+      window.dynamicBlockConfig.appName +
+      ".app.baqend.com/v1/rum/pi";
     let data = {
       piId: navigateId,
       userId: userId,

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

@@ -103,14 +103,14 @@ html > body {
   mask-repeat: no-repeat;
 }
 {{#if addPreRendering}}
-
-/* Pre-Rendering */
-body > div.speed-kit-pre-rendered-block-added {
-  position: absolute !important;
-  top: 0 !important;
-  width: calc(100vw) !important;
-  left: 0 !important;
-  z-index: 1000;
+/* positioning for prerendered 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/dist/services/customer-config/templates/config_loadHandler.js.hbs

@@ -16,6 +16,60 @@ import { GAEcommerceTrackingPlugin } from 'rum/GAEcommerceTrackingPlugin';
     new GAEcommerceTrackingPlugin(),
 {{/if}}
 
+{{#if addPreRendering}}
+  {
+    key: "isPreRendered",
+    type: "PiDimension",
+    on: "load",
+    set: function () {
+      return !!document.querySelector(".speed-kit-pre-rendered");
+    },
+  },
+  {
+    on: onPrerenderReady,
+    track: function (controller, custom, event) {
+      var measure = performance.measure("sk-prerender-observe-runtime", {
+        start: "sk-prerender-observe-start",
+        end: "sk-prerender-observe-end",
+      });
+      var timing = {
+        start: measure.startTime,
+        duration: measure.duration,
+        url: window.location.href,
+        element: event?.detail?.element,
+      };
+      controller.trackCustomEvent(
+        "skPrerenderReady",
+        JSON.stringify(timing),
+        timing.duration,
+      );
+    },
+  },
+  {
+    on: onPrerenderReady,
+    track: function (controller) {
+      var measure = performance.measure(
+        "sk-prerender-observe-change-detection",
+        {
+          start: "sk-prerender-change-detection-start",
+          end: "sk-prerender-change-detection-end",
+        },
+      );
+      var timing = {
+        start: measure.startTime,
+        duration: measure.duration,
+        url: window.location.href,
+      };
+
+      controller.trackCustomEvent(
+        "skPrerenderChangeDetection",
+        JSON.stringify(timing),
+        timing.duration,
+      );
+    },
+  },
+{{/if}}
+
     {
       key: 'language',
       type: 'SessionDimension',
@@ -391,4 +445,11 @@ import { GAEcommerceTrackingPlugin } from 'rum/GAEcommerceTrackingPlugin';
     blacklistIfLoggedIn();
   });
 {{/if}}
+{{#if addPreRendering}}
+  function onPrerenderReady(cb, controller) {
+    document.addEventListener("speed-kit-prerender-ready", (event) => {
+      cb(controller, event);
+    });
+  }
+{{/if}}
 }();

package/dist/services/deploy/error/file-handler-error.d.ts

@@ -0,0 +1,4 @@
+import ApplicationError from "../../error-handling/error/application-error";
+export declare class FileHandlerError extends ApplicationError {
+    readonly code = "NO_HANDLER_FOR_FILE_TYPE";
+}

package/dist/services/deploy/error/file-handler-error.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileHandlerError = void 0;
+const tslib_1 = require("tslib");
+const application_error_1 = tslib_1.__importDefault(require("../../error-handling/error/application-error"));
+class FileHandlerError extends application_error_1.default {
+    code = "NO_HANDLER_FOR_FILE_TYPE";
+}
+exports.FileHandlerError = FileHandlerError;

package/dist/services/diff-service.d.ts

@@ -1,4 +1,7 @@
 import { CliService } from "./cli";
+/**
+ * @deprecated
+ */
 export declare class DiffService {
     private cli;
     private tempPath;

package/dist/services/diff-service.js

@@ -6,6 +6,9 @@ const fs = tslib_1.__importStar(require("node:fs/promises"));
 const node_child_process_1 = require("node:child_process");
 const node_path_1 = tslib_1.__importDefault(require("node:path"));
 const file_helper_1 = require("../helpers/file-helper");
+/**
+ * @deprecated
+ */
 class DiffService {
     cli;
     tempPath = null;

package/dist/services/document-handler-runtime/document-handler-server.js

@@ -63,7 +63,7 @@ class DocumentHandlerServer {
             filename: this.files.getByName("config_documentHandler").path,
         });
         try {
-            const documentHandlerResponse = await (async () => {
+            return await (async () => {
                 return await new Promise((resolve, reject) => {
                     vmContext.skInternalResponse.resolve = resolve;
                     // @ts-expect-error reject is unknown
@@ -72,7 +72,6 @@ class DocumentHandlerServer {
                     script.runInContext(context, { displayErrors: true });
                 });
             })();
-            return documentHandlerResponse;
         }
         catch (error) {
             if (error instanceof Error) {
@@ -193,8 +192,7 @@ class DocumentHandlerServer {
             }
             try {
                 // eslint-disable-next-line @typescript-eslint/no-var-requires
-                const outerModule = require(module);
-                return outerModule;
+                return require(module);
             }
             catch (error) {
                 this.cli.writeError(`[documentHandler] could not load module: ${module}`);

package/dist/services/error-handling/error/application-error.d.ts

@@ -0,0 +1,18 @@
+import { PrettyPrintableError } from "@oclif/core/lib/interfaces";
+export default class ApplicationError extends Error implements PrettyPrintableError {
+    /**
+     * a suggestion that may be useful or provide additional context
+     */
+    suggestions?: string[];
+    /**
+     * an url to find out more information related to this error
+     * or fixing the error
+     */
+    reference?: string;
+    /**
+     * a unique error code for this error class
+     */
+    code?: string;
+    constructor(message: string, suggestions?: string[], reference?: string, code?: string);
+    get ref(): string;
+}

package/dist/services/error-handling/error/application-error.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class ApplicationError extends Error {
+    /**
+     * a suggestion that may be useful or provide additional context
+     */
+    suggestions;
+    /**
+     * an url to find out more information related to this error
+     * or fixing the error
+     */
+    reference;
+    /**
+     * a unique error code for this error class
+     */
+    code;
+    constructor(message, suggestions, reference, code) {
+        super(message);
+        this.reference = reference;
+        this.suggestions = suggestions;
+        this.code = code;
+    }
+    // eslint-disable-next-line unicorn/prevent-abbreviations
+    get ref() {
+        return this.reference;
+    }
+}
+exports.default = ApplicationError;

package/dist/services/error-handling/error/config-file-error.d.ts

@@ -0,0 +1,4 @@
+import ApplicationError from "./application-error";
+export declare class ConfigFileError extends ApplicationError {
+    readonly code = "CONFIG_FILE_ERROR";
+}