@salesforcedevs/docs-components 0.54.0 → 0.54.7-alpha

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -0,0 +1,568 @@
+import { api, track } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+import { FetchContent } from "./utils";
+import {
+    CoveoAdvancedQueryXMLConfig,
+    DocLanguage,
+    DocVersion,
+    TreeNode,
+    Header,
+    HistoryState,
+    PageReference
+} from "./types";
+import { SearchSyncer } from "docUtils/SearchSyncer";
+import { LightningElementWithState } from "docBaseElements/lightningElementWithState";
+import { Language } from "typings/custom";
+
+// TODO: Imitating from actual implementation as doc-content use it like this. We should refactor it later.
+const handleContentError = (error): void => console.log(error);
+
+export default class DocXmlContent extends LightningElementWithState<{
+    isFetchingDocument: boolean;
+    isFetchingContent: boolean;
+    lastHighlightedSearch: string;
+}> {
+    @api apiDomain = "https://developer.salesforce.com";
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+
+    @api
+    get labels() {
+        return this._labels;
+    }
+
+    set labels(value) {
+        this._labels = toJson(value);
+    }
+
+    @api
+    get allLanguages(): Array<Language> {
+        return this._allLanguages;
+    }
+
+    set allLanguages(value: string) {
+        if (value) {
+            this._allLanguages = JSON.parse(value);
+        }
+    }
+
+    private _labels: Labels = null;
+    private availableLanguages: Array<DocLanguage> = [];
+    private availableVersions: Array<DocVersion> = [];
+    private contentProvider: FetchContent;
+    private docContent = "";
+    private language: DocLanguage = null;
+    private loaded = false;
+    private pdfUrl = "";
+    private tocMap = null;
+    private sidebarContent: Array<TreeNode> = null;
+    private version: DocVersion = null;
+    private docTitle = "";
+    private analyticsEvent = "custEv_ctaLinkClick";
+    private _pathName = "";
+    private _pageHeader?: Header;
+    private listenerAttached = false;
+    private searchSyncer = new SearchSyncer({
+        callbacks: {
+            onSearchChange: (nextSearchString: string): void => {
+                if (nextSearchString !== this.pageReference.search) {
+                    this.updatePageReference({
+                        ...this.pageReference,
+                        search: nextSearchString
+                    });
+                }
+                if (nextSearchString !== this.state.lastHighlightedSearch) {
+                    this.updateHighlighting(
+                        new URLSearchParams(nextSearchString).get("q") || ""
+                    );
+                }
+            },
+            onUrlChange: (nextSearchString: string): void => {
+                if (nextSearchString !== this.pageReference.search) {
+                    this.updatePageReference({
+                        ...this.pageReference,
+                        search: nextSearchString
+                    });
+                }
+                const nextSearchParam =
+                    new URLSearchParams(nextSearchString).get("q") || "";
+                this.updateSearchInput(nextSearchParam);
+                if (nextSearchString !== this.state.lastHighlightedSearch) {
+                    this.updateHighlighting(nextSearchParam);
+                }
+            }
+        },
+        eventName: "sidebarsearchchange",
+        historyMethod: window.history.pushState,
+        searchParam: "q",
+        shouldStopPropagation: true,
+        target: window
+    });
+    private _allLanguages: Array<Language> = [];
+
+    @track private pageReference: PageReference = {};
+
+    constructor() {
+        super();
+        this.pageReference = this.getReferenceFromUrl();
+        // In order to prevent dispatching unnecessary highlight changes, we
+        // track these items and use their previous values for comparisons in
+        // `renderedCallback`:
+        this.state = {
+            isFetchingContent: false,
+            isFetchingDocument: false,
+            lastHighlightedSearch: "",
+            internalLinkClicked: false
+        };
+    }
+
+    connectedCallback(): void {
+        if (!this.pageReference?.deliverable) {
+            window.location.href = "/docs";
+            return;
+        }
+        this.contentProvider = new FetchContent(this.apiDomain, this.allLanguages);
+        this.fetchDocument().then(() => (this.loaded = true));
+        window.addEventListener("popstate", this.handlePopState);
+
+        this.searchSyncer.init();
+    }
+
+    renderedCallback(): void {
+        this.setState({ internalLinkClicked: true });
+        const urlSectionLink =
+            this.pageReference?.hash?.split("#").length > 1
+                ? this.pageReference.hash.split("#")[1]
+                : this.pageReference?.hash;
+
+        const contentEl = this.template.querySelector("doc-content");
+        const anchorEl =
+            urlSectionLink &&
+            (contentEl?.shadowRoot?.querySelector(`[id='${urlSectionLink}']`) ||
+                contentEl?.shadowRoot?.querySelector(
+                    `[name='${urlSectionLink}']`
+                ));
+
+        if (anchorEl) {
+            anchorEl.scrollIntoView();
+            this.setState({ internalLinkClicked: false });
+        }
+
+        if (
+            (this.prevState.isFetchingContent &&
+                !this.state.isFetchingContent) ||
+            (this.prevState.isFetchingDocument &&
+                !this.state.isFetchingDocument)
+        ) {
+            const prevSearchParam =
+                new URLSearchParams(this.state.lastHighlightedSearch).get(
+                    "q"
+                ) || "";
+            const nextSearchParam =
+                new URLSearchParams(this.pageReference.search).get("q") || "";
+            this.updateHighlighting(nextSearchParam);
+            if (prevSearchParam !== nextSearchParam) {
+                this.updateSearchInput(nextSearchParam);
+            }
+        }
+    }
+
+    disconnectedCallback(): void {
+        window.removeEventListener("popstate", this.handlePopState);
+        this.searchSyncer.dispose();
+        if (this.listenerAttached) {
+            this.pageHeader.removeEventListener(
+                "langchange",
+                this.handleLanguageChange
+            );
+            this.listenerAttached = false;
+        }
+    }
+
+    private get languageId(): string {
+        return this.language.id.replace("-", "_");
+    }
+
+    private get releaseVersionId(): string {
+        return this.version.id;
+    }
+
+    private get deliverable(): string {
+        return this.pageReference.deliverable;
+    }
+
+    private get coveoAdvancedQueryConfig(): CoveoAdvancedQueryXMLConfig {
+        return {
+            // Temporary fix for empty results on apexref page
+            ...(this.deliverable === "apexref"
+                ? { source: "Sitemap - Developer Docs Atlas - Apexref" }
+                : {
+                      objecttype: "HTDeveloperDocumentsC",
+                      sflocale__c: this.languageId,
+                      sfrelease__c: this.releaseVersionId,
+                      sfdelivarable__c: this.deliverable
+                  })
+        };
+    }
+
+    private get pageHeader(): Header {
+        if (!this._pageHeader) {
+            this._pageHeader = document.querySelector("doc-header");
+        }
+
+        return this._pageHeader;
+    }
+
+    private get sidebarValue(): string {
+        if (this.pageReference?.contentDocumentId) {
+            const hashedUri = `${
+                this.pageReference.contentDocumentId
+            }${this.normalizeHash(this.pageReference.hash)}`;
+            if (hashedUri in this.tocMap) {
+                return hashedUri;
+            }
+
+            if (this.pageReference.contentDocumentId in this.tocMap) {
+                return this.pageReference.contentDocumentId;
+            }
+        }
+
+        return "";
+    }
+
+    private get disableVersion(): boolean {
+        return !this.availableVersions || this.availableVersions.length <= 1;
+    }
+
+    private get versionOptions(): Array<DocVersion> {
+        return this.disableVersion
+            ? this.availableVersions
+            : this.availableVersions.map((version) => ({
+                  ...version,
+                  link: {
+                      href: this.pageReferenceToString({
+                          ...this.pageReference,
+                          docId: version.url
+                      })
+                  }
+              }));
+    }
+
+    private handlePopState = (): void =>
+        this.updatePageReference(this.getReferenceFromUrl());
+
+    handleSelect(event: CustomEvent<{ name: string }>): void {
+        event.stopPropagation();
+        const { name } = event.detail;
+
+        if (this.sidebarValue === name) {
+            return;
+        }
+
+        if (name) {
+            const hashIndex = name.indexOf("#");
+            this.pageReference.hash =
+                hashIndex > -1 ? name.slice(hashIndex) : "";
+
+            const contentId = hashIndex > -1 ? name.slice(0, hashIndex) : name;
+            if (this.pageReference.contentDocumentId !== contentId) {
+                this.pageReference.contentDocumentId = contentId;
+                this.fetchContent().catch(handleContentError);
+            }
+
+            this.updateUrl();
+        }
+    }
+
+    handleNavClick(event: CustomEvent<{ pageReference: PageReference }>): void {
+        event.stopPropagation();
+        const { pageReference } = event.detail;
+        this.updatePageReference(pageReference);
+        this.updateUrl();
+    }
+
+    handleLanguageChange = (event: CustomEvent<string>): Promise<void> => {
+        if (this.language && this.language.id === event.detail) {
+            return;
+        }
+
+        this.language = this.availableLanguages.find(
+            ({ id }) => id === event.detail
+        );
+        this.pageReference.docId = this.language.url;
+        this.updateUrl();
+        this.fetchDocument();
+    };
+
+    updatePageReference(newPageReference: PageReference): void {
+        this.pageReference.hash = newPageReference.hash;
+        this.pageReference.search = newPageReference.search;
+
+        if (this.isSamePage(newPageReference)) {
+            return;
+        }
+
+        const isSameDocId = this.pageReference.docId !== newPageReference.docId;
+        this.pageReference = newPageReference;
+
+        if (isSameDocId) {
+            this.fetchDocument();
+            return;
+        }
+
+        this.fetchContent().catch(handleContentError);
+    }
+
+    getReferenceFromUrl(): PageReference {
+        const [page, docId, deliverable, contentDocumentId] =
+            window.location.pathname.substr(1).split("/");
+
+        const { origin: domain, hash, search } = window.location;
+
+        return {
+            contentDocumentId,
+            deliverable,
+            docId,
+            domain,
+            hash,
+            page,
+            search
+        };
+    }
+
+    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
+        );
+    }
+
+    async fetchDocument(): Promise<void> {
+        this.setState({
+            isFetchingDocument: true
+        });
+        const data = await this.contentProvider.fetchDocumentData(
+            this.pageReference.docId
+        );
+
+        // This could be a 404 scenario.
+        if (!data) {
+            this.setState({
+                isFetchingDocument: false
+            });
+            return;
+        }
+
+        this.docTitle = data.docTitle;
+        this.tocMap = data.tocMap;
+        this.sidebarContent = data.toc;
+        this.version = data.version;
+        this.language = data.language;
+        this.availableLanguages = data.availableLanguages;
+        this.availableVersions = data.availableVersions;
+        this.pdfUrl = data.pdfUrl;
+
+        this.updateHeader();
+
+        if (this.pageReference.deliverable !== data.deliverable) {
+            this.pageReference.deliverable = data.deliverable;
+            this.updateUrl(HistoryState.REPLACE_STATE);
+        }
+
+        if (
+            this.pageReference?.contentDocumentId?.replace(/\.htm$/, "") !==
+            data.id
+        ) {
+            try {
+                await this.fetchContent();
+                this.setState({
+                    isFetchingDocument: false
+                });
+                return;
+            } catch (error) {
+                this.pageReference.contentDocumentId = `${data.id}.htm`;
+                this.pageReference.hash = "";
+                this.pageReference.search = "";
+                this.updateUrl(HistoryState.REPLACE_STATE);
+            }
+        }
+
+        this.docContent = data.content;
+        this.addMetatags();
+        this.setState({
+            isFetchingDocument: false
+        });
+    }
+
+    async fetchContent(): Promise<void> {
+        this.setState({
+            isFetchingContent: true
+        });
+        const data = await this.contentProvider.fetchContent(
+            this.pageReference.deliverable,
+            this.pageReference.contentDocumentId,
+            {
+                language: this.language.id,
+                version: this.version.id
+            }
+        );
+
+        if (data) {
+            this.docContent = data.content;
+            this.addMetatags();
+
+            if (!this.pageReference.hash) {
+                document.querySelector("main")?.scrollIntoView({
+                    behavior: "smooth",
+                    block: "start",
+                    inline: "nearest"
+                });
+            }
+        }
+        this.setState({
+            isFetchingContent: false
+        });
+    }
+
+    updateHeader(): void {
+        if (!this.pageHeader) {
+            return;
+        }
+
+        if (this.docTitle) {
+            this.pageHeader.subtitle = this.docTitle;
+        }
+
+        if (this.pdfUrl) {
+            this.pageHeader.bailHref = this.pdfUrl;
+            this.pageHeader.bailLabel = "PDF";
+        }
+
+        if (!this.listenerAttached) {
+            this.pageHeader.addEventListener(
+                "langchange",
+                this.handleLanguageChange
+            );
+            this.listenerAttached = true;
+        }
+
+        this.pageHeader.languages = this.availableLanguages;
+        this.pageHeader.language = this.language?.id;
+
+        if (this.pageReference) {
+            const { docId, deliverable, page } = this.pageReference;
+            this.pageHeader.headerHref = `/${page}/${docId}/${deliverable}/`;
+        }
+    }
+
+    updateUrl(method = HistoryState.PUSH_STATE): void {
+        window.history[method](
+            {},
+            "docs",
+            this.pageReferenceToString(this.pageReference)
+        );
+    }
+
+    private updateHighlighting(searchParam: string): void {
+        this.dispatchHighlightChange(searchParam);
+        this.setState({
+            lastHighlightedSearch: this.pageReference.search
+        });
+    }
+
+    private updateSearchInput(searchParam: string): void {
+        this.template
+            .querySelector("doc-content-layout")
+            ?.setSidebarInputValue(searchParam);
+    }
+
+    private pageReferenceToString(reference: PageReference): string {
+        const { page, docId, deliverable, contentDocumentId, hash, search } =
+            reference;
+        return `/${page}/${docId}/${deliverable}/${contentDocumentId}${this.normalizeSearch(
+            search
+        )}${this.normalizeHash(hash)}`;
+    }
+
+    private normalizeUrlPart(part: string, sentinel: string): string {
+        return (
+            (part &&
+                (part.startsWith(sentinel) ? part : `${sentinel}${part}`)) ||
+            ""
+        );
+    }
+
+    private normalizeSearch(search: string): string {
+        return this.normalizeUrlPart(search, "?");
+    }
+
+    private normalizeHash(hash: string): string {
+        return this.normalizeUrlPart(hash, "#");
+    }
+
+    private getComposedTitle(
+        topicTitle: string | undefined,
+        docTitle: string | undefined
+    ): string {
+        // map to avoid duplicates
+        const titleMap = {};
+        if (topicTitle) {
+            // sometimes the h1 tag text (which is docSubTitle) contains text with new line character. For e.g, "Bulk API 2.0 Older\n  Documentation",
+            // here it contains \n in the text context which needs to be removed
+            // also, there are multiple spaces in between the text, which needs to be replaced with a single space
+            const docTopicTitle = topicTitle
+                .replace(/[\t\r\n]/g, " ")
+                .replace(/ +/g, " ")
+                .trim();
+            titleMap[docTopicTitle] = true;
+        }
+
+        if (docTitle) {
+            titleMap[docTitle] = true;
+        }
+
+        titleMap["Salesforce Developers"] = true;
+
+        return Object.keys(titleMap).join(" | ");
+    }
+
+    private dispatchHighlightChange(term: string): void {
+        this.dispatchEvent(
+            new CustomEvent("highlightedtermchange", {
+                detail: term,
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+
+    addMetatags(): void {
+        const div = document.createElement("div");
+        div.innerHTML = this.docContent;
+        const docDescription = div.querySelector(".shortdesc")?.textContent;
+        const topicTitle = div.querySelector("h1")?.textContent;
+
+        const title = document.querySelector("title");
+        const composedTitle = this.getComposedTitle(topicTitle, this.docTitle);
+
+        if (title) {
+            title.textContent = composedTitle;
+        }
+        const metatitle = document.querySelector('meta[name="title"]');
+        if (metatitle) {
+            metatitle.setAttribute("content", composedTitle);
+        }
+
+        if (docDescription) {
+            const metadescription = document.querySelector(
+                'meta[name="description"]'
+            );
+            if (metadescription) {
+                metadescription.setAttribute("content", docDescription);
+            }
+        }
+    }
+}

package/src/modules/docBaseElements/lightningElementWithState/lightningElementWithState.ts

@@ -0,0 +1,93 @@
+import { LightningElement, track } from "lwc";
+
+/**
+ * This is a helper class for when you want your LWC component to have state
+ * that is automatically tracked _along with_ its previous state, in a React-
+ * like fashion, so that you can compare current state with previous state
+ * after a render (like React's `commponentDidUpdate`). One benefit of doing
+ * things this way is that you can put all of your reactions to state changes
+ * in one place, in `renderedCallback`, rather than having them in various
+ * places throughout the component.
+ *
+ * The API consists in `this.prevState`, `this.state`, and `this.setState`.
+ *
+ * Usage:
+ *
+ * ```
+ * type MyState = {
+ *     isFetchingContent: boolean;
+ * };
+ *
+ * class MyFetchingComponent extends LightningElementWithState<MyState> {
+ *     constructor() {
+ *         // `this.state` can only be initialized once
+ *         this.state = {
+ *             isFetchingContent: false
+ *         };
+ *     }
+ *
+ *     // Queued for execution whenever a `setState` call completes
+ *     renderedCallback() {
+ *         if (this.prevState.isFetchingContent && !this.state.isFetchingContent) {
+ *             // Do something knowing that we just finished fetching.
+ *             notifyFetchSuccessful();
+ *         }
+ *     }
+ *
+ *     fetchSomething() {
+ *         this.setState({
+ *             isFetchingContent: true
+ *         });
+ *
+ *         fetch(whatever).then(() => {
+ *             this.setState({
+ *                 isFetching: false
+ *             }
+ *         });
+ *     }
+ * }
+ * ```
+ */
+export abstract class LightningElementWithState<
+    T extends { [key: string]: unknown }
+> extends LightningElement {
+    private _prevState = {} as T;
+    @track private _state = {} as T;
+
+    private _didInitializeState = false;
+
+    protected get prevState(): T {
+        return Object.freeze({
+            ...this._prevState
+        });
+    }
+
+    protected get state(): T {
+        return Object.freeze({
+            ...this._state
+        });
+    }
+
+    protected set state(initialState: T) {
+        if (!this._didInitializeState) {
+            this._state = {
+                ...initialState
+            };
+            this._didInitializeState = true;
+        } else {
+            throw new Error(
+                "To mutate state after initialization, use `this.setState`."
+            );
+        }
+    }
+
+    protected setState = (state: Partial<T>): void => {
+        this._prevState = {
+            ...this._state
+        };
+        this._state = {
+            ...this._state,
+            ...state
+        };
+    };
+}