@lwrjs/shared-utils 0.11.0-alpha.1 → 0.11.0-alpha.10

package/build/cjs/env.cjs

@@ -8,6 +8,7 @@ var __export = (target, all) => {
 // packages/@lwrjs/shared-utils/src/env.ts
 __markAsModule(exports);
 __export(exports, {
+  buildEnvironmentContext: () => buildEnvironmentContext,
   getFeatureFlags: () => getFeatureFlags
 });
 function getFeatureFlags() {
@@ -16,7 +17,20 @@ function getFeatureFlags() {
     LEGACY_LOADER: process.env.LEGACY_LOADER !== void 0 && process.env.LEGACY_LOADER.toLowerCase() === "true" ? true : false,
     SSR_SANDBOX_WORKER: process.env.SSR_SANDBOX_WORKER !== void 0 && process.env.SSR_SANDBOX_WORKER.toLowerCase() === "true" ? true : false,
     SSR_STATIC_BUNDLES: process.env.SSR_STATIC_BUNDLES !== void 0 && process.env.SSR_STATIC_BUNDLES.toLowerCase() === "true" ? true : false,
+    SSR_WITH_CSR_FALLBACK: process.env.SSR_WITH_CSR_FALLBACK !== void 0 && process.env.SSR_WITH_CSR_FALLBACK.toLowerCase() === "true" ? true : false,
     EXPERIMENTAL_UNVERSIONED_ALIASES: process.env.EXPERIMENTAL_UNVERSIONED_ALIASES !== void 0 && process.env.EXPERIMENTAL_UNVERSIONED_ALIASES.toLowerCase() === "true" ? true : false,
     LWR_TRACING: process.env.LWR_TRACING !== void 0 && process.env.LWR_TRACING.toLowerCase() !== "off" ? true : false
   };
 }
+function buildEnvironmentContext(runtimeParams) {
+  const basePath = runtimeParams.basePath;
+  const locale = runtimeParams.locale;
+  const assetBasePath = runtimeParams.assetBasePath;
+  const uiBasePath = runtimeParams.uiBasePath;
+  return {
+    basePath,
+    locale,
+    assetBasePath,
+    uiBasePath
+  };
+}

package/build/cjs/fs-watch.cjs

@@ -28,7 +28,7 @@ __export(exports, {
 });
 var import_chokidar = __toModule(require("chokidar"));
 var import_object = __toModule(require("./object.cjs"));
-var import_logger = __toModule(require("./logger.cjs"));
+var import_diagnostics = __toModule(require("@lwrjs/diagnostics"));
 var WatcherFactoryImpl = class {
   createFileWatcher(options = {persistent: true, ignored: "**/node_modules/**"}) {
     return import_chokidar.default.watch([], options);
@@ -37,7 +37,7 @@ var WatcherFactoryImpl = class {
     const fileWatcher = this.createFileWatcher();
     fileWatcher.on("change", (0, import_object.debounce)((file) => onModuleChange(file), 500));
     fileWatcher.on("unlink", (0, import_object.debounce)((file) => onModuleChange(file), 500));
-    fileWatcher.on("add", (file) => import_logger.logger.info(`Watching: ${file}`));
+    fileWatcher.on("add", (file) => import_diagnostics.logger.info(`Watching: ${file}`));
     return fileWatcher;
   }
 };

package/build/cjs/fs.cjs

@@ -43,7 +43,7 @@ var import_identity = __toModule(require("./identity.cjs"));
 var import_diagnostics = __toModule(require("@lwrjs/diagnostics"));
 var import_mime_types = __toModule(require("mime-types"));
 var import_stream = __toModule(require("stream"));
-var import_logger = __toModule(require("./logger.cjs"));
+var import_diagnostics2 = __toModule(require("@lwrjs/diagnostics"));
 var fileCount = 0;
 var files = new Map();
 function hashContent(source) {
@@ -75,6 +75,9 @@ function resolveFileExtension(filePath) {
   }
 }
 function canResolveView(source, type) {
+  if (typeof source !== "string") {
+    return false;
+  }
   if (!source.endsWith(`.${type}`)) {
     return false;
   }
@@ -119,14 +122,14 @@ function normalizeResourcePath(rawPath, {rootDir, assets, contentDir, layoutsDir
   });
 }
 function logMetrics(filePath) {
-  if (import_logger.logger.currentLevel == import_logger.DEBUG || import_logger.logger.currentLevel == import_logger.VERBOSE) {
+  if (import_diagnostics2.logger.currentLevel == import_diagnostics2.DEBUG || import_diagnostics2.logger.currentLevel == import_diagnostics2.VERBOSE) {
     let count = files.get(filePath) || 0;
     if (++count % 100 === 0) {
-      import_logger.logger.debug(`[${count}] Repeat Read ${filePath}`);
+      import_diagnostics2.logger.debug(`[${count}] Repeat Read ${filePath}`);
     }
     files.set(filePath, count);
     if (++fileCount % 1e3 === 0) {
-      import_logger.logger.debug(`Open file count [${fileCount}]`);
+      import_diagnostics2.logger.debug(`Open file count [${fileCount}]`);
     }
   }
 }

package/build/cjs/html-meta.cjs

@@ -61,13 +61,16 @@ function isSelfUrl(url) {
   return !url || !!url.match(isSelfUrlRegex);
 }
 var isSelfUrlRegex = /^\s*(data:|#)/i;
-async function extractMetadataFromHtml(htmlSource) {
+function hasHydrationDirective(attrs = {}) {
+  return Object.keys(attrs).some((attr) => attr === HYDRATE_DIRECTIVE);
+}
+async function extractMetadataFromHtml(htmlSource, viewMetadata) {
+  const {customElements, assetReferences, serverData} = viewMetadata;
   return new Promise((resolve, reject) => {
-    const customElements = [];
     const openElements = new Set();
-    const assetReferences = [];
     const parser = new import_parse5_sax_parser.default({sourceCodeLocationInfo: true});
     const ceRefStack = [];
+    let nestedIslands = false;
     parser.on("startTag", ({
       tagName,
       attrs,
@@ -75,23 +78,23 @@ async function extractMetadataFromHtml(htmlSource) {
     }) => {
       if (tagName.includes("-") && !openElements.has(tagName)) {
         const {startOffset, endOffset} = sourceCodeLocation;
-        const ceRef = {
-          tagName,
-          location: {startOffset, endOffset},
-          props: attrs.length ? attrs.reduce((obj, {name, value}) => {
-            obj[(0, import_identity.getPropFromAttrName)(name)] = value === "" ? "true" : value;
-            return obj;
-          }, {}) : void 0
-        };
+        const props = attrs.length ? attrs.reduce((obj, {name, value}) => {
+          obj[(0, import_identity.getPropFromAttrName)(name)] = value === "" ? "true" : value;
+          return obj;
+        }, {}) : void 0;
+        const ceRef = {tagName, location: {startOffset, endOffset}, props};
         openElements.add(tagName);
         if (ceRefStack.length) {
           const last = ceRefStack[ceRefStack.length - 1];
           last.children = last.children ? [...last.children, ceRef] : [ceRef];
-          ceRefStack.push(ceRef);
+          if (hasHydrationDirective(props)) {
+            customElements.push(ceRef);
+            nestedIslands = true;
+          }
         } else {
           customElements.push(ceRef);
-          ceRefStack.push(ceRef);
         }
+        ceRefStack.push(ceRef);
       }
       if ((tagName === "img" || tagName === "script") && sourceCodeLocation.attrs) {
         if (sourceCodeLocation.attrs.src) {
@@ -118,7 +121,11 @@ async function extractMetadataFromHtml(htmlSource) {
       }
     });
     const inputStream = import_stream.Readable.from(htmlSource);
-    inputStream.on("end", () => resolve({customElements, assetReferences}));
+    inputStream.on("end", () => resolve({
+      customElements: customElements.filter((ce) => !nestedIslands || hasHydrationDirective(ce.props)),
+      assetReferences,
+      serverData
+    }));
     inputStream.on("error", (error) => reject(error));
     inputStream.pipe(parser);
   });

package/build/cjs/identity.cjs

@@ -47,13 +47,15 @@ __export(exports, {
   isAssetSourceExternal: () => isAssetSourceExternal,
   isBundleDefinition: () => isBundleDefinition,
   isExternalUrl: () => isExternalUrl,
+  isSpecifier: () => isSpecifier,
   kebabCaseToModuleSpecifier: () => kebabCaseToModuleSpecifier,
   moduleSpecifierToKebabCase: () => moduleSpecifierToKebabCase,
   normalizeVersionFromUri: () => normalizeVersionFromUri,
   normalizeVersionToUri: () => normalizeVersionToUri,
   parsePackageSpecifier: () => parsePackageSpecifier,
   prettyModuleUriSuffix: () => prettyModuleUriSuffix,
-  slugify: () => slugify
+  slugify: () => slugify,
+  stringToVariableName: () => stringToVariableName
 });
 var import_slugify = __toModule(require("slugify"));
 var import_fast_json_stable_stringify = __toModule(require("fast-json-stable-stringify"));
@@ -132,6 +134,9 @@ async function getVersionedModuleId(rawSpecifier, moduleRegistry, runtimeParams)
   const moduleEntry = await moduleRegistry.getModuleEntry(moduleId, runtimeParams);
   return {...moduleId, version: moduleEntry.version};
 }
+function isSpecifier(specifier) {
+  return !!specifier && /^@?[\w-]+(\/[\w-]+)*$/.test(specifier);
+}
 var RE_SCOPED = /^(@[^/]+\/[^/@]+)(?:\/([^@]+))?(?:@([\s\S]+))?/;
 var RE_NORMAL = /^([^/@]+)(?:\/([^@]+))?(?:@([\s\S]+))?/;
 function parsePackageSpecifier(specifier) {
@@ -208,3 +213,10 @@ function isAssetSourceExternal(assetSource) {
 function isBundleDefinition(definition) {
   return definition.bundleRecord !== void 0;
 }
+function stringToVariableName(inputString) {
+  const cleanedString = inputString.replace(/@/g, "").replace(/[^a-zA-Z0-9_$]/g, "_");
+  if (!cleanedString || /^[0-9$]+/.test(cleanedString)) {
+    return `_${cleanedString}`;
+  }
+  return cleanedString;
+}

package/build/cjs/import-metadata.cjs

@@ -28,7 +28,7 @@ __export(exports, {
   getImportMetadata: () => getImportMetadata
 });
 var import_es_module_lexer = __toModule(require("es-module-lexer"));
-var import_logger = __toModule(require("./logger.cjs"));
+var import_diagnostics = __toModule(require("@lwrjs/diagnostics"));
 var IMPORT_META_REGEX = /^import\.meta(\.\w+)+/;
 var ModuleNameType;
 (function(ModuleNameType2) {
@@ -53,8 +53,8 @@ async function getImportMetadata(compiledSource) {
       const isStringLiteral = moduleSpecifier.startsWith("'") || moduleSpecifier.startsWith('"');
       const moduleNameType = isStringLiteral ? ModuleNameType.string : ModuleNameType.unresolved;
       moduleSpecifier = isStringLiteral ? moduleSpecifier.slice(1, -1) : moduleSpecifier;
-      if (import_logger.logger.currentLevel === import_logger.DEBUG || import_logger.logger.currentLevel === import_logger.VERBOSE) {
-        import_logger.logger.debug(`[import-metadata] Import from dynamic import ${compiledSource.slice(moduleImportLocation.ss, moduleImportLocation.se)} -> ${compiledSource.slice(moduleImportLocation.ss, moduleImportLocation.s)}`);
+      if (import_diagnostics.logger.currentLevel === import_diagnostics.DEBUG || import_diagnostics.logger.currentLevel === import_diagnostics.VERBOSE) {
+        import_diagnostics.logger.debug(`[import-metadata] Import from dynamic import ${compiledSource.slice(moduleImportLocation.ss, moduleImportLocation.se)} -> ${compiledSource.slice(moduleImportLocation.ss, moduleImportLocation.s)}`);
       }
       dynamicImports.push({
         moduleSpecifier,

package/build/cjs/index.cjs

@@ -32,7 +32,6 @@ __exportStar(exports, __toModule(require("./graph.cjs")));
 __exportStar(exports, __toModule(require("./mappings.cjs")));
 __exportStar(exports, __toModule(require("./urls.cjs")));
 __exportStar(exports, __toModule(require("./env.cjs")));
-__exportStar(exports, __toModule(require("./logger.cjs")));
 __exportStar(exports, __toModule(require("./lwr-app-observer.cjs")));
 __exportStar(exports, __toModule(require("./bundle.cjs")));
 __exportStar(exports, __toModule(require("./localization.cjs")));

package/build/cjs/localization.cjs

@@ -1,54 +1,34 @@
-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/shared-utils/src/localization.ts
 __markAsModule(exports);
 __export(exports, {
-  hasCountryCode: () => hasCountryCode,
-  stripCountryCode: () => stripCountryCode
+  getFallbackLocale: () => getFallbackLocale,
+  walkLocaleFallbacks: () => walkLocaleFallbacks
 });
-var import_logger = __toModule(require("./logger.cjs"));
-function hasCountryCode(locale) {
-  try {
-    const parsedLocale = new Intl.Locale(resolveLocaleId(locale));
-    return typeof parsedLocale.region === "string";
-  } catch (error) {
-    import_logger.logger.debug(`[static-util] Failed to parse country code from locale: ${locale}`, error);
-    return false;
-  }
+function getFallbackLocale(localeId, i18n) {
+  const locale = i18n.locales.find((l) => l.id === localeId);
+  return locale?.fallback;
 }
-function stripCountryCode(locale) {
-  try {
-    const parsedLocale = new Intl.Locale(resolveLocaleId(locale));
-    return parsedLocale.language;
-  } catch (error) {
-    import_logger.logger.debug(`[static-util] Failed to strip country code from locale: ${locale}`, error);
+async function walkLocaleFallbacks(initialLocale, i18n, test) {
+  const visited = new Set();
+  let localeId = initialLocale;
+  while (localeId && !visited.has(localeId)) {
+    const result = await test(localeId);
+    if (result) {
+      return result;
+    }
+    visited.add(localeId);
+    const config = i18n.locales.find((l) => l.id === localeId);
+    localeId = config && config.fallback;
   }
-}
-function resolveLocaleId(locale) {
-  const asLocalObj = locale;
-  if (asLocalObj.id !== void 0) {
-    return asLocalObj.id;
+  if (!visited.has(i18n.defaultLocale)) {
+    return test(i18n.defaultLocale);
   }
-  return locale;
+  return void 0;
 }

package/build/cjs/object.cjs

@@ -23,7 +23,10 @@ function _deepFreeze(obj, maxDepth, depth) {
   }
 }
 function deepFreeze(obj, maxDepth = 5) {
-  const objClone = JSON.parse(JSON.stringify(obj));
+  let objClone = obj;
+  if (process.env.UNSAFE_IGNORE_CONFIG_VALIDATION !== "true") {
+    objClone = JSON.parse(JSON.stringify(obj));
+  }
   return _deepFreeze(objClone, maxDepth, 0);
 }
 var debounce = (func, waitFor) => {

package/build/cjs/urls.cjs

@@ -29,10 +29,13 @@ __export(exports, {
   getClientBootstrapConfigurationRoutes: () => getClientBootstrapConfigurationRoutes,
   getClientBootstrapConfigurationUri: () => getClientBootstrapConfigurationUri,
   getClientBootstrapConfigurationUriPrefix: () => getClientBootstrapConfigurationUriPrefix,
+  getViewUri: () => getViewUri,
   isModuleOrBundleUrl: () => isModuleOrBundleUrl,
+  isURL: () => isURL,
   removeClientBootstrapConfigurationSuffix: () => removeClientBootstrapConfigurationSuffix
 });
 var import_path_to_regexp = __toModule(require("path-to-regexp"));
+var import_path = __toModule(require("path"));
 var CONFIG_SUFFIX = "/config.js";
 var SIGNATURE_SIGIL = "s";
 function getClientBootstrapConfigurationUri(routeInfo, runtimeEnvironment, runtimeParams, signature) {
@@ -100,3 +103,25 @@ var isModuleOrBundleRegEx = /^\/.*\/(module|bundle)\//i;
 function isModuleOrBundleUrl(url) {
   return isModuleOrBundleRegEx.test(url);
 }
+function getViewUri(routePath, basePath, locale, i18n) {
+  if (isURL(routePath)) {
+    return routePath;
+  }
+  let url = basePath;
+  if (i18n.uriPattern === "path-prefix" && locale !== i18n.defaultLocale) {
+    url = import_path.default.join(url, `/${locale}`);
+  }
+  url = import_path.default.join(url, routePath);
+  if (i18n.uriPattern === "query-param" && locale !== i18n.defaultLocale) {
+    url = addQueryParamToAbsoluteURI(url, "locale", locale);
+  }
+  return url;
+}
+function isURL(uri) {
+  return /^https?:\/\//i.test(uri);
+}
+function addQueryParamToAbsoluteURI(absoluteURI, paramName, paramValue) {
+  const url = new URL(absoluteURI, "http://example.com");
+  url.searchParams.set(paramName, paramValue);
+  return url.pathname + url.search;
+}

package/build/es/env.d.ts

@@ -1,3 +1,7 @@
-import type { FeatureFlags } from '@lwrjs/types';
+import type { EnvironmentContext, FeatureFlags, RuntimeParams } from '@lwrjs/types';
 export declare function getFeatureFlags(): FeatureFlags;
+/**
+ * Create a serializable context for the lwr/environment variable
+ */
+export declare function buildEnvironmentContext(runtimeParams: RuntimeParams): EnvironmentContext;
 //# sourceMappingURL=env.d.ts.map

package/build/es/env.js

@@ -20,6 +20,11 @@ export function getFeatureFlags() {
             process.env.SSR_STATIC_BUNDLES.toLowerCase() === 'true'
             ? true
             : false,
+        // Islands fallback to CSR if SSR fails
+        SSR_WITH_CSR_FALLBACK: process.env.SSR_WITH_CSR_FALLBACK !== undefined &&
+            process.env.SSR_WITH_CSR_FALLBACK.toLowerCase() === 'true'
+            ? true
+            : false,
         // AMD Module Bundles include un-versioned aliases
         EXPERIMENTAL_UNVERSIONED_ALIASES: process.env.EXPERIMENTAL_UNVERSIONED_ALIASES !== undefined &&
             process.env.EXPERIMENTAL_UNVERSIONED_ALIASES.toLowerCase() === 'true'
@@ -30,4 +35,23 @@ export function getFeatureFlags() {
             : false,
     };
 }
+/**
+ * Create a serializable context for the lwr/environment variable
+ */
+export function buildEnvironmentContext(runtimeParams) {
+    // The baseBath form the config or set from the request (e.g. /shop)
+    const basePath = runtimeParams.basePath;
+    // The locale set from the request or the defaultLocale from the config (e.g. en-US)
+    const locale = runtimeParams.locale;
+    // Root base path for static assets (e.g. /shop/mobify/bundle/1234/site)
+    const assetBasePath = runtimeParams.assetBasePath;
+    // Base path for UI routing (e.g. /shop/en-US)
+    const uiBasePath = runtimeParams.uiBasePath;
+    return {
+        basePath,
+        locale,
+        assetBasePath,
+        uiBasePath,
+    };
+}
 //# sourceMappingURL=env.js.map

package/build/es/fs-watch.js

@@ -1,6 +1,6 @@
 import chokidar from 'chokidar';
 import { debounce } from './object.js';
-import { logger } from './logger.js';
+import { logger } from '@lwrjs/diagnostics';
 /**
  * Factory comptable with the LWR Runtime to create a file watch library for LWR dev server.
  * When importing this module make sure the optional library 'chokidar' is installed.

package/build/es/fs.d.ts

@@ -21,10 +21,10 @@ export declare function resolveFileExtension(filePath: string): string;
 /**
  * Returns if view of specific type can be resolved
  *
- * @param source - path to view
+ * @param source - possible path to view
  * @param type - extension of file that should be expected, i.e. 'html'
  */
-export declare function canResolveView(source: string, type: string): boolean;
+export declare function canResolveView(source: unknown, type: string): boolean;
 /**
  * Construct a ViewSource from the associated file on the fs
  * @param source - Filepath with the source (source can be an absolute or relative path)

package/build/es/fs.js

@@ -5,7 +5,7 @@ import { slugify } from './identity.js';
 import { LwrUnresolvableError, createSingleDiagnosticError, descriptions } from '@lwrjs/diagnostics';
 import { lookup } from 'mime-types';
 import { Readable } from 'stream';
-import { DEBUG, logger, VERBOSE } from './logger.js';
+import { DEBUG, logger, VERBOSE } from '@lwrjs/diagnostics';
 let fileCount = 0;
 const files = new Map();
 /**
@@ -57,10 +57,13 @@ export function resolveFileExtension(filePath) {
 /**
  * Returns if view of specific type can be resolved
  *
- * @param source - path to view
+ * @param source - possible path to view
  * @param type - extension of file that should be expected, i.e. 'html'
  */
 export function canResolveView(source, type) {
+    if (typeof source !== 'string') {
+        return false;
+    }
     if (!source.endsWith(`.${type}`)) {
         return false;
     }

package/build/es/html-meta.d.ts

@@ -5,7 +5,7 @@ export declare function isSelfUrl(url: string): boolean;
  * Pull the custom elements and img tags out of an HTML string, to use as metadata
  * @param htmlSource - An HTML string to parse
  */
-export declare function extractMetadataFromHtml(htmlSource: string): Promise<RenderedViewMetadata>;
+export declare function extractMetadataFromHtml(htmlSource: string, viewMetadata: RenderedViewMetadata): Promise<RenderedViewMetadata>;
 export declare const HYDRATE_DIRECTIVE = "lwr:hydrate";
 export declare const HYDRATE_LOAD_VALUE = "load";
 export declare const HYDRATE_CLIENT_VALUE = "client-only";

package/build/es/html-meta.js

@@ -29,46 +29,51 @@ export function isSelfUrl(url) {
     return !url || !!url.match(isSelfUrlRegex);
 }
 const isSelfUrlRegex = /^\s*(data:|#)/i;
+function hasHydrationDirective(attrs = {}) {
+    return Object.keys(attrs).some((attr) => attr === HYDRATE_DIRECTIVE);
+}
 /**
  * Pull the custom elements and img tags out of an HTML string, to use as metadata
  * @param htmlSource - An HTML string to parse
  */
-export async function extractMetadataFromHtml(htmlSource) {
+export async function extractMetadataFromHtml(htmlSource, viewMetadata) {
+    const { customElements, assetReferences, serverData } = viewMetadata;
     return new Promise((resolve, reject) => {
-        const customElements = [];
         const openElements = new Set();
-        const assetReferences = [];
         const parser = new SAXParser({ sourceCodeLocationInfo: true }); // TODO: Would we need this in the future?
         const ceRefStack = [];
+        let nestedIslands = false;
         parser.on('startTag', ({ tagName, attrs, // attributes are passed into SSR
         sourceCodeLocation, }) => {
             // custom elements
             if (tagName.includes('-') && !openElements.has(tagName)) {
                 const { startOffset, endOffset } = sourceCodeLocation;
-                const ceRef = {
-                    tagName,
-                    location: { startOffset, endOffset },
-                    // transform attributes [{ name: 'some-attr', value: 'the value' }] into properties { someAttr: 'the value' }
-                    // leave props as undefined if there are no attributes
-                    // set boolean attribute values to "true", or lwc will see them as falsy
-                    props: attrs.length
-                        ? attrs.reduce((obj, { name, value }) => {
-                            obj[getPropFromAttrName(name)] = value === '' ? 'true' : value;
-                            return obj;
-                        }, {})
-                        : undefined,
-                };
+                // transform attributes [{ name: 'some-attr', value: 'the value' }] into properties { someAttr: 'the value' }
+                // leave props as undefined if there are no attributes
+                // set boolean attribute values to "true", or lwc will see them as falsy
+                const props = attrs.length
+                    ? attrs.reduce((obj, { name, value }) => {
+                        obj[getPropFromAttrName(name)] = value === '' ? 'true' : value;
+                        return obj;
+                    }, {})
+                    : undefined;
+                const ceRef = { tagName, location: { startOffset, endOffset }, props };
                 openElements.add(tagName);
                 if (ceRefStack.length) {
                     // nested CE
                     const last = ceRefStack[ceRefStack.length - 1];
                     last.children = last.children ? [...last.children, ceRef] : [ceRef];
-                    ceRefStack.push(ceRef);
+                    // nested CEs are collected if they have a hydration directive
+                    if (hasHydrationDirective(props)) {
+                        customElements.push(ceRef);
+                        nestedIslands = true;
+                    }
                 }
                 else {
+                    // collect all top-level CEs
                     customElements.push(ceRef);
-                    ceRefStack.push(ceRef);
                 }
+                ceRefStack.push(ceRef);
             }
             // <img src="asset-url"/>
             // <script type="text/javascript" src="asset-url"></script>
@@ -99,8 +104,13 @@ export async function extractMetadataFromHtml(htmlSource) {
             }
         });
         const inputStream = Readable.from(htmlSource);
-        // dedupe custom element references
-        inputStream.on('end', () => resolve({ customElements, assetReferences }));
+        // If nested islands are found, ONLY collect custom elements with the hydration directive
+        // Otherwise, just collect top-level custom elements (ie: root components) as usual
+        inputStream.on('end', () => resolve({
+            customElements: customElements.filter((ce) => !nestedIslands || hasHydrationDirective(ce.props)),
+            assetReferences,
+            serverData,
+        }));
         inputStream.on('error', (error) => reject(error));
         inputStream.pipe(parser);
     });

package/build/es/identity.d.ts

@@ -82,6 +82,7 @@ interface VersionedAbstractModuleId extends AbstractModuleId {
  * @example - 'c/form/v/0_0_2' => {specifier: "c/form", version: "0.0.2"}
  */
 export declare function getVersionedModuleId(rawSpecifier: string, moduleRegistry: PublicModuleRegistry, runtimeParams: RuntimeParams): Promise<VersionedAbstractModuleId>;
+export declare function isSpecifier(specifier?: string): boolean;
 interface PackageIdentity {
     scope?: string;
     packageName: string;
@@ -140,4 +141,9 @@ export { getCacheKeyFromJson };
 export declare function isExternalUrl(url: string): boolean;
 export declare function isAssetSourceExternal(assetSource: AssetSource): boolean;
 export declare function isBundleDefinition(definition: ModuleDefinition | BundleDefinition): definition is BundleDefinition;
+/**
+ * Create a js safe variable name
+ * @param name - Proposed name
+ */
+export declare function stringToVariableName(inputString: string): string;
 //# sourceMappingURL=identity.d.ts.map

package/build/es/identity.js

@@ -129,6 +129,9 @@ export async function getVersionedModuleId(rawSpecifier, moduleRegistry, runtime
     const moduleEntry = await moduleRegistry.getModuleEntry(moduleId, runtimeParams);
     return { ...moduleId, version: moduleEntry.version };
 }
+export function isSpecifier(specifier) {
+    return !!specifier && /^@?[\w-]+(\/[\w-]+)*$/.test(specifier);
+}
 const RE_SCOPED = /^(@[^/]+\/[^/@]+)(?:\/([^@]+))?(?:@([\s\S]+))?/;
 const RE_NORMAL = /^([^/@]+)(?:\/([^@]+))?(?:@([\s\S]+))?/;
 /**
@@ -255,4 +258,18 @@ export function isAssetSourceExternal(assetSource) {
 export function isBundleDefinition(definition) {
     return definition.bundleRecord !== undefined;
 }
+/**
+ * Create a js safe variable name
+ * @param name - Proposed name
+ */
+export function stringToVariableName(inputString) {
+    // Remove at symbols (@)
+    // Remove non-alphanumeric characters except for underscore (_) and dollar sign ($)
+    const cleanedString = inputString.replace(/@/g, '').replace(/[^a-zA-Z0-9_$]/g, '_');
+    // Prepend an underscore if the resulting name is empty or starts with a number, underscore (_) and dollar sign ($)
+    if (!cleanedString || /^[0-9$]+/.test(cleanedString)) {
+        return `_${cleanedString}`;
+    }
+    return cleanedString;
+}
 //# sourceMappingURL=identity.js.map

package/build/es/import-metadata.js

@@ -1,5 +1,5 @@
 import { parse as parseImports } from 'es-module-lexer';
-import { DEBUG, logger, VERBOSE } from './logger.js';
+import { DEBUG, logger, VERBOSE } from '@lwrjs/diagnostics';
 const IMPORT_META_REGEX = /^import\.meta(\.\w+)+/;
 export var ModuleNameType;
 (function (ModuleNameType) {

package/build/es/index.d.ts

@@ -11,7 +11,6 @@ export * from './graph.js';
 export * from './mappings.js';
 export * from './urls.js';
 export * from './env.js';
-export * from './logger.js';
 export * from './lwr-app-observer.js';
 export * from './bundle.js';
 export * from './localization.js';

package/build/es/index.js

@@ -11,7 +11,6 @@ export * from './graph.js';
 export * from './mappings.js';
 export * from './urls.js';
 export * from './env.js';
-export * from './logger.js';
 export * from './lwr-app-observer.js';
 export * from './bundle.js';
 export * from './localization.js';

package/build/es/localization.d.ts

@@ -1,4 +1,4 @@
-import type { Locale } from '@lwrjs/types';
-export declare function hasCountryCode(locale: Locale | string): boolean;
-export declare function stripCountryCode(locale: Locale | string): string | undefined;
+import type { I18NConfig } from '@lwrjs/types';
+export declare function getFallbackLocale(localeId: string, i18n: I18NConfig): string | undefined;
+export declare function walkLocaleFallbacks<R>(initialLocale: string, i18n: I18NConfig, test: (locale: string) => Promise<R | undefined>): Promise<R | undefined>;
 //# sourceMappingURL=localization.d.ts.map

package/build/es/localization.js

@@ -1,29 +1,28 @@
-import { logger } from './logger.js';
 // Utilities for working with localized content
-export function hasCountryCode(locale) {
-    try {
-        const parsedLocale = new Intl.Locale(resolveLocaleId(locale));
-        return typeof parsedLocale.region === 'string';
-    }
-    catch (error) {
-        logger.debug(`[static-util] Failed to parse country code from locale: ${locale}`, error);
-        return false; // Invalid locale format
-    }
+export function getFallbackLocale(localeId, i18n) {
+    const locale = i18n.locales.find((l) => l.id === localeId);
+    return locale?.fallback;
 }
-export function stripCountryCode(locale) {
-    try {
-        const parsedLocale = new Intl.Locale(resolveLocaleId(locale));
-        return parsedLocale.language;
+// Utilities to walk locale fallback logic
+export async function walkLocaleFallbacks(initialLocale, i18n, test) {
+    // Walk the locales
+    const visited = new Set();
+    let localeId = initialLocale;
+    while (localeId && !visited.has(localeId)) {
+        // eslint-disable-next-line no-await-in-loop
+        const result = await test(localeId);
+        if (result) {
+            return result;
+        }
+        visited.add(localeId);
+        const config = i18n.locales.find((l) => l.id === localeId);
+        localeId = config && config.fallback;
     }
-    catch (error) {
-        logger.debug(`[static-util] Failed to strip country code from locale: ${locale}`, error);
-    }
-}
-function resolveLocaleId(locale) {
-    const asLocalObj = locale;
-    if (asLocalObj.id !== undefined) {
-        return asLocalObj.id;
+    // If we did not already visit the default locale give that a try
+    if (!visited.has(i18n.defaultLocale)) {
+        return test(i18n.defaultLocale);
     }
-    return locale;
+    // Did not find what we were looking for
+    return undefined;
 }
 //# sourceMappingURL=localization.js.map

package/build/es/object.js

@@ -18,7 +18,12 @@ function _deepFreeze(obj, maxDepth, depth) {
  */
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
 export function deepFreeze(obj, maxDepth = 5) {
-    const objClone = JSON.parse(JSON.stringify(obj));
+    let objClone = obj;
+    // Temporary fix for W-13723739 to prevent out of memory exceptions
+    // Only clone the object if we don't have the env variable set
+    if (process.env.UNSAFE_IGNORE_CONFIG_VALIDATION !== 'true') {
+        objClone = JSON.parse(JSON.stringify(obj));
+    }
     return _deepFreeze(objClone, maxDepth, 0);
 }
 /**

package/build/es/urls.d.ts

@@ -1,4 +1,4 @@
-import type { RuntimeEnvironment, RuntimeParams } from '@lwrjs/types';
+import type { I18NConfig, RuntimeEnvironment, RuntimeParams } from '@lwrjs/types';
 export declare function getClientBootstrapConfigurationUri(routeInfo: {
     id: string;
     url: string;
@@ -28,4 +28,12 @@ export declare function getClientBootstrapConfigurationRoutes(): string[];
  */
 export declare function extractRequestParams(parameterizedRoute: string, resolvedUrl: string, existingParams?: Record<string, string>): Record<string, string>;
 export declare function isModuleOrBundleUrl(url: string): boolean;
+/**
+ * Return a view route URL considering the basePath and the i18N config
+ */
+export declare function getViewUri(routePath: string, basePath: string, locale: string, i18n: I18NConfig): string;
+/**
+ * Returns true is the URI starts with http:// or https://
+ */
+export declare function isURL(uri: string): boolean;
 //# sourceMappingURL=urls.d.ts.map

package/build/es/urls.js

@@ -1,4 +1,5 @@
 import { pathToRegexp } from 'path-to-regexp';
+import path from 'path';
 const CONFIG_SUFFIX = '/config.js';
 const SIGNATURE_SIGIL = 's';
 export function getClientBootstrapConfigurationUri(routeInfo, runtimeEnvironment, runtimeParams, signature) {
@@ -91,4 +92,36 @@ const isModuleOrBundleRegEx = /^\/.*\/(module|bundle)\//i;
 export function isModuleOrBundleUrl(url) {
     return isModuleOrBundleRegEx.test(url);
 }
+/**
+ * Return a view route URL considering the basePath and the i18N config
+ */
+export function getViewUri(routePath, basePath, locale, i18n) {
+    // Use a regular expression to check if the URI has a domain
+    if (isURL(routePath)) {
+        return routePath;
+    }
+    let url = basePath;
+    if (i18n.uriPattern === 'path-prefix' && locale !== i18n.defaultLocale) {
+        url = path.join(url, `/${locale}`);
+    }
+    url = path.join(url, routePath);
+    if (i18n.uriPattern === 'query-param' && locale !== i18n.defaultLocale) {
+        url = addQueryParamToAbsoluteURI(url, 'locale', locale);
+    }
+    return url;
+}
+/**
+ * Returns true is the URI starts with http:// or https://
+ */
+export function isURL(uri) {
+    return /^https?:\/\//i.test(uri);
+}
+function addQueryParamToAbsoluteURI(absoluteURI, paramName, paramValue) {
+    // Use a dummy domain for parsing
+    const url = new URL(absoluteURI, 'http://example.com');
+    // Add the query parameter
+    url.searchParams.set(paramName, paramValue);
+    // Get the modified URI with the query parameter
+    return url.pathname + url.search;
+}
 //# sourceMappingURL=urls.js.map

package/package.json

@@ -4,7 +4,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.11.0-alpha.1",
+    "version": "0.11.0-alpha.10",
     "homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
     "repository": {
         "type": "git",
@@ -45,6 +45,7 @@
         "build/**/*.d.ts"
     ],
     "dependencies": {
+        "@lwrjs/diagnostics": "0.11.0-alpha.10",
         "es-module-lexer": "^1.3.0",
         "fast-json-stable-stringify": "^2.1.0",
         "magic-string": "^0.30.0",
@@ -61,13 +62,12 @@
         "rollup": "^2.78.0"
     },
     "devDependencies": {
-        "@lwrjs/diagnostics": "0.11.0-alpha.1",
-        "@lwrjs/types": "0.11.0-alpha.1",
+        "@lwrjs/types": "0.11.0-alpha.10",
         "@types/mime-types": "2.1.1",
         "@types/path-to-regexp": "^1.7.0"
     },
     "engines": {
         "node": ">=16.0.0"
     },
-    "gitHead": "6a840d4694fac9f0be5c3a21707015379cbadad7"
+    "gitHead": "34b1e289e8de12531f5624b64512e870157195d4"
 }

package/build/cjs/logger.cjs

@@ -1,146 +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/shared-utils/src/logger.ts
-__markAsModule(exports);
-__export(exports, {
-  DEBUG: () => DEBUG,
-  ERROR: () => ERROR,
-  INFO: () => INFO,
-  VERBOSE: () => VERBOSE,
-  WARN: () => WARN,
-  logger: () => logger,
-  stringifyError: () => stringifyError
-});
-var import_diagnostics = __toModule(require("@lwrjs/diagnostics"));
-var VERBOSE = "verbose";
-var DEBUG = "debug";
-var INFO = "info";
-var WARN = "warn";
-var ERROR = "error";
-var options = {};
-var DUPES = new Set();
-var currentLevel = process.env.LOG_LEVEL || INFO;
-function log(level, message, additionalInfo) {
-  const LOG_LEVEL = process.env.LOG_LEVEL || INFO;
-  if (currentLevel !== LOG_LEVEL) {
-    currentLevel = LOG_LEVEL;
-    console.log(`LOG_LEVEL: ${LOG_LEVEL}`);
-  }
-  let shouldLog = false;
-  switch (level) {
-    case VERBOSE:
-      shouldLog = LOG_LEVEL == VERBOSE;
-      break;
-    case DEBUG:
-      shouldLog = LOG_LEVEL == VERBOSE || LOG_LEVEL == DEBUG;
-      break;
-    case INFO:
-      shouldLog = LOG_LEVEL == VERBOSE || LOG_LEVEL == DEBUG || LOG_LEVEL == INFO;
-      break;
-    case WARN:
-      shouldLog = LOG_LEVEL == VERBOSE || LOG_LEVEL == DEBUG || LOG_LEVEL == INFO || LOG_LEVEL == WARN;
-      break;
-    case ERROR:
-      shouldLog = true;
-      break;
-  }
-  if (shouldLog && options.dedupe && options.dedupe.has(level)) {
-    const key = `[${level}] : ${message}`;
-    if (DUPES.has(key)) {
-      shouldLog = false;
-    } else {
-      DUPES.add(key);
-    }
-  }
-  if (shouldLog) {
-    const logMessage = `[${level}]${gap(message)}${message}`;
-    const additionalMessage = additionalInfo ? `Additional Info: ${JSON.stringify(additionalInfo)}` : void 0;
-    if (level == ERROR) {
-      console.error("%s", logMessage);
-      if (additionalInfo) {
-        console.error("\n%s", additionalMessage);
-      }
-    } else if (level == WARN) {
-      console.warn("%s", logMessage);
-      if (additionalInfo) {
-        console.warn("\n%s", additionalMessage);
-      }
-    } else if (level == DEBUG || level == VERBOSE) {
-      console.log("%s", logMessage);
-      if (additionalInfo) {
-        console.log("\n%s", additionalMessage);
-      }
-    } else {
-      console.log(logMessage);
-      if (additionalInfo) {
-        console.log(`
-${additionalMessage}`);
-      }
-    }
-  }
-}
-var stringifyError = (error) => {
-  if (error instanceof import_diagnostics.DiagnosticsError) {
-    return JSON.stringify({
-      message: error.message,
-      diagnostics: error.diagnostics,
-      stack: error.stack
-    });
-  } else if (typeof error === "string" || error instanceof String) {
-    return error;
-  } else {
-    const propertyNames = Object.getOwnPropertyNames(error);
-    const retObj = {};
-    for (let property, i = 0, len = propertyNames.length; i < len; ++i) {
-      property = propertyNames[i];
-      const descriptor = Object.getOwnPropertyDescriptor(error, property);
-      retObj[property] = descriptor?.value;
-    }
-    return JSON.stringify(retObj);
-  }
-};
-function gap(message) {
-  return String(message)?.indexOf("[") === 0 ? "" : " ";
-}
-function logError(err, additionalInfo) {
-  if (err instanceof import_diagnostics.DiagnosticsError || !err || !err.message) {
-    log(ERROR, stringifyError(err), additionalInfo);
-  }
-  if (err && err.message) {
-    console.error("%s", `[${ERROR}]${gap(err.message)}${err.message}`);
-    console.error("%s", err);
-  }
-}
-var logger = {
-  verbose: (message, additionalInfo) => log(VERBOSE, message, additionalInfo),
-  debug: (message, additionalInfo) => log(DEBUG, message, additionalInfo),
-  info: (message, additionalInfo) => log(INFO, message, additionalInfo),
-  warn: (message, additionalInfo) => log(WARN, message, additionalInfo),
-  error: (error, additionalInfo) => logError(error, additionalInfo),
-  log,
-  setOptions: (opts) => {
-    options = opts;
-  },
-  currentLevel
-};

package/build/es/logger.d.ts

@@ -1,23 +0,0 @@
-type LEVEL = 'verbose' | 'debug' | 'info' | 'warn' | 'error';
-export declare const VERBOSE: LEVEL;
-export declare const DEBUG: LEVEL;
-export declare const INFO: LEVEL;
-export declare const WARN: LEVEL;
-export declare const ERROR: LEVEL;
-type LoggerOptions = {
-    dedupe?: Set<string>;
-};
-declare function log(level: string, message: string, additionalInfo?: any): void;
-export declare const stringifyError: (error: any) => string;
-export declare const logger: {
-    verbose: (message: string, additionalInfo?: any) => void;
-    debug: (message: string, additionalInfo?: any) => void;
-    info: (message: string, additionalInfo?: any) => void;
-    warn: (message: string, additionalInfo?: any) => void;
-    error: (error: any, additionalInfo?: any) => void;
-    log: typeof log;
-    setOptions: (opts: LoggerOptions) => void;
-    currentLevel: string;
-};
-export {};
-//# sourceMappingURL=logger.d.ts.map

package/build/es/logger.js

@@ -1,124 +0,0 @@
-import { DiagnosticsError } from '@lwrjs/diagnostics';
-export const VERBOSE = 'verbose';
-export const DEBUG = 'debug';
-export const INFO = 'info';
-export const WARN = 'warn';
-export const ERROR = 'error';
-let options = {};
-const DUPES = new Set();
-let currentLevel = process.env.LOG_LEVEL || INFO;
-function log(level, message, additionalInfo) {
-    const LOG_LEVEL = process.env.LOG_LEVEL || INFO;
-    if (currentLevel !== LOG_LEVEL) {
-        currentLevel = LOG_LEVEL;
-        console.log(`LOG_LEVEL: ${LOG_LEVEL}`);
-    }
-    let shouldLog = false;
-    switch (level) {
-        case VERBOSE:
-            shouldLog = LOG_LEVEL == VERBOSE;
-            break;
-        case DEBUG:
-            shouldLog = LOG_LEVEL == VERBOSE || LOG_LEVEL == DEBUG;
-            break;
-        case INFO:
-            shouldLog = LOG_LEVEL == VERBOSE || LOG_LEVEL == DEBUG || LOG_LEVEL == INFO;
-            break;
-        case WARN:
-            shouldLog = LOG_LEVEL == VERBOSE || LOG_LEVEL == DEBUG || LOG_LEVEL == INFO || LOG_LEVEL == WARN;
-            break;
-        case ERROR:
-            shouldLog = true;
-            break;
-    }
-    // Check if we should suppress dupes and we have already logged this message
-    if (shouldLog && options.dedupe && options.dedupe.has(level)) {
-        const key = `[${level}] : ${message}`;
-        if (DUPES.has(key)) {
-            shouldLog = false;
-        }
-        else {
-            // add key to de-duplicate cache
-            DUPES.add(key);
-        }
-    }
-    if (shouldLog) {
-        const logMessage = `[${level}]${gap(message)}${message}`;
-        const additionalMessage = additionalInfo
-            ? `Additional Info: ${JSON.stringify(additionalInfo)}`
-            : undefined;
-        if (level == ERROR) {
-            console.error('\x1b[31m%s\x1b[0m', logMessage); // red
-            if (additionalInfo) {
-                console.error('\n\x1b[31m%s\x1b[0m', additionalMessage); // red
-            }
-        }
-        else if (level == WARN) {
-            console.warn('\x1b[33m%s\x1b[0m', logMessage); // yellow
-            if (additionalInfo) {
-                console.warn('\n\x1b[33m%s\x1b[0m', additionalMessage); // yellow
-            }
-        }
-        else if (level == DEBUG || level == VERBOSE) {
-            console.log('\x1b[2m%s\x1b[0m', logMessage); // dim
-            if (additionalInfo) {
-                console.log('\n\x1b[2m%s\x1b[0m', additionalMessage); // dim
-            }
-        }
-        else {
-            console.log(logMessage);
-            if (additionalInfo) {
-                console.log(`\n${additionalMessage}`);
-            }
-        }
-    }
-}
-export const stringifyError = (error) => {
-    if (error instanceof DiagnosticsError) {
-        return JSON.stringify({
-            message: error.message,
-            diagnostics: error.diagnostics,
-            stack: error.stack,
-        });
-    }
-    else if (typeof error === 'string' || error instanceof String) {
-        return error;
-    }
-    else {
-        const propertyNames = Object.getOwnPropertyNames(error);
-        const retObj = {};
-        for (let property, i = 0, len = propertyNames.length; i < len; ++i) {
-            property = propertyNames[i];
-            const descriptor = Object.getOwnPropertyDescriptor(error, property);
-            retObj[property] = descriptor?.value;
-        }
-        return JSON.stringify(retObj);
-    }
-};
-// Return a space if there should be a space between the message and the level
-function gap(message) {
-    return String(message)?.indexOf('[') === 0 ? '' : ' ';
-}
-function logError(err, additionalInfo) {
-    if (err instanceof DiagnosticsError || !err || !err.message) {
-        log(ERROR, stringifyError(err), additionalInfo);
-    }
-    // If this is an error with a message update the message header and log as is...
-    if (err && err.message) {
-        console.error('\x1b[31m%s\x1b[0m', `[${ERROR}]${gap(err.message)}${err.message}`);
-        console.error('\x1b[90m%s\x1b[0m', err);
-    }
-}
-export const logger = {
-    verbose: (message, additionalInfo) => log(VERBOSE, message, additionalInfo),
-    debug: (message, additionalInfo) => log(DEBUG, message, additionalInfo),
-    info: (message, additionalInfo) => log(INFO, message, additionalInfo),
-    warn: (message, additionalInfo) => log(WARN, message, additionalInfo),
-    error: (error, additionalInfo) => logError(error, additionalInfo),
-    log,
-    setOptions: (opts) => {
-        options = opts;
-    },
-    currentLevel,
-};
-//# sourceMappingURL=logger.js.map