@lwrjs/lwc-ssr 0.10.0-alpha.8 → 0.10.0

package/README.md

@@ -7,9 +7,11 @@
     -   [Add the SSR package dependency](#add-the-ssr-package-dependency)
     -   [Turn on SSR](#turn-on-ssr)
     -   [Building SSR pages](#building-ssr-pages)
+    -   [SSR detection](#ssr-detection)
     -   [Loading data during SSR](#loading-data-during-ssr)
     -   [Caching](#caching)
     -   [Client hydration](#client-hydration)
+    -   [Skip SSR](#skip-ssr)
 -   [Limitations](#limitations)
     -   [Synthetic shadow](#synthetic-shadow)
     -   [Locker](#locker)
@@ -18,6 +20,7 @@
     -   [SSR execution](#ssr-execution)
     -   [Portability](#portability)
     -   [Synchronous code](#synchronous-code)
+    -   [Styling](#styling)
 -   [Debugging](#debugging)
     -   [Debug logging]()
     -   [Breakpoints](#breakpoints)
@@ -27,7 +30,7 @@
 
 ### What is SSR?
 
-[Lightning Web Components (LWC)](https://lwc.dev/) is a framework for creating client-side applications. However, these components can also be rendered as an HTML string on the **server**. LWR sends these strings to the client, where they can be ["hydrated"](#client-hydration) to create an interactive web app.
+[Lightning Web Components (LWC)](https://lwc.dev/) is a framework for creating client-side applications. However, these components can also be rendered as an HTML string on the **server**. LWR sends these strings to the client, where they may be ["hydrated"](#client-hydration) to create an interactive web app.
 
 See the following RFCs from LWC:
 
@@ -52,7 +55,7 @@ Add SSR capabilities to an LWR app by including `@lwrjs/lwc-ssr` in its _package
 // my-app/package.json
 {
     "dependencies": {
-        "@lwrjs/lwc-ssr": "0.9.0"
+        "@lwrjs/lwc-ssr": "latest"
     }
 }
 ```
@@ -98,6 +101,35 @@ LWR will automatically pass any root component attributes from a [template](http
 </section>
 ```
 
+### SSR detection
+
+Check the `import.meta.env.SSR` flag to determine where component code is running. On the server it will be `true`, and on the client it will be [falsy](https://medium.com/coding-at-dawn/what-are-falsy-values-in-javascript-ca0faa34feb4). Component developers can use this flag to control in which environment code is run:
+
+```js
+// pivot on the SSR flag
+export default class App extends LightningElement {
+    connectedCallback() {
+        if (import.meta.env.SSR) {
+            // run code on the server
+        } else {
+            // run code on the client
+        }
+    }
+}
+```
+
+When using typescript, LWR augments the global `ImportMeta` interface in the `@lwrjs/types` package:
+
+```ts
+declare global {
+    interface ImportMeta {
+        readonly env: {
+            SSR: boolean;
+        };
+    }
+}
+```
+
 ### Loading data during SSR
 
 Many components depend on external data and resources. LWR provides a `getPageData()` hook for developers to fetch data on the server. During SSR, LWR calls the `getPageData()` hook for each **root component**, then serializes the resulting data into the page document as either [JSON](#json) or [markup](#markup).
@@ -142,7 +174,9 @@ In LWR, the SSR process runs in a sandbox. This sandbox supports `globalThis.fet
 
 #### JSON
 
-Data in `PageDataResponse.props` is serialized into the page document as JSON for each root component. LWR passes this data to the root component as [public properties](<(https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reactivity_public)>) during both SSR and [client hydration](#client-hydration). In order to receive the properties, the root component must declare them using `@api` (see the `data` property in the [example](#data-example) below).
+LWR passes this data to the root component as [public properties](<(https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reactivity_public)>) during SSR. In order to receive the properties, the root component must declare them using the `@api` decorator (see the `data` property in the [example](#data-example) below).
+
+If a root component is [hydrated](#client-hydration), its `PageDataResponse.props` are serialized into the page document as JSON, then passed in during client hydration.
 
 #### Markup
 
@@ -211,7 +245,35 @@ LWR will use the shortest TTL value from **all** sources to set the `max-age` of
 
 ### Client hydration
 
-When SSRed component HTML reaches the browser, each root component is automatically hydrated. LWR uses the [LWC `hydrateComponent()` API](https://rfcs.lwc.dev/rfcs/lwc/0117-ssr-rehydration) to do so. Hydrating a component starts its component lifecycle and makes it interactive.
+Root components can opt-in to hydrate their SSRed HTML in the browser. LWR uses the [LWC `hydrateComponent()` API](https://rfcs.lwc.dev/rfcs/lwc/0117-ssr-rehydration) to do so. Hydrating a component starts its component lifecycle and makes it interactive. To opt-in to hydration, a root component must have the `lwr:hydrate` directive:
+
+```html
+<!-- my-app/src/content/contact.html -->
+
+<!-- hydrated -->
+<my-contact lwr:hydrate></my-contact>
+
+<!-- NOT hydrated -->
+<my-about></my-about>
+```
+
+LWC will log a "hydration warning" if the SSRed component HTML does not match the output of its _first rendering cycle_ on the client. Hydration warnings should be prevented because they result in unsightly UI shifting. To avoid hydration warnings, ensure that template updates only occur due to user interaction, data fetching, or other _asynchronous_ actions.
+
+### Skip SSR
+
+Root components can skip SSR by setting the `lwr:hydrate` directive to `client-only`:
+
+```html
+<!-- my-app/src/content/location.html -->
+
+<!-- SSRed -->
+<my-info></my-info>
+
+<!-- NOT SSRed -->
+<my-map lwr:hydrate="client-only"></my-map>
+```
+
+Root components which opt-out of SSR will be fully rendered on the client using the [LWC `createElement()` API](https://www.npmjs.com/package/@lwc/engine-dom).
 
 ## Limitations
 
@@ -264,20 +326,20 @@ Examples of non-portable code and objects include:
 -   `window`
 -   `document`
 -   selector functions (`template.querySelector`, `template.querySelectorAll`, ...)
--   `classList`
 -   JavaScript eventing
 
 Isomorphic components can:
 
 -   place non-portable code in a function which is not [executed during SSR](#ssr-execution), such as the `renderedCallback`.
+-   import non-portable code [dynamically](#synchronous-code), so it does not get executed on the server.
 -   choose LWC APIs which are supported on both the client and server (eg: [`lwc:inner-html`](https://rfcs.lwc.dev/rfcs/lwc/0123-innerhtml-binding) over `appendChild()`).
--   guard non-portable objects so they are not accessed during SSR:
+-   guard non-portable objects so they are not accessed during SSR using the [`import.meta.env.SSR` flag](#ssr-detection):
 
 ```js
 // guard usage of the window object so it does not throw during SSR
 export default class App extends LightningElement {
     connectedCallback() {
-        if (typeof window !== 'undefined') {
+        if (!import.meta.env.SSR) {
             window.addEventListener('error', (evt) => {
                 console.error(`⚠️ Uncaught error: ${evt.message}`);
             });
@@ -299,6 +361,10 @@ The LWC SSR process run in a single synchronous pass. So any asynchronous code *
 -   [`async`/`await`](https://www.w3schools.com/js/js_async.asp)
 -   [dynamic imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)
 
+### Styling
+
+To render correctly, SSRed components must use either [native shadow](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_mixed_shadow) or [light DOM](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_light_dom). SSRed components which depend on [synthetic shadow](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_dom) may not be styled correctly on the client. If they opt-in to [hydration](#client-hydration), warnings will be thrown on the client.
+
 ## Debugging
 
 ### Debug logging

package/build/cjs/moduleProvider/index.cjs

@@ -35,25 +35,48 @@ import { renderComponent } from '@lwc/engine-server';
 import Ctor, * as rootComponent from '${rootSpecifier}';
 
 (async () => {
-    let result, props, markup;
+    let result, props, markup, existingTaskCount;
     try {
         // 1. setup page data
         const context = globalThis.getContext();
         props = context.props;
         if (rootComponent.getPageData) {
-            const data = await rootComponent.getPageData(context);
+            const data = await globalThis.trace({
+                name: 'lwr.view.getPageData',
+                attributes: {
+                    specifier: '${rootSpecifier}'
+                }
+            }, () => rootComponent.getPageData(context));
+
             props = data.props; // overwrite public props
             markup = data.markup;
         }
 
+        existingTaskCount = process.getActiveResourcesInfo
+            ? process.getActiveResourcesInfo().length
+            : 0;
+
         // 2. render component
-        result = renderComponent('${(0, import_shared_utils.moduleSpecifierToKebabCase)(rootSpecifier)}', Ctor, props || {});
+        result = globalThis.trace({
+            name: 'lwr.view.renderComponent',
+            attributes: {
+                specifier: '${rootSpecifier}'
+            }
+        }, () => renderComponent('${(0, import_shared_utils.moduleSpecifierToKebabCase)(rootSpecifier)}', Ctor, props || {}));
 
     } catch(e) {
         // (3) relay error
         globalThis.resolver({ error: e.message || e });
     }
 
+    const currentTaskCount = process.getActiveResourcesInfo
+            ? process.getActiveResourcesInfo().length
+            : 0;
+
+    if (currentTaskCount - existingTaskCount > 0) {
+        console.warn('[warn] async tasks encountered while server rendering "${rootSpecifier}"');
+    }
+
     // 3. relay successful results
     globalThis.resolver({ result, props, markup });
 })()`;

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

@@ -29,7 +29,7 @@ __export(exports, {
 });
 var import_shared_utils = __toModule(require("@lwrjs/shared-utils"));
 var import_identity = __toModule(require("../identity.cjs"));
-var lwcEngineSpecifier = "@lwc/engine-server";
+var LWC_SPECIFIERS = {csr: "lwc", ssr: "@lwc/engine-server"};
 async function readableToString(readable) {
   let result = "";
   for await (const chunk of readable) {
@@ -70,27 +70,23 @@ function getLwrConfig(bundleSpecifier, lwrVersion) {
     }
   });
 }
-function lwcDefineOverride(lwcSpecifier) {
-  return `LWR.define("${lwcSpecifier}", ["${lwcSpecifier.replace("lwc", lwcEngineSpecifier)}"], function(lwcEngine) { return lwcEngine; });`;
+function aliasLwcEngine(ssrSpecifier, aliases) {
+  const csrSpecifier = ssrSpecifier.replace(aliases.ssr, aliases.csr);
+  const ssrLwcAlias = (0, import_shared_utils.createAmdAlias)(csrSpecifier, ssrSpecifier);
+  const unversionedAlias = (0, import_shared_utils.createAmdAlias)(LWC_SPECIFIERS.csr, ssrSpecifier);
+  return `${ssrLwcAlias}${unversionedAlias}`;
 }
 var GLOBALTHIS_LWR = `globalThis.LWR = globalThis.LWR || {};`;
 async function getCode(runtimeEnvironment, lwrVersion, bundleSpecifier, includedModules, resourceRegistry) {
   const loaderShimSource2 = await getLoaderShim(resourceRegistry, 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(`${lwcEngineSpecifier}/v`)) {
-      return includedModule.replace(lwcEngineSpecifier, "lwc");
-    }
-    return specifier;
-  }, "");
+  const lwcSpecifier = includedModules.find((m) => m.startsWith(`${LWC_SPECIFIERS.ssr}/v`));
   return [
     GLOBALTHIS_LWR,
     `Object.assign(globalThis.LWR, ${lwrConfigString});`,
+    `Object.assign(globalThis.LWR, { onError: (err) => globalThis.resolver({ error: err.message })});`,
     loaderShimSource2 ? loaderShimSource2 : "",
-    lwcSpecifier ? lwcDefineOverride(lwcSpecifier) : ""
+    lwcSpecifier ? aliasLwcEngine(lwcSpecifier, LWC_SPECIFIERS) : ""
   ];
 }
 async function getBundle(specifier, moduleBundler, runtimeEnvironment) {
@@ -102,29 +98,48 @@ async function getBundle(specifier, moduleBundler, runtimeEnvironment) {
 async function bundle(specifier, moduleBundler, runtimeEnvironment, bundleConfigOverrides) {
   return await moduleBundler.getModuleBundle({specifier}, runtimeEnvironment, void 0, bundleConfigOverrides);
 }
+async function bundleImports(bundleCode, imports = [], visited, moduleBundler, runtimeEnvironment) {
+  for (const {specifier} of imports) {
+    if (!visited.has(specifier)) {
+      visited.add(specifier);
+      const {code, bundleRecord, version} = await bundle(specifier, moduleBundler, runtimeEnvironment);
+      let bundledCode;
+      if (runtimeEnvironment.featureFlags?.EXPERIMENTAL_UNVERSIONED_ALIASES) {
+        const versionedSpecifier = (0, import_shared_utils.getSpecifier)({specifier, version});
+        const aliasCode = (0, import_shared_utils.createAmdAlias)(versionedSpecifier, specifier);
+        bundledCode = [code, aliasCode].filter(Boolean).join("");
+      } else {
+        bundledCode = code;
+      }
+      bundleCode = await bundleImports(bundledCode, bundleRecord.imports, visited, moduleBundler, runtimeEnvironment) + bundleCode;
+    }
+  }
+  return bundleCode;
+}
 async function buildBundle(ssrSpecifier, moduleBundler, runtimeEnvironment) {
   const rootSpecifier = ssrSpecifier.replace(import_identity.LWC_SSR_PREFIX, "");
   const {code: _rootCode, bundleRecord: rootBundleRecord} = await bundle(rootSpecifier, moduleBundler, runtimeEnvironment);
-  let rootCode = _rootCode;
-  if (rootBundleRecord.imports) {
-    for (const {specifier} of rootBundleRecord.imports) {
-      if (specifier !== "lwc") {
-        const {code: code2} = await bundle(specifier, moduleBundler, runtimeEnvironment);
-        rootCode = code2 + rootCode;
-      }
-    }
+  let rootCode = await bundleImports(_rootCode, rootBundleRecord.imports, new Set(["lwc", rootSpecifier]), moduleBundler, runtimeEnvironment);
+  if (runtimeEnvironment.featureFlags?.EXPERIMENTAL_UNVERSIONED_ALIASES) {
+    const aliasSpecifier = (0, import_shared_utils.getSpecifier)({
+      specifier: rootSpecifier,
+      version: "version-not-provided"
+    });
+    const aliasCode = (0, import_shared_utils.createAmdAlias)(aliasSpecifier, rootSpecifier);
+    rootCode = [aliasCode, rootCode].join("");
   }
-  const {code: lwcEngineCode, version: lwcVersion} = await bundle(lwcEngineSpecifier, moduleBundler, runtimeEnvironment);
+  const {code: lwcEngineCode, version: lwcVersion} = await bundle(LWC_SPECIFIERS.ssr, moduleBundler, runtimeEnvironment);
   const {
     bundleRecord,
     code: ssrCode,
     version: lwrVersion
   } = await bundle(ssrSpecifier, moduleBundler, runtimeEnvironment, {
     appendExcludes: true,
-    exclude: [lwcEngineSpecifier, rootSpecifier]
+    exclude: [LWC_SPECIFIERS.ssr, rootSpecifier]
   });
   const code = rootCode + lwcEngineCode + ssrCode;
-  bundleRecord.includedModules.push(`${lwcEngineSpecifier}/v/${(0, import_shared_utils.normalizeVersionToUri)(lwcVersion)}`);
+  bundleRecord.includedModules.push(...rootBundleRecord.includedModules);
+  bundleRecord.includedModules.push(`${LWC_SPECIFIERS.ssr}/v/${(0, import_shared_utils.normalizeVersionToUri)(lwcVersion)}`);
   return {
     bundleRecord,
     code,

package/build/cjs/viewTransformer/index.cjs

@@ -24,26 +24,32 @@ var __toModule = (module2) => {
 // packages/@lwrjs/lwc-ssr/src/viewTransformer/index.ts
 __markAsModule(exports);
 __export(exports, {
-  default: () => lwcSsrViewTranformer
+  default: () => lwcSsrViewTransformer
 });
 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, {moduleBundler, resourceRegistry}) {
+function lwcSsrViewTransformer(options, {moduleBundler, resourceRegistry}) {
   return {
     name: "ssr-lwc-transformer",
     async link(stringBuilder, viewContext, {customElements}) {
       if (!viewContext.view.bootstrap?.ssr) {
         return {};
       }
-      import_shared_utils.logger.debug("[lwcSsrViewTranformer] link");
-      import_shared_utils.logger.verbose("[lwcSsrViewTranformer] link input", stringBuilder);
+      import_shared_utils.logger.debug("[lwcSsrViewTransformer] link");
+      import_shared_utils.logger.verbose("[lwcSsrViewTransformer] link input", stringBuilder);
       const ssrModules = [];
-      for (const {tagName, location, props} of customElements) {
-        if (location) {
+      for (const [index, {tagName, location, props}] of customElements.entries()) {
+        const isCsr = (0, import_shared_utils.isCsrIsland)(props);
+        if (isCsr && location) {
+          const {startOffset, endOffset} = location;
+          stringBuilder.overwrite(startOffset, endOffset, `<${tagName}></${tagName}>`);
+        }
+        if (!isCsr && location) {
           const {startOffset, endOffset} = location;
           const moduleSpecifier = (0, import_shared_utils.kebabCaseToModuleSpecifier)(tagName);
           ssrModules.push({
+            index,
             startOffset,
             endOffset,
             props,
@@ -55,18 +61,25 @@ function lwcSsrViewTranformer(options, {moduleBundler, resourceRegistry}) {
       const ssrProps = {};
       let ssrLinks = "";
       let pageTtl;
-      await Promise.all(ssrModules.map(({specifier, tagName, props, startOffset, endOffset}) => {
-        return (0, import_ssr_element.ssrElement)({specifier, props}, moduleBundler, resourceRegistry, viewContext).then(({
+      await Promise.all(ssrModules.map(({index, specifier, tagName, props: rawProps = {}, startOffset, endOffset}) => {
+        const hydrate = (0, import_shared_utils.isHydrateOnLoad)(rawProps);
+        const passProps = {...rawProps};
+        delete passProps[import_shared_utils.HYDRATE_DIRECTIVE];
+        return (0, import_ssr_element.ssrElement)({specifier, props: passProps}, moduleBundler, resourceRegistry, viewContext).then(({
           html,
-          props: props2 = {},
+          props = {},
           markup: {links = []} = {links: []},
           cache: {ttl} = {}
         }) => {
           pageTtl = (0, import_shared_utils.shortestTtl)(ttl, pageTtl);
-          const propsId = (0, import_identity.getPropsId)();
-          ssrProps[propsId] = props2;
+          let propsAttr = "";
+          if (hydrate) {
+            const propsId = (0, import_identity.getPropsId)();
+            propsAttr = ` ${import_identity.SSR_PROPS_ATTR}="${propsId}"`;
+            ssrProps[propsId] = props;
+          }
           const [, remain] = html.split(`<${tagName}`);
-          html = [`<${tagName}`, ` ${import_identity.SSR_PROPS_ATTR}="${propsId}"`, remain].join("");
+          html = [`<${tagName}`, propsAttr, remain].join("");
           links.forEach(({href, rel, as, fetchpriority}) => {
             const relStr = rel ? ` rel="${rel}"` : "", asStr = as ? ` as="${as}"` : "", fetchStr = fetchpriority ? ` fetchpriority="${fetchpriority}"` : "";
             ssrLinks += `<link href="${href}"${relStr}${asStr}${fetchStr}>
@@ -74,7 +87,10 @@ function lwcSsrViewTranformer(options, {moduleBundler, resourceRegistry}) {
           });
           stringBuilder.overwrite(startOffset, endOffset, html);
         }).catch((err) => {
-          import_shared_utils.logger.warn(`Server-side rendering for "${specifier}" failed. Reason: `, err.stack);
+          customElements[index].props === void 0 ? customElements[index].props = {
+            [import_shared_utils.HYDRATE_DIRECTIVE]: import_shared_utils.HYDRATE_CLIENT_VALUE
+          } : customElements[index].props[import_shared_utils.HYDRATE_DIRECTIVE] = import_shared_utils.HYDRATE_CLIENT_VALUE;
+          import_shared_utils.logger.warn(`Server-side rendering for "${specifier}" failed. Falling back to client-side rendering. Reason: `, err.stack);
         });
       }));
       if (Object.keys(ssrProps).length) {
@@ -88,7 +104,7 @@ function lwcSsrViewTranformer(options, {moduleBundler, resourceRegistry}) {
           import_shared_utils.logger.error("Adding links during server-side rendering failed. Could not find the </head> tag.");
         }
       }
-      import_shared_utils.logger.verbose("lwcSsrViewTranformer response", stringBuilder);
+      import_shared_utils.logger.verbose("lwcSsrViewTransformer response", stringBuilder);
       return {cache: {ttl: pageTtl}};
     }
   };

package/build/cjs/viewTransformer/sandbox-locker.cjs

@@ -26,8 +26,10 @@ __markAsModule(exports);
 __export(exports, {
   default: () => runCode
 });
+var import_instrumentation = __toModule(require("@lwrjs/instrumentation"));
 var import_near_membrane_node = __toModule(require("@locker/near-membrane-node"));
 var import_node_fetch = __toModule(require("node-fetch"));
+var import_crypto = __toModule(require("crypto"));
 function runCode(codes, context) {
   return new Promise((resolve, reject) => {
     let resolver;
@@ -35,8 +37,13 @@ function runCode(codes, context) {
     function getContext() {
       return context;
     }
+    const tracer = (0, import_instrumentation.getTracer)();
+    const trace = tracer.trace.bind(tracer);
     const endowments = Object.getOwnPropertyDescriptors({
+      AbortController,
+      crypto: import_crypto.webcrypto,
       getContext,
+      trace,
       fetch: import_node_fetch.default,
       resolver,
       process,

package/build/cjs/viewTransformer/sandbox-worker.cjs

@@ -32,7 +32,9 @@ var WORKER_CODE_SANDBOX_APIS = [
   `const { parentPort, workerData } = require('worker_threads');`,
   `globalThis.getContext = () => workerData;`,
   `globalThis.fetch = require('node-fetch');`,
-  `globalThis.resolver = (...args) => parentPort.postMessage(...args);`
+  `globalThis.crypto = require('crypto').webcrypto;`,
+  `globalThis.resolver = (...args) => parentPort.postMessage(...args);`,
+  `globalThis.trace = (id, fn) => fn()`
 ];
 function runCode(codes, workerData) {
   const workerCode = [HEADER, ...WORKER_CODE_SANDBOX_APIS, ...codes].join("\n");

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

@@ -30,6 +30,8 @@ var import_amd_utils = __toModule(require("./amd-utils.cjs"));
 var import_sandbox = __toModule(require("./sandbox.cjs"));
 var import_perf_hooks = __toModule(require("perf_hooks"));
 var import_shared_utils = __toModule(require("@lwrjs/shared-utils"));
+var import_instrumentation = __toModule(require("@lwrjs/instrumentation"));
+var SSR_FLAG = "process.env.SSR = true;";
 async function ssrElement({specifier, props: templateProps}, moduleBundler, resourceRegistry, {runtimeEnvironment, runtimeParams}) {
   const {format} = runtimeEnvironment;
   const {
@@ -50,14 +52,22 @@ async function ssrElement({specifier, props: templateProps}, moduleBundler, reso
     locale: runtimeParams.locale || runtimeEnvironment.defaultLocale
   };
   const startTime = import_perf_hooks.performance.now();
-  const {result, props, markup, cache, error} = format === "amd" ? await (0, import_sandbox.default)([
-    ...await (0, import_amd_utils.getCode)(runtimeEnvironment, version.replace(/\./g, "_"), bundleSpecifier, bundleRecord.includedModules, resourceRegistry),
-    code
-  ], context) : await (0, import_sandbox.default)([code], context);
-  const endTime = import_perf_hooks.performance.now();
-  const timeDiff = endTime - startTime;
-  import_shared_utils.logger.info(`[Server-side Rendering] ${specifier} in ${Math.round(timeDiff)} ms`);
-  if (error)
-    throw new Error(error);
-  return {html: result, props, markup, cache};
+  return (0, import_instrumentation.getTracer)().trace({
+    name: import_instrumentation.ViewSpan.ServerSideRender,
+    attributes: {
+      specifier: bundleSpecifier
+    }
+  }, async () => {
+    const {result, props, markup, cache, error} = format === "amd" ? await (0, import_sandbox.default)([
+      SSR_FLAG,
+      ...await (0, import_amd_utils.getCode)(runtimeEnvironment, version.replace(/\./g, "_"), bundleSpecifier, bundleRecord.includedModules, resourceRegistry),
+      code
+    ], context) : await (0, import_sandbox.default)([SSR_FLAG, code], context);
+    const endTime = import_perf_hooks.performance.now();
+    const timeDiff = endTime - startTime;
+    import_shared_utils.logger.info(`[Server-side Rendering] ${specifier} in ${Math.round(timeDiff)} ms`);
+    if (error)
+      throw new Error(error);
+    return {html: result, props, markup, cache};
+  });
 }

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

@@ -1,4 +1,4 @@
-import { ModuleCompiled, ModuleEntry, ModuleProvider, ProviderContext, AbstractModuleId } from '@lwrjs/types';
+import type { 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}".

package/build/es/moduleProvider/index.js

@@ -19,25 +19,48 @@ import { renderComponent } from '@lwc/engine-server';
 import Ctor, * as rootComponent from '${rootSpecifier}';
 
 (async () => {
-    let result, props, markup;
+    let result, props, markup, existingTaskCount;
     try {
         // 1. setup page data
         const context = globalThis.getContext();
         props = context.props;
         if (rootComponent.getPageData) {
-            const data = await rootComponent.getPageData(context);
+            const data = await globalThis.trace({
+                name: 'lwr.view.getPageData',
+                attributes: {
+                    specifier: '${rootSpecifier}'
+                }
+            }, () => rootComponent.getPageData(context));
+
             props = data.props; // overwrite public props
             markup = data.markup;
         }
 
+        existingTaskCount = process.getActiveResourcesInfo
+            ? process.getActiveResourcesInfo().length
+            : 0;
+
         // 2. render component
-        result = renderComponent('${moduleSpecifierToKebabCase(rootSpecifier)}', Ctor, props || {});
+        result = globalThis.trace({
+            name: 'lwr.view.renderComponent',
+            attributes: {
+                specifier: '${rootSpecifier}'
+            }
+        }, () => renderComponent('${moduleSpecifierToKebabCase(rootSpecifier)}', Ctor, props || {}));
 
     } catch(e) {
         // (3) relay error
         globalThis.resolver({ error: e.message || e });
     }
 
+    const currentTaskCount = process.getActiveResourcesInfo
+            ? process.getActiveResourcesInfo().length
+            : 0;
+
+    if (currentTaskCount - existingTaskCount > 0) {
+        console.warn('[warn] async tasks encountered while server rendering "${rootSpecifier}"');
+    }
+
     // 3. relay successful results
     globalThis.resolver({ result, props, markup });
 })()`;

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

@@ -1,6 +1,6 @@
-import { getFeatureFlags, normalizeVersionToUri } from '@lwrjs/shared-utils';
+import { createAmdAlias, getFeatureFlags, getSpecifier, normalizeVersionToUri } from '@lwrjs/shared-utils';
 import { LWC_SSR_PREFIX } from '../identity.js';
-const lwcEngineSpecifier = '@lwc/engine-server';
+const LWC_SPECIFIERS = { csr: 'lwc', ssr: '@lwc/engine-server' };
 async function readableToString(readable) {
     let result = '';
     for await (const chunk of readable) {
@@ -46,33 +46,30 @@ function getLwrConfig(bundleSpecifier, lwrVersion) {
             },
         });
 }
-// lwc/v/2_13_0 -> @lwc/engine-server/v/2_13_0
-function lwcDefineOverride(lwcSpecifier) {
-    return `LWR.define("${lwcSpecifier}", ["${lwcSpecifier.replace('lwc', lwcEngineSpecifier)}"], function(lwcEngine) { return lwcEngine; });`;
+// Alias a CSR module specifier to its SSR implementation
+// eg: lwc/v/x_y_z -> @lwc/engine-server/v/x_y_z
+function aliasLwcEngine(ssrSpecifier, aliases) {
+    const csrSpecifier = ssrSpecifier.replace(aliases.ssr, aliases.csr);
+    const ssrLwcAlias = createAmdAlias(csrSpecifier, ssrSpecifier);
+    // TODO: remove pending TD-0148452
+    const unversionedAlias = createAmdAlias(LWC_SPECIFIERS.csr, ssrSpecifier);
+    return `${ssrLwcAlias}${unversionedAlias}`;
 }
 const GLOBALTHIS_LWR = `globalThis.LWR = globalThis.LWR || {};`;
 export async function getCode(runtimeEnvironment, lwrVersion, bundleSpecifier, includedModules, resourceRegistry) {
     const loaderShimSource = await getLoaderShim(resourceRegistry, 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(`${lwcEngineSpecifier}/v`)) {
-            return includedModule.replace(lwcEngineSpecifier, 'lwc');
-        }
-        return specifier;
-    }, '');
+    const lwcSpecifier = includedModules.find((m) => m.startsWith(`${LWC_SPECIFIERS.ssr}/v`));
     // 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});`,
+        // attaching a custom error handler to catch async bootstrap errors
+        `Object.assign(globalThis.LWR, { onError: (err) => globalThis.resolver({ error: err.message })});`,
         loaderShimSource ? loaderShimSource : '',
-        lwcSpecifier ? lwcDefineOverride(lwcSpecifier) : '',
+        lwcSpecifier ? aliasLwcEngine(lwcSpecifier, LWC_SPECIFIERS) : '',
     ];
 }
 export async function getBundle(specifier, // e.g. "@lwrjs/lwc-ssr/root/component"
@@ -88,37 +85,62 @@ moduleBundler, runtimeEnvironment) {
 async function bundle(specifier, moduleBundler, runtimeEnvironment, bundleConfigOverrides) {
     return await moduleBundler.getModuleBundle({ specifier }, runtimeEnvironment, undefined, bundleConfigOverrides);
 }
+// Recursively bundle the static imports of a root bundle into a single bundle
+async function bundleImports(bundleCode, imports = [], visited, moduleBundler, runtimeEnvironment) {
+    for (const { specifier } of imports) {
+        if (!visited.has(specifier)) {
+            visited.add(specifier);
+            // eslint-disable-next-line no-await-in-loop
+            const { code, bundleRecord, version } = await bundle(specifier, moduleBundler, runtimeEnvironment);
+            let bundledCode;
+            if (runtimeEnvironment.featureFlags?.EXPERIMENTAL_UNVERSIONED_ALIASES) {
+                const versionedSpecifier = getSpecifier({ specifier, version });
+                const aliasCode = createAmdAlias(versionedSpecifier, specifier);
+                bundledCode = [code, aliasCode].filter(Boolean).join('');
+            }
+            else {
+                bundledCode = code;
+            }
+            bundleCode =
+                // eslint-disable-next-line no-await-in-loop
+                (await bundleImports(bundledCode, bundleRecord.imports, visited, moduleBundler, runtimeEnvironment)) + bundleCode;
+        }
+    }
+    return bundleCode;
+}
 // Build a SSR bundle for a root component by concatenating:
-// - the root component bundle
+// - the root component bundle and static imports
 // - @lwc/engine-server
 // - the SSR bundle for the root specifier
 async function buildBundle(ssrSpecifier, moduleBundler, runtimeEnvironment) {
-    // 1. Get the bundle for the root component
+    // 1. Get the bundle for the root component, including all static dependencies
     const rootSpecifier = ssrSpecifier.replace(LWC_SSR_PREFIX, '');
     const { code: _rootCode, bundleRecord: rootBundleRecord } = await bundle(rootSpecifier, moduleBundler, runtimeEnvironment);
-    // 1a) Add the bundles imported into the root component bundle
-    let rootCode = _rootCode;
-    if (rootBundleRecord.imports) {
-        for (const { specifier } of rootBundleRecord.imports) {
-            if (specifier !== 'lwc') {
-                // TODO: recurse the imports to support chains of excluded modules
-                // eslint-disable-next-line no-await-in-loop
-                const { code } = await bundle(specifier, moduleBundler, runtimeEnvironment);
-                rootCode = code + rootCode;
-            }
-        }
+    let rootCode = await bundleImports(_rootCode, rootBundleRecord.imports, new Set(['lwc', rootSpecifier]), // visited (lwc is excluded)
+    moduleBundler, runtimeEnvironment);
+    // TODO: remove pending TD-0148452
+    if (runtimeEnvironment.featureFlags?.EXPERIMENTAL_UNVERSIONED_ALIASES) {
+        // Create an AMD alias to the unversioned root module
+        // if the bundle-metadata for the module doesn't have a version, it will have /v/version-not-provided`
+        const aliasSpecifier = getSpecifier({
+            specifier: rootSpecifier,
+            version: 'version-not-provided',
+        });
+        const aliasCode = createAmdAlias(aliasSpecifier, rootSpecifier);
+        rootCode = [aliasCode, rootCode].join('');
     }
     // 2. Get the bundle for the LWC engine
-    const { code: lwcEngineCode, version: lwcVersion } = await bundle(lwcEngineSpecifier, moduleBundler, runtimeEnvironment);
-    // 3. Get the SSR bundle for the root component
+    const { code: lwcEngineCode, version: lwcVersion } = await bundle(LWC_SPECIFIERS.ssr, moduleBundler, runtimeEnvironment);
+    // 3. Get the bundle for the SSR root component
     // Exclude the LWC engine and root component from this bundle. Use the pre-built bundles fetched above instead.
     const { bundleRecord, code: ssrCode, version: lwrVersion, } = await bundle(ssrSpecifier, moduleBundler, runtimeEnvironment, {
         appendExcludes: true,
-        exclude: [lwcEngineSpecifier, rootSpecifier],
+        exclude: [LWC_SPECIFIERS.ssr, rootSpecifier],
     });
     // Now concatenate the code gathered above to create the SSR bundle for the root component
     const code = rootCode + lwcEngineCode + ssrCode;
-    bundleRecord.includedModules.push(`${lwcEngineSpecifier}/v/${normalizeVersionToUri(lwcVersion)}`); // for LWC aliasing
+    bundleRecord.includedModules.push(...rootBundleRecord.includedModules); // add the root component's inclusions
+    bundleRecord.includedModules.push(`${LWC_SPECIFIERS.ssr}/v/${normalizeVersionToUri(lwcVersion)}`); // for LWC aliasing
     return {
         bundleRecord,
         code,

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

@@ -20,6 +20,6 @@ interface SsrPluginOptions {
  * 4. The view/page document now contains SSRed components, which will be sent to the client
  * 5. During bootstrap on the client, the "lwr/init" module will hydrate ALL the custom elements on the page
  */
-export default function lwcSsrViewTranformer(options: SsrPluginOptions, { moduleBundler, resourceRegistry }: ProviderContext): ViewTransformPlugin;
+export default function lwcSsrViewTransformer(options: SsrPluginOptions, { moduleBundler, resourceRegistry }: ProviderContext): ViewTransformPlugin;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/build/es/viewTransformer/index.js

@@ -1,4 +1,4 @@
-import { kebabCaseToModuleSpecifier, logger, shortestTtl } from '@lwrjs/shared-utils';
+import { HYDRATE_CLIENT_VALUE, HYDRATE_DIRECTIVE, isCsrIsland, isHydrateOnLoad, kebabCaseToModuleSpecifier, logger, shortestTtl, } from '@lwrjs/shared-utils';
 import { LWC_SSR_PREFIX, SSR_PROPS_ATTR, SSR_PROPS_KEY, getPropsId } from '../identity.js';
 import { ssrElement } from './ssr-element.js';
 /**
@@ -19,22 +19,29 @@ import { ssrElement } from './ssr-element.js';
  * 4. The view/page document now contains SSRed components, which will be sent to the client
  * 5. During bootstrap on the client, the "lwr/init" module will hydrate ALL the custom elements on the page
  */
-export default function lwcSsrViewTranformer(options, { moduleBundler, resourceRegistry }) {
+export default function lwcSsrViewTransformer(options, { moduleBundler, resourceRegistry }) {
     return {
         name: 'ssr-lwc-transformer',
         async link(stringBuilder, viewContext, { customElements }) {
             if (!viewContext.view.bootstrap?.ssr) {
                 return {}; // no SSR
             }
-            logger.debug('[lwcSsrViewTranformer] link');
-            logger.verbose('[lwcSsrViewTranformer] link input', stringBuilder);
+            logger.debug('[lwcSsrViewTransformer] link');
+            logger.verbose('[lwcSsrViewTransformer] link input', stringBuilder);
             // Gather all the SSRable custom elements (ie: root components) into 1 list
             const ssrModules = [];
-            for (const { tagName, location, props } of customElements) {
-                if (location) {
+            for (const [index, { tagName, location, props }] of customElements.entries()) {
+                const isCsr = isCsrIsland(props);
+                if (isCsr && location) {
+                    // Strip the CSR-only island directive from the HTML
+                    const { startOffset, endOffset } = location;
+                    stringBuilder.overwrite(startOffset, endOffset, `<${tagName}></${tagName}>`);
+                }
+                if (!isCsr && location) {
                     const { startOffset, endOffset } = location;
                     const moduleSpecifier = kebabCaseToModuleSpecifier(tagName);
                     ssrModules.push({
+                        index,
                         startOffset,
                         endOffset,
                         props,
@@ -47,27 +54,46 @@ export default function lwcSsrViewTranformer(options, { moduleBundler, resourceR
             const ssrProps = {};
             let ssrLinks = '';
             let pageTtl;
-            await Promise.all(ssrModules.map(({ specifier, tagName, props, startOffset, endOffset }) => {
-                return ssrElement({ specifier, props }, moduleBundler, resourceRegistry, viewContext)
+            await Promise.all(ssrModules.map(({ index, specifier, tagName, props: rawProps = {}, startOffset, endOffset }) => {
+                const hydrate = isHydrateOnLoad(rawProps);
+                const passProps = { ...rawProps };
+                delete passProps[HYDRATE_DIRECTIVE];
+                return ssrElement({ specifier, props: passProps }, moduleBundler, resourceRegistry, viewContext)
                     .then(({ html, props = {}, markup: { links = [] } = { links: [] }, cache: { ttl } = {}, }) => {
                     // Keep track of the shortest TTL from all getPageData hooks
                     pageTtl = shortestTtl(ttl, pageTtl);
                     // Add the props id to the HTML for the custom element
                     // eg: <some-cmp> -> <some-cmp data-lwr-props-id="1234">
-                    const propsId = getPropsId();
-                    ssrProps[propsId] = props;
+                    let propsAttr = '';
+                    if (hydrate) {
+                        // Only serialize props for custom elements that are to be hydrated
+                        const propsId = getPropsId();
+                        propsAttr = ` ${SSR_PROPS_ATTR}="${propsId}"`;
+                        ssrProps[propsId] = props;
+                    }
                     const [, remain] = html.split(`<${tagName}`);
-                    html = [`<${tagName}`, ` ${SSR_PROPS_ATTR}="${propsId}"`, remain].join('');
+                    html = [`<${tagName}`, propsAttr, remain].join('');
+                    // Create HTML <link> strings for each item in the links array
                     links.forEach(({ href, rel, as, fetchpriority }) => {
-                        // Create HTML <link> strings for each item in the links array
-                        const relStr = rel ? ` rel="${rel}"` : '', asStr = as ? ` as="${as}"` : '', fetchStr = fetchpriority ? ` fetchpriority="${fetchpriority}"` : '';
+                        const relStr = rel ? ` rel="${rel}"` : '', asStr = as ? ` as="${as}"` : '', fetchStr = fetchpriority
+                            ? ` fetchpriority="${fetchpriority}"`
+                            : '';
                         ssrLinks += `<link href="${href}"${relStr}${asStr}${fetchStr}>\n`;
                     });
                     // Overwrite the custom element with the SSRed component string
                     stringBuilder.overwrite(startOffset, endOffset, html);
                 })
                     .catch((err) => {
-                    logger.warn(`Server-side rendering for "${specifier}" failed. Reason: `, err.stack);
+                    // Fallback to CSR by adding lwr:hydrate="client-only" to the custom element
+                    // This ENSURES the component's JavaScript gets sent to the client for CSRing
+                    customElements[index].props === undefined
+                        ? (customElements[index].props = {
+                            [HYDRATE_DIRECTIVE]: HYDRATE_CLIENT_VALUE,
+                        })
+                        : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore - TS thinks that props may still be undefined
+                            (customElements[index].props[HYDRATE_DIRECTIVE] = HYDRATE_CLIENT_VALUE);
+                    logger.warn(`Server-side rendering for "${specifier}" failed. Falling back to client-side rendering. Reason: `, err.stack);
                 });
             }));
             if (Object.keys(ssrProps).length) {
@@ -85,7 +111,7 @@ export default function lwcSsrViewTranformer(options, { moduleBundler, resourceR
                     logger.error('Adding links during server-side rendering failed. Could not find the </head> tag.');
                 }
             }
-            logger.verbose('lwcSsrViewTranformer response', stringBuilder);
+            logger.verbose('lwcSsrViewTransformer response', stringBuilder);
             return { cache: { ttl: pageTtl } };
         },
     };

package/build/es/viewTransformer/sandbox-locker.js

@@ -1,5 +1,7 @@
+import { getTracer } from '@lwrjs/instrumentation';
 import createVirtualEnvironment from '@locker/near-membrane-node';
 import fetch from 'node-fetch';
+import { webcrypto as crypto } from 'crypto';
 export default function runCode(codes, context) {
     return new Promise((resolve, reject) => {
         let resolver;
@@ -7,8 +9,13 @@ export default function runCode(codes, context) {
         function getContext() {
             return context;
         }
+        const tracer = getTracer();
+        const trace = tracer.trace.bind(tracer);
         const endowments = Object.getOwnPropertyDescriptors({
+            AbortController,
+            crypto,
             getContext,
+            trace,
             fetch,
             resolver,
             // for AMD loader ModuleRegistry

package/build/es/viewTransformer/sandbox-worker.js

@@ -15,7 +15,10 @@ const WORKER_CODE_SANDBOX_APIS = [
     `const { parentPort, workerData } = require('worker_threads');`,
     `globalThis.getContext = () => workerData;`,
     `globalThis.fetch = require('node-fetch');`,
+    `globalThis.crypto = require('crypto').webcrypto;`,
     `globalThis.resolver = (...args) => parentPort.postMessage(...args);`,
+    // TODO: implement tracing with worker thread
+    `globalThis.trace = (id, fn) => fn()`,
 ];
 /**
  * Run the SSR module code in a worker, and return the results to the main thread.

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

@@ -1,4 +1,4 @@
-import { PageDataResponse, SsrRequestContext } from '@lwrjs/types';
+import type { PageDataResponse, SsrRequestContext } from '@lwrjs/types';
 export interface SandboxResults extends PageDataResponse {
     result?: string;
     error?: string;

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

@@ -1,4 +1,4 @@
-import type { Json, PageDataResponse, PublicModuleBundler, PublicResourceRegistry, ViewTranformPluginContext } from '@lwrjs/types';
+import type { Json, PageDataResponse, PublicModuleBundler, PublicResourceRegistry, ViewTransformPluginContext } from '@lwrjs/types';
 interface SsrResults extends PageDataResponse {
     html: string;
 }
@@ -13,6 +13,6 @@ interface SsrResults extends PageDataResponse {
 export declare function ssrElement({ specifier, props: templateProps }: {
     specifier: string;
     props: Json;
-}, moduleBundler: PublicModuleBundler, resourceRegistry: PublicResourceRegistry, { runtimeEnvironment, runtimeParams }: ViewTranformPluginContext): Promise<SsrResults>;
+}, moduleBundler: PublicModuleBundler, resourceRegistry: PublicResourceRegistry, { runtimeEnvironment, runtimeParams }: ViewTransformPluginContext): Promise<SsrResults>;
 export {};
 //# sourceMappingURL=ssr-element.d.ts.map

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

@@ -2,6 +2,8 @@ import { getBundle, getCode } from './amd-utils.js';
 import runCode from './sandbox.js';
 import { performance } from 'perf_hooks';
 import { logger } from '@lwrjs/shared-utils';
+import { getTracer, ViewSpan } from '@lwrjs/instrumentation';
+const SSR_FLAG = 'process.env.SSR = true;';
 /**
  * Create a bundle for the given SSR module and run the code in a sandbox.
  * @param moduleInfo - specifier: The ID of the module, generated by "lwc-ssr/moduleProvider", which SSRs a component
@@ -34,17 +36,25 @@ export async function ssrElement({ specifier, props: templateProps }, moduleBund
     };
     // Get the SSR string and properties bag
     const startTime = performance.now();
-    const { result, props, markup, cache, error } = format === 'amd'
-        ? await runCode([
-            ...(await getCode(runtimeEnvironment, version.replace(/\./g, '_'), bundleSpecifier, bundleRecord.includedModules, resourceRegistry)),
-            code,
-        ], context)
-        : await runCode([code], context);
-    const endTime = performance.now();
-    const timeDiff = endTime - startTime;
-    logger.info(`[Server-side Rendering] ${specifier} in ${Math.round(timeDiff)} ms`);
-    if (error)
-        throw new Error(error);
-    return { html: result, props, markup, cache };
+    return getTracer().trace({
+        name: ViewSpan.ServerSideRender,
+        attributes: {
+            specifier: bundleSpecifier,
+        },
+    }, async () => {
+        const { result, props, markup, cache, error } = format === 'amd'
+            ? await runCode([
+                SSR_FLAG,
+                ...(await getCode(runtimeEnvironment, version.replace(/\./g, '_'), bundleSpecifier, bundleRecord.includedModules, resourceRegistry)),
+                code,
+            ], context)
+            : await runCode([SSR_FLAG, code], context);
+        const endTime = performance.now();
+        const timeDiff = endTime - startTime;
+        logger.info(`[Server-side Rendering] ${specifier} in ${Math.round(timeDiff)} ms`);
+        if (error)
+            throw new Error(error);
+        return { html: result, props, markup, cache };
+    });
 }
 //# sourceMappingURL=ssr-element.js.map

package/package.json

@@ -4,7 +4,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.10.0-alpha.8",
+    "version": "0.10.0",
     "homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
     "repository": {
         "type": "git",
@@ -33,16 +33,17 @@
         "build/**/*.d.ts"
     ],
     "dependencies": {
-        "@locker/near-membrane-node": "^0.12.0",
-        "@lwrjs/diagnostics": "0.10.0-alpha.8",
-        "@lwrjs/shared-utils": "0.10.0-alpha.8",
+        "@locker/near-membrane-node": "^0.12.15",
+        "@lwrjs/diagnostics": "0.10.0",
+        "@lwrjs/instrumentation": "0.10.0",
+        "@lwrjs/shared-utils": "0.10.0",
         "node-fetch": "^2.6.8"
     },
     "devDependencies": {
-        "@lwrjs/types": "0.10.0-alpha.8"
+        "@lwrjs/types": "0.10.0"
     },
     "engines": {
-        "node": ">=16.0.0 <20"
+        "node": ">=16.0.0"
     },
-    "gitHead": "46bd72343e1db7c72470033320921df3a7eff18a"
+    "gitHead": "e6deaeef3db8aa079acefed508897eca19b3218a"
 }