@lwrjs/client-modules 0.13.0-alpha.2 → 0.13.0-alpha.21

package/build/bundle/prod/lwr/servicesESM/servicesESM.js

@@ -1,2 +1,2 @@
-const e=[];let o;const n=globalThis.LWR;function t(){return n}n.define||n.env?globalThis.LWR=Object.freeze({define:n.define,env:n.env}):delete globalThis.LWR;const a={addLoaderPlugin:()=>{console.warn("API is not supported in ESM format")},handleStaleModule:function(n){e.push(n),o||(o=new WebSocket(`ws://${location.host}`),o.addEventListener("message",(async({data:o})=>{const n=JSON.parse(o);if("moduleUpdate"===n.eventType){const{oldHash:o,newHash:t,module:{specifier:a}}=n.payload;for(let n=0;n<e.length;n++){if(null!==(0,e[n])({name:a,oldHash:o,newHash:t}))break}}})))},appMetadata:function(){const{appId:e,bootstrapModule:o,rootComponent:n,rootComponents:a}=t();return{appId:e,bootstrapModule:o,rootComponent:n,rootComponents:a}}(),serverData:t().serverData||{}};export{a as services};
+const e=[];let o;const n=globalThis.LWR;n.define||n.env?globalThis.LWR=Object.freeze({define:n.define,env:n.env}):delete globalThis.LWR;const t={addLoaderPlugin:()=>{console.warn("API is not supported in ESM format")},handleStaleModule:function(n){e.push(n),o||(o=new WebSocket(`ws://${location.host}`),o.addEventListener("message",(async({data:o})=>{const n=JSON.parse(o);if("moduleUpdate"===n.eventType){const{oldHash:o,newHash:t,module:{specifier:a}}=n.payload;for(let n=0;n<e.length;n++){if(null!==(0,e[n])({name:a,oldHash:o,newHash:t}))break}}})))},appMetadata:function(){const{appId:e,bootstrapModule:o,rootComponent:t,rootComponents:a}=n;return{appId:e,bootstrapModule:o,rootComponent:t,rootComponents:a}}(),addServerDataCallback:function(e){}};export{t as services};
 //# sourceMappingURL=servicesESM.js.map

package/build/es/modules/lwr/declarativeShadow/declarativeShadow.d.ts

@@ -0,0 +1,2 @@
+export declare function polyfillDeclarativeShadowDom(node?: Document | ShadowRoot): void;
+//# sourceMappingURL=declarativeShadow.d.ts.map

package/build/es/modules/lwr/declarativeShadow/declarativeShadow.js

@@ -0,0 +1,27 @@
+// Polyfill the Declarative ShadowDOM spec - call this function AFTER the DOM has been parsed and BEFORE hydrateComponent() is invoked
+// See https://github.com/salesforce/lwc-rfcs/blob/master/text/0129-declarative-shadow-dom-polyfill.md#single-loop-script-shadow-root-attachment-reference
+// Note we handle both the old (Chrome-only) `shadowroot` attribute as well as the standard `shadowrootmode` attribute.
+// As of this writing, Chrome supports both formats but Safari only supports the standard format.
+function applyShadowRoots(node, attributeName) {
+    // if this browser DOES NOT support Declarative ShadowDOM
+    node.querySelectorAll(`template[${attributeName}]`).forEach((template) => {
+        const mode = (template.getAttribute(attributeName) || 'open');
+        const shadowRoot = template.parentNode?.attachShadow({ mode });
+        shadowRoot.appendChild(template.content);
+        template.remove();
+        applyShadowRoots(shadowRoot, attributeName);
+    });
+}
+export function polyfillDeclarativeShadowDom(node = document) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode')) {
+        // this browser does not support the standard format
+        applyShadowRoots(node, 'shadowrootmode');
+    }
+    // eslint-disable-next-line no-prototype-builtins
+    if (!HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot')) {
+        // this browser does not support the non-standard format
+        applyShadowRoots(node, 'shadowroot');
+    }
+}
+//# sourceMappingURL=declarativeShadow.js.map

package/build/es/modules/lwr/environment/environment.d.ts

@@ -0,0 +1,6 @@
+export declare const isServer: any;
+export declare const basePath: any;
+export declare const locale: any;
+export declare const assetBasePath: any;
+export declare const uiBasePath: any;
+//# sourceMappingURL=environment.d.ts.map

package/build/es/modules/lwr/environment/environment.js

