feat: hmr (#61)

cardoso · web-flow · commit 80a0084ca6eb · 2025-03-11T17:09:00.000-03:00
* feat: hmr

* fix: simplify hmr

* feat: add hmr to plugin

* chore: improve hmr in csr-with-base-components

* chore: move tabs to a separate component

* chore: changeset

* chore: bump 4.1.0

* chore: update examples
diff --git a/examples/csr-with-base-components/index.html b/examples/csr-with-base-components/index.html
@@ -8,6 +8,6 @@
     <link href="https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.26.2/assets/styles/salesforce-lightning-design-system.min.css" rel="stylesheet">
   </head>
   <body>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/examples/csr-with-base-components/package.json b/examples/csr-with-base-components/package.json
@@ -17,6 +17,6 @@
     "lwc": "^8.16.1",
     "typescript": "^5.8.2",
     "vite": "^6.2.1",
-    "vite-plugin-lwc": "^4.0.2"
+    "vite-plugin-lwc": "^4.1.0"
   }
 }
diff --git a/examples/csr-with-base-components/src/main.ts b/examples/csr-with-base-components/src/main.ts
@@ -2,5 +2,7 @@ import "@lwc/synthetic-shadow";
 import { createElement } from "lwc";
 import App from "c/app";
 
+document.body.querySelector("c-app")?.remove();
+
 const elm = createElement("c-app", { is: App });
 document.body.appendChild(elm);
diff --git a/examples/csr-with-base-components/src/modules/c/app/app.html b/examples/csr-with-base-components/src/modules/c/app/app.html
@@ -1,17 +1,10 @@
 <template>
   <lightning-layout multiple-rows="true">
       <lightning-layout-item padding="around-small" size="12">
-          <c-header title="Vite + LWC" sub-title="csr with base components"></c-header>
+          <c-header></c-header>
       </lightning-layout-item>
       <lightning-layout-item padding="around-small" size="12">
-          <lightning-tabset variant="scoped">
-              <lightning-tab label="Counter">
-                  <c-counter label="Counter"></c-counter>
-              </lightning-tab>
-              <lightning-tab label="Tab 2">
-                  Tab 2
-              </lightning-tab>
-          </lightning-tabset>
+          <c-tabs></c-tabs>
       </lightning-layout-item>
   </lightning-layout>
 </template>
diff --git a/examples/csr-with-base-components/src/modules/c/header/header.ts b/examples/csr-with-base-components/src/modules/c/header/header.ts
@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 
 export default class Header extends LightningElement {
-  @api title = "Title";
-  @api subTitle = "Subtitle"
+  @api title = "Vite + LWC";
+  @api subTitle = "csr with base components"
 }
diff --git a/examples/csr-with-base-components/src/modules/c/tabs/tabs.html b/examples/csr-with-base-components/src/modules/c/tabs/tabs.html
@@ -0,0 +1,10 @@
+<template>
+  <lightning-tabset variant="scoped">
+    <lightning-tab label="Counter">
+        <c-counter></c-counter>
+    </lightning-tab>
+    <lightning-tab label="Tab 1">
+        Tab 1
+    </lightning-tab>
+</lightning-tabset>
+</template>
diff --git a/examples/csr-with-base-components/src/modules/c/tabs/tabs.ts b/examples/csr-with-base-components/src/modules/c/tabs/tabs.ts
@@ -0,0 +1,7 @@
+import { LightningElement } from "lwc";
+
+export default class Tabs extends LightningElement {
+  connectedCallback(): void {
+    console.log("Tabs component connected");
+  }
+}
diff --git a/examples/csr/package.json b/examples/csr/package.json
@@ -15,6 +15,6 @@
     "lwc": "^8.16.1",
     "typescript": "^5.8.2",
     "vite": "^6.2.1",
-    "vite-plugin-lwc": "^4.0.2"
+    "vite-plugin-lwc": "^4.1.0"
   }
 }
diff --git a/examples/csr/src/main.ts b/examples/csr/src/main.ts
@@ -1,4 +1,7 @@
 import { createElement } from "lwc";
 import App from "c/app";
+
+document.body.querySelector("c-app")?.remove();
+
 const elm = createElement("c-app", { is: App });
 document.body.appendChild(elm);
