@speedkit/cli 2.66.0-alpha.1 → 2.67.0

package/CHANGELOG.md

@@ -1,10 +1,37 @@
-# [2.66.0-alpha.1](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v2.65.0...v2.66.0-alpha.1) (2024-11-01)
+# [2.67.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v2.66.0...v2.67.0) (2024-12-10)
 
 
 ### Features
 
-* allow prerelease from alpha and beta branch ([365e480](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/365e480347a9efadc764a1aa6c907908259338d6))
-* embed devtools ([def9d97](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/def9d97f686b905e6db8d9db2df3510493bd00e2))
+* **customer-config:** add currency verification todo ([96d09df](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/96d09df4610a7b2ebe2ceeabef5a00bf0cbeab38))
+
+# [2.66.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v2.65.3...v2.66.0) (2024-12-05)
+
+
+### Features
+
+* **wizard:** add hint which lazy-removal option to use based on use-case ([daba081](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/daba0817180dc8d63630d84fc1a634067c0967ec))
+
+## [2.65.3](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v2.65.2...v2.65.3) (2024-11-13)
+
+
+### Bug Fixes
+
+* **onboarding:** live update styles ([648c145](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/648c14557b1d82235e93f609cdf46d443f7972db))
+
+## [2.65.2](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v2.65.1...v2.65.2) (2024-11-12)
+
+
+### Bug Fixes
+
+* **speed-kit-cli:** missing opening tag in force install ([dbee840](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/dbee840057c2ebbd00d032bf482297592025a818))
+
+## [2.65.1](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v2.65.0...v2.65.1) (2024-11-08)
+
+
+### Bug Fixes
+
+* **onboarding:** remove reference to defaultLocalDevtools ([c2c3128](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/c2c3128069169488a2cc5e1da85ea77676f55e8e))
 
 # [2.65.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v2.64.0...v2.65.0) (2024-11-01)
 

package/README.md

@@ -21,7 +21,7 @@ $ npm install -g @speedkit/cli
 $ sk COMMAND
 running command...
 $ sk (--version)
-@speedkit/cli/2.66.0-alpha.1 linux-x64 node-v20.18.0
+@speedkit/cli/2.67.0 linux-x64 node-v20.18.1
 $ sk --help [COMMAND]
 USAGE
   $ sk COMMAND
