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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.300-alpha.0",
+    "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

@@ -14,7 +14,7 @@ const TABLE_SIZE_MATCH = "769px";
 
 export default class AmfTopic extends LightningElement {
     private _model: TopicModel | undefined;
-    private amf: Json;
+    private amf: Json | undefined;
     private type: string | undefined;
 
     @api
@@ -23,24 +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 && 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 && clone(value.type);
-        }
+                ? clone(value.type)
+                : Promise.resolve(this.type);
 
-        this._model = value;
-        if (this._model) {
-            this.update();
-        }
-        // else { Remove child? No model, seems like no component should be shown. }
+        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 {
@@ -98,10 +102,12 @@ 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);
+            }
         }
     }
 }
@@ -110,8 +116,48 @@ export default class AmfTopic extends LightningElement {
  * 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.)
+ * @returns A Promise that resolves with a copy of Value, serialized and parsed via JSON.
  */
-function clone(value: any): any {
-    return JSON.parse(JSON.stringify(value));
+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/contentCallout/contentCallout.html

@@ -12,7 +12,7 @@
 
         <div class="dx-callout-content">
             <p class="doc-status-title dx-callout-title dx-text-body-3">
-                {header}
+                {title}
             </p>
             <span class="dx-callout-body dx-text-body-3">
                 <slot onslotchange={onSlotChange}></slot>

package/src/modules/doc/contentCallout/contentCallout.ts

@@ -3,7 +3,7 @@ import cx from "classnames";
 import { CalloutVariant, LightningSlotElement } from "typings/custom";
 
 export default class ContentCallout extends LightningElement {
-    @api header!: string;
+    @api title!: string;
     @api variant!: CalloutVariant;
     cardVariant?: string;
     iconName?: string;

package/src/modules/doc/contentLayout/contentLayout.html

@@ -50,7 +50,7 @@
                 </div>
                 <div lwc:if={showToc} class="right-nav-bar is-sticky">
                     <dx-toc
-                        header={tocTitle}
+                        title={tocTitle}
                         options={tocOptions}
                         value={tocValue}
                     ></dx-toc>

package/src/modules/doc/heading/heading.html

@@ -1,14 +1,14 @@
 <template>
     <h1 class={className} if:true={isAriaLevelOne}>
-        <doc-heading-content header={header} hash={hash}></doc-heading-content>
+        <doc-heading-content title={title} hash={hash}></doc-heading-content>
     </h1>
     <h2 class={className} if:true={isAriaLevelTwo}>
-        <doc-heading-content header={header} hash={hash}></doc-heading-content>
+        <doc-heading-content title={title} hash={hash}></doc-heading-content>
     </h2>
     <h3 class={className} if:true={isAriaLevelThree}>
-        <doc-heading-content header={header} hash={hash}></doc-heading-content>
+        <doc-heading-content title={title} hash={hash}></doc-heading-content>
     </h3>
     <h4 class={className} if:true={isAriaLevelFour}>
-        <doc-heading-content header={header} hash={hash}></doc-heading-content>
+        <doc-heading-content title={title} hash={hash}></doc-heading-content>
     </h4>
 </template>

package/src/modules/doc/heading/heading.ts

@@ -13,7 +13,7 @@ export const displayLevels = Object.values(ariaDisplayLevels);
 
 // @ts-ignore: Really Dark Magic (TM) to do with ariaLevel needing explicit getter/setters
 export default class Heading extends LightningElement {
-    @api header: string = "";
+    @api title: string = "";
     @api hash: string | null = null;
 
     @api

package/src/modules/doc/headingAnchor/headingAnchor.ts

@@ -6,7 +6,7 @@ export default class HeadingAnchor extends LightningElement {
     @api iconSize?: IconSize = "override";
     @api iconSprite?: IconSprite = "utility";
     @api iconSymbol?: IconSymbol;
-    @api header: string = "";
+    @api title: string = "";
     @api urlText: string = "";
 
     label: string = "Copy link to clipboard";
@@ -22,7 +22,7 @@ export default class HeadingAnchor extends LightningElement {
         }, 2000);
 
         try {
-            if (this.header && this.urlText) {
+            if (this.title && this.urlText) {
                 const [hostUrl] = window.location.href.split("#");
                 const url = `${hostUrl}#${this.urlText}`;
                 await navigator.clipboard.writeText(url);

package/src/modules/doc/headingContent/headingContent.html

@@ -1,7 +1,7 @@
 <template>
-    <template if:false={hash}>{header}</template>
+    <template if:false={hash}>{title}</template>
     <template if:true={hash}>
-        <span class="title">{header}&nbsp;</span>
+        <span class="title">{title}&nbsp;</span>
         <dx-tooltip placement="top" label={label}>
             <span class="button-container">
                 <button onclick={copy} aria-label="copy">

package/src/modules/doc/headingContent/headingContent.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 
 export default class HeadingContent extends LightningElement {
-    @api header: string = "";
+    @api title: string = "";
     @api hash: string | null = null;
 
     label: string = "Copy link to clipboard";
@@ -18,7 +18,7 @@ export default class HeadingContent extends LightningElement {
         }, 2000);
 
         try {
-            if (this.header && this.hash) {
+            if (this.title && this.hash) {
                 const [hostUrl] = window.location.href.split("#");
                 const url = `${hostUrl}#${this.hash}`;
                 await navigator.clipboard.writeText(url);

package/src/modules/doc/overview/overview.html

@@ -10,7 +10,7 @@
                 <div class="content">
                     <dx-group-text
                         class="description"
-                        header={header}
+                        title={title}
                         body={description}
                         size="large"
                         title-aria-level="1"
@@ -20,7 +20,7 @@
                 </div>
                 <div>
                     <dx-group-text
-                        header={featuresListTitle}
+                        title={featuresListTitle}
                         size="medium"
                         class="features"
                     ></dx-group-text>

package/src/modules/doc/overview/overview.ts

@@ -3,7 +3,7 @@ import { DocPhaseInfo, FeatureItem, Link } from "typings/custom";
 
 export default class Overview extends LightningElement {
     @api docPhaseInfo!: DocPhaseInfo;
-    @api header!: string;
+    @api title!: string;
     @api description!: string;
     @api primaryLink!: Link;
     @api secondaryLink!: Link;