refactor(ssr): add back references to esTemplate and infer types

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dynamic/config.json

@@ -0,0 +1,6 @@
+{
+  "ssrFiles": {
+    "error": "error-ssr.txt",
+    "expected": "expected-ssr.html"
+  }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dynamic/error-ssr.txt

@@ -0,0 +1,2 @@
+SSR compilation error:
+The lwc:dynamic directive is not supported for SSR. Use <lwc:component> instead.

packages/@lwc/ssr-compiler/src/__tests__/fixtures.spec.ts

@@ -36,11 +36,9 @@ async function compileFixture({ input, dirname }: { input: string; dirname: stri
             lwcRollupPlugin({
                 targetSSR: true,
                 enableDynamicComponents: true,
-                modules: [
-                    {
-                        dir: modulesDir,
-                    },
-                ],
+                // TODO [#3331]: remove usage of lwc:dynamic in 246
+                experimentalDynamicDirective: true,
+                modules: [{ dir: modulesDir }],
             }),
         ],
         onwarn(warning) {
@@ -64,14 +62,22 @@ function testFixtures() {
             pattern: '**/index.js',
         },
         async ({ filename, dirname, config }) => {
-            const compiledFixturePath = await compileFixture({
-                input: filename,
-                dirname,
-            });
-
             const errorFile = config?.ssrFiles?.error ?? 'error.txt';
             const expectedFile = config?.ssrFiles?.expected ?? 'expected.html';
 
+            let compiledFixturePath;
+            try {
+                compiledFixturePath = await compileFixture({
+                    input: filename,
+                    dirname,
+                });
+            } catch (err: any) {
+                return {
+                    [errorFile]: `SSR compilation error:\n${err.message}`,
+                    [expectedFile]: '',
+                };
+            }
+
             const module = (await import(compiledFixturePath)) as FixtureModule;
 
             let result;

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

@@ -17,10 +17,14 @@ import type {
     Program,
     ImportDeclaration,
     Property,
+    SimpleLiteral,
+    SimpleCallExpression,
+    Identifier,
+    MemberExpression,
 } from 'estree';
 import type { ComponentMetaState } from './types';
 
-const bGenerateMarkup = esTemplate<ExportNamedDeclaration>`
+const bGenerateMarkup = esTemplate`
     export async function* generateMarkup(tagName, props, attrs, slotted) {
         attrs = attrs ?? {};
         ${isNullableOf(is.expressionStatement)};
@@ -35,18 +39,18 @@ const bGenerateMarkup = esTemplate<ExportNamedDeclaration>`
         yield tmplFn.stylesheetScopeTokenHostClass ?? '';
         yield *__renderAttrs(instance, attrs)
         yield '>';
-        yield* tmplFn(props, attrs, slotted, ${is.identifier}, instance);
+        yield* tmplFn(props, attrs, slotted, ${1}, instance);
         yield \`</\${tagName}>\`;
     }
-`;
+`<ExportNamedDeclaration>;
 
-const bInsertFallbackTmplImport = esTemplate<ImportDeclaration>`
+const bInsertFallbackTmplImport = esTemplate`
     import { fallbackTmpl as __fallbackTmpl, renderAttrs as __renderAttrs } from '@lwc/ssr-runtime';
-`;
+`<ImportDeclaration>;
 
-const bCreateReflectedPropArr = esTemplate<ExpressionStatement>`
+const bCreateReflectedPropArr = esTemplate`
     const __REFLECTED_PROPS__ = ${is.arrayExpression};
-`;
+`<ExpressionStatement>;
 
 function bReflectedAttrsObj(reflectedPropNames: (keyof typeof AriaPropNameToAttrNameMap)[]) {
     // This will build getter properties for each reflected property. It'll look
@@ -135,12 +139,22 @@ export function addGenerateMarkupExport(
 
     const classIdentifier = b.identifier(state.lwcClassName!);
     const renderCall = hasRenderMethod
-        ? b.callExpression(b.memberExpression(b.identifier('instance'), b.identifier('render')), [])
+        ? (b.callExpression(
+              b.memberExpression(b.identifier('instance'), b.identifier('render')),
+              []
+          ) as SimpleCallExpression & {
+              callee: MemberExpression & { property: Identifier & { name: 'render' } };
+          })
         : b.identifier('tmpl');
 
     if (!tmplExplicitImports) {
         const defaultTmplPath = filename.replace(/\.js$/, '.html');
-        program.body.unshift(bImportDeclaration(b.identifier('tmpl'), b.literal(defaultTmplPath)));
+        program.body.unshift(
+            bImportDeclaration(
+                b.identifier('tmpl'),
+                b.literal(defaultTmplPath) as SimpleLiteral & { value: string }
+            )
+        );
     }
 
     let attrsAugmentation: ExpressionStatement | null = null;
@@ -153,7 +167,5 @@ export function addGenerateMarkupExport(
 
     program.body.unshift(bInsertFallbackTmplImport());
     program.body.push(bCreateReflectedPropArr(reflectedPropArr));
-    program.body.push(
-        bGenerateMarkup(attrsAugmentation, classIdentifier, renderCall, classIdentifier)
-    );
+    program.body.push(bGenerateMarkup(attrsAugmentation, classIdentifier, renderCall));
 }

packages/@lwc/ssr-compiler/src/compile-js/stylesheet-scope-token.ts

@@ -11,29 +11,29 @@ import { builders as b } from 'estree-toolkit/dist/builders';
 import { esTemplate } from '../estemplate';
 import type { BlockStatement, ExportNamedDeclaration, Program, VariableDeclaration } from 'estree';
 
-const bStylesheetTokenDeclaration = esTemplate<VariableDeclaration>`
+const bStylesheetTokenDeclaration = esTemplate`
     const stylesheetScopeToken = '${is.literal}';
-`;
+`<VariableDeclaration>;
 
 const bAdditionalDeclarations = [
-    esTemplate<VariableDeclaration>`
+    esTemplate`
         const hasScopedStylesheets = defaultScopedStylesheets && defaultScopedStylesheets.length > 0;
-    `,
-    esTemplate<ExportNamedDeclaration>`
+    `<VariableDeclaration>,
+    esTemplate`
         const stylesheetScopeTokenClass = hasScopedStylesheets ? \` class="\${stylesheetScopeToken}"\` : '';
-    `,
-    esTemplate<ExportNamedDeclaration>`
+    `<ExportNamedDeclaration>,
+    esTemplate`
         const stylesheetScopeTokenHostClass = hasScopedStylesheets ? \` class="\${stylesheetScopeToken}-host"\` : '';
-    `,
-    esTemplate<ExportNamedDeclaration>`
+    `<ExportNamedDeclaration>,
+    esTemplate`
         const stylesheetScopeTokenClassPrefix = hasScopedStylesheets ? (stylesheetScopeToken + ' ') : '';
-    `,
+    `<ExportNamedDeclaration>,
 ];
 
 // Scope tokens are associated with a given template. This is assigned here so that it can be used in `generateMarkup`.
-const tmplAssignmentBlock = esTemplate<BlockStatement>`
+const tmplAssignmentBlock = esTemplate`
     ${is.identifier}.stylesheetScopeTokenHostClass = stylesheetScopeTokenHostClass;
-`;
+`<BlockStatement>;
 
 export function addScopeTokenDeclarations(
     program: Program,

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

@@ -12,13 +12,13 @@ import type { NodePath } from 'estree-toolkit';
 import type { ImportDeclaration } from 'estree';
 import type { ComponentMetaState } from './types';
 
-const bDefaultStyleImport = esTemplate<ImportDeclaration>`
+const bDefaultStyleImport = esTemplate`
     import defaultStylesheets from '${is.literal}';
-`;
+`<ImportDeclaration>;
 
-const bDefaultScopedStyleImport = esTemplate<ImportDeclaration>`
+const bDefaultScopedStyleImport = esTemplate`
     import defaultScopedStylesheets from '${is.literal}';
-`;
+`<ImportDeclaration>;
 
 export function catalogStyleImport(path: NodePath<ImportDeclaration>, state: ComponentMetaState) {
     const specifier = path.node!.specifiers[0];

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

@@ -25,7 +25,7 @@ import type {
 } from '@lwc/template-compiler';
 import type { Transformer } from './types';
 
-const bYieldFromChildGenerator = esTemplateWithYield<EsBlockStatement>`
+const bYieldFromChildGenerator = esTemplateWithYield`
     {
         const childProps = ${is.objectExpression};
         const childAttrs = ${is.objectExpression};
@@ -34,7 +34,7 @@ const bYieldFromChildGenerator = esTemplateWithYield<EsBlockStatement>`
         };
         yield* ${is.identifier}(${is.literal}, childProps, childAttrs, childSlottedContentGenerator);
     }
-`;
+`<EsBlockStatement>;
 
 const bImportGenerateMarkup = (localName: string, importPath: string) =>
     b.importDeclaration(

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

@@ -36,7 +36,7 @@ import type {
 import type { Transformer } from './types';
 
 const bYield = (expr: EsExpression) => b.expressionStatement(b.yieldExpression(expr));
-const bConditionalLiveYield = esTemplateWithYield<EsBlockStatement>`
+const bConditionalLiveYield = esTemplateWithYield`
     {
         const prefix = (${/* isClass */ is.literal} && stylesheetScopeTokenClassPrefix) || '';
         const attrOrPropValue = ${is.expression};
@@ -48,14 +48,14 @@ const bConditionalLiveYield = esTemplateWithYield<EsBlockStatement>`
             }
         }
     }
-`;
+`<EsBlockStatement>;
 
-const bStringLiteralYield = esTemplateWithYield<EsBlockStatement>`
+const bStringLiteralYield = esTemplateWithYield`
     {
         const prefix = (${/* isClass */ is.literal} && stylesheetScopeTokenClassPrefix) || '';
         yield ' ' + ${is.literal} + '="' + prefix + "${is.literal}" + '"'
     }
-`;
+`<EsBlockStatement>;
 
 function yieldAttrOrPropLiteralValue(
     name: string,

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

@@ -15,7 +15,6 @@ import type {
     Expression as EsExpression,
     ForOfStatement as EsForOfStatement,
     Identifier as EsIdentifier,
-    Statement as EsStatement,
     MemberExpression as EsMemberExpression,
 } from 'estree';
 import type { Transformer } from './types';
@@ -29,14 +28,11 @@ function getRootIdentifier(node: EsMemberExpression): EsIdentifier | null {
     return is.identifier(rootMemberExpression?.object) ? rootMemberExpression.object : null;
 }
 
-const bForOfYieldFrom = esTemplate<
-    EsForOfStatement,
-    [EsIdentifier, EsIdentifier, EsExpression, EsStatement[]]
->`
+const bForOfYieldFrom = esTemplate`
     for (let [${is.identifier}, ${is.identifier}] of Object.entries(${is.expression} ?? {})) {
         ${is.statement};
     }
-`;
+`<EsForOfStatement>;
 
 export const ForEach: Transformer<IrForEach> = function ForEach(node, cxt): EsForOfStatement[] {
     const forItemId = node.item.name;

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

@@ -15,7 +15,6 @@ import type {
     Expression as EsExpression,
     ForOfStatement as EsForOfStatement,
     Identifier as EsIdentifier,
-    Statement as EsStatement,
     MemberExpression as EsMemberExpression,
     ImportDeclaration as EsImportDeclaration,
 } from 'estree';
@@ -30,15 +29,15 @@ function getRootIdentifier(node: EsMemberExpression): EsIdentifier | null {
     return is.identifier(rootMemberExpression?.object) ? rootMemberExpression.object : null;
 }
 
-const bForOfYieldFrom = esTemplate<EsForOfStatement, [EsIdentifier, EsExpression, EsStatement[]]>`
+const bForOfYieldFrom = esTemplate`
     for (let ${is.identifier} of toIteratorDirective(${is.expression} ?? [])) {
         ${is.statement};
     }
-`;
+`<EsForOfStatement>;
 
-const bToIteratorDirectiveImport = esTemplate<EsImportDeclaration>`
+const bToIteratorDirectiveImport = esTemplate`
     import { toIteratorDirective } from '@lwc/ssr-runtime';
-`;
+`<EsImportDeclaration>;
 
 export const ForOf: Transformer<IrForOf> = function ForEach(node, cxt): EsForOfStatement[] {
     const id = node.iterator.name;