@salesforcedevs/docs-components 1.3.172 → 1.3.173

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.172",
+    "version": "1.3.173",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -24,5 +24,5 @@
         "@types/lodash.orderby": "^4.6.7",
         "@types/lodash.uniqby": "^4.7.7"
     },
-    "gitHead": "5ee185196e3f394e324227f4ca61d8578e6ec8d2"
+    "gitHead": "85f6ef2fd7789804c470b862101492739432cc04"
 }

package/src/modules/doc/{amfReference/utils.ts → amfModelParser/amfModelParser.ts}

@@ -1,4 +1,9 @@
-import { AmfHelperMixin } from "@api-components/amf-helper-mixin";
+// @ts-nocheck not going to check this file because it deals almost entirely with the AmfHelperMixin, which is terrible and not worth messing with. We should just upgrade our LWC version instead.
+import {
+    AmfHelperMixin,
+    EndPoint,
+    Operation
+} from "@api-components/amf-helper-mixin";
 import { normalizeDomId } from "dxUtils/normalizers";
 
 const ID_PROPERTY = "@id";
@@ -7,7 +12,7 @@ const TYPE_PROPERTY = "@type";
 export class AmfModelParser extends AmfHelperMixin(Object) {
     _parsedModel = null;
 
-    constructor(api) {
+    constructor(api: any) {
         super();
         if (api) {
             this.amf = Array.isArray(api) ? api[0] : api;
@@ -517,7 +522,7 @@ export class AmfModelParser extends AmfHelperMixin(Object) {
      * @param {string} selected Currently selected `@id`.
      * @return {any|undefined} Model definition for an endpoint fragment.
      */
-    computeEndpointApiModel(model, selectedId) {
+    computeEndpointApiModel(model, selectedId): EndPoint {
         const webApi = this._computeApi(model);
         return this._computeEndpointModel(webApi, selectedId);
     }
@@ -529,7 +534,7 @@ export class AmfModelParser extends AmfHelperMixin(Object) {
      * @param {string} selected Currently selected `@id`.
      * @return {any|undefined} Model definition for an endpoint fragment.
      */
-    computeMethodApiModel(model, selected) {
+    computeMethodApiModel(model, selected): Operation | undefined {
         const webApi = this._computeApi(model);
         return this._computeMethodModel(webApi, selected);
     }
@@ -541,7 +546,7 @@ export class AmfModelParser extends AmfHelperMixin(Object) {
      * @param {string} selected Currently selected `@id`.
      * @return {any|undefined} Model definition for an endpoint fragment.
      */
-    computeEndpointApiMethodModel(model, selected) {
+    computeEndpointApiMethodModel(model, selected): EndPoint | undefined {
         const webApi = this._computeApi(model);
         return this._computeMethodEndpoint(webApi, selected);
     }

package/src/modules/doc/amfReference/amfReference.ts

@@ -2,7 +2,7 @@ import { LightningElement, api, track } from "lwc";
 import { noCase } from "no-case";
 import { sentenceCase } from "sentence-case";
 import qs from "query-string";
-import { AmfModelParser } from "./utils";
+import { AmfModelParser } from "doc/amfModelParser";
 import { normalizeBoolean } from "dxUtils/normalizers";
 import { CoveoAnalyticsClient } from "coveo.analytics";
 import type {
@@ -30,18 +30,26 @@ import { restoreScroll } from "dx/scrollManager";
 import { DocPhaseInfo } from "typings/custom";
 import { oldVersionDocInfo } from "docUtils/utils";
 
+type NavigationItem = {
+    label: string;
+    name: string;
+    isExpanded: boolean;
+    children: ParsedMarkdownTopic[];
+    isChildrenLoading: boolean;
+};
+
 export default class AmfReference extends LightningElement {
-    @api breadcrumbs?: string | null | undefined = null;
+    @api breadcrumbs: string | null = null;
     @api sidebarHeader!: string;
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
     @api coveoAnalyticsToken!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api coveoSearchHub!: string;
-    @api useOldSidebar?: boolean = false;
+    @api useOldSidebar: boolean = false;
     @api tocTitle?: string;
     @api tocOptions?: string;
-    @track navigation = [];
+    @track navigation = [] as NavigationItem[];
     @track versions: Array<ReferenceVersion> = [];
     @track showVersionBanner = false;
 
@@ -125,8 +133,8 @@ export default class AmfReference extends LightningElement {
     }
 
     @api
-    get docPhaseInfo() {
-        return this.selectedReferenceDocPhase;
+    get docPhaseInfo(): string | null {
+        return this.selectedReferenceDocPhase || null;
     }
 
     set docPhaseInfo(value: string) {
@@ -151,12 +159,12 @@ export default class AmfReference extends LightningElement {
     protected _referenceSetConfig!: ReferenceSetConfig;
     protected _currentReferenceId = "";
 
-    protected parentReferenceUrls = [];
+    protected parentReferenceUrls = [] as string[];
     protected amfMap: Record<string, AmfModelRecord> = {};
-    protected amfFetchPromiseMap = {};
+    protected amfFetchPromiseMap = {} as any;
     protected metadata: { [key: string]: AmfMetadataTopic } = {};
     protected selectedTopic?: AmfMetaTopicType = undefined;
-    protected selectedSidebarValue = undefined;
+    protected selectedSidebarValue: string | undefined = undefined;
 
     protected selectedVersion: ReferenceVersion | null = null;
 
@@ -347,13 +355,13 @@ export default class AmfReference extends LightningElement {
     /**
      * Returns the selected version or the first available version.
      */
-    private getSelectedVersion(): ReferenceVersion {
+    private getSelectedVersion(): ReferenceVersion | null {
         const versions = this._referenceSetConfig?.versions || [];
         const selectedVersion = versions.find(
             (v: ReferenceVersion) => v.selected
         );
         // return a selected version if there is one, else return the first one.
-        return selectedVersion || (versions.length && versions[0]);
+        return selectedVersion || (versions.length && versions[0]) || null;
     }
 
     private updateAmfConfigInView(): void {
@@ -367,9 +375,11 @@ export default class AmfReference extends LightningElement {
         }
     }
 
-    private async fetchAmf(amfConfig): Promise<AmfModel | AmfModel[]> {
+    private async fetchAmf(
+        amfConfig: AmfConfig
+    ): Promise<AmfModel | AmfModel[]> {
         const { amf } = amfConfig;
-        const response = await fetch(amf, {
+        const response = await fetch(amf!, {
             headers: {
                 "Cache-Control": `max-age=86400`
             }
@@ -388,7 +398,7 @@ export default class AmfReference extends LightningElement {
     /**
      * Returns whether given url is parent reference path like ../example-project/references/reference-id
      */
-    private isParentReferencePath(urlPath: string): boolean {
+    private isParentReferencePath(urlPath?: string | null): boolean {
         if (!urlPath) {
             return false;
         }
@@ -419,9 +429,9 @@ export default class AmfReference extends LightningElement {
      * Populates reference Items from amfConfigList and assigns it to navigation for sidebar
      */
     private populateReferenceItems(): void {
-        const navAmfOrder = [];
+        const navAmfOrder = [] as NavigationItem[];
         for (const [index, amfConfig] of this._amfConfigList.entries()) {
-            let navItemChildren = [];
+            let navItemChildren = [] as ParsedMarkdownTopic[];
             let isChildrenLoading = false;
             if (amfConfig.referenceType !== REFERENCE_TYPES.markdown) {
                 if (amfConfig.isSelected) {
@@ -441,10 +451,10 @@ export default class AmfReference extends LightningElement {
                 // check whether we should expand all the child nodes, this is required for Coveo to crawl.
                 if (isExpandChildrenEnabled) {
                     this.expandChildrenForMarkdownReferences(
-                        amfConfig.topic.children
+                        amfConfig.topic!.children
                     );
                 }
-                navItemChildren = amfConfig.topic.children;
+                navItemChildren = amfConfig.topic!.children;
             }
             // store nav items for each spec in order
             navAmfOrder[index] = {
@@ -465,7 +475,9 @@ export default class AmfReference extends LightningElement {
      * Returns a boolean indicating whether the children should be expanded or not.
      */
     private isExpandChildrenEnabled(referenceId: string): boolean {
-        return this.expandChildren && this._currentReferenceId === referenceId;
+        return (
+            !!this.expandChildren && this._currentReferenceId === referenceId
+        );
     }
 
     /**
@@ -509,12 +521,12 @@ export default class AmfReference extends LightningElement {
         referenceId: string,
         items: ParsedTopicModel[]
     ): NavItem[] {
-        const methodList = [];
+        const methodList = [] as NavItem[];
 
         items.forEach((item) => {
             item.methods?.forEach((method) => {
                 const title =
-                    this.getTitleForLabel(method.label) || method.method;
+                    this.getTitleForLabel(method.label!) || method.method;
                 const meta = this.addToMetadata(
                     parentReferencePath,
                     referenceId,
@@ -562,7 +574,7 @@ export default class AmfReference extends LightningElement {
         const parentReferencePath = amfConfig.href;
         const model = this.amfMap[referenceId].parser.parsedModel;
 
-        const children = [];
+        const children: any[] = [];
         const expandChildren = this.isExpandChildrenEnabled(referenceId);
 
         NAVIGATION_ITEMS.forEach(
@@ -589,8 +601,8 @@ export default class AmfReference extends LightningElement {
                     }
                     case "endpoint":
                         if (
-                            model[childrenPropertyName] &&
-                            model[childrenPropertyName].length
+                            model[childrenPropertyName!] &&
+                            model[childrenPropertyName!].length
                         ) {
                             const amfTopicId = this.getFormattedIdentifier(
                                 referenceId,
@@ -599,7 +611,7 @@ export default class AmfReference extends LightningElement {
                             const childTopics = this.assignEndpointNavItems(
                                 parentReferencePath,
                                 referenceId,
-                                model[childrenPropertyName]
+                                model[childrenPropertyName!]
                             );
                             children.push({
                                 label,
@@ -614,23 +626,25 @@ export default class AmfReference extends LightningElement {
                         break;
                     case "security":
                     case "type":
-                        if (model[childrenPropertyName]?.length) {
+                        if (model[childrenPropertyName!]?.length) {
                             // Sorting the types alphabetically
-                            model[childrenPropertyName].sort((typeA, typeB) => {
-                                const typeALbl = typeA.label.toLowerCase();
-                                const typeBLbl = typeB.label.toLowerCase();
-                                return typeALbl < typeBLbl
-                                    ? -1
-                                    : typeALbl > typeBLbl
-                                    ? 1
-                                    : 0;
-                            });
+                            model[childrenPropertyName!].sort(
+                                (typeA: any, typeB: any) => {
+                                    const typeALbl = typeA.label.toLowerCase();
+                                    const typeBLbl = typeB.label.toLowerCase();
+                                    return typeALbl < typeBLbl
+                                        ? -1
+                                        : typeALbl > typeBLbl
+                                        ? 1
+                                        : 0;
+                                }
+                            );
                         }
                     // eslint-disable-next-line no-fallthrough
                     default:
                         if (
-                            model[childrenPropertyName] &&
-                            model[childrenPropertyName].length
+                            model[childrenPropertyName!] &&
+                            model[childrenPropertyName!].length
                         ) {
                             const amfTopicId = this.getFormattedIdentifier(
                                 referenceId,
@@ -643,8 +657,8 @@ export default class AmfReference extends LightningElement {
                                     this.metadata[amfTopicId]?.meta
                                 ),
                                 isExpanded: expandChildren,
-                                children: model[childrenPropertyName].map(
-                                    (topic) => {
+                                children: model[childrenPropertyName!].map(
+                                    (topic: any) => {
                                         const meta = this.addToMetadata(
                                             parentReferencePath,
                                             referenceId,
@@ -681,12 +695,18 @@ export default class AmfReference extends LightningElement {
         type: string,
         topic: { id: string; domId: string },
         navTitle: string
-    ): string | undefined {
-        const { urlIdentifer, prefix } = URL_CONFIG[type];
+    ): string {
+        const config = URL_CONFIG[type as keyof typeof URL_CONFIG];
+        const urlIdentifer = config.urlIdentifer;
+        let prefix = null;
+        if ("prefix" in config) {
+            prefix = config.prefix;
+        }
 
         // encodeURI to avoid special characters in the URL meta.
         const identifier =
-            topic[urlIdentifer] && this.encodeIdentifier(topic[urlIdentifer]);
+            urlIdentifer in topic &&
+            this.encodeIdentifier(topic[urlIdentifer as keyof typeof topic]);
         let meta;
         // Assuming that there will be an identifier always
         if (identifier) {
@@ -702,7 +722,7 @@ export default class AmfReference extends LightningElement {
                 navTitle
             };
         }
-        return meta;
+        return meta!;
     }
 
     /**
@@ -713,7 +733,7 @@ export default class AmfReference extends LightningElement {
             (metadata: AmfMetadataTopic) => {
                 return routeMeta.meta === metadata.meta;
             }
-        );
+        )!;
     }
 
     /**
@@ -727,7 +747,7 @@ export default class AmfReference extends LightningElement {
         return Object.values(this.metadata).find(
             (metadata: AmfMetadataTopic) =>
                 referenceId === metadata.referenceId && amfId === metadata.amfId
-        );
+        )!;
     }
 
     /**
@@ -742,7 +762,7 @@ export default class AmfReference extends LightningElement {
             (metadata: AmfMetadataTopic) =>
                 referenceId === metadata.referenceId &&
                 identifier === metadata.identifier
-        );
+        )!;
     }
 
     /**
@@ -756,7 +776,7 @@ export default class AmfReference extends LightningElement {
         return Object.values(this.metadata).find(
             (metadata: AmfMetadataTopic) =>
                 referenceId === metadata.referenceId && type === metadata.type
-        );
+        )!;
     }
 
     /**
@@ -833,9 +853,8 @@ export default class AmfReference extends LightningElement {
             this._currentReferenceId
         );
         if (specBasedReference) {
-            const currentMeta: RouteMeta | null = this.getReferenceMetaInfo(
-                window.location.href
-            );
+            const currentMeta: RouteMeta | undefined =
+                this.getReferenceMetaInfo(window.location.href);
             const metadata =
                 currentMeta && this.getMetadataByUrlQuery(currentMeta);
             if (metadata) {
@@ -871,7 +890,7 @@ export default class AmfReference extends LightningElement {
             this._currentReferenceId
         );
         if (specBasedReference) {
-            const { meta } = this.selectedTopic;
+            const { meta } = this.selectedTopic!;
             const metadata = this.metadata[meta];
             if (metadata) {
                 const {
@@ -988,7 +1007,7 @@ export default class AmfReference extends LightningElement {
      * 1. If the url is encoded already
      * 2. If the url is decoded
      */
-    getUrlEncoded(url: string) {
+    getUrlEncoded(url: string): string {
         // if url matches, then return the encoded url.
         if (decodeURIComponent(url) === url) {
             return encodeURIComponent(url);
@@ -1004,7 +1023,7 @@ export default class AmfReference extends LightningElement {
      * For spec based references gets meta parm from url and then topicId & type from meta
      * For markdown based references gets topicId as last html path in the name, meta & type will be empty
      */
-    getReferenceMetaInfo(referenceUrl: string): RouteMeta | undefined {
+    getReferenceMetaInfo(referenceUrl: string | null): RouteMeta | undefined {
         let metaReferenceInfo;
         if (referenceUrl) {
             const referenceId = this.getReferenceIdFromUrl(referenceUrl);
@@ -1046,10 +1065,10 @@ export default class AmfReference extends LightningElement {
         let topicTitle = "";
         for (let i = 0; i < topics.length; i++) {
             const topic = topics[i];
-            const meta = this.getMarkdownReferenceMeta(topic.link.href);
+            const meta = this.getMarkdownReferenceMeta(topic.link!.href);
             const childTopics = topic.children;
             if (meta === topicMeta) {
-                referenceUrl = topic.link.href;
+                referenceUrl = topic.link!.href;
                 topicTitle = topic.label;
             } else if (childTopics && childTopics.length) {
                 const referenceDetails = this.getReferenceDetailsInGivenTopics(
@@ -1160,7 +1179,7 @@ export default class AmfReference extends LightningElement {
                 }
             });
         } else {
-            let invalidTopicReferenceUrl = "";
+            let invalidTopicReferenceUrl: string | null = "";
             if (topicId) {
                 const referenceDetails = this.getRefDetailsForGivenTopicMeta(
                     referenceId,
@@ -1196,7 +1215,7 @@ export default class AmfReference extends LightningElement {
      * set selected sidebar value as a pathname
      */
 
-    private loadMarkdownBasedReference(referenceUrl?: string): void {
+    private loadMarkdownBasedReference(referenceUrl?: string | null): void {
         let referenceId = "";
         const currentUrl = window.location.href;
         if (this.isProjectRootPath()) {
@@ -1210,7 +1229,7 @@ export default class AmfReference extends LightningElement {
              * CASE2: This case is to navigate to respective reference when the user clicked on root item
              * Ex: .../references/markdown-ref should navigate to first topic.
              */
-            referenceId = this.getReferenceIdFromUrl(referenceUrl);
+            referenceId = this.getReferenceIdFromUrl(referenceUrl!);
         } else if (this.isParentReferencePath(currentUrl)) {
             /**
              * CASE3: This case is to navigate to respective reference when the user entered url with reference id
@@ -1239,9 +1258,9 @@ export default class AmfReference extends LightningElement {
             const amfConfig = this.getAmfConfigWithId(referenceId);
             let redirectReferenceUrl = "";
             if (amfConfig) {
-                const childrenItems = amfConfig.topic.children;
+                const childrenItems = amfConfig.topic!.children;
                 if (childrenItems.length > 0) {
-                    redirectReferenceUrl = childrenItems[0].link.href;
+                    redirectReferenceUrl = childrenItems[0].link!.href;
                 }
             }
             if (redirectReferenceUrl) {
@@ -1375,7 +1394,7 @@ export default class AmfReference extends LightningElement {
 
     handleSelectedItem(): void {
         // update topic view
-        const { referenceId, amfId, type } = this.selectedTopic;
+        const { referenceId, amfId, type } = this.selectedTopic!;
 
         // This updates the component in the content section.
         this.topicModel = {

package/src/modules/doc/amfTopic/amfTopic.ts

@@ -8,14 +8,15 @@ import {
     createTypeElement
 } from "./utils";
 import type { TopicModel } from "./types";
+import { Json } from "typings/custom";
 
 export default class AmfTopic extends LightningElement {
-    private _model;
-    private amf;
-    private type;
+    private _model: TopicModel | undefined;
+    private amf: Json;
+    private type: string | undefined;
 
     @api
-    get model(): TopicModel {
+    get model(): TopicModel | undefined {
         return this._model;
     }
 
@@ -41,7 +42,11 @@ export default class AmfTopic extends LightningElement {
     }
 
     update(): void {
-        const container = this.template.querySelector("div.topic-container");
+        if (!this.model) {
+            throw new Error("Amf TopicModel undefined when trying to update");
+        }
+
+        const container = this.template.querySelector("div.topic-container")!;
         const { id } = this.model;
         const type = this.type;
         const amf = this.amf;
@@ -79,7 +84,7 @@ export default class AmfTopic extends LightningElement {
         if (container.firstChild) {
             container.firstChild.remove();
         }
-        container.appendChild(element);
+        container.appendChild(element as Node);
     }
 }
 
@@ -89,6 +94,6 @@ export default class AmfTopic extends LightningElement {
  * @param value JSON Serializable object to clone.
  * @returns A copy of Value. One that has been serialized and parsed via JSON. (Functions, Regex, etc are not preserved.)
  */
-function clone(value): object {
+function clone(value: any): any {
     return JSON.parse(JSON.stringify(value));
 }

package/src/modules/doc/amfTopic/types.ts

@@ -1,4 +1,11 @@
 import { Json } from "typings/custom";
+import { AmfModelParser } from "doc/amfModelParser";
+import {
+    DomainElement,
+    EndPoint,
+    Operation,
+    Shape
+} from "@api-components/amf-helper-mixin";
 
 export type ApiSummaryElement = HTMLElement & {
     amf: Json;
@@ -11,44 +18,39 @@ export type ApiEndpointElement = HTMLElement & {
     inlineMethods: boolean;
     noNavigation: boolean;
     selected: string;
-    endpoint: Json;
+    endpoint: EndPoint;
     noTryIt: boolean;
 };
 
 export type ApiMethodElement = HTMLElement & {
     amf: Json;
     noNavigation: boolean;
-    endpoint: Json;
-    method: Json;
+    endpoint: EndPoint | undefined;
+    method: Operation | undefined;
     noTryIt: boolean;
 };
 
 export type ApiSecurityElement = HTMLElement & {
     amf: Json;
-    security: Json;
+    security: DomainElement | undefined;
 };
 
 export type ApiTypeElement = HTMLElement & {
     amf: Json;
-    type: Json;
+    type?: Shape;
     mediaTypes: Json;
 };
 
 export type ApiDocElement = HTMLElement & {
     amf: Json;
-    shape: Json;
+    shape: DomainElement | undefined;
 };
 
 export type AmfModel = Json;
 
-export interface AmfParser {
-    parse(): void;
-    parsedModel: any;
-}
-
 export interface TopicModel {
     id: string;
     type: string;
     amf: AmfModel;
-    parser: AmfParser;
+    parser: AmfModelParser;
 }

package/src/modules/doc/amfTopic/utils.ts

@@ -1,3 +1,9 @@
+import {
+    DomainElement,
+    EndPoint,
+    Operation,
+    Shape
+} from "@api-components/amf-helper-mixin";
 import type {
     ApiDocElement,
     ApiEndpointElement,
@@ -37,7 +43,7 @@ export function createSummaryElement(amf: Json): HTMLElement {
  */
 export function createEndpointElement(
     amf: Json,
-    endpointModel: Json,
+    endpointModel: EndPoint,
     selected: string
 ): HTMLElement {
     const el: ApiEndpointElement = document.createElement(
@@ -57,8 +63,8 @@ export function createEndpointElement(
  */
 export function createMethodElement(
     amf: Json,
-    endpointMethodModel: Json,
-    methodModel: Json
+    endpointMethodModel: EndPoint | undefined,
+    methodModel: Operation | undefined
 ): HTMLElement {
     const el: ApiMethodElement = document.createElement(
         "api-method-documentation"
@@ -79,7 +85,7 @@ export function createMethodElement(
  */
 export function createSecurityElement(
     amf: Json,
-    securityModel: Json
+    securityModel: DomainElement | undefined
 ): HTMLElement {
     const el: ApiSecurityElement = document.createElement(
         "api-security-documentation"
@@ -98,7 +104,7 @@ export function createSecurityElement(
  */
 export function createTypeElement(
     amf: Json,
-    typeModel: Json,
+    typeModel: Shape | undefined,
     mediaTypes: Json
 ): HTMLElement {
     const el: ApiTypeElement = document.createElement(
@@ -119,7 +125,7 @@ export function createTypeElement(
  */
 export function createDocumentationElement(
     amf: Json,
-    docsModel: Json
+    docsModel: DomainElement | undefined
 ): HTMLElement {
     const el: ApiDocElement = document.createElement(
         "api-documentation-document"

package/src/modules/doc/content/content.ts

@@ -1,11 +1,11 @@
 /* eslint-disable @lwc/lwc/no-inner-html */
 import { createElement, LightningElement, api, track } from "lwc";
 import { DocContent, PageReference } from "typings/custom";
-import ContentCallout from "doc/contentCallout";
 import CodeBlock from "dx/codeBlock";
-import ContentMedia from "doc/contentMedia";
 import Button from "dx/button";
 import { highlightTerms } from "dxUtils/highlight";
+import ContentCallout from "doc/contentCallout";
+import ContentMedia from "doc/contentMedia";
 
 const HIGHLIGHTABLE_SELECTOR = [
     "p",
@@ -86,7 +86,7 @@ export default class Content extends LightningElement {
     }
 
     renderPaginationButton(anchorEl: HTMLElement) {
-        const isNext = anchorEl.textContent.includes("Next →");
+        const isNext = anchorEl.textContent!.includes("Next →");
         anchorEl.innerHTML = "";
         const buttonEl = createElement("dx-button", { is: Button });
         const params = isNext
@@ -116,7 +116,7 @@ export default class Content extends LightningElement {
             const codeBlockEls = divEl.querySelectorAll(".codeSection");
             codeBlockEls.forEach((codeBlockEl) => {
                 codeBlockEl.setAttribute("lwc:dom", "manual");
-                const classList = codeBlockEl.firstChild.classList;
+                const classList = (codeBlockEl.firstChild as any).classList;
                 let language = "";
                 for (const key in classList) {
                     if (typeof classList[key] === "string") {
@@ -160,7 +160,7 @@ export default class Content extends LightningElement {
 
                 let flag = 1;
                 for (let i: number = 0; i < detailEls.length; i++) {
-                    flag &= detailEls[i].innerHTML.trim() === "";
+                    flag &= (detailEls[i].innerHTML.trim() === "") as any; // Dark Magic TM
                 }
 
                 if (flag) {
@@ -170,7 +170,7 @@ export default class Content extends LightningElement {
                     });
                 }
 
-                const type = calloutEl.querySelector("h4").textContent;
+                const type = calloutEl.querySelector("h4")!.textContent!;
                 const typeLower = type.toLowerCase();
                 Object.assign(calloutCompEl, {
                     title: type,
@@ -184,10 +184,10 @@ export default class Content extends LightningElement {
             // Modify links to work with any domain, links that start with "#" are excluded
             const anchorEls = divEl.querySelectorAll("a:not([href^='#'])");
 
-            anchorEls.forEach((anchorEl) => {
+            anchorEls.forEach((anchorEl: any) => {
                 if (
-                    anchorEl.textContent.includes("Next →") ||
-                    anchorEl.textContent.includes("← Previous")
+                    anchorEl.textContent!.includes("Next →") ||
+                    anchorEl.textContent!.includes("← Previous")
                 ) {
                     if (this.showPaginationButtons) {
                         this.renderPaginationButton(anchorEl);
@@ -326,8 +326,7 @@ export default class Content extends LightningElement {
 
     handleNavClick(event: InputEvent) {
         event.preventDefault();
-        // eslint-disable-next-line no-use-before-define
-        const target = event.currentTarget.dataset.id;
+        const target = (event.currentTarget! as any).dataset.id;
         const [page, docId, deliverable, tempContentDocumentId] =
             target.split("/");
         const [contentDocumentId, hash] = tempContentDocumentId.split("#");

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -3,7 +3,7 @@ import { LightningElement, api, track } from "lwc";
 import { closest } from "kagekiri";
 import { toJson } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
-import { SearchSyncer } from "docUtils/SearchSyncer";
+import { SearchSyncer } from "docUtils/searchSyncer";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
@@ -26,9 +26,9 @@ const HIGHLIGHTABLE_SELECTOR = [
 export const OBSERVER_ATTACH_WAIT_TIME = 500;
 
 export default class ContentLayout extends LightningElement {
-    @api sidebarValue: string;
-    @api sidebarHeader: string;
-    @api tocTitle: string;
+    @api sidebarValue!: string;
+    @api sidebarHeader!: string;
+    @api tocTitle!: string;
     @api enableSlotChange = false;
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
@@ -41,7 +41,7 @@ export default class ContentLayout extends LightningElement {
         return this._breadcrumbs;
     }
 
-    set breadcrumbs(value): [] {
+    set breadcrumbs(value) {
         if (value) {
             this._breadcrumbs = toJson(value);
         }
@@ -52,7 +52,7 @@ export default class ContentLayout extends LightningElement {
         return this._sidebarContent;
     }
 
-    set sidebarContent(value) {
+    set sidebarContent(value: any) {
         this._sidebarContent = toJson(value);
     }
 
@@ -67,7 +67,9 @@ export default class ContentLayout extends LightningElement {
 
     @api
     setSidebarInputValue(searchTerm: string): void {
-        this.template.querySelector("dx-sidebar")?.setInputValue(searchTerm);
+        (this.template.querySelector("dx-sidebar") as any)?.setInputValue(
+            searchTerm
+        );
     }
 
     @track
@@ -76,11 +78,11 @@ export default class ContentLayout extends LightningElement {
     private _breadcrumbs = null;
 
     @track
-    private _tocOptions: Array<unknown>;
+    private _tocOptions!: Array<unknown>;
 
     private tocOptionIdsSet = new Set();
     private anchoredElements: AnchorMap = {};
-    private lastScrollPosition: number;
+    private lastScrollPosition!: number;
     private observer?: IntersectionObserver;
     private hasRendered: boolean = false;
     private contentLoaded: boolean = false;
@@ -105,7 +107,8 @@ export default class ContentLayout extends LightningElement {
         target: window
     });
     private tocValue?: string = undefined;
-    private observerTimerId = null;
+    // eslint-disable-next-line no-undef
+    private observerTimerId?: NodeJS.Timeout;
     private didScrollToSelectedHash = false;
     private _scrollInterval = 0;
 
@@ -203,9 +206,9 @@ export default class ContentLayout extends LightningElement {
             ".sticky-doc-header"
         ) as HTMLElement;
 
-        const docPhaseEl = this.template
-            .querySelector("[name=doc-phase]")!
-            .assignedElements()[0] as HTMLSlotElement;
+        const docPhaseEl = (
+            this.template.querySelector("[name=doc-phase]")! as any
+        ).assignedElements()[0] as HTMLSlotElement;
 
         if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
             console.warn("One or more required elements are missing.");
@@ -247,7 +250,7 @@ export default class ContentLayout extends LightningElement {
                     document.querySelectorAll("doc-heading")
                 );
                 docHeadingEls.forEach((docHeadingEl) => {
-                    docHeadingEl.style.scrollMarginTop = `${
+                    (docHeadingEl as any).style.scrollMarginTop = `${
                         globalNavHeight +
                         docHeaderHeight +
                         docPhaseEl.getBoundingClientRect().height
@@ -255,9 +258,8 @@ export default class ContentLayout extends LightningElement {
                 });
 
                 // Adjust right nav bar position when doc phase is present
-                const rightNavBarEl = this.template.querySelector(
-                    ".right-nav-bar"
-                );
+                const rightNavBarEl =
+                    this.template.querySelector(".right-nav-bar");
 
                 if (rightNavBarEl) {
                     rightNavBarEl.style.top = `${
@@ -291,7 +293,7 @@ export default class ContentLayout extends LightningElement {
                 entries.forEach(
                     (entry) =>
                         (this.anchoredElements[
-                            entry.target.getAttribute("id")
+                            entry.target.getAttribute("id")!
                         ].intersect = entry.isIntersecting)
                 );
                 this.calculateActualSection();
@@ -303,10 +305,9 @@ export default class ContentLayout extends LightningElement {
 
         // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
         const headingElements = document.querySelectorAll(TOC_HEADER_TAG);
-
-        for (const headingElement of headingElements) {
+        for (const headingElement of headingElements as any) {
             // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
-            const id = headingElement.getAttribute("id");
+            const id = headingElement.getAttribute("id")!;
             this.anchoredElements[id] = {
                 id,
                 intersect: false
@@ -320,23 +321,26 @@ export default class ContentLayout extends LightningElement {
     };
 
     onSlotChange(event: Event): void {
-        const slotElements = (event.target as HTMLSlotElement).assignedElements();
+        const slotElements = (
+            event.target as HTMLSlotElement
+        ).assignedElements();
 
         if (slotElements.length) {
             this.contentLoaded = true;
             const slotContentElement = slotElements[0];
-            const headingElements = slotContentElement.ownerDocument?.getElementsByTagName(
-                TOC_HEADER_TAG
-            );
+            const headingElements =
+                slotContentElement.ownerDocument?.getElementsByTagName(
+                    TOC_HEADER_TAG
+                );
 
-            for (const headingElement of headingElements) {
+            for (const headingElement of headingElements as any) {
                 // Sometimes elements hash is not being set when slot content is wrapped with div
                 headingElement.hash = headingElement.attributes.hash?.nodeValue;
             }
 
             const tocOptions = [];
 
-            for (const headingElement of headingElements) {
+            for (const headingElement of headingElements as any) {
                 headingElement.id = headingElement.hash;
 
                 // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
@@ -362,7 +366,7 @@ export default class ContentLayout extends LightningElement {
     private disconnectObserver(): void {
         if (this.observer) {
             this.observer.disconnect();
-            this.observer = null;
+            this.observer = undefined;
         }
     }
 
@@ -387,15 +391,15 @@ export default class ContentLayout extends LightningElement {
                 globalNavEl.offsetHeight +
                 contextNavEl.offsetHeight;
 
-            const docPhaseEl = this.template
-                .querySelector("[name=doc-phase]")!
-                .assignedElements()[0] as HTMLSlotElement;
+            const docPhaseEl = (
+                this.template.querySelector("[name=doc-phase]")! as any
+            ).assignedElements()[0] as HTMLSlotElement;
 
             const offset = docPhaseEl
                 ? headerHeight + docPhaseEl.offsetHeight
                 : headerHeight;
 
-            for (const headingElement of headingElements) {
+            for (const headingElement of headingElements as any) {
                 if (headingElement.getAttribute("id") === hash) {
                     this.scrollIntoViewWithOffset(headingElement, offset);
                     break;
@@ -432,14 +436,14 @@ export default class ContentLayout extends LightningElement {
         this.lastScrollPosition = currentScrollPosition;
     }
 
-    private calculatePreviousElementId(): string {
+    private calculatePreviousElementId(): string | undefined {
         const keys = Object.keys(this.anchoredElements);
         const currentIndex = keys.findIndex((id) => this.tocValue === id);
 
         return currentIndex > 0 ? keys[currentIndex - 1] : undefined;
     }
 
-    private assignElementId(id: string): void {
+    private assignElementId(id: string | undefined): void {
         // Change toc(RNB) highlight only for H2
         if (this.tocOptionIdsSet.has(id)) {
             this.tocValue = id;

package/src/modules/doc/heading/heading.ts

@@ -11,12 +11,14 @@ export const ariaLevels = Object.keys(ariaDisplayLevels);
 
 export const displayLevels = Object.values(ariaDisplayLevels);
 
+// @ts-ignore: Really Dark Magic (TM) to do with ariaLevel needing explicit getter/setters
 export default class Heading extends LightningElement {
     @api title: string = "";
     @api hash: string | null = null;
 
     @api
     private get ariaLevel(): string {
+        // Really Dark Magic (TM)
         return this._ariaLevel || "2";
     }
     private set ariaLevel(value: string | null) {

package/src/modules/doc/toc/toc.ts

@@ -11,7 +11,7 @@ export default class Toc extends LightningElement {
         const newPageReference = { ...this.pageReference };
         // When moving to the new navigation component
         //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";
         newPageReference.hash = target[1];
         this.dispatchEvent(

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

@@ -64,7 +64,7 @@ export interface Header extends Element {
     bailHref: string;
     bailLabel: string;
     languages: Array<DocLanguage>;
-    language: string;
+    language?: string;
     headerHref: string;
 }
 

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

@@ -12,15 +12,15 @@ import {
     PageReference,
     TocMap
 } from "./types";
-import { SearchSyncer } from "docUtils/SearchSyncer";
 import { LightningElementWithState } from "docBaseElements/lightningElementWithState";
 import { oldVersionDocInfo } from "docUtils/utils";
 import { Breadcrumb, DocPhaseInfo, Language } from "typings/custom";
 import { track as trackGTM } from "dxUtils/analytics";
 import { CoveoAnalyticsClient } from "coveo.analytics";
+import { SearchSyncer } from "docUtils/searchSyncer";
 
 // TODO: Imitating from actual implementation as doc-content use it like this. We should refactor it later.
-const handleContentError = (error): void => console.log(error);
+const handleContentError = (error: any): void => console.log(error);
 
 const PIXEL_PER_CHARACTER_MAP: { [key: string]: number } = {
     default: 7.7,
@@ -31,6 +31,7 @@ export default class DocXmlContent extends LightningElementWithState<{
     isFetchingDocument: boolean;
     isFetchingContent: boolean;
     lastHighlightedSearch: string;
+    internalLinkClicked: boolean;
 }> {
     @api apiDomain = "https://developer.salesforce.com";
     @api coveoOrganizationId!: string;
@@ -60,14 +61,14 @@ export default class DocXmlContent extends LightningElementWithState<{
 
     private availableLanguages: Array<DocLanguage> = [];
     private availableVersions: Array<DocVersion> = [];
-    private contentProvider: FetchContent;
+    private contentProvider?: FetchContent;
     private docContent = "";
-    private language: DocLanguage = null;
+    private language?: DocLanguage | null = null;
     private loaded = false;
     private pdfUrl = "";
     private tocMap: TocMap = {};
-    private sidebarContent: Array<TreeNode> = null;
-    private version: DocVersion = null;
+    private sidebarContent: Array<TreeNode> | null = null;
+    private version: DocVersion | null = null;
     private docTitle = "";
     private _pathName = "";
     private _pageHeader?: Header;
@@ -174,8 +175,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     renderedCallback(): void {
         this.setState({ internalLinkClicked: true });
         const urlSectionLink =
-            this.pageReference?.hash?.split("#").length > 1
-                ? this.pageReference.hash.split("#")[1]
+            this.pageReference?.hash?.split("#").length! > 1
+                ? this.pageReference.hash!.split("#")[1]
                 : this.pageReference?.hash;
 
         const contentEl = this.template.querySelector("doc-content");
@@ -223,15 +224,15 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
     }
 
-    private get languageId(): string {
-        return this.language.id.replace("-", "_");
+    private get languageId(): string | undefined {
+        return this.language?.id.replace("-", "_");
     }
 
-    private get releaseVersionId(): string {
-        return this.version.id;
+    private get releaseVersionId(): string | undefined {
+        return this.version?.id;
     }
 
-    private get deliverable(): string {
+    private get deliverable(): string | undefined {
         return this.pageReference.deliverable;
     }
 
@@ -252,10 +253,11 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private get coveoAdvancedQueryConfig(): CoveoAdvancedQueryXMLConfig {
-        const config: { locale: string; topicid: string; version?: string } = {
-            locale: this.languageId,
-            topicid: this.deliverable
-        };
+        const config: { locale?: string; topicid?: string; version?: string } =
+            {
+                locale: this.languageId,
+                topicid: this.deliverable
+            };
 
         if (this.releaseVersionId && this.releaseVersionId !== "noversion") {
             config.version = this.releaseVersionId;
@@ -266,7 +268,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
     private get pageHeader(): Header {
         if (!this._pageHeader) {
-            this._pageHeader = document.querySelector("doc-header");
+            this._pageHeader = document.querySelector("doc-header")!;
         }
 
         return this._pageHeader;
@@ -309,7 +311,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
     private get breadcrumbPixelPerCharacter() {
         return (
-            PIXEL_PER_CHARACTER_MAP[this.language.id] ||
+            PIXEL_PER_CHARACTER_MAP[this.language!.id] ||
             PIXEL_PER_CHARACTER_MAP.default
         );
     }
@@ -358,7 +360,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.updateUrl();
     }
 
-    handleLanguageChange = (event: CustomEvent<string>): Promise<void> => {
+    handleLanguageChange = (event: any) => {
         if (this.language && this.language.id === event.detail) {
             return;
         }
@@ -366,7 +368,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.language = this.availableLanguages.find(
             ({ id }) => id === event.detail
         );
-        this.pageReference.docId = this.language.url;
+        this.pageReference.docId = this.language!.url;
 
         trackGTM(event.target!, "custEv_ctaLinkClick", {
             click_text: event.detail,
@@ -453,8 +455,8 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.setState({
             isFetchingDocument: true
         });
-        const data = await this.contentProvider.fetchDocumentData(
-            this.pageReference.docId
+        const data = await this.contentProvider!.fetchDocumentData(
+            this.pageReference.docId!
         );
 
         // This could be a 404 scenario.
@@ -517,12 +519,12 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.setState({
             isFetchingContent: true
         });
-        const data = await this.contentProvider.fetchContent(
-            this.pageReference.deliverable,
-            this.pageReference.contentDocumentId,
+        const data = await this.contentProvider!.fetchContent(
+            this.pageReference.deliverable!,
+            this.pageReference.contentDocumentId!,
             {
-                language: this.language.id,
-                version: this.version.id
+                language: this.language!.id,
+                version: this.version!.id
             }
         );
 
@@ -586,23 +588,26 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private updateSearchInput(searchParam: string): void {
-        this.template
-            .querySelector("doc-content-layout")
-            ?.setSidebarInputValue(searchParam);
+        (
+            this.template.querySelector("doc-content-layout") as any
+        )?.setSidebarInputValue(searchParam);
     }
 
     private pageReferenceToString(reference: PageReference): string {
         const { page, docId, deliverable, contentDocumentId, hash, search } =
             reference;
         return `/${page}/${docId}/${deliverable}/${contentDocumentId}${this.normalizeSearch(
-            search
+            search!
         )}${this.normalizeHash(hash)}`;
     }
 
-    private normalizeUrlPart(part: string, sentinel: string): string {
+    private normalizeUrlPart(
+        part: string | undefined,
+        sentinel: string
+    ): string {
         return (
             (part &&
-                (part.startsWith(sentinel) ? part : `${sentinel}${part}`)) ||
+                (part.startsWith(sentinel!) ? part : `${sentinel}${part}`)) ||
             ""
         );
     }
@@ -611,16 +616,16 @@ export default class DocXmlContent extends LightningElementWithState<{
         return this.normalizeUrlPart(search, "?");
     }
 
-    private normalizeHash(hash: string): string {
+    private normalizeHash(hash?: string): string {
         return this.normalizeUrlPart(hash, "#");
     }
 
     private getComposedTitle(
-        topicTitle: string | undefined,
+        topicTitle: string | null | undefined,
         docTitle: string | undefined
     ): string {
         // map to avoid duplicates
-        const titleMap = {};
+        const titleMap: { [key: string]: any } = {};
         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
@@ -757,7 +762,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         const headTag = document.getElementsByTagName("head");
         // this checks if the selected version is not the latest version,
         // then it adds the noindex, follow meta tag to the older version pages.
-        const versionId = this.version.id;
+        const versionId = this.version!.id;
         const docId = this.pageReference.docId;
 
         // SEO fix:

package/src/modules/docUtils/{SearchSyncer/SearchSyncer.ts → searchSyncer/searchSyncer.ts}

@@ -47,6 +47,7 @@ export class SearchSyncer {
             this.handleSearchChange
         );
         this.target.removeEventListener("popstate", this.handlePopState);
+        // @ts-ignore
         this.target = undefined;
         this.callbacks.onSearchChange = undefined;
         this.callbacks.onUrlChange = undefined;