@salesforcedevs/arch-components 1.20.17-alpha2 → 1.20.17-alpha3

package/src/modules/tds/summary/__tests__/summary.test.ts

@@ -7,13 +7,13 @@ customElements.define('tds-summary', Summary.CustomElementConstructor);
 describe('tds-content-brick', () => {
     describe('compact (string)', () => {
         it('shows the description ', () => {
-            let element = renderIntoBody(html`
+            const element = renderIntoBody(html`
                 <tds-summary description="Hello"></tds-summary>
             `);
             expect(element.shadowRoot!.innerHTML).toContain('Hello');
         });
         it('hides the description (string)', () => {
-            let element = renderIntoBody(html`
+            const element = renderIntoBody(html`
                 <tds-summary compact description="Hello"></tds-summary>
             `);
             expect(element.shadowRoot!.innerHTML).not.toContain('Hello');
@@ -21,7 +21,7 @@ describe('tds-content-brick', () => {
     });
     describe('compact (bool)', () => {
         it('shows the description (string)', () => {
-            let element = renderIntoBody(html`
+            const element = renderIntoBody(html`
                 <tds-summary
                     .compact=${false}
                     description="Hello"
@@ -30,7 +30,7 @@ describe('tds-content-brick', () => {
             expect(element.shadowRoot!.innerHTML).toContain('Hello');
         });
         it('hides the description (bool)', () => {
-            let element = renderIntoBody(html`
+            const element = renderIntoBody(html`
                 <tds-summary .compact=${true} description="Hello"></tds-summary>
             `);
             expect(element.shadowRoot!.innerHTML).not.toContain('Hello');
@@ -38,15 +38,15 @@ describe('tds-content-brick', () => {
     });
     // Skip this test as LWC in test mode doesn't support dynamic slot content with conditional rendering
     it.skip('hides the header if no slots are filled', async () => {
-        let template = ({ showImage, showAction }: any = {}) => html`
+        const template = ({ showImage, showAction }: any = {}) => html`
             <tds-summary>
                 ${showImage ? html` <img slot="image" /> ` : null}
                 ${showAction ? html` <button slot="action" /> ` : null}
             </tds-summary>
         `;
-        let element = renderIntoBody(template());
-        let header = element.shadowRoot!.querySelector('.header');
-        let isHidden = () =>
+        const element = renderIntoBody(template());
+        const header = element.shadowRoot!.querySelector('.header');
+        const isHidden = () =>
             header!.matches(
                 '.summary:not([data-slots*="image"]):not([data-slots*="action"]) .header'
             );
@@ -59,15 +59,15 @@ describe('tds-content-brick', () => {
         expect(isHidden()).toBe(false);
     });
     it.skip('hides the footer if no slots are filled', async () => {
-        let template = ({ showMetaLeft, showMetaRight }: any = {}) => html`
+        const template = ({ showMetaLeft, showMetaRight }: any = {}) => html`
             <tds-summary>
                 ${showMetaLeft ? html` <span slot="meta-left" /> ` : null}
                 ${showMetaRight ? html` <span slot="meta-right" /> ` : null}
             </tds-summary>
         `;
-        let element = renderIntoBody(template());
-        let footer = element.shadowRoot!.querySelector('.footer');
-        let isHidden = () =>
+        const element = renderIntoBody(template());
+        const footer = element.shadowRoot!.querySelector('.footer');
+        const isHidden = () =>
             footer!.matches('.summary:not([data-slots*="meta"]) .footer');
         expect(isHidden()).toBe(true);
         render(template({ showMetaLeft: true }), element.parentElement!);
@@ -80,7 +80,7 @@ describe('tds-content-brick', () => {
     describe('titleMode', () => {
         describe('anchor', () => {
             it('renders the correct element', () => {
-                let element = renderIntoBody(html`
+                const element = renderIntoBody(html`
                     <tds-summary
                         description="Hello"
                         path="/"
@@ -92,7 +92,7 @@ describe('tds-content-brick', () => {
                 ).toBe('A');
             });
             it('renders a button if no path is specified', () => {
-                let element = renderIntoBody(
+                const element = renderIntoBody(
                     html`
                         <tds-summary
                             title="Hello"
@@ -107,7 +107,7 @@ describe('tds-content-brick', () => {
         });
         describe('button', () => {
             it('renders the correct element', () => {
-                let element = renderIntoBody(html`
+                const element = renderIntoBody(html`
                     <tds-summary
                         description="Hello"
                         title-mode="button"
@@ -120,7 +120,7 @@ describe('tds-content-brick', () => {
         });
         describe('text', () => {
             it('renders the correct element', () => {
-                let element = renderIntoBody(html`
+                const element = renderIntoBody(html`
                     <tds-summary
                         description="Hello"
                         title-mode="text"

package/src/modules/tds/summary/summary.ts

@@ -59,10 +59,10 @@ export default class extends LightningElement {
     };
 
     private onSlotChange() {
-        let slots = Array.from(
+        const slots = Array.from(
             this.template.querySelectorAll('slot')
         ) as HTMLSlotElement[];
-        let slotNames = slots
+        const slotNames = slots
             .filter((slot) => slot.assignedNodes()[0])
             .map((slot) => slot.getAttribute('name'))
             .join(' ');

package/src/modules/tds/themeProvider/themeProvider.ts

@@ -16,18 +16,18 @@ export default class extends LightningElement {
         /* ROLLUP_PLATFORM
     return;
     */
-        if (this.fonts) appendStyleSheet(`${this.assetsUrl}/css/tds.css`);
+        if (this.fonts) {appendStyleSheet(`${this.assetsUrl}/css/tds.css`);}
     }
 }
 
 function appendStyleSheet(href: string) {
-    let exists = Array.from(document.querySelectorAll('link')).some(
+    const exists = Array.from(document.querySelectorAll('link')).some(
         (n) => n.href === href
     );
-    if (exists) return;
+    if (exists) {return;}
     document.head.appendChild(
         (() => {
-            let element = document.createElement('link');
+            const element = document.createElement('link');
             element.href = href;
             element.rel = 'stylesheet';
             element.type = 'text/css';

package/src/modules/th/favoriteButton/__tests__/favoriteButton.test.ts

@@ -10,7 +10,7 @@ const elementName = 'th-favorite-button';
 customElements.define(elementName, FavoriteButton.CustomElementConstructor);
 
 describe(elementName, () => {
-    let urls = mock.requestUrls(String(process.env.API_HOST));
+    const urls = mock.requestUrls(String(process.env.API_HOST));
 
     afterEach(() => {
         jest.clearAllMocks();

package/src/modules/th/favoriteButton/mocks/index.ts

@@ -7,6 +7,6 @@ export function requestUrls(baseUrl: string = '') {
 }
 
 export function mockResponse(url: string) {
-    let urls = requestUrls();
-    if (url.includes(urls.favorites)) return JSON.stringify({});
+    const urls = requestUrls();
+    if (url.includes(urls.favorites)) {return JSON.stringify({});}
 }

package/src/modules/th/search/__tests__/search.test.ts

@@ -14,7 +14,7 @@ process.env.API_HOST = 'https://www.trailhead.com';
 
 customElements.define('th-search', Search.CustomElementConstructor);
 
-let location = {};
+const location = {};
 
 Object.defineProperty(window, 'location', {
     get: () => location
@@ -27,7 +27,7 @@ Object.defineProperty(window.location, 'replace', {
 });
 
 describe('th-search', () => {
-    let urls = mock.requestUrls(String(process.env.API_HOST));
+    const urls = mock.requestUrls(String(process.env.API_HOST));
 
     beforeEach(() => {
         window.location.href = '/';

package/src/modules/th/search/mocks/index.ts

@@ -17,7 +17,7 @@ export function shouldMockResponse(url: string) {
 }
 
 export function mockResponse(url: string) {
-    let urls = requestUrls();
+    const urls = requestUrls();
     if (url.includes(urls.recents)) {
         return JSON.stringify(responses.recents);
     }

package/src/modules/th/search/search.ts

@@ -37,48 +37,48 @@ export default class extends LightningElement {
     private defaultCompletionTerms = '';
 
     private getCompletions = debounce(async (terms: string) => {
-        let { completionController: prevController, config } = this;
-        if (prevController) prevController.abort();
-        if (!config) return;
+        const { completionController: prevController, config } = this;
+        if (prevController) {prevController.abort();}
+        if (!config) {return;}
         if (!terms.length) {
             this.completions = [];
             return;
         }
-        let controller = (this.completionController = new AbortController());
-        let accessToken = await this.getAccessToken();
-        let url = getCompletionsUrl({
+        const controller = (this.completionController = new AbortController());
+        const accessToken = await this.getAccessToken();
+        const url = getCompletionsUrl({
             accessToken,
             baseUrl: config.coveo.querySuggestUrl,
             locale: config.coveo.locale,
             terms
         });
-        let { completions } = await getJSON<{ completions: CoveoCompletion[] }>(
+        const { completions } = await getJSON<{ completions: CoveoCompletion[] }>(
             url,
             { signal: controller.signal }
         );
         if (this.completionTerms === terms)
-            this.completions = completions.map((c) => ({
+            {this.completions = completions.map((c) => ({
                 value: c.expression,
                 valueHighlighted: c.highlighted
-            }));
+            }));}
     }, 250);
 
     private recents: RecentSection[] | null = null;
 
     private async getAccessToken() {
-        if (this.accessToken) return this.accessToken;
-        let { token } = await this.client.post<{ token: string }>(TOKEN_PATH);
+        if (this.accessToken) {return this.accessToken;}
+        const { token } = await this.client.post<{ token: string }>(TOKEN_PATH);
         this.accessToken = token;
         return token;
     }
 
     private async getRecents() {
-        let { config } = this;
+        const { config } = this;
         try {
-            let { recents } = await this.client.get<{ recents: UserRecent[] }>(
+            const { recents } = await this.client.get<{ recents: UserRecent[] }>(
                 RECENTS_PATH
             );
-            let { recent_favorite, recent_item } = recents.reduce<
+            const { recent_favorite, recent_item } = recents.reduce<
                 {
                     [type in UserRecent['type']]: UserRecent[];
                 }
@@ -102,7 +102,7 @@ export default class extends LightningElement {
     }
 
     private onFocus(e: FocusEvent) {
-        if (!this.recents) this.getRecents();
+        if (!this.recents) {this.getRecents();}
     }
 
     private onChange(e: CustomEvent<{ value: string }>) {
@@ -111,10 +111,10 @@ export default class extends LightningElement {
     }
 
     private onSearch(e: CustomEvent<SearchEvent>) {
-        let { config } = this;
+        const { config } = this;
         switch (e.detail.type) {
             case 'completion': {
-                let query = new URLSearchParams({
+                const query = new URLSearchParams({
                     keywords: e.detail.value.value,
                     suggested: 'true'
                 }).toString();
@@ -122,7 +122,7 @@ export default class extends LightningElement {
                 break;
             }
             case 'input': {
-                let query = new URLSearchParams({
+                const query = new URLSearchParams({
                     keywords: e.detail.value
                 }).toString();
                 window.location.href = `${config!.searchUrl}?${query}`;
@@ -136,7 +136,7 @@ export default class extends LightningElement {
     }
 
     connectedCallback() {
-        let params = new URLSearchParams(window.location.search);
+        const params = new URLSearchParams(window.location.search);
         if (params.has('keywords')) {
             this.defaultCompletionTerms = params.get('keywords')!;
         }
@@ -150,8 +150,8 @@ function getCompletionsUrl(params: {
     terms: string;
 }) {
     let { accessToken, baseUrl, locale, terms } = { ...params };
-    if (!/^http/.test(baseUrl)) baseUrl = `${process.env.API_HOST}${baseUrl}`;
-    let query = new URLSearchParams({
+    if (!/^http/.test(baseUrl)) {baseUrl = `${process.env.API_HOST}${baseUrl}`;}
+    const query = new URLSearchParams({
         access_token: accessToken,
         count: '10',
         enableWordCompletion: 'true',

package/src/modules/tm/card/card.ts

@@ -53,12 +53,12 @@ export default class extends LightningElement {
     private cardId: string = '';
 
     private get imgStyle() {
-        if (!this.imgSrc) return '';
-        let style: string[] = [];
+        if (!this.imgSrc) {return '';}
+        const style: string[] = [];
         const { imgVariantResponsive: variant, imgSrc } = this;
 
         if (variant.includes('cover')) {
-            let image = imgSrc;
+            const image = imgSrc;
 
             // Use the original image if it's a remote image or WebP
             /* if (!this.isRemoteImage && !imgSrc.includes('webp')) {
@@ -85,29 +85,29 @@ export default class extends LightningElement {
     private get imgSrcSetWebP() {
         if (this.isRemoteImage) {
             return this.imgSrc;
-        } else {
+        } 
             const imgType = this.imgSrc?.split('.').pop();
             const imgName = this.imgSrc?.replace(`.${imgType}`, '');
-            let srcSet: string[] = [];
+            const srcSet: string[] = [];
             widths.forEach((width) => {
                 srcSet.push(`${imgName}-${width}w.webp ${width}w`);
             });
             return srcSet.join(',');
-        }
+        
     }
 
     private get imgSrcSetJpg() {
         if (this.isRemoteImage) {
             return this.imgSrc;
-        } else {
+        } 
             const imgType = this.imgSrc?.split('.').pop();
             const imgName = this.imgSrc?.replace(`.${imgType}`, '');
-            let srcSet: string[] = [];
+            const srcSet: string[] = [];
             widths.forEach((width) => {
                 srcSet.push(`${imgName}-${width}w.jpg ${width}w`);
             });
             return srcSet.join(',');
-        }
+        
     }
 
     private get imgTagNoSvg() {
@@ -127,7 +127,7 @@ export default class extends LightningElement {
     }
 
     private get imgVariantResponsive() {
-        if (!this.snapToTop) return this.imgVariant;
+        if (!this.snapToTop) {return this.imgVariant;}
         return String(this.imgVariant).replace(/left|right/, 'top');
     }
 
@@ -182,10 +182,10 @@ export default class extends LightningElement {
             element
         );
 
-        let { ctaHref, ctaTarget } = this;
+        const { ctaHref, ctaTarget } = this;
         if (ctaHref) {
-            if (ctaTarget) window.open(ctaHref, ctaTarget);
-            else window.location.href = ctaHref;
+            if (ctaTarget) {window.open(ctaHref, ctaTarget);}
+            else {window.location.href = ctaHref;}
         }
         this.trackLinkClick(e, true);
     }
@@ -243,8 +243,8 @@ export default class extends LightningElement {
             this.trackLinkClick(e as unknown as MouseEvent, false);
             e.preventDefault();
             if (this.ctaHref) {
-                if (this.ctaTarget) window.open(this.ctaHref, this.ctaTarget);
-                else window.location.href = this.ctaHref;
+                if (this.ctaTarget) {window.open(this.ctaHref, this.ctaTarget);}
+                else {window.location.href = this.ctaHref;}
             }
         }
     }

package/src/modules/tm/content/content.ts

@@ -41,7 +41,7 @@ export default class extends LightningElement {
         this.setContent();
         const that = this;
         window.addEventListener('hashchange', function locationHashChanged() {
-            let heading: HTMLElement | null = that.template.querySelector(`[id="${window.location.hash.substring(1)}"]`);
+            const heading: HTMLElement | null = that.template.querySelector(`[id="${window.location.hash.substring(1)}"]`);
             if (heading) {
                 heading.style.scrollMarginTop = `var(--dx-g-global-header-height)`; // required adjustment for global nav
                 heading.scrollIntoView({
@@ -60,12 +60,12 @@ export default class extends LightningElement {
         if (!this.didSetContent) {
             this.didSetContent = true;
             this.setContent();
-            if (window.location.hash) this.scrollToHash(window.location.hash);
+            if (window.location.hash) {this.scrollToHash(window.location.hash);}
         }
     }
 
     private onHeadingClick(e: MouseEvent) {
-        let anchor = e.currentTarget as HTMLAnchorElement;
+        const anchor = e.currentTarget as HTMLAnchorElement;
         this.scrollToHash(anchor.hash);
     }
 
@@ -82,12 +82,12 @@ export default class extends LightningElement {
                 href || '',
                 window.location.protocol + '//' + window.location.host
             );
-            let filename = url.pathname.substr(
+            const filename = url.pathname.substr(
                 url.pathname.lastIndexOf('/') + 1
             );
 
             if (anchorEl.hasAttribute('download') || filename.includes('.')) {
-                let regexImg = new RegExp(/[^\s]+(.*?).(jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF|webp)$/);
+                const regexImg = new RegExp(/[^\s]+(.*?).(jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF|webp)$/);
                 if (regexImg.test(filename)) {
                     sendInteractionEvent('Image Click', InteractionEventTypes.IMAGE_CLICK, e, element)
                 } else {
@@ -100,7 +100,7 @@ export default class extends LightningElement {
     }
 
     private scrollToHash(hash: string) {
-        let heading: HTMLElement | null = this.template.querySelector(`[id="${hash.split('?')[0].substring(1)}"]`);
+        const heading: HTMLElement | null = this.template.querySelector(`[id="${hash.split('?')[0].substring(1)}"]`);
         if (heading) {
             heading.style.scrollMarginTop = `var(--dx-g-global-header-height)`; // required adjustment for global nav
             heading.scrollIntoView({
@@ -111,7 +111,7 @@ export default class extends LightningElement {
     }
 
     private setContent() {
-        let main = this.template.querySelector('main');
+        const main = this.template.querySelector('main');
         if (main) {
             main.innerHTML = this.template.host.innerHTML.replace(
                 /(<table>[\s\S]+?<\/table>)/g,
@@ -119,10 +119,10 @@ export default class extends LightningElement {
             );
             this.headings = Array.from(main.querySelectorAll('h2,h3')).map(
                 (n) => {
-                    let label = (n as HTMLElement).innerText.trim();
-                    let id = label.replace(/[^a-zA-Z0-9]/g, '_');
-                    let href = `#${id}`;
-                    let style =
+                    const label = (n as HTMLElement).innerText.trim();
+                    const id = label.replace(/[^a-zA-Z0-9]/g, '_');
+                    const href = `#${id}`;
+                    const style =
                         n.tagName === 'H3' ? 'padding-left: 1.25rem' : '';
                     // Side effects in map ftw
                     n.id = id;

package/src/modules/tm/endCapA/__tests__/endCapA.test.ts

@@ -6,7 +6,7 @@ customElements.define('tm-end-cap-a', EndCapA.CustomElementConstructor);
 
 describe('tm-end-cap-a', () => {
     it('works', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html`
                 <tm-end-cap-a
                     cta-label="Click"
@@ -22,7 +22,7 @@ describe('tm-end-cap-a', () => {
     it('dispatched a trailhead track event', async () => {
         const handler = jest.fn();
 
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html`
                 <tm-end-cap-a
                     cta-label="Click"

package/src/modules/tm/eventsA/eventsA.ts

@@ -16,7 +16,7 @@ export type Event = {
 export default class extends ChildrenElement<Event> {
     childTagName = 'TM-EVENT-ITEM';
     extractor = (element: Element) => {
-        let date = new Date(element.getAttribute('date')!);
+        const date = new Date(element.getAttribute('date')!);
         return {
             day: String(date.getDate()),
             date: element.getAttribute('date')!,

package/src/modules/tm/faqA/faqA.ts

@@ -15,16 +15,16 @@ export default class extends ChildrenElement<Item> {
 
     private get faqs() {
         return this.items.map((item, i) => {
-            let isExpanded = this.expanded.has(i);
+            const isExpanded = this.expanded.has(i);
             return {
                 ...item,
                 className: `item ${isExpanded ? 'item--expanded' : ''}`,
                 id: `item-${i}`,
                 expanded: isExpanded,
                 onClick: () => {
-                    let expanded = new Set(this.expanded);
-                    if (expanded.has(i)) expanded.delete(i);
-                    else expanded.add(i);
+                    const expanded = new Set(this.expanded);
+                    if (expanded.has(i)) {expanded.delete(i);}
+                    else {expanded.add(i);}
                     this.expanded = expanded;
                 }
             };

package/src/modules/tm/featureGridA/__tests__/featureGridA.test.ts

@@ -23,7 +23,7 @@ describe('tm-feature-grid-a', () => {
     // Skip these tests as LWC in test mode doesn't support child nodes for light DOM components
     // The featureGridA component uses slots for tm-card children, which isn't compatible with lit-html rendering in tests
     it.skip('works', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html`
                 <tm-feature-grid-a>
                     <tm-card
@@ -107,7 +107,7 @@ describe('tm-feature-grid-a', () => {
     });
 
     it('renders the component', () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html`<tm-feature-grid-a></tm-feature-grid-a>`
         );
         expect(element).toBeTruthy();

package/src/modules/tm/footnote/footnote.ts

@@ -27,7 +27,7 @@ export default class extends LightningElement {
     }
 
     private setContent() {
-        let section = this.template.querySelector('section');
+        const section = this.template.querySelector('section');
         if (section) {
             section.innerHTML = this.template.host.innerHTML;
         }

package/src/modules/tm/heroA/__tests__/heroA.test.ts

@@ -6,7 +6,7 @@ customElements.define('tm-hero-a', HeroA.CustomElementConstructor);
 
 describe('tm-hero-a', () => {
     it('works', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html`
                 <tm-hero-a
                     cta-label="Click"
@@ -22,7 +22,7 @@ describe('tm-hero-a', () => {
     it('dispatched a trailhead track event', async () => {
         const handler = jest.fn();
 
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html`
                 <tm-hero-a
                     cta-label="Click"

package/src/modules/tm/heroA/heroA.ts

@@ -39,15 +39,15 @@ export default class extends LightningElement {
 
         if(this.isRemoteImage){
             return this.imgSrc;
-        } else {
+        } 
             const imgType = this.imgSrc.split('.').pop();
             const imgName = this.imgSrc.replace(`.${imgType || ''}`, '');
-            let srcSet: string[] = [];
+            const srcSet: string[] = [];
             widths.forEach((width) => {
                 srcSet.push(`${imgName}-${width}w.webp ${width}w`);
             });
             return srcSet.join(',');
-        }
+        
     }
 
     private get isRemoteImage() {

package/src/modules/tm/promoA/__tests__/promoA.test.ts

@@ -19,7 +19,7 @@ describe('tm-prom-a', () => {
         open = jest.fn();
     });
     it('handles click on the image', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html`
                 <tm-prom-a
                     cta-href="/promo"
@@ -32,7 +32,7 @@ describe('tm-prom-a', () => {
         expect(open).toHaveBeenCalledWith('/promo', '_blank');
     });
     it('stops propogation on the tds-button-link', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html`
                 <tm-prom-a
                     cta-href="/promo"
@@ -48,7 +48,7 @@ describe('tm-prom-a', () => {
         expect(open).not.toHaveBeenCalled();
     });
     it('tracks survey links', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html`
                 <tm-prom-a
                     cta-target="_blank"

package/src/modules/tm/promoA/promoA.ts

@@ -36,16 +36,16 @@ export default class extends LightningElement {
     }
 
     private onClick(e: MouseEvent) {
-        let { ctaHref, ctaTarget } = this;
+        const { ctaHref, ctaTarget } = this;
         if (ctaHref) {
-            if (ctaTarget) window.open(ctaHref, ctaTarget);
-            else window.location.href = ctaHref;
+            if (ctaTarget) {window.open(ctaHref, ctaTarget);}
+            else {window.location.href = ctaHref;}
         }
         this.trackLinkClick();
     }
 
     private trackLinkClick() {
-        let { ctaHref, ctaTitle } = this;
+        const { ctaHref, ctaTitle } = this;
         if (ctaHref === 'https://sfdc.co/arch-site-survey') {
             track(this.template.host, 'site_survey', {
                 linkText: ctaTitle,

package/src/modules/tm/sectionA/sectionA.ts

@@ -10,7 +10,7 @@ export default class extends LightningElement {
     @api ctaTarget: string | null = null;
 
     connectedCallback() {
-        let hash = window.location.hash.slice(1);
+        const hash = window.location.hash.slice(1);
         if (this.id && this.id === hash) {
             // We have to restore the natural browser behavior of
             // jumping to anchors because when DOMContentLoaded fires