test: add benchmarks for light mode and mixed mode (#2497)

salesforce · Sep 17, 2021 · bca4d26 · bca4d26
1 parent 849abb6
commit bca4d26
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 30 deletions.
diff --git a/packages/perf-benchmarks-components/scripts/generate-styled-components.js b/packages/perf-benchmarks-components/scripts/generate-styled-components.js
@@ -16,40 +16,67 @@ const NUM_COMPONENTS = 1000;
 // filters virtual modules, so it's simpler to just write to a temp dir.
 export function generateStyledComponents() {
     const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'lwc-'));
+    const styledComponents = [];
+    const flavors = ['light', 'shadow'];
 
-    const components = Array(NUM_COMPONENTS)
-        .fill()
-        .map((_, i) =>
-            path.join(tmpDir, `src/benchmark/styledComponent${i}/styledComponent${i}.js`)
-        );
+    // Generate one version for light and another for shadow.
+    // We have to do this because light DOM components need modifications both to the
+    // template and the component.
+    for (const flavor of flavors) {
+        const components = Array(NUM_COMPONENTS)
+            .fill()
+            .map((_, i) =>
+                path.join(
+                    tmpDir,
+                    `src/benchmark/${flavor}/styledComponent${i}/styledComponent${i}.js`
+                )
+            );
+
+        components.forEach((jsFilename, i) => {
+            const cssFilename = jsFilename.replace('.js', '.css');
+            const htmlFilename = jsFilename.replace('.js', '.html');
 
-    components.forEach((jsFilename, i) => {
-        const cssFilename = jsFilename.replace('.js', '.css');
-        const htmlFilename = jsFilename.replace('.js', '.html');
+            const js = `
+                import { LightningElement } from "lwc";
+                export default class extends LightningElement {
+                    ${flavor === 'light' ? 'static renderMode = "light";' : ''}
+                }`;
+            const css = `
+                .cmp-${i} {
+                  color: #${i.toString(16).padStart(6, '0')};
+                }`;
+            const html = `
+                <template ${flavor === 'light' ? 'lwc:render-mode="light"' : ''}>
+                  <div class="cmp-${i}">Hello world</div>
+                </template>`;
 
-        const js =
-            'import { LightningElement } from "lwc"; export default class extends LightningElement {}';
-        const css = `div { color: ${i.toString(16).padStart(6, '0')}}`;
-        const html = '<template><div></div></template>';
+            fs.mkdirSync(path.dirname(jsFilename), { recursive: true });
+            fs.writeFileSync(jsFilename, js, 'utf-8');
+            fs.writeFileSync(cssFilename, css, 'utf-8');
+            fs.writeFileSync(htmlFilename, html, 'utf-8');
+        });
 
-        fs.mkdirSync(path.dirname(jsFilename), { recursive: true });
-        fs.writeFileSync(jsFilename, js, 'utf-8');
-        fs.writeFileSync(cssFilename, css, 'utf-8');
-        fs.writeFileSync(htmlFilename, html, 'utf-8');
-    });
+        const oneComponentFilename = path.join(
+            tmpDir,
+            `src/benchmark/${flavor}/styledComponent.js`
+        );
+        const oneComponent = `export { default } from ${JSON.stringify(components[0])};`;
+        fs.writeFileSync(oneComponentFilename, oneComponent, 'utf-8');
 
-    const oneComponentFilename = path.join(tmpDir, 'src/benchmark/styledComponent.js');
-    const oneComponent = `export { default } from ${JSON.stringify(components[0])};`;
-    fs.writeFileSync(oneComponentFilename, oneComponent, 'utf-8');
+        const allComponentsFilename = path.join(
+            tmpDir,
+            `src/benchmark/${flavor}/styledComponents.js`
+        );
+        const allComponents = `
+            ${components.map((mod, i) => `import cmp${i} from ${JSON.stringify(mod)}`).join(';')};
+            export default [${components.map((_, i) => `cmp${i}`).join(',')}];`;
+        fs.writeFileSync(allComponentsFilename, allComponents, 'utf-8');
 
-    const allComponentsFilename = path.join(tmpDir, 'src/benchmark/styledComponents.js');
-    const allComponents = `
-        ${components.map((mod, i) => `import cmp${i} from ${JSON.stringify(mod)}`).join(';')};
-        export default [${components.map((_, i) => `cmp${i}`).join(',')}];`;
-    fs.writeFileSync(allComponentsFilename, allComponents, 'utf-8');
+        styledComponents.push(oneComponentFilename, allComponentsFilename);
+    }
 
     return {
-        styledComponents: [oneComponentFilename, allComponentsFilename],
+        styledComponents,
         tmpDir,
     };
 }
