test(ssr): add styled/slot benchmarks (#4783)

packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/slots/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/slotUsageComponent/slotUsageComponent.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/shadow/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', SlotUsage, props, SSR_MODE);
+    });
+});

packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/light-styled-component-create-10k-same.benchmark.js

@@ -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
+ */
+
+import StyledComponent from '@lwc/perf-benchmarks-components/dist/ssr/benchmark/light/styledComponent.js';
+
+import { styledComponentSsrBenchmark } from '../../../utils/styledComponentSsrBenchmark';
+
+const NUM_COMPONENTS = 10000;
+
+// Create 10k components with the same CSS in each component
+// These are light DOM components running in native mode
+styledComponentSsrBenchmark(
+    `ssr/styled-component/light/create-same/10k`,
+    NUM_COMPONENTS,
+    StyledComponent,
+    { after, before, benchmark, run }
+);

packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/light-styled-component-create-1k-different.benchmark.js

@@ -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
+ */
+
+import components from '@lwc/perf-benchmarks-components/dist/ssr/benchmark/light/styledComponents.js';
+
+import { styledComponentSsrBenchmark } from '../../../utils/styledComponentSsrBenchmark';
+
+const NUM_COMPONENTS = 1000;
+
+// Create 1k components with different CSS in each component
+// These are light DOM components running in native mode
+styledComponentSsrBenchmark(
+    `ssr/styled-component/light/create-different/1k`,
+    NUM_COMPONENTS,
+    components,
+    { after, before, benchmark, run }
+);

packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/styled-component-create-10k-same.benchmark.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 StyledComponent from '@lwc/perf-benchmarks-components/dist/ssr/benchmark/shadow/styledComponent.js';
+
+import { styledComponentSsrBenchmark } from '../../../utils/styledComponentSsrBenchmark';
+
+const NUM_COMPONENTS = 10000;
+
+// Create 10k components with the same CSS in each component
+styledComponentSsrBenchmark(
+    `ssr/styled-component/shadow/create-same/10k`,
+    NUM_COMPONENTS,
+    StyledComponent,
+    { after, before, benchmark, run }
+);

packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/styled-component-create-1k-different.benchmark.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 components from '@lwc/perf-benchmarks-components/dist/ssr/benchmark/shadow/styledComponents.js';
+
+import { styledComponentSsrBenchmark } from '../../../utils/styledComponentSsrBenchmark';
+
+const NUM_COMPONENTS = 1000;
+
+// Create 1k components with different CSS in each component
+styledComponentSsrBenchmark(
+    `ssr/styled-component/shadow/create-different/1k`,
+    NUM_COMPONENTS,
+    components,
+    { after, before, benchmark, run }
+);

packages/@lwc/perf-benchmarks/src/utils/styledComponentSsrBenchmark.js

@@ -0,0 +1,26 @@
+import { renderComponent } from '@lwc/ssr-runtime';
+
+const SSR_MODE = 'asyncYield';
+
+// Generic benchmark for styled components, SSR-flavored!
+export function styledComponentSsrBenchmark(
+    name,
+    numComponents,
+    componentOrComponents,
+    { benchmark, run }
+) {
+    benchmark(name, () => {
+        const isArray = Array.isArray(componentOrComponents);
+
+        run(async () => {
+            for (let i = 0; i < numComponents; i++) {
+                await renderComponent(
+                    isArray ? `styled-component${i}` : 'styled-component',
+                    isArray ? componentOrComponents[i] : componentOrComponents,
+                    {},
+                    SSR_MODE
+                );
+            }
+        });
+    });
+}