feat: add dynamic components for @lwc/ssr-compiler

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-component-invalid-ctor/error.txt

@@ -0,0 +1 @@
+Invalid constructor frankenstein is not a LightningElement constructor.

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-component-invalid-ctor/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-dynamic-component-invalid-ctor';
+export { default } from 'x/dynamic-invalid-ctor';
+export * from 'x/dynamic-invalid-ctor';

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-component-invalid-ctor/modules/x/dynamic-invalid-ctor/dynamic-invalid-ctor.html

@@ -0,0 +1,3 @@
+<template>
+    <lwc:component lwc:is={customCtor}></lwc:component>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-component-invalid-ctor/modules/x/dynamic-invalid-ctor/dynamic-invalid-ctor.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    customCtor = 'frankenstein';
+}

packages/@lwc/ssr-compiler/src/compile-js/generate-markup.ts

@@ -10,6 +10,7 @@ import { is, builders as b } from 'estree-toolkit';
 import { esTemplate } from '../estemplate';
 import { isIdentOrRenderCall } from '../estree/validators';
 import { bImportDeclaration, bImportDefaultDeclaration } from '../estree/builders';
+import { TransformOptions } from '../shared';
 import { bWireAdaptersPlumbing } from './wire';
 
 import type {
@@ -30,6 +31,7 @@ type RenderCallExpression = SimpleCallExpression & {
 
 const bGenerateMarkup = esTemplate`
     export async function* generateMarkup(tagName, props, attrs, slotted, parent, scopeToken) {
+        tagName = tagName ?? ${/*component tag name*/ is.literal}
         attrs = attrs ?? Object.create(null);
         props = props ?? Object.create(null);
         props = __filterProperties(
@@ -87,10 +89,17 @@ const bAssignGenerateMarkupToComponentClass = esTemplate`
 export function addGenerateMarkupExport(
     program: Program,
     state: ComponentMetaState,
+    options: TransformOptions,
     filename: string
 ) {
     const { hasRenderMethod, privateFields, publicFields, tmplExplicitImports } = state;
+    const { namespace, name } = options;
 
+    // The default tag name represents the component name that's passed to the transformer.
+    // This is needed to generate markup for dynamic components which are invoked through
+    // the generateMarkup function on the constructor.
+    // At the time of generation, the invoker does not have reference to its tag name to pass as an argument.
+    const defaultTagName = b.literal(`${namespace}-${name}`);
     const classIdentifier = b.identifier(state.lwcClassName!);
     const renderCall = hasRenderMethod
         ? (b.callExpression(
@@ -126,6 +135,7 @@ export function addGenerateMarkupExport(
     program.body.unshift(bImportDeclaration(['hasScopedStaticStylesheets']));
     program.body.push(
         bGenerateMarkup(
+            defaultTagName,
             b.arrayExpression(publicFields.map(b.literal)),
             b.arrayExpression(privateFields.map(b.literal)),
             classIdentifier,

packages/@lwc/ssr-compiler/src/compile-js/index.ts

@@ -18,7 +18,7 @@ import { catalogWireAdapters } from './wire';
 
 import type { Identifier as EsIdentifier, Program as EsProgram, Expression } from 'estree';
 import type { Visitors, ComponentMetaState } from './types';
-import type { CompilationMode } from '../shared';
+import type { CompilationMode, TransformOptions } from '../shared';
 import type {
     PropertyDefinition as DecoratatedPropertyDefinition,
     MethodDefinition as DecoratatedMethodDefinition,
@@ -148,7 +148,12 @@ const visitors: Visitors = {
     },
 };
 
-export default function compileJS(src: string, filename: string, compilationMode: CompilationMode) {
+export default function compileJS(
+    src: string,
+    filename: string,
+    options: TransformOptions,
+    compilationMode: CompilationMode
+) {
     let ast = parseModule(src, {
         module: true,
         next: true,
@@ -183,7 +188,8 @@ export default function compileJS(src: string, filename: string, compilationMode
         };
     }
 
-    addGenerateMarkupExport(ast, state, filename);
+    // Add the tag name here, either export tag name as additional export or just attach it to the class
+    addGenerateMarkupExport(ast, state, options, filename);
     assignGenerateMarkupToComponent(ast, state);
 
     if (compilationMode === 'async' || compilationMode === 'sync') {

packages/@lwc/ssr-compiler/src/compile-template/ir-to-es.ts

@@ -16,6 +16,7 @@ import { If, IfBlock } from './transformers/if';
 import { Slot } from './transformers/slot';
 import { Text } from './transformers/text';
 import { createNewContext } from './context';
+import { LwcComponent } from './transformers/lwc-component';
 
 import type {
     ChildNode as IrChildNode,
@@ -58,7 +59,7 @@ const transformers: Transformers = {
     ElseBlock: defaultTransformer,
     ScopedSlotFragment: defaultTransformer,
     Slot,
-    Lwc: defaultTransformer,
+    Lwc: LwcComponent,
 };
 
 export function irChildrenToEs(children: IrChildNode[], cxt: TransformerContext): EsStatement[] {

packages/@lwc/ssr-compiler/src/compile-template/shared.ts

@@ -6,16 +6,24 @@
  */
 
 import { builders as b, is } from 'estree-toolkit';
-import { StringReplace, StringTrim } from '@lwc/shared';
-import { Node as IrNode } from '@lwc/template-compiler';
+import {
+    Node as IrNode,
+    Attribute as IrAttribute,
+    Property as IrProperty,
+} from '@lwc/template-compiler';
+import { normalizeStyleAttributeValue } from '@lwc/shared';
 
 import { bImportDeclaration } from '../estree/builders';
+import { isValidIdentifier } from '../shared';
 import { TransformerContext } from './types';
+import { expressionIrToEs } from './expression';
 import type {
     Statement as EsStatement,
     Expression as EsExpression,
     MemberExpression as EsMemberExpression,
     Identifier as EsIdentifier,
+    ObjectExpression as EsObjectExpression,
+    Property as EsProperty,
 } from 'estree';
 
 export const bImportHtmlEscape = () => bImportDeclaration(['htmlEscape']);
@@ -95,3 +103,38 @@ export function normalizeClassAttributeValue(value: string) {
     // @ts-expect-error weird indirection results in wrong overload being picked up
     return StringReplace.call(StringTrim.call(value), /\s+/g, ' ');
 }
+
+export function getChildAttrsOrProps(
+    attrs: (IrAttribute | IrProperty)[],
+    cxt: TransformerContext
+): EsObjectExpression {
+    const objectAttrsOrProps = attrs
+        .map(({ name, value, type }) => {
+            const key = isValidIdentifier(name) ? b.identifier(name) : b.literal(name);
+            if (value.type === 'Literal' && typeof value.value === 'string') {
+                let literalValue = value.value;
+                if (name === 'style') {
+                    literalValue = normalizeStyleAttributeValue(literalValue);
+                } else if (name === 'class') {
+                    literalValue = normalizeClassAttributeValue(literalValue);
+                    if (literalValue === '') {
+                        return; // do not render empty `class=""`
+                    }
+                }
+                return b.property('init', key, b.literal(literalValue));
+            } else if (value.type === 'Literal' && typeof value.value === 'boolean') {
+                if (name === 'class') {
+                    return; // do not render empty `class=""`
+                }
+
+                return b.property('init', key, b.literal(type === 'Attribute' ? '' : value.value));
+            } else if (value.type === 'Identifier' || value.type === 'MemberExpression') {
+                const propValue = expressionIrToEs(value, cxt);
+                return b.property('init', key, propValue);
+            }
+            throw new Error(`Unimplemented child attr IR node type: ${value.type}`);
+        })
+        .filter(Boolean) as EsProperty[];
+
+    return b.objectExpression(objectAttrsOrProps);
+}

packages/@lwc/ssr-compiler/src/compile-template/transformers/component.ts

@@ -8,34 +8,15 @@
 import { produce } from 'immer';
 import { builders as b, is } from 'estree-toolkit';
 import { kebabcaseToCamelcase, ScopedSlotFragment, toPropertyName } from '@lwc/template-compiler';
-import { normalizeStyleAttributeValue } from '@lwc/shared';
+import { bAttributeValue, getChildAttrsOrProps, optimizeAdjacentYieldStmts } from '../shared';
 import { esTemplate, esTemplateWithYield } from '../../estemplate';
-import { isValidIdentifier } from '../../shared';
-import {
-    bAttributeValue,
-    normalizeClassAttributeValue,
-    optimizeAdjacentYieldStmts,
-} from '../shared';
-import { TransformerContext } from '../types';
-import { expressionIrToEs } from '../expression';
 import { irChildrenToEs, irToEs } from '../ir-to-es';
 import { isNullableOf } from '../../estree/validators';
 import { bImportDeclaration } from '../../estree/builders';
-import type {
-    CallExpression as EsCallExpression,
-    Expression as EsExpression,
-    Property as EsProperty,
-} from 'estree';
-
-import type {
-    BlockStatement as EsBlockStatement,
-    ObjectExpression as EsObjectExpression,
-} from 'estree';
-import type {
-    Attribute as IrAttribute,
-    Component as IrComponent,
-    Property as IrProperty,
-} from '@lwc/template-compiler';
+import type { CallExpression as EsCallExpression, Expression as EsExpression } from 'estree';
+
+import type { BlockStatement as EsBlockStatement } from 'estree';
+import type { Component as IrComponent } from '@lwc/template-compiler';
 import type { Transformer } from '../types';
 
 const bYieldFromChildGenerator = esTemplateWithYield`
@@ -93,41 +74,6 @@ const bImportGenerateMarkup = (localName: string, importPath: string) =>
         b.literal(importPath)
     );
 
-function getChildAttrsOrProps(
-    attrs: (IrAttribute | IrProperty)[],
-    cxt: TransformerContext
-): EsObjectExpression {
-    const objectAttrsOrProps = attrs
-        .map(({ name, value, type }) => {
-            const key = isValidIdentifier(name) ? b.identifier(name) : b.literal(name);
-            if (value.type === 'Literal' && typeof value.value === 'string') {
-                let literalValue = value.value;
-                if (name === 'style') {
-                    literalValue = normalizeStyleAttributeValue(literalValue);
-                } else if (name === 'class') {
-                    literalValue = normalizeClassAttributeValue(literalValue);
-                    if (literalValue === '') {
-                        return; // do not render empty `class=""`
-                    }
-                }
-                return b.property('init', key, b.literal(literalValue));
-            } else if (value.type === 'Literal' && typeof value.value === 'boolean') {
-                if (name === 'class') {
-                    return; // do not render empty `class=""`
-                }
-
-                return b.property('init', key, b.literal(type === 'Attribute' ? '' : value.value));
-            } else if (value.type === 'Identifier' || value.type === 'MemberExpression') {
-                const propValue = expressionIrToEs(value, cxt);
-                return b.property('init', key, propValue);
-            }
-            throw new Error(`Unimplemented child attr IR node type: ${value.type}`);
-        })
-        .filter(Boolean) as EsProperty[];
-
-    return b.objectExpression(objectAttrsOrProps);
-}
-
 export const Component: Transformer<IrComponent> = function Component(node, cxt) {
     // Import the custom component's generateMarkup export.
     const childGeneratorLocalName = `generateMarkup_${toPropertyName(node.name)}`;

packages/@lwc/ssr-compiler/src/compile-template/transformers/lwc-component.ts

@@ -0,0 +1,103 @@
+/*
+ * Copyright (c) 2024, 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 { builders as b, is } from 'estree-toolkit';
+import { isUndefined } from '@lwc/shared';
+import { Transformer } from '../types';
+import { expressionIrToEs } from '../expression';
+import { esTemplate, esTemplateWithYield } from '../../estemplate';
+import { bImportDeclaration } from '../../estree/builders';
+import { getChildAttrsOrProps } from '../shared';
+import type {
+    LwcComponent as IrLwcComponent,
+    Expression as IrExpression,
+} from '@lwc/template-compiler';
+import type { BlockStatement as EsBlockStatement, Expression, Statement } from 'estree';
+
+const bYieldFromDynamicComponentConstructorGenerator = esTemplateWithYield`
+    {
+        const childProps = __cloneAndDeepFreeze(${/* child props */ is.objectExpression});
+        const childAttrs = ${/* child attrs */ is.objectExpression};
+        yield* ${/*component ctor*/ is.expression}[SYMBOL__GENERATE_MARKUP](null, childProps, childAttrs);
+    }
+`<EsBlockStatement>;
+
+const bThrowErrorForInvalidConstructor = esTemplate`
+    {
+        throw new Error(\`Invalid constructor \${String(${/*component ctor*/ is.expression})} is not a LightningElement constructor.\`)
+    }
+`<EsBlockStatement>;
+
+function bIfLwcIsExpressionDefined(lwcIsExpression: Expression, consequent: Statement) {
+    // instance.lwcIsValue !== undefined && instance.lwcIsValue !== null
+    const lwcIsExpressionDefined = b.logicalExpression(
+        '&&',
+        b.binaryExpression('!==', lwcIsExpression, b.identifier('undefined')),
+        b.binaryExpression('!==', lwcIsExpression, b.identifier('null'))
+    );
+
+    return b.ifStatement(lwcIsExpressionDefined, b.blockStatement([consequent]));
+}
+
+function bifLwcIsExpressionTypeCorrect(
+    lwcIsExpression: Expression,
+    consequent: Statement,
+    alternate: Statement
+) {
+    // typeof instance.lwcIsValue === 'function'
+    const typeComparison = b.binaryExpression(
+        '===',
+        b.unaryExpression('typeof', lwcIsExpression),
+        b.literal('function')
+    );
+
+    // instance.lwcIsValue.prototype instanceof LightningElement
+    const protoComparison = b.binaryExpression(
+        'instanceof',
+        b.memberExpression(lwcIsExpression, b.identifier('prototype')),
+        b.identifier('LightningElement')
+    );
+
+    const comparison = b.logicalExpression('&&', typeComparison, protoComparison);
+
+    return b.ifStatement(comparison, consequent, alternate);
+}
+
+export const LwcComponent: Transformer<IrLwcComponent> = function LwcComponent(node, cxt) {
+    const { directives } = node;
+
+    const lwcIs = directives.find((directive) => directive.name === 'Is');
+    if (!isUndefined(lwcIs)) {
+        cxt.hoist(bImportDeclaration(['LightningElement']), 'import:LightningElement');
+        cxt.hoist(
+            bImportDeclaration(['SYMBOL__GENERATE_MARKUP']),
+            'import:SYMBOL__GENERATE_MARKUP'
+        );
+        cxt.hoist(
+            bImportDeclaration([{ cloneAndDeepFreeze: '__cloneAndDeepFreeze' }]),
+            'import:cloneAndDeepFreeze'
+        );
+
+        // The template compiler has validation to prevent lwcIs.value from being a literal
+        const lwcIsExpression = expressionIrToEs(lwcIs.value as IrExpression, cxt);
+        return [
+            bIfLwcIsExpressionDefined(
+                lwcIsExpression,
+                bifLwcIsExpressionTypeCorrect(
+                    lwcIsExpression,
+                    bYieldFromDynamicComponentConstructorGenerator(
+                        getChildAttrsOrProps(node.properties, cxt),
+                        getChildAttrsOrProps(node.attributes, cxt),
+                        lwcIsExpression
+                    ),
+                    bThrowErrorForInvalidConstructor(lwcIsExpression)
+                )
+            ),
+        ];
+    } else {
+        return [];
+    }
+};

packages/@lwc/ssr-compiler/src/index.ts

@@ -19,10 +19,10 @@ export type { CompilationMode };
 export function compileComponentForSSR(
     src: string,
     filename: string,
-    _options: TransformOptions,
+    options: TransformOptions,
     mode: CompilationMode = 'asyncYield'
 ): CompilationResult {
-    const { code } = compileJS(src, filename, mode);
+    const { code } = compileJS(src, filename, options, mode);
     return { code, map: undefined };
 }