@lwrjs/loader 0.6.0-alpha.1 → 0.6.0-alpha.13

package/build/assets/prod/lwr-loader-shim.bundle.js

@@ -4,228 +4,307 @@
 * SPDX-License-Identifier: MIT
 * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
 */
-/* LWR Module Loader Shim v0.6.0-alpha.1 */
+/* LWR Module Loader Shim v0.6.0-alpha.13 */
 (function () {
-    'use strict';
+  'use strict';
 
-    function createLoader(name, definition, config, externalModules) {
-        if (!definition || typeof definition[2] !== 'function') {
-            throw new Error(`Expected loader with specifier "${name}" to be a module`);
-        }
-        // Create a Loader instance
-        const exports = {};
-        definition[2].call(null, exports);
-        const { Loader } = exports;
-        const loader = new Loader(config);
-        if (externalModules && externalModules.length) {
-            loader.registerExternalModules(externalModules);
-        }
-        // Define the loader module with public API: { define, load, services }
-        const exporter = (exports) => {
-            Object.assign(exports, {
-                define: loader.define.bind(loader),
-                load: loader.load.bind(loader),
-                services: loader.services,
-            });
-            return;
-        };
-        loader.define(name, ['exports'], exporter);
-        return loader;
-    }
+  // Bootstrap / shim
+  const BOOTSTRAP_PREFIX = 'lwr.bootstrap.';
+  const BOOTSTRAP_ERROR = `${BOOTSTRAP_PREFIX}error`;
 
-    const REQUIRED_MODULES_TIMEOUT = 300 * 1000;
+  var Phase;
 
-    // Check for errors with autoBoot and customInit
-    function validatePreInit(autoBoot, customInit) {
-        // If autoBoot === false, there must be a customInit hook
-        if (!autoBoot && !customInit) {
-            throw new Error('The customInit hook is required when autoBoot is false');
-        }
-        // If autoBoot === true, there must NOT be a customInit hook
-        if (autoBoot && customInit) {
-            throw new Error('The customInit hook must not be defined when autoBoot is true');
-        }
-    }
-    // Process the customInit hook
-    function customInit(config, initializeApp, define, onBootstrapError) {
-        // Validate config
-        const { autoBoot, customInit } = config;
-        validatePreInit(autoBoot, customInit);
-        // Set up arguments and call the customInit hook, if available
-        if (customInit) {
-            const lwr = {
-                initializeApp,
-                define,
-                onBootstrapError,
-            };
-            customInit(lwr, config);
-        }
-    }
+  (function (Phase) {
+    Phase[Phase["Start"] = 0] = "Start";
+    Phase[Phase["End"] = 1] = "End";
+  })(Phase || (Phase = {}));
 
-    /* global document */
-    /* eslint-disable lwr/no-unguarded-apis */
-    const hasSetTimeout = typeof setTimeout === 'function';
-    const hasConsole = typeof console !== 'undefined';
-    /* eslint-enable lwr/no-unguarded-apis */
-    class LoaderShim {
-        constructor(global) {
-            this.defineCache = {};
-            this.orderedDefs = [];
-            // Parse configuration
-            this.global = global;
-            this.config = global.LWR;
-            this.loaderModule = 'lwr/loader/v/0_6_0-alpha_1';
-            // Set up the temporary LWR.define function and customInit hook
-            const tempDefine = this.tempDefine.bind(this);
-            global.LWR.define = tempDefine;
-            this.bootReady = this.config.autoBoot;
-            // Start watchdog timer
-            if (hasSetTimeout) {
-                this.watchdogTimerId = this.startWatchdogTimer();
-            }
-            try {
-                customInit(Object.freeze(this.config), this.postCustomInit.bind(this), tempDefine, (e) => {
-                    this.errorHandler = e;
-                });
-            }
-            catch (e) {
-                this.enterErrorState(e);
-            }
-        }
-        // Return true if the app can be initialized
-        canInit() {
-            // Initialize the app if:
-            //  - bootReady: autoBoot is on OR customInit has finished
-            //  - all required modules are defined
-            const allDefined = this.config.requiredModules.every((m) => this.orderedDefs.includes(m));
-            return this.bootReady && allDefined;
-        }
-        /**
-         * Create a temporary LWR.define() function which captures all
-         * calls that occur BEFORE the full loader module is available
-         *
-         * Each call to LWR.define() is stored in 2 ways:
-         *      - in a map as [moduleName, arguments] pairs
-         *      - each moduleName is pushed onto an array, to preserve
-         *          the order in which the modules were defined
-         */
-        tempDefine(...args) {
-            // Cache the incoming module
-            const moduleName = args[0];
-            this.defineCache[moduleName] = args;
-            this.orderedDefs.push(moduleName);
-            if (this.canInit()) {
-                if (hasSetTimeout) {
-                    // requiredModules are defined, clear watchdog timer
-                    // eslint-disable-next-line lwr/no-unguarded-apis, no-undef
-                    clearTimeout(this.watchdogTimerId);
-                }
-                this.initApp();
-            }
-        }
-        // Called by the customInit hook via lwr.initializeApp()
-        postCustomInit() {
-            this.bootReady = true;
-            if (this.canInit()) {
-                this.initApp();
-            }
-        }
-        // Create the loader and initialize the application
-        initApp() {
-            try {
-                const loaderConfig = {
-                    endpoints: this.config.endpoints,
-                    baseUrl: this.config.baseUrl,
-                };
-                const loader = createLoader(this.loaderModule, this.defineCache[this.loaderModule], loaderConfig, this.config.preloadModules);
-                this.mountApp(loader);
-            }
-            catch (e) {
-                this.enterErrorState(e);
-            }
-        }
-        waitForDOMContentLoaded() {
-            // eslint-disable-next-line lwr/no-unguarded-apis
-            if (typeof document === undefined) {
-                return Promise.resolve();
-            }
-            // Resolve if document is already "ready" https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
-            // eslint-disable-next-line lwr/no-unguarded-apis
-            if (document.readyState === 'interactive' || document.readyState === 'complete') {
-                return Promise.resolve();
-            }
-            return new Promise((resolve) => {
-                // eslint-disable-next-line lwr/no-unguarded-apis
-                document.addEventListener('DOMContentLoaded', () => {
-                    resolve();
-                });
-            });
-        }
-        // Set up the application globals, import map, root custom element...
-        mountApp(loader) {
-            const { bootstrapModule, rootComponent, rootComponents, endpoints, imports, index } = this.config;
-            // Set global LWR.define to loader.define
-            this.global.LWR = Object.freeze({
-                define: loader.define.bind(loader),
-                rootComponent,
-                rootComponents,
-                endpoints,
-                imports: imports || {},
-                index: index || {},
-            });
-            // Redefine all modules in the temporary cache
-            this.orderedDefs.forEach((specifier) => {
-                if (specifier !== this.loaderModule) {
-                    loader.define(...this.defineCache[specifier]);
-                }
-            });
-            // by default, app initialization is gated on waiting for document to be parsed (via DOMContentLoaded)
-            const { disableInitDefer } = this.config;
-            // Load the import mappings and application bootstrap module
-            loader
-                .registerImportMappings({ imports, index }, [bootstrapModule, rootComponent])
-                .then(() => {
-                if (!disableInitDefer) {
-                    return this.waitForDOMContentLoaded();
-                }
-            })
-                .then(() => loader.load(bootstrapModule))
-                .catch((reason) => {
-                this.enterErrorState(new Error(`Application ${rootComponent} could not be loaded: ${reason}`));
-            });
-        }
-        // Trigger bootstrap error state, and call error handler if registered
-        enterErrorState(error) {
-            if (this.errorHandler) {
-                this.errorHandler(error);
-            }
-            else {
-                if (hasConsole) {
-                    // eslint-disable-next-line lwr/no-unguarded-apis, no-undef
-                    console.error(`An error occurred during LWR bootstrap. ${error.message}`, error.stack);
-                }
-            }
-        }
-        // eslint-disable-next-line no-undef, lwr/no-unguarded-apis
-        startWatchdogTimer() {
-            // eslint-disable-next-line lwr/no-unguarded-apis, no-undef
-            return setTimeout(() => {
-                this.enterErrorState(new Error('Failed to load required modules - timed out'));
-            }, REQUIRED_MODULES_TIMEOUT);
-        }
+  // Attach a custom dispatcher
+  let customDispatcher;
+  function attachDispatcher(dispatcher) {
+    customDispatcher = dispatcher;
+  } // Check if the Performance API is available
+  // e.g. JSDom (used in Jest) doesn't implement these
+
+  const perf = globalThis.performance;
+  const isPerfSupported = typeof perf !== 'undefined' && typeof perf.mark === 'function' && typeof perf.clearMarks === 'function' && typeof perf.measure === 'function' && typeof perf.clearMeasures === 'function'; // For marking request metrics
+  // Fallback to the Performance API if there is no custom dispatcher
+
+  function logOperationStart({
+    id,
+    specifier
+  }) {
+    if (customDispatcher) {
+      customDispatcher({
+        id,
+        phase: Phase.Start,
+        specifier
+      });
+    } else if (isPerfSupported) {
+      perf.mark(id + (specifier ? `.${specifier}` : ''));
     }
+  } // For measuring duration metrics
+  // Fallback to the Performance API if there is no custom dispatcher
+
+  /* istanbul ignore next */
 
-    // The loader module is ALWAYS required
-    const GLOBAL = globalThis;
-    GLOBAL.LWR.requiredModules = GLOBAL.LWR.requiredModules || [];
-    if (GLOBAL.LWR.requiredModules.indexOf('lwr/loader/v/0_6_0-alpha_1') < 0) {
-        GLOBAL.LWR.requiredModules.push('lwr/loader/v/0_6_0-alpha_1');
+  function logOperationEnd({
+    id,
+    specifier
+  }) {
+    if (customDispatcher) {
+      customDispatcher({
+        id,
+        phase: Phase.End,
+        specifier
+      });
+    } else if (isPerfSupported) {
+      const suffix = specifier ? `.${specifier}` : '';
+      const markName = id + suffix;
+      const measureName = `${id}.duration${suffix}`;
+      perf.measure(measureName, markName); // Clear the created mark and measure to avoid filling the performance entry buffer
+      // Even if they get deleted, existing PerformanceObservers preserve copies of the entries
+
+      perf.clearMarks(markName);
+      perf.clearMeasures(measureName);
     }
-    new LoaderShim(GLOBAL);
+  }
+
+  function createLoader(name, definition, config, externalModules) {
+      if (!definition || typeof definition[2] !== 'function') {
+          throw new Error(`Expected loader with specifier "${name}" to be a module`);
+      }
+      // Create a Loader instance
+      const exports = {};
+      definition[2].call(null, exports);
+      const { Loader } = exports;
+      const loader = new Loader(config);
+      if (externalModules && externalModules.length) {
+          loader.registerExternalModules(externalModules);
+      }
+      // Define the loader module with public API: { define, load, services }
+      const exporter = (exports) => {
+          Object.assign(exports, {
+              define: loader.define.bind(loader),
+              load: loader.load.bind(loader),
+              services: loader.services,
+          });
+      };
+      loader.define(name, ['exports'], exporter);
+      return loader;
+  }
+
+  const REQUIRED_MODULES_TIMEOUT = 300 * 1000;
+
+  // Check for errors with autoBoot and customInit
+  function validatePreInit(autoBoot, customInit) {
+      // If autoBoot === false, there must be a customInit hook
+      if (!autoBoot && !customInit) {
+          throw new Error('The customInit hook is required when autoBoot is false');
+      }
+      // If autoBoot === true, there must NOT be a customInit hook
+      if (autoBoot && customInit) {
+          throw new Error('The customInit hook must not be defined when autoBoot is true');
+      }
+  }
+  // Process the customInit hook
+  function customInit(config, initializeApp, define, onBootstrapError) {
+      // Validate config
+      const { autoBoot, customInit } = config;
+      validatePreInit(autoBoot, customInit);
+      // Set up arguments and call the customInit hook, if available
+      if (customInit) {
+          const lwr = {
+              initializeApp,
+              define,
+              onBootstrapError,
+              attachDispatcher,
+          };
+          customInit(lwr, config);
+      }
+  }
+
+  /* global document */
+  /* eslint-disable lwr/no-unguarded-apis */
+  const hasSetTimeout = typeof setTimeout === 'function';
+  const hasConsole = typeof console !== 'undefined';
+  /* eslint-enable lwr/no-unguarded-apis */
+  class LoaderShim {
+      constructor(global) {
+          this.defineCache = {};
+          this.orderedDefs = [];
+          // Parse configuration
+          this.global = global;
+          this.config = global.LWR;
+          this.loaderSpecifier = 'lwr/loader/v/0_6_0-alpha_13';
+          // Set up the temporary LWR.define function and customInit hook
+          const tempDefine = this.tempDefine.bind(this);
+          global.LWR.define = tempDefine;
+          this.bootReady = this.config.autoBoot;
+          // Start watchdog timer
+          if (hasSetTimeout) {
+              this.watchdogTimerId = this.startWatchdogTimer();
+          }
+          try {
+              customInit(Object.freeze(this.config), this.postCustomInit.bind(this), tempDefine, (e) => {
+                  this.errorHandler = e;
+              });
+          }
+          catch (e) {
+              this.enterErrorState(e);
+          }
+      }
+      // Return true if the app can be initialized
+      canInit() {
+          // Initialize the app if:
+          //  - bootReady: autoBoot is on OR customInit has finished
+          //  - all required modules are defined
+          const allDefined = this.config.requiredModules.every((m) => this.orderedDefs.includes(m));
+          return this.bootReady && allDefined;
+      }
+      /**
+       * Create a temporary LWR.define() function which captures all
+       * calls that occur BEFORE the full loader module is available
+       *
+       * Each call to LWR.define() is stored in 2 ways:
+       *      - in a map as [moduleName, arguments] pairs
+       *      - each moduleName is pushed onto an array, to preserve
+       *          the order in which the modules were defined
+       */
+      tempDefine(...args) {
+          // Cache the incoming module
+          const moduleName = args[0];
+          this.defineCache[moduleName] = args;
+          this.orderedDefs.push(moduleName);
+          if (this.canInit()) {
+              if (hasSetTimeout) {
+                  // requiredModules are defined, clear watchdog timer
+                  // eslint-disable-next-line lwr/no-unguarded-apis, no-undef
+                  clearTimeout(this.watchdogTimerId);
+              }
+              this.initApp();
+          }
+      }
+      // Called by the customInit hook via lwr.initializeApp()
+      postCustomInit() {
+          this.bootReady = true;
+          if (this.canInit()) {
+              this.initApp();
+          }
+      }
+      // Create the loader and initialize the application
+      initApp() {
+          try {
+              const loaderConfig = {
+                  endpoints: this.config.endpoints,
+                  baseUrl: this.config.baseUrl,
+                  profiler: { logOperationStart, logOperationEnd },
+                  // TODO: can be removed following https://github.com/salesforce/lwr/issues/1087
+                  appMetadata: {
+                      bootstrapModule: this.config.bootstrapModule,
+                      rootComponent: this.config.rootComponent,
+                      rootComponents: this.config.rootComponents,
+                  },
+              };
+              const loader = createLoader(this.loaderSpecifier, this.defineCache[this.loaderSpecifier], loaderConfig, this.config.preloadModules);
+              this.createProfilerModule(loader);
+              this.mountApp(loader);
+          }
+          catch (e) {
+              this.enterErrorState(e);
+          }
+      }
+      waitForDOMContentLoaded() {
+          // eslint-disable-next-line lwr/no-unguarded-apis
+          if (typeof document === undefined) {
+              return Promise.resolve();
+          }
+          // Resolve if document is already "ready" https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
+          // eslint-disable-next-line lwr/no-unguarded-apis
+          if (document.readyState === 'interactive' || document.readyState === 'complete') {
+              return Promise.resolve();
+          }
+          return new Promise((resolve) => {
+              // eslint-disable-next-line lwr/no-unguarded-apis
+              document.addEventListener('DOMContentLoaded', () => {
+                  resolve();
+              });
+          });
+      }
+      // Create a module out of the profiler
+      // Note: The profiler is also available as a module through lwc module resolution (see package.json)
+      createProfilerModule(loader) {
+          const exporter = (exports) => {
+              Object.assign(exports, { logOperationStart, logOperationEnd });
+          };
+          loader.define('lwr/profiler/v/0_6_0-alpha_13', ['exports'], exporter);
+      }
+      // Set up the application globals, import map, root custom element...
+      mountApp(loader) {
+          const { bootstrapModule, rootComponent, rootComponents, endpoints, imports, index } = this.config;
+          // Set global LWR.define to loader.define
+          this.global.LWR = Object.freeze({
+              define: loader.define.bind(loader),
+              rootComponent,
+              rootComponents,
+              endpoints,
+              imports: imports || {},
+              index: index || {},
+          });
+          // Redefine all modules in the temporary cache
+          this.orderedDefs.forEach((specifier) => {
+              if (specifier !== this.loaderSpecifier) {
+                  loader.define(...this.defineCache[specifier]);
+              }
+          });
+          // by default, app initialization is gated on waiting for document to be parsed (via DOMContentLoaded)
+          const { disableInitDefer } = this.config;
+          // Load the import mappings and application bootstrap module
+          loader
+              .registerImportMappings({ imports, index }, [bootstrapModule, rootComponent])
+              .then(() => {
+              if (!disableInitDefer) {
+                  return this.waitForDOMContentLoaded();
+              }
+          })
+              .then(() => loader.load(bootstrapModule))
+              .catch((reason) => {
+              this.enterErrorState(new Error(`Application ${rootComponent} could not be loaded: ${reason}`));
+          });
+      }
+      // Trigger bootstrap error state, and call error handler if registered
+      enterErrorState(error) {
+          logOperationStart({ id: BOOTSTRAP_ERROR });
+          if (this.errorHandler) {
+              this.errorHandler(error);
+          }
+          else {
+              if (hasConsole) {
+                  // eslint-disable-next-line lwr/no-unguarded-apis, no-undef
+                  console.error(`An error occurred during LWR bootstrap. ${error.message}`, error.stack);
+              }
+          }
+      }
+      // eslint-disable-next-line no-undef, lwr/no-unguarded-apis
+      startWatchdogTimer() {
+          // eslint-disable-next-line lwr/no-unguarded-apis, no-undef
+          return setTimeout(() => {
+              this.enterErrorState(new Error('Failed to load required modules - timed out'));
+          }, REQUIRED_MODULES_TIMEOUT);
+      }
+  }
+
+  // The loader module is ALWAYS required
+  const GLOBAL = globalThis;
+  GLOBAL.LWR.requiredModules = GLOBAL.LWR.requiredModules || [];
+  if (GLOBAL.LWR.requiredModules.indexOf('lwr/loader/v/0_6_0-alpha_13') < 0) {
+      GLOBAL.LWR.requiredModules.push('lwr/loader/v/0_6_0-alpha_13');
+  }
+  new LoaderShim(GLOBAL);
 
 }());
 
-LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use strict';
+LWR.define('lwr/loader/v/0_6_0-alpha_13', ['exports'], function (exports) { 'use strict';
 
     const templateRegex = /\{([0-9]+)\}/g;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -522,6 +601,16 @@ LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use
         });
     }
 
+    // Bootstrap / shim
+
+    const LOADER_PREFIX = 'lwr.loader.';
+    const MODULE_DEFINE = `${LOADER_PREFIX}module.define`;
+    const MODULE_FETCH = `${LOADER_PREFIX}module.fetch`;
+    const MODULE_ERROR = `${LOADER_PREFIX}module.error`; // Loader: mappings
+
+    const MAPPINGS_FETCH = `${LOADER_PREFIX}mappings.fetch`;
+    const MAPPINGS_ERROR = `${LOADER_PREFIX}mappings.error`;
+
     /* spec based import map resolver */
     class ImportMetadataResolver {
         constructor(config, invalidationCallback) {
@@ -637,6 +726,7 @@ LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use
                 if (pending) {
                     return pending;
                 }
+                this.config.profiler.logOperationStart({ id: MAPPINGS_FETCH, specifier });
                 const fetchMappingService = this.hasMappingHooks()
                     ? this.evaluateMappingHooks
                     : this.fetchNewMappings;
@@ -651,6 +741,7 @@ LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use
                     if (!uri) {
                         throw new LoaderError(UNRESOLVED, [specifier]);
                     }
+                    this.config.profiler.logOperationEnd({ id: MAPPINGS_FETCH, specifier });
                     return uri;
                 })
                     .finally(() => {
@@ -695,6 +786,7 @@ LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use
             const uri = resolveUrl(this.buildMappingUrl(specifier), this.getBaseUrl());
             return globalThis.fetch(uri).then((res) => {
                 if (!res.ok) {
+                    this.config.profiler.logOperationStart({ id: MAPPINGS_ERROR, specifier });
                     throw new LoaderError(UNRESOLVED, [specifier]);
                 }
                 return res
@@ -842,6 +934,7 @@ LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use
             this.namedDefineRegistry = new Map();
             // The evaluted module registry where the module identifier (name or URL?) is the key
             this.moduleRegistry = new Map();
+            this.profiler = config.profiler;
             this.resolver = new ImportMetadataResolver(config, this.importMetadataInvalidationCallback.bind(this));
         }
         async load(id, importer) {
@@ -908,10 +1001,11 @@ LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use
                 }
                 const resolvedUrl = this.resolver.resolveLocal(resolvedOrPlain);
                 if (resolvedUrl) {
-                    // return the plain id IFF its already defined && the resolvedUrl is NOT already in the module registry
-                    if (this.namedDefineRegistry.has(resolvedOrPlain)) {
+                    // return the plain id if it is already defined && the resolvedUrl is NOT already in the module registry
+                    if (this.namedDefineRegistry.has(resolvedOrPlain) &&
+                        this.namedDefineRegistry.get(resolvedOrPlain).defined) {
                         const record = this.moduleRegistry.get(resolvedUrl);
-                        if (!record || record.originalId !== resolvedOrPlain) {
+                        if (!record || !record.aliases.has(resolvedOrPlain)) {
                             return resolvedOrPlain;
                         }
                     }
@@ -962,6 +1056,7 @@ LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use
                 // if module is "external", resolve the external promise to notify any dependees
                 mod.external.resolveExternal(moduleDef);
             }
+            this.profiler.logOperationStart({ id: MODULE_DEFINE, specifier: name });
             this.namedDefineRegistry.set(name, moduleDef);
             this.lastDefine = moduleDef;
         }
@@ -1012,6 +1107,10 @@ LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use
         getModuleRecord(resolvedId, id) {
             let moduleRecord = this.moduleRegistry.get(resolvedId);
             if (moduleRecord) {
+                // Make sure the original id is in the alias set
+                if (!moduleRecord.aliases.has(id)) {
+                    moduleRecord.aliases.add(id);
+                }
                 return moduleRecord;
             }
             const instantiation = this.getModuleDef(resolvedId, id);
@@ -1031,7 +1130,7 @@ LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use
             });
             moduleRecord = {
                 id: resolvedId,
-                originalId: id,
+                aliases: new Set([id]),
                 module: Object.create(null),
                 dependencyRecords,
                 instantiation,
@@ -1140,6 +1239,9 @@ LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use
             if (moduleExports.__defaultInterop) {
                 Object.defineProperty(moduleRecord.module, '__defaultInterop', { value: true });
             }
+            if (moduleExports.__esModule) {
+                Object.defineProperty(moduleRecord.module, '__esModule', { value: true });
+            }
             moduleRecord.evaluated = true;
             Object.freeze(moduleRecord.module);
             return moduleRecord.module;
@@ -1187,6 +1289,8 @@ LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use
                 return moduleDef;
             }
             const parentUrl = this.resolver.getBaseUrl(); // only support baseUrl for now
+            const specifier = moduleName || originalId;
+            this.profiler.logOperationStart({ id: MODULE_FETCH, specifier });
             return Promise.resolve()
                 .then(async () => {
                 const loadHooks = this.loadHook;
@@ -1224,9 +1328,11 @@ LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use
                 if (!moduleDef) {
                     throw new LoaderError(FAIL_INSTANTIATE, [resolvedId]);
                 }
+                this.profiler.logOperationEnd({ id: MODULE_FETCH, specifier });
                 return moduleDef;
             })
                 .catch((e) => {
+                this.profiler.logOperationStart({ id: MODULE_ERROR, specifier });
                 throw e;
             });
         }
@@ -1288,6 +1394,7 @@ LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use
         constructor(config) {
             let baseUrl = config.baseUrl;
             const mappingEndpoint = config.endpoints ? config.endpoints.uris.mapping : undefined;
+            let profiler = config.profiler;
             if (!mappingEndpoint) {
                 throw new LoaderError(NO_MAPPING_URL);
             }
@@ -1303,10 +1410,23 @@ LWR.define('lwr/loader/v/0_6_0-alpha_1', ['exports'], function (exports) { 'use
             if (!baseUrl) {
                 throw new LoaderError(NO_BASE_URL);
             }
-            this.registry = new ModuleRegistry(Object.freeze({ endpoints: config.endpoints, baseUrl }));
+            if (!profiler) {
+                // default noop profiler
+                profiler = {
+                    logOperationStart: () => {
+                        /* noop */
+                    },
+                    logOperationEnd: () => {
+                        /* noop */
+                    },
+                };
+            }
+            this.registry = new ModuleRegistry(Object.freeze({ endpoints: config.endpoints, baseUrl, profiler }));
+            // TODO: https://github.com/salesforce/lwr/issues/1087
             this.services = Object.freeze({
                 addLoaderPlugin: this.registry.addLoaderPlugin.bind(this.registry),
                 handleStaleModule: this.registry.registerHandleStaleModuleHook.bind(this.registry),
+                appMetadata: config.appMetadata,
             });
         }
         /**