You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

@salesforcedevs/docs-components

Package Overview
Dependencies
Maintainers
17
Versions
795
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@salesforcedevs/docs-components - npm Package Compare versions

Comparing version

to
0.0.4-edit

src/modules/doc/amfModelParser/amfModelParser.ts

26

lwc.config.json
{
"modules": [
{ "dir": "src/modules" },
{ "npm": "@salesforcedevs/dx-components" }
{ "npm": "@salesforcedevs/dx-components" },
{ "npm": "@salesforcedevs/dw-components" }
],
"expose": ["doc/container"]
"expose": [
"doc/amfReference",
"doc/breadcrumbs",
"doc/componentPlayground",
"doc/content",
"doc/contentCallout",
"doc/chat",
"doc/doDont",
"doc/contentLayout",
"doc/contentMedia",
"doc/docXmlContent",
"doc/lwcContentLayout",
"doc/header",
"doc/heading",
"doc/headingAnchor",
"doc/overview",
"doc/phase",
"doc/specificationContent",
"doc/versionPicker",
"doc/xmlContent",
"docUtils/utils"
]
}

27

package.json
{
"name": "@salesforcedevs/docs-components",
"version": "0.0.4-beta.0",
"version": "0.0.4-edit",
"description": "Docs Lightning web components for DSC",
"license": "UNLICENSED",
"license": "MIT",
"main": "index.js",
"engines": {
"node": ">= 12.x"
"node": "20.x"
},
"files": [
"src/modules",
"lwc.config.json"
],
"publishConfig": {
"access": "restricted"
"access": "public"
},
"dependencies": {
"@api-components/amf-helper-mixin": "4.5.29",
"classnames": "2.5.1",
"dompurify": "3.2.4",
"kagekiri": "1.4.2",
"lodash.orderby": "4.6.0",
"lodash.uniqby": "4.7.0",
"query-string": "7.1.3",
"sentence-case": "3.0.4"
},
"devDependencies": {
"@types/classnames": "2.3.1",
"@types/lodash.orderby": "4.6.9",
"@types/lodash.uniqby": "4.7.9"
},
"gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
}
/* eslint-disable @lwc/lwc/no-inner-html */
import { LightningElement, api, track } from "lwc";
import {
DocContent,
PageReference
} from "../../../../../../../typings/custom-new";
import Prism from "doc/prismjs";
import { createElement, LightningElement, api, track } from "lwc";
import { DocContent, PageReference } from "typings/custom";
import CodeBlock from "dx/codeBlock";
import Button from "dx/button";
import { highlightTerms } from "dxUtils/highlight";
import ContentCallout from "doc/contentCallout";
import ContentMedia from "doc/contentMedia";
const HIGHLIGHTABLE_SELECTOR = [
"p",
".p",
".shortdesc",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"li",
"dl",
"th",
"td"
].join(",");
const LANGUAGE_MAP: { [key: string]: string } = {
js: "javascript"
};
export default class Content extends LightningElement {
@api isStorybook: boolean = false;
@api pageReference!: PageReference;
@api codeBlockType: string = "card";
@api showPaginationButtons: boolean = false;

@@ -16,4 +39,5 @@ @api

this._docRendered = false;
this.docContent = value;
this.docContent = (value && value.trim()) || "";
}
get docsData() {

@@ -26,100 +50,231 @@ return this.docContent;

//TODO: cleanup html manipulation
insertDocHtml() {
const divEl = this.template.querySelector("div");
connectedCallback() {
window.addEventListener(
"highlightedtermchange",
this.updateHighlighted
);
}
// Some simple data mutation to make Prism work on-the-fly with the existing datasource
const templateEl = document.createElement("template");
this.docContent = this.docContent.trim();
templateEl.innerHTML = this.docContent;
disconnectedCallback(): void {
window.removeEventListener(
"highlightedtermchange",
this.updateHighlighted
);
}
const preEls = templateEl.content.querySelectorAll("pre");
renderPaginationButton(anchorEl: HTMLElement) {
const isNext = anchorEl.textContent!.includes("Next →");
anchorEl.innerHTML = "";
const buttonEl = createElement("dx-button", { is: Button });
const params = isNext
? { iconSymbol: "chevronright" }
: {
iconPosition: "left",
iconSymbol: "chevronleft",
variant: "secondary"
};
Object.assign(buttonEl, params);
const textEl = document.createDocumentFragment();
textEl.textContent = isNext ? "Next" : "Previous";
buttonEl.appendChild(textEl);
anchorEl.appendChild(buttonEl);
}
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);
});
// 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(docContent?: string) {
const divEl = this.getCleanContainer();
// Modify anchors to work with any domain
const anchorEls = templateEl.content.querySelectorAll("a");
anchorEls.forEach((anchorEl) => {
let href = anchorEl.href.split("/");
if (
(href[3] === this.pageReference.docId && this.isStorybook) ||
href[4] === this.pageReference.docId ||
href[6] === this.pageReference.docId
) {
let updatedURL;
switch (href.length) {
case 8:
updatedURL = href.splice(5).join("/");
break;
case 7:
updatedURL = href.splice(4).join("/");
break;
case 6:
updatedURL = href.splice(3).join("/");
break;
default:
updatedURL = href.splice(6).join("/");
break;
if (divEl) {
divEl.innerHTML = docContent || this.docContent;
// Query the code blocks and create a dx-code-block component that contains the code
const codeBlockEls = divEl.querySelectorAll(".codeSection");
codeBlockEls.forEach((codeBlockEl) => {
codeBlockEl.setAttribute("lwc:dom", "manual");
const classList = codeBlockEl.firstElementChild?.classList;
let language = "";
if (classList) {
for (let i = 0; i < classList.length; i++) {
const className = classList[i];
if (className.startsWith("brush:")) {
language = className.split(":")[1];
}
}
}
const blockCmp = createElement("dx-code-block", {
is: CodeBlock
});
Object.assign(blockCmp, {
codeBlock: codeBlockEl.innerHTML,
// ! Hot fix for incoming html tags from couchdb for xml blocks, fix me soon please
language: LANGUAGE_MAP[language] || language,
header: "", // Default no title.
variant: this.codeBlockType,
isEncoded: true
});
// eslint-disable-next-line no-use-before-define
codeBlockEl.innerHTML = "";
codeBlockEl.appendChild(blockCmp);
});
anchorEl.addEventListener(
"click",
// eslint-disable-next-line no-use-before-define
this.handleNavClick.bind(this)
// Query the callouts and create a doc-content-callout component that contains the code
const calloutEls = divEl.querySelectorAll(".message");
calloutEls.forEach((calloutEl) => {
const calloutCompEl = createElement("doc-content-callout", {
is: ContentCallout
});
const detailEls = calloutEl.querySelectorAll(
"p, .p, div.data, ol, ul, p+.codeSection, p~.codeSection, div >.codeSection, .mediaBd > span.ph"
);
anchorEl.setAttribute("href", "docs/" + updatedURL);
anchorEl.setAttribute("data-id", "docs/" + updatedURL);
} else if (href[2] === "developer.salesforce.com") {
let updatedURL = this.pageReference.domain;
if (href[3]) {
updatedURL = updatedURL + `/${href[3]}`;
detailEls.forEach((detailEl) => {
if (detailEl.innerHTML.trim() !== "") {
calloutCompEl.appendChild(detailEl);
}
});
// Set a flag to 1 (true) if and only if all detailEls have no content.
let flag = 1;
for (let i: number = 0; i < detailEls.length; i++) {
flag &= (detailEls[i].innerHTML.trim() === "") as any; // Dark Magic TM
}
console.log(updatedURL);
if (href[4]) {
updatedURL = updatedURL + `/${href[4]}`;
if (flag) {
const codeEls = calloutEl.querySelectorAll(".codeSection");
codeEls.forEach((codeEl) => {
calloutCompEl.appendChild(codeEl);
});
}
console.log(updatedURL);
if (href[5]) {
updatedURL = updatedURL + `/${href[5]}`;
const type = calloutEl.querySelector("h4")!.textContent!;
const typeLower = type.toLowerCase();
Object.assign(calloutCompEl, {
header: type,
variant: typeLower
});
// eslint-disable-next-line no-use-before-define
calloutEl.innerHTML = "";
calloutEl.appendChild(calloutCompEl);
});
// Modify links to work with any domain, links that start with "#" are excluded
const anchorEls = divEl.querySelectorAll("a:not([href^='#'])");
anchorEls.forEach((anchorEl: any) => {
if (
anchorEl.textContent!.includes("Next →") ||
anchorEl.textContent!.includes("← Previous")
) {
if (this.showPaginationButtons) {
this.renderPaginationButton(anchorEl);
} else {
anchorEl.remove();
}
}
console.log(updatedURL);
if (href[6]) {
updatedURL = updatedURL + `/${href[6]}`;
// ! This is a hack
// Normalize urls in case it doesn't come complete.
if (anchorEl.href.startsWith("atlas.")) {
anchorEl.href = "/docs/" + anchorEl.href;
}
console.log(updatedURL);
anchorEl.setAttribute("href", updatedURL);
anchorEl.setAttribute("data-id", updatedURL);
}
});
// Modify image src to work with any domain
const imgEls = templateEl.content.querySelectorAll("img");
imgEls.forEach((imgEl) => {
let src = imgEl.src;
let updatedURL = src.replace(
this.pageReference.domain,
"https://developer.salesforce.com"
);
imgEl.setAttribute("src", updatedURL);
});
const href = anchorEl.href.split("/");
if (
(href[3] === this.pageReference.docId &&
this.isStorybook) ||
href[4] === this.pageReference.docId ||
href[6] === this.pageReference.docId
) {
let updatedURL;
switch (href.length) {
case 8:
updatedURL = href.splice(5).join("/");
break;
case 7:
updatedURL = href.splice(4).join("/");
break;
case 6:
updatedURL = href.splice(3).join("/");
break;
default:
updatedURL = href.splice(6).join("/");
break;
}
anchorEl.addEventListener(
"click",
// eslint-disable-next-line no-use-before-define
this.handleNavClick.bind(this)
);
// anchor href event is not propagated here as we want SPA nature.
// But in prerender.io - as javascript is not executed, we want the anchor links are proper (absolute urls).
anchorEl.setAttribute("href", "/docs/" + updatedURL);
anchorEl.setAttribute("data-id", "docs/" + updatedURL);
return;
}
// 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) {
divEl.innerHTML = "";
divEl.append(templateEl.content);
anchorEl.setAttribute("data-id", anchorEl.href);
});
// Modify image src to work with any domain and replace images/iframes with doc-content-media
const imgEls = divEl.querySelectorAll("img, iframe");
imgEls.forEach((mediaEl) => {
const isImage = mediaEl.nodeName === "IMG";
let src = mediaEl.getAttribute("src");
if (!src) {
return;
}
const alt = mediaEl.getAttribute("alt");
const title = mediaEl.getAttribute("title");
const label = mediaEl.getAttribute("label");
const width = mediaEl.getAttribute("width");
const height = mediaEl.getAttribute("height");
const className = mediaEl.getAttribute("class");
if (isImage) {
src = src.startsWith("/")
? `https://developer.salesforce.com${src}`
: src.replace(
window.location.origin,
"https://developer.salesforce.com"
);
const img: HTMLImageElement = document.createElement("img");
img.src = src;
img.alt = "";
if (alt) {
img.alt = alt;
}
if (title) {
img.title = title;
}
if (height) {
img.height = parseFloat(height);
}
if (width) {
img.width = parseFloat(width);
}
if (className) {
img.className = className;
}
img.className = `content-image ${img.className}`;
mediaEl.parentNode!.insertBefore(img, mediaEl);
} else {
const contentMediaEl = createElement("doc-content-media", {
is: ContentMedia
});
Object.assign(contentMediaEl, {
contentType: "iframe",
contentSrc: src,
mediaTitle: alt || title || label
});
mediaEl.parentNode!.insertBefore(contentMediaEl, mediaEl);
}
mediaEl.remove();
});
}
// 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) {

@@ -130,15 +285,28 @@ this.navigateToHash(this.pageReference.hash);

private getCleanContainer(): HTMLElement | null {
const divEl = this.template.querySelector("div");
if (divEl?.hasChildNodes()) {
divEl.removeChild(divEl.firstChild!);
}
return divEl;
}
isSamePage(reference: PageReference): boolean {
return (
this.pageReference.contentDocumentId ===
reference.contentDocumentId &&
this.pageReference.docId === reference.docId &&
this.pageReference.page === reference.page &&
this.pageReference.deliverable === reference.deliverable
);
}
handleNavClick(event: InputEvent) {
event.preventDefault();
// 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! as any).dataset.id;
const [page, docId, deliverable, tempContentDocumentId] =
target.split("/");
const [contentDocumentId, hash] = tempContentDocumentId.split("#");
const newPageReference = {
page: page,

@@ -159,7 +327,17 @@ docId: docId,

);
if (this.isSamePage({ ...newPageReference, domain: "" })) {
this.navigateToHash(window.location.hash);
}
}
updateHighlighted = (event: any) =>
highlightTerms(
this.template.querySelectorAll(HIGHLIGHTABLE_SELECTOR),
event.detail
);
@api
public navigateToHash(hash: String) {
let splitHash = hash.split("#");
public navigateToHash = (hash: String) => {
const splitHash = hash.split("#");
if (splitHash.length === 2) {

@@ -174,3 +352,3 @@ hash = splitHash[1];

}
}
};

@@ -181,3 +359,2 @@ renderedCallback() {

}
this.insertDocHtml();

@@ -184,0 +361,0 @@ this._docRendered = true;

@@ -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 {

import { LightningElement, api } from "lwc";
import {
PageReference,
SelectedNavigationItem,
DocToc
} from "../../../../../../../typings/custom-new";
import { PageReference, SelectedNavigationItem, DocToc } from "typings/custom";

@@ -18,3 +14,3 @@ export default class Toc extends LightningElement {

//const target = event.detail.name.split('-')
const target = event.currentTarget.dataset.id.split("-");
const target = (event.currentTarget as any).dataset.id.split("-");
newPageReference.contentDocumentId = target[0] + ".htm";

@@ -21,0 +17,0 @@ newPageReference.hash = target[1];

@@ -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 {

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet