test: add benchmark for light dom slots (#4808)

packages/@lwc/perf-benchmarks-components/src/benchmark/cardComponentLight/cardComponentLight.html

@@ -0,0 +1,20 @@
+<!--
+Copyright (c) 2018, salesforce.com, inc.
+All rights reserved.
+SPDX-License-Identifier: MIT
+For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+-->
+<template lwc:render-mode="light">
+    <h1>{title}</h1>
+    <template for:each={rows} for:item="row">
+        <benchmark-table-component-row-light
+                key={row.id}
+                class={row.className}
+                row={row}
+        >
+        </benchmark-table-component-row-light>
+    </template>
+    <div>
+        <slot></slot>
+    </div>
+</template>

packages/@lwc/perf-benchmarks-components/src/benchmark/cardComponentLight/cardComponentLight.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { LightningElement, api } from 'lwc';
+
+export default class CardComponentLight extends LightningElement {
+    static renderMode = 'light';
+    @api title;
+    // Note: This is only to give volume to the rehydration process.
+    @api rows;
+}

packages/@lwc/perf-benchmarks-components/src/benchmark/slotUsageComponentLight/slotUsageComponentLight.html

@@ -0,0 +1,21 @@
+<!--
+Copyright (c) 2018, salesforce.com, inc.
+All rights reserved.
+SPDX-License-Identifier: MIT
+For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+-->
+<template lwc:render-mode="light">
+    <h1>{componentContent}</h1>
+    <benchmark-card-component-light title={titleOfComponentWithSlot} rows={rowsOfComponentWithSlot}>
+
+        <template for:each={rowsOfSlottedContent} for:item="row">
+            <benchmark-table-component-row-light
+                    key={row.id}
+                    class={row.className}
+                    row={row}
+            >
+            </benchmark-table-component-row-light>
+        </template>
+
+    </benchmark-card-component-light>
+</template>

packages/@lwc/perf-benchmarks-components/src/benchmark/slotUsageComponentLight/slotUsageComponentLight.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { LightningElement, api } from 'lwc';
+
+export default class SlotUsageComponentLight extends LightningElement {
+    static renderMode = 'light';
+    @api componentContent;
+    @api rowsOfSlottedContent;
+    @api titleOfComponentWithSlot;
+    @api rowsOfComponentWithSlot;
+}

packages/@lwc/perf-benchmarks-components/src/benchmark/tableComponentRowLight/tableComponentRowLight.html

@@ -0,0 +1,11 @@
+<!--
+Copyright (c) 2018, salesforce.com, inc.
+All rights reserved.
+SPDX-License-Identifier: MIT
+For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+-->
+<template lwc:render-mode="light">
+    <span>{row.id}</span>
+    <div><a onclick={handleSelect} data-id={row.id}>{row.label}</a></div>
+    <div><a onclick={handleRemove} data-id={row.id}>Remove</a></div>
+</template>

packages/@lwc/perf-benchmarks-components/src/benchmark/tableComponentRowLight/tableComponentRowLight.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { LightningElement, api } from 'lwc';
+
+export default class TableComponentRowLight extends LightningElement {
+    static renderMode = 'light';
+    @api row;
+
+    handleSelect() {
+        this.dispatchEvent(new CustomEvent('select'));
+    }
+
+    handleRemove() {
+        this.dispatchEvent(new CustomEvent('remove'));
+    }
+}

packages/@lwc/perf-benchmarks/src/__benchmarks__/engine-dom/benchmark-slot-light/light-slot-create-container-5k.benchmark.js

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { createElement } from '@lwc/engine-dom';
+
+import SlotUsage from '@lwc/perf-benchmarks-components/dist/dom/benchmark/slotUsageComponentLight/slotUsageComponentLight.js';
+import Store from '@lwc/perf-benchmarks-components/dist/dom/benchmark/store/store.js';
+import { insertComponent, destroyComponent } from '../../../utils/utils.js';
+
+const NUMBER_OF_ROWS = 5000;
+
+benchmark(`dom/slot/light/create/5k`, () => {
+    let slottingComponent;
+    let rowsOfComponentWithSlot;
+    let rowsOfSlottedContent;
+
+    before(() => {
+        slottingComponent = createElement('benchmark-slot-usage-component-light', {
+            is: SlotUsage,
+        });
+        const store = new Store();
+
+        rowsOfComponentWithSlot = store.buildData(NUMBER_OF_ROWS);
+        rowsOfSlottedContent = store.buildData(NUMBER_OF_ROWS);
+        return insertComponent(slottingComponent);
+    });
+
+    run(() => {
+        slottingComponent.componentContent = 'Parent component slotting content to child cmp';
+        slottingComponent.rowsOfSlottedContent = rowsOfSlottedContent;
+        slottingComponent.titleOfComponentWithSlot = 'Component that receives a slot';
+        slottingComponent.rowsOfComponentWithSlot = rowsOfComponentWithSlot;
+    });
+
+    after(() => {
+        destroyComponent(slottingComponent);
+    });
+});

packages/@lwc/perf-benchmarks/src/__benchmarks__/engine-dom/benchmark-slot-light/light-slot-update-slotted-content-5k.benchmark.js

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { createElement } from '@lwc/engine-dom';
+
+import SlotUsage from '@lwc/perf-benchmarks-components/dist/dom/benchmark/slotUsageComponentLight/slotUsageComponentLight.js';
+import Store from '@lwc/perf-benchmarks-components/dist/dom/benchmark/store/store.js';
+import { insertComponent, destroyComponent } from '../../../utils/utils.js';
+
+const NUMBER_OF_ROWS = 5000;
+
+benchmark(`dom/slot/light/update-slotted-content/5k`, () => {
+    let slottingComponent;
+    let nextData;
+
+    before(async () => {
+        slottingComponent = createElement('benchmark-slot-usage-component-light', {
+            is: SlotUsage,
+        });
+
+        const store = new Store();
+
+        slottingComponent.componentContent = 'Parent component slotting content to child cmp';
+        slottingComponent.titleOfComponentWithSlot = 'Component that receives a slot';
+        slottingComponent.rowsOfSlottedContent = store.buildData(NUMBER_OF_ROWS);
+        slottingComponent.rowsOfComponentWithSlot = store.buildData(NUMBER_OF_ROWS);
+
+        nextData = store.buildData(NUMBER_OF_ROWS);
+
+        await insertComponent(slottingComponent);
+    });
+
+    run(() => {
+        slottingComponent.rowsOfSlottedContent = nextData;
+    });
+
+    after(() => {
+        destroyComponent(slottingComponent);
+    });
+});

packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/slots/light-slot-create-container-5k.benchmark.js

@@ -0,0 +1,29 @@
+import { renderComponent } from '@lwc/ssr-runtime';
+import SlotUsage from '@lwc/perf-benchmarks-components/dist/ssr/benchmark/slotUsageComponentLight/slotUsageComponentLight.js';
+import Store from '@lwc/perf-benchmarks-components/dist/ssr/benchmark/store/store.js';
+
+const SSR_MODE = 'asyncYield';
+const NUMBER_OF_ROWS = 5000;
+
+benchmark(`ssr/slot/light/create/5k`, () => {
+    let store;
+    let rowsOfComponentWithSlot;
+    let rowsOfSlottedContent;
+
+    before(() => {
+        store = new Store();
+        rowsOfComponentWithSlot = store.buildData(NUMBER_OF_ROWS);
+        rowsOfSlottedContent = store.buildData(NUMBER_OF_ROWS);
+    });
+
+    run(() => {
+        const props = {
+            rows: store.data,
+            componentContent: 'Parent component slotting content to child cmp',
+            rowsOfSlottedContent: rowsOfSlottedContent,
+            titleOfComponentWithSlot: 'Component that receives a slot',
+            rowsOfComponentWithSlot: rowsOfComponentWithSlot,
+        };
+        return renderComponent('benchmark-slot-usage-component-light', SlotUsage, props, SSR_MODE);
+    });
+});