@lwrjs/lwc-ssr 0.13.3 → 0.13.5

package/build/cjs/moduleLoader.cjs

@@ -53,7 +53,8 @@ async function createAMDModuleLoader(config, resourceRegistry, bundleRegistry, r
       fn(context, ...Object.values(context));
     } else {
       ((context) => {
-        eval(`${Object.keys(context).reduce((c, k) => c + `const ${k} = context['${k}'];`, "globalThis=context;")} ${source}`);
+        const evalSource = `${Object.keys(context).reduce((c, k) => c + `const ${k} = context['${k}'];`, "const globalThis=context;")} ${source}`;
+        eval(evalSource);
       })(context);
     }
   };
@@ -79,7 +80,7 @@ async function createAMDModuleLoader(config, resourceRegistry, bundleRegistry, r
         const moduleId = (0, import_shared_utils.explodeSpecifier)(bundle);
         const def = await bundleRegistry.getModuleBundle(moduleId, runtimeEnvironment, runtimeParams);
         if (typeof def.src === "string" && !def.code.includes("//# sourceURL=")) {
-          const srcUrl = (0, import_shared_utils.isLocalDev)() ? (0, import_shared_utils.getLocalDevOverrideUrl)(config.cacheDir, moduleId.specifier, def.src) : def.src;
+          const srcUrl = def.srcOverride ?? def.src;
           def.code += `
 //# sourceURL=${import_path.default.resolve(srcUrl)}`;
         }

package/build/cjs/renderer.cjs

@@ -187,7 +187,7 @@ var Renderer = class {
   getCachedBootstrapContext(route, runtimeEnvironment, runtimeParams, serverData, reevaluateModules) {
     let loader, bootstrapServiceEvaluationMap;
     if (reevaluateModules) {
-      if (!this.cachedBootstrapContext) {
+      if (!this.cachedBootstrapContext || (0, import_shared_utils.isLocalDev)()) {
         this.cachedBootstrapContext = {
           loader: (0, import_moduleLoader.createModuleLoader)(this.config, this.resourceRegistry, this.bundleRegistry, runtimeEnvironment, runtimeParams, serverData, route.bootstrap),
           bootstrapServiceEvaluationMap: new Map()

package/build/cjs/utils.cjs

@@ -29,6 +29,7 @@ __export(exports, {
   addHeadMarkup: () => addHeadMarkup,
   createFetchEndowment: () => createFetchEndowment,
   createHeadMarkup: () => createHeadMarkup,
+  createSsrErrorMarkup: () => createSsrErrorMarkup,
   createSsrErrorMessage: () => createSsrErrorMessage,
   getLoaderConfig: () => getLoaderConfig,
   getLoaderId: () => getLoaderId,
@@ -49,8 +50,17 @@ function getRenderTimeout() {
   const override = process.env.SSR_TIMEOUT;
   return override ? Number.parseInt(override) : DEFAULT_SSR_TIMEOUT;
 }
-function createSsrErrorMessage(specifier, e) {
-  return `Server-side rendering for "${specifier}" failed. Falling back to client-side rendering. Reason: ${(0, import_diagnostics.stringifyError)(e)}`;
+function createSsrErrorMessage(specifier, e, fallback = true) {
+  const fallbackMsg = fallback ? " Falling back to client-side rendering." : "";
+  return `Server-side rendering for "${specifier}" failed.${fallbackMsg} Reason: ${(0, import_diagnostics.stringifyError)(e)}`;
+}
+function createSsrErrorMarkup(errors, basePath) {
+  let markup = '<div style="font-family:sans-serif;margin:50px;font-size:1.2em;"><h1>500: Server-side rendering failed</h1><p>Reasons:</p><ul>';
+  Object.entries(errors).forEach(([specifier, reason]) => {
+    markup += `<li><strong>${specifier}</strong>: ${(0, import_diagnostics.stringifyError)(reason)}</li>`;
+  });
+  markup += `</ul><p style="padding-top:1em;">See more information in the browser console. Contact your administrator for assistance.</p></div>`;
+  return markup;
 }
 async function getLoaderShim(resourceRegistry, runtimeEnvironment, bootstrapConfig) {
   const {debug} = runtimeEnvironment;

package/build/cjs/viewProvider/index.cjs

@@ -77,10 +77,10 @@ var LwcViewProvider = class extends import_base_view_provider.default {
             if (!debug && !(0, import_shared_utils.getFeatureFlags)().SSR_WITH_CSR_FALLBACK) {
               throw new Error(errorString);
             }
-            const message = (0, import_utils.createSsrErrorMessage)(specifier, errorString);
+            const message = (0, import_utils.createSsrErrorMessage)(specifier, errorString, false);
             import_diagnostics.logger.warn(message, errors[specifier]);
             return {
-              renderedView: `<${element} ${import_shared_utils.HYDRATE_DIRECTIVE}="${import_shared_utils.HYDRATE_CLIENT_VALUE}"></${element}>`,
+              renderedView: (0, import_utils.createSsrErrorMarkup)(errors, this.runtimeEnvironment.basePath),
               metadata: {
                 serverDebug: {message: debug ? message : void 0},
                 customElements: [],

package/build/es/moduleLoader.js

@@ -1,7 +1,7 @@
 import path from 'path';
 import crypto from 'crypto';
 import { getTracer } from '@lwrjs/instrumentation';
-import { explodeSpecifier, getLocalDevOverrideUrl, getSpecifier, isLocalDev } from '@lwrjs/shared-utils';
+import { explodeSpecifier, getSpecifier } from '@lwrjs/shared-utils';
 import { FetchController, createFetchEndowment, getLoaderConfig, getLoaderId, getLoaderShim, } from './utils.js';
 export const FETCH_ABORT_KEY = '__fetchAbortId__';
 const BOOTSTRAP_SPECIFIER = '@lwrjs/ssr-bootstrap';
@@ -23,13 +23,15 @@ async function createAMDModuleLoader(config, resourceRegistry, bundleRegistry, r
     const useEval = process.env.SSR_DEBUG === 'true';
     const init = (source) => {
         if (!useEval) {
+            // Runtime Default: use new Function() for source evaluation due its to performance benefits / code isolation
             const fn = new Function('globalThis', ...Object.keys(context), source);
             fn(context, ...Object.values(context));
         }
         else {
-            // use eval to ensure source map line numbers are correct for debugging
+            // Debugging: use eval() when debugging SSR to ensure source map line numbers are correct
             ((context) => {
-                eval(`${Object.keys(context).reduce((c, k) => c + `const ${k} = context['${k}'];`, 'globalThis=context;')} ${source}`);
+                const evalSource = `${Object.keys(context).reduce((c, k) => c + `const ${k} = context['${k}'];`, 'const globalThis=context;')} ${source}`;
+                eval(evalSource);
             })(context);
         }
     };
@@ -61,9 +63,7 @@ async function createAMDModuleLoader(config, resourceRegistry, bundleRegistry, r
                 const def = await bundleRegistry.getModuleBundle(moduleId, runtimeEnvironment, runtimeParams);
                 if (typeof def.src === 'string' && !def.code.includes('//# sourceURL=')) {
                     // @view bundles are stored in a special location during local-dev
-                    const srcUrl = isLocalDev()
-                        ? getLocalDevOverrideUrl(config.cacheDir, moduleId.specifier, def.src)
-                        : def.src;
+                    const srcUrl = def.srcOverride ?? def.src;
                     def.code += `\n//# sourceURL=${path.resolve(srcUrl)}`;
                 }
                 const staticImports = def.bundleRecord.imports?.map((dep) => getSpecifier(dep)) ?? [];

package/build/es/renderer.js

@@ -1,7 +1,7 @@
 // TODO: investigate perf impact W-16056356
 import { LRUCache } from 'lru-cache';
 import { LwrUnresolvableError, createSingleDiagnosticError, descriptions, logger, stringifyError, } from '@lwrjs/diagnostics';
-import { buildEnvironmentContext, getCacheKeyFromJson, getSpecifier, isLambdaEnv, moduleSpecifierToKebabCase, getFeatureFlags, TaskPool, } from '@lwrjs/shared-utils';
+import { buildEnvironmentContext, getCacheKeyFromJson, getSpecifier, isLambdaEnv, moduleSpecifierToKebabCase, getFeatureFlags, TaskPool, isLocalDev, } from '@lwrjs/shared-utils';
 import { ViewSpan, getTracer } from '@lwrjs/instrumentation';
 import { getServerBootstrapServices, getRenderTimeout } from './utils.js';
 import { createModuleLoader } from './moduleLoader.js';
@@ -228,7 +228,7 @@ export class Renderer {
         let loader, bootstrapServiceEvaluationMap;
         // when `REEEVALUTE_MODULES` is true, we only have a single context/loader, regardless of the env
         if (reevaluateModules) {
-            if (!this.cachedBootstrapContext) {
+            if (!this.cachedBootstrapContext || isLocalDev()) {
                 this.cachedBootstrapContext = {
                     loader: createModuleLoader(this.config, this.resourceRegistry, this.bundleRegistry, runtimeEnvironment, runtimeParams, serverData, route.bootstrap),
                     bootstrapServiceEvaluationMap: new Map(),

package/build/es/utils.d.ts

@@ -6,7 +6,8 @@ interface ServerEnvironment extends EnvironmentContext {
 export declare const SSR_PROPS_ATTR = "data-lwr-props-id";
 export declare function getPropsId(): string;
 export declare function getRenderTimeout(): number;
-export declare function createSsrErrorMessage(specifier: string, e: any): string;
+export declare function createSsrErrorMessage(specifier: string, e: any, fallback?: boolean): string;
+export declare function createSsrErrorMarkup(errors: Record<string, string>, basePath: string): string;
 export declare function getLoaderShim(resourceRegistry: PublicResourceRegistry, runtimeEnvironment: RuntimeEnvironment, bootstrapConfig: NormalizedLwrAppBootstrapConfig): Promise<string>;
 export declare function getLoaderId(config: ClientBootstrapConfig, bootstrapConfig: NormalizedLwrAppBootstrapConfig): string;
 export declare function getLoaderConfig(bootstrapModule: string, config: ProviderAppConfig, runtimeParams: RuntimeParams, serverData: ServerData): ClientBootstrapConfig & {

package/build/es/utils.js

@@ -10,8 +10,17 @@ export function getRenderTimeout() {
     const override = process.env.SSR_TIMEOUT;
     return override ? Number.parseInt(override) : DEFAULT_SSR_TIMEOUT;
 }
-export function createSsrErrorMessage(specifier, e) {
-    return `Server-side rendering for "${specifier}" failed. Falling back to client-side rendering. Reason: ${stringifyError(e)}`;
+export function createSsrErrorMessage(specifier, e, fallback = true) {
+    const fallbackMsg = fallback ? ' Falling back to client-side rendering.' : '';
+    return `Server-side rendering for "${specifier}" failed.${fallbackMsg} Reason: ${stringifyError(e)}`;
+}
+export function createSsrErrorMarkup(errors, basePath) {
+    let markup = '<div style="font-family:sans-serif;margin:50px;font-size:1.2em;"><h1>500: Server-side rendering failed</h1><p>Reasons:</p><ul>';
+    Object.entries(errors).forEach(([specifier, reason]) => {
+        markup += `<li><strong>${specifier}</strong>: ${stringifyError(reason)}</li>`;
+    });
+    markup += `</ul><p style="padding-top:1em;">See more information in the browser console. Contact your administrator for assistance.</p></div>`;
+    return markup;
 }
 export async function getLoaderShim(resourceRegistry, runtimeEnvironment, bootstrapConfig) {
     const { debug } = runtimeEnvironment;

package/build/es/viewProvider/index.js

@@ -1,8 +1,8 @@
 import BaseViewProvider from '@lwrjs/base-view-provider';
 import { logger } from '@lwrjs/diagnostics';
 import { ViewSpan, getTracer } from '@lwrjs/instrumentation';
-import { HYDRATE_CLIENT_VALUE, HYDRATE_DIRECTIVE, getFeatureFlags, hashContent, isSpecifier, moduleSpecifierToKebabCase, slugify, } from '@lwrjs/shared-utils';
-import { createHeadMarkup, createSsrErrorMessage } from '../utils.js';
+import { getFeatureFlags, hashContent, isSpecifier, moduleSpecifierToKebabCase, slugify, } from '@lwrjs/shared-utils';
+import { createHeadMarkup, createSsrErrorMarkup, createSsrErrorMessage } from '../utils.js';
 import { getRenderer } from '../renderer.js';
 export default class LwcViewProvider extends BaseViewProvider {
     constructor(_pluginConfig, providerConfig) {
@@ -18,7 +18,7 @@ export default class LwcViewProvider extends BaseViewProvider {
         return;
     }
     async getView(viewId) {
-        // This view provider creates content templates from LWC component specifiers
+        // This view provider creates content templates with islands from LWC component specifiers
         const specifier = viewId.contentTemplate?.component;
         if (!specifier || !isSpecifier(specifier)) {
             return;
@@ -48,18 +48,19 @@ export default class LwcViewProvider extends BaseViewProvider {
                     const { results = {}, errors } = await getRenderer(config, moduleBundler, resourceRegistry).render({ [specifier]: { specifier, props: {} } }, route, runtimeEnvironment, Object(runtimeParams), undefined, 
                     // lets the renderer know this is the first of 2-pass SSR
                     true);
-                    // Handle errors: fallback to CSR or throw
+                    // Handle errors: throw or return an error page
                     if (errors) {
                         const errorString = Object.values(errors).join(', ');
                         if (!debug && !getFeatureFlags().SSR_WITH_CSR_FALLBACK) {
                             // 500 error for the page request
                             throw new Error(errorString);
                         }
-                        // fallback to CSR
-                        const message = createSsrErrorMessage(specifier, errorString);
+                        // error page
+                        const message = createSsrErrorMessage(specifier, errorString, false);
                         logger.warn(message, errors[specifier]); // TODO specific metadata for errors
                         return {
-                            renderedView: `<${element} ${HYDRATE_DIRECTIVE}="${HYDRATE_CLIENT_VALUE}"></${element}>`,
+                            // render the errors on the browser page; fallback to CSR is not possible on the 1st pass
+                            renderedView: createSsrErrorMarkup(errors, this.runtimeEnvironment.basePath),
                             // send an error message to the client if debug mode is on
                             metadata: {
                                 serverDebug: { message: debug ? message : undefined },

package/package.json

@@ -4,7 +4,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.13.3",
+    "version": "0.13.5",
     "homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
     "repository": {
         "type": "git",
@@ -42,18 +42,18 @@
         "build/**/*.d.ts"
     ],
     "dependencies": {
-        "@lwrjs/config": "0.13.3",
-        "@lwrjs/diagnostics": "0.13.3",
-        "@lwrjs/instrumentation": "0.13.3",
-        "@lwrjs/loader": "0.13.3",
-        "@lwrjs/shared-utils": "0.13.3",
+        "@lwrjs/config": "0.13.5",
+        "@lwrjs/diagnostics": "0.13.5",
+        "@lwrjs/instrumentation": "0.13.5",
+        "@lwrjs/loader": "0.13.5",
+        "@lwrjs/shared-utils": "0.13.5",
         "fs-extra": "^11.2.0",
         "lru-cache": "^10.4.3"
     },
     "devDependencies": {
-        "@lwrjs/types": "0.13.3",
+        "@lwrjs/types": "0.13.5",
         "jest": "^26.6.3",
-        "mock-fs": "^5.2.0",
+        "memfs": "^4.9.3",
         "ts-jest": "^26.5.6"
     },
     "engines": {
@@ -62,5 +62,5 @@
     "volta": {
         "extends": "../../../package.json"
     },
-    "gitHead": "adaedf286df20aed374d9eb07eaf74668084073c"
+    "gitHead": "8a0b773b7ed0e017f3fa29f1e918e0c0e31bd74f"
 }