@ripple-ts/vite-plugin 0.3.4 → 0.3.6

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @ripple-ts/vite-plugin
 
+## 0.3.6
+
+### Patch Changes
+
+- [#819](https://github.com/Ripple-TS/ripple/pull/819)
+  [`472c4c4`](https://github.com/Ripple-TS/ripple/commit/472c4c4b80a69ed22a258a3f3c03c4ca2d20a95b)
+  Thanks [@trueadm](https://github.com/trueadm)! - Fix HMR update causing
+  component styling to disappear
+
+  When editing a component's scoped CSS, the CSS hash changes but the virtual CSS
+  module was not being invalidated or included in the HMR update. This caused the
+  browser to keep stale CSS selectors that no longer matched the component's new
+  hash-scoped class names, making all styling disappear until a full dev server
+  restart.
+
+  The fix eagerly re-compiles the `.ripple` file in the `hotUpdate` hook to update
+  the CSS cache, then invalidates and includes the virtual CSS module in the HMR
+  update so the browser receives fresh CSS in sync with the re-rendered component.
+
+- Updated dependencies []:
+  - @ripple-ts/adapter@0.3.6
+
+## 0.3.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @ripple-ts/adapter@0.3.5
+
 ## 0.3.4
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Vite plugin for Ripple",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "type": "module",
   "module": "src/index.js",
   "main": "src/index.js",
@@ -32,13 +32,13 @@
     "url": "https://github.com/Ripple-TS/ripple/issues"
   },
   "dependencies": {
-    "@ripple-ts/adapter": "0.3.4"
+    "@ripple-ts/adapter": "0.3.6"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
     "type-fest": "^5.4.4",
     "vite": "^8.0.0",
-    "ripple": "0.3.4"
+    "ripple": "0.3.6"
   },
   "publishConfig": {
     "access": "public"

package/src/index.js

@@ -608,48 +608,76 @@ export function ripple(inlineOptions = {}) {
 			},
 
 			/**
-			 * Handle HMR for files that Vite's default module HMR can't
-			 * properly refresh.
+			 * Handle HMR for .ripple files.
 			 *
-			 * .ripple components self-accept HMR and swap their component
-			 * function. For changes to their OWN code this works perfectly.
-			 * But for changes to DEPENDENCIES (e.g. .md files imported via
-			 * import.meta.glob), the self-accept handler can't refresh
-			 * static imports cached in the browser's ESM module registry.
+			 * Inspired by vite-plugin-svelte's approach: instead of manually
+			 * re-compiling in hotUpdate, we use `transformRequest` to run the
+			 * full Vite pipeline (load → transform). This updates cssCache
+			 * via the existing transform hook and avoids double-compilation.
 			 *
-			 * Strategy:
-			 * - If all changed modules self-accept → they can hot-replace
-			 *   themselves (e.g. .ripple components, CSS). Let Vite handle.
-			 * - Otherwise, check the SSR module graph. If the file is there,
-			 *   invalidate SSR cache and trigger a full page reload.
+			 * After the .ripple file is re-transformed, we invalidate and
+			 * include the virtual CSS module in the HMR update so the browser
+			 * receives fresh CSS in sync with the re-rendered component.
+			 *
+			 * For non-.ripple files that don't self-accept, we invalidate
+			 * SSR modules and trigger a full reload.
 			 */
-			hotUpdate({ file, modules, server }) {
-				if (this.environment.name !== 'client') return;
-
-				// If all changed modules self-accept, they can hot-replace
-				// themselves (.ripple components, CSS modules). Let Vite
-				// handle without intervention.
-				if (modules.length > 0 && modules.every((m) => m.isSelfAccepting)) {
-					return;
-				}
+			hotUpdate: {
+				order: 'pre',
+				async handler({ file, modules, server }) {
+					if (this.environment.name !== 'client') return;
 
-				// Check if this file is part of the SSR module graph.
-				const ssr = server.environments.ssr;
-				if (!ssr) return;
+					let updated_modules = modules;
 
-				const ssr_modules = ssr.moduleGraph.getModulesByFile(file);
-				if (!ssr_modules || ssr_modules.size === 0) return;
+					if (file.endsWith('.ripple')) {
+						const filename = file.replace(root, '');
+						const cssId = createVirtualImportId(filename, root, 'style');
 
-				// Invalidate SSR modules so the server re-reads the file
-				// on next request instead of serving stale cached content.
-				for (const mod of ssr_modules) {
-					ssr.moduleGraph.invalidateModule(mod);
-				}
+						// Snapshot current cached CSS for comparison
+						const prev_css = cssCache.get(cssId);
 
-				// Full reload — the only reliable way to pick up the change
-				// for files that don't self-accept but are consumed by the app.
-				this.environment.hot.send({ type: 'full-reload' });
-				return [];
+						// Use transformRequest to run the standard Vite pipeline.
+						// This triggers our transform hook which re-compiles the
+						// .ripple file and updates cssCache as a side-effect.
+						try {
+							await this.environment.transformRequest(filename);
+						} catch {
+							// Compile errors during partial edits are expected
+						}
+
+						const next_css = cssCache.get(cssId);
+						const css_changed = prev_css !== next_css;
+
+						// If CSS changed, invalidate and include the virtual CSS
+						// module so the browser fetches the updated stylesheet.
+						if (css_changed) {
+							const css_module = this.environment.moduleGraph.getModuleById(cssId);
+							if (css_module && !modules.includes(css_module)) {
+								this.environment.moduleGraph.invalidateModule(css_module);
+								updated_modules = [...modules, css_module];
+							}
+						}
+					}
+
+					// Non-.ripple files: if all modules self-accept, let Vite
+					// handle. Otherwise invalidate SSR and full-reload.
+					if (modules.length > 0 && modules.every((m) => m.isSelfAccepting)) {
+						return updated_modules === modules ? undefined : updated_modules;
+					}
+
+					const ssr = server.environments.ssr;
+					if (!ssr) return;
+
+					const ssr_modules = ssr.moduleGraph.getModulesByFile(file);
+					if (!ssr_modules || ssr_modules.size === 0) return;
+
+					for (const mod of ssr_modules) {
+						ssr.moduleGraph.invalidateModule(mod);
+					}
+
+					this.environment.hot.send({ type: 'full-reload' });
+					return [];
+				},
 			},
 
 			/**