@@ -353,7 +353,7 @@ DESCRIPTION
   Display help for sk.
 ```
 
-_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v6.2.3/src/commands/help.ts)_
+_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v6.2.16/src/commands/help.ts)_
 
 ## `sk login [APP]`
 

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

@@ -2,6 +2,9 @@
   {{#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'},
       ],

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

@@ -1,43 +1,9 @@
 (function() {
-{{#if addPreRendering}}
-  {{#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}
    */
   window.dynamicBlockConfig = {
-{{#if isShopify}}
-    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}}
+    dynamicScriptExecution: true,
 {{#if addPreRendering}}
     assetChangeDetection: {
       ignore: [
@@ -62,31 +28,30 @@
   {{/unless}}
 {{/if}}
       // TODO: adjust/replace this exemplary list
-
       {
 {{#if addPreRendering}}
-        selector: '#main',
+        selector: ".prerendered-top-level-element",
 {{else}}
-        selector: 'body',
+        selector: "body",
 {{/if}}
         detectChanges: [
           // Main Headline:
           {
-            find: 'h1',
-            compare: ['text'],
+            find: "h1",
+            compare: ["text"],
           },
 
           // Home:
           {
-            find: '.stage-teaser source',
-            compare: ['srcset'],
+            find: ".stage-teaser source",
+            compare: ["srcset"],
           },
 
           // PLP:
           {
-            find: '.product-grid .product img',
+            find: ".product-grid .product img",
             limit: 9, // only compare the first 9 products
-            compare: ['src'],
+            compare: ["src"],
           },
           // ...
 
@@ -95,7 +60,6 @@
         ],
       },
 {{#if isShopify}}
-
       // Shopify specific:
       {
         selector: "#shopify-section-announcement-bar",
@@ -135,11 +99,11 @@
 
       // Workaround for Cloudflare's Rocket Loader (e.g. needed for Shopify)
       {
-        selector: 'script[data-cf-settings]',
+        selector: "script[data-cf-settings]",
         mergeFunction: function (localBlock, remoteBlock) {
-          let cFHash = remoteBlock.getAttribute('data-cf-settings');
-          localBlock.setAttribute('data-cf-settings', cFHash);
-          let deferScripts = document.querySelectorAll('script[src][defer]');
+          let cFHash = remoteBlock.getAttribute("data-cf-settings");
+          localBlock.setAttribute("data-cf-settings", cFHash);
+          let deferScripts = document.querySelectorAll("script[src][defer]");
                 deferScripts.forEach((deferScript) => {
             let type = deferScript.type;
             type = type.replace(/[a-f0-9]{24}/, cFHash.split('-')[0]);
@@ -150,327 +114,36 @@
 {{/if}}
 
       // default entries
-      {selector: 'link[rel="canonical"]'},
-      {selector: 'meta[name]', idAttribute: 'name'},
-      {selector: 'meta[property]', idAttribute: 'property'},
-      {selector: 'script[type="application/ld+json"]'},
+      { selector: 'link[rel="canonical"]'},
+      { selector: "meta[name]", idAttribute: "name"},
+      { selector: 'meta[property]', idAttribute: "property"},
+      { selector: 'script[type="application/ld+json"]'},
     ],
-  };
-
-  //================================================================================
-  // Utility Functions
-  //================================================================================
-
-{{#if addPreRendering}}
-{{#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",
+    {{#if addPreRendering}}
+    preRenderedRootConfig: [
+      // TODO: adjust/replace this exemplary list
+      {
+      selector: ".prerendered-top-level-element",
       detectChanges: [
         {
-          find: "tef-carousel",
+          // 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: ".slide tef-stage-teaser",
-              detectChanges: [
-                {
-                  find: '[slot="visual"] source',
-                  compare: ["srcset"],
-                },
-                {
-                  find: '[slot="overline"]',
-                  compare: ["text"],
-                },
-              ],
+              find: "img[src]",
+              compare: ["src"],
             },
           ],
         },
-      ],
-    },
-  ];
-
-  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));
-  }
-
-  /**
-   * retry searching for a given selector in the actual app root
-   * @param root
-   * @param selector
-   * @param retryInterval
-   * @param maxAttempts
-   * @returns {Promise<*>}
-   */
-  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;
-      }
-      await sleep(retryInterval);
-    }
-  }
-{{/if}}
-  /**
-   * dispatch prerender ready event after shadow app root was removed
-   */
-  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() {
-    window?.performance?.mark("sk-prerender-change-detection-start");
-
-    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 (!localRootElement || !remoteRootElement) {
-        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");
-  }
-
-  function detectChangesInBlock(
-    parentLocalElement,
-    parentRemoteElement,
-    config,
-  ) {
-    const localRootElement = parentLocalElement.querySelector(config.find);
-    const remoteRootElement = parentRemoteElement.querySelector(config.find);
-
-    if (!localRootElement) {
-      return;
-    }
-
-    if (!remoteRootElement) {
-      sendRevalidation(config.find, "remote block not found");
-    }
-
-    // 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;
-    }
-
-    for (const compare of config.compare) {
-      if (
-        compare === "text" &&
-        localRootElement.innerHTML !== remoteRootElement.innerHTML
-      ) {
-        sendRevalidation(config.find, "content diffs");
-        continue;
-      }
-
-      if (
-        localRootElement.hasAttribute(compare) &&
-        remoteRootElement.hasAttribute(compare) &&
-        localRootElement.getAttribute(compare) !==
-        remoteRootElement.getAttribute(compare)
-      ) {
-        sendRevalidation(config.find, `${compare} diffs`);
-      }
-    }
-  }
-
-  /**
-   * @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: { [selector]: [reason] },
-    };
-
-    let beaconUrl =
-      "https://" +
-      window.dynamicBlockConfig.appName +
-      ".app.baqend.com/v1/rum/pi";
-    let data = {
-      piId: navigateId,
-      userId: userId,
-      sessionId: sessionId,
-      changeDetection: detectedChanges,
-      debug: true,
-    };
-
-    if (navigator.sendBeacon) {
-      navigator.sendBeacon(beaconUrl, JSON.stringify(data));
-      return;
-    }
-
-    let xhr = new XMLHttpRequest();
-    xhr.open("POST", beaconUrl, true);
-    xhr.send(JSON.stringify(data));
-  }
-{{/if}}
+        ],
+      },
+        ],
+    {{/if}}
+  };
 })();

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

@@ -26,7 +26,10 @@ import { PredictivePreloading } from 'predictive-preloading/predictivePreloading
     new HistoryApiPlugin(), // Soft Navigation Tracking using History API
 {{/if}}
 {{#if useGATracking}}
-    new GAEcommerceTrackingPlugin({ defaultCurrency: "EUR" }),
+    new GAEcommerceTrackingPlugin({
+      // TODO: verify default currency
+      defaultCurrency: "EUR"
+    }),
 {{/if}}
 
 {{#if addPreRendering}}
@@ -221,6 +224,7 @@ import { PredictivePreloading } from 'predictive-preloading/predictivePreloading
     //     for (var i = 0; i < ecommerce.add.products.length; i++) {
     //       aTCProductsArray.push({
     //         id: ecommerce.add.products[i].id ? ecommerce.add.products[i].id : location.href,
+    //         // TODO: verify default currency
     //         currencyCode: currencyCode ? currencyCode : 'EUR',
     //         price: Number(ecommerce.add.products[i].price),
     //         quantity: ecommerce.add.products[i].quantity ? ecommerce.add.products[i].quantity : 1,
@@ -251,6 +255,7 @@ import { PredictivePreloading } from 'predictive-preloading/predictivePreloading
     //     var orderId = purchase.actionField.id;
     //     var orderValue = String(purchase.actionField.revenue).replace(',', '.');
     //     return {
+    //       // TODO: verify currency
     //       id: String(orderId), currencyCode: 'EUR', revenue: Number(orderValue),
     //     };
     //   },

package/dist/services/onboarding/browser/extension/extension-validator.d.ts

@@ -6,6 +6,5 @@ export declare class ExtensionValidator {
     private cli;
     constructor(cliConfig: UserCliConfig, cliBasePath: string, cli: CliServiceInterface);
     getValidBrowserExtensionPaths(): Promise<string[]>;
-    private loadEmbeddedDevtoolsExtension;
     private getManifestConfig;
 }

package/dist/services/onboarding/browser/extension/extension-validator.js

@@ -8,7 +8,6 @@ const cli_1 = require("../../../cli");
 const safe_1 = require("../../../../helpers/safe");
 const node_fs_1 = require("node:fs");
 const browser_extension_error_1 = require("../../error/browser-extension-error");
-const SPEED_KIT_EXTENSION_NAME = "Speed Kit DevTools Extension";
 class ExtensionValidator {
     cliConfig;
     cliBasePath;
@@ -21,7 +20,6 @@ class ExtensionValidator {
     async getValidBrowserExtensionPaths() {
         const validExtensions = [];
         const validPaths = [];
-        let addIncludedExtension = true;
         this.cli.startAction("resolve browserExtensions");
         const browserExtensions = this.cliConfig.chromeExtensionPaths
             .split(",")
@@ -34,9 +32,6 @@ class ExtensionValidator {
             if (!manifestConfig) {
                 continue;
             }
-            if (manifestConfig.name.includes(SPEED_KIT_EXTENSION_NAME)) {
-                addIncludedExtension = false;
-            }
             validExtensions.push({
                 path: cleanedExtensionPath,
                 name: manifestConfig.name,
@@ -44,29 +39,12 @@ class ExtensionValidator {
             });
             validPaths.push(cleanedExtensionPath);
         }
-        if (addIncludedExtension) {
-            await this.loadEmbeddedDevtoolsExtension(validExtensions, validPaths);
-        }
         this.cli.endAction(cli_1.CliActionStatus.COMPLETED);
         if (validExtensions.length > 0) {
             this.cli.table(validExtensions, { name: {}, version: {}, path: {} });
         }
         return validPaths;
     }
-    async loadEmbeddedDevtoolsExtension(validExtensions, validPaths) {
-        const defaultDevelopmentToolsExtensionPath = node_path_1.default.resolve(this.cliBasePath, "dist", "devtools");
-        const manifestConfigResult = await (0, safe_1.safe)(this.getManifestConfig(defaultDevelopmentToolsExtensionPath));
-        if (manifestConfigResult.success !== true) {
-            this.cli.writeError("could not find manifestFile for embedded extension");
-            return;
-        }
-        validExtensions.push({
-            path: defaultDevelopmentToolsExtensionPath,
-            name: manifestConfigResult.data.name + "[embedded]",
-            version: manifestConfigResult.data.version,
-        });
-        validPaths.push(defaultDevelopmentToolsExtensionPath);
-    }
     async getManifestConfig(cleanedExtensionPath) {
         const manifestPath = node_path_1.default.resolve(cleanedExtensionPath, "manifest.json");
         if (!(0, node_fs_1.existsSync)(manifestPath)) {

package/dist/services/onboarding/fetch-events/customer-domain-document-response.js

@@ -113,9 +113,19 @@ class CustomerDomainDocumentResponse {
     }
     rewriteInstallResource(text) {
         text = text.replace(onboarding_model_1.SpeedKitInstallRegex, "");
-        return text.replace(/<\s*head\b[^>]*>/, (head) => {
-            return `${head}\n<script src="${this.customerConfig.installPath}" ${this.customerConfig.installParams}></script>`;
-        });
+        const matchOpeningHead = /<\s*head\b[^>]*>/;
+        const matchClosingHead = /<\/\s*head\s*>/;
+        if (matchOpeningHead.test(text)) {
+            return text.replace(matchOpeningHead, (head) => {
+                return `${head}\n<script src="${this.customerConfig.installPath}" ${this.customerConfig.installParams}></script>`;
+            });
+        }
+        if (matchClosingHead.test(text)) {
+            return text.replace(matchClosingHead, (head) => {
+                return `<script src="${this.customerConfig.installPath}" ${this.customerConfig.installParams}></script>${head}\n`;
+            });
+        }
+        return text;
     }
     rewriteHtmlToLocalConfig(html) {
         const DF_CONFIG_PATTERN = /(<script[^>]* id="speed-kit-df-config"[^>]*>)([\S\s]*?)(<\/script>)/g;

package/dist/services/onboarding/file-events/file-watcher.d.ts

@@ -15,14 +15,89 @@ export declare class FileWatcher {
     private browserContext;
     private cache;
     constructor(cli: CliService, customerConfig: CustomerConfig, files: FileListInterface, documentHandler: DocumentHandlerServer, browserContext: BrowserContext, cache: Cache);
+    /**
+     * will perform various actions based on the changed file
+     *
+     * @param page
+     * @param serviceWorkerReinstallCallback
+     */
     addCallbackOnFileChange(page: Page, serviceWorkerReinstallCallback: (file: ConfigFileInterface) => Promise<void>): void;
+    /**
+     * changes on these files will trigger
+     * - a rebuild of the serviceWorker
+     * - a rebuild of the installResource
+     * - currentService worker will be unregistered
+     * - onNextNavigate the new serviceWorker will be installed
+     *
+     * @param page
+     * @param installResource
+     * @param serviceWorkerReinstallCallback
+     * @private
+     */
     private handleServiceWorkerDependencies;
+    /**
+     * changes on these files will trigger
+     * - rebuild of the local documentHandler
+     * - clearCache in browser
+     * - clearCache in local documentHandler
+     *
+     * @param page
+     * @param installResource
+     * @private
+     */
     private handleGenericConfigFiles;
+    /**
+     * changes on these file will trigger:
+     * - rebuild of documentHandler
+     * - cacheClear of local documentHandler
+     * - cacheClear in browser
+     * - live exchange of the styles in the currently opened page
+     *
+     * @param page
+     * @private
+     */
     private handleDynamicStyles;
+    /**
+     * fileWatcherCallback that will reinstall the serviceWorker
+     *
+     * @param file
+     * @param page
+     * @param installResource
+     * @param serviceWorkerReinstallCallback
+     * @private
+     */
     private onChangeServiceWorkerCallback;
-    private updateStyles;
+    /**
+     * fileWatcherCallback that will rebuild the local documentHandler
+     *
+     * @param page
+     * @param installResource
+     * @param file
+     * @private
+     */
     private onChangeConfigFileCallback;
+    /**
+     * fileWatcherCallback that will reinstall the serviceWorker
+     *
+     * @param file
+     * @param page
+     * @private
+     */
     private onChangeDynamicStyleCallback;
-    private clearPageFunction;
-    private clearServiceWorker;
+    /**
+     * clear speed-kit-caches in browser without interrupting the current workflow on error
+     *
+     * @param page
+     * @private
+     */
+    private safeClearPageBrowsersCacheStorage;
+    /**
+     * clear speed-kit-caches in browser
+     *
+     * @param page
+     * @private
+     */
+    private clearPageBrowsersCacheStorage;
+    private unregisterServiceWorker;
+    private updateStylesInlineFunction;
 }

package/dist/services/onboarding/file-events/file-watcher.js

@@ -4,6 +4,7 @@ exports.FileWatcher = void 0;
 const safe_1 = require("../../../helpers/safe");
 const integration_api_1 = require("../../integration-api");
 const files_1 = require("../../../models/files");
+const race_1 = require("../../../helpers/race");
 /**
  * Add different callbacks that will be executed if a local file is changed.
  */
@@ -22,12 +23,30 @@ class FileWatcher {
         this.browserContext = browserContext;
         this.cache = cache;
     }
+    /**
+     * will perform various actions based on the changed file
+     *
+     * @param page
+     * @param serviceWorkerReinstallCallback
+     */
     addCallbackOnFileChange(page, serviceWorkerReinstallCallback) {
         const installResource = this.files.getByName(files_1.INTEGRATION_FILES.BUILD.INSTALL);
         this.handleServiceWorkerDependencies(page, installResource, serviceWorkerReinstallCallback);
         this.handleGenericConfigFiles(page, installResource);
         this.handleDynamicStyles(page);
     }
+    /**
+     * changes on these files will trigger
+     * - a rebuild of the serviceWorker
+     * - a rebuild of the installResource
+     * - currentService worker will be unregistered
+     * - onNextNavigate the new serviceWorker will be installed
+     *
+     * @param page
+     * @param installResource
+     * @param serviceWorkerReinstallCallback
+     * @private
+     */
     handleServiceWorkerDependencies(page, installResource, serviceWorkerReinstallCallback) {
         // add watcher to serviceWorker related files
         const serviceWorkerDependencies = [
@@ -52,6 +71,16 @@ class FileWatcher {
             });
         }
     }
+    /**
+     * changes on these files will trigger
+     * - rebuild of the local documentHandler
+     * - clearCache in browser
+     * - clearCache in local documentHandler
+     *
+     * @param page
+     * @param installResource
+     * @private
+     */
     handleGenericConfigFiles(page, installResource) {
         // add watcher to configFiles
         const generalConfigFiles = [
@@ -76,6 +105,16 @@ class FileWatcher {
             });
         }
     }
+    /**
+     * changes on these file will trigger:
+     * - rebuild of documentHandler
+     * - cacheClear of local documentHandler
+     * - cacheClear in browser
+     * - live exchange of the styles in the currently opened page
+     *
+     * @param page
+     * @private
+     */
     handleDynamicStyles(page) {
         if (!this.files.hasFile(files_1.INTEGRATION_FILES.CONFIG.DYNAMIC_STYLES)) {
             return;
@@ -90,58 +129,94 @@ class FileWatcher {
             }
         });
     }
+    /**
+     * fileWatcherCallback that will reinstall the serviceWorker
+     *
+     * @param file
+     * @param page
+     * @param installResource
+     * @param serviceWorkerReinstallCallback
+     * @private
+     */
     async onChangeServiceWorkerCallback(file, page, installResource, serviceWorkerReinstallCallback) {
         this.cli.writeWarning(`changed file: ${file.name} (reinstall serviceWorker)`);
         // clear speed-kit-service-worker-caches and uninstall serviceWorker
-        await this.clearPageFunction(page);
-        await this.clearServiceWorker(page);
+        await this.safeClearPageBrowsersCacheStorage(page);
+        await this.unregisterServiceWorker(page);
         // rebuild installResource
         await installResource.buildContent();
         // tell puppeteer to reinstall serviceworker on next navigate
         await serviceWorkerReinstallCallback(file);
     }
-    updateStyles(styles) {
-        const styleElement = document.querySelector("#speed-kit-df-styles");
-        if (styleElement) {
-            styleElement.textContent = decodeURI(styles);
-        }
-    }
+    /**
+     * fileWatcherCallback that will rebuild the local documentHandler
+     *
+     * @param page
+     * @param installResource
+     * @param file
+     * @private
+     */
     async onChangeConfigFileCallback(page, installResource, file) {
-        await this.clearPageFunction(page);
+        this.cli.writeWarning(`changed file: ${file.name}`);
+        await this.safeClearPageBrowsersCacheStorage(page);
         await this.documentHandler.buildDocumentHandler();
         this.cache.clear();
         await installResource.buildContent();
-        this.cli.writeWarning(`changed file: ${file.name}`);
     }
+    /**
+     * fileWatcherCallback that will reinstall the serviceWorker
+     *
+     * @param file
+     * @param page
+     * @private
+     */
     async onChangeDynamicStyleCallback(file, page) {
-        this.cli.writeWarning(`changed file: ${file.name} (update styles on page)`);
+        this.cli.writeWarning(`changed file: ${file.name}`);
+        await this.documentHandler.buildDocumentHandler();
+        this.cache.clear();
         const escapedStyles = encodeURI(file.getContent());
-        const evaluateResult = await (0, safe_1.safe)(page.evaluate(`(function ${this.updateStyles.toString()})("${escapedStyles}");`));
-        if (evaluateResult.success === false) {
+        const evaluateResult = await (0, safe_1.safe)((0, race_1.race)(Promise.all([
+            page.evaluate(this.updateStylesInlineFunction, escapedStyles),
+            this.safeClearPageBrowsersCacheStorage(page),
+        ]), 200));
+        if (evaluateResult.success === false &&
+            !evaluateResult.error.includes("timeout")) {
             this.cli.writeError(evaluateResult.error);
-            console.log(evaluateResult.errorObj);
+            console.error(evaluateResult.errorObj);
         }
-        const clearPageResult = await (0, safe_1.safe)(this.clearPageFunction(page));
-        if (clearPageResult.success === false) {
-            this.cli.writeError(clearPageResult.error);
+    }
+    /**
+     * clear speed-kit-caches in browser without interrupting the current workflow on error
+     *
+     * @param page
+     * @private
+     */
+    async safeClearPageBrowsersCacheStorage(page) {
+        const result = await (0, safe_1.safe)(this.clearPageBrowsersCacheStorage(page));
+        if (result.success === false) {
+            this.cli.writeError(result.error);
         }
-        await this.documentHandler.buildDocumentHandler();
-        this.cache.clear();
     }
-    async clearPageFunction(page) {
+    /**
+     * clear speed-kit-caches in browser
+     *
+     * @param page
+     * @private
+     */
+    async clearPageBrowsersCacheStorage(page) {
         const client = await page.target().createCDPSession();
         const cacheResponse = await client.send("CacheStorage.requestCacheNames", {
             securityOrigin: this.browserContext.domain,
         });
         for (const cache of cacheResponse.caches) {
             if (cache.cacheName.includes("baqend")) {
-                await client.send("CacheStorage.deleteCache", {
+                await (0, safe_1.safe)((0, race_1.race)(client.send("CacheStorage.deleteCache", {
                     cacheId: cache.cacheId,
-                });
+                }), 20));
             }
         }
     }
-    async clearServiceWorker(page) {
+    async unregisterServiceWorker(page) {
         const client = await page.target().createCDPSession();
         const currentOrigin = new URL(page.url()).origin;
         await client.send("ServiceWorker.enable");
@@ -149,5 +224,18 @@ class FileWatcher {
             scopeURL: currentOrigin,
         });
     }
+    updateStylesInlineFunction(styles) {
+        try {
+            const styleElement = document.querySelector("#speed-kit-df-styles");
+            if (styleElement) {
+                styleElement.textContent = decodeURI(styles);
+                styleElement.setAttribute("last-onboarding-live-update", new Date().toLocaleTimeString());
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return true;
+    }
 }
 exports.FileWatcher = FileWatcher;

package/dist/services/onboarding/request-cache/cache.js

@@ -33,7 +33,7 @@ class Cache {
         }
     }
     clear() {
-        this.cli.writeWarning("clear request-caches");
+        this.cli.writeSuccess("clear cached requests from local documentHandler");
         this.inMemoryCache.clear();
     }
 }

package/oclif.manifest.json

@@ -712,5 +712,5 @@
       ]
     }
   },
-  "version": "2.66.0-alpha.1"
+  "version": "2.67.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@speedkit/cli",
   "description": "Speed Kit CLI",
-  "version": "2.66.0-alpha.1",
+  "version": "2.67.0",
   "author": {
     "name": "Baqend.com",
     "email": "info@baqend.com"
@@ -66,27 +66,27 @@
   "type": "commonjs",
   "dependencies": {
     "@aws-sdk/client-athena": "^3.529",
-    "@inquirer/prompts": "^3.0",
+    "@inquirer/prompts": "^3.3.2",
     "@oclif/core": "^3.23",
     "@oclif/plugin-autocomplete": "^3.0",
-    "@oclif/plugin-help": "^6.0",
-    "@oclif/plugin-not-found": "^3.0",
-    "@oclif/plugin-warn-if-update-available": "^3.0",
+    "@oclif/plugin-help": "^6.2.16",
+    "@oclif/plugin-not-found": "^3.2.25",
+    "@oclif/plugin-warn-if-update-available": "^3.1.21",
     "axios": "^1.6",
     "baqend": "^3.4",
-    "chalk": "^4",
+    "chalk": "^4.1.2",
     "clipboardy-cjs": "^3.0.0",
     "css-select": "5.1.0",
-    "deepmerge": "^4.2.2",
+    "deepmerge": "^4.3.1",
     "diff": "^5.1.0",
     "dom-serializer": "2.0.0",
     "domhandler": "5.0.3",
     "domutils": "^3.1",
-    "dotenv": "^16.4",
+    "dotenv": "^16.4.5",
     "extract-zip": "^2.0.1",
     "fs-extra": "^11.2.0",
     "handlebars": "^4.7.8",
-    "htmlparser2": "8.0",
+    "htmlparser2": "8.0.2",
     "json2csv": "^6.0.0-alpha.2",
     "node-fetch": "^2.7.0",
     "parse5": "7.1",
@@ -101,8 +101,8 @@
     "ts-node": "^10.9.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.7.1",
-    "@commitlint/config-conventional": "^17.7.0",
+    "@commitlint/cli": "^17.8.1",
+    "@commitlint/config-conventional": "^17.8.1",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@oclif/prettier-config": "^0.2.1",
     "@oclif/test": "^3",
@@ -115,18 +115,18 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "chai": "^4.4.1",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.57",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1",
     "eslint-plugin-prettier": "^5.1",
     "eslint-plugin-unicorn": "^51.0.1",
-    "globby": "^11",
+    "globby": "^11.1.0",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "memfs": "^4.8.0",
     "mocha": "^10.1.0",
     "mocha-junit-reporter": "^2.2.1",
     "mock-fs": "^5.2.0",
-    "nock": "^13.5",
+    "nock": "^13.5.5",
     "nyc": "^15.1.0",
     "oclif": "^4.8.8",
     "shx": "^0.3.4",