Merge branch 'master' of https://github.com/salesforce/lwc into ssr-l…

…wcif-bookends

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-all-alias/barrel.js

@@ -0,0 +1,2 @@
+// Barrel exporting from 'lwc' with alias should work
+export * as foo from 'lwc';

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-all-alias/expected.html

@@ -0,0 +1,14 @@
+<x-cmp>
+  <template shadowrootmode="open">
+    <div>
+      getComponentDef
+      isComponentConstructor
+      createContextProvider
+      readonly
+      setFeatureFlagForTest
+      unwrap
+      createElement
+      renderComponent
+    </div>
+  </template>
+</x-cmp>

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-all-alias/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-cmp';
+export { default } from 'x/cmp';
+export * from 'x/cmp';

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-all-alias/modules/x/cmp/cmp.html

@@ -0,0 +1,3 @@
+<template>
+    <div lwc:inner-html={imports}></div>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-all-alias/modules/x/cmp/cmp.js

@@ -0,0 +1,17 @@
+import { foo } from '../../../barrel.js';
+
+export default class extends foo.LightningElement {
+    imports = [
+        foo.getComponentDef,
+        foo.isComponentConstructor,
+        foo.createContextProvider,
+        foo.readonly,
+        foo.setFeatureFlagForTest,
+        foo.unwrap,
+        foo.createElement,
+        foo.renderComponent,
+    ]
+        // renderComponent is aliased here: https://github.com/salesforce/lwc/blob/5d01843a7733a03b9ccb59a70ad64af955f15b88/packages/%40lwc/ssr-runtime/src/index.ts#L31
+        .map((i) => (i.name === 'serverSideRenderComponent' ? 'renderComponent' : i.name))
+        .join('\n      ');
+}

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-all/barrel.js

@@ -0,0 +1,2 @@
+// Barrel exporting from 'lwc' should work
+export * from 'lwc';

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-all/expected.html

@@ -0,0 +1,14 @@
+<x-cmp>
+  <template shadowrootmode="open">
+    <div>
+      getComponentDef
+      isComponentConstructor
+      createContextProvider
+      readonly
+      setFeatureFlagForTest
+      unwrap
+      createElement
+      renderComponent
+    </div>
+  </template>
+</x-cmp>

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-all/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-cmp';
+export { default } from 'x/cmp';
+export * from 'x/cmp';

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-all/modules/x/cmp/cmp.html

@@ -0,0 +1,3 @@
+<template>
+    <div lwc:inner-html={imports}></div>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-all/modules/x/cmp/cmp.js

@@ -0,0 +1,27 @@
+import {
+    LightningElement,
+    getComponentDef,
+    isComponentConstructor,
+    createContextProvider,
+    readonly,
+    setFeatureFlagForTest,
+    unwrap,
+    createElement,
+    renderComponent,
+} from '../../../barrel.js';
+
+export default class extends LightningElement {
+    imports = [
+        getComponentDef,
+        isComponentConstructor,
+        createContextProvider,
+        readonly,
+        setFeatureFlagForTest,
+        unwrap,
+        createElement,
+        renderComponent,
+    ]
+        // renderComponent is aliased here: https://github.com/salesforce/lwc/blob/5d01843a7733a03b9ccb59a70ad64af955f15b88/packages/%40lwc/ssr-runtime/src/index.ts#L31
+        .map((i) => (i.name === 'serverSideRenderComponent' ? 'renderComponent' : i.name))
+        .join('\n      ');
+}

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-named/barrel.js

@@ -0,0 +1,14 @@
+// Barrel exporting from 'lwc' should work
+// These imports are the ones that are allowed by the no-disallowed-lwc-imports eslint rule
+// Ref: https://github.com/salesforce/eslint-plugin-lwc/blob/34911de749e20cabbf48f5585c92a4b62d082a41/lib/rules/no-disallowed-lwc-imports.js#L11
+export {
+    LightningElement,
+    getComponentDef as getComponentDefAlias,
+    isComponentConstructor,
+    createContextProvider,
+    readonly,
+    setFeatureFlagForTest,
+    unwrap,
+    createElement,
+    renderComponent,
+} from 'lwc';

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-named/expected.html

