fix(ssr): infer the SSR mode in renderComponent (#4820)

salesforce · Nov 12, 2024 · d47c56c · d47c56c
1 parent f1dc3fa
commit d47c56c
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 31 deletions.
diff --git a/...s/@lwc/perf-benchmarks/src/__benchmarks__/ssr/slots/slot-create-container-5k.benchmark.js b/...s/@lwc/perf-benchmarks/src/__benchmarks__/ssr/slots/slot-create-container-5k.benchmark.js
@@ -2,7 +2,6 @@ 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`, () => {
@@ -24,6 +23,6 @@ benchmark(`ssr/slot/shadow/create/5k`, () => {
             titleOfComponentWithSlot: 'Component that receives a slot',
             rowsOfComponentWithSlot: rowsOfComponentWithSlot,
         };
-        return renderComponent('benchmark-slot-usage-component', SlotUsage, props, SSR_MODE);
+        return renderComponent('benchmark-slot-usage-component', SlotUsage, props);
     });
 });
diff --git a/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/table/table-render-10k.benchmark.js b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/table/table-render-10k.benchmark.js
@@ -10,20 +10,13 @@ import { renderComponent } from '@lwc/ssr-runtime';
 import Table from '@lwc/perf-benchmarks-components/dist/ssr/benchmark/table/table.js';
 import Store from '@lwc/perf-benchmarks-components/dist/ssr/benchmark/store/store.js';
 
-const SSR_MODE = 'asyncYield';
-
 benchmark(`ssr/table-v2/render/10k`, () => {
     run(() => {
         const store = new Store();
         store.runLots();
 
-        return renderComponent(
-            'benchmark-table',
-            Table,
-            {
-                rows: store.data,
-            },
-            SSR_MODE
-        );
+        return renderComponent('benchmark-table', Table, {
+            rows: store.data,
+        });
     });
 });
diff --git a/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/table/tablecmp-render-10k.benchmark.js b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/table/tablecmp-render-10k.benchmark.js
@@ -10,20 +10,13 @@ import { renderComponent } from '@lwc/ssr-runtime';
 import Table from '@lwc/perf-benchmarks-components/dist/ssr/benchmark/tableComponent/tableComponent.js';
 import Store from '@lwc/perf-benchmarks-components/dist/ssr/benchmark/store/store.js';
 
-const SSR_MODE = 'asyncYield';
-
 benchmark(`ssr/table-component/render/10k`, () => {
     run(() => {
         const store = new Store();
         store.runLots();
 
-        return renderComponent(
-            'benchmark-table',
-            Table,
-            {
-                rows: store.data,
-            },
-            SSR_MODE
-        );
+        return renderComponent('benchmark-table', Table, {
+            rows: store.data,
+        });
     });
 });
diff --git a/packages/@lwc/perf-benchmarks/src/utils/styledComponentSsrBenchmark.js b/packages/@lwc/perf-benchmarks/src/utils/styledComponentSsrBenchmark.js
@@ -1,7 +1,5 @@
 import { renderComponent } from '@lwc/ssr-runtime';
 
-const SSR_MODE = 'asyncYield';
-
 // Generic benchmark for styled components, SSR-flavored!
 export function styledComponentSsrBenchmark(
     name,
@@ -17,8 +15,7 @@ export function styledComponentSsrBenchmark(
                 await renderComponent(
                     isArray ? `styled-component${i}` : 'styled-component',
                     isArray ? componentOrComponents[i] : componentOrComponents,
-                    {},
-                    SSR_MODE
+                    {}
                 );
             }
         });

diff --git a/packages/@lwc/ssr-compiler/src/__tests__/fixtures.spec.ts b/packages/@lwc/ssr-compiler/src/__tests__/fixtures.spec.ts
@@ -109,8 +109,7 @@ describe.runIf(process.env.TEST_SSR_COMPILER).concurrent('fixtures', () => {
                 result = await serverSideRenderComponent(
                     module!.tagName,
                     module!.default,
-                    config?.props ?? {},
-                    SSR_MODE
+                    config?.props ?? {}
                 );
             } catch (err: any) {
                 return {

diff --git a/packages/@lwc/ssr-runtime/package.json b/packages/@lwc/ssr-runtime/package.json
@@ -45,6 +45,7 @@
     },
     "devDependencies": {
         "@lwc/shared": "8.7.0",
+        "@lwc/ssr-compiler": "8.7.0",
         "@lwc/engine-core": "8.7.0",
         "observable-membrane": "2.0.0"
     }

diff --git a/packages/@lwc/ssr-runtime/src/render.ts b/packages/@lwc/ssr-runtime/src/render.ts
@@ -4,14 +4,15 @@
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-
+import { isGeneratorFunction, isAsyncFunction } from 'node:util/types';
 import { mutationTracker } from './mutation-tracker';
 import {
     LightningElement,
     LightningElementConstructor,
     SYMBOL__GENERATE_MARKUP,
 } from './lightning-element';
 import type { Attributes, Properties } from './types';
+import type { CompilationMode } from '@lwc/ssr-compiler';
 
 const escapeAttrVal = (attrVal: string) =>
     attrVal.replaceAll('&', '&amp;').replaceAll('"', '&quot;');
@@ -110,8 +111,7 @@ interface ComponentWithGenerateMarkup {
 export async function serverSideRenderComponent(
     tagName: string,
     Component: GenerateMarkupFnVariants | ComponentWithGenerateMarkup,
-    props: Properties = {},
-    mode: 'asyncYield' | 'async' | 'sync' = 'asyncYield'
+    props: Properties = {}
 ): Promise<string> {
     if (typeof tagName !== 'string') {
         throw new Error(`tagName must be a string, found: ${tagName}`);
@@ -120,6 +120,11 @@ export async function serverSideRenderComponent(
     // TODO [#4726]: remove `generateMarkup` export
     const generateMarkup =
         SYMBOL__GENERATE_MARKUP in Component ? Component[SYMBOL__GENERATE_MARKUP] : Component;
+    const mode: CompilationMode = isAsyncFunction(generateMarkup)
+        ? isGeneratorFunction(generateMarkup)
+            ? 'asyncYield'
+            : 'async'
+        : 'sync';
 
     let markup = '';
     const emit = (segment: string) => {