@salesforcedevs/arch-components 1.20.17-alpha10 → 1.20.17-alpha11

package/lwc.config.json

@@ -2,6 +2,8 @@
     "modules": [
         { "dir": "src/modules" }
     ],
-    "expose": []
+    "expose": [
+        "arch/context"
+    ]
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/arch-components",
-    "version": "1.20.17-alpha10",
+    "version": "1.20.17-alpha11",
     "description": "Architecture Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/common/effectAdapter/__tests__/effectAdapter.test.ts

@@ -1,12 +0,0 @@
-import { EffectAdapter } from '../effectAdapter';
-
-describe('EffectAdapter', () => {
-    it('calls the handler', async () => {
-        let value = Symbol();
-        let setValue = jest.fn();
-        let adapter = new EffectAdapter(setValue);
-        let config = { value: value };
-        adapter.update(config);
-        expect(setValue).toHaveBeenCalledWith(config);
-    });
-});

package/src/common/effectAdapter/effectAdapter.html

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

package/src/common/effectAdapter/effectAdapter.ts

@@ -1,18 +0,0 @@
-import { WireAdapter } from 'lwc';
-
-export type EffectAdapterConfig<T> = {};
-
-export class EffectAdapter<T>
-    implements
-        WireAdapter<EffectAdapterConfig<T>, EffectAdapterConfig<T>, void>
-{
-    constructor(private setValue: (value: EffectAdapterConfig<T>) => void) {}
-
-    connect() {}
-
-    disconnect() {}
-
-    update(config: EffectAdapterConfig<T>) {
-        this.setValue(config);
-    }
-}

package/src/common/reflectedElement/__tests__/modules/test/select/select.html

@@ -1,3 +0,0 @@
-<template>
-    <select lwc:dom="manual"></select>
-</template>

package/src/common/reflectedElement/__tests__/modules/test/select/select.ts

@@ -1,7 +0,0 @@
-import { ReflectedElement } from 'common/reflectedElement';
-
-export default class extends ReflectedElement {
-    get contentElement() {
-        return this.template.querySelector('select') as HTMLSelectElement;
-    }
-}

package/src/common/reflectedElement/__tests__/modules/test/selectTransform/selectTransform.html

@@ -1,3 +0,0 @@
-<template>
-    <select lwc:dom="manual"></select>
-</template>

package/src/common/reflectedElement/__tests__/modules/test/selectTransform/selectTransform.ts

@@ -1,18 +0,0 @@
-import { ReflectedElement } from '../../../../reflectedElement';
-
-export default class extends ReflectedElement {
-    get contentElement() {
-        return this.template.querySelector('select') as HTMLSelectElement;
-    }
-
-    innerHTMLSetCallback() {
-        this.contentElement.setAttribute(
-            'data-count',
-            String(this.contentElement.querySelectorAll('option').length)
-        );
-    }
-
-    transformHTML(html: string) {
-        return `${html}  <option value="last">Last</option>`;
-    }
-}

package/src/common/reflectedElement/__tests__/reflectedElement.test.ts

@@ -1,75 +0,0 @@
-import { html, renderIntoBody } from 'shared/testutils';
-
-import Select from './modules/test/select/select';
-import SelectTransform from './modules/test/selectTransform/selectTransform';
-
-customElements.define('test-select', Select.CustomElementConstructor);
-customElements.define(
-    'test-select-transform',
-    SelectTransform.CustomElementConstructor
-);
-
-describe('reflected-element', () => {
-    afterEach(() => {
-        document.body.innerHTML = '';
-    });
-
-    // Skip these snapshot tests as LWC slot content doesn't render consistently in tests
-    it.skip('reflects the innerHTML', async () => {
-        let element = renderIntoBody(
-            html`
-                <test-select>
-                    <option value="a">A</option>
-                    <option value="b">B</option>
-                </test-select>
-            `
-        );
-        await new Promise((resolve) => setTimeout(resolve, 100));
-        expect(
-            element.shadowRoot!.querySelector('select')!.innerHTML
-        ).toMatchHTMLSnapshot();
-    }, 10000);
-
-    it.skip('transforms the innerHTML', async () => {
-        let element = renderIntoBody(
-            html`
-                <test-select-transform>
-                    <option value="a">A</option>
-                    <option value="b">B</option>
-                </test-select-transform>
-            `
-        );
-        await new Promise((resolve) => setTimeout(resolve, 100));
-        expect(
-            element.shadowRoot!.querySelector('select')!.innerHTML
-        ).toMatchHTMLSnapshot();
-    }, 10000);
-
-    it('renders components with reflected innerHTML', async () => {
-        let element = renderIntoBody(html`<test-select></test-select>`);
-        await new Promise((resolve) => setTimeout(resolve, 50));
-        expect(element).toBeTruthy();
-        expect(element.shadowRoot!.querySelector('select')).toBeTruthy();
-    }, 10000);
-
-    it('calls innerHTMLSetCallback', async () => {
-        let element = renderIntoBody(
-            html`
-                <test-select-transform>
-                    <option value="a">A</option>
-                    <option value="b">B</option>
-                    <option value="b">C</option>
-                </test-select-transform>
-            `
-        );
-        await new Promise((resolve) => setTimeout(resolve, 100));
-
-        const select = element.shadowRoot!.querySelector('select')!;
-        const count = select.getAttribute('data-count');
-
-        // Due to LWC slot limitations, the count might be 1 or 4
-        // Just verify the callback was called (count attribute exists)
-        expect(select).toHaveAttribute('data-count');
-        expect(parseInt(count!)).toBeGreaterThan(0);
-    }, 10000);
-});

