@lwrjs/client-modules 0.13.0-alpha.16 → 0.13.0-alpha.18

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/package.json

@@ -4,7 +4,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.13.0-alpha.16",
+    "version": "0.13.0-alpha.18",
     "homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
     "repository": {
         "type": "git",
@@ -34,10 +34,10 @@
     },
     "dependencies": {
         "@locker/sandbox": "0.22.2",
-        "@lwrjs/shared-utils": "0.13.0-alpha.16"
+        "@lwrjs/shared-utils": "0.13.0-alpha.18"
     },
     "devDependencies": {
-        "@lwrjs/types": "0.13.0-alpha.16",
+        "@lwrjs/types": "0.13.0-alpha.18",
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-sucrase": "^5.0.2",
         "@rollup/plugin-terser": "^0.4.4",
@@ -70,5 +70,5 @@
     "volta": {
         "extends": "../../../package.json"
     },
-    "gitHead": "5aabb958d70a4a962b207da21e852d7a801d7d44"
+    "gitHead": "da3c9ea71a70cc4e81d6e8bc8625ba9d00f784bd"
 }

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

@@ -1,12 +0,0 @@
-import { swapTemplate, swapStyle, swapComponent } from 'lwc';
-
-export 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) {
-        swapStyle(oldModule.default[0], newModule.default[0]);
-    } else {
-        swapComponent(oldModule.default, newModule.default);
-    }
-}