@lwrjs/lwc-ssr 0.7.0-alpha.6 → 0.7.0-alpha.9

package/build/cjs/moduleProvider/index.cjs

@@ -24,20 +24,27 @@ var __toModule = (module2) => {
 // packages/@lwrjs/lwc-ssr/src/moduleProvider/index.ts
 __markAsModule(exports);
 __export(exports, {
+  createSsrBootstrapModule: () => createSsrBootstrapModule,
   default: () => moduleProvider_default
 });
-var import_diagnostics = __toModule(require("@lwrjs/diagnostics"));
 var import_shared_utils = __toModule(require("@lwrjs/shared-utils"));
-var import_utils = __toModule(require("./utils.cjs"));
 var import_identity = __toModule(require("../identity.cjs"));
-function getRootModuleSpecifier(ssrSpecifier) {
-  const [, , namespace, name] = ssrSpecifier.split("/");
-  return `${namespace}/${name}`;
+function createSsrBootstrapModule(rootComponent) {
+  return [
+    "/* This module is generated and meant to be used in a Server context */",
+    'import { renderComponent } from "@lwc/engine-server"',
+    `import Ctor from "${rootComponent}"`,
+    "try {",
+    `  const result = renderComponent("${(0, import_shared_utils.moduleSpecifierToKebabCase)(rootComponent)}", Ctor, globalThis.ssrProps);`,
+    "  globalThis.postback({ result });",
+    "} catch(err) {",
+    "  globalThis.postback({ error: err.toString() });",
+    `}`
+  ].join("\n");
 }
 var LwcSsrModuleProvider = class {
-  constructor(appPluginConfig, {config, runtimeEnvironment: {hmrEnabled, lwrVersion}}) {
+  constructor(providerConfig, {runtimeEnvironment: {lwrVersion}}) {
     this.name = "ssr-module-provider";
-    this.config = config;
     this.version = lwrVersion;
   }
   async getModuleEntry({specifier}) {
@@ -52,22 +59,12 @@ var LwcSsrModuleProvider = class {
       };
     }
   }
-  async getModuleSource({
-    specifier,
-    namespace,
-    name
-  }) {
-    if (!specifier.startsWith(import_identity.LWC_SSR_PREFIX)) {
-      return;
-    }
+  async getModule({specifier, namespace, name}) {
     const moduleEntry = await this.getModuleEntry({specifier});
     if (!moduleEntry) {
-      throw (0, import_diagnostics.createSingleDiagnosticError)({
-        description: import_diagnostics.descriptions.UNRESOLVABLE.MODULE(specifier)
-      }, import_diagnostics.LwrUnresolvableError);
+      return;
     }
-    const customElementModule = getRootModuleSpecifier(specifier);
-    const originalSource = (0, import_utils.createSsrBootstrapModule)(customElementModule);
+    const originalSource = createSsrBootstrapModule(specifier.replace(import_identity.LWC_SSR_PREFIX, ""));
     return {
       id: moduleEntry.id,
       namespace,
@@ -76,18 +73,8 @@ var LwcSsrModuleProvider = class {
       specifier,
       moduleEntry,
       ownHash: (0, import_shared_utils.hashContent)(originalSource),
-      originalSource
-    };
-  }
-  async getModule(moduleId) {
-    if (!moduleId.specifier.startsWith("@lwrjs/lwc-ssr/")) {
-      return;
-    }
-    const moduleSource = await this.getModuleSource(moduleId);
-    const compiledSource = moduleSource.originalSource;
-    return {
-      ...moduleSource,
-      compiledSource
+      originalSource,
+      compiledSource: originalSource
     };
   }
 };

package/build/cjs/viewTransformer/amd-utils.cjs

@@ -0,0 +1,88 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __markAsModule = (target) => __defProp(target, "__esModule", {value: true});
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {get: all[name], enumerable: true});
+};
+var __exportStar = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, {get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable});
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __exportStar(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? {get: () => module2.default, enumerable: true} : {value: module2, enumerable: true})), module2);
+};
+
+// packages/@lwrjs/lwc-ssr/src/viewTransformer/amd-utils.ts
+__markAsModule(exports);
+__export(exports, {
+  default: () => getCode
+});
+var import_loader = __toModule(require("@lwrjs/loader"));
+var import_shared_utils = __toModule(require("@lwrjs/shared-utils"));
+async function readableToString(readable) {
+  let result = "";
+  for await (const chunk of readable) {
+    result += chunk;
+  }
+  return result;
+}
+var loaderShimSource;
+async function getLoaderShim(runtimeEnvironment) {
+  if (loaderShimSource !== void 0) {
+    return loaderShimSource;
+  }
+  const amdloaderShimService = new import_loader.default({}, {
+    runtimeEnvironment,
+    resourceRegistry: {resolveResourceUri: () => "NOT IMPLEMENTED"}
+  });
+  const specifier = (0, import_shared_utils.getFeatureFlags)().LEGACY_LOADER ? "lwr-loader-shim-legacy.bundle.js" : "lwr-loader-shim.bundle.js";
+  const resource = await amdloaderShimService.getResource({specifier}, runtimeEnvironment);
+  if (resource) {
+    const {stream} = resource;
+    if (stream) {
+      loaderShimSource = await readableToString(stream);
+      return loaderShimSource;
+    }
+  }
+}
+function getLwrConfig(bundleSpecifier, lwrVersion) {
+  return Object.assign({}, {
+    autoBoot: true,
+    bootstrapModule: `${bundleSpecifier}/v/${lwrVersion}`,
+    disableInitDefer: true,
+    endpoints: {
+      uris: {mapping: "/1/mapping/amd/1/l/en-US/mp/"}
+    },
+    rootComponents: [`${bundleSpecifier.split("@lwrjs/lwc-ssr/")[1]}/v/${lwrVersion}`]
+  }, (0, import_shared_utils.getFeatureFlags)().LEGACY_LOADER ? {
+    baseUrl: "ssr"
+  } : {
+    baseUrl: "/",
+    imports: {
+      "any/thing.js": ["any/thing"]
+    }
+  });
+}
+function lwcDefineOverride(lwcSpecifier) {
+  return `LWR.define("${lwcSpecifier}", ["${lwcSpecifier.replace("lwc", "@lwc/engine-server")}"], function(lwcEngine) { return lwcEngine; });`;
+}
+var GLOBALTHIS_LWR = `globalThis.LWR = globalThis.LWR || {};`;
+async function getCode(runtimeEnvironment, lwrVersion, lwcSpecifier, bundleSpecifier) {
+  const loaderShimSource2 = await getLoaderShim(runtimeEnvironment);
+  const lwrConfigString = JSON.stringify(getLwrConfig(bundleSpecifier, lwrVersion));
+  return [
+    GLOBALTHIS_LWR,
+    `Object.assign(globalThis.LWR, ${lwrConfigString});`,
+    loaderShimSource2 ? loaderShimSource2 : "",
+    lwcSpecifier ? lwcDefineOverride(lwcSpecifier) : ""
+  ];
+}