package/src/common/reflectedElement/reflectedElement.ts

@@ -1,50 +0,0 @@
-/**
- * @file
- * This element copies the innerHTML of the host (Light DOM)
- * to the innerHTML of the element (Shadow DOM) returned by
- * contentElement() (which must use the lwc:dom="manual" directive).
- */
-import { LightningElement } from 'lwc';
-
-export class ReflectedElement extends LightningElement {
-    private observer!: MutationObserver;
-    private didSetContent = false;
-
-    get contentElement(): Element {
-        throw new Error('Not Implemented');
-    }
-
-    connectedCallback() {
-        this.observer = new MutationObserver((e) => {
-            this.setContent();
-        });
-        this.observer.observe(this.template.host, {
-            characterData: true,
-            childList: true,
-            subtree: true
-        });
-    }
-
-    disconnectedCallback() {
-        this.observer.disconnect();
-    }
-
-    innerHTMLSetCallback() {}
-
-    renderedCallback() {
-        if (!this.didSetContent) {
-            this.didSetContent = true;
-            this.setContent();
-        }
-    }
-
-    transformHTML(html: string): string {
-        return html;
-    }
-
-    private setContent() {
-        const element = this.contentElement;
-        element.innerHTML = this.transformHTML(this.template.host.innerHTML);
-        this.innerHTMLSetCallback();
-    }
-}

package/src/common/slot/__tests__/slot.test.ts

@@ -1,96 +0,0 @@
-import { html, renderIntoBody } from 'shared/testutils';
-
-import { assignedSlotNames, isSlotAssigned } from '../slot';
-
-customElements.define(
-    'test-a',
-    class extends HTMLElement {
-        connectedCallback() {
-            this.attachShadow({ mode: 'open' });
-            this.shadowRoot!.innerHTML = `
-        <test-b>
-          <slot></slot>
-          <slot name="header" slot="header"></slot>
-          <slot name="footer" slot="footer"></slot>
-        </test-b>
-      `;
-        }
-    }
-);
-
-customElements.define(
-    'test-b',
-    class extends HTMLElement {
-        connectedCallback() {
-            this.attachShadow({ mode: 'open' });
-            this.shadowRoot!.innerHTML = `
-        <slot></slot>
-        <slot name="header"></slot>
-        <slot name="footer"></slot>
-      `;
-        }
-    }
-);
-
-describe('isSlotAssigned', () => {
-    describe('false', () => {
-        it('test-a', () => {
-            let element = renderIntoBody(html` <test-a></test-a> `);
-            let slot = element.shadowRoot!.querySelector('slot')!;
-            expect(isSlotAssigned(slot)).toBe(false);
-        });
-        it('test-b', () => {
-            let element = renderIntoBody(html` <test-a></test-a> `);
-            let slot = element
-                .shadowRoot!.querySelector('test-b')!
-                .shadowRoot!.querySelector('slot')!;
-            expect(isSlotAssigned(slot)).toBe(false);
-        });
-    });
-    describe('true', () => {
-        it('test-a', () => {
-            let element = renderIntoBody(html`
-                <test-a>
-                    <h1>Hello</h1>
-                </test-a>
-            `);
-            let slot = element.shadowRoot!.querySelector('slot')!;
-            expect(isSlotAssigned(slot)).toBe(true);
-        });
-        it('test-b', () => {
-            let element = renderIntoBody(html`
-                <test-a>
-                    <h1>Hello</h1>
-                </test-a>
-            `);
-            let slot = element
-                .shadowRoot!.querySelector('test-b')!
-                .shadowRoot!.querySelector('slot')!;
-            expect(isSlotAssigned(slot)).toBe(true);
-        });
-    });
-});
-
-describe('assignedSlotNames', () => {
-    it('test-a', () => {
-        let element = renderIntoBody(html`
-            <test-a>
-                <h1>Hello</h1>
-                <header slot="header"></header>
-            </test-a>
-        `);
-        let shadowRoot = element.shadowRoot!;
-        expect(assignedSlotNames(shadowRoot)).toEqual(['default', 'header']);
-    });
-    it('test-b', () => {
-        let element = renderIntoBody(html`
-            <test-a>
-                <h1>Hello</h1>
-                <header slot="header"></header>
-            </test-a>
-        `);
-        let shadowRoot =
-            element.shadowRoot!.querySelector('test-b')!.shadowRoot!;
-        expect(assignedSlotNames(shadowRoot)).toEqual(['default', 'header']);
-    });
-});

package/src/common/slot/slot.ts

@@ -1,20 +0,0 @@
-export function assignedSlotNames(template: {
-    querySelectorAll(selector: string): NodeList;
-}) {
-    let slots = Array.from(
-        template.querySelectorAll('slot')
-    ) as HTMLSlotElement[];
-    return slots
-        .filter(isSlotAssigned)
-        .map((slot) => slot.getAttribute('name') || 'default');
-}
-
-export function isSlotAssigned(slot: HTMLSlotElement): boolean {
-    let [element] = slot.assignedElements();
-    if (element) {
-        if (element.tagName === 'SLOT')
-            return isSlotAssigned(element as HTMLSlotElement);
-        return true;
-    }
-    return slot.children.length > 0;
-}