@lwrjs/lwc-ssr 0.8.0-alpha.0 → 0.8.0-alpha.3

package/README.md

@@ -63,7 +63,7 @@ Because of this, the [`@lwrjs/router`](https://github.com/salesforce/lwr-recipes
 
 ### Preloading data during SSR
 
-Many components depend on external data. LWR provides a `getProps()` hook for developers to fetch that data on the server. LWR passes the data to the component during SSR as [properties](<(https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reactivity_public)>).
+Many components depend on external data. LWR provides a `getProps()` hook for developers to fetch that data on the server. SSR Sandbox supports `fetch` with its `globalThis` so developers could use `fetch` as if the module is executed by the browser. LWR passes the data to the component during SSR as [properties](<(https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reactivity_public)>).
 
 > **Important**: This hook is **only** run for root components.
 
@@ -83,7 +83,7 @@ export async function getProps(context: PropsRequestContext): Promise<PropsRespo
     const category = context.params.category;
     // page.html template => context.props = { limit: '10' }
     const num = context.props.limit || '25';
-    const res = await context.fetch(`https://www.some-api.com/${category}?lang=${context.locale}&num=${num}`);
+    const res = await fetch(`https://www.some-api.com/${category}?lang=${context.locale}&num=${num}`);
     const data = await res.json();
     return {
         props: {
@@ -107,8 +107,6 @@ interface PropsRequestContext {
     query: { [key: string]: string };
     // locale string for the request, eg: 'en-US'
     locale: string;
-    // server-friendly fetch() function for accessing data
-    fetch: Function;
 }
 
 interface PropsResponse {

package/build/cjs/moduleProvider/index.cjs

@@ -40,10 +40,7 @@ import Ctor, * as rootComponent from '${rootSpecifier}';
         const context = globalThis.getContext();
         let props = context.props;
         if (rootComponent.getProps) {
-            const data = await rootComponent.getProps({
-                ...context,
-                fetch: globalThis.fetch,
-            });
+            const data = await rootComponent.getProps(context);
             props = data.props; // overwrite public props
         }
 

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

@@ -76,9 +76,18 @@ 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) {
+async function getCode(runtimeEnvironment, lwrVersion, bundleSpecifier, includedModules) {
   const loaderShimSource2 = await getLoaderShim(runtimeEnvironment);
   const lwrConfigString = JSON.stringify(getLwrConfig(bundleSpecifier, lwrVersion));
+  const lwcSpecifier = includedModules.reduce((specifier, includedModule) => {
+    if (includedModule.startsWith("lwc/v")) {
+      return includedModule;
+    }
+    if (!specifier && includedModule.startsWith("@lwc/engine-server/v")) {
+      return includedModule.replace("@lwc/engine-server", "lwc");
+    }
+    return specifier;
+  }, "");
   return [
     GLOBALTHIS_LWR,
     `Object.assign(globalThis.LWR, ${lwrConfigString});`,

package/build/cjs/viewTransformer/index.cjs

@@ -60,7 +60,9 @@ function lwcSsrViewTranformer(options, {moduleBundler}) {
               const [, remain] = html.split(`<${tagName}`);
               html = [`<${tagName}`, ` ${import_identity.SSR_PROPS_ATTR}="${propsId}"`, remain].join("");
             }
-            stringBuilder.overwrite(startOffset, endOffset, html);
+            if (html.length > 0) {
+              stringBuilder.overwrite(startOffset, endOffset, html);
+            }
           });
         }));
         if (Object.keys(ssrProps).length) {

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

@@ -35,12 +35,13 @@ var bundleConfigOverrides = {
   }
 };
 async function ssrElement({specifier, props: templateProps}, moduleBundler, {runtimeEnvironment, runtimeParams}) {
+  const {format, bundle} = runtimeEnvironment;
   const {
     bundleRecord,
     code,
     specifier: bundleSpecifier,
     version
-  } = await moduleBundler.getModuleBundle({specifier}, {...runtimeEnvironment, bundle: false}, void 0, bundleConfigOverrides);
+  } = await moduleBundler.getModuleBundle({specifier}, {...runtimeEnvironment, bundle: format === "esm" ? false : bundle}, void 0, bundleConfigOverrides);
   const context = {
     props: templateProps,
     params: runtimeParams.params || {},
@@ -48,11 +49,12 @@ async function ssrElement({specifier, props: templateProps}, moduleBundler, {run
     locale: runtimeParams.locale || runtimeEnvironment.defaultLocale
   };
   const {error, result, props} = runtimeEnvironment.format === "amd" ? await (0, import_sandbox.default)([
-    ...await (0, import_amd_utils.default)(runtimeEnvironment, version.replace(/\./g, "_"), bundleRecord.includedModules.find((m) => m.startsWith("lwc/v")), bundleSpecifier),
+    ...await (0, import_amd_utils.default)(runtimeEnvironment, version.replace(/\./g, "_"), bundleSpecifier, bundleRecord.includedModules),
     code
   ], context) : await (0, import_sandbox.default)([code], context);
   if (error) {
-    throw new Error(error);
+    console.error(`Server-side rendering for "${specifier}" failed. Falling back to client-side rendering. Reason: `, error);
+    return {html: "", props: void 0};
   } else {
     return {html: result, props};
   }

package/build/es/moduleProvider/index.js

@@ -24,10 +24,7 @@ import Ctor, * as rootComponent from '${rootSpecifier}';
         const context = globalThis.getContext();
         let props = context.props;
         if (rootComponent.getProps) {
-            const data = await rootComponent.getProps({
-                ...context,
-                fetch: globalThis.fetch,
-            });
+            const data = await rootComponent.getProps(context);
             props = data.props; // overwrite public props
         }
 

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

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

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

@@ -54,9 +54,20 @@ 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) {
+export default async function getCode(runtimeEnvironment, lwrVersion, bundleSpecifier, includedModules) {
     const loaderShimSource = await getLoaderShim(runtimeEnvironment);
     const lwrConfigString = JSON.stringify(getLwrConfig(bundleSpecifier, lwrVersion));
+    const lwcSpecifier = includedModules.reduce((specifier, includedModule) => {
+        if (includedModule.startsWith('lwc/v')) {
+            return includedModule;
+        }
+        // define `lwc` when `@lwc/engine-server` is included in the bundle
+        // `lwc` will be excluded by default when bundling is enabled
+        if (!specifier && includedModule.startsWith('@lwc/engine-server/v')) {
+            return includedModule.replace('@lwc/engine-server', 'lwc');
+        }
+        return specifier;
+    }, '');
     // 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)

package/build/es/viewTransformer/index.js

@@ -56,8 +56,10 @@ export default function lwcSsrViewTranformer(options, { moduleBundler }) {
                             const [, remain] = html.split(`<${tagName}`);
                             html = [`<${tagName}`, ` ${SSR_PROPS_ATTR}="${propsId}"`, remain].join('');
                         }
-                        // Overwrite the custom element with the SSRed component string
-                        stringBuilder.overwrite(startOffset, endOffset, html);
+                        if (html.length > 0) {
+                            // Overwrite the custom element with the SSRed component string
+                            stringBuilder.overwrite(startOffset, endOffset, html);
+                        }
                     });
                 }));
                 if (Object.keys(ssrProps).length) {

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

@@ -4,6 +4,6 @@ interface SandboxResults {
     error?: string;
     props?: Json;
 }
-export default function runCode(codes: string[], context: Partial<PropsRequestContext>): Promise<SandboxResults>;
+export default function runCode(codes: string[], context: PropsRequestContext): Promise<SandboxResults>;
 export {};
 //# sourceMappingURL=sandbox.d.ts.map

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

@@ -15,11 +15,12 @@ const bundleConfigOverrides = {
  * @returns a promise to the SSRed code string
  */
 export async function ssrElement({ specifier, props: templateProps }, moduleBundler, { runtimeEnvironment, runtimeParams }) {
+    const { format, bundle } = runtimeEnvironment;
     const { bundleRecord, code, specifier: bundleSpecifier, version, } = await moduleBundler.getModuleBundle({ specifier }, 
-    // Ensure the bundle flag is always off,
+    // Ensure the bundle flag is always off in ESM,
     // otherwise TOO much gets bundled in the module registry
     // in ESM, resulting lwc clashes/duplication
-    { ...runtimeEnvironment, bundle: false }, undefined, bundleConfigOverrides);
+    { ...runtimeEnvironment, bundle: format === 'esm' ? false : bundle }, undefined, bundleConfigOverrides);
     // Gather context to send into the SSR sandbox
     const context = {
         props: templateProps,
@@ -30,12 +31,13 @@ export async function ssrElement({ specifier, props: templateProps }, moduleBund
     // Get the SSR string and properties bag
     const { error, result, props } = runtimeEnvironment.format === 'amd'
         ? await runCode([
-            ...(await getCode(runtimeEnvironment, version.replace(/\./g, '_'), bundleRecord.includedModules.find((m) => m.startsWith('lwc/v')), bundleSpecifier)),
+            ...(await getCode(runtimeEnvironment, version.replace(/\./g, '_'), bundleSpecifier, bundleRecord.includedModules)),
             code,
         ], context)
         : await runCode([code], context);
     if (error) {
-        throw new Error(error);
+        console.error(`Server-side rendering for "${specifier}" failed. Falling back to client-side rendering. Reason: `, error);
+        return { html: '', props: undefined };
     }
     else {
         return { html: result, props };

package/package.json

@@ -4,7 +4,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.8.0-alpha.0",
+    "version": "0.8.0-alpha.3",
     "homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
     "repository": {
         "type": "git",
@@ -33,14 +33,14 @@
         "build/**/*.d.ts"
     ],
     "dependencies": {
-        "@lwrjs/diagnostics": "0.8.0-alpha.0",
-        "@lwrjs/shared-utils": "0.8.0-alpha.0"
+        "@lwrjs/diagnostics": "0.8.0-alpha.3",
+        "@lwrjs/shared-utils": "0.8.0-alpha.3"
     },
     "devDependencies": {
-        "@lwrjs/types": "0.8.0-alpha.0"
+        "@lwrjs/types": "0.8.0-alpha.3"
     },
     "engines": {
         "node": ">=14.15.4 <19"
     },
-    "gitHead": "2e1f60ed13f9f8079f1333af9b614cd24715f3ad"
+    "gitHead": "bf22045bd29a832ff98f6bafa1120b5453960f8c"
 }