@ripple-ts/rollup-plugin 0.4.5 → 0.4.6

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @ripple-ts/rollup-plugin
 
+## 0.4.6
+
+### Patch Changes
+
+- [#1499](https://github.com/Ripple-TS/ripple/pull/1499)
+  [`cd1995e`](https://github.com/Ripple-TS/ripple/commit/cd1995e8a10c0b422c03a0e344efd648e6175f67)
+  Thanks [@Dev-next-gen](https://github.com/Dev-next-gen)! - Pass
+  `compilerOptions` to the compiler instead of the raw file id. This fixes a
+  `TypeError` when compiling `.tsrx` files and ensures options such as `mode`,
+  `dev`, `hmr`, and `hydration` are respected.
+
 ## 0.4.5
 
 ### Patch Changes

package/index.js

@@ -53,7 +53,7 @@ export default function (options = {}) {
 
 			const filename = path.relative(process.cwd(), id);
 
-			const result = await compile(code, filename, id);
+			const result = await compile(code, filename, compilerOptions);
 
 			if (emitCss && result.css) {
 				const fname = id.replace(new RegExp(`\\${extension}$`), '.css');

package/package.json

@@ -3,7 +3,7 @@
   "description": "Rollup plugin for Ripple",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "type": "module",
   "main": "index.js",
   "homepage": "https://ripple-ts.com",
@@ -23,7 +23,7 @@
     "rollup": "^4.59.0",
     "source-map": "^0.7.6",
     "uvu": "^0.5.6",
-    "ripple": "0.4.5"
+    "ripple": "0.4.6"
   },
   "publishConfig": {
     "access": "public"

package/tests/compiler-options.test.js

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+import path from 'node:path';
+import { rollup } from 'rollup';
+import ripple from '../index.js';
+
+const id = path.resolve('src/App.tsrx');
+const source = `export function App(props) @{
+	<div><span>{props.value}</span></div>
+}`;
+
+describe('@ripple-ts/rollup-plugin compiler options', () => {
+	it.each(['client', 'server'])('builds %s output with Rollup', async (mode) => {
+		const bundle = await rollup({
+			input: id,
+			external: /^ripple\//,
+			plugins: [
+				{
+					name: 'fixture',
+					resolveId: (entry) => (entry === id ? id : null),
+					load: (entry) => (entry === id ? source : null),
+				},
+				ripple({ compilerOptions: { mode } }),
+			],
+		});
+		try {
+			const { output } = await bundle.generate({ format: 'es', sourcemap: true });
+			expect(output[0].imports).toEqual([`ripple/internal/${mode}`]);
+			expect(output[0].exports).toContain('App');
+			expect(output[0].map.sourcesContent).toEqual([source]);
+		} finally {
+			await bundle.close();
+		}
+	});
+
+	it('keeps the compiler defaults when options are omitted', async () => {
+		const result = await ripple().transform(source, id);
+		expect(result.code).toContain("from 'ripple/internal/client'");
+		expect(result.code).toContain('_$_.hydrate_child(');
+		expect(result.code).not.toContain('import.meta.hot');
+	});
+
+	it.each([false, true])('respects hmr: %s', async (hmr) => {
+		const result = await ripple({ compilerOptions: { hmr } }).transform(source, id);
+		expect(result.code.includes('import.meta.hot.accept(')).toBe(hmr);
+	});
+
+	it.each([false, true])('respects server dev: %s', async (dev) => {
+		const result = await ripple({ compilerOptions: { mode: 'server', dev } }).transform(source, id);
+		expect(result.code).toContain("from 'ripple/internal/server'");
+		expect(result.code.includes('_$_.push_element(')).toBe(dev);
+	});
+
+	it.each([false, true])('respects hydration: %s', async (hydration) => {
+		const result = await ripple({ compilerOptions: { hydration } }).transform(source, id);
+		expect(result.code.includes('_$_.hydrate_child(')).toBe(hydration);
+	});
+
+	it('preserves extracted CSS and source maps when compiling for the server', async () => {
+		const styled_source = `export function App() @{
+			<>
+				<div>Hello</div>
+				<style>div { color: red; }</style>
+			</>
+		}`;
+		const plugin = ripple({ compilerOptions: { mode: 'server' } });
+		const result = await plugin.transform(styled_source, id);
+		const css_id = id.replace(/\.tsrx$/, '.css');
+
+		expect(result.code).toContain("from 'ripple/internal/server'");
+		expect(result.code).toContain(`import ${JSON.stringify(css_id)};`);
+		expect(plugin.load(css_id)).toContain('color: red;');
+		expect(result.map.sourcesContent).toEqual([styled_source]);
+	});
+});