@@ -0,0 +1,11 @@
+const environment = globalThis?.LWR?.env || {};
+export const isServer = environment && (environment.SSR === 'true' || environment.SSR === true);
+// The baseBath from the config or set from the request (e.g. /shop)
+export const basePath = environment && environment.basePath;
+// The locale set from the request or the defaultLocale from the config (e.g. en-US)
+export const locale = environment && environment.locale;
+// Root base path for static assets (e.g. /shop/mobify/bundle/1234/site)
+export const assetBasePath = environment && environment.assetBasePath;
+// Base path for UI routing (e.g. /shop/en-US)
+export const uiBasePath = environment && environment.uiBasePath;
+//# sourceMappingURL=environment.js.map

package/build/es/modules/lwr/init/init.d.ts

@@ -0,0 +1,23 @@
+import type { LightningElement } from 'lwc';
+import type { ServerData } from '@lwrjs/types';
+/**
+ * Convert a module specifier into a valid CustomElement registry name:
+ *      - remove any version linking
+ *      - change / to -
+ *      - convert uppercase letters into "-${lowercase}"
+ * eg: "c/app" => "c-app"
+ * eg: "my/helloWorld" => "my-hello-world"
+ * eg: "lwr/example/v/1.0.0" => "lwr-example"
+ * @param specifier The bare specifier to convert
+ */
+export declare function toKebabCase(specifier: string): string;
+export declare function getPropFromAttrName(propName: string): string;
+/**
+ * Import any requested static application dependencies, define the root
+ * application component(s) into the CustomElement registry, and inject them.
+ * @param rootModules - An array of arrays, each one holding a pair of
+ *                      bare specifier and corresponding LightningElement constructor
+ * @example - [['x/appRoot', appCtor], ['x/nav', navCtor]]
+ */
+export declare function init(rootModules: [string, LightningElement][], serverData?: ServerData): void;
+//# sourceMappingURL=init.d.ts.map

package/build/es/modules/lwr/init/init.js