@@ -0,0 +1,14 @@
+<x-cmp>
+  <template shadowrootmode="open">
+    <div>
+      getComponentDef
+      isComponentConstructor
+      createContextProvider
+      readonly
+      setFeatureFlagForTest
+      unwrap
+      createElement
+      renderComponent
+    </div>
+  </template>
+</x-cmp>

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-named/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-cmp';
+export { default } from 'x/cmp';
+export * from 'x/cmp';

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-named/modules/x/cmp/cmp.html

@@ -0,0 +1,3 @@
+<template>
+    <div lwc:inner-html={imports}></div>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/barrel-lwc-exports/export-named/modules/x/cmp/cmp.js

@@ -0,0 +1,27 @@
+import {
+    LightningElement,
+    getComponentDefAlias,
+    isComponentConstructor,
+    createContextProvider,
+    readonly,
+    setFeatureFlagForTest,
+    unwrap,
+    createElement,
+    renderComponent,
+} from '../../../barrel.js';
+
+export default class extends LightningElement {
+    imports = [
+        getComponentDefAlias,
+        isComponentConstructor,
+        createContextProvider,
+        readonly,
+        setFeatureFlagForTest,
+        unwrap,
+        createElement,
+        renderComponent,
+    ]
+        // renderComponent is aliased here: https://github.com/salesforce/lwc/blob/5d01843a7733a03b9ccb59a70ad64af955f15b88/packages/%40lwc/ssr-runtime/src/index.ts#L31
+        .map((i) => (i.name === 'serverSideRenderComponent' ? 'renderComponent' : i.name))
+        .join('\n      ');
+}

packages/@lwc/integration-karma/test/events/focus-event-composed/index.spec.js

