From e9db491a604cc477ebdd0378bc3e4a423ea02dd4 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nlawson@salesforce.com>
Date: Thu, 7 Nov 2024 10:59:48 -0800
Subject: [PATCH] test(ssr): add styled/slot benchmarks (#4783)

---
 .../slot-create-container-5k.benchmark.js     | 29 +++++++++++++++++++
 ...led-component-create-10k-same.benchmark.js | 21 ++++++++++++++
 ...component-create-1k-different.benchmark.js | 21 ++++++++++++++
 ...led-component-create-10k-same.benchmark.js | 20 +++++++++++++
 ...component-create-1k-different.benchmark.js | 20 +++++++++++++
 .../{ => table}/table-render-10k.benchmark.js |  0
 .../tablecmp-render-10k.benchmark.js          |  0
 .../src/utils/styledComponentSsrBenchmark.js  | 26 +++++++++++++++++
 8 files changed, 137 insertions(+)
 create mode 100644 packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/slots/slot-create-container-5k.benchmark.js
 create mode 100644 packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/light-styled-component-create-10k-same.benchmark.js
 create mode 100644 packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/light-styled-component-create-1k-different.benchmark.js
 create mode 100644 packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/styled-component-create-10k-same.benchmark.js
 create mode 100644 packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/styled-component-create-1k-different.benchmark.js
 rename packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/{ => table}/table-render-10k.benchmark.js (100%)
 rename packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/{ => table}/tablecmp-render-10k.benchmark.js (100%)
 create mode 100644 packages/@lwc/perf-benchmarks/src/utils/styledComponentSsrBenchmark.js

diff --git a/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/slots/slot-create-container-5k.benchmark.js b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/slots/slot-create-container-5k.benchmark.js
new file mode 100644
index 0000000000..ad9cc582a9
--- /dev/null
+++ b/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);
+    });
+});
diff --git a/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/light-styled-component-create-10k-same.benchmark.js b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/light-styled-component-create-10k-same.benchmark.js
new file mode 100644
index 0000000000..d5a9f3f3e2
--- /dev/null
+++ b/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 }
+);
diff --git a/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/light-styled-component-create-1k-different.benchmark.js b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/light-styled-component-create-1k-different.benchmark.js
new file mode 100644
index 0000000000..efd7cae4ee
--- /dev/null
+++ b/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 }
+);
diff --git a/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/styled-component-create-10k-same.benchmark.js b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/styled-component-create-10k-same.benchmark.js
new file mode 100644
index 0000000000..e04db32555
--- /dev/null
+++ b/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 }
+);
diff --git a/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/styled-component-create-1k-different.benchmark.js b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/styled-component-create-1k-different.benchmark.js
new file mode 100644
index 0000000000..0f0c7fcc2c
--- /dev/null
+++ b/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 }
+);
diff --git a/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/table-render-10k.benchmark.js b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/table/table-render-10k.benchmark.js
similarity index 100%
rename from packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/table-render-10k.benchmark.js
rename to packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/table/table-render-10k.benchmark.js
diff --git a/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/tablecmp-render-10k.benchmark.js b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/table/tablecmp-render-10k.benchmark.js
similarity index 100%
rename from packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/tablecmp-render-10k.benchmark.js
rename to packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/table/tablecmp-render-10k.benchmark.js
diff --git a/packages/@lwc/perf-benchmarks/src/utils/styledComponentSsrBenchmark.js b/packages/@lwc/perf-benchmarks/src/utils/styledComponentSsrBenchmark.js
new file mode 100644
index 0000000000..4767016b48
--- /dev/null
+++ b/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
+                );
+            }
+        });
+    });
+}