@@ -0,0 +1,118 @@
+import { BOOTSTRAP_END, INIT, INIT_MODULE } from 'lwr/metrics';
+import { logOperationStart, logOperationEnd } from 'lwr/profiler';
+// TODO: This is a temporal workaround until https://github.com/salesforce/lwc/pull/2083 is sorted - tmp
+import { createElement } from 'lwc';
+// <hydrateComponentProxy> - This code is removed in core
+import { hydrateComponent } from 'lwc';
+function hydrateComponentProxy(customElement, Ctor, props) {
+    hydrateComponent(customElement, Ctor, props);
+}
+// </hydrateComponentProxy>
+function initializeWebComponent(elementName, Ctor) {
+    return createElement(elementName, { is: Ctor });
+}
+/**
+ * Convert a module specifier into a valid CustomElement registry name:
+ *      - remove any version linking
+ *      - change / to -
+ *      - convert uppercase letters into "-${lowercase}"
+ * eg: "c/app" => "c-app"
+ * eg: "my/helloWorld" => "my-hello-world"
+ * eg: "lwr/example/v/1.0.0" => "lwr-example"
+ * @param specifier The bare specifier to convert
+ */
+export function toKebabCase(specifier) {
+    return specifier
+        .replace(/\/v\/[a-zA-Z0-9-_.]+$/, '')
+        .replace('/', '-')
+        .replace(/([A-Z])/g, (c) => `-${c.toLowerCase()}`);
+}
+/**
+ * This method maps between attribute names
+ * and the corresponding props name.
+ */
+const CAMEL_REGEX = /-([a-z])/g;
+export function getPropFromAttrName(propName) {
+    return propName.replace(CAMEL_REGEX, (g) => g[1].toUpperCase());
+}
+/**
+ * Import any requested static application dependencies, define the root
+ * application component(s) into the CustomElement registry, and inject them.
+ * @param rootModules - An array of arrays, each one holding a pair of
+ *                      bare specifier and corresponding LightningElement constructor
+ * @example - [['x/appRoot', appCtor], ['x/nav', navCtor]]
+ */
+export function init(rootModules, serverData = {}) {
+    if (typeof customElements === 'undefined' || typeof document === 'undefined') {
+        logOperationStart({ id: BOOTSTRAP_END });
+        return;
+    }
+    logOperationStart({ id: INIT });
+    let index = 0;
+    for (const [specifier, ctor] of rootModules) {
+        const elementName = toKebabCase(specifier);
+        // initialize and inject the root module into the LWR Root or DOM if it is missing
+        if (!document.body.querySelector(elementName)) {
+            logOperationStart({ id: INIT_MODULE, specifier, specifierIndex: ++index });
+            // this is for SPA like routes (one component at the root level) utilizing the lwr-root directive
+            const component = initializeWebComponent(elementName, ctor);
+            const container = document.querySelector('[lwr-root]');
+            container ? container.appendChild(component) : document.body.appendChild(component);
+            logOperationEnd({
+                id: INIT_MODULE,
+                specifier,
+                specifierIndex: index,
+                metadata: { renderMode: 'spa' },
+            });
+            continue;
+        }
+        // the page has been rendered or SSR'd, and each component needs to initialized(or hydrated)
+        const elements = document.querySelectorAll(elementName);
+        for (const element of elements) {
+            logOperationStart({ id: INIT_MODULE, specifier, specifierIndex: ++index });
+            const propsId = element.dataset.lwrPropsId;
+            // hydrate SSR'd components
+            if (propsId) {
+                hydrateComponentProxy(element, ctor, serverData[propsId] || {});
+                logOperationEnd({
+                    id: INIT_MODULE,
+                    specifier,
+                    specifierIndex: index,
+                    metadata: { renderMode: 'ssr' },
+                });
+                continue;
+            }
+            // Note: due to the bug described at the top of this file, each CSR'd custom element
+            // must be replaced with the new synthetic constructor. Attributes and children are
+            // copied over to the new component.
+            const component = initializeWebComponent(elementName, ctor);
+            // copy the attributes
+            for (const { name, value } of element.attributes) {
+                component.setAttribute(name, value);
+                const prop = getPropFromAttrName(name);
+                if (prop in component) {
+                    // set attributes as properties for reactivity
+                    component[prop] = value;
+                }
+            }
+            // save the children
+            while (element.childNodes.length > 0) {
+                component.appendChild(element.childNodes[0]);
+            }
+            // swap the element out with the initialized component
+            const parent = element.parentElement;
+            if (parent) {
+                parent.replaceChild(component, element);
+            }
+            logOperationEnd({
+                id: INIT_MODULE,
+                specifier,
+                specifierIndex: index,
+                metadata: { renderMode: 'csr' },
+            });
+        }
+    }
+    logOperationEnd({ id: INIT });
+    logOperationStart({ id: BOOTSTRAP_END });
+}
+//# sourceMappingURL=init.js.map

package/build/es/modules/lwr/lockerSandbox/lockerSandbox.d.ts

@@ -0,0 +1,2 @@
+export * from '@locker/sandbox';
+//# sourceMappingURL=lockerSandbox.d.ts.map

package/build/es/modules/lwr/lockerSandbox/lockerSandbox.js

@@ -0,0 +1,2 @@
+export * from '@locker/sandbox';
+//# sourceMappingURL=lockerSandbox.js.map

package/build/es/modules/lwr/metrics/metrics.d.ts

@@ -0,0 +1,35 @@
+export type LWRMetric = 'lwr.bootstrap.end' | 'lwr.bootstrap.error' | 'lwr.bootstrap.init' | 'lwr.bootstrap.init.module' | 'lwr.loader.module.define' | 'lwr.loader.module.fetch' | 'lwr.loader.mappings.fetch' | 'lwr.loader.module.error' | 'lwr.loader.mappings.error' | 'lwr.router.navigate' | 'lwr.router.view' | 'lwr.router.error' | 'lwr.loader.module.dynamicLoad';
+export declare const BOOTSTRAP_PREFIX = "lwr.bootstrap.";
+export declare const BOOTSTRAP_END: LWRMetric;
+export declare const BOOTSTRAP_ERROR: LWRMetric;
+export declare const BOOTSTRAP_ERROR_COUNT: string;
+export declare const BOOTSTRAP_DURATION: string;
+export declare const INIT = "lwr.bootstrap.init";
+export declare const INIT_DURATION: string;
+export declare const INIT_MODULE = "lwr.bootstrap.init.module";
+export declare const INIT_MODULE_DURATION: string;
+export declare const INIT_MODULE_COUNT: string;
+export declare const LOADER_PREFIX = "lwr.loader.";
+export declare const MODULE_DEFINE: LWRMetric;
+export declare const MODULE_DEFINE_COUNT: string;
+export declare const MODULE_DYNAMIC_LOAD: LWRMetric;
+export declare const MODULE_DYNAMIC_LOAD_COUNT: string;
+export declare const MODULE_FETCH: LWRMetric;
+export declare const MODULE_FETCH_COUNT: string;
+export declare const MODULE_FETCH_DURATION: string;
+export declare const MODULE_ERROR: LWRMetric;
+export declare const MODULE_ERROR_COUNT: string;
+export declare const MAPPINGS_FETCH: LWRMetric;
+export declare const MAPPINGS_FETCH_COUNT: string;
+export declare const MAPPINGS_FETCH_DURATION: string;
+export declare const MAPPINGS_ERROR: LWRMetric;
+export declare const MAPPINGS_ERROR_COUNT: string;
+export declare const ROUTER_PREFIX = "lwr.router.";
+export declare const ROUTER_NAV: LWRMetric;
+export declare const ROUTER_NAV_COUNT: string;
+export declare const ROUTER_NAV_DURATION: string;
+export declare const ROUTER_VIEW: LWRMetric;
+export declare const ROUTER_VIEW_DURATION: string;
+export declare const ROUTER_ERROR: LWRMetric;
+export declare const ROUTER_ERROR_COUNT: string;
+//# sourceMappingURL=metrics.d.ts.map

