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

package/src/modules/tm/utils/utils.ts

@@ -1,13 +1,13 @@
 export function waitForPageSettled() {
     return new Promise<void>((resolve) => {
         let prevH: number = 0;
-        let prevY = window.scrollY;
+        const prevY = window.scrollY;
         function check() {
-            let nextH = window.innerHeight + document.body.scrollHeight;
-            let nextY = window.scrollY;
-            let settled = nextH === prevH;
+            const nextH = window.innerHeight + document.body.scrollHeight;
+            const nextY = window.scrollY;
+            const settled = nextH === prevH;
             if (settled) {
-                if (nextY === prevY) resolve();
+                if (nextY === prevY) {resolve();}
                 return;
             }
             prevH = nextH;

package/src/modules/tm/youtube/youtube.ts

@@ -17,8 +17,8 @@ export default class extends LightningElement {
         if (!this.didSetSize) {
             this.didSetSize = true;
             waitForPageSettled().then(() => {
-                let w = this.template.host.offsetWidth;
-                let ratio = 0.5625;
+                const w = this.template.host.offsetWidth;
+                const ratio = 0.5625;
                 this.height = w * ratio;
                 this.width = w;
             });

package/src/modules/ui/focusTrap/focusTrap.ts

@@ -26,8 +26,8 @@ export default class extends LightningElement {
     }
 
     renderedCallback() {
-        if (this.init) return;
-        else this.init = true;
+        if (this.init) {return;}
+        this.init = true;
 
         this.$start = this.template.querySelector(
             `[data-id="start"]`
@@ -52,7 +52,7 @@ export default class extends LightningElement {
         this.removeEventListener('focusin', this.onFocusIn);
         this.removeEventListener('focusout', this.onFocusOut);
         if (this.$activeElement && this.$activeElement instanceof HTMLElement)
-            this.$activeElement.focus();
+            {this.$activeElement.focus();}
     }
 
     private focusFirstElement = () => {
@@ -79,14 +79,14 @@ export default class extends LightningElement {
 
     private getFocusableElements(): HTMLElement[] {
         // @ts-ignore
-        let children = this.template.querySelector('slot').assignedElements();
+        const children = this.template.querySelector('slot').assignedElements();
         // @ts-ignore
         return queryShadowRoot({ children }, isHidden, isFocusable);
     }
 
     private trapFocus(trapToEnd?: boolean) {
-        if (this.inactive) return;
-        let focusableElements = this.getFocusableElements();
+        if (this.inactive) {return;}
+        const focusableElements = this.getFocusableElements();
         if (focusableElements.length > 0) {
             if (trapToEnd) {
                 focusableElements[focusableElements.length - 1].focus();
@@ -99,6 +99,6 @@ export default class extends LightningElement {
 
 function getActiveElement(element: Element | null): Element | null {
     if (element && element.shadowRoot)
-        return getActiveElement(element.shadowRoot.activeElement);
+        {return getActiveElement(element.shadowRoot.activeElement);}
     return element;
 }

package/src/modules/ui/focusVisible/focusVisible.ts

@@ -23,7 +23,7 @@ export default class extends LightningElement {
     }
 
     private onChange = () => {
-        for (let node of Array.from(this.template.host.children)) {
+        for (const node of Array.from(this.template.host.children)) {
             node.setAttribute('data-focus-visible', String(focusVisible));
         }
     };
@@ -34,13 +34,13 @@ document.addEventListener('mousemove', onMouse, { passive: true });
 document.addEventListener('keydown', onKeyboard, { passive: true });
 
 function onMouse(event: MouseEvent) {
-    if (!focusVisible) return;
-    else focusVisible = false;
-    for (let handler of handlers) handler();
+    if (!focusVisible) {return;}
+    focusVisible = false;
+    for (const handler of handlers) {handler();}
 }
 
 function onKeyboard(event: KeyboardEvent) {
-    if (focusVisible) return;
-    else focusVisible = true;
-    for (let handler of handlers) handler();
+    if (focusVisible) {return;}
+    focusVisible = true;
+    for (const handler of handlers) {handler();}
 }

package/src/modules/th/tbid/__tests__/__snapshots__/tbid.test.ts.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`undefined: toMatchHTMLSnapshot 1`] = `"<head><meta name="salesforce-cache-max-age" content="0"><meta name="salesforce-brand" content="trailhead"><meta name="salesforce-community" content="/tbid-community-uri"><meta name="salesforce-use-min-js" content="false"><meta name="salesforce-init-handler" content="__tbid_init"><meta name="salesforce-login-handler" content="__tbid_login"><meta name="salesforce-logout-handler" content="__tbid_logout"><meta name="salesforce-mode" content="authprovider"><meta name="salesforce-redirect-uri" content="/tbid-redirect-uri"><meta name="salesforce-authprovider-login" content="/tbid-auth-provider-login-path"><meta name="salesforce-authprovider-signup" content="/tbid-auth-provider-signup-path"><script src="/tbid-community-uri/resource/authProviderEmbeddedLogin_v1_3"></script></head>"`;

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

@@ -1,242 +0,0 @@
-import fetchMock from 'jest-fetch-mock';
-
-import { html, renderIntoBody, nextTick } from 'shared/testutils';
-
-import Tbid, {
-    EVENT_LOGIN,
-    EVENT_LOGOUT,
-    TRAILHEAD_EVENT_LOGIN,
-    TRAILHEAD_EVENT_LOGOUT,
-    TRAILHEAD_EVENT_SIGNUP,
-    TBID_EVENT_INIT,
-    TBID_EVENT_LOGIN,
-    TBID_EVENT_LOGOUT,
-    TBID_INIT,
-    TBID_LOGIN,
-    TBID_LOGOUT,
-    TBID_LOGOUT_PATH,
-    Lock,
-    LOCK_KEY,
-    LOCK_TIMEOUT
-} from '../tbid';
-
-customElements.define('th-tbid', Tbid.CustomElementConstructor);
-
-const render = ({
-    authenticated = 'false',
-    loginTried = 'false'
-}: { authenticated?: string; loginTried?: string } = {}) =>
-    renderIntoBody(
-        html`
-            <th-tbid
-                authenticated=${authenticated}
-                csrf-token="token"
-                login-redirect-path="/login-redirect-path"
-                login-status-path="/login-status-path"
-                login-tried=${loginTried}
-                logout-redirect-path="/logout-redirect-path"
-                tbid-auth-provider-login-path="/tbid-auth-provider-login-path"
-                tbid-auth-provider-signup-path="/tbid-auth-provider-signup-path"
-                tbid-community-uri="/tbid-community-uri"
-                tbid-redirect-uri="/tbid-redirect-uri"
-            ></th-tbid>
-        `
-    ) as unknown as Tbid;
-
-let location = {};
-
-Object.defineProperty(window, 'location', {
-    get: () => location
-});
-
-beforeEach(() => {
-    window.location.href = '/';
-    window.sessionStorage.removeItem(LOCK_KEY);
-});
-
-describe('th-tbid', () => {
-    afterEach(() => {
-        document.head.querySelectorAll('meta').forEach((n) => n.remove());
-    });
-    it('sets the correct meta tags', () => {
-        render();
-        expect(document.head.outerHTML).toMatchHTMLSnapshot();
-    });
-    it('sets the window globals', () => {
-        render();
-        // @ts-ignore
-        expect(window[TBID_INIT]).toBeInstanceOf(Function);
-        // @ts-ignore
-        expect(window[TBID_LOGIN]).toBeInstanceOf(Function);
-        // @ts-ignore
-        expect(window[TBID_LOGOUT]).toBeInstanceOf(Function);
-    });
-    it(`handles the ${TRAILHEAD_EVENT_LOGIN} event`, () => {
-        render();
-        let fn = jest.fn();
-        Object.defineProperty(window, 'SFIDWidget', {
-            value: { login: fn },
-            writable: true
-        });
-        document.dispatchEvent(new CustomEvent(TRAILHEAD_EVENT_LOGIN));
-        expect(fn).toHaveBeenCalled();
-    });
-    it(`handles the ${TRAILHEAD_EVENT_LOGOUT} event`, async () => {
-        render();
-        let fn = jest.fn();
-        Object.defineProperty(window, 'SFIDWidget', {
-            value: { logout: fn },
-            writable: true
-        });
-        document.dispatchEvent(new CustomEvent(TRAILHEAD_EVENT_LOGOUT));
-        let iframe = document.body.querySelector(
-            `iframe[src="/tbid-community-uri${TBID_LOGOUT_PATH}"]`
-        );
-        expect(iframe).toBeInTheDocument();
-        iframe!.dispatchEvent(new CustomEvent('load'));
-        await nextTick();
-        expect(fn).toHaveBeenCalled();
-    });
-    it(`handles the ${TRAILHEAD_EVENT_SIGNUP}`, () => {
-        render();
-        let fn = jest.fn();
-        Object.defineProperty(window, 'SFIDWidget', {
-            value: { signup: fn },
-            writable: true
-        });
-        document.dispatchEvent(new CustomEvent(TRAILHEAD_EVENT_SIGNUP));
-        expect(fn).toHaveBeenCalled();
-    });
-    describe('onLogin', () => {
-        it('redirects if user is not_logged_in & login-tried != true', async () => {
-            fetchMock.doMockOnceIf(
-                (r) => r.url === '/login-status-path',
-                JSON.stringify({ user: 'not_logged_in' })
-            );
-            render();
-            // @ts-ignore
-            await window[TBID_LOGIN]();
-            expect(window.location.href).toEqual('/login-redirect-path');
-        });
-        it('retries if there is a lock', async () => {
-            jest.useFakeTimers();
-            fetchMock.doMockIf(
-                (r) => r.url === '/login-status-path',
-                JSON.stringify({ user: 'not_logged_in' })
-            );
-            let element = render();
-            let onLogin = jest.fn();
-            element.addEventListener(TBID_EVENT_LOGIN, onLogin);
-            // A: No lock
-            // @ts-ignore
-            await window[TBID_LOGIN]();
-            expect(onLogin).toHaveBeenCalledTimes(1);
-            expect(window.location.href).toEqual('/login-redirect-path');
-            window.location.href = '/';
-            // B: Lock
-            // @ts-ignore
-            await window[TBID_LOGIN]();
-            expect(onLogin).toHaveBeenCalledTimes(2);
-            expect(window.location.href).toEqual('/');
-            // C: Lock expired
-            let now = Date.now();
-            let nowMock = jest
-                .spyOn(Date, 'now')
-                .mockImplementation(() => now + LOCK_TIMEOUT);
-            jest.runAllTimers();
-            jest.useRealTimers();
-            await nextTick();
-            expect(onLogin).toHaveBeenCalledTimes(3);
-            nowMock.mockRestore();
-            fetchMock.resetMocks();
-        });
-        it('calls onInit if user is logged_in and authenticated', async () => {
-            fetchMock.doMockOnceIf(
-                (r) => r.url === '/login-status-path',
-                JSON.stringify({ user: 'logged_in' })
-            );
-            let element = render({ authenticated: 'true' });
-            let onInit = jest.fn();
-            element.addEventListener(TBID_EVENT_INIT, onInit);
-            // @ts-ignore
-            await window[TBID_LOGIN]();
-            expect(onInit).toHaveBeenCalled();
-            expect(window.sessionStorage.getItem(LOCK_KEY)).toBeNull();
-        });
-        it('calls onInit if user is not_logged_in and login-tried', async () => {
-            fetchMock.doMockOnceIf(
-                (r) => r.url === '/login-status-path',
-                JSON.stringify({ user: 'not_logged_in' })
-            );
-            let element = render({ loginTried: 'true' });
-            let onInit = jest.fn();
-            element.addEventListener(TBID_EVENT_INIT, onInit);
-            // @ts-ignore
-            await window[TBID_LOGIN]();
-            expect(onInit).toHaveBeenCalled();
-            expect(window.sessionStorage.getItem(LOCK_KEY)).toBeNull();
-        });
-        it('dispatches login', () => {
-            fetchMock.doMockOnceIf(
-                (r) => r.url === '/login-status-path',
-                JSON.stringify({ user: 'not_logged_in' })
-            );
-            let element = render();
-            let fn = jest.fn();
-            element.addEventListener(EVENT_LOGIN, fn);
-            // @ts-ignore
-            window[TBID_LOGIN]();
-            expect(fn).toHaveBeenCalled();
-        });
-    });
-    describe('onLogout', () => {
-        it('calls SFIDWidget.init()', () => {
-            render();
-            let init = jest.fn();
-            Object.defineProperty(window, 'SFIDWidget', {
-                value: { init },
-                writable: true
-            });
-            // @ts-ignore
-            window[TBID_LOGOUT]();
-            expect(init).toHaveBeenCalled();
-        });
-        it('redirects', () => {
-            render();
-            // @ts-ignore
-            window[TBID_LOGOUT]();
-            expect(window.location.href).toEqual('/logout-redirect-path');
-        });
-        it('dispatches logout', () => {
-            let element = render();
-            let fn = jest.fn();
-            element.addEventListener(EVENT_LOGOUT, fn);
-            // @ts-ignore
-            window[TBID_LOGOUT]();
-            expect(fn).toHaveBeenCalled();
-        });
-    });
-    describe('Lock', () => {
-        afterEach(() => {
-            window.sessionStorage.removeItem('tbid');
-        });
-        it('acquire', async () => {
-            let now = Date.now();
-            let lock = new Lock('tbid', 1000);
-            expect(lock.aquire()).toBe(true);
-            expect(lock.aquire()).toBe(false);
-            let mock = jest
-                .spyOn(Date, 'now')
-                .mockImplementation(() => now + 2000);
-            expect(lock.aquire()).toBe(true);
-            mock.mockRestore();
-        });
-        it('release', async () => {
-            let lock = new Lock('tbid', 1000);
-            expect(lock.aquire()).toBe(true);
-            expect(lock.aquire()).toBe(false);
-            lock.release();
-            expect(lock.aquire()).toBe(true);
-        });
-    });
-});

package/src/modules/th/tbid/tbid.html

@@ -1 +0,0 @@
-<template></template>

package/src/modules/th/tbid/tbid.stories.mdx

@@ -1,25 +0,0 @@
-import { Meta } from "@storybook/addon-docs/blocks";
-
-<Meta title="th/th-tbid" />
-
-# Usage
-
-```html
-<th-tbid
-  authenticated="false"
-  csrf-token="token"
-  login-redirect-path="/login-redirect-path"
-  login-status-path="/login-status-path"
-  login-tried="false"
-  logout-redirect-path="/logout-path"
-  tbid-auth-provider-login-path="/tbid-auth-provider-login-path"
-  tbid-auth-provider-signup-path="/tbid-auth-provider-signup-path"
-  tbid-community-uri="/tbid-community-uri"
-  tbid-redirect-uri="/tbid-redirect-uri"
-></th-tbid>
-
-<script
-  src="https://trailhead.salesforce.com/ui/modules/th-tbid.js"
-  type="module"
-></script>
-```

package/src/modules/th/tbid/tbid.ts

@@ -1,215 +0,0 @@
-import { api, LightningElement } from 'lwc';
-
-import { getJSON, csrfHeader } from 'shared/fetch';
-
-export const EVENT_LOGIN = 'login';
-export const EVENT_LOGOUT = 'logout';
-
-export const TRAILHEAD_EVENT_LOGIN = 'trailhead_login';
-export const TRAILHEAD_EVENT_LOGOUT = 'trailhead_logout';
-export const TRAILHEAD_EVENT_SIGNUP = 'trailhead_signup';
-
-export const TBID_EVENT_INIT = 'tbid_will_init';
-export const TBID_EVENT_LOGIN = 'tbid_will_login';
-export const TBID_EVENT_LOGOUT = 'tbid_will_logout';
-
-export const TBID_INIT = '__tbid_init';
-export const TBID_LOGIN = '__tbid_login';
-export const TBID_LOGOUT = '__tbid_logout';
-
-export const TBID_SCRIPT_PATH = '/resource/authProviderEmbeddedLogin_v1_3';
-export const TBID_LOGOUT_PATH = '/services/auth/rp/oidc/logout';
-
-export const LOCK_KEY = 'tbid.tabAuthLock';
-export const LOCK_TIMEOUT = 5000;
-
-declare var SFIDWidget: {
-    init: () => void;
-    login: () => void;
-    logout: () => void;
-    signup: () => void;
-};
-
-export default class extends LightningElement {
-    @api authenticated: string | null = null;
-
-    @api csrfToken: string = '';
-
-    @api loginRedirectPath: string = null!;
-    @api loginStatusPath: string = null!;
-    @api loginTried: string | null = null;
-    @api logoutRedirectPath: string = null!;
-
-    @api tbidAuthProviderLoginPath: string = null!;
-    @api tbidAuthProviderSignupPath: string = null!;
-    @api tbidCommunityUri: string = null!;
-    @api tbidRedirectUri: string = null!;
-
-    private loadSFID: Promise<unknown> = null!;
-
-    private get scriptSrc() {
-        return `${this.tbidCommunityUri}${TBID_SCRIPT_PATH}`;
-    }
-
-    private get logoutIframeSrc() {
-        return `${this.tbidCommunityUri}${TBID_LOGOUT_PATH}`;
-    }
-
-    connectedCallback() {
-        this.appendMetaTag('salesforce-cache-max-age', '0');
-        this.appendMetaTag('salesforce-brand', 'trailhead');
-        this.appendMetaTag('salesforce-community', this.tbidCommunityUri);
-        this.appendMetaTag('salesforce-use-min-js', 'false');
-
-        this.appendMetaTag('salesforce-init-handler', TBID_INIT);
-        this.appendMetaTag('salesforce-login-handler', TBID_LOGIN);
-        this.appendMetaTag('salesforce-logout-handler', TBID_LOGOUT);
-
-        this.appendMetaTag('salesforce-mode', 'authprovider');
-        this.appendMetaTag('salesforce-redirect-uri', this.tbidRedirectUri);
-
-        this.appendMetaTag(
-            'salesforce-authprovider-login',
-            this.tbidAuthProviderLoginPath
-        );
-        this.appendMetaTag(
-            'salesforce-authprovider-signup',
-            this.tbidAuthProviderSignupPath
-        );
-
-        Object.defineProperty(window, TBID_INIT, {
-            value: () => this.onInit(),
-            writable: process.env.NODE_ENV === 'test'
-        });
-        Object.defineProperty(window, TBID_LOGIN, {
-            value: () => this.onLogin(),
-            writable: process.env.NODE_ENV === 'test'
-        });
-        Object.defineProperty(window, TBID_LOGOUT, {
-            value: () => this.onLogout(),
-            writable: process.env.NODE_ENV === 'test'
-        });
-
-        this.loadSFID = loadSFID(this.scriptSrc).catch((error) => {
-            this.dispatchEvent(
-                new CustomEvent('error', {
-                    detail: { error }
-                })
-            );
-        });
-
-        document.addEventListener(TRAILHEAD_EVENT_LOGIN, this);
-        document.addEventListener(TRAILHEAD_EVENT_LOGOUT, this);
-        document.addEventListener(TRAILHEAD_EVENT_SIGNUP, this);
-    }
-
-    disconnectedCallback() {
-        document.removeEventListener(TRAILHEAD_EVENT_LOGIN, this);
-        document.removeEventListener(TRAILHEAD_EVENT_LOGOUT, this);
-        document.removeEventListener(TRAILHEAD_EVENT_SIGNUP, this);
-    }
-
-    handleEvent(e: Event) {
-        switch (e.type) {
-            case TRAILHEAD_EVENT_LOGIN:
-                SFIDWidget.login();
-                break;
-            case TRAILHEAD_EVENT_LOGOUT:
-                loadIframe(this.logoutIframeSrc).then(() => {
-                    SFIDWidget.logout();
-                });
-                break;
-            case TRAILHEAD_EVENT_SIGNUP:
-                SFIDWidget.signup();
-                break;
-        }
-    }
-
-    private appendMetaTag(name: string, content: string) {
-        let tag = document.createElement('meta');
-        tag.name = name;
-        tag.content = content;
-        document.head.appendChild(tag);
-    }
-
-    private onInit() {
-        this.dispatchEvent(new CustomEvent(TBID_EVENT_INIT));
-    }
-
-    private async onLogin() {
-        this.dispatchEvent(new CustomEvent(TBID_EVENT_LOGIN));
-        this.dispatchEvent(new CustomEvent(EVENT_LOGIN));
-        let lock = new Lock(LOCK_KEY, LOCK_TIMEOUT);
-        let { user } = await getJSON<{ user: string }>(this.loginStatusPath, {
-            headers: csrfHeader(this.csrfToken)
-        });
-        let newSession =
-            (user === 'logged_in' && this.authenticated !== 'true') ||
-            (user === 'not_logged_in' && this.loginTried !== 'true');
-        if (newSession) {
-            if (lock.aquire()) window.location.href = this.loginRedirectPath;
-            else setTimeout(this.onLogin.bind(this), LOCK_TIMEOUT);
-        } else {
-            lock.release();
-            this.onInit();
-        }
-    }
-
-    private onLogout() {
-        this.dispatchEvent(new CustomEvent(TBID_EVENT_LOGOUT));
-        this.dispatchEvent(new CustomEvent(EVENT_LOGOUT));
-        SFIDWidget.init();
-        window.location.href = this.logoutRedirectPath;
-    }
-}
-
-export class Lock {
-    constructor(private key: string, private timeout: number) {}
-
-    aquire() {
-        if (this.locked) return false;
-        sessionStorage.setItem(this.key, String(Date.now() + this.timeout));
-        return true;
-    }
-
-    release() {
-        sessionStorage.removeItem(this.key);
-    }
-
-    private get existingLock() {
-        let storageValue = sessionStorage.getItem(this.key) || '';
-        let value = parseInt(storageValue, 10);
-        return Number.isNaN(value) ? 0 : value;
-    }
-
-    private get locked() {
-        return this.existingLock > Date.now();
-    }
-}
-
-function loadSFID(src: string) {
-    let load = new Promise<void>((resolve, reject) => {
-        let script = document.createElement('script');
-        script.onload = () => resolve(undefined);
-        script.onerror = () => reject(new Error('TH_TBID_SFID_LOAD'));
-        script.async = false;
-        script.src = src;
-        document.head.appendChild(script);
-    });
-    let timeout = new Promise((_, reject) =>
-        setTimeout(reject, 5000, new Error('TH_TBID_SFID_TIMEOUT'))
-    );
-    return Promise.race([load, timeout]);
-}
-
-function loadIframe(url: string) {
-    return new Promise((resolve, reject) => {
-        const iframe = document.createElement('iframe');
-        iframe.setAttribute('sandbox', 'allow-scripts');
-        iframe.style.display = 'none';
-        iframe.addEventListener('load', resolve, { once: true });
-        iframe.addEventListener('error', reject, { once: true });
-        iframe.src = url;
-        document.body.appendChild(iframe);
-    });
-}