@salesforcedevs/docs-components - npm Package Compare versions

Comparing version 1.3.345-spage to 1.3.345-spec-ux-alpha

package.json

 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.345-spage",
+    "version": "1.3.345-spec-ux-alpha",
     "description": "Docs Lightning web components for DSC",
@@ -5,0 +5,0 @@ "license": "MIT",

src/modules/doc/contentLayout/contentLayout.ts

@@ -127,4 +127,10 @@ /* eslint-disable @lwc/lwc/no-document-query */
             // 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;
+            if (!headingElement.hash) {
+                headingElement.hash = headingElement.attributes.hash?.nodeValue;
+            }
+
+            if (!headingElement.header) {
+                headingElement.header =
+                    headingElement.attributes.header?.nodeValue;
+            }
         });
@@ -142,4 +148,15 @@ this.updateTocItems(headingElements);
                 if (tabPanelItem.active) {
-                    headingElements =
-                        tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
+                    // This is needed for Specification tab content
+                    const specificationElement = tabPanelItem.querySelector(
+                        "doc-specification-content"
+                    );
+                    if (specificationElement) {
+                        headingElements =
+                            specificationElement.shadowRoot.querySelectorAll(
+                                TOC_HEADER_TAG
+                            );
+                    } else {
+                        headingElements =
+                            tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
+                    }
                     break;
@@ -146,0 +163,0 @@ }

src/modules/doc/specificationContent/specificationContent.ts

@@ -1,41 +0,66 @@
-import { LightningElement, track } from "lwc";
-import { toJson } from "dxUtils/normalizers";
+import { LightningElement, track, api } from "lwc";
 
-export default class specificationContent extends LightningElement {
-    @track data: any; // Reactive property to store fetched data
-    @track error: any; // To track any errors
+export default class SpecificationContent extends LightningElement {
+    @track data: any;
+    // TODO: added these default values for testing, will drop this once the backend is ready.
+    @api component: string = "button";
+    @api model: string = "lwc";
+    @api namespace: string = "lightning";
 
-    // Lifecycle method to fetch data when the component is inserted into the DOM
+    /* TODO: The actual URL is as follows:
+     * http://api.salesforce.com/doc-platform/developer/v1/{type}/{sub-type}/{component-name}
+     * Until the API integration is ready, we will go ahead with mocked-router-url.
+     */
+    @api routerUrl: string =
+        "https://cx-mock-router-internal-07a18d7b3f61.herokuapp.com";
+
+    private attributes = [];
+    private methods = [];
+    private slots = [];
+    private events = [];
+
     connectedCallback() {
-        this.loadData();
+        this.fetchComponentMetadata();
     }
 
-    // Method to make the API call
-    loadData() {
-        fetch("http://localhost:3002/card") // Sample API URL
-            .then((response) => response.json()) // Convert response to JSON
-            .then((result) => {
-                this.data = toJson(result); // Store data to update UI
-                this.error = undefined; // Clear any previous errors
-            })
-            .catch((error) => {
-                this.error = error; // Capture any errors
-                this.data = {}; // Clear data on error
-            });
+    async fetchComponentMetadata() {
+        const url = `${this.routerUrl}/${this.model}/${this.namespace}/${this.component}`;
+
+        try {
+            const response = await fetch(url);
+
+            if (!response.ok) {
+                // TODO: Will add loader and show error as follow-up
+                throw new Error(`Failed to fetch: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            this.data = result;
+            ({
+                attributes: this.attributes,
+                methods: this.methods,
+                slots: this.slots,
+                events: this.events
+            } = this.data);
+        } catch (error) {
+            this.data = {};
+            console.error("fetchComponentMetadata() failed for:" + url);
+        }
     }
 
-    // Helper to check if attributes exist
     get hasAttributes() {
-        return this.data?.attribute;
+        return this.attributes?.length > 0;
     }
 
-    // Helper to check if methods exist
     get hasMethods() {
-        return this.data?.method;
+        return this.methods?.length > 0;
     }
 
-    // Helper to check if slots exist
     get hasSlots() {
-        return this.data?.slots;
+        return this.slots?.length > 0;
     }
+
+    get hasEvents() {
+        return this.events?.length > 0;
+    }
 }

No alert changes

Improved metrics

Total package byte prevSize

268627

increased by1.94%

Number of package files

81

increased by1.25%

Lines of code

6763

increased by0.57%

No dependency changes