diff --git a/examples/csr/src/modules/c/app/app.css b/examples/csr/src/modules/c/app/app.css
@@ -4,9 +4,11 @@
   will-change: filter;
   transition: filter 300ms;
 }
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+
 .logo.lwc:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+  filter: drop-shadow(0 0 2em  #1798c1);
 }
diff --git a/examples/csr/src/modules/c/app/app.html b/examples/csr/src/modules/c/app/app.html
@@ -7,5 +7,5 @@
       <img src="/lwc.svg" class="logo lwc" alt="LWC logo" />
     </a>
   </div>
-  <c-hello-world msg="Vite + LWC"></c-hello-world>
+  <c-hello-world msg="Vite + LWC!"></c-hello-world>
 </template>
diff --git a/examples/csr/src/modules/c/app/app.ts b/examples/csr/src/modules/c/app/app.ts
@@ -1,5 +1,7 @@
 import { LightningElement } from "lwc";
 
 export default class App extends LightningElement {
-
+  connectedCallback(): void {
+    console.log("App component connected");
+  }
 }
diff --git a/examples/csr/src/modules/c/helloWorld/helloWorld.html b/examples/csr/src/modules/c/helloWorld/helloWorld.html
@@ -2,14 +2,14 @@
   <h1>{msg}</h1>
 
   <div class="card">
-    <button type="button" onclick={handleClick}>count is {count}</button>
+    <button type="button" onclick={handleClick}>count is: {count}</button>
     <p>
       Edit <code>modules/c/helloWorld/HelloWorld.html</code> to test HMR
     </p>
   </div>
 
   <p>
-    Check out <a href="https://lwc.dev/guide/install#via-rollup" target="_blank">create-lwc</a>, the official LWC + Vite starter
+    Check out <a href="https://lwc.dev/guide/install#via-rollup" target="_blank">create-lwc</a>, the official LWC + Rollup starter
   </p>
   <p>
     Learn more about IDE Support for LWC in the&nbsp;<a href="https://lwc.dev/guide/install#tools" target="_blank">LWC Installation Guide</a>.
diff --git a/examples/csr/src/modules/c/helloWorld/helloWorld.ts b/examples/csr/src/modules/c/helloWorld/helloWorld.ts
@@ -1,11 +1,11 @@
 import { LightningElement, api } from "lwc";
 
 export default class HelloWorld extends LightningElement {
-  @api msg = "Hello, World!";
+  @api msg = "Hello, World!!";
 
-  count = 0;
+  count = 4;
 
   handleClick() {
-    this.count++;
+    this.count += 2;
   }
 }
diff --git a/examples/ssr/package.json b/examples/ssr/package.json
@@ -24,6 +24,6 @@
     "@types/express": "^5.0.0",
     "cross-env": "^7.0.3",
     "lwc": "^8.16.1",
-    "vite-plugin-lwc": "^4.0.2"
+    "vite-plugin-lwc": "^4.1.0"
   }
 }
diff --git a/package.json b/package.json
@@ -6,11 +6,13 @@
   "packageManager": "pnpm@10.6.1",
   "scripts": {
     "build": "pnpm -r run build",
+    "bump": "pnpm changeset version",
     "dev": "pnpm -r --filter='./packages/*' run dev",
     "test": "vitest",
     "prepare": "npx simple-git-hooks",
     "lint": "eslint .",
     "example:csr": "pnpm -r --filter='./examples/csr' run dev",
+    "example:csr-with-base-components": "pnpm -r --filter='./examples/csr-with-base-components' run dev",
     "example:ssr": "pnpm -r --filter='./examples/ssr' run dev",
     "typecheck": "pnpm -r typecheck"
   },
diff --git a/packages/vite-plugin-lwc/CHANGELOG.md b/packages/vite-plugin-lwc/CHANGELOG.md
@@ -1,5 +1,11 @@
 # 4.0.0
 
+## 4.1.0
+
+### Minor Changes
+
+- 4184aa3: Support HMR
+
 ## 4.0.2
 
 ### Patch Changes
