@ripple-ts/vite-plugin 0.3.61 → 0.3.62

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @ripple-ts/vite-plugin
 
+## 0.3.62
+
+### Patch Changes
+
+- [#1148](https://github.com/Ripple-TS/ripple/pull/1148)
+  [`78d766a`](https://github.com/Ripple-TS/ripple/commit/78d766ad263152cd7a8decf64979d33be52a0124)
+  Thanks [@aleclarson](https://github.com/aleclarson)! - Chain TSRX compiler
+  source maps through the Vite JSX transform so browser devtools show original
+  `.tsrx` sources instead of generated TSX.
+
+- Updated dependencies []:
+  - @ripple-ts/adapter@0.3.62
+
 ## 0.3.61
 
 ### Patch Changes

package/package.json

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

package/src/index.js

@@ -1,6 +1,6 @@
 /** @import {PackageJson} from 'type-fest' */
 /** @import {Plugin, ResolvedConfig, ViteDevServer} from 'vite' */
-/** @import {RipplePluginOptions, RippleConfigOptions, ResolvedRippleConfig, Route, RenderRoute} from '@ripple-ts/vite-plugin' */
+/** @import {RipplePlugin, RipplePluginOptions, RippleConfigOptions, ResolvedRippleConfig, Route, RenderRoute} from '@ripple-ts/vite-plugin' */
 
 /// <reference types="@tsrx/ripple/types/rpc" />
 
@@ -413,7 +413,7 @@ export function ripple(inlineOptions = {}) {
 		return loadedRippleConfig;
 	}
 
-	/** @type {Plugin[]} */
+	/** @type {[RipplePlugin, ...Plugin[]]} */
 	const plugins = [
 		{
 			name: 'vite-plugin-ripple',
@@ -1248,14 +1248,14 @@ import { hydrate, mount } from 'ripple';
 			transform: {
 				filter: { id: RIPPLE_EXTENSION_PATTERN },
 
-				async handler(code, id, opts) {
+				async handler(source_code, id, opts) {
 					const filename = id.replace(root, '');
 					const ssr = opts?.ssr === true || this.environment.config.consumer === 'server';
 
 					const is_dev = config?.command === 'serve';
 					const current_ripple_config = await get_current_ripple_config();
 
-					const result = await compile(code, filename, {
+					let { code, css, map } = await compile(source_code, filename, {
 						mode: ssr ? 'server' : 'client',
 						dev: is_dev,
 						hmr: is_dev && !ssr,
@@ -1266,17 +1266,17 @@ import { hydrate, mount } from 'ripple';
 					});
 
 					// Track modules with `module server` declarations for RPC (client build only)
-					if (isBuild && !ssr && result.code.includes('_$_.rpc(')) {
+					if (isBuild && !ssr && code.includes('_$_.rpc(')) {
 						serverModuleModules.add(filename);
 					}
 
-					if (result.css) {
+					if (css) {
 						const cssId = createVirtualImportId(filename, root, 'style');
-						cssCache.set(cssId, result.css);
-						result.code += `\nimport ${JSON.stringify(cssId)};\n`;
+						cssCache.set(cssId, css);
+						code += `\nimport ${JSON.stringify(cssId)};\n`;
 					}
 
-					return { code: result.code, map: result.map };
+					return { code, map };
 				},
 			},
 		},

package/tests/transform-source-maps.test.js

@@ -0,0 +1,96 @@
+/** @import {RipplePlugin} from '@ripple-ts/vite-plugin' */
+
+import { describe, it, expect } from 'vitest';
+import path from 'node:path';
+import { ripple } from '@ripple-ts/vite-plugin';
+
+/**
+ * Pull the core ripple plugin out of the plugin array. The narrowed
+ * `name: 'vite-plugin-ripple'` on {@link import('../types/index.js').RipplePlugin}
+ * lets `find` produce a typed result with no cast.
+ *
+ * @returns {RipplePlugin}
+ */
+function get_ripple_plugin() {
+	const [plugin] = ripple({ excludeRippleExternalModules: true });
+	return plugin;
+}
+
+/**
+ * @param {RipplePlugin} plugin
+ * @param {string} root
+ */
+async function init_plugin(plugin, root) {
+	const hook =
+		typeof plugin.configResolved === 'function'
+			? plugin.configResolved
+			: plugin.configResolved?.handler;
+	if (!hook) return;
+	// Bind a stub `this` so we don't trip Vite's hook `this:` constraint.
+	await hook.call(/** @type {any} */ ({}), /** @type {any} */ ({ root, command: 'serve' }));
+}
+
+/**
+ * @param {RipplePlugin} plugin
+ * @param {string} source
+ * @param {string} id
+ */
+async function call_transform(plugin, source, id) {
+	const transform = plugin.transform;
+	if (!transform) throw new Error('plugin has no transform hook');
+	const handler = typeof transform === 'function' ? transform : transform.handler;
+	const ctx = /** @type {any} */ ({
+		environment: { config: { consumer: 'client' } },
+	});
+	return handler.call(ctx, source, id, undefined);
+}
+
+describe('vite-plugin-ripple source maps', () => {
+	it('returns a map that points back to the original .tsrx source', async () => {
+		const plugin = get_ripple_plugin();
+		const root = '/virtual-root';
+		await init_plugin(plugin, root);
+
+		const id = `${root}/App.tsrx`;
+		const source = `export component App() {
+			let message = 'Hello world';
+			<div>{message}</div>
+		}`;
+
+		const result = await call_transform(plugin, source, id);
+
+		expect(result).toBeTruthy();
+		const map = /** @type {any} */ (result).map;
+		// `@tsrx/ripple`'s esrap call uses `path.basename` for `sourceMapSource`,
+		// so `sources` is the bare filename rather than the full id.
+		expect(map.sources).toEqual([path.basename(id)]);
+		expect(map.sourcesContent).toEqual([source]);
+	});
+
+	it('keeps the map valid when a <style> block triggers a virtual css import', async () => {
+		const plugin = get_ripple_plugin();
+		const root = '/virtual-root';
+		await init_plugin(plugin, root);
+
+		const id = `${root}/Styled.tsrx`;
+		const source = `export component Styled() {
+			<div>{'Hello world'}</div>
+
+			<style>
+				.div {
+					color: red;
+				}
+			</style>
+		}`;
+
+		const result = await call_transform(plugin, source, id);
+
+		expect(result).toBeTruthy();
+		const code = /** @type {any} */ (result).code;
+		const map = /** @type {any} */ (result).map;
+		// CSS import is appended (not prepended), so existing mappings stay
+		// aligned and `sourcesContent` still carries the original source.
+		expect(code).toContain('?ripple&type=style&lang.css');
+		expect(map.sourcesContent).toEqual([source]);
+	});
+});

package/types/index.d.ts

@@ -5,7 +5,16 @@ import type { RuntimePrimitives } from '@ripple-ts/adapter';
 // Plugin exports
 // ============================================================================
 
-export function ripple(options?: RipplePluginOptions): Plugin[];
+/**
+ * The core `vite-plugin-ripple` plugin produced by {@link ripple}. The `name`
+ * is narrowed so consumers (and tests) can locate it via `find` without an
+ * `as` cast.
+ */
+export interface RipplePlugin extends Plugin {
+	readonly name: 'vite-plugin-ripple';
+}
+
+export function ripple(options?: RipplePluginOptions): [RipplePlugin, ...Plugin[]];
 export function defineConfig(options: RippleConfigOptions): RippleConfigOptions;
 export function resolveRippleConfig(
 	raw: RippleConfigOptions,