@lwrjs/view-registry 0.9.0-alpha.26 → 0.9.0-alpha.28

package/build/cjs/index.cjs

@@ -293,7 +293,8 @@ var LwrViewRegistry = class {
         moduleBundler,
         resourceRegistry,
         runtimeEnvironment,
-        runtimeParams
+        runtimeParams,
+        bundleConfig: this.globalConfig.bundleConfig
       });
       return {
         renderedView: linkedView,

package/build/cjs/linkers/legacy_view_bootstrap.cjs

@@ -37,9 +37,20 @@ async function getHtmlResources(view, viewParams, resourceContext) {
     moduleRegistry,
     moduleBundler,
     resourceRegistry,
-    viewMetadata
+    viewMetadata,
+    bundleConfig: {external = {}}
   } = resourceContext;
-  const {id: appName, bootstrap: {services, module: bootstrapModule} = {services: []}} = view;
+  const isExternal = function(rawSpecifier) {
+    const {specifier} = (0, import_shared_utils.explodeSpecifier)(rawSpecifier);
+    return Object.keys(external).some((e) => specifier === e);
+  };
+  const {
+    id: appName,
+    bootstrap: {services, module: bootstrapModule, preloadModules = []} = {
+      services: [],
+      preloadModules: []
+    }
+  } = view;
   const {lwrVersion, format, hmrEnabled, bundle, debug, minify} = runtimeEnvironment;
   const {customElements} = viewMetadata;
   const version = lwrVersion;
@@ -50,6 +61,7 @@ async function getHtmlResources(view, viewParams, resourceContext) {
     resourceType: import_identity.AppResourceEnum.MODULE
   };
   const bootstrapSpecifier = bootstrapModule || (0, import_identity.getAppSpecifier)(appIdentity);
+  const preloadModuleUris = new Set();
   const moduleResources = [];
   const requiredResources = [];
   const configResources = [];
@@ -60,7 +72,7 @@ async function getHtmlResources(view, viewParams, resourceContext) {
   const preloadAmdModules = [];
   const isSSR = view.bootstrap?.ssr;
   if (isAMD) {
-    const shimBundle = !bundle ? "lwr-loader-shim-legacy.js" : debug || minify === false ? "lwr-loader-shim-legacy.bundle.js" : "lwr-loader-shim-legacy.bundle.min.js";
+    const shimBundle = debug || minify === false ? "lwr-loader-shim-legacy.bundle.js" : "lwr-loader-shim-legacy.bundle.min.js";
     const def = await resourceRegistry.getResource({specifier: shimBundle, version}, runtimeEnvironment, runtimeParams);
     if (!def) {
       throw Error("Failed to find definition of resource: " + shimBundle);
@@ -71,21 +83,33 @@ async function getHtmlResources(view, viewParams, resourceContext) {
       throw Error("Failed to find definition of resource: lwr-error-shim.js");
     }
     requiredResources.push(errorShimDef);
-    if (!bundle) {
-      requiredResources.push(await (0, import_utils.getModuleResource)({
-        specifier: "lwr/loaderLegacy",
-        version
-      }, runtimeEnvironment, {
-        isPreload: false,
-        isSSR
-      }, moduleRegistry, runtimeParams));
-    }
   }
   const depth = isAMD ? {static: import_shared_utils.GraphDepth.ALL, dynamic: 1} : {static: import_shared_utils.GraphDepth.NONE, dynamic: 0};
   const bootstrapModuleGraph = await (0, import_shared_utils.getModuleGraphs)(bootstrapSpecifier, {includeUris: true, includeLinkedDefinitions: true, depth}, moduleRegistry, bundle ? moduleBundler : moduleRegistry, 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)) {
+      preloadModuleUris.add(bootstrapModuleGraph.uriMap[depSpecifier]);
+      preloadAmdModules.push(depSpecifier);
+    }
+  }
+  for (let i = 0; i < preloadModules.length; i++) {
+    const specifier = preloadModules[i];
+    if (isExternal(specifier)) {
+      import_shared_utils.logger.warn(`"${specifier}" is configured in both bundleConfig.externals and bootstrap.preloadModules. We are treating it as external.`);
+    } else {
+      const versionedModuleId = await (0, import_shared_utils.getVersionedModuleId)(specifier, moduleRegistry);
+      const versionedModuleSpecifier = (0, import_shared_utils.getSpecifier)({
+        specifier,
+        version: (0, import_shared_utils.normalizeVersionToUri)(versionedModuleId.version)
+      });
+      const uri2 = bootstrapModuleGraph.uriMap[versionedModuleSpecifier] || await moduleRegistry.resolveModuleUri(versionedModuleId, runtimeEnvironment, runtimeParams);
+      preloadModuleUris.add(uri2);
+      preloadAmdModules.push(versionedModuleSpecifier);
+    }
+  }
   if (isAMD) {
     requiredAmdModules.push(versionedSpecifier);
     imports[versionedSpecifier] = uri;
@@ -93,7 +117,6 @@ async function getHtmlResources(view, viewParams, resourceContext) {
       const uri2 = bootstrapModuleGraph.uriMap[staticDep];
       imports[staticDep] = uri2;
       if (services && services.length) {
-        moduleResources.push((0, import_utils.getModuleResourceByUri)(uri2, runtimeEnvironment, {isPreload: true, isSSR}));
         requiredAmdModules.push(staticDep);
       }
     }
@@ -109,11 +132,19 @@ async function getHtmlResources(view, viewParams, resourceContext) {
   const customElementsRecords = [];
   const flattenedElements = (0, import_utils2.flattenCustomElements)(customElements, isSSR);
   await Promise.all(flattenedElements.map(async ({tagName: element, props}) => {
-    const graph = await (0, import_shared_utils.getModuleGraphs)((0, import_shared_utils.kebabCaseToModuleSpecifer)(element), {includeUris: true, includeLinkedDefinitions: true, depth}, moduleRegistry, bundle ? moduleBundler : moduleRegistry, runtimeEnvironment, runtimeParams ? runtimeParams : {}, visitedCache);
+    const graph = await (0, import_shared_utils.getModuleGraphs)((0, import_shared_utils.kebabCaseToModuleSpecifier)(element), {includeUris: true, includeLinkedDefinitions: true, depth}, moduleRegistry, bundle ? moduleBundler : moduleRegistry, runtimeEnvironment, runtimeParams ? runtimeParams : {}, visitedCache);
     customElementsRecords.push({elementName: element, flatGraph: graph});
     const specifier = graph.graphs[0].specifier;
     const uri2 = graph.uriMap[specifier];
     moduleResources.push((0, import_utils.getModuleResourceByUri)(uri2, runtimeEnvironment, {isPreload: true, isSSR}));
+    if (bundle) {
+      for (const depSpecifier of graph.graphs[0].static) {
+        if (!isExternal(depSpecifier)) {
+          preloadModuleUris.add(graph.uriMap[depSpecifier]);
+          preloadAmdModules.push(depSpecifier);
+        }
+      }
+    }
     rootComponents.push(specifier);
     imports[specifier] = uri2;
     if (isAMD) {
@@ -128,6 +159,7 @@ async function getHtmlResources(view, viewParams, resourceContext) {
       }
     }
   }));
+  const dedupedPreloadAmdModules = [...new Set(preloadAmdModules)];
   configResources.unshift(await (0, import_utils2.getViewBootstrapConfigurationResource)({
     id: view.id,
     url: viewParams?.page?.url,
@@ -142,11 +174,14 @@ async function getHtmlResources(view, viewParams, resourceContext) {
     },
     rootComponents,
     ...isAMD && {requiredModules: requiredAmdModules},
-    ...isAMD && {preloadModules: preloadAmdModules}
+    ...isAMD && {preloadModules: dedupedPreloadAmdModules}
   }, runtimeEnvironment, runtimeParams));
   if (!isAMD && hmrEnabled) {
     configResources.unshift(await (0, import_utils2.getViewHmrConfigurationResource)(view, viewMetadata));
   }
+  for (const preloadUri of preloadModuleUris) {
+    moduleResources.unshift((0, import_utils.getModuleResourceByUri)(preloadUri, runtimeEnvironment, {isPreload: true, isSSR}));
+  }
   const htmlResources = await Promise.all([...configResources, ...requiredResources, ...moduleResources].map(import_utils.generateHtmlTag));
   return {
     partial: htmlResources.join("\n"),

package/build/cjs/linkers/view_bootstrap.cjs

@@ -37,9 +37,20 @@ async function getHtmlResources(view, viewParams, resourceContext) {
     moduleRegistry,
     moduleBundler,
     resourceRegistry,
-    viewMetadata
+    viewMetadata,
+    bundleConfig: {external = {}}
   } = resourceContext;
-  const {id: appName, bootstrap: {services, module: bootstrapModule} = {services: []}} = view;
+  const isExternal = function(rawSpecifier) {
+    const {specifier} = (0, import_shared_utils.explodeSpecifier)(rawSpecifier);
+    return Object.keys(external).some((e) => specifier === e);
+  };
+  const {
+    id: appName,
+    bootstrap: {services, module: bootstrapModule, preloadModules = []} = {
+      services: [],
+      preloadModules: []
+    }
+  } = view;
   const {lwrVersion, format, hmrEnabled, bundle, debug, minify} = runtimeEnvironment;
   const {customElements} = viewMetadata;
   const defRegistry = bundle ? moduleBundler : moduleRegistry;
@@ -51,6 +62,7 @@ async function getHtmlResources(view, viewParams, resourceContext) {
     resourceType: import_identity.AppResourceEnum.MODULE
   };
   const bootstrapSpecifier = bootstrapModule || (0, import_identity.getAppSpecifier)(appIdentity);
+  const preloadModuleUris = new Set();
   const moduleResources = [];
   const requiredResources = [];
   const configResources = [];
@@ -61,7 +73,7 @@ async function getHtmlResources(view, viewParams, resourceContext) {
   const preloadAmdModules = [];
   const isSSR = view.bootstrap?.ssr;
   if (isAMD) {
-    const shimBundle = !bundle ? "lwr-loader-shim.js" : debug || minify === false ? "lwr-loader-shim.bundle.js" : "lwr-loader-shim.bundle.min.js";
+    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);
@@ -72,20 +84,33 @@ async function getHtmlResources(view, viewParams, resourceContext) {
       throw Error("Failed to find definition of resource: lwr-error-shim.js");
     }
     requiredResources.push(errorShimDef);
-    if (!bundle) {
-      requiredResources.push(await (0, import_utils.getModuleResource)({
-        specifier: "lwr/loader",
-        version
-      }, runtimeEnvironment, {
-        isSSR
-      }, moduleRegistry, runtimeParams));
-    }
   }
   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)) {
+      preloadModuleUris.add(bootstrapModuleGraph.uriMap[depSpecifier]);
+      preloadAmdModules.push(depSpecifier);
+    }
+  }
+  for (let i = 0; i < preloadModules.length; i++) {
+    const specifier = preloadModules[i];
+    if (isExternal(specifier)) {
+      import_shared_utils.logger.warn(`"${specifier}" is configured in both bundleConfig.externals and bootstrap.preloadModules. We are treating it as external.`);
+    } else {
+      const versionedModuleId = await (0, import_shared_utils.getVersionedModuleId)(specifier, moduleRegistry);
+      const versionedModuleSpecifier = (0, import_shared_utils.getSpecifier)({
+        specifier,
+        version: (0, import_shared_utils.normalizeVersionToUri)(versionedModuleId.version)
+      });
+      const uri2 = bootstrapModuleGraph.uriMap[versionedModuleSpecifier] || await moduleRegistry.resolveModuleUri(versionedModuleId, runtimeEnvironment, runtimeParams);
+      preloadModuleUris.add(uri2);
+      preloadAmdModules.push(versionedModuleSpecifier);
+    }
+  }
   if (isAMD) {
     requiredAmdModules.push(versionedSpecifier);
     imports[versionedSpecifier] = uri;
@@ -93,7 +118,6 @@ async function getHtmlResources(view, viewParams, resourceContext) {
       const uri2 = bootstrapModuleGraph.uriMap[staticDep];
       imports[staticDep] = uri2;
       if (services && services.length) {
-        moduleResources.push((0, import_utils.getModuleResourceByUri)(uri2, runtimeEnvironment, {isPreload: true, isSSR}));
         requiredAmdModules.push(staticDep);
       }
     }
@@ -110,11 +134,19 @@ async function getHtmlResources(view, viewParams, resourceContext) {
   const customElementsRecords = [];
   const flattenedElements = (0, import_utils2.flattenCustomElements)(customElements, isSSR);
   for (const {tagName: element} of flattenedElements) {
-    const graph = await (0, import_shared_utils.getModuleGraphs)((0, import_shared_utils.kebabCaseToModuleSpecifer)(element), {includeUris: true, includeLinkedDefinitions: true, depth}, moduleRegistry, defRegistry, runtimeEnvironment, runtimeParams ? runtimeParams : {}, visitedCache);
+    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];
     moduleResources.push((0, import_utils.getModuleResourceByUri)(uri2, runtimeEnvironment, {isPreload: true, isSSR}));
+    if (bundle) {
+      for (const depSpecifier of graph.graphs[0].static) {
+        if (!isExternal(depSpecifier)) {
+          preloadModuleUris.add(graph.uriMap[depSpecifier]);
+          preloadAmdModules.push(depSpecifier);
+        }
+      }
+    }
     rootComponents.push(specifier);
     imports[specifier] = uri2;
     if (isAMD) {
@@ -130,6 +162,7 @@ async function getHtmlResources(view, viewParams, resourceContext) {
     }
     importMetadata = await (0, import_shared_utils.toImportMetadata)(graph, importMetadata, moduleRegistry, runtimeEnvironment, runtimeParams);
   }
+  const dedupedPreloadAmdModules = [...new Set(preloadAmdModules)];
   configResources.unshift(await (0, import_utils2.getViewBootstrapConfigurationResource)({
     id: view.id,
     url: viewParams?.page?.url,
@@ -142,11 +175,14 @@ async function getHtmlResources(view, viewParams, resourceContext) {
     index: importMetadata?.index,
     rootComponents,
     ...isAMD && {requiredModules: requiredAmdModules},
-    ...isAMD && {preloadModules: preloadAmdModules}
+    ...isAMD && {preloadModules: dedupedPreloadAmdModules}
   }, runtimeEnvironment, runtimeParams));
   if (!isAMD && hmrEnabled) {
     configResources.unshift(await (0, import_utils2.getViewHmrConfigurationResource)(view, viewMetadata));
   }
+  for (const preloadUri of preloadModuleUris) {
+    moduleResources.unshift((0, import_utils.getModuleResourceByUri)(preloadUri, runtimeEnvironment, {isPreload: true, isSSR}));
+  }
   const htmlResources = await Promise.all([...configResources, ...requiredResources, ...moduleResources].map(import_utils.generateHtmlTag));
   const mapping = (0, import_shared_utils.getMappingUriPrefix)(runtimeEnvironment, runtimeParams);
   const endpoints = {

package/build/es/index.js

@@ -316,6 +316,7 @@ export class LwrViewRegistry {
                 resourceRegistry,
                 runtimeEnvironment,
                 runtimeParams,
+                bundleConfig: this.globalConfig.bundleConfig,
             });
             return {
                 // ...viewDefinition,

package/build/es/linkers/legacy_view_bootstrap.d.ts

@@ -1,4 +1,4 @@
-import { ModuleRegistry, RenderedViewMetadata, RenderedViewRecord, ResourceRegistry, RuntimeEnvironment, RuntimeParams, View, ViewParams, ModuleBundler } from '@lwrjs/types';
+import { BundleConfig, ModuleRegistry, RenderedViewMetadata, RenderedViewRecord, ResourceRegistry, RuntimeEnvironment, RuntimeParams, View, ViewParams, ModuleBundler } from '@lwrjs/types';
 export interface LwrResourcesLinkedContext extends ResourceContext {
     lwrResourcesId: string;
 }
@@ -9,6 +9,7 @@ interface ResourceContext {
     moduleRegistry: ModuleRegistry;
     moduleBundler: ModuleBundler;
     resourceRegistry: ResourceRegistry;
+    bundleConfig: BundleConfig;
 }
 export declare function getHtmlResources(view: View, viewParams: ViewParams, resourceContext: ResourceContext): Promise<{
     partial: string;

package/build/es/linkers/legacy_view_bootstrap.js

@@ -1,10 +1,17 @@
-import { kebabCaseToModuleSpecifer, getModuleGraphs, GraphDepth, getModuleUriPrefix, logger, } from '@lwrjs/shared-utils';
+import { kebabCaseToModuleSpecifier, getModuleGraphs, GraphDepth, getModuleUriPrefix, logger, getVersionedModuleId, explodeSpecifier, getSpecifier, normalizeVersionToUri, } from '@lwrjs/shared-utils';
 import { AppResourceEnum, getAppSpecifier } from '@lwrjs/app-service/identity';
-import { generateHtmlTag, getModuleResource, getModuleResourceByUri } from '../utils.js';
+import { generateHtmlTag, getModuleResourceByUri } from '../utils.js';
 import { flattenCustomElements, getViewBootstrapConfigurationResource, getViewHmrConfigurationResource, } from './utils.js';
 export async function getHtmlResources(view, viewParams, resourceContext) {
-    const { runtimeEnvironment, runtimeParams, moduleRegistry, moduleBundler, resourceRegistry, viewMetadata, } = resourceContext;
-    const { id: appName, bootstrap: { services, module: bootstrapModule } = { services: [] } } = view;
+    const { runtimeEnvironment, runtimeParams, moduleRegistry, moduleBundler, resourceRegistry, viewMetadata, bundleConfig: { external = {} }, } = resourceContext;
+    const isExternal = function (rawSpecifier) {
+        const { specifier } = explodeSpecifier(rawSpecifier);
+        return Object.keys(external).some((e) => specifier === e);
+    };
+    const { id: appName, bootstrap: { services, module: bootstrapModule, preloadModules = [] } = {
+        services: [],
+        preloadModules: [],
+    }, } = view;
     const { lwrVersion, format, hmrEnabled, bundle, debug, minify } = runtimeEnvironment;
     const { customElements } = viewMetadata;
     const version = lwrVersion;
@@ -21,6 +28,7 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
     /*
         Internal module and module dependency related resources used by the view to render view related components.
      */
+    const preloadModuleUris = new Set();
     const moduleResources = [];
     /*
         External resources that the view depends. These resources include ones that an ViewDefinition client are required to load
@@ -39,18 +47,17 @@ 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 loaded in the view
+    // Collection of modules that will be preloaded. For AMD, it will be part of
+    // the preloadModules client bootstrap config
     const preloadAmdModules = [];
     // 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 = !bundle
-            ? 'lwr-loader-shim-legacy.js'
-            : debug || minify === false
-                ? 'lwr-loader-shim-legacy.bundle.js'
-                : 'lwr-loader-shim-legacy.bundle.min.js';
+        const shimBundle = debug || minify === false
+            ? 'lwr-loader-shim-legacy.bundle.js'
+            : 'lwr-loader-shim-legacy.bundle.min.js';
         const def = (await resourceRegistry.getResource({ specifier: shimBundle, version }, runtimeEnvironment, runtimeParams));
         if (!def) {
             throw Error('Failed to find definition of resource: ' + shimBundle);
@@ -62,21 +69,10 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
             throw Error('Failed to find definition of resource: lwr-error-shim.js');
         }
         requiredResources.push(errorShimDef);
-        // Add loader, if not already bundled with the shim
-        if (!bundle) {
-            // needed because we're resolving against fully-linked modules
-            requiredResources.push(await getModuleResource({
-                specifier: 'lwr/loaderLegacy',
-                version,
-            }, runtimeEnvironment, {
-                isPreload: false,
-                isSSR,
-            }, moduleRegistry, 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 unecessary HTTP 302's during initial application module fetching.
+    // 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 }
@@ -86,6 +82,35 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
     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)) {
+            preloadModuleUris.add(bootstrapModuleGraph.uriMap[depSpecifier]);
+            // in AMD, we also need to tell the loader it's being preloaded
+            preloadAmdModules.push(depSpecifier);
+        }
+    }
+    // PRELOAD configured preloadModules as preloaded script resources
+    for (let i = 0; i < preloadModules.length; i++) {
+        const specifier = preloadModules[i];
+        if (isExternal(specifier)) {
+            logger.warn(`"${specifier}" is configured in both bundleConfig.externals and bootstrap.preloadModules. We are treating it as external.`);
+        }
+        else {
+            // eslint-disable-next-line no-await-in-loop
+            const versionedModuleId = await getVersionedModuleId(specifier, moduleRegistry);
+            const versionedModuleSpecifier = getSpecifier({
+                specifier,
+                version: normalizeVersionToUri(versionedModuleId.version),
+            });
+            const uri = bootstrapModuleGraph.uriMap[versionedModuleSpecifier] ||
+                // eslint-disable-next-line no-await-in-loop
+                (await moduleRegistry.resolveModuleUri(versionedModuleId, runtimeEnvironment, runtimeParams));
+            preloadModuleUris.add(uri);
+            // in AMD, we also need to tell the loader it's being preloaded
+            preloadAmdModules.push(versionedModuleSpecifier);
+        }
+    }
     if (isAMD) {
         // ADD bootstrap module as required
         requiredAmdModules.push(versionedSpecifier);
@@ -98,8 +123,6 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
             imports[staticDep] = uri;
             // ADD bootstrap module static deps to requiredAmdModules if services, otherwise preloadModules
             if (services && services.length) {
-                // get the graphs for the bs static deps
-                moduleResources.push(getModuleResourceByUri(uri, runtimeEnvironment, { isPreload: true, isSSR }));
                 requiredAmdModules.push(staticDep);
             }
         }
@@ -118,13 +141,23 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
     const customElementsRecords = [];
     const flattenedElements = flattenCustomElements(customElements, isSSR);
     await Promise.all(flattenedElements.map(async ({ tagName: element, props }) => {
-        const graph = await getModuleGraphs(kebabCaseToModuleSpecifer(element), { includeUris: true, includeLinkedDefinitions: true, depth }, moduleRegistry, bundle ? moduleBundler : moduleRegistry, runtimeEnvironment, runtimeParams ? runtimeParams : {}, visitedCache);
+        const graph = await getModuleGraphs(kebabCaseToModuleSpecifier(element), { includeUris: true, includeLinkedDefinitions: true, depth }, moduleRegistry, bundle ? moduleBundler : moduleRegistry, runtimeEnvironment, runtimeParams ? runtimeParams : {}, visitedCache);
         // add to the viewRecord
         customElementsRecords.push({ elementName: element, flatGraph: graph });
-        // PRELOAD custom element static deps as link resource
+        // PRELOAD the custom element module as a link resource
         const specifier = graph.graphs[0].specifier;
         const uri = graph.uriMap[specifier];
         moduleResources.push(getModuleResourceByUri(uri, runtimeEnvironment, { isPreload: true, isSSR }));
+        // 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)) {
+                    preloadModuleUris.add(graph.uriMap[depSpecifier]);
+                    // in AMD, we also need to tell the loader it's being preloaded
+                    preloadAmdModules.push(depSpecifier);
+                }
+            }
+        }
         // ADD register custom elements as a uri addressable rootComponents
         rootComponents.push(specifier);
         imports[specifier] = uri;
@@ -142,6 +175,7 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
             }
         }
     }));
+    const dedupedPreloadAmdModules = [...new Set(preloadAmdModules)];
     // ADD configuration of the bootstrapModule
     configResources.unshift(await getViewBootstrapConfigurationResource({
         id: view.id,
@@ -157,11 +191,15 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
         },
         rootComponents,
         ...(isAMD && { requiredModules: requiredAmdModules }),
-        ...(isAMD && { preloadModules: preloadAmdModules }),
+        ...(isAMD && { preloadModules: dedupedPreloadAmdModules }),
     }, runtimeEnvironment, runtimeParams));
     if (!isAMD && hmrEnabled) {
         configResources.unshift(await getViewHmrConfigurationResource(view, viewMetadata));
     }
+    // PRELOAD script resources for preload module URIs at the top (ie: bootstrap and root component static dependencies)
+    for (const preloadUri of preloadModuleUris) {
+        moduleResources.unshift(getModuleResourceByUri(preloadUri, runtimeEnvironment, { isPreload: true, isSSR }));
+    }
     // generate html partial
     const htmlResources = await Promise.all([...configResources, ...requiredResources, ...moduleResources].map(generateHtmlTag));
     return {

package/build/es/linkers/link-lwr-resources.d.ts

@@ -1,4 +1,4 @@
-import { ModuleRegistry, LinkedViewDefinition, RenderedViewMetadata, ResourceRegistry, RuntimeEnvironment, RuntimeParams, View, ModuleBundler, ViewParams } from '@lwrjs/types';
+import { ModuleRegistry, LinkedViewDefinition, RenderedViewMetadata, ResourceRegistry, RuntimeEnvironment, RuntimeParams, View, ModuleBundler, ViewParams, BundleConfig } from '@lwrjs/types';
 export interface LwrResourcesLinkedContext extends ResourceContext {
     lwrResourcesId: string;
 }
@@ -9,6 +9,7 @@ interface ResourceContext {
     moduleRegistry: ModuleRegistry;
     moduleBundler: ModuleBundler;
     resourceRegistry: ResourceRegistry;
+    bundleConfig: BundleConfig;
 }
 declare type LinkedResourcesViewDefinition = Pick<LinkedViewDefinition, 'renderedView' | 'viewRecord'>;
 export declare function linkLwrResources(source: string, view: View, viewParams: ViewParams, cxt: LwrResourcesLinkedContext): Promise<LinkedResourcesViewDefinition>;

package/build/es/linkers/view_bootstrap.d.ts

@@ -1,4 +1,4 @@
-import { ModuleRegistry, RenderedViewMetadata, RenderedViewRecord, ResourceRegistry, RuntimeEnvironment, RuntimeParams, View, ModuleBundler, ViewParams } from '@lwrjs/types';
+import { BundleConfig, ModuleRegistry, RenderedViewMetadata, RenderedViewRecord, ResourceRegistry, RuntimeEnvironment, RuntimeParams, View, ModuleBundler, ViewParams } from '@lwrjs/types';
 export interface LwrResourcesLinkedContext extends ResourceContext {
     lwrResourcesId: string;
 }
@@ -9,6 +9,7 @@ interface ResourceContext {
     moduleRegistry: ModuleRegistry;
     moduleBundler: ModuleBundler;
     resourceRegistry: ResourceRegistry;
+    bundleConfig: BundleConfig;
 }
 export declare function getHtmlResources(view: View, viewParams: ViewParams, resourceContext: ResourceContext): Promise<{
     partial: string;

package/build/es/linkers/view_bootstrap.js

@@ -1,10 +1,17 @@
-import { kebabCaseToModuleSpecifer, toImportMetadata, getModuleGraphs, getMappingUriPrefix, GraphDepth, logger, } from '@lwrjs/shared-utils';
+import { kebabCaseToModuleSpecifier, toImportMetadata, getModuleGraphs, getMappingUriPrefix, GraphDepth, logger, getVersionedModuleId, explodeSpecifier, getSpecifier, normalizeVersionToUri, } from '@lwrjs/shared-utils';
 import { AppResourceEnum, getAppSpecifier } from '@lwrjs/app-service/identity';
-import { generateHtmlTag, getModuleResource, getModuleResourceByUri } from '../utils.js';
+import { generateHtmlTag, getModuleResourceByUri } from '../utils.js';
 import { flattenCustomElements, getViewBootstrapConfigurationResource, getViewHmrConfigurationResource, } from './utils.js';
 export async function getHtmlResources(view, viewParams, resourceContext) {
-    const { runtimeEnvironment, runtimeParams, moduleRegistry, moduleBundler, resourceRegistry, viewMetadata, } = resourceContext;
-    const { id: appName, bootstrap: { services, module: bootstrapModule } = { services: [] } } = view;
+    const { runtimeEnvironment, runtimeParams, moduleRegistry, moduleBundler, resourceRegistry, viewMetadata, bundleConfig: { external = {} }, } = resourceContext;
+    const isExternal = function (rawSpecifier) {
+        const { specifier } = explodeSpecifier(rawSpecifier);
+        return Object.keys(external).some((e) => specifier === e);
+    };
+    const { id: appName, bootstrap: { services, module: bootstrapModule, preloadModules = [] } = {
+        services: [],
+        preloadModules: [],
+    }, } = view;
     const { lwrVersion, format, hmrEnabled, bundle, debug, minify } = runtimeEnvironment;
     const { customElements } = viewMetadata;
     const defRegistry = bundle ? moduleBundler : moduleRegistry;
@@ -22,6 +29,7 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
     /*
         Internal module and module dependency related resources used by the view to render view related components.
      */
+    const preloadModuleUris = new Set();
     const moduleResources = [];
     /*
         External resources that the view depends. These resources include ones that an ViewDefinition client are required to load
@@ -40,18 +48,15 @@ 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 loaded in the view
+    // Collection of modules that will be preloaded. For AMD, it will be part of
+    // the preloadModules client bootstrap config
     const preloadAmdModules = [];
     // Determine if server side rendering view modules
     const isSSR = view.bootstrap?.ssr;
     // ------ AMD Required module resources
     if (isAMD) {
         // Keep shim format in sync with legacy_view_bootstrap.ts
-        const shimBundle = !bundle
-            ? 'lwr-loader-shim.js'
-            : debug || minify === false
-                ? 'lwr-loader-shim.bundle.js'
-                : 'lwr-loader-shim.bundle.min.js';
+        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);
@@ -63,16 +68,6 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
             throw Error('Failed to find definition of resource: lwr-error-shim.js');
         }
         requiredResources.push(errorShimDef);
-        // Add loader, if not already bundled with the shim
-        if (!bundle) {
-            // needed because we're resolving against fully-linked modules
-            requiredResources.push(await getModuleResource({
-                specifier: 'lwr/loader',
-                version,
-            }, runtimeEnvironment, {
-                isSSR,
-            }, moduleRegistry, runtimeParams));
-        }
     }
     // ------- Application Bootstrap module
     // Traversal of the Bootstrap Module Graph is done to get all the URLS for discoverable static dependencies.
@@ -85,6 +80,35 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
     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)) {
+            preloadModuleUris.add(bootstrapModuleGraph.uriMap[depSpecifier]);
+            // in AMD, we also need to tell the loader it's being preloaded
+            preloadAmdModules.push(depSpecifier);
+        }
+    }
+    // PRELOAD configured preloadModules as preloaded script resources
+    for (let i = 0; i < preloadModules.length; i++) {
+        const specifier = preloadModules[i];
+        if (isExternal(specifier)) {
+            logger.warn(`"${specifier}" is configured in both bundleConfig.externals and bootstrap.preloadModules. We are treating it as external.`);
+        }
+        else {
+            // eslint-disable-next-line no-await-in-loop
+            const versionedModuleId = await getVersionedModuleId(specifier, moduleRegistry);
+            const versionedModuleSpecifier = getSpecifier({
+                specifier,
+                version: normalizeVersionToUri(versionedModuleId.version),
+            });
+            const uri = bootstrapModuleGraph.uriMap[versionedModuleSpecifier] ||
+                // eslint-disable-next-line no-await-in-loop
+                (await moduleRegistry.resolveModuleUri(versionedModuleId, runtimeEnvironment, runtimeParams));
+            preloadModuleUris.add(uri);
+            // in AMD, we also need to tell the loader it's being preloaded
+            preloadAmdModules.push(versionedModuleSpecifier);
+        }
+    }
     if (isAMD) {
         // ADD bootstrap module as required
         requiredAmdModules.push(versionedSpecifier);
@@ -97,8 +121,6 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
             imports[staticDep] = uri;
             // ADD bootstrap module static deps to requiredAmdModules if services, otherwise preloadModules
             if (services && services.length) {
-                // get the graphs for the bs static deps
-                moduleResources.push(getModuleResourceByUri(uri, runtimeEnvironment, { isPreload: true, isSSR }));
                 requiredAmdModules.push(staticDep);
             }
         }
@@ -119,13 +141,23 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
     const flattenedElements = flattenCustomElements(customElements, isSSR);
     for (const { tagName: element } of flattenedElements) {
         // eslint-disable-next-line no-await-in-loop
-        const graph = await getModuleGraphs(kebabCaseToModuleSpecifer(element), { includeUris: true, includeLinkedDefinitions: true, depth }, moduleRegistry, defRegistry, runtimeEnvironment, runtimeParams ? runtimeParams : {}, visitedCache);
+        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 custom element static deps as link resource
+        // PRELOAD the custom element module as a link resource
         const specifier = graph.graphs[0].specifier;
         const uri = graph.uriMap[specifier];
         moduleResources.push(getModuleResourceByUri(uri, runtimeEnvironment, { isPreload: true, isSSR }));
+        // 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)) {
+                    preloadModuleUris.add(graph.uriMap[depSpecifier]);
+                    // in AMD, we also need to tell the loader it's being preloaded
+                    preloadAmdModules.push(depSpecifier);
+                }
+            }
+        }
         // ADD register custom elements as a uri addressable rootComponents
         rootComponents.push(specifier);
         imports[specifier] = uri;
@@ -145,6 +177,7 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
         // eslint-disable-next-line no-await-in-loop
         importMetadata = await toImportMetadata(graph, importMetadata, moduleRegistry, runtimeEnvironment, runtimeParams);
     }
+    const dedupedPreloadAmdModules = [...new Set(preloadAmdModules)];
     // ADD configuration of the bootstrapModule
     configResources.unshift(await getViewBootstrapConfigurationResource({
         id: view.id,
@@ -158,11 +191,15 @@ export async function getHtmlResources(view, viewParams, resourceContext) {
         index: importMetadata?.index,
         rootComponents,
         ...(isAMD && { requiredModules: requiredAmdModules }),
-        ...(isAMD && { preloadModules: preloadAmdModules }),
+        ...(isAMD && { preloadModules: dedupedPreloadAmdModules }),
     }, runtimeEnvironment, runtimeParams));
     if (!isAMD && hmrEnabled) {
         configResources.unshift(await getViewHmrConfigurationResource(view, viewMetadata));
     }
+    // PRELOAD script resources for preload module URIs at the top (ie: bootstrap and root component static dependencies)
+    for (const preloadUri of preloadModuleUris) {
+        moduleResources.unshift(getModuleResourceByUri(preloadUri, runtimeEnvironment, { isPreload: true, isSSR }));
+    }
     // generate html partial
     const htmlResources = await Promise.all([...configResources, ...requiredResources, ...moduleResources].map(generateHtmlTag));
     const mapping = getMappingUriPrefix(runtimeEnvironment, runtimeParams);

package/package.json

@@ -4,7 +4,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.9.0-alpha.26",
+    "version": "0.9.0-alpha.28",
     "homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
     "repository": {
         "type": "git",
@@ -30,15 +30,15 @@
         "build/**/*.d.ts"
     ],
     "dependencies": {
-        "@lwrjs/app-service": "0.9.0-alpha.26",
-        "@lwrjs/diagnostics": "0.9.0-alpha.26",
-        "@lwrjs/shared-utils": "0.9.0-alpha.26"
+        "@lwrjs/app-service": "0.9.0-alpha.28",
+        "@lwrjs/diagnostics": "0.9.0-alpha.28",
+        "@lwrjs/shared-utils": "0.9.0-alpha.28"
     },
     "devDependencies": {
-        "@lwrjs/types": "0.9.0-alpha.26"
+        "@lwrjs/types": "0.9.0-alpha.28"
     },
     "engines": {
         "node": ">=16.0.0 <20"
     },
-    "gitHead": "6da956eb29622d49423b0a6ee63300de1f3e121c"
+    "gitHead": "da7d0c58d2e34958a289a18f43c5998e85e72986"
 }