@salesforcedevs/docs-components - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

lwc.config.json

@@ -6,3 +6,3 @@ {
     ],
-    "expose": ["doc/container", "doc/contentCallout"]
+    "expose": ["doc/container", "doc/contentCallout", "doc/codeBlock"]
 }

package.json

 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.0.4",
+    "version": "0.0.5",
     "description": "Docs Lightning web components for DSC",
@@ -15,5 +15,5 @@ "license": "MIT",
     "publishConfig": {
-        "access": "restricted"
+        "access": "public"
     },
     "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

src/modules/doc/container/container.ts

@@ -15,3 +15,3 @@ import { LightningElement, api } from "lwc";
     PdfUrl
-} from "../../../../../../../typings/custom-new";
+} from "typings/custom";
 
@@ -18,0 +18,0 @@ const API_MAIN_URL = "https://developer.salesforce.com/docs/get_document/";

src/modules/doc/content/content.ts

@@ -7,3 +7,2 @@ /* eslint-disable @lwc/lwc/no-inner-html */
 } from "../../../../../../../typings/custom-new";
-import Prism from "doc/prismjs";
 
@@ -13,3 +12,3 @@ export default class Content extends LightningElement {
     @api pageReference!: PageReference;
-
+    @api codeBlockType: string = "card";
     @api
@@ -23,7 +22,41 @@ set docsData(value) {
     }
+    _codeBlockTheme: string = "dark";
+    @api
+    set codeBlockTheme(value) {
+        this._codeBlockTheme = value;
+    }
+    get codeBlockTheme() {
+        return this._codeBlockTheme;
+    }
 
     @track docContent: DocContent = "";
     _docRendered: boolean = false;
+    originalCodeBlockThemeValue: String = "";
+    connectedCallback() {
+        this.template.addEventListener(
+            "themechange",
+            this.updateTheme.bind(this) // eslint-disableline no-use-before-define
+        );
+    }
 
-    //TODO: cleanup html manipulation
+    constructor() {
+        super();
+        this.template.addEventListener(
+            "themechange",
+            this.updateTheme.bind(this) // eslint-disableline no-use-before-define
+        );
+    }
+
+    updateTheme() {
+        this._codeBlockTheme =
+            this._codeBlockTheme === "dark" ? "light" : "dark";
+        const codeBlockEls = this.template.querySelectorAll("dx-code-block");
+        codeBlockEls.forEach((codeBlockEl) => {
+            codeBlockEl.setAttribute("theme", this._codeBlockTheme);
+        });
+    }
+
+    // We don't use any tracked field here. The challenge is that
+    // for security reasons you can't pass pure HTML via a class
+    // field to the template. Hence we manipulate the DOM manually.
     insertDocHtml() {
@@ -35,20 +68,36 @@ const divEl = this.template.querySelector("div");
         this.docContent = this.docContent.trim();
+        // eslint-disable-next-line no-use-before-define
         templateEl.innerHTML = this.docContent;
 
-        const preEls = templateEl.content.querySelectorAll("pre");
-
-        preEls.forEach((preEl) => {
-            let codeHTML = preEl.innerHTML;
-            let codeEl = document.createElement("code");
-            codeEl.classList.add("language-js");
-            codeEl.innerHTML = codeHTML;
-            preEl.innerHTML = "";
-            // preEl.classList.add("line-numbers"); // TODO: Re-add once we have line-numbers plugin added
-            preEl.appendChild(codeEl);
+        // Query the code blocks and create a dx-code-block component that contains the code
+        const codeBlockEls = templateEl.content.querySelectorAll(
+            ".codeSection"
+        );
+        codeBlockEls.forEach((codeBlockEl) => {
+            const blockEl = document.createElement("dx-code-block");
+            const classList = codeBlockEl.firstChild.classList;
+            let language = "";
+            for (const key in classList) {
+                if (typeof classList[key] === "string") {
+                    const className = classList[key];
+                    if (className.startsWith("brush:")) {
+                        language = className.split(":")[1];
+                    }
+                }
+            }
+            blockEl.setAttribute("title", "Code Block Title");
+            blockEl.setAttribute("theme", this.codeBlockTheme);
+            blockEl.setAttribute("variant", this.codeBlockType);
+            blockEl.setAttribute("language", language);
+            // eslint-disable-next-line no-use-before-define
+            blockEl.setAttribute("code-block", codeBlockEl.innerHTML);
+            // eslint-disable-next-line no-use-before-define
+            codeBlockEl.innerHTML = "";
+            codeBlockEl.appendChild(blockEl);
         });
 
-        // Modify anchors to work with any domain
+        // Modify links to work with any domain
         const anchorEls = templateEl.content.querySelectorAll("a");
         anchorEls.forEach((anchorEl) => {
-            let href = anchorEl.href.split("/");
+            const href = anchorEl.href.split("/");
             if (
@@ -74,3 +123,2 @@ (href[3] === this.pageReference.docId && this.isStorybook) ||
                 }
-
                 anchorEl.addEventListener(
@@ -88,15 +136,11 @@ "click",
                 }
-                console.log(updatedURL);
                 if (href[4]) {
                     updatedURL = updatedURL + `/${href[4]}`;
                 }
-                console.log(updatedURL);
                 if (href[5]) {
                     updatedURL = updatedURL + `/${href[5]}`;
                 }
-                console.log(updatedURL);
                 if (href[6]) {
                     updatedURL = updatedURL + `/${href[6]}`;
                 }
-                console.log(updatedURL);
                 anchorEl.setAttribute("href", updatedURL);
@@ -110,4 +154,4 @@ anchorEl.setAttribute("data-id", updatedURL);
         imgEls.forEach((imgEl) => {
-            let src = imgEl.src;
-            let updatedURL = src.replace(
+            const src = imgEl.src;
+            const updatedURL = src.replace(
                 this.pageReference.domain,
@@ -119,6 +163,4 @@ "https://developer.salesforce.com"
 
-        // We don't use any tracked field here. The challenge is that
-        // for security reasons you can't pass pure HTML via a class
-        // field to the template. Hence we manipulate the DOM manually.
         if (divEl) {
+            // eslint-disable-next-line no-use-before-define
             divEl.innerHTML = "";
@@ -128,5 +170,3 @@ divEl.append(templateEl.content);
 
-        // eslint-disable-next-line no-use-before-define
-        Prism.highlightAllUnder(divEl);
-
+        // Once the html has been corectly modified, naviage to the page reference on the page
         if (this.pageReference.hash) {
@@ -140,12 +180,8 @@ this.navigateToHash(this.pageReference.hash);
         // eslint-disable-next-line no-use-before-define
-        let target = event.currentTarget.dataset.id;
-        let page,
-            docId,
-            deliverable,
-            tempContentDocumentId,
-            contentDocumentId,
-            hash;
-        [page, docId, deliverable, tempContentDocumentId] = target.split("/");
-        [contentDocumentId, hash] = tempContentDocumentId.split("#");
-        let newPageReference = {
+        const target = event.currentTarget.dataset.id;
+        const [page, docId, deliverable, tempContentDocumentId] = target.split(
+            "/"
+        );
+        const [contentDocumentId, hash] = tempContentDocumentId.split("#");
+        const newPageReference = {
             page: page,
@@ -170,3 +206,3 @@ docId: docId,
     public navigateToHash(hash: String) {
-        let splitHash = hash.split("#");
+        const splitHash = hash.split("#");
         if (splitHash.length === 2) {
@@ -187,3 +223,2 @@ hash = splitHash[1];
         }
-
         this.insertDocHtml();
@@ -190,0 +225,0 @@ this._docRendered = true;

src/modules/doc/contentCallout/contentCallout.ts

 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { CalloutVariant, LightningSlotElement } from "typings/custom-new";
+import { CalloutVariant, LightningSlotElement } from "typings/custom";
 
@@ -5,0 +5,0 @@ export default class ContentCallout extends LightningElement {

src/modules/doc/nav/nav.ts

@@ -11,3 +11,3 @@ import { LightningElement, api } from "lwc";
     SelectedVersion
-} from "../../../../../../../typings/custom-new";
+} from "typings/custom";
 
@@ -14,0 +14,0 @@ export default class Nav extends LightningElement {

src/modules/doc/toc/toc.ts

 import { LightningElement, api } from "lwc";
-import {
-    PageReference,
-    SelectedNavigationItem,
-    DocToc
-} from "../../../../../../../typings/custom-new";
+import { PageReference, SelectedNavigationItem, DocToc } from "typings/custom";
 
@@ -8,0 +4,0 @@ export default class Toc extends LightningElement {

src/modules/doc/toolbar/toolbar.ts

@@ -8,3 +8,3 @@ import { LightningElement, api } from "lwc";
     SelectedVersion
-} from "../../../../../../../typings/custom-new";
+} from "typings/custom";
 
@@ -11,0 +11,0 @@ export default class Toolbar extends LightningElement {

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

344380

decreased by-17.94%

Number of package files

59

decreased by-4.84%

Lines of code

6313

decreased by-22.25%

No dependency changes