ripple 0.3.46 → 0.3.47

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # ripple
 
+## 0.3.47
+
+### Patch Changes
+
+- [#1063](https://github.com/Ripple-TS/ripple/pull/1063)
+  [`a960343`](https://github.com/Ripple-TS/ripple/commit/a960343169aee906162211c502b6cc6b74e2a124)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Standardizes compile api
+  across all packages, including forcing types to adhere to the standard. Adds
+  more debug compile options to the playgrounds.
+- Updated dependencies
+  [[`eae7b40`](https://github.com/Ripple-TS/ripple/commit/eae7b4047f4d8cc7a0278fb48ffe630d73a592c6),
+  [`b34b95a`](https://github.com/Ripple-TS/ripple/commit/b34b95a808ec801109d1818f4d24ae0bbc00f66b),
+  [`a960343`](https://github.com/Ripple-TS/ripple/commit/a960343169aee906162211c502b6cc6b74e2a124)]:
+  - @tsrx/ripple@0.0.29
+  - ripple@0.3.47
+
 ## 0.3.46
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.46",
+  "version": "0.3.47",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -76,7 +76,7 @@
     "esm-env": "^1.2.2",
     "@types/estree": "^1.0.8",
     "@types/estree-jsx": "^1.0.5",
-    "@tsrx/ripple": "0.0.28"
+    "@tsrx/ripple": "0.0.29"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
@@ -84,9 +84,9 @@
     "typescript": "^5.9.3",
     "@volar/language-core": "~2.4.28",
     "vscode-languageserver-types": "^3.17.5",
-    "@tsrx/core": "0.0.26"
+    "@tsrx/core": "0.0.27"
   },
   "peerDependencies": {
-    "ripple": "0.3.46"
+    "ripple": "0.3.47"
   }
 }

package/tests/client/compiler/compiler.assignments.test.tsrx

@@ -117,7 +117,7 @@ component App() {
 	});
 }`;
 		const result = compile(source, 'test.tsrx');
-		const effect_match = result.js.code.match(EFFECT_BODY_REGEX);
+		const effect_match = result.code.match(EFFECT_BODY_REGEX);
 		expect(effect_match?.[1].trim()).toMatchSnapshot();
 	});
 
@@ -136,7 +136,7 @@ component App() {
 	});
 }`;
 		const result = compile(source, 'test.tsrx');
-		const effect_match = result.js.code.match(EFFECT_BODY_REGEX);
+		const effect_match = result.code.match(EFFECT_BODY_REGEX);
 		expect(effect_match?.[1].trim()).toMatchSnapshot();
 	});
 });

package/tests/client/compiler/compiler.attributes.test.tsrx