diff --git a/...ne-dom/benchmark-styled-component/light-styled-component-create-1k-different.benchmark.js b/...ne-dom/benchmark-styled-component/light-styled-component-create-1k-different.benchmark.js
@@ -0,0 +1,13 @@
+/*
+ * 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 'perf-benchmarks-components/dist/dom/benchmark/light/styledComponents.js';
+import { styledComponentBenchmark } from '../../../utils/styledComponentBenchmark';
+
+// Create 1k components with different CSS in each component
+// These are light DOM components running in native mode
+styledComponentBenchmark(`benchmark-styled-component/create/1k/different`, components);
diff --git a/.../engine-dom/benchmark-styled-component/light-styled-component-create-1k-same.benchmark.js b/.../engine-dom/benchmark-styled-component/light-styled-component-create-1k-same.benchmark.js
@@ -0,0 +1,13 @@
+/*
+ * 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 'perf-benchmarks-components/dist/dom/benchmark/light/styledComponent.js';
+import { styledComponentBenchmark } from '../../../utils/styledComponentBenchmark';
+
+// Create 1k components with the same CSS in each component
+// These are light DOM components running in native mode
+styledComponentBenchmark(`benchmark-styled-component/create/1k/same`, StyledComponent);
diff --git a/...om/benchmark-styled-component/ss-native-styled-component-create-1k-different.benchmark.js b/...om/benchmark-styled-component/ss-native-styled-component-create-1k-different.benchmark.js
@@ -0,0 +1,17 @@
+/*
+ * 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 'perf-benchmarks-components/dist/dom/benchmark/shadow/styledComponents.js';
+import { styledComponentBenchmark } from '../../../utils/styledComponentBenchmark';
+
+// Create 1k components with different CSS in each component
+// These components are native, but run with synthetic shadow loaded (mixed mode)
+window.lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE = true;
+for (const component of components) {
+    component.shadowSupportMode = 'any';
+}
+styledComponentBenchmark(`ss-benchmark-styled-component/create/1k/different`, components);
diff --git a/...ine-dom/benchmark-styled-component/ss-native-styled-component-create-1k-same.benchmark.js b/...ine-dom/benchmark-styled-component/ss-native-styled-component-create-1k-same.benchmark.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 StyledComponent from 'perf-benchmarks-components/dist/dom/benchmark/shadow/styledComponent.js';
+import { styledComponentBenchmark } from '../../../utils/styledComponentBenchmark';
+
+// Create 1k components with the same CSS in each component
+// These components are native, but run with synthetic shadow loaded (mixed mode)
+window.lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE = true;
+StyledComponent.shadowSupportMode = 'any';
+styledComponentBenchmark(`ss-benchmark-styled-component/create/1k/same`, StyledComponent);
diff --git a/...ngine-dom/benchmark-styled-component/ss-styled-component-create-1k-different.benchmark.js b/...ngine-dom/benchmark-styled-component/ss-styled-component-create-1k-different.benchmark.js
@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 
-import components from 'perf-benchmarks-components/dist/dom/benchmark/styledComponents.js';
+import components from 'perf-benchmarks-components/dist/dom/benchmark/shadow/styledComponents.js';
 import { styledComponentBenchmark } from '../../../utils/styledComponentBenchmark';
 
 // Create 1k components with different CSS in each component

diff --git a/...s__/engine-dom/benchmark-styled-component/ss-styled-component-create-1k-same.benchmark.js b/...s__/engine-dom/benchmark-styled-component/ss-styled-component-create-1k-same.benchmark.js
@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 
-import StyledComponent from 'perf-benchmarks-components/dist/dom/benchmark/styledComponent.js';
+import StyledComponent from 'perf-benchmarks-components/dist/dom/benchmark/shadow/styledComponent.js';
 import { styledComponentBenchmark } from '../../../utils/styledComponentBenchmark';
 
 // Create 1k components with the same CSS in each component

diff --git a/..._/engine-dom/benchmark-styled-component/styled-component-create-1k-different.benchmark.js b/..._/engine-dom/benchmark-styled-component/styled-component-create-1k-different.benchmark.js
@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 
-import components from 'perf-benchmarks-components/dist/dom/benchmark/styledComponents.js';
+import components from 'perf-benchmarks-components/dist/dom/benchmark/shadow/styledComponents.js';
 import { styledComponentBenchmark } from '../../../utils/styledComponentBenchmark';
 
 // Create 1k components with different CSS in each component

diff --git a/...arks__/engine-dom/benchmark-styled-component/styled-component-create-1k-same.benchmark.js b/...arks__/engine-dom/benchmark-styled-component/styled-component-create-1k-same.benchmark.js
@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 
-import StyledComponent from 'perf-benchmarks-components/dist/dom/benchmark/styledComponent.js';
+import StyledComponent from 'perf-benchmarks-components/dist/dom/benchmark/shadow/styledComponent.js';
 import { styledComponentBenchmark } from '../../../utils/styledComponentBenchmark';
 
 // Create 1k components with the same CSS in each component