feat: experimental SSR compiler

packages/@lwc/compiler/package.json

@@ -52,6 +52,7 @@
  "@lwc/babel-plugin-component": "6.5.3",
  "@lwc/errors": "6.5.3",
  "@lwc/shared": "6.5.3",
+ "@lwc/ssr-compiler": "6.5.3",
  "@lwc/style-compiler": "6.5.3",
  "@lwc/template-compiler": "6.5.3"
  }

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

@@ -8,6 +8,7 @@ export { transform, transformSync } from './transformers/transformer';
 
 export { TransformResult } from './transformers/transformer';
 export {
+ NormalizedTransformOptions,
  TransformOptions,
  StylesheetConfig,
  CustomPropertiesResolution,

packages/@lwc/compiler/src/options.ts

@@ -128,6 +128,7 @@ export interface TransformOptions {
  instrumentation?: InstrumentationObject;
  /** API version to associate with the compiled module. Values correspond to Salesforce platform releases. */
  apiVersion?: number;
+ targetSSR?: boolean;
 }
 
 type RequiredTransformOptions = Omit<
@@ -243,5 +244,6 @@ function normalizeOptions(options: TransformOptions): NormalizedTransformOptions
  outputConfig,
  experimentalDynamicComponent,
  apiVersion,
+ targetSSR: !!options.targetSSR,
  };
 }

packages/@lwc/compiler/src/transformers/transformer.ts

@@ -13,6 +13,7 @@ import {
  invariant,
  CompilerDiagnostic,
 } from '@lwc/errors';
+import { compileComponentForSSR, compileTemplateForSSR } from '@lwc/ssr-compiler';
 
 import { NormalizedTransformOptions, TransformOptions, validateTransformOptions } from '../options';
 import styleTransform from './style';
@@ -114,7 +115,7 @@ function transformFile(
 
  switch (path.extname(filename)) {
  case '.html':
- transformer = templateTransformer;
+ transformer = options.targetSSR ? compileTemplateForSSR : templateTransformer;
  break;
 
  case '.css':
@@ -125,7 +126,7 @@ function transformFile(
  case '.jsx':
  case '.ts':
  case '.js':
- transformer = scriptTransformer;
+ transformer = options.targetSSR ? compileComponentForSSR : scriptTransformer;
  break;
 
  default:

packages/@lwc/engine-server/src/__tests__/fixtures/deeply-nested/index.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/deeply-nested/modules/x/component/component.html

@@ -0,0 +1,25 @@
+<template>
+ <div>
+ <template lwc:if={isPositive}>
+ <template lwc:if={isDivisibleByThree}>
+ <template for:each={someChildren} for:item="child">
+ <span key={child}>
+ <x-component label={child} remaining={minusOne}></x-component>
+ </span>
+ </template>
+ </template>
+ <template lwc:elseif={isDivisibleByTwo}>
+ <div>
+ <span>two</span>
+ <x-component remaining={minusOne}></x-component>
+ </div>
+ </template>
+ <template lwc:else>
+ <x-component remaining={minusOne}></x-component>
+ </template>
+ </template>
+ <template lwc:else>
+ terminal node
+ </template>
+ </div>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/deeply-nested/modules/x/component/component.js

@@ -0,0 +1,26 @@
+import { api, LightningElement } from 'lwc';
+
+export default class Component extends LightningElement {
+ @api remaining = 9;
+ @api label = 'default';
+
+ get someChildren() {
+ return ['a', 'b', 'c'];
+ }
+
+ get isPositive() {
+ return this.remaining > 0;
+ }
+
+ get isDivisibleByThree() {
+ return (this.remaining % 3) === 0
+ }
+
+ get isDivisibleByTwo() {
+ return (this.remaining % 3) === 0
+ }
+
+ get minusOne() {
+ return this.remaining - 1;
+ }
+}

packages/@lwc/rollup-plugin/src/index.ts

@@ -16,6 +16,8 @@ import { APIVersion, getAPIVersionFromNumber } from '@lwc/shared';
 import type { CompilerDiagnostic } from '@lwc/errors';
 
 export interface RollupLwcOptions {
+ /** A boolean indicating whether to compile for SSR runtime target. */
+ targetSSR?: boolean;
  /** A [minimatch pattern](https://github.com/isaacs/minimatch), or array of patterns, which specifies the files in the build the plugin should transform on. By default all files are targeted. */
  include?: FilterPattern;
  /** A [minimatch pattern](https://github.com/isaacs/minimatch), or array of patterns, which specifies the files in the build the plugin should not transform. By default no files are ignored. */
@@ -154,6 +156,7 @@ export default function lwc(pluginOptions: RollupLwcOptions = {}): Plugin {
 
  let { rootDir, modules = [] } = pluginOptions;
  const {
+ targetSSR,
  stylesheetConfig,
  sourcemap = false,
  preserveHtmlComments,
@@ -336,6 +339,7 @@ export default function lwc(pluginOptions: RollupLwcOptions = {}): Plugin {
  ...('enableStaticContentOptimization' in pluginOptions && {
  enableStaticContentOptimization: pluginOptions.enableStaticContentOptimization,
  }),
+ targetSSR,
  });
 
  if (warnings) {

packages/@lwc/ssr-compiler/jest.config.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+const BASE_CONFIG = require('../../../scripts/jest/base.config');
+
+module.exports = {
+ ...BASE_CONFIG,
+ displayName: 'lwc-ssr-compiler',
+};

packages/@lwc/ssr-compiler/package.json

@@ -0,0 +1,59 @@
+{
+ "//": [
+ "THIS FILE IS AUTOGENERATED. If you modify it, it will be rewritten by check-and-rewrite-package-json.js",
+ "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
+ ],
+ "name": "@lwc/ssr-compiler",
+ "version": "6.5.3",
+ "description": "Compile component for use during server-side rendering",
+ "keywords": [
+ "lwc"
+ ],
+ "homepage": "https://lwc.dev",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/salesforce/lwc.git",
+ "directory": "packages/@lwc/ssr-compiler"
+ },
+ "bugs": {
+ "url": "https://github.com/salesforce/lwc/issues"
+ },
+ "license": "MIT",
+ "publishConfig": {
+ "access": "public"
+ },
+ "main": "dist/index.cjs.js",
+ "module": "dist/index.js",
+ "types": "dist/index.d.ts",
+ "files": [
+ "dist"
+ ],
+ "scripts": {
+ "build": "rollup --config ../../../scripts/rollup/rollup.config.js",
+ "dev": "rollup --config ../../../scripts/rollup/rollup.config.js --watch --no-watch.clearScreen",
+ "test-manual": "jest ./src/**/*.spec.ts"
+ },
+ "nx": {
+ "targets": {
+ "build": {
+ "outputs": [
+ "{projectRoot}/dist"
+ ]
+ }
+ }
+ },
+ "dependencies": {
+ "@lwc/metadata": "6.5.3-0",
+ "@lwc/sfdc-compiler-utils": "6.5.3-0",
+ "@lwc/style-compiler": "6.5.3",
+ "@lwc/template-compiler": "6.5.3",
+ "acorn": "~8.10.0",
+ "astring": "^1.8.6",
+ "estree-toolkit": "^1.7.3",
+ "immer": "^10.0.3",
+ "meriyah": "^4.3.8"
+ },
+ "devDependencies": {
+ "@types/estree": "^1.0.5"
+ }
+}