@salesforcedevs/docs-components 1.3.304-async-fix-alpha1 → 1.3.319-alpha.0

package/package.json

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

package/src/modules/doc/amfReference/amfReference.ts

@@ -1475,10 +1475,18 @@ export default class AmfReference extends LightningElement {
         // update topic view
         const { referenceId, amfId, type } = this.selectedTopic!;
 
+        // Adding stringify inside try/catch
+        let amfModelString = "";
+        try {
+            amfModelString = JSON.stringify(this.amfMap[referenceId].model);
+        } catch (error) {
+            console.error(`Error stringifying amf model: ${error}`);
+        }
+
         // This updates the component in the content section.
         this.topicModel = {
             type,
-            amf: this.amfMap[referenceId].model,
+            amf: amfModelString,
             parser: this.amfMap[referenceId].parser,
             id: amfId
         };

package/src/modules/doc/amfReference/types.ts

@@ -95,7 +95,7 @@ export interface ParsedTopicModel {
 export interface TopicModel {
     id: string;
     type: string;
-    amf: AmfModel;
+    amf: string;
     parser: AmfParser;
 }
 

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

@@ -9,7 +9,6 @@ import {
 } from "./utils";
 import type { TopicModel } from "./types";
 import { Json } from "typings/custom";
-import { parse, stringify } from "yieldable-json";
 
 const TABLE_SIZE_MATCH = "769px";
 
@@ -28,13 +27,17 @@ export default class AmfTopic extends LightningElement {
             !this.amf ||
             (value && this._model && value.amf !== this._model?.amf)
         ) {
-            this.amf = value && clone(value.amf);
+            try {
+                this.amf = value && JSON.parse(value.amf);
+            } catch (error) {
+                console.error(`Error parsing amf model: ${error}`);
+            }
         }
         if (
             !this.type ||
             (value && this._model && value.type !== this._model?.type)
         ) {
-            this.type = value && clone(value.type);
+            this.type = value && value.type;
         }
 
         this._model = value;
@@ -106,14 +109,3 @@ 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.)
- */
-async function clone(value: any): any {
-    const parsedValue = await parse(stringify(value));
-    return parsedValue;
-}

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

@@ -51,6 +51,6 @@ export type AmfModel = Json;
 export interface TopicModel {
     id: string;
     type: string;
-    amf: AmfModel;
+    amf: string;
     parser: AmfModelParser;
 }

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">
-                {title}
+                {header}
             </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 title!: string;
+    @api header!: 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
-                        title={tocTitle}
+                        header={tocTitle}
                         options={tocOptions}
                         value={tocValue}
                     ></dx-toc>

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -343,8 +343,10 @@ export default class ContentLayout extends LightningElement {
                 );
 
             for (const headingElement of headingElements as any) {
-                // Sometimes elements hash is not being set when slot content is wrapped with div
+                // Sometimes elements hash and header is not being set when slot content is wrapped with div
                 headingElement.hash = headingElement.attributes.hash?.nodeValue;
+                headingElement.header =
+                    headingElement.attributes.header?.nodeValue;
             }
 
             const tocOptions = [];
@@ -361,7 +363,7 @@ export default class ContentLayout extends LightningElement {
                     const tocItem = {
                         anchor: `#${headingElement.hash}`,
                         id: headingElement.id,
-                        label: headingElement.title
+                        label: headingElement.header
                     };
                     tocOptions.push(tocItem);
                     this.tocOptionIdsSet.add(headingElement.id);

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

@@ -1,14 +1,14 @@
 <template>
     <h1 class={className} if:true={isAriaLevelOne}>
-        <doc-heading-content title={title} hash={hash}></doc-heading-content>
+        <doc-heading-content header={header} hash={hash}></doc-heading-content>
     </h1>
     <h2 class={className} if:true={isAriaLevelTwo}>
-        <doc-heading-content title={title} hash={hash}></doc-heading-content>
+        <doc-heading-content header={header} hash={hash}></doc-heading-content>
     </h2>
     <h3 class={className} if:true={isAriaLevelThree}>
-        <doc-heading-content title={title} hash={hash}></doc-heading-content>
+        <doc-heading-content header={header} hash={hash}></doc-heading-content>
     </h3>
     <h4 class={className} if:true={isAriaLevelFour}>
-        <doc-heading-content title={title} hash={hash}></doc-heading-content>
+        <doc-heading-content header={header} 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 title: string = "";
+    @api header: 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 title: string = "";
+    @api header: string = "";
     @api urlText: string = "";
 
     label: string = "Copy link to clipboard";
@@ -22,7 +22,7 @@ export default class HeadingAnchor extends LightningElement {
         }, 2000);
 
         try {
-            if (this.title && this.urlText) {
+            if (this.header && 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}>{title}</template>
+    <template if:false={hash}>{header}</template>
     <template if:true={hash}>
-        <span class="title">{title}&nbsp;</span>
+        <span class="title">{header}&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 title: string = "";
+    @api header: 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.title && this.hash) {
+            if (this.header && 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"
-                        title={title}
+                        header={header}
                         body={description}
                         size="large"
                         title-aria-level="1"
@@ -20,7 +20,7 @@
                 </div>
                 <div>
                     <dx-group-text
-                        title={featuresListTitle}
+                        header={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 title!: string;
+    @api header!: string;
     @api description!: string;
     @api primaryLink!: Link;
     @api secondaryLink!: Link;

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

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