diff --git a/packages/vite-plugin-lwc/package.json b/packages/vite-plugin-lwc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-lwc",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "license": "MIT",
   "author": "Matheus Cardoso <matheus@cardo.so>",
   "maintainers": [
@@ -11,7 +11,7 @@
     }
   ],
   "keywords": [
-    "vite",
+    "vite-plugin",
     "lwc",
     "lightning",
     "web",
diff --git a/packages/vite-plugin-lwc/src/hmr.ts b/packages/vite-plugin-lwc/src/hmr.ts
@@ -0,0 +1,48 @@
+import type { Plugin } from "vite";
+
+
+export default function lwcHmrPlugin(): Plugin {
+
+  return {
+    name: "lwc:hmr",
+    enforce: "post",
+    apply: "serve",
+    transform(code, id, options) {
+
+      if (options?.ssr) {
+        return;
+      }
+
+      if (!id) {
+        return;
+      }
+
+      if (!code.includes("export default __lwc_component_class_internal")) {
+        return;
+      }
+
+      return code + `
+if (import.meta.hot) {
+  const { swapComponent, isComponentConstructor } = await import('lwc');
+    import.meta.hot.accept((jsModule) => {
+    if (!jsModule) {
+      import.meta.hot?.invalidate("new module is undefined");
+      return;
+    }
+
+    if (!isComponentConstructor(jsModule.default)) {
+      import.meta.hot?.invalidate("not a component constructor");
+      return;
+    }
+
+    const success = swapComponent(__lwc_component_class_internal, jsModule.default);
+
+    if (!success) {
+      import.meta.hot?.invalidate("swapComponent returned false")
+      return;
+    }
+  })
+}`;
+    },
+  };
+}
diff --git a/packages/vite-plugin-lwc/src/index.ts b/packages/vite-plugin-lwc/src/index.ts
@@ -1,9 +1,14 @@
 import patch from "./patch.ts";
-import lwc, { type ViteLwcOptions } from "./lwc.ts";
+import lwc from "./lwc.ts";
 import alias from "./alias.ts";
 import type { Plugin } from "vite";
+import hmr from "./hmr.ts";
+import type { ViteLwcOptions } from "./types.ts";
+import { normalizeOptions } from "./options.ts";
 
-export default (options: ViteLwcOptions = {}): Plugin[] => [
+export default (options: ViteLwcOptions = {}): Plugin[] => {
+  options = normalizeOptions(options);
+  return [
   patch({
     "vite:css": (p) => {
       p.transform = undefined;
@@ -22,4 +27,6 @@ export default (options: ViteLwcOptions = {}): Plugin[] => [
     enforce: "post",
     apply: "serve",
   },
-];
+  hmr()
+]
+};
diff --git a/packages/vite-plugin-lwc/src/lwc.ts b/packages/vite-plugin-lwc/src/lwc.ts
@@ -1,15 +1,7 @@
-import { createFilter, type FilterPattern, type Plugin, type Rollup } from "vite";
+import { createFilter, type Plugin, type Rollup } from "vite";
 import lwc, { type RollupLwcOptions } from "@lwc/rollup-plugin";
 import path from "node:path";
-
-export interface ViteLwcOptions extends RollupLwcOptions {
-  include?: FilterPattern;
-  exclude?: FilterPattern;
-}
-
-interface Options extends ViteLwcOptions {
-  [key: string]: unknown;
-}
+import type { ViteLwcOptions } from "./types";
 
 function createRollupPlugin(options: RollupLwcOptions) {
   const plugin = lwc(options);
@@ -28,8 +20,8 @@ function createRollupPlugin(options: RollupLwcOptions) {
   };
 }
 
-export default function lwcVite(rawConfig: ViteLwcOptions): Plugin {
-  const config = createConfig(rawConfig);
+export default function lwcVite(config: ViteLwcOptions): Plugin {
+
   const csr = createRollupPlugin(config);
   const ssr = createRollupPlugin({ ...config, targetSSR: true });
 
@@ -123,13 +115,6 @@ export default function lwcVite(rawConfig: ViteLwcOptions): Plugin {
   };
 }
 
-function createConfig(rawConfig: ViteLwcOptions): Options {
-  const config = rawConfig as Options;
-  config.rootDir ??= ".";
-  config['defaultModules'] ??= [];
-  return config;
-}
-
 function getError(
   error: unknown,
   id?: string,
diff --git a/packages/vite-plugin-lwc/src/options.ts b/packages/vite-plugin-lwc/src/options.ts
@@ -0,0 +1,9 @@
+import type { ViteLwcOptions } from "./types";
+
+
+export function normalizeOptions(rawConfig: ViteLwcOptions): ViteLwcOptions {
+  const config = rawConfig;
+  config.rootDir ??= ".";
+  config.defaultModules ??= [];
+  return config;
+}
diff --git a/packages/vite-plugin-lwc/src/types.ts b/packages/vite-plugin-lwc/src/types.ts
@@ -0,0 +1,7 @@
+import type { FilterPattern } from "vite";
+import type { RollupLwcOptions } from "@lwc/rollup-plugin";
+
+export interface ViteLwcOptions extends RollupLwcOptions {
+  include?: FilterPattern;
+  exclude?: FilterPattern;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
     <link href="https://cdn.jsdelivr.net/npm/@salesforce-ux/[email protected]/assets/styles/salesforce-lightning-design-system.min.css" rel="stylesheet">
   </head>
   <body>
 -    <script type="module" src="/src/main.js"></script>
 +    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,6 @@`
`17`	`17`	`"lwc": "^8.16.1",`
`18`	`18`	`"typescript": "^5.8.2",`
`19`	`19`	`"vite": "^6.2.1",`
`20`		`- "vite-plugin-lwc": "^4.0.2"`
	`20`	`+ "vite-plugin-lwc": "^4.1.0"`
`21`	`21`	`}`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import { LightningElement, api } from "lwc";`
`2`	`2`
`3`	`3`	`export default class Header extends LightningElement {`
`4`		`- @api title = "Title";`
`5`		`- @api subTitle = "Subtitle"`
	`4`	`+ @api title = "Vite + LWC";`
	`5`	`+ @api subTitle = "csr with base components"`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,6 @@`
`15`	`15`	`"lwc": "^8.16.1",`
`16`	`16`	`"typescript": "^5.8.2",`
`17`	`17`	`"vite": "^6.2.1",`
`18`		`- "vite-plugin-lwc": "^4.0.2"`
	`18`	`+ "vite-plugin-lwc": "^4.1.0"`
`19`	`19`	`}`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,9 +4,11 @@`
`4`	`4`	`will-change: filter;`
`5`	`5`	`transition: filter 300ms;`
`6`	`6`	`}`
	`7`	`+`
`7`	`8`	`.logo:hover {`
`8`	`9`	`filter: drop-shadow(0 0 2em #646cffaa);`
`9`	`10`	`}`
	`11`	`+`
`10`	`12`	`.logo.lwc:hover {`
`11`		`- filter: drop-shadow(0 0 2em #42b883aa);`
	`13`	`+ filter: drop-shadow(0 0 2em #1798c1);`
`12`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`import { LightningElement } from "lwc";`
`2`	`2`
`3`	`3`	`export default class App extends LightningElement {`
`4`		`-`
	`4`	`+ connectedCallback(): void {`
	`5`	`+ console.log("App component connected");`
	`6`	`+ }`
`5`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,11 @@`
`1`	`1`	`import { LightningElement, api } from "lwc";`
`2`	`2`
`3`	`3`	`export default class HelloWorld extends LightningElement {`
`4`		`- @api msg = "Hello, World!";`
	`4`	`+ @api msg = "Hello, World!!";`
`5`	`5`
`6`		`- count = 0;`
	`6`	`+ count = 4;`
`7`	`7`
`8`	`8`	`handleClick() {`
`9`		`- this.count++;`
	`9`	`+ this.count += 2;`
`10`	`10`	`}`
`11`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,6 @@`
`24`	`24`	`"@types/express": "^5.0.0",`
`25`	`25`	`"cross-env": "^7.0.3",`
`26`	`26`	`"lwc": "^8.16.1",`
`27`		`- "vite-plugin-lwc": "^4.0.2"`
	`27`	`+ "vite-plugin-lwc": "^4.1.0"`
`28`	`28`	`}`
`29`	`29`	`}`