@speedkit/cli 2.65.2 → 2.65.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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)
 
 

package/README.md

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

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.65.2"
+  "version": "2.65.3"
 }

package/package.json

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