package/build/es/modules/lwr/metrics/metrics.js

@@ -0,0 +1,39 @@
+// Bootstrap / shim
+export const BOOTSTRAP_PREFIX = 'lwr.bootstrap.';
+export const BOOTSTRAP_END = `${BOOTSTRAP_PREFIX}end`;
+export const BOOTSTRAP_ERROR = `${BOOTSTRAP_PREFIX}error`;
+export const BOOTSTRAP_ERROR_COUNT = `${BOOTSTRAP_ERROR}.count`;
+export const BOOTSTRAP_DURATION = `${BOOTSTRAP_PREFIX}duration`;
+// Initialization
+export const INIT = 'lwr.bootstrap.init';
+export const INIT_DURATION = `${INIT}.duration`;
+export const INIT_MODULE = `lwr.bootstrap.init.module`;
+export const INIT_MODULE_DURATION = `${INIT_MODULE}.duration`;
+export const INIT_MODULE_COUNT = `${INIT_MODULE}.count`;
+// Loader: modules
+export const LOADER_PREFIX = 'lwr.loader.';
+export const MODULE_DEFINE = `${LOADER_PREFIX}module.define`;
+export const MODULE_DEFINE_COUNT = `${MODULE_DEFINE}.count`;
+export const MODULE_DYNAMIC_LOAD = `${LOADER_PREFIX}module.dynamicLoad`;
+export const MODULE_DYNAMIC_LOAD_COUNT = `${MODULE_DYNAMIC_LOAD}.count`;
+export const MODULE_FETCH = `${LOADER_PREFIX}module.fetch`;
+export const MODULE_FETCH_COUNT = `${MODULE_FETCH}.count`;
+export const MODULE_FETCH_DURATION = `${MODULE_FETCH}.duration`;
+export const MODULE_ERROR = `${LOADER_PREFIX}module.error`;
+export const MODULE_ERROR_COUNT = `${MODULE_ERROR}.count`;
+// Loader: mappings
+export const MAPPINGS_FETCH = `${LOADER_PREFIX}mappings.fetch`;
+export const MAPPINGS_FETCH_COUNT = `${MAPPINGS_FETCH}.count`;
+export const MAPPINGS_FETCH_DURATION = `${MAPPINGS_FETCH}.duration`;
+export const MAPPINGS_ERROR = `${LOADER_PREFIX}mappings.error`;
+export const MAPPINGS_ERROR_COUNT = `${MAPPINGS_ERROR}.count`;
+// Router
+export const ROUTER_PREFIX = 'lwr.router.';
+export const ROUTER_NAV = `${ROUTER_PREFIX}navigate`;
+export const ROUTER_NAV_COUNT = `${ROUTER_NAV}.count`;
+export const ROUTER_NAV_DURATION = `${ROUTER_NAV}.duration`;
+export const ROUTER_VIEW = `${ROUTER_PREFIX}view`;
+export const ROUTER_VIEW_DURATION = `${ROUTER_VIEW}.duration`;
+export const ROUTER_ERROR = `${ROUTER_PREFIX}error`;
+export const ROUTER_ERROR_COUNT = `${ROUTER_ERROR}.count`;
+//# sourceMappingURL=metrics.js.map

