@lwrjs/lwc-ssr 0.7.2 → 0.8.0-alpha.2

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

@@ -36,18 +36,18 @@ import Ctor, * as rootComponent from '${rootSpecifier}';
 
 (async () => {
     try {
-        let props = globalThis.context.props;
+        // 1. setup props
+        const context = globalThis.getContext();
+        let props = context.props;
         if (rootComponent.getProps) {
-            const data = await rootComponent.getProps({
-                props,
-                params: globalThis.context.params,
-                query: globalThis.context.query,
-                locale: globalThis.context.locale,
-                fetch: globalThis.fetch,
-            });
+            const data = await rootComponent.getProps(context);
             props = data.props; // overwrite public props
         }
+
+        // 2. render component
         const result = renderComponent('${(0, import_shared_utils.moduleSpecifierToKebabCase)(rootSpecifier)}', Ctor, props || {});
+
+        // 3. relay results
         globalThis.postMessage({ result, props });
     } catch(e) {
         globalThis.postMessage({ error: e });

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/sandbox.cjs

@@ -30,7 +30,7 @@ var import_worker_threads = __toModule(require("worker_threads"));
 var HEADER = "/* This module is generated and meant to be used in a Server context */";
 var WORKER_CODE_SANDBOX_APIS = [
   `const { parentPort, workerData } = require('worker_threads');`,
-  `globalThis.context = workerData;`,
+  `globalThis.getContext = () => workerData;`,
   `globalThis.fetch = require('node-fetch');`,
   `globalThis.postMessage = (...args) => parentPort.postMessage(...args);`
 ];

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

@@ -52,7 +52,8 @@ async function ssrElement({specifier, props: templateProps}, moduleBundler, {run
     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

@@ -20,18 +20,18 @@ import Ctor, * as rootComponent from '${rootSpecifier}';
 
 (async () => {
     try {
-        let props = globalThis.context.props;
+        // 1. setup props
+        const context = globalThis.getContext();
+        let props = context.props;
         if (rootComponent.getProps) {
-            const data = await rootComponent.getProps({
-                props,
-                params: globalThis.context.params,
-                query: globalThis.context.query,
-                locale: globalThis.context.locale,
-                fetch: globalThis.fetch,
-            });
+            const data = await rootComponent.getProps(context);
             props = data.props; // overwrite public props
         }
+
+        // 2. render component
         const result = renderComponent('${moduleSpecifierToKebabCase(rootSpecifier)}', Ctor, props || {});
+
+        // 3. relay results
         globalThis.postMessage({ result, props });
     } catch(e) {
         globalThis.postMessage({ error: e });

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/sandbox.js

@@ -2,8 +2,8 @@ import { Worker } from 'worker_threads';
 const HEADER = '/* This module is generated and meant to be used in a Server context */';
 /**
  * Sandbox APIs
- * @param globalThis.context
- * context such as props, params, and locale for executing SSR
+ * @param globalThis.getContext
+ * function to provide prop request context object with properties such as props, params, and locale
  *
  * @param globalThis.fetch
  * fetch function for external data fetching
@@ -13,7 +13,7 @@ const HEADER = '/* This module is generated and meant to be used in a Server con
  */
 const WORKER_CODE_SANDBOX_APIS = [
     `const { parentPort, workerData } = require('worker_threads');`,
-    `globalThis.context = workerData;`,
+    `globalThis.getContext = () => workerData;`,
     `globalThis.fetch = require('node-fetch');`,
     `globalThis.postMessage = (...args) => parentPort.postMessage(...args);`,
 ];

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

@@ -35,7 +35,8 @@ export async function ssrElement({ specifier, props: templateProps }, moduleBund
         ], 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.7.2",
+    "version": "0.8.0-alpha.2",
     "homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
     "repository": {
         "type": "git",
@@ -33,14 +33,14 @@
         "build/**/*.d.ts"
     ],
     "dependencies": {
-        "@lwrjs/diagnostics": "0.7.2",
-        "@lwrjs/shared-utils": "0.7.2"
+        "@lwrjs/diagnostics": "0.8.0-alpha.2",
+        "@lwrjs/shared-utils": "0.8.0-alpha.2"
     },
     "devDependencies": {
-        "@lwrjs/types": "0.7.2"
+        "@lwrjs/types": "0.8.0-alpha.2"
     },
     "engines": {
         "node": ">=14.15.4 <19"
     },
-    "gitHead": "1467a95aa5dcf6901e1122f6025ffd4f22237a3f"
+    "gitHead": "44bee038acb30418870678d886e3ded4a6afecf0"
 }