@@ -14,9 +14,9 @@ describe('compiler > attributes', () => {
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
 		// Should contain properly quoted hyphenated properties and unquoted valid identifiers
-		expect(result.js.code).toMatch(/'data-scope': "test"/);
-		expect(result.js.code).toMatch(/'aria-label': "accessible"/);
-		expect(result.js.code).toMatch(/class: "valid"/);
+		expect(result.code).toMatch(/'data-scope': "test"/);
+		expect(result.code).toMatch(/'aria-label': "accessible"/);
+		expect(result.code).toMatch(/class: "valid"/);
 	});
 
 	it('generates valid JavaScript for all types of hyphenated attributes', () => {
@@ -33,7 +33,7 @@ describe('compiler > attributes', () => {
 				export default component App() { <Child ${attr} /> }`;
 
 			const result = compile(source, 'test.tsrx', { mode: 'client' });
-			expect(result.js.code).toMatch(expected);
+			expect(result.code).toMatch(expected);
 		});
 	});
 
@@ -57,14 +57,14 @@ describe('compiler > attributes', () => {
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
 		// Valid identifiers should not be quoted
-		expect(result.js.code).toMatch(/validProp: "valid"/);
-		expect(result.js.code).toMatch(/class: "valid"/);
-		expect(result.js.code).toMatch(/id: "valid"/);
+		expect(result.code).toMatch(/validProp: "valid"/);
+		expect(result.code).toMatch(/class: "valid"/);
+		expect(result.code).toMatch(/id: "valid"/);
 
 		// Invalid identifiers (with hyphens) should be quoted
-		expect(result.js.code).toMatch(/'data-invalid': "invalid"/);
-		expect(result.js.code).toMatch(/'aria-invalid': "invalid"/);
-		expect(result.js.code).toMatch(/'custom-prop': "invalid"/);
+		expect(result.code).toMatch(/'data-invalid': "invalid"/);
+		expect(result.code).toMatch(/'aria-invalid': "invalid"/);
+		expect(result.code).toMatch(/'custom-prop': "invalid"/);
 	});
 
 	it('ensures generated code is syntactically valid JavaScript', () => {
@@ -80,7 +80,7 @@ describe('compiler > attributes', () => {
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
 		// Extract the props object from the generated code and test it's valid JavaScript
-		const match = result.js.code.match(/Child\([^,]+,\s*(\{[^}]+\})/);
+		const match = result.code.match(/Child\([^,]+,\s*(\{[^}]+\})/);
 		expect(match).toBeTruthy();
 
 		const propsObject = match?.[1];

package/tests/client/compiler/compiler.basic.test.tsrx

@@ -65,8 +65,8 @@ describe('compiler > basics', () => {
 		expect(explicit_text.type).toBe('Text');
 		expect((explicit_text.expression as AST.Identifier).name).toBe('markup');
 
-		const { js } = compile(source, 'text-directive.tsrx', { mode: 'client' });
-		expect(js.code).not.toContain('_$_.html');
+		const { code } = compile(source, 'text-directive.tsrx', { mode: 'client' });
+		expect(code).not.toContain('_$_.html');
 
 		const invalid_source = `export component App() {
 	const text = 'plain';
@@ -318,10 +318,10 @@ describe('compiler > basics', () => {
 	<div class="b">{'b'}</div>
 }`;
 
-		const { js } = compile(source, 'grouped-count.tsrx', { mode: 'client' });
+		const { code } = compile(source, 'grouped-count.tsrx', { mode: 'client' });
 
-		expect(js.code).toMatch(/_\$_\.template\(`<!><!>`,\s*1,\s*2\)/);
-		expect(js.code).not.toMatch(/_\$_\.template\(`<!><!>`,\s*1,\s*3\)/);
+		expect(code).toMatch(/_\$_\.template\(`<!><!>`,\s*1,\s*2\)/);
+		expect(code).not.toMatch(/_\$_\.template\(`<!><!>`,\s*1,\s*3\)/);
 	});
 
 	it('emits anonymous component expressions as arrows in client output', () => {
@@ -330,7 +330,7 @@ const Inline = component(props) => {
 	<div>{props.x}</div>
 }
 `;
-		const result = compile(source, 'anonymous-component.tsrx', { mode: 'client' }).js.code;
+		const result = compile(source, 'anonymous-component.tsrx', { mode: 'client' }).code;
 
 		expect(result).toContain('const Inline = (__anchor, props, __block) => {');
 		expect(result).not.toContain('function Inline');
@@ -343,7 +343,7 @@ const Inline = component(props) {
 	<div>{props.x}</div>
 }
 `;
-		const result = compile(source, 'anonymous-component.tsrx', { mode: 'client' }).js.code;
+		const result = compile(source, 'anonymous-component.tsrx', { mode: 'client' }).code;
 
 		expect(result).toContain('const Inline = function (__anchor, props, __block) {');
 		expect(result).not.toContain('function Inline');
@@ -611,12 +611,12 @@ function use_nested({ value: &[count, tracked] }: { value: Tracked<number> }) {
 	return tracked;
 }
 `;
-		const { js } = compile(source, 'tracked-nested-lazy.tsrx', { mode: 'client' });
+		const { code } = compile(source, 'tracked-nested-lazy.tsrx', { mode: 'client' });
 
 		// Nested lazy array should still use tracked tuple fast path from outer annotation.
-		expect(js.code).toContain('_$_.update(');
-		expect(js.code).not.toContain('[0]');
-		expect(js.code).not.toContain('[1]');
+		expect(code).toContain('_$_.update(');
+		expect(code).not.toContain('[0]');
+		expect(code).not.toContain('[1]');
 	});
 
 	it('uses tracked fast path for nested lazy params at tuple rest positions', () => {
@@ -627,11 +627,11 @@ function use_tuple_rest({ value: [head, &[count, tracked]] }: { value: [number,
 	return tracked;
 }
 `;
-		const { js } = compile(source, 'tracked-nested-lazy-tuple-rest.tsrx', { mode: 'client' });
+		const { code } = compile(source, 'tracked-nested-lazy-tuple-rest.tsrx', { mode: 'client' });
 
 		// Tuple rest element access should resolve to Tracked<number>, not Tracked<number>[].
-		expect(js.code).toContain('_$_.update(');
-		expect(js.code).not.toContain('[1]');
+		expect(code).toContain('_$_.update(');
+		expect(code).not.toContain('[1]');
 	});
 
 	it('preserves generic type args in interface extends for Volar mappings', () => {
@@ -759,7 +759,7 @@ export component App() {
 }
 `;
 
-		const result = compile(source, 'test.tsrx', { mode: 'client' }).js.code;
+		const result = compile(source, 'test.tsrx', { mode: 'client' }).code;
 
 		// Template children should take precedence - explicit children prop should be removed
 		expect((result.match(/children:/g) || []).length).toBe(1);
@@ -800,7 +800,7 @@ export component App() {
 }
 `;
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
-		const code = result.js.code;
+		const code = result.code;
 
 		// The constructor's compiled output should contain __block = _$_.scope()
 		expect(code).toContain('__block');
@@ -1016,7 +1016,7 @@ export component App() {
 }
 `;
 
-		const result = compile(source, 'test.tsrx', { mode: 'client' }).js.code;
+		const result = compile(source, 'test.tsrx', { mode: 'client' }).code;
 
 		expect(result).toContain('_$_.normalize_children(');
 	});
@@ -1054,7 +1054,7 @@ export component App() {
 }
 `;
 
-		const result = compile(source, 'test.tsrx', { mode: 'client' }).js.code;
+		const result = compile(source, 'test.tsrx', { mode: 'client' }).code;
 
 		expect(result).toContain('_$_.spread_props(');
 	});

package/tests/client/compiler/compiler.typescript.test.tsrx

@@ -12,7 +12,7 @@ const errorMap = new ErrorMap();`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
-		expect(result.js.code).toMatchSnapshot();
+		expect(result.code).toMatchSnapshot();
 	});
 
 	it('removes type assertions from function parameters and leaves default values', () => {
@@ -23,7 +23,7 @@ function getString(e: string = 'test') {
 
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
-		expect(result.js.code).toMatchSnapshot();
+		expect(result.code).toMatchSnapshot();
 	});
 
 	it('removes class TypeScript syntax from JS output', () => {
@@ -39,8 +39,8 @@ class PrintEvent implements BaseEvent {
 
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
-		expect(result.js.code).not.toContain('implements');
-		expect(result.js.code).toMatchSnapshot();
+		expect(result.code).not.toContain('implements');
+		expect(result.code).toMatchSnapshot();
 	});
 
 	it('removes class extends type arguments from JS output', () => {
@@ -52,8 +52,8 @@ class PrintEvent implements BaseEvent {
 
 		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
-		expect(result.js.code).not.toContain('Map<string, string>');
-		expect(result.js.code).toContain('class StringMap extends Map');
-		expect(result.js.code).toMatchSnapshot();
+		expect(result.code).not.toContain('Map<string, string>');
+		expect(result.code).toContain('class StringMap extends Map');
+		expect(result.code).toMatchSnapshot();
 	});
 });

package/tests/client/css/style-identifier.test.tsrx

@@ -385,10 +385,10 @@ export component App() {
 		}
 	</style>
 }`;
-			const { js } = compile(source, 'test.tsrx');
+			const { code } = compile(source, 'test.tsrx');
 
-			expect(js.code).toContain('highlight');
-			expect(js.code).toMatch(/tsrx-[a-z0-9]+/);
+			expect(code).toContain('highlight');
+			expect(code).toMatch(/tsrx-[a-z0-9]+/);
 		});
 
 		it('inlines scoped class strings for server mode', () => {
@@ -405,10 +405,10 @@ export component App() {
 		}
 	</style>
 }`;
-			const { js } = compile(source, 'test.tsrx', { mode: 'server' });
+			const { code } = compile(source, 'test.tsrx', { mode: 'server' });
 
-			expect(js.code).toContain('highlight');
-			expect(js.code).toMatch(/tsrx-[a-z0-9]+/);
+			expect(code).toContain('highlight');
+			expect(code).toMatch(/tsrx-[a-z0-9]+/);
 		});
 	});
 });