@@ -1,25 +1,12 @@
-// IE11 doesn't support FocusEvent constructor
-// https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/FocusEvent#Browser_compatibility
-function isFocusEventConstructorSupported() {
-    try {
-        new FocusEvent();
-        return true;
-    } catch (_error) {
-        return false;
-    }
-}
-
-describe.runIf(isFocusEventConstructorSupported())('FocusEvent constructor supported', () => {
-    it('should set composed to false by default', () => {
-        const focusEvent = new FocusEvent('focus');
-        expect(focusEvent.composed).toBe(false);
-    });
+it('should set composed to false by default', () => {
+    const focusEvent = new FocusEvent('focus');
+    expect(focusEvent.composed).toBe(false);
+});
 
-    it('should set composed to the value specified in the option', () => {
-        const composedEvt = new FocusEvent('focus', { composed: true });
-        expect(composedEvt.composed).toBe(true);
+it('should set composed to the value specified in the option', () => {
+    const composedEvt = new FocusEvent('focus', { composed: true });
+    expect(composedEvt.composed).toBe(true);
 
-        const nonComposedEvt = new FocusEvent('focus', { composed: false });
-        expect(nonComposedEvt.composed).toBe(false);
-    });
+    const nonComposedEvt = new FocusEvent('focus', { composed: false });
+    expect(nonComposedEvt.composed).toBe(false);
 });

packages/@lwc/integration-karma/test/rendering/issue-4889/index.spec.js

@@ -0,0 +1,34 @@
+import { createElement } from 'lwc';
+import Table from 'x/table';
+import { dataStatesVariant1, dataStatesVariant2 } from 'x/data';
+
+// TODO [#4889]: fix issue with nested for:each loops and colliding keys
+xdescribe('issue-4889 - should render for:each correctly when nested', () => {
+    [dataStatesVariant1, dataStatesVariant2].forEach((dataStates, i) => {
+        it(`variant ${i + 1}`, async () => {
+            const elm = createElement('x-table', { is: Table });
+            document.body.appendChild(elm);
+
+            for (const dataState of dataStates) {
+                await new Promise(setTimeout);
+                elm.items = dataState;
+            }
+            // two ticks necessary to catch the unhandled rejection
+            await new Promise(setTimeout);
+            await new Promise(setTimeout);
+
+            // whatever state the DOM is in now, it should be the same as if we rendered
+            // the last data state from scratch
+            const elm2 = createElement('x-table', { is: Table });
+            elm2.items = dataStates[dataStates.length - 1];
+            document.body.appendChild(elm2);
+
+            await new Promise(setTimeout);
+
+            const toKeys = (el) =>
+                [...el.shadowRoot.children].map((_) => _.getAttribute('data-key'));
+
+            expect(toKeys(elm)).toEqual(toKeys(elm2));
+        });
+    });
+});

packages/@lwc/integration-karma/test/rendering/issue-4889/x/data/data.js

@@ -0,0 +1,129 @@
+export const dataStatesVariant1 = [
+    [
+        {
+            id: 1,
+            renderMe: true,
+        },
+        {
+            id: 2,
+            renderMe: true,
+            children: [],
+        },
+        {
+            id: 3,
+            renderMe: true,
+            children: [],
+        },
+    ],
+    [
+        {
+            id: 5,
+            renderMe: false,
+        },
+        {
+            id: 6,
+            renderMe: false,
+            children: [],
+        },
+        {
+            id: 7,
+            renderMe: true,
+            children: [
+                {
+                    id: 13,
+                    renderMe: true,
+                },
+            ],
+        },
+        {
+            id: 8,
+            renderMe: false,
+            children: [],
+        },
+    ],
+    [
+        {
+            id: 10,
+            renderMe: true,
+            children: [],
+        },
+        {
+            id: 11,
+            renderMe: true,
+            children: [
+                {
+                    id: 13,
+                    renderMe: true,
+                },
+            ],
+        },
+        {
+            id: 12,
+            renderMe: true,
+            children: [],
+        },
+    ],
+];
+
+// second variant to repro a different error message
+export const dataStatesVariant2 = [
+    [
+        {
+            id: 1,
+            renderMe: true,
+        },
+        {
+            id: 2,
+            renderMe: true,
+            children: [],
+        },
+        {
+            id: 3,
+            renderMe: true,
+            children: [],
+        },
+    ],
+    [
+        {
+            id: 5,
+            renderMe: false,
+        },
+        {
+            id: 6,
+            renderMe: false,
+            children: [],
+        },
+        {
+            id: 7,
+            renderMe: true,
+            children: [
+                {
+                    id: 13,
+                    renderMe: true,
+                },
+            ],
+        },
+        {
+            id: 8,
+            renderMe: false,
+            children: [],
+        },
+    ],
+    [
+        {
+            id: 10,
+            renderMe: true,
+            children: [],
+        },
+        {
+            id: 11,
+            renderMe: true,
+            children: [
+                {
+                    id: 13,
+                    renderMe: true,
+                },
+            ],
+        },
+    ],
+];

packages/@lwc/integration-karma/test/rendering/issue-4889/x/row/row.html

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

packages/@lwc/integration-karma/test/rendering/issue-4889/x/row/row.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Row extends LightningElement {
+    @api prop;
+}

packages/@lwc/integration-karma/test/rendering/issue-4889/x/table/table.html

@@ -0,0 +1,8 @@
+<template>
+    <template for:each={items} for:item="item">
+        <x-row lwc:if={item.renderMe} prop={child} key={item.id} data-key={item.id}></x-row>
+        <template lwc:if={item.children} for:each={item.children} for:item="grandchild">
+            <x-row lwc:if={grandchild.renderMe} prop={grandchild} key={grandchild.id} data-key={item.id}></x-row>
+        </template>
+    </template>
+</template>

packages/@lwc/integration-karma/test/rendering/issue-4889/x/table/table.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Table extends LightningElement {
+    @api items = [];
+}