package/build/es/modules/lwr/profiler/profiler.d.ts

@@ -0,0 +1,28 @@
+import type { LWRMetric } from '../metrics/metrics.js';
+declare const enum Phase {
+    Start = 0,
+    End = 1
+}
+export type Metadata = {
+    [key: string]: string | number | boolean;
+};
+interface LWRLogInfo {
+    id: LWRMetric;
+    specifier?: string;
+    specifierIndex?: number;
+    metadata?: Metadata;
+}
+interface LWRDispatcherInfo extends LWRLogInfo {
+    phase: Phase;
+}
+type LogOperation = (info: LWRLogInfo) => void;
+export type LogDispatcher = (info: LWRDispatcherInfo) => void;
+export interface ProfilerAPI {
+    logOperationStart: LogOperation;
+    logOperationEnd: LogOperation;
+}
+export declare function attachDispatcher(dispatcher: LogDispatcher): void;
+export declare function logOperationStart({ id, specifier, specifierIndex, metadata }: LWRLogInfo): void;
+export declare function logOperationEnd({ id, specifier, specifierIndex, metadata }: LWRLogInfo): void;
+export {};
+//# sourceMappingURL=profiler.d.ts.map

package/build/es/modules/lwr/profiler/profiler.js

@@ -0,0 +1,67 @@
+var Phase;
+(function (Phase) {
+    Phase[Phase["Start"] = 0] = "Start";
+    Phase[Phase["End"] = 1] = "End";
+})(Phase || (Phase = {}));
+// Attach a custom dispatcher
+let customDispatcher;
+export 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';
+function getMeasureName(id, specifier) {
+    return specifier ? `${id}-${specifier}` : id;
+}
+function getMarkName(id, specifier, specifierIndex) {
+    const measureName = getMeasureName(id, specifier);
+    return specifier && specifierIndex ? `${measureName}_${specifierIndex}` : measureName;
+}
+function getDetail(specifier, metadata) {
+    const detail = specifier || metadata ? { ...metadata } : null;
+    if (detail && specifier) {
+        detail['specifier'] = specifier;
+    }
+    return detail;
+}
+// For marking request metrics
+// Fallback to the Performance API if there is no custom dispatcher
+export function logOperationStart({ id, specifier, specifierIndex, metadata }) {
+    if (customDispatcher) {
+        customDispatcher({ id, phase: Phase.Start, specifier, metadata });
+        return;
+    }
+    if (isPerfSupported) {
+        const markName = getMarkName(id, specifier, specifierIndex);
+        const detail = getDetail(specifier, metadata);
+        perf.mark(markName, { detail });
+    }
+}
+// For measuring duration metrics
+// Fallback to the Performance API if there is no custom dispatcher
+/* istanbul ignore next */
+export function logOperationEnd({ id, specifier, specifierIndex, metadata }) {
+    if (customDispatcher) {
+        customDispatcher({ id, phase: Phase.End, specifier, metadata });
+    }
+    else if (isPerfSupported) {
+        const markName = getMarkName(id, specifier, specifierIndex);
+        const measureName = getMeasureName(id, specifier);
+        const detail = getDetail(specifier, metadata);
+        perf.measure(measureName, {
+            start: markName,
+            detail,
+        });
+        // 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);
+    }
+}
+//# sourceMappingURL=profiler.js.map

package/build/es/modules/lwr/serverDataCallback/serverDataCallback.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Client-side module implementation of the serverDataCallback bootstrap service.
+ */
+import type { ServerData, ServerDataCallback } from '@lwrjs/types';
+export declare function registerServerDataCallbacks(hook: ServerDataCallback): void;
+export declare function evaluateServerDataCallbacks(serverData?: ServerData): void;
+//# sourceMappingURL=serverDataCallback.d.ts.map

package/build/es/modules/lwr/serverDataCallback/serverDataCallback.js

@@ -0,0 +1,11 @@
+const serverDataCallbacks = [];
+export function registerServerDataCallbacks(hook) {
+    serverDataCallbacks.push(hook);
+}
+export function evaluateServerDataCallbacks(serverData = {}) {
+    // now that we have server data, run the server data hooks
+    for (const serverDataCallback of serverDataCallbacks) {
+        serverDataCallback({ serverData });
+    }
+}
+//# sourceMappingURL=serverDataCallback.js.map