package/tests/client/for.test.tsrx

@@ -59,7 +59,7 @@ describe('for statements', () => {
 	});
 
 	it('does not emit JavaScript continue in for...of skip callbacks', () => {
-		const { js } = compile(
+		const { code } = compile(
 			`component App() {
 				const items = ['Item 1', '', 'Item 3'];
 				const skipped = [];
@@ -76,9 +76,9 @@ describe('for statements', () => {
 			{ mode: 'client' },
 		);
 
-		expect(js.code).toContain('skipped.push(\'skip\')');
-		expect(js.code).not.toContain('continue;');
-		expect(js.code).not.toMatch(/continue;\s*return/);
+		expect(code).toContain('skipped.push(\'skip\')');
+		expect(code).not.toContain('continue;');
+		expect(code).not.toMatch(/continue;\s*return/);
 	});
 
 	it('renders a simple dynamic array', () => {

package/tests/hydration/build-components.js

@@ -51,14 +51,14 @@ function buildComponents() {
 		const clientResult = compile(source, file, {
 			mode: 'client',
 		});
-		writeFileSync(join(clientOutDir, outputName), '// @ts-nocheck\n' + clientResult.js.code);
+		writeFileSync(join(clientOutDir, outputName), '// @ts-nocheck\n' + clientResult.code);
 
 		// Compile for server
 		const serverResult = compile(source, file, {
 			mode: 'server',
 		});
 		// Transform imports to use server runtime
-		const serverCode = transformServerImports(serverResult.js.code);
+		const serverCode = transformServerImports(serverResult.code);
 		writeFileSync(join(serverOutDir, outputName), '// @ts-nocheck\n' + serverCode);
 
 		console.log(`Compiled ${file} -> client & server`);

package/tests/server/compiler.test.tsrx

@@ -10,7 +10,7 @@ const errorMap = new ErrorMap();`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' });
 
-		expect(result.js.code).toMatchSnapshot();
+		expect(result.code).toMatchSnapshot();
 	});
 
 	it('removes type assertions from function parameters and leaves default values', () => {
@@ -21,7 +21,7 @@ function getString(e: string = 'test') {
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' });
 
-		expect(result.js.code).toMatchSnapshot();
+		expect(result.code).toMatchSnapshot();
 	});
 
 	it('removes class TypeScript syntax from JS output', () => {
@@ -37,8 +37,8 @@ class PrintEvent implements BaseEvent {
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' });
 
-		expect(result.js.code).not.toContain('implements');
-		expect(result.js.code).toMatchSnapshot();
+		expect(result.code).not.toContain('implements');
+		expect(result.code).toMatchSnapshot();
 	});
 
 	it('removes class extends type arguments from JS output', () => {
@@ -50,9 +50,9 @@ class PrintEvent implements BaseEvent {
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' });
 
-		expect(result.js.code).not.toContain('Map<string, string>');
-		expect(result.js.code).toContain('class StringMap extends Map');
-		expect(result.js.code).toMatchSnapshot();
+		expect(result.code).not.toContain('Map<string, string>');
+		expect(result.code).toContain('class StringMap extends Map');
+		expect(result.code).toMatchSnapshot();
 	});
 
 	it('throws error for interpolating children as text in SSR mode', () => {
@@ -81,7 +81,7 @@ export default component A() {
 	</div>
 }`;
 
-		const result = compile(source, 'test.tsrx', { mode: 'server' }).js.code;
+		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
 
 		expect(result).toContain(`_$_.output_push('Hello')`);
 		expect(result).not.toContain(`"Hello";`);
@@ -96,7 +96,7 @@ export default component A() {
 			{ mode: 'server' },
 		);
 
-		expect(result.js.code).toContain(`_$_.output_push('Rock &amp; "Roll"')`);
+		expect(result.code).toContain(`_$_.output_push('Rock &amp; "Roll"')`);
 	});
 
 	it('emits anonymous component expressions as arrows in SSR output', () => {
@@ -105,7 +105,7 @@ const Inline = component(props) => {
 	<div>{props.x}</div>
 }
 `;
-		const result = compile(source, 'anonymous-component.tsrx', { mode: 'server' }).js.code;
+		const result = compile(source, 'anonymous-component.tsrx', { mode: 'server' }).code;
 
 		expect(result).toContain('const Inline = (props) => {');
 		expect(result).not.toContain('function Inline');
@@ -118,7 +118,7 @@ const Inline = component(props) {
 	<div>{props.x}</div>
 }
 `;
-		const result = compile(source, 'anonymous-component.tsrx', { mode: 'server' }).js.code;
+		const result = compile(source, 'anonymous-component.tsrx', { mode: 'server' }).code;
 
 		expect(result).toContain('const Inline = function (props) {');
 		expect(result).not.toContain('function Inline');
@@ -162,7 +162,7 @@ export component App() {
 }
 `;
 
-		const result = compile(source, 'test.tsrx', { mode: 'server' }).js.code;
+		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
 
 		// Template children should take precedence - explicit children prop should be removed
 		expect((result.match(/children:/g) || []).length).toBe(1);
@@ -206,7 +206,7 @@ module server {
 }`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' });
-		expect(result.js.code).toMatchSnapshot();
+		expect(result.code).toMatchSnapshot();
 	});
 
 	it('compiles imports from module server as server-call wrappers', () => {
@@ -225,9 +225,9 @@ export component App() {
 }`;
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' });
-		expect(result.js.code).toContain('const getUser = function (...args)');
-		expect(result.js.code).toContain('return _$_server_$_.loadUser(...args)');
-		expect(result.js.code).toContain('export const _$_server_$_');
+		expect(result.code).toContain('const getUser = function (...args)');
+		expect(result.code).toContain('return _$_server_$_.loadUser(...args)');
+		expect(result.code).toContain('export const _$_server_$_');
 	});
 
 	it('throws when server exports are used through direct member access', () => {
@@ -300,7 +300,7 @@ export component App() {
 }
 `;
 
-		const result = compile(source, 'test.tsrx', { mode: 'server' }).js.code;
+		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
 
 		expect(result).toContain('_$_.normalize_children(');
 	});
@@ -318,7 +318,7 @@ export component App() {
 }
 `;
 
-		const result = compile(source, 'test.tsrx', { mode: 'server' }).js.code;
+		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
 
 		expect(result).toContain('...props');
 	});

package/tests/server/html-nesting-validation.test.tsrx

@@ -189,8 +189,8 @@ describe('HTML nesting validation', () => {
 
 			const result = compile(source, 'test.tsrx', { mode: 'server', dev: true });
 
-			expect(result.js.code).toContain('_$_.push_element');
-			expect(result.js.code).toContain('_$_.pop_element');
+			expect(result.code).toContain('_$_.push_element');
+			expect(result.code).toContain('_$_.pop_element');
 		});
 
 		it('does not emit push_element or pop_element in non-dev mode', () => {
@@ -204,8 +204,8 @@ describe('HTML nesting validation', () => {
 
 			const result = compile(source, 'test.tsrx', { mode: 'server', dev: false });
 
-			expect(result.js.code).not.toContain('push_element');
-			expect(result.js.code).not.toContain('pop_element');
+			expect(result.code).not.toContain('push_element');
+			expect(result.code).not.toContain('pop_element');
 		});
 
 		it('emits push_element with correct tag name', () => {
@@ -217,7 +217,7 @@ describe('HTML nesting validation', () => {
 
 			const result = compile(source, 'test.tsrx', { mode: 'server', dev: true });
 
-			expect(result.js.code).toContain('_$_.push_element(\'button\'');
+			expect(result.code).toContain('_$_.push_element(\'button\'');
 		});
 
 		it('does not emit push_element for client mode', () => {
@@ -229,7 +229,7 @@ describe('HTML nesting validation', () => {
 
 			const result = compile(source, 'test.tsrx', { mode: 'client', dev: true });
 
-			expect(result.js.code).not.toContain('push_element');
+			expect(result.code).not.toContain('push_element');
 		});
 	});
 });

package/tests/server/style-identifier.test.tsrx

@@ -275,11 +275,11 @@ export component App() {
 		}
 	</style>
 }`;
-			const { js } = compile(source, 'test.tsrx', { mode: 'server' });
+			const { code } = compile(source, 'test.tsrx', { mode: 'server' });
 
-			expect(js.code).toContain('highlight');
-			expect(js.code).toMatch(/tsrx-[a-z0-9]+/);
-			expect(js.code).toContain('register_css');
+			expect(code).toContain('highlight');
+			expect(code).toMatch(/tsrx-[a-z0-9]+/);
+			expect(code).toContain('register_css');
 		});
 
 		it('includes CSS hash in rendered HTML', async () => {