package/build/cjs/viewTransformer/index.cjs

@@ -29,22 +29,32 @@ __export(exports, {
 var import_shared_utils = __toModule(require("@lwrjs/shared-utils"));
 var import_identity = __toModule(require("../identity.cjs"));
 var import_ssr_element = __toModule(require("./ssr-element.cjs"));
-function lwcSsrViewTranformer(options, lwrGlobalContext) {
-  const {moduleBundler} = lwrGlobalContext;
+function lwcSsrViewTranformer(options, {moduleBundler}) {
   return {
     name: "ssr-lwc-transformer",
-    async link(stringBuilder, viewContext, viewMeta) {
+    async link(stringBuilder, viewContext, {customElements}) {
+      if (process.env.LOCKER === "true") {
+        return;
+      }
       if (viewContext.view.bootstrap?.experimentalSSR) {
-        const {customElements} = viewMeta;
-        for (const customElementRef of customElements) {
-          if (customElementRef.location) {
-            const {startOffset, endOffset} = customElementRef.location;
-            const moduleSpecifier = (0, import_shared_utils.kebabcaseToCamelcase)(customElementRef.tagName);
-            const ssrSpecifier = `${import_identity.LWC_SSR_PREFIX}${moduleSpecifier}`;
-            const ssrResult = await (0, import_ssr_element.ssrElement)({specifier: ssrSpecifier}, moduleBundler, viewContext.runtimeEnvironment);
-            stringBuilder.overwrite(startOffset, endOffset, ssrResult);
+        const ssrModules = [];
+        for (const {tagName, location, props = {}} of customElements) {
+          if (location) {
+            const {startOffset, endOffset} = location;
+            const moduleSpecifier = (0, import_shared_utils.kebabCaseToModuleSpecifer)(tagName);
+            ssrModules.push({
+              startOffset,
+              endOffset,
+              props,
+              specifier: `${import_identity.LWC_SSR_PREFIX}${moduleSpecifier}`
+            });
           }
         }
+        return Promise.all(ssrModules.map(({specifier, props, startOffset, endOffset}) => {
+          return (0, import_ssr_element.ssrElement)({specifier, props}, moduleBundler, viewContext.runtimeEnvironment).then((ssrResult) => {
+            stringBuilder.overwrite(startOffset, endOffset, ssrResult);
+          });
+        })).then(() => void 0);
       }
     }
   };

package/build/cjs/viewTransformer/ssr-element.cjs

@@ -27,34 +27,44 @@ __export(exports, {
   ssrElement: () => ssrElement
 });
 var import_worker_threads = __toModule(require("worker_threads"));
+var import_amd_utils = __toModule(require("./amd-utils.cjs"));
 var bundleConfigOverrides = {
   exclude: [],
   alias: {
     lwc: "@lwc/engine-server"
   }
 };
-var WORKER_CONTEXT_PREPEND = `const { parentPort } = require('worker_threads')`;
-var WORKER_CONTEXT_APPEND = `parentPort.postMessage(globalThis.workerResult)`;
-function runCodeOnWorker(code) {
-  const workerCode = [WORKER_CONTEXT_PREPEND, code, WORKER_CONTEXT_APPEND].join("\n");
-  return new Promise((resolve, reject) => {
+var WORKER_CONTEXT_PARENTPORT = `const { parentPort } = require('worker_threads');`;
+var WORKER_CONTEXT_POSTBACK = `globalThis.postback = (result) => parentPort.postMessage(result);`;
+function runCodeOnWorker(codes) {
+  const workerCode = [WORKER_CONTEXT_PARENTPORT, WORKER_CONTEXT_POSTBACK, ...codes].join("\n");
+  return new Promise((resolve) => {
     const worker = new import_worker_threads.Worker(workerCode, {eval: true});
     worker.on("message", resolve);
-    worker.on("error", reject);
-    worker.on("exit", (code2) => {
-      if (code2 !== 0) {
-        reject(new Error(`Worker stopped with exit code ${code2}`));
+    worker.on("error", ({message}) => resolve({error: `SSR worker exited with error: ${message}`}));
+    worker.on("exit", (code) => {
+      if (code !== 0) {
+        resolve({error: `SSR worker stopped with exit code: ${code}`});
       }
     });
   });
 }
-async function ssrElement(options, moduleBundler, runtimeEnvironment) {
-  const {specifier} = options;
-  const bundleDef = await moduleBundler.getModuleBundle({specifier}, runtimeEnvironment, void 0, bundleConfigOverrides);
-  const result = await runCodeOnWorker(bundleDef.code);
-  if (result.error) {
-    throw new Error(result.error);
+async function ssrElement({specifier, props}, moduleBundler, runtimeEnvironment) {
+  runtimeEnvironment.bundle = false;
+  const {
+    bundleRecord,
+    code,
+    specifier: bundleSpecifier,
+    version
+  } = await moduleBundler.getModuleBundle({specifier}, runtimeEnvironment, void 0, bundleConfigOverrides);
+  const {error, result} = runtimeEnvironment.format === "amd" ? await runCodeOnWorker([
+    ...await (0, import_amd_utils.default)(runtimeEnvironment, version.replace(/\./g, "_"), bundleRecord.includedModules.find((m) => m.startsWith("lwc/v")), bundleSpecifier),
+    `globalThis.ssrProps = ${JSON.stringify(props)};`,
+    code
+  ]) : await runCodeOnWorker([`globalThis.ssrProps = ${JSON.stringify(props)};`, code]);
+  if (error) {
+    throw new Error(error);
   } else {
-    return result.result;
+    return result;
   }
 }

package/build/es/moduleProvider/index.d.ts

@@ -1,11 +1,25 @@
-import { ModuleCompiled, ModuleEntry, ModuleProvider, ModuleSource, ProviderContext, AbstractModuleId, ProviderAppConfig } from '@lwrjs/types';
+import { ModuleCompiled, ModuleEntry, ModuleProvider, ProviderContext, AbstractModuleId } from '@lwrjs/types';
+/**
+ * This module provider generates code which server-side renders a given component.
+ * It handles module specifiers in the form: "@lwrjs/lwc-ssr/${component specifier}".
+ * eg: "@lwrjs/lwc-ssr/my/appRoot"
+ */
+/**
+ * Create the virtual source for a module which server-side renders the given component.
+ * This code is meant to be executed on the server; it is run in a worker in "lwc-ssr/viewTransformer#ssr-element" during linking.
+ * The result is posted to the parentPort (via globalThis.postback() defined in the worker) and the Promise in the main thread resolves.
+ * The properties are stored in "globalThis.ssrProps" and used in the SSR module.
+ * The postback function "globalThis.postback" must be set prior to executing the SSR module.
+ * @param rootComponent - The specifier for the component to SSR
+ * @param globalThis.ssrProps - The properties to pass to the component, set in "lwc-ssr/viewTransformer#ssr-element"
+ * @returns the generated module source
+ */
+export declare function createSsrBootstrapModule(rootComponent: string): string;
 export default class LwcSsrModuleProvider implements ModuleProvider {
     name: string;
     version: string;
-    config: ProviderAppConfig;
-    constructor(appPluginConfig: unknown, { config, runtimeEnvironment: { hmrEnabled, lwrVersion } }: ProviderContext);
+    constructor(providerConfig: unknown, { runtimeEnvironment: { lwrVersion } }: ProviderContext);
     getModuleEntry({ specifier }: AbstractModuleId): Promise<ModuleEntry | undefined>;
-    getModuleSource<R extends AbstractModuleId>({ specifier, namespace, name, }: R): Promise<ModuleSource | undefined>;
-    getModule(moduleId: AbstractModuleId): Promise<ModuleCompiled | undefined>;
+    getModule({ specifier, namespace, name }: AbstractModuleId): Promise<ModuleCompiled | undefined>;
 }
 //# sourceMappingURL=index.d.ts.map

package/build/es/moduleProvider/index.js

@@ -1,15 +1,36 @@
-import { LwrUnresolvableError, createSingleDiagnosticError, descriptions } from '@lwrjs/diagnostics';
-import { hashContent } from '@lwrjs/shared-utils';
-import { createSsrBootstrapModule } from './utils.js';
+import { hashContent, moduleSpecifierToKebabCase } from '@lwrjs/shared-utils';
 import { LWC_SSR_PREFIX } from '../identity.js';
-function getRootModuleSpecifier(ssrSpecifier) {
-    const [, , namespace, name] = ssrSpecifier.split('/');
-    return `${namespace}/${name}`;
+/**
+ * This module provider generates code which server-side renders a given component.
+ * It handles module specifiers in the form: "@lwrjs/lwc-ssr/${component specifier}".
+ * eg: "@lwrjs/lwc-ssr/my/appRoot"
+ */
+/**
+ * Create the virtual source for a module which server-side renders the given component.
+ * This code is meant to be executed on the server; it is run in a worker in "lwc-ssr/viewTransformer#ssr-element" during linking.
+ * The result is posted to the parentPort (via globalThis.postback() defined in the worker) and the Promise in the main thread resolves.
+ * The properties are stored in "globalThis.ssrProps" and used in the SSR module.
+ * The postback function "globalThis.postback" must be set prior to executing the SSR module.
+ * @param rootComponent - The specifier for the component to SSR
+ * @param globalThis.ssrProps - The properties to pass to the component, set in "lwc-ssr/viewTransformer#ssr-element"
+ * @returns the generated module source
+ */
+export function createSsrBootstrapModule(rootComponent) {
+    return [
+        '/* This module is generated and meant to be used in a Server context */',
+        'import { renderComponent } from "@lwc/engine-server"',
+        `import Ctor from "${rootComponent}"`,
+        'try {',
+        `  const result = renderComponent("${moduleSpecifierToKebabCase(rootComponent)}", Ctor, globalThis.ssrProps);`,
+        '  globalThis.postback({ result });',
+        '} catch(err) {',
+        '  globalThis.postback({ error: err.toString() });',
+        `}`,
+    ].join('\n');
 }
 export default class LwcSsrModuleProvider {
-    constructor(appPluginConfig, { config, runtimeEnvironment: { hmrEnabled, lwrVersion } }) {
+    constructor(providerConfig, { runtimeEnvironment: { lwrVersion } }) {
         this.name = 'ssr-module-provider';
-        this.config = config;
         this.version = lwrVersion;
     }
     async getModuleEntry({ specifier }) {
@@ -24,19 +45,13 @@ export default class LwcSsrModuleProvider {
             };
         }
     }
-    async getModuleSource({ specifier, namespace, name, }) {
-        if (!specifier.startsWith(LWC_SSR_PREFIX)) {
-            return;
-        }
-        // Fetch the Module Entry and corresponding route config object
+    async getModule({ specifier, namespace, name }) {
         const moduleEntry = await this.getModuleEntry({ specifier });
         if (!moduleEntry) {
-            throw createSingleDiagnosticError({
-                description: descriptions.UNRESOLVABLE.MODULE(specifier),
-            }, LwrUnresolvableError);
+            return;
         }
-        const customElementModule = getRootModuleSpecifier(specifier);
-        const originalSource = createSsrBootstrapModule(customElementModule);
+        // Generate the module source which SSRs a lwc, and return the Module
+        const originalSource = createSsrBootstrapModule(specifier.replace(LWC_SSR_PREFIX, ''));
         return {
             id: moduleEntry.id,
             namespace,
@@ -46,18 +61,7 @@ export default class LwcSsrModuleProvider {
             moduleEntry,
             ownHash: hashContent(originalSource),
             originalSource,
-        };
-    }
-    async getModule(moduleId) {
-        if (!moduleId.specifier.startsWith('@lwrjs/lwc-ssr/')) {
-            return;
-        }
-        // Get the source to compile
-        const moduleSource = (await this.getModuleSource(moduleId));
-        const compiledSource = moduleSource.originalSource;
-        return {
-            ...moduleSource,
-            compiledSource,
+            compiledSource: originalSource,
         };
     }
 }

package/build/es/viewTransformer/amd-utils.d.ts

@@ -0,0 +1,3 @@
+import { RuntimeEnvironment } from '@lwrjs/types';
+export default function getCode(runtimeEnvironment: RuntimeEnvironment, lwrVersion: string, lwcSpecifier: string | undefined, bundleSpecifier: string): Promise<string[]>;
+//# sourceMappingURL=amd-utils.d.ts.map

package/build/es/viewTransformer/amd-utils.js

@@ -0,0 +1,70 @@
+import AmdLoaderShimService from '@lwrjs/loader';
+import { getFeatureFlags } from '@lwrjs/shared-utils';
+async function readableToString(readable) {
+    let result = '';
+    for await (const chunk of readable) {
+        result += chunk;
+    }
+    return result;
+}
+let loaderShimSource;
+async function getLoaderShim(runtimeEnvironment) {
+    if (loaderShimSource !== undefined) {
+        return loaderShimSource;
+    }
+    const amdloaderShimService = new AmdLoaderShimService({}, {
+        runtimeEnvironment,
+        resourceRegistry: { resolveResourceUri: () => 'NOT IMPLEMENTED' },
+    });
+    const specifier = getFeatureFlags().LEGACY_LOADER
+        ? 'lwr-loader-shim-legacy.bundle.js'
+        : 'lwr-loader-shim.bundle.js';
+    const resource = await amdloaderShimService.getResource({ specifier }, runtimeEnvironment);
+    if (resource) {
+        const { stream } = resource;
+        if (stream) {
+            loaderShimSource = await readableToString(stream);
+            return loaderShimSource;
+        }
+    }
+}
+function getLwrConfig(bundleSpecifier, lwrVersion) {
+    // This is the minimum LWR config required for the loader to be created and mountApp to succeed
+    return Object.assign({}, {
+        autoBoot: true,
+        bootstrapModule: `${bundleSpecifier}/v/${lwrVersion}`,
+        disableInitDefer: true,
+        endpoints: {
+            uris: { mapping: '/1/mapping/amd/1/l/en-US/mp/' },
+        },
+        rootComponents: [`${bundleSpecifier.split('@lwrjs/lwc-ssr/')[1]}/v/${lwrVersion}`],
+    }, getFeatureFlags().LEGACY_LOADER
+        ? {
+            baseUrl: 'ssr',
+        }
+        : {
+            baseUrl: '/',
+            imports: {
+                'any/thing.js': ['any/thing'],
+            },
+        });
+}
+// lwc/v/2_13_0 -> @lwc/engine-server/v/2_13_0
+function lwcDefineOverride(lwcSpecifier) {
+    return `LWR.define("${lwcSpecifier}", ["${lwcSpecifier.replace('lwc', '@lwc/engine-server')}"], function(lwcEngine) { return lwcEngine; });`;
+}
+const GLOBALTHIS_LWR = `globalThis.LWR = globalThis.LWR || {};`;
+export default async function getCode(runtimeEnvironment, lwrVersion, lwcSpecifier, bundleSpecifier) {
+    const loaderShimSource = await getLoaderShim(runtimeEnvironment);
+    const lwrConfigString = JSON.stringify(getLwrConfig(bundleSpecifier, lwrVersion));
+    // Order matters:
+    //     1. "globalThis.LWR" must be defined prior to executing the shim and loader
+    //     2. the lwc module override needs to be defined before lwc is [re]defined in the custom element code (first define wins)
+    return [
+        GLOBALTHIS_LWR,
+        `Object.assign(globalThis.LWR, ${lwrConfigString});`,
+        loaderShimSource ? loaderShimSource : '',
+        lwcSpecifier ? lwcDefineOverride(lwcSpecifier) : '',
+    ];
+}
+//# sourceMappingURL=amd-utils.js.map

package/build/es/viewTransformer/index.d.ts

@@ -1,7 +1,23 @@
-import { ProviderContext, ViewTransformPlugin } from '@lwrjs/types';
+import type { ProviderContext, ViewTransformPlugin } from '@lwrjs/types';
 interface SsrPluginOptions {
     shareWorker?: boolean;
 }
-export default function lwcSsrViewTranformer(options: SsrPluginOptions, lwrGlobalContext: ProviderContext): ViewTransformPlugin;
+/**
+ * This is a view transformer run by the view registry during linking of a page document/route (configured in lwr.config.json[routes]).
+ * If the "experimentalSSR" bootstrap flag is on for the route, it will server-side render (SSR) each custom element found in the page HTML.
+ *
+ * SSR Flow:
+ *  1. There is a request to generate a view (ie: page document) via the UI middleware or static site generation
+ *  2. During view generation, the view registry runs all the registered view transformers (including this one)
+ *  3. This view transformer links the SSRed string for EVERY custom element (ie: root component) found in the page document:
+ *      a) It requests a module which SSRs a given custom element, generated by "lwc-ssr/moduleProvider"
+ *      b) A bundle is created for the generated SSR module (see "./ssr-element")
+ *      c) The bundle code is run inside a worker (see "./ssr-element"), with properties stored in "globalThis.ssrProps"
+ *      d) The generated SSR module (running the worker) passes the SSRed code string back to the main thread (ie: "globalThis.ssrWorkerResult")
+ *      e) The SSRed string is used to overwrite/link each custom element (eg: "<c-app></c-app>") in the document (see "stringBuild.overwrite")
+ * 4. The view/page document now contains SSRed components, which will be sent to the client
+ * 5. During bootstrap on the client, the "lwr/initSsr" module will hydrate ALL the custom elements on the page
+ */
+export default function lwcSsrViewTranformer(options: SsrPluginOptions, { moduleBundler }: ProviderContext): ViewTransformPlugin;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/build/es/viewTransformer/index.js

@@ -1,24 +1,50 @@
-import { kebabcaseToCamelcase } from '@lwrjs/shared-utils';
+import { kebabCaseToModuleSpecifer } from '@lwrjs/shared-utils';
 import { LWC_SSR_PREFIX } from '../identity.js';
 import { ssrElement } from './ssr-element.js';
-export default function lwcSsrViewTranformer(options, lwrGlobalContext) {
-    const { moduleBundler } = lwrGlobalContext;
+/**
+ * This is a view transformer run by the view registry during linking of a page document/route (configured in lwr.config.json[routes]).
+ * If the "experimentalSSR" bootstrap flag is on for the route, it will server-side render (SSR) each custom element found in the page HTML.
+ *
+ * SSR Flow:
+ *  1. There is a request to generate a view (ie: page document) via the UI middleware or static site generation
+ *  2. During view generation, the view registry runs all the registered view transformers (including this one)
+ *  3. This view transformer links the SSRed string for EVERY custom element (ie: root component) found in the page document:
+ *      a) It requests a module which SSRs a given custom element, generated by "lwc-ssr/moduleProvider"
+ *      b) A bundle is created for the generated SSR module (see "./ssr-element")
+ *      c) The bundle code is run inside a worker (see "./ssr-element"), with properties stored in "globalThis.ssrProps"
+ *      d) The generated SSR module (running the worker) passes the SSRed code string back to the main thread (ie: "globalThis.ssrWorkerResult")
+ *      e) The SSRed string is used to overwrite/link each custom element (eg: "<c-app></c-app>") in the document (see "stringBuild.overwrite")
+ * 4. The view/page document now contains SSRed components, which will be sent to the client
+ * 5. During bootstrap on the client, the "lwr/initSsr" module will hydrate ALL the custom elements on the page
+ */
+export default function lwcSsrViewTranformer(options, { moduleBundler }) {
     return {
         name: 'ssr-lwc-transformer',
-        async link(stringBuilder, viewContext, viewMeta) {
+        async link(stringBuilder, viewContext, { customElements }) {
+            // SSR currently does not support locker because the module constructor returns undefined
+            // and the call to renderComponent would fail
+            if (process.env.LOCKER === 'true') {
+                return;
+            }
             if (viewContext.view.bootstrap?.experimentalSSR) {
-                const { customElements } = viewMeta;
-                for (const customElementRef of customElements) {
-                    if (customElementRef.location) {
-                        const { startOffset, endOffset } = customElementRef.location;
-                        const moduleSpecifier = kebabcaseToCamelcase(customElementRef.tagName);
-                        const ssrSpecifier = `${LWC_SSR_PREFIX}${moduleSpecifier}`;
-                        // TODO: Paralelize this await
-                        // eslint-disable-next-line no-await-in-loop
-                        const ssrResult = await ssrElement({ specifier: ssrSpecifier }, moduleBundler, viewContext.runtimeEnvironment);
-                        stringBuilder.overwrite(startOffset, endOffset, ssrResult);
+                const ssrModules = [];
+                for (const { tagName, location, props = {} } of customElements) {
+                    if (location) {
+                        const { startOffset, endOffset } = location;
+                        const moduleSpecifier = kebabCaseToModuleSpecifer(tagName);
+                        ssrModules.push({
+                            startOffset,
+                            endOffset,
+                            props,
+                            specifier: `${LWC_SSR_PREFIX}${moduleSpecifier}`,
+                        });
                     }
                 }
+                return Promise.all(ssrModules.map(({ specifier, props, startOffset, endOffset }) => {
+                    return ssrElement({ specifier, props }, moduleBundler, viewContext.runtimeEnvironment).then((ssrResult) => {
+                        stringBuilder.overwrite(startOffset, endOffset, ssrResult);
+                    });
+                })).then(() => undefined); // we need to ultimately return "void" here, there is nothing to return
             }
         },
     };

package/build/es/viewTransformer/ssr-element.d.ts

@@ -1,3 +1,16 @@
-import { AbstractModuleId, ModuleBundler, RuntimeEnvironment } from '@lwrjs/types';
-export declare function ssrElement<ModuleId extends AbstractModuleId, RuntimeEnv extends RuntimeEnvironment>(options: ModuleId, moduleBundler: ModuleBundler, runtimeEnvironment: RuntimeEnv): Promise<string>;
+import type { ModuleBundler, RuntimeEnvironment } from '@lwrjs/types';
+/**
+ * Create a bundle for the given SSR module and run the code in a worker.
+ * @param moduleInfo - specifier: The ID of the module, generated by "lwc-ssr/moduleProvider", which SSRs a component
+ *                     props: A map of the key:value property pairs parsed from the custom element attributes (ie: all string values)
+ * @param moduleBundler
+ * @param runtimeEnvironment
+ * @returns a promise to the SSRed code string
+ */
+export declare function ssrElement<RuntimeEnv extends RuntimeEnvironment>({ specifier, props }: {
+    specifier: string;
+    props: {
+        [name: string]: string;
+    };
+}, moduleBundler: ModuleBundler, runtimeEnvironment: RuntimeEnv): Promise<string>;
 //# sourceMappingURL=ssr-element.d.ts.map

package/build/es/viewTransformer/ssr-element.js

@@ -1,34 +1,59 @@
 import { Worker } from 'worker_threads';
+import getCode from './amd-utils.js';
 const bundleConfigOverrides = {
     exclude: [],
     alias: {
-        lwc: '@lwc/engine-server',
+        lwc: '@lwc/engine-server', // override the default "@lwc/engine-dom" package
     },
 };
-const WORKER_CONTEXT_PREPEND = `const { parentPort } = require('worker_threads')`;
-const WORKER_CONTEXT_APPEND = `parentPort.postMessage(globalThis.workerResult)`;
-function runCodeOnWorker(code) {
-    const workerCode = [WORKER_CONTEXT_PREPEND, code, WORKER_CONTEXT_APPEND].join('\n');
-    return new Promise((resolve, reject) => {
+const WORKER_CONTEXT_PARENTPORT = `const { parentPort } = require('worker_threads');`;
+const WORKER_CONTEXT_POSTBACK = `globalThis.postback = (result) => parentPort.postMessage(result);`;
+/**
+ * Run the SSR process in a worker, and return the results to the main thread.
+ * The "globalThis.postback" is a function to allow SSR module to post results back to the parentPort, and the Promise in the main thread resolves.
+ * The properties are stored in "globalThis.ssrProps" and used in the SSR module.
+ * @param codes - Code strings which SSR a root component
+ * @returns a promise to the SSRed code string, or an error message
+ */
+function runCodeOnWorker(codes) {
+    const workerCode = [WORKER_CONTEXT_PARENTPORT, WORKER_CONTEXT_POSTBACK, ...codes].join('\n');
+    return new Promise((resolve) => {
         const worker = new Worker(workerCode, { eval: true });
         worker.on('message', resolve);
-        worker.on('error', reject);
+        worker.on('error', ({ message }) => resolve({ error: `SSR worker exited with error: ${message}` }));
         worker.on('exit', (code) => {
             if (code !== 0) {
-                reject(new Error(`Worker stopped with exit code ${code}`));
+                resolve({ error: `SSR worker stopped with exit code: ${code}` });
             }
         });
     });
 }
-export async function ssrElement(options, moduleBundler, runtimeEnvironment) {
-    const { specifier } = options;
-    const bundleDef = await moduleBundler.getModuleBundle({ specifier }, runtimeEnvironment, undefined, bundleConfigOverrides);
-    const result = await runCodeOnWorker(bundleDef.code);
-    if (result.error) {
-        throw new Error(result.error);
+/**
+ * Create a bundle for the given SSR module and run the code in a worker.
+ * @param moduleInfo - specifier: The ID of the module, generated by "lwc-ssr/moduleProvider", which SSRs a component
+ *                     props: A map of the key:value property pairs parsed from the custom element attributes (ie: all string values)
+ * @param moduleBundler
+ * @param runtimeEnvironment
+ * @returns a promise to the SSRed code string
+ */
+export async function ssrElement({ specifier, props }, moduleBundler, runtimeEnvironment) {
+    // Ensure the bundle flag is always off,
+    // otherwise TOO much gets bundled in the module registry
+    // in ESM, resulting lwc clashes/duplication
+    runtimeEnvironment.bundle = false;
+    const { bundleRecord, code, specifier: bundleSpecifier, version, } = await moduleBundler.getModuleBundle({ specifier }, runtimeEnvironment, undefined, bundleConfigOverrides);
+    const { error, result } = runtimeEnvironment.format === 'amd'
+        ? await runCodeOnWorker([
+            ...(await getCode(runtimeEnvironment, version.replace(/\./g, '_'), bundleRecord.includedModules.find((m) => m.startsWith('lwc/v')), bundleSpecifier)),
+            `globalThis.ssrProps = ${JSON.stringify(props)};`,
+            code,
+        ])
+        : await runCodeOnWorker([`globalThis.ssrProps = ${JSON.stringify(props)};`, code]);
+    if (error) {
+        throw new Error(error);
     }
     else {
-        return result.result;
+        return result;
     }
 }
 //# sourceMappingURL=ssr-element.js.map

package/package.json

@@ -4,7 +4,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.7.0-alpha.6",
+    "version": "0.7.0-alpha.9",
     "homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
     "repository": {
         "type": "git",
@@ -33,14 +33,14 @@
         "build/**/*.d.ts"
     ],
     "dependencies": {
-        "@lwrjs/diagnostics": "0.7.0-alpha.6",
-        "@lwrjs/shared-utils": "0.7.0-alpha.6"
+        "@lwrjs/diagnostics": "0.7.0-alpha.9",
+        "@lwrjs/shared-utils": "0.7.0-alpha.9"
     },
     "devDependencies": {
-        "@lwrjs/types": "0.7.0-alpha.6"
+        "@lwrjs/types": "0.7.0-alpha.9"
     },
     "engines": {
         "node": ">=14.15.4 <17"
     },
-    "gitHead": "d536e1f978f13c4fa171b5f643f61a876e746da0"
+    "gitHead": "522665298cc74f1898da6ed018fa72504bd72645"
 }

package/build/cjs/moduleProvider/utils.cjs

@@ -1,42 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __markAsModule = (target) => __defProp(target, "__esModule", {value: true});
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {get: all[name], enumerable: true});
-};
-var __exportStar = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, {get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable});
-  }
-  return target;
-};
-var __toModule = (module2) => {
-  return __exportStar(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? {get: () => module2.default, enumerable: true} : {value: module2, enumerable: true})), module2);
-};
-
-// packages/@lwrjs/lwc-ssr/src/moduleProvider/utils.ts
-__markAsModule(exports);
-__export(exports, {
-  createSsrBootstrapModule: () => createSsrBootstrapModule
-});
-var import_shared_utils = __toModule(require("@lwrjs/shared-utils"));
-function createSsrBootstrapModule(rootComponent) {
-  return [
-    "/* This module is meant to be used in a Server context */",
-    'import { renderComponent } from "@lwc/engine-server"',
-    `import Ctor from "${rootComponent}"`,
-    "try {",
-    `  const result = renderComponent("${(0, import_shared_utils.moduleSpecifierToKebabCase)(rootComponent)}", Ctor, {});`,
-    "  globalThis.workerResult = { result };",
-    "} catch(err) {",
-    "  globalThis.workerResult = { error: err.toString() };",
-    `}`
-  ].join("\n");
-}

package/build/es/moduleProvider/utils.d.ts

@@ -1,6 +0,0 @@
-/**
- * Create the virtual source for the application bootstrap module
- * @returns the generated source
- */
-export declare function createSsrBootstrapModule(rootComponent: string): string;
-//# sourceMappingURL=utils.d.ts.map

package/build/es/moduleProvider/utils.js

@@ -1,19 +0,0 @@
-import { moduleSpecifierToKebabCase } from '@lwrjs/shared-utils';
-/**
- * Create the virtual source for the application bootstrap module
- * @returns the generated source
- */
-export function createSsrBootstrapModule(rootComponent) {
-    return [
-        '/* This module is meant to be used in a Server context */',
-        'import { renderComponent } from "@lwc/engine-server"',
-        `import Ctor from "${rootComponent}"`,
-        'try {',
-        `  const result = renderComponent("${moduleSpecifierToKebabCase(rootComponent)}", Ctor, {});`,
-        '  globalThis.workerResult = { result };',
-        '} catch(err) {',
-        '  globalThis.workerResult = { error: err.toString() };',
-        `}`,
-    ].join('\n');
-}
-//# sourceMappingURL=utils.js.map