package/build/modules/lwr/hmr/hmr.js

@@ -1,34 +1,43 @@
-import { updateStaleModule } from './util/swap';
+import { swapTemplate, swapStyle, swapComponent } from 'lwc';
 
-// This is a workaround until we don't change the way HMR works
-// The server will always return the same canonical "latest URL"
-// So we need to track the last new URI instead
+// Track the newest URI for each module.
 const URI_MAPPING = new Map();
 
 async function moduleUpdate(payload) {
     const {
+        format,
         oldUri,
         newUri,
         module: { specifier },
     } = payload;
 
-    const lastEvalutedUri = URI_MAPPING.get(oldUri) || oldUri;
-    const oldModule = await import(lastEvalutedUri);
-    const newModule = await import(newUri);
-    URI_MAPPING.set(oldUri, newUri);
+    if (format === 'amd') {
+        // Need to integrate new LWC APIs to support inline HMR for AMD+CSR
+        window.location.reload();
+    } else {
+        const lastEvalutedUri = URI_MAPPING.get(oldUri) || oldUri;
+        const oldModule = await import(lastEvalutedUri);
+        const newModule = await import(newUri);
+        URI_MAPPING.set(oldUri, newUri);
+        updateStaleModule({ oldModule, newModule, specifier });
+    }
+}
 
-    updateStaleModule({
-        oldModule,
-        newModule,
-        specifier,
-    });
+function updateStaleModule({ oldModule, newModule, specifier }) {
+    if (specifier.endsWith('html') && newModule.default) {
+        console.log(`Swapping HTML template for module "${specifier}"`);
+        swapTemplate(oldModule.default, newModule.default);
+    } else if (specifier.endsWith('css') && newModule.default) {
+        console.log(`Swapping CSS for module "${specifier}"`);
+        swapStyle(oldModule.default[0], newModule.default[0]);
+    } else {
+        console.log(`Swapping JS for module "${specifier}"`);
+        swapComponent(oldModule.default, newModule.default);
+    }
 }
 
 function viewUpdate(payload, metadata) {
-    const viewId = payload.viewId;
-    const assetId = payload.assetId;
-
-    // eslint-disable-next-line no-undef
+    const { assetId, viewId } = payload;
     if (metadata.templates.includes(viewId) || metadata.assetReferences.includes(assetId)) {
         window.location.reload();
     }
@@ -38,8 +47,8 @@ async function waitForSuccessfulPing(socketUrl) {
     // eslint-disable-next-line no-constant-condition
     while (true) {
         try {
-            // Fetching for the socket URL reject with a network error if not available. If the dev
-            // server comes back online, it resolve with 404 HTTP response.
+            // Poll for the socket URL; reject with a network error if not available.
+            // If the dev server comes back online, it resolves with a 404 HTTP response.
             await fetch(`http://${socketUrl}`);
             break;
         } catch (error) {
@@ -49,19 +58,14 @@ async function waitForSuccessfulPing(socketUrl) {
 }
 
 export function initHMR(serverURI = '', metadata) {
-    const normalizedMeta = {
-        ...{ assetReferences: [], templates: [] },
-        ...metadata,
-    };
-
+    const normalizedMeta = { ...{ assetReferences: [], templates: [] }, ...metadata };
     // {apiVersion}/hmr/{format}/{compat}?debug
     const host = serverURI.startsWith('/') ? location.host : '';
     const socketUrl = `${host}${serverURI}`;
-
     const socket = new WebSocket(`ws://${socketUrl}`);
 
     socket.addEventListener('close', async (evt) => {
-        // Don't do anything is the socket close event was initiated by the client.
+        // Don't do anything if the socket close event was initiated by the client.
         if (evt.wasClean) {
             return;
         }

package/build/modules/lwr/init/init.js

@@ -1,8 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { BOOTSTRAP_END, INIT, INIT_MODULE } from 'lwr/metrics';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { logOperationStart, logOperationEnd } from 'lwr/profiler';
 
 // TODO: This is a temporal workaround until https://github.com/salesforce/lwc/pull/2083 is sorted - tmp
@@ -100,8 +96,6 @@ export function init(rootModules, serverData = {}) {
 
       // hydrate SSR'd components
       if (propsId) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         hydrateComponentProxy(element, ctor, serverData[propsId] || {});
         logOperationEnd({
           id: INIT_MODULE,