@salesforcedevs/docs-components 1.3.300-amf-fix-alpha → 1.3.300-async-fix-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.300-amf-fix-alpha",
+    "version": "1.3.300-async-fix-alpha2",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -17,7 +17,8 @@
         "lodash.orderby": "^4.6.0",
         "lodash.uniqby": "^4.7.0",
         "query-string": "^7.1.3",
-        "sentence-case": "^3.0.4"
+        "sentence-case": "^3.0.4",
+        "yieldable-json": "^2.0.1"
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10",

package/src/modules/doc/amfTopic/amfTopic.ts

@@ -9,12 +9,13 @@ import {
 } from "./utils";
 import type { TopicModel } from "./types";
 import { Json } from "typings/custom";
+
 const TABLE_SIZE_MATCH = "769px";
 
 export default class AmfTopic extends LightningElement {
     private _model: TopicModel | undefined;
-    private amf: Json;
-    private type: any;
+    private amf: Json | undefined;
+    private type: string | undefined;
 
     @api
     get model(): TopicModel | undefined {
@@ -22,70 +23,28 @@ export default class AmfTopic extends LightningElement {
     }
 
     set model(value: TopicModel) {
-        if (
+        const amfClonePromise =
             !this.amf ||
             (value && this._model && value.amf !== this._model?.amf)
-        ) {
-            this.amf = value && this.clone(value.amf);
-        }
-        if (
+                ? clone(value.amf)
+                : Promise.resolve(this.amf);
+
+        const typeClonePromise =
             !this.type ||
             (value && this._model && value.type !== this._model?.type)
-        ) {
-            this.type = value && this.getTypeCloned(value.type);
-        }
-
-        this._model = value;
-        if (this._model) {
-            this.update();
-        }
-        // else { Remove child? No model, seems like no component should be shown. }
-    }
-
-    cloneWithWorker(value) {
-        return new Promise((resolve, reject) => {
-            const worker = new Worker("./cloneAmfObject.ts");
-
-            worker.onmessage = (event) => {
-                resolve(event.data);
-                worker.terminate();
-            };
-
-            worker.onerror = (error) => {
-                reject(error);
-                worker.terminate();
-            };
-
-            worker.postMessage(value);
-        });
-    }
-
-    /**
-     * The underlying web components we use from api-console mutate their models we pass in.
-     * Since LWC makes them Read Only, we need to copy them before passing to the Web Component.
-     * @param value JSON Serializable object to clone.
-     * @returns A copy of Value. One that has been serialized and parsed via JSON. (Functions, Regex, etc are not preserved.)
-     */
-    // function clone(value: any): any {
-    //     return JSON.parse(JSON.stringify(value));
-    // }
-
-    async clone(value: any) {
-        try {
-            const clonedObject = await this.cloneWithWorker(value);
-            return clonedObject;
-        } catch (error) {
-            console.error("Error cloning value:", error);
-            return null;
-        }
-    }
-
-    async getTypeCloned(value: any) {
-        const typeObj = await this.clone(value.type);
-        if (typeObj) {
-            return typeObj;
-        }
-        return "";
+                ? clone(value.type)
+                : Promise.resolve(this.type);
+
+        Promise.all([amfClonePromise, typeClonePromise])
+            .then(([clonedAmf, clonedType]) => {
+                this.amf = clonedAmf;
+                this.type = clonedType;
+                this._model = value;
+                this.update();
+            })
+            .catch((error) => {
+                console.error("Error cloning model:", error);
+            });
     }
 
     update(): void {
@@ -143,10 +102,62 @@ export default class AmfTopic extends LightningElement {
     }
 
     renderedCallback(): void {
-        try {
-            this.update();
-        } catch (error) {
-            console.error(error);
+        if (this._model) {
+            try {
+                this.update();
+            } catch (error) {
+                console.error(error);
+            }
         }
     }
 }
+
+/**
+ * The underlying web components we use from api-console mutate their models we pass in.
+ * Since LWC makes them Read Only, we need to copy them before passing to the Web Component.
+ * @param value JSON Serializable object to clone.
+ * @returns A Promise that resolves with a copy of Value, serialized and parsed via JSON.
+ */
+function clone(value: any): Promise<any> {
+    return new Promise((resolve, reject) => {
+        if (window.Worker) {
+            const workerCode = `
+            onmessage = function(e) {
+                try {
+                    const jsonObject = JSON.parse(e.data);
+                    postMessage({ success: true, data: jsonObject });
+                } catch (error) {
+                    postMessage({ success: false, error: error.message });
+                }
+            };
+            `;
+
+            const blob = new Blob([workerCode], {
+                type: "application/javascript"
+            });
+            const workerURL = URL.createObjectURL(blob);
+            const worker = new Worker(workerURL);
+
+            try {
+                const jsonObj = JSON.stringify(value);
+                worker.postMessage(jsonObj);
+            } catch (err) {
+                reject(err);
+            }
+
+            worker.onmessage = function (e) {
+                if (e.data.success) {
+                    resolve(e.data.data);
+                } else {
+                    reject(new Error(e.data.error));
+                }
+            };
+
+            worker.onerror = function (e) {
+                reject(new Error(e.message));
+            };
+        } else {
+            reject(new Error("Your browser doesn't support web workers."));
+        }
+    });
+}

package/src/modules/doc/amfTopic/worker.ts

@@ -0,0 +1,3 @@
+onmessage = function (event) {
+    postMessage(JSON.parse(JSON.stringify(event.data)));
+};

package/src/modules/doc/amfTopic/cloneAmfObject.ts

@@ -1,5 +0,0 @@
-onmessage = function (event) {
-    const value = event.data;
-    const clonedValue = JSON.parse(JSON.stringify(value));
-    postMessage(clonedValue);
-};