@lwrjs/view-registry 0.10.0-alpha.13 → 0.10.0-alpha.15

package/build/cjs/linkers/view_bootstrap.cjs

@@ -30,6 +30,7 @@ var import_shared_utils = __toModule(require("@lwrjs/shared-utils"));
 var import_identity = __toModule(require("@lwrjs/app-service/identity"));
 var import_utils = __toModule(require("../utils.cjs"));
 var import_utils2 = __toModule(require("./utils.cjs"));
+var import_preload_utils = __toModule(require("./preload-utils.cjs"));
 async function getHtmlResources(view, viewParams, resourceContext) {
   const {
     runtimeEnvironment,
@@ -39,8 +40,15 @@ async function getHtmlResources(view, viewParams, resourceContext) {
     resourceRegistry,
     viewMetadata
   } = resourceContext;
+  const {lwrVersion, format, hmrEnabled, bundle, debug, minify} = runtimeEnvironment;
+  const {customElements} = viewMetadata;
+  const defRegistry = bundle ? moduleBundler : moduleRegistry;
+  const version = lwrVersion;
+  const isAMD = format === "amd";
+  const depth = isAMD ? {static: import_shared_utils.GraphDepth.ALL, dynamic: 1} : {static: import_shared_utils.GraphDepth.NONE, dynamic: 1};
   const {bundleConfig} = resourceContext;
   const {external = {}} = bundleConfig;
+  const groups = isAMD ? bundleConfig.groups || {} : {};
   const isExternal = function(rawSpecifier) {
     const {specifier} = (0, import_shared_utils.explodeSpecifier)(rawSpecifier);
     return Object.keys(external).some((e) => specifier === e);
@@ -52,11 +60,6 @@ async function getHtmlResources(view, viewParams, resourceContext) {
       preloadModules: []
     }
   } = view;
-  const {lwrVersion, format, hmrEnabled, bundle, debug, minify} = runtimeEnvironment;
-  const {customElements} = viewMetadata;
-  const defRegistry = bundle ? moduleBundler : moduleRegistry;
-  const version = lwrVersion;
-  const isAMD = format === "amd";
   const appIdentity = {
     appName,
     format: runtimeEnvironment.format,
@@ -70,105 +73,123 @@ async function getHtmlResources(view, viewParams, resourceContext) {
   const imports = {};
   const rootComponents = [];
   const requiredAmdModules = [];
-  const preloadModulesMeta = new Map();
+  const viewPreloads = {
+    uris: [],
+    specifiers: [],
+    groups: new Map()
+  };
   const isSSR = view.bootstrap?.ssr;
-  if (isAMD) {
-    const shimBundle = debug || minify === false ? "lwr-loader-shim.bundle.js" : "lwr-loader-shim.bundle.min.js";
-    const def = await resourceRegistry.getResource({specifier: shimBundle, version}, runtimeEnvironment, runtimeParams);
-    if (!def) {
-      throw Error("Failed to find definition of resource: " + shimBundle);
-    }
-    requiredResources.push(def);
-    const errorShimDef = await resourceRegistry.getResource({specifier: "lwr-error-shim.js", version}, runtimeEnvironment, runtimeParams);
-    if (!errorShimDef) {
-      throw Error("Failed to find definition of resource: lwr-error-shim.js");
-    }
-    requiredResources.push(errorShimDef);
-  }
-  const depth = isAMD ? {static: import_shared_utils.GraphDepth.ALL, dynamic: 1} : {static: import_shared_utils.GraphDepth.NONE, dynamic: 1};
-  const bootstrapModuleGraph = await (0, import_shared_utils.getModuleGraphs)(bootstrapSpecifier, {includeUris: true, includeLinkedDefinitions: true, depth}, moduleRegistry, defRegistry, runtimeEnvironment, runtimeParams, visitedCache);
-  const versionedSpecifier = bootstrapModuleGraph.graphs[0].specifier;
-  const uri = bootstrapModuleGraph.uriMap[versionedSpecifier];
-  moduleResources.push((0, import_utils.getModuleResourceByUri)(uri, runtimeEnvironment, {isPreload: false, isSSR}));
-  for (const depSpecifier of bootstrapModuleGraph.graphs[0].static) {
-    if (!isExternal(depSpecifier)) {
-      const uri2 = bootstrapModuleGraph.uriMap[depSpecifier];
-      preloadModulesMeta.set(depSpecifier, uri2);
+  let bootstrapModuleRef, versionedSpecifier = bootstrapSpecifier;
+  let importMetadata = {imports: {}};
+  const customElementsRecords = [];
+  const flattenedElements = (0, import_utils2.flattenCustomElements)(customElements, isSSR);
+  const viewContainsLiveElements = !isSSR || flattenedElements.some(({props}) => (0, import_shared_utils.getHydrateDirective)(props));
+  if (viewContainsLiveElements) {
+    if (isAMD) {
+      const shimBundle = debug || minify === false ? "lwr-loader-shim.bundle.js" : "lwr-loader-shim.bundle.min.js";
+      const def = await resourceRegistry.getResource({specifier: shimBundle, version}, runtimeEnvironment, runtimeParams);
+      if (!def) {
+        throw Error("Failed to find definition of resource: " + shimBundle);
+      }
+      requiredResources.push(def);
+      const errorShimDef = await resourceRegistry.getResource({specifier: "lwr-error-shim.js", version}, runtimeEnvironment, runtimeParams);
+      if (!errorShimDef) {
+        throw Error("Failed to find definition of resource: lwr-error-shim.js");
+      }
+      requiredResources.push(errorShimDef);
     }
-  }
-  if ((0, import_shared_utils.isBundler)(defRegistry)) {
-    for (const specifier of preloadModules) {
-      await (0, import_utils2.getPreloadModulesMeta)(specifier, preloadModulesMeta, bundleConfig, moduleRegistry, defRegistry, runtimeEnvironment, runtimeParams);
+    const bootstrapModuleGraph = await (0, import_shared_utils.getModuleGraphs)(bootstrapSpecifier, {includeUris: true, includeLinkedDefinitions: true, depth}, moduleRegistry, defRegistry, runtimeEnvironment, runtimeParams, visitedCache);
+    bootstrapModuleRef = {
+      specifier: bootstrapModuleGraph.graphs[0].specifier,
+      flatGraph: bootstrapModuleGraph,
+      resources: configResources
+    };
+    versionedSpecifier = bootstrapModuleGraph.graphs[0].specifier;
+    const uri = bootstrapModuleGraph.uriMap[versionedSpecifier];
+    moduleResources.push((0, import_utils.getModuleResourceByUri)(uri, runtimeEnvironment, {isPreload: false, isSSR}));
+    for (const depSpecifier of bootstrapModuleGraph.graphs[0].static) {
+      if (!isExternal(depSpecifier)) {
+        const uri2 = bootstrapModuleGraph.uriMap[depSpecifier];
+        (0, import_preload_utils.setPreloadModulesMeta)(depSpecifier, uri2, groups, viewPreloads);
+      }
     }
-  }
-  if (isAMD) {
-    requiredAmdModules.push(versionedSpecifier);
-    imports[versionedSpecifier] = uri;
-    for (const staticDep of bootstrapModuleGraph.graphs[0].static) {
-      const uri2 = bootstrapModuleGraph.uriMap[staticDep];
-      imports[staticDep] = uri2;
-      if (services && services.length) {
-        requiredAmdModules.push(staticDep);
+    if ((0, import_shared_utils.isBundler)(defRegistry)) {
+      for (const specifier of preloadModules) {
+        await (0, import_preload_utils.getPreloadModulesMeta)(specifier, viewPreloads, bundleConfig, moduleRegistry, defRegistry, runtimeEnvironment, runtimeParams);
       }
     }
-    for (const dynamicDep of bootstrapModuleGraph.graphs[0].dynamicRefs) {
-      const uri2 = bootstrapModuleGraph.uriMap[dynamicDep];
-      if (uri2) {
-        imports[dynamicDep] = uri2;
-      } else {
-        import_shared_utils.logger.warn("Skipping unknown dynamic import " + dynamicDep);
+    if (isAMD) {
+      requiredAmdModules.push(versionedSpecifier);
+      imports[versionedSpecifier] = uri;
+      for (const staticDep of bootstrapModuleGraph.graphs[0].static) {
+        const uri2 = bootstrapModuleGraph.uriMap[staticDep];
+        imports[staticDep] = uri2;
+        if (services && services.length) {
+          requiredAmdModules.push(staticDep);
+        }
+      }
+      for (const dynamicDep of bootstrapModuleGraph.graphs[0].dynamicRefs) {
+        const uri2 = bootstrapModuleGraph.uriMap[dynamicDep];
+        if (uri2) {
+          imports[dynamicDep] = uri2;
+        } else {
+          import_shared_utils.logger.warn("Skipping unknown dynamic import " + dynamicDep);
+        }
       }
     }
+    importMetadata = await (0, import_shared_utils.toImportMetadata)(bootstrapModuleGraph, {imports: {}, index: {}}, moduleRegistry, runtimeEnvironment, runtimeParams);
   }
-  let importMetadata = await (0, import_shared_utils.toImportMetadata)(bootstrapModuleGraph, {imports: {}, index: {}}, moduleRegistry, runtimeEnvironment, runtimeParams);
-  const customElementsRecords = [];
-  const flattenedElements = (0, import_utils2.flattenCustomElements)(customElements, isSSR);
-  for (const {tagName: element} of flattenedElements) {
+  for (const {tagName: element, props} of flattenedElements) {
     const graph = await (0, import_shared_utils.getModuleGraphs)((0, import_shared_utils.kebabCaseToModuleSpecifier)(element), {includeUris: true, includeLinkedDefinitions: true, depth}, moduleRegistry, defRegistry, runtimeEnvironment, runtimeParams ? runtimeParams : {}, visitedCache);
     customElementsRecords.push({elementName: element, flatGraph: graph});
-    const specifier = graph.graphs[0].specifier;
-    const uri2 = graph.uriMap[specifier];
-    preloadModulesMeta.set(specifier, uri2);
-    if (bundle) {
-      for (const depSpecifier of graph.graphs[0].static) {
-        if (!isExternal(depSpecifier)) {
-          const uri3 = graph.uriMap[depSpecifier];
-          preloadModulesMeta.set(depSpecifier, uri3);
+    if (!isSSR || (0, import_shared_utils.getHydrateDirective)(props)) {
+      const specifier = graph.graphs[0].specifier;
+      const uri = graph.uriMap[specifier];
+      (0, import_preload_utils.setPreloadModulesMeta)(specifier, uri, groups, viewPreloads);
+      if (bundle) {
+        for (const depSpecifier of graph.graphs[0].static) {
+          if (!isExternal(depSpecifier)) {
+            const uri2 = graph.uriMap[depSpecifier];
+            (0, import_preload_utils.setPreloadModulesMeta)(depSpecifier, uri2, groups, viewPreloads);
+          }
         }
       }
-    }
-    rootComponents.push(specifier);
-    imports[specifier] = uri2;
-    if (isAMD) {
-      for (const staticDep of graph.graphs[0].static) {
-        const uri3 = graph.uriMap[staticDep];
-        imports[staticDep] = uri3;
-      }
-      for (const dynamicDep of graph.graphs[0].dynamicRefs) {
-        const uri3 = graph.uriMap[dynamicDep];
-        imports[dynamicDep] = uri3;
+      rootComponents.push(specifier);
+      imports[specifier] = uri;
+      if (isAMD) {
+        for (const staticDep of graph.graphs[0].static) {
+          const uri2 = graph.uriMap[staticDep];
+          imports[staticDep] = uri2;
+        }
+        for (const dynamicDep of graph.graphs[0].dynamicRefs) {
+          const uri2 = graph.uriMap[dynamicDep];
+          imports[dynamicDep] = uri2;
+        }
       }
+      importMetadata = await (0, import_shared_utils.toImportMetadata)(graph, importMetadata, moduleRegistry, runtimeEnvironment, runtimeParams);
     }
-    importMetadata = await (0, import_shared_utils.toImportMetadata)(graph, importMetadata, moduleRegistry, runtimeEnvironment, runtimeParams);
   }
-  configResources.unshift(await (0, import_utils2.getViewBootstrapConfigurationResource)({
-    id: view.id,
-    url: viewParams?.page?.url,
-    configAsSrc: view.bootstrap?.configAsSrc || false
-  }, {
-    appId: appIdentity.appName,
-    bootstrapModule: versionedSpecifier,
-    autoBoot: view.bootstrap?.autoBoot === false ? false : true,
-    imports: importMetadata?.imports,
-    index: importMetadata?.index,
-    rootComponents,
-    ...isAMD && {requiredModules: requiredAmdModules},
-    ...isAMD && {preloadModules: Array.from(preloadModulesMeta.keys())}
-  }, runtimeEnvironment, runtimeParams));
+  if (viewContainsLiveElements) {
+    configResources.unshift((0, import_utils2.getViewBootstrapConfigurationResource)({
+      id: view.id,
+      url: viewParams?.page?.url,
+      configAsSrc: view.bootstrap?.configAsSrc || false
+    }, {
+      appId: appIdentity.appName,
+      bootstrapModule: versionedSpecifier,
+      autoBoot: view.bootstrap?.autoBoot === false ? false : true,
+      imports: importMetadata?.imports,
+      index: importMetadata?.index,
+      rootComponents,
+      ...isAMD && {requiredModules: requiredAmdModules},
+      ...isAMD && {preloadModules: viewPreloads.specifiers}
+    }, runtimeEnvironment, runtimeParams));
+  }
   if (!isAMD && hmrEnabled) {
-    configResources.unshift(await (0, import_utils2.getViewHmrConfigurationResource)(view, viewMetadata));
+    configResources.unshift((0, import_utils2.getViewHmrConfigurationResource)(view, viewMetadata));
   }
-  for (const [, preloadUri] of preloadModulesMeta) {
+  const dedupedUris = [...new Set(viewPreloads.uris)];
+  for (const preloadUri of dedupedUris) {
     moduleResources.push((0, import_utils.getModuleResourceByUri)(preloadUri, runtimeEnvironment, {isPreload: true, isSSR}));
   }
   const htmlResources = await Promise.all([...configResources, ...requiredResources, ...moduleResources].map(import_utils.generateHtmlTag));
@@ -185,11 +206,7 @@ async function getHtmlResources(view, viewParams, resourceContext) {
       customElements: customElementsRecords,
       endpoints,
       importMetadata,
-      bootstrapModule: {
-        specifier: bootstrapModuleGraph.graphs[0].specifier,
-        flatGraph: bootstrapModuleGraph,
-        resources: configResources
-      }
+      bootstrapModule: bootstrapModuleRef
     }
   };
 }

package/build/es/linkers/legacy_view_bootstrap.js

@@ -1,11 +1,18 @@
-import { kebabCaseToModuleSpecifier, getModuleGraphs, GraphDepth, getModuleUriPrefix, logger, explodeSpecifier, isBundler, } from '@lwrjs/shared-utils';
+import { kebabCaseToModuleSpecifier, getModuleGraphs, GraphDepth, getModuleUriPrefix, logger, explodeSpecifier, isBundler, getHydrateDirective, } from '@lwrjs/shared-utils';
 import { AppResourceEnum, getAppSpecifier } from '@lwrjs/app-service/identity';
 import { generateHtmlTag, getModuleResourceByUri } from '../utils.js';
-import { flattenCustomElements, getViewBootstrapConfigurationResource, getViewHmrConfigurationResource, getPreloadModulesMeta, } from './utils.js';
+import { flattenCustomElements, getViewBootstrapConfigurationResource, getViewHmrConfigurationResource, } from './utils.js';
+import { setPreloadModulesMeta, getPreloadModulesMeta } from './preload-utils.js';
 export async function getHtmlResources(view, viewParams, resourceContext) {
     const { runtimeEnvironment, runtimeParams, moduleRegistry, moduleBundler, resourceRegistry, viewMetadata, } = resourceContext;
+    const { lwrVersion, format, hmrEnabled, bundle, debug, minify } = runtimeEnvironment;
+    const { customElements } = viewMetadata;
+    const version = lwrVersion;
+    const isAMD = format === 'amd';
     const { bundleConfig } = resourceContext;
     const { external = {} } = bundleConfig;
+    // Bundling groups is only supported in AMD for now
+    const groups = isAMD ? bundleConfig.groups || {} : {};
     const isExternal = function (rawSpecifier) {
         const { specifier } = explodeSpecifier(rawSpecifier);
         return Object.keys(external).some((e) => specifier === e);
@@ -14,10 +21,10 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
         services: [],
         preloadModules: [],
     }, } = view;
-    const { lwrVersion, format, hmrEnabled, bundle, debug, minify } = runtimeEnvironment;
-    const { customElements } = viewMetadata;
-    const version = lwrVersion;
-    const isAMD = format === 'amd';
+    const defRegistry = bundle ? moduleBundler : moduleRegistry;
+    const depth = isAMD
+        ? { static: GraphDepth.ALL, dynamic: 1 }
+        : { static: GraphDepth.NONE, dynamic: 0 };
     // The Application Bootstrap (ABS) module resource is EITHER
     //      - configured as routes[x].bootstrap.module OR
     //      - defaulted as "@lwrjs/app-service/{appName}/module/{format}"
@@ -48,155 +55,170 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
     const rootComponents = [];
     // Collection of modules specifiers that MUST be loaded in the view
     const requiredAmdModules = [];
-    // Collection of modules that will be preloaded. For AMD, it will be part of
-    // the preloadModules client bootstrap config
-    const preloadModulesMeta = new Map();
+    // Collect preload modules metadata
+    const viewPreloads = {
+        uris: [],
+        specifiers: [],
+        groups: new Map(),
+    };
     // Determine if server side rendering view modules
     const isSSR = view.bootstrap?.ssr;
-    // ------ AMD Required module resources
-    if (isAMD) {
-        // Keep shim format in sync with view_bootstrap.ts
-        const shimBundle = debug || minify === false
-            ? 'lwr-loader-shim-legacy.bundle.js'
-            : 'lwr-loader-shim-legacy.bundle.min.js';
-        let def = (await resourceRegistry.getResource({ specifier: shimBundle, version }, runtimeEnvironment, runtimeParams));
-        if (!def) {
-            // HACK: fallback to looking for the other shim.
-            // TODO: remove this once we solve debug mode in MRT
-            let fallbackShimBundle;
-            if (shimBundle === 'lwr-loader-shim-legacy.bundle.js') {
-                fallbackShimBundle = 'lwr-loader-shim-legacy.bundle.min.js';
-                def = (await resourceRegistry.getResource({ specifier: fallbackShimBundle, version }, runtimeEnvironment, runtimeParams));
-            }
-            else {
-                fallbackShimBundle = 'lwr-loader-shim-legacy.bundle.js';
-                def = (await resourceRegistry.getResource({ specifier: fallbackShimBundle, version }, runtimeEnvironment, runtimeParams));
-            }
-            // throw if we still can't find it
+    // ABS module and custom element references
+    let bootstrapModuleRef, versionedSpecifier = bootstrapSpecifier;
+    const customElementsRecords = [];
+    const flattenedElements = flattenCustomElements(customElements, isSSR);
+    const viewContainsLiveElements = !isSSR || flattenedElements.some(({ props }) => getHydrateDirective(props));
+    if (viewContainsLiveElements) {
+        // ------ AMD Required module resources
+        if (isAMD) {
+            // Keep shim format in sync with view_bootstrap.ts
+            const shimBundle = debug || minify === false
+                ? 'lwr-loader-shim-legacy.bundle.js'
+                : 'lwr-loader-shim-legacy.bundle.min.js';
+            let def = (await resourceRegistry.getResource({ specifier: shimBundle, version }, runtimeEnvironment, runtimeParams));
             if (!def) {
-                throw Error('Failed to find definition of resource: ' + shimBundle);
+                // HACK: fallback to looking for the other shim.
+                // TODO: remove this once we solve debug mode in MRT
+                let fallbackShimBundle;
+                if (shimBundle === 'lwr-loader-shim-legacy.bundle.js') {
+                    fallbackShimBundle = 'lwr-loader-shim-legacy.bundle.min.js';
+                    def = (await resourceRegistry.getResource({ specifier: fallbackShimBundle, version }, runtimeEnvironment, runtimeParams));
+                }
+                else {
+                    fallbackShimBundle = 'lwr-loader-shim-legacy.bundle.js';
+                    def = (await resourceRegistry.getResource({ specifier: fallbackShimBundle, version }, runtimeEnvironment, runtimeParams));
+                }
+                // throw if we still can't find it
+                if (!def) {
+                    throw Error('Failed to find definition of resource: ' + shimBundle);
+                }
             }
+            requiredResources.push(def);
+            // Always inline the error shim script after the shim
+            const errorShimDef = (await resourceRegistry.getResource({ specifier: 'lwr-error-shim.js', version }, runtimeEnvironment, runtimeParams));
+            if (!errorShimDef) {
+                throw Error('Failed to find definition of resource: lwr-error-shim.js');
+            }
+            requiredResources.push(errorShimDef);
         }
-        requiredResources.push(def);
-        // Always inline the error shim script after the shim
-        const errorShimDef = (await resourceRegistry.getResource({ specifier: 'lwr-error-shim.js', version }, runtimeEnvironment, runtimeParams));
-        if (!errorShimDef) {
-            throw Error('Failed to find definition of resource: lwr-error-shim.js');
-        }
-        requiredResources.push(errorShimDef);
-    }
-    // ------- Application Bootstrap module
-    // Traversal of the Bootstrap Module Graph is done to get all the URLS for discoverable static dependencies.
-    // Reasoning: This is to avoid unnecessary HTTP 302's during initial application module fetching.
-    // Scope: ESM currently only exposes immutable URI references, optimize for AMD formats
-    const depth = isAMD
-        ? { static: GraphDepth.ALL, dynamic: 1 }
-        : { static: GraphDepth.NONE, dynamic: 0 };
-    const defRegistry = bundle ? moduleBundler : moduleRegistry;
-    const bootstrapModuleGraph = await getModuleGraphs(bootstrapSpecifier, { includeUris: true, includeLinkedDefinitions: true, depth }, moduleRegistry, defRegistry, runtimeEnvironment, runtimeParams, visitedCache);
-    // ADD bootstrap module uri as a script resource
-    const versionedSpecifier = bootstrapModuleGraph.graphs[0].specifier;
-    const uri = bootstrapModuleGraph.uriMap[versionedSpecifier];
-    moduleResources.push(getModuleResourceByUri(uri, runtimeEnvironment, { isPreload: false, isSSR }));
-    // PRELOAD the bootstrap module static dependencies as preloaded script resources
-    for (const depSpecifier of bootstrapModuleGraph.graphs[0].static) {
-        if (!isExternal(depSpecifier)) {
-            const uri = bootstrapModuleGraph.uriMap[depSpecifier];
-            preloadModulesMeta.set(depSpecifier, uri);
-        }
-    }
-    // PRELOAD configured preloadModules as preloaded script resources
-    if (isBundler(defRegistry)) {
-        for (const specifier of preloadModules) {
-            // eslint-disable-next-line no-await-in-loop
-            await getPreloadModulesMeta(specifier, preloadModulesMeta, bundleConfig, moduleRegistry, defRegistry, runtimeEnvironment, runtimeParams);
+        // ------- Application Bootstrap module
+        // Traversal of the Bootstrap Module Graph is done to get all the URLS for discoverable static dependencies.
+        // Reasoning: This is to avoid unnecessary HTTP 302's during initial application module fetching.
+        // Scope: ESM currently only exposes immutable URI references, optimize for AMD formats
+        const bootstrapModuleGraph = await getModuleGraphs(bootstrapSpecifier, { includeUris: true, includeLinkedDefinitions: true, depth }, moduleRegistry, defRegistry, runtimeEnvironment, runtimeParams, visitedCache);
+        bootstrapModuleRef = {
+            specifier: bootstrapModuleGraph.graphs[0].specifier,
+            flatGraph: bootstrapModuleGraph,
+            resources: configResources,
+        };
+        // ADD bootstrap module uri as a script resource
+        versionedSpecifier = bootstrapModuleGraph.graphs[0].specifier;
+        const uri = bootstrapModuleGraph.uriMap[versionedSpecifier];
+        moduleResources.push(getModuleResourceByUri(uri, runtimeEnvironment, { isPreload: false, isSSR }));
+        // PRELOAD the bootstrap module static dependencies as preloaded script resources
+        for (const depSpecifier of bootstrapModuleGraph.graphs[0].static) {
+            if (!isExternal(depSpecifier)) {
+                const uri = bootstrapModuleGraph.uriMap[depSpecifier];
+                setPreloadModulesMeta(depSpecifier, uri, groups, viewPreloads);
+            }
         }
-    }
-    if (isAMD) {
-        // ADD bootstrap module as required
-        requiredAmdModules.push(versionedSpecifier);
-        // AMD ADD bootstrap module uri addressability
-        imports[versionedSpecifier] = uri;
-        // PRELOAD bootstrap module static deps as link resource
-        for (const staticDep of bootstrapModuleGraph.graphs[0].static) {
-            const uri = bootstrapModuleGraph.uriMap[staticDep];
-            // AMD ADD static module dep uri addressability
-            imports[staticDep] = uri;
-            // ADD bootstrap module static deps to requiredAmdModules if services, otherwise preloadModules
-            if (services && services.length) {
-                requiredAmdModules.push(staticDep);
+        // PRELOAD configured preloadModules as preloaded script resources
+        if (isBundler(defRegistry)) {
+            for (const specifier of preloadModules) {
+                // eslint-disable-next-line no-await-in-loop
+                await getPreloadModulesMeta(specifier, viewPreloads, bundleConfig, moduleRegistry, defRegistry, runtimeEnvironment, runtimeParams);
             }
         }
-        // AMD Add import mappings for known dynamic imports
-        for (const dynamicDep of bootstrapModuleGraph.graphs[0].dynamicRefs) {
-            const uri = bootstrapModuleGraph.uriMap[dynamicDep];
-            if (uri) {
-                imports[dynamicDep] = uri;
+        if (isAMD) {
+            // ADD bootstrap module as required
+            requiredAmdModules.push(versionedSpecifier);
+            // AMD ADD bootstrap module uri addressability
+            imports[versionedSpecifier] = uri;
+            // PRELOAD bootstrap module static deps as link resource
+            for (const staticDep of bootstrapModuleGraph.graphs[0].static) {
+                const uri = bootstrapModuleGraph.uriMap[staticDep];
+                // AMD ADD static module dep uri addressability
+                imports[staticDep] = uri;
+                // ADD bootstrap module static deps to requiredAmdModules if services, otherwise preloadModules
+                if (services && services.length) {
+                    requiredAmdModules.push(staticDep);
+                }
             }
-            else {
-                logger.warn('Skipping unknown dynamic import ' + dynamicDep);
+            // AMD Add import mappings for known dynamic imports
+            for (const dynamicDep of bootstrapModuleGraph.graphs[0].dynamicRefs) {
+                const uri = bootstrapModuleGraph.uriMap[dynamicDep];
+                if (uri) {
+                    imports[dynamicDep] = uri;
+                }
+                else {
+                    logger.warn('Skipping unknown dynamic import ' + dynamicDep);
+                }
             }
         }
     }
     // ------- View related custom element moduleResources
-    const customElementsRecords = [];
-    const flattenedElements = flattenCustomElements(customElements, isSSR);
     await Promise.all(flattenedElements.map(async ({ tagName: element, props }) => {
         const graph = await getModuleGraphs(kebabCaseToModuleSpecifier(element), { includeUris: true, includeLinkedDefinitions: true, depth }, moduleRegistry, defRegistry, runtimeEnvironment, runtimeParams ? runtimeParams : {}, visitedCache);
         // add to the viewRecord
         customElementsRecords.push({ elementName: element, flatGraph: graph });
-        // PRELOAD the custom element module as a link resource
-        const specifier = graph.graphs[0].specifier;
-        const uri = graph.uriMap[specifier];
-        preloadModulesMeta.set(specifier, uri);
-        // PRELOAD custom element static deps as link resources when bundling is ON
-        if (bundle) {
-            for (const depSpecifier of graph.graphs[0].static) {
-                if (!isExternal(depSpecifier)) {
-                    const uri = graph.uriMap[depSpecifier];
-                    preloadModulesMeta.set(depSpecifier, uri);
+        // Only process custom elements that are to be hydrated or are CSR-only islands
+        if (!isSSR || getHydrateDirective(props)) {
+            // PRELOAD the custom element module as a link resource
+            const specifier = graph.graphs[0].specifier;
+            const uri = graph.uriMap[specifier];
+            setPreloadModulesMeta(specifier, uri, groups, viewPreloads);
+            // PRELOAD custom element static deps as link resources when bundling is ON
+            if (bundle) {
+                for (const depSpecifier of graph.graphs[0].static) {
+                    if (!isExternal(depSpecifier)) {
+                        const uri = graph.uriMap[depSpecifier];
+                        setPreloadModulesMeta(depSpecifier, uri, groups, viewPreloads);
+                    }
                 }
             }
-        }
-        // ADD register custom elements as a uri addressable rootComponents
-        rootComponents.push(specifier);
-        imports[specifier] = uri;
-        if (isAMD) {
-            for (const staticDep of graph.graphs[0].static) {
-                const uri = graph.uriMap[staticDep];
-                // AMD ADD static module dep uri addressability
-                imports[staticDep] = uri;
-            }
-            // AMD ADD dynamic imports module dep uri addressability
-            for (const dynamicDep of graph.graphs[0].dynamicRefs) {
-                const uri = graph.uriMap[dynamicDep];
-                imports[dynamicDep] = uri;
+            // ADD register custom elements as a uri addressable rootComponents
+            rootComponents.push(specifier);
+            imports[specifier] = uri;
+            if (isAMD) {
+                for (const staticDep of graph.graphs[0].static) {
+                    const uri = graph.uriMap[staticDep];
+                    // AMD ADD static module dep uri addressability
+                    imports[staticDep] = uri;
+                }
+                // AMD ADD dynamic imports module dep uri addressability
+                for (const dynamicDep of graph.graphs[0].dynamicRefs) {
+                    const uri = graph.uriMap[dynamicDep];
+                    imports[dynamicDep] = uri;
+                }
             }
         }
     }));
-    // ADD configuration of the bootstrapModule
-    configResources.unshift(await getViewBootstrapConfigurationResource({
-        id: view.id,
-        url: viewParams?.page?.url,
-        configAsSrc: view.bootstrap?.configAsSrc || false,
-    }, {
-        appId: appIdentity.appName,
-        bootstrapModule: versionedSpecifier,
-        autoBoot: view.bootstrap?.autoBoot === false ? false : true,
-        importMappings: {
-            imports,
-            default: getModuleUriPrefix(runtimeEnvironment, runtimeParams),
-        },
-        rootComponents,
-        ...(isAMD && { requiredModules: requiredAmdModules }),
-        // in AMD we need to tell the loader what modules we are preloading
-        ...(isAMD && { preloadModules: Array.from(preloadModulesMeta.keys()) }),
-    }, runtimeEnvironment, runtimeParams));
+    if (viewContainsLiveElements) {
+        // ADD configuration of the bootstrapModule
+        configResources.unshift(getViewBootstrapConfigurationResource({
+            id: view.id,
+            url: viewParams?.page?.url,
+            configAsSrc: view.bootstrap?.configAsSrc || false,
+        }, {
+            appId: appIdentity.appName,
+            bootstrapModule: versionedSpecifier,
+            autoBoot: view.bootstrap?.autoBoot === false ? false : true,
+            importMappings: {
+                imports,
+                default: getModuleUriPrefix(runtimeEnvironment, runtimeParams),
+            },
+            rootComponents,
+            ...(isAMD && { requiredModules: requiredAmdModules }),
+            // in AMD we need to tell the loader what modules we are preloading
+            ...(isAMD && { preloadModules: viewPreloads.specifiers }),
+        }, runtimeEnvironment, runtimeParams));
+    }
     if (!isAMD && hmrEnabled) {
-        configResources.unshift(await getViewHmrConfigurationResource(view, viewMetadata));
+        configResources.unshift(getViewHmrConfigurationResource(view, viewMetadata));
     }
+    const dedupedUris = [...new Set(viewPreloads.uris)];
     // PRELOAD script resources for preload module URIs after the bootstrap module
-    for (const [, preloadUri] of preloadModulesMeta) {
+    for (const preloadUri of dedupedUris) {
         moduleResources.push(getModuleResourceByUri(preloadUri, runtimeEnvironment, { isPreload: true, isSSR }));
     }
     // generate html partial
@@ -206,11 +228,7 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
         viewRecord: {
             resources: requiredResources,
             customElements: customElementsRecords,
-            bootstrapModule: {
-                specifier: bootstrapModuleGraph.graphs[0].specifier,
-                flatGraph: bootstrapModuleGraph,
-                resources: configResources,
-            },
+            bootstrapModule: bootstrapModuleRef,
         },
     };
 }

package/build/es/linkers/preload-utils.d.ts

@@ -0,0 +1,17 @@
+import { RuntimeEnvironment, RuntimeParams, BundleGroups, BundleConfig, ModuleBundler, ModuleRegistry } from '@lwrjs/types';
+export declare type ViewPreloads = {
+    groups: Map<string, boolean>;
+    uris: string[];
+    specifiers: string[];
+};
+/**
+ * keeps track of preloadModules metadata
+ */
+export declare function setPreloadModulesMeta(specifier: string, uri: string, groups: BundleGroups, preloads: ViewPreloads): void;
+/**
+ * Recursively gets preloadModules metadata starting with a specifer
+ * Note: don't call me unless you got bundles
+ */
+export declare function getPreloadModulesMeta(specifier: string, // unversioned specifier
+viewPreloads: ViewPreloads, bundleConfig: BundleConfig, moduleRegistry: ModuleRegistry, defRegistry: ModuleBundler, runtimeEnvironment: RuntimeEnvironment, runtimeParams?: RuntimeParams, pending?: Map<string, boolean>): Promise<void>;
+//# sourceMappingURL=preload-utils.d.ts.map