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.11-chat

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", "doc/contentCallout", "doc/codeBlock"]
"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"
]
}

23

package.json
{
"name": "@salesforcedevs/docs-components",
"version": "0.0.7",
"version": "0.0.11-chat",
"description": "Docs Lightning web components for DSC",

@@ -8,12 +8,23 @@ "license": "MIT",

"engines": {
"node": ">= 12.x"
"node": "20.x"
},
"files": [
"src/modules",
"lwc.config.json"
],
"publishConfig": {
"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";
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 {

@@ -9,175 +34,243 @@ @api isStorybook: boolean = false;

@api codeBlockType: string = "card";
@api showPaginationButtons: boolean = false;
@api
set docsData(value) {
this._docRendered = false;
this.docContent = value;
this.docContent = (value && value.trim()) || "";
}
get docsData() {
return this.docContent;
}
_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
window.addEventListener(
"highlightedtermchange",
this.updateHighlighted
);
}
updateTheme() {
this._codeBlockTheme =
this._codeBlockTheme === "dark" ? "light" : "dark";
const codeBlockEls = this.template.querySelectorAll("dx-code-block");
codeBlockEls.forEach((codeBlockEl) => {
codeBlockEl.setAttribute("theme", this._codeBlockTheme);
});
disconnectedCallback(): void {
window.removeEventListener(
"highlightedtermchange",
this.updateHighlighted
);
}
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);
}
// 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() {
const divEl = this.template.querySelector("div");
insertDocHtml(docContent?: string) {
const divEl = this.getCleanContainer();
// 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();
// eslint-disable-next-line no-use-before-define
templateEl.innerHTML = this.docContent;
if (divEl) {
divEl.innerHTML = docContent || this.docContent;
// 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];
// 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];
}
}
}
}
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);
});
// Query the callouts and create a doc-content-callout component that contains the code
const calloutEls = templateEl.content.querySelectorAll(".message");
calloutEls.forEach((calloutEl) => {
const calloutCompEl = document.createElement("doc-content-callout");
const detailEls = calloutEl.querySelectorAll("p");
detailEls.forEach((detailEl) => {
calloutCompEl.appendChild(detailEl);
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);
});
const type = calloutEl.querySelector("h4").textContent;
const typeLower = type.toLowerCase();
calloutCompEl.setAttribute("title", type);
calloutCompEl.setAttribute("variant", typeLower);
calloutEl.innerHTML = "";
calloutEl.appendChild(calloutCompEl);
});
// Modify links to work with any domain
const anchorEls = templateEl.content.querySelectorAll("a");
anchorEls.forEach((anchorEl) => {
if (anchorEl.textContent.includes("Next →")) {
anchorEl.textContent = "";
const buttonEl = document.createElement("dx-button");
buttonEl.setAttribute("icon-symbol", "chevronright");
buttonEl.textContent = "Next";
anchorEl.appendChild(buttonEl);
}
if (anchorEl.textContent.includes("← Previous")) {
anchorEl.textContent = "";
const buttonEl = document.createElement("dx-button");
buttonEl.setAttribute("icon-symbol", "chevronleft");
buttonEl.setAttribute("icon-position", "left");
buttonEl.setAttribute("variant", "secondary");
buttonEl.textContent = "Previous";
anchorEl.appendChild(buttonEl);
}
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)
// 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
}
if (href[4]) {
updatedURL = updatedURL + `/${href[4]}`;
if (flag) {
const codeEls = calloutEl.querySelectorAll(".codeSection");
codeEls.forEach((codeEl) => {
calloutCompEl.appendChild(codeEl);
});
}
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();
}
}
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;
}
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) => {
const src = imgEl.src;
const origin = window.location.origin;
const updatedURL = src.replace(
origin,
"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;
}
if (divEl) {
// eslint-disable-next-line no-use-before-define
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();
});
}

@@ -191,9 +284,26 @@

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
const target = event.currentTarget.dataset.id;
const [page, docId, deliverable, tempContentDocumentId] = target.split(
"/"
);
const target = (event.currentTarget! as any).dataset.id;
const [page, docId, deliverable, tempContentDocumentId] =
target.split("/");
const [contentDocumentId, hash] = tempContentDocumentId.split("#");

@@ -216,6 +326,16 @@ const newPageReference = {

);
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) {
public navigateToHash = (hash: String) => {
const splitHash = hash.split("#");

@@ -231,3 +351,3 @@ if (splitHash.length === 2) {

}
}
};

@@ -234,0 +354,0 @@ renderedCallback() {

@@ -6,4 +6,3 @@ import { LightningElement, api } from "lwc";

export default class ContentCallout extends LightningElement {
@api overrideWidth?: boolean = false;
@api title!: string;
@api header!: string;
@api variant!: CalloutVariant;

@@ -16,2 +15,5 @@ cardVariant?: string;

switch (this.variant) {
case "plain":
this.cardVariant = "dx-callout-plain";
break;
case "tip":

@@ -23,4 +25,4 @@ this.cardVariant = "dx-callout-tip";

case "warning":
this.cardVariant = "dx-callout-warning";
this.iconColor = "yellow-vibrant-80";
this.cardVariant = "doc-status-container dx-callout-warning";
this.iconColor = "red-vibrant-50";
this.iconName = "warning";

@@ -33,6 +35,11 @@ break;

break;
case "important":
this.cardVariant = "doc-status-container dx-callout-important";
this.iconColor = "gray-10";
this.iconName = "announcement";
break;
case "note":
default:
this.cardVariant = "dx-callout-base";
this.iconColor = "gray-50";
this.cardVariant = "dx-callout-note";
this.iconColor = "blue-vibrant-50";
this.iconName = "info";

@@ -45,9 +52,13 @@ }

"dx-callout",
"dx-callout-base__section",
"dx-callout-base__column",
this.cardVariant,
this.overrideWidth && "dx-callout-base--override-width"
"doc-status-base",
"dx-callout-base_section",
"dx-callout-base_column",
this.cardVariant
);
}
get hideIcon() {
return this.variant === "plain";
}
private isSlotEmpty: boolean = true;

@@ -54,0 +65,0 @@ private onSlotChange(e: LightningSlotElement) {

@@ -11,3 +11,3 @@ import { LightningElement, api } from "lwc";

SelectedVersion
} from "../../../../../../../typings/custom";
} from "typings/custom";

@@ -14,0 +14,0 @@ export default class Nav extends LightningElement {

@@ -14,3 +14,3 @@ import { LightningElement, api } from "lwc";

//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";

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

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

Sorry, the diff of this file is not supported yet