feat(compiler): removed compiler slotset (#348)

* refactor(engine): creating ./dom folder for all DOM stuff

* fix(engine): removing fallback, review feedbaack

* fix(engine): fixing test failures

* refactor(engine): conditinally use of native shadowRoot

* fix(engine): requiring option.is in createElement

* feat(compiler): removed compiler slotset

* fix(engine): slot children allocation

* fix(engine): integration tests

* fix(engine): linting

packages/lwc-compiler/src/__tests__/fixtures/expected-sources-metadata.js

@@ -9,7 +9,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     } = $api;
     return [api_custom_element("x-bar", _xBar, {
         key: 1
-    })];
+    }, [])];
 }
 if (style) {
     tmpl.token = 'x-foo_foo';

packages/lwc-compiler/src/__tests__/fixtures/expected-styled.js

@@ -5,11 +5,9 @@ function style(tagName, token) {
     return `${tagName}[${token}],[is="${tagName}"][${token}] {
     color: blue;
 }
-
 div[${token}] {
     color: red;
 }
-
 x-foo[${token}],[is="x-foo"][${token}] {
     color: green;
 }
@@ -26,12 +24,11 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         key: 1
     }, []), api_custom_element("x-foo", _xFoo, {
         key: 2
-    })];
+    }, [])];
 }
 
 if (style) {
     tmpl.token = 'x-styled_styled';
-
     const style$$1 = document.createElement('style');
     style$$1.type = 'text/css';
     style$$1.dataset.token = 'x-styled_styled';

packages/lwc-engine/src/framework/api.ts

@@ -271,7 +271,7 @@ export function c(sel: string, Ctor: ComponentConstructor, data: VNodeData, chil
         tag,
         sel,
         data,
-        children: EmptyArray,
+        children,
         text,
         elm,
         key,

packages/lwc-integration/src/components/dom/test-child-template-element-queryselector/child-template-element-queryselector.spec.js

@@ -11,9 +11,16 @@ describe('event target query selector', () => {
     it('should return correct elements', function () {
         const hostContainer = browser.element('child-template-element-queryselector');
         hostContainer.click();
-        const shadowDiv = browser.element('.shadow-div');
-        assert.equal(shadowDiv.getAttribute('data-selected'), null);
-        const lightDiv = browser.element('.light-div');
-        assert.equal(lightDiv.getAttribute('data-selected'), 'true');
+
+        const values = browser.execute(function () {
+            var shadowDiv = document.querySelector('.shadow-div');
+            var lightDiv = document.querySelector('.light-div');
+            return {
+                lightDivSelected: lightDiv.getAttribute('data-selected'),
+                shadowDivSelected: shadowDiv.getAttribute('data-selected'),
+            };
+        });
+        assert.equal(values.value.shadowDivSelected, null);
+        assert.equal(values.value.lightDivSelected, 'true');
     });
 });

packages/lwc-integration/src/components/dom/test-event-target-queryselector/event-target-queryselector.spec.js

@@ -11,9 +11,15 @@ describe('event target query selector', () => {
     it('should return correct elements', function () {
         const hostContainer = browser.element('x-parent');
         hostContainer.click();
-        const shadowDiv = browser.element('.shadow-div');
-        assert.equal(shadowDiv.getAttribute('data-selected'), null);
-        const lightDiv = browser.element('.light-div');
-        assert.equal(lightDiv.getAttribute('data-selected'), 'true');
+        const values = browser.execute(function () {
+            var shadowDiv = document.querySelector('.shadow-div');
+            var lightDiv = document.querySelector('.light-div');
+            return {
+                lightDivSelected: lightDiv.getAttribute('data-selected'),
+                shadowDivSelected: shadowDiv.getAttribute('data-selected'),
+            };
+        });
+        assert.equal(values.value.shadowDivSelected, null);
+        assert.equal(values.value.lightDivSelected, 'true');
     });
 });

packages/lwc-integration/src/components/dom/test-retargeted-event-target-queryselector/retargeted-event-target-queryselector.spec.js

@@ -11,9 +11,15 @@ describe('event target query selector', () => {
     it('should return correct elements', function () {
         const hostContainer = browser.element('x-parent .shadow-div');
         hostContainer.click();
-        const shadowDiv = browser.element('.shadow-div');
-        assert.equal(shadowDiv.getAttribute('data-selected'), null);
-        const lightDiv = browser.element('.light-div');
-        assert.equal(lightDiv.getAttribute('data-selected'), 'true');
+        const values = browser.execute(function () {
+            var shadowDiv = document.querySelector('.shadow-div');
+            var lightDiv = document.querySelector('.light-div');
+            return {
+                lightDivSelected: lightDiv.getAttribute('data-selected'),
+                shadowDivSelected: shadowDiv.getAttribute('data-selected'),
+            };
+        });
+        assert.equal(values.value.shadowDivSelected, null);
+        assert.equal(values.value.lightDivSelected, 'true');
     });
 });

packages/lwc-integration/src/components/rendering/test-record-layout/record-layout.spec.js

@@ -23,17 +23,17 @@ describe('Testing component: record-layout', () => {
 
     describe('Record layout leaf', function () {
         it('should display field-api-name correctly', function () {
-            const element = browser.element('record-layout-row:nth-child(4) record-layout-leaf p:nth-child(3)');
+            const element = browser.element('record-layout-row:nth-child(3) record-layout-leaf p:nth-child(3)');
             assert.strictEqual(element.getText(), 'Field Api Name: AccountId');
         });
 
         it('should display display-value correctly', function () {
-            const element = browser.element('record-layout-row:nth-child(4) record-layout-leaf p:nth-child(2)');
+            const element = browser.element('record-layout-row:nth-child(3) record-layout-leaf p:nth-child(2)');
             assert.strictEqual(element.getText(), 'Display value: Acme');
         });
 
         it('should display value correctly', function () {
-            const element = browser.element('record-layout-row:nth-child(4) record-layout-leaf p:nth-child(1)');
+            const element = browser.element('record-layout-row:nth-child(3) record-layout-leaf p:nth-child(1)');
             assert.strictEqual(element.getText(), 'Value: 001xx000003DIIxAAO');
         });
     });

packages/lwc-template-compiler/src/__tests__/fixtures.spec.ts

@@ -35,6 +35,8 @@ describe('fixtures', () => {
                 ...configOverride,
             });
 
+            expect(actual.warnings).toEqual(expetedMetaData.warnings || []);
+
             if (expectedCode && expectedCode.length) {
                 expect(
                     prettier.format(actual.code),
@@ -43,8 +45,6 @@ describe('fixtures', () => {
                 );
             }
 
-            expect(actual.warnings).toEqual(expetedMetaData.warnings || []);
-
             if (actual.metadata) {
                 const actualMeta = actual.metadata;
                 const expectMeta = expetedMetaData.metadata || {};

packages/lwc-template-compiler/src/__tests__/fixtures/attributes/error-empty-value/expected.js

@@ -19,6 +19,6 @@ export default function tmpl($api, $cmp, $slotset, $ctx) {
                 visible: true
             },
             key: 2
-        })
+        }, [])
     ];
 }

packages/lwc-template-compiler/src/__tests__/fixtures/attributes/mixed-props-attrs/expected.js

@@ -12,7 +12,7 @@ export default function tmpl($api, $cmp, $slotset, $ctx) {
                 d: $cmp.p.foo
             },
             key: 1
-        }),
+        }, []),
         api_element(
             'a',
             {
@@ -48,7 +48,7 @@ export default function tmpl($api, $cmp, $slotset, $ctx) {
                 bgColor: 'blue',
             },
             key: 3
-        }),
+        }, []),
         api_element(
             'svg',
             {
@@ -82,7 +82,7 @@ export default function tmpl($api, $cmp, $slotset, $ctx) {
                 ariaHidden: 'hidden'
             },
             key: 6
-        }),
+        }, []),
         api_element(
             'table',
             {
@@ -104,7 +104,7 @@ export default function tmpl($api, $cmp, $slotset, $ctx) {
                 min: '3'
             },
             key: 8
-        }),
+        }, []),
         api_custom_element("input", _nsInput, {
             attrs: {
                 is: "ns-input"
@@ -114,7 +114,7 @@ export default function tmpl($api, $cmp, $slotset, $ctx) {
                 maxLength: "10"
             },
             key: 9
-        }),
+        }, []),
         api_element(
             'div',
             {

packages/lwc-template-compiler/src/__tests__/fixtures/directive-is/is-with-other-directives/expected.js

@@ -21,7 +21,7 @@ export default function tmpl($api, $cmp, $slotset, $ctx) {
                                     is: 'ns-row'
                                 },
                                 key: api_key(1, row.id)
-                            })
+                            }, [])
                             : null;
                     })
                 )

packages/lwc-template-compiler/src/__tests__/fixtures/directive-is/is/expected.js

@@ -20,7 +20,7 @@ export default function tmpl($api, $cmp, $slotset, $ctx) {
                                 is: 'ns-row'
                             },
                             key: 1
-                        })
+                        }, [])
                     ]
                 )
             ]

packages/lwc-template-compiler/src/__tests__/fixtures/directive-key/component/expected.js

@@ -1,8 +1,8 @@
 import _nsItem from 'ns-item';
 export default function tmpl($api, $cmp, $slotset, $ctx) {
     const {
-        k: api_key,
         d: api_dynamic,
+        k: api_key,
         c: api_custom_element,
         i: api_iterator,
         h: api_element
@@ -14,13 +14,15 @@ export default function tmpl($api, $cmp, $slotset, $ctx) {
             {
                 key: 2
             },
-            api_iterator($cmp.items, function(item) {
-                return api_custom_element('ns-item', _nsItem, {
-                    key: api_key(1, item.key),
-                    slotset: {
-                        $default$: [api_dynamic(item.value)]
-                    }
-                });
+            api_iterator($cmp.items, function (item) {
+                return api_custom_element(
+                    'ns-item',
+                    _nsItem,
+                    {
+                        key: api_key(1, item.key)
+                    },
+                    [api_dynamic(item.value)]
+                );
             })
         )
     ];

packages/lwc-template-compiler/src/__tests__/fixtures/events/component/expected.js

@@ -15,7 +15,7 @@ export default function tmpl($api, $cmp, $slotset, $ctx) {
                     on: {
                         foo: _m0 || ($ctx._m0 = api_bind($cmp.handleFoo))
                     }
-                })
+                }, [])
             ]
         )
     ];

packages/lwc-template-compiler/src/__tests__/fixtures/regression/class-name-slash/expected.js

@@ -11,6 +11,6 @@ export default function tmpl($api, $cmp, $slotset, $ctx) {
                 xClass: 'bar'
             },
             key: 1
-        })
+        }, [])
     ];
 }

packages/lwc-template-compiler/src/__tests__/fixtures/regression/excaped-json/expected.js

@@ -9,6 +9,6 @@ export default function tmpl($api, $cmp, $slotset, $ctx) {
                     '[{"column":"ID","value":"5e","operator":"equals","f":true}]'
             },
             key: 1
-        })
+        }, [])
     ];
 }

packages/lwc-template-compiler/src/__tests__/fixtures/regression/slot-name-with-dash/expected.js

@@ -1,16 +1,25 @@
 export default function tmpl($api, $cmp, $slotset, $ctx) {
-    const { t: api_text, h: api_element } = $api;
-    const { 'secret-slot': slot0 } = $slotset;
+    const { t: api_text, h: api_element, s: api_slot } = $api;
 
-    return slot0 || [
-        api_element(
-            'p',
+    return [
+        api_slot(
+            'secret-slot',
             {
-                key: 1
+                attrs: {
+                    name: 'secret-slot'
+                },
+                key: 2
             },
             [
-                api_text('Test slot content')
-            ]
+                api_element(
+                    'p',
+                    {
+                        key: 1
+                    },
+                    [api_text('Test slot content')]
+                )
+            ],
+            $slotset
         )
     ];
 }

packages/lwc-template-compiler/src/__tests__/fixtures/slots/component-definition/expected.js

@@ -1,15 +1,25 @@
 import _xFoo from 'x-foo';
 export default function tmpl($api, $cmp, $slotset, $ctx) {
-    const { c: api_custom_element } = $api;
-    const { $default$: slot0 } = $slotset;
+    const { s: api_slot, c: api_custom_element } = $api;
 
     return [
-        api_custom_element('x-foo', _xFoo, {
-            key: 1,
-            slotset: {
-                $default$: slot0 || []
-            }
-        })
+        api_custom_element(
+            'x-foo',
+            _xFoo,
+            {
+                key: 2
+            },
+            [
+                api_slot(
+                    '',
+                    {
+                        key: 1
+                    },
+                    [],
+                    $slotset
+                )
+            ]
+        )
     ];
 }
-tmpl.slots = ['$default$'];
+tmpl.slots = [''];

packages/lwc-template-compiler/src/__tests__/fixtures/slots/component-definition/metadata.json

@@ -1,6 +1,6 @@
 {
   "metadata": {
     "templateDependencies": ["x-foo"],
-    "definedSlots": ["$default$"]
+    "definedSlots": [""]
   }
 }