ripple 0.3.10 → 0.3.12

package/tests/hydration/compiled/client/portal.js

@@ -29,13 +29,10 @@ export function SimplePortal(__anchor, _, __block) {
 					return typeof document !== 'undefined' ? document.body : null;
 				},
 
-				children: _$_.ripple_element(function render_children(__anchor, _, __block) {
-					_$_.push_component();
-
+				children: _$_.ripple_element(function render_children(__anchor, __block) {
 					var div_2 = root_1();
 
 					_$_.append(__anchor, div_2);
-					_$_.pop_component();
 				})
 			},
 			_$_.active_block
@@ -73,13 +70,10 @@ export function ConditionalPortal(__anchor, _, __block) {
 							return typeof document !== 'undefined' ? document.body : null;
 						},
 
-						children: _$_.ripple_element(function render_children(__anchor, _, __block) {
-							_$_.push_component();
-
+						children: _$_.ripple_element(function render_children(__anchor, __block) {
 							var div_4 = root_4();
 
 							_$_.append(__anchor, div_4);
-							_$_.pop_component();
 						})
 					},
 					_$_.active_block
@@ -116,13 +110,10 @@ export function PortalWithMainContent(__anchor, _, __block) {
 					return typeof document !== 'undefined' ? document.body : null;
 				},
 
-				children: _$_.ripple_element(function render_children(__anchor, _, __block) {
-					_$_.push_component();
-
+				children: _$_.ripple_element(function render_children(__anchor, __block) {
 					var div_7 = root_6();
 
 					_$_.append(__anchor, div_7);
-					_$_.pop_component();
 				})
 			},
 			_$_.active_block
@@ -154,13 +145,10 @@ export function NestedContentWithPortal(__anchor, _, __block) {
 					return typeof document !== 'undefined' ? document.body : null;
 				},
 
-				children: _$_.ripple_element(function render_children(__anchor, _, __block) {
-					_$_.push_component();
-
+				children: _$_.ripple_element(function render_children(__anchor, __block) {
 					var div_10 = root_8();
 
 					_$_.append(__anchor, div_10);
-					_$_.pop_component();
 				})
 			},
 			_$_.active_block

package/tests/hydration/compiled/client/reactivity.js

@@ -19,13 +19,10 @@ export function TrackedState(__anchor, _, __block) {
 	{
 		var expression = _$_.child(div_1, true);
 
+		_$_.expression(expression, () => _$_.get(lazy));
 		_$_.pop(div_1);
 	}
 
-	_$_.render(() => {
-		_$_.set_text(expression, _$_.get(lazy));
-	});
-
 	_$_.append(__anchor, div_1);
 	_$_.pop_component();
 }
@@ -42,14 +39,11 @@ export function CounterWithInitial(__anchor, props, __block) {
 		{
 			var expression_1 = _$_.child(span_1, true);
 
+			_$_.expression(expression_1, () => _$_.get(lazy_1));
 			_$_.pop(span_1);
 		}
 	}
 
-	_$_.render(() => {
-		_$_.set_text(expression_1, _$_.get(lazy_1));
-	});
-
 	_$_.append(__anchor, div_2);
 	_$_.pop_component();
 }
@@ -76,13 +70,10 @@ export function ComputedValues(__anchor, _, __block) {
 	{
 		var expression_2 = _$_.child(div_3, true);
 
+		_$_.expression(expression_2, sum);
 		_$_.pop(div_3);
 	}
 
-	_$_.render(() => {
-		_$_.set_text(expression_2, sum());
-	});
-
 	_$_.append(__anchor, div_3);
 	_$_.pop_component();
 }
@@ -99,6 +90,7 @@ export function MultipleTracked(__anchor, _, __block) {
 	{
 		var expression_3 = _$_.child(div_4, true);
 
+		_$_.expression(expression_3, () => _$_.get(lazy_4));
 		_$_.pop(div_4);
 	}
 
@@ -107,6 +99,7 @@ export function MultipleTracked(__anchor, _, __block) {
 	{
 		var expression_4 = _$_.child(div_5, true);
 
+		_$_.expression(expression_4, () => _$_.get(lazy_5));
 		_$_.pop(div_5);
 	}
 
@@ -115,34 +108,11 @@ export function MultipleTracked(__anchor, _, __block) {
 	{
 		var expression_5 = _$_.child(div_6, true);
 
+		_$_.expression(expression_5, () => _$_.get(lazy_6));
 		_$_.pop(div_6);
 	}
 
 	_$_.next(2);
-
-	_$_.render(
-		(__prev) => {
-			var __a = _$_.get(lazy_4);
-
-			if (__prev.a !== __a) {
-				_$_.set_text(expression_3, __prev.a = __a);
-			}
-
-			var __b = _$_.get(lazy_5);
-
-			if (__prev.b !== __b) {
-				_$_.set_text(expression_4, __prev.b = __b);
-			}
-
-			var __c = _$_.get(lazy_6);
-
-			if (__prev.c !== __c) {
-				_$_.set_text(expression_5, __prev.c = __c);
-			}
-		},
-		{ a: ' ', b: ' ', c: ' ' }
-	);
-
 	_$_.append(__anchor, fragment_1, true);
 	_$_.pop_component();
 }
@@ -158,13 +128,10 @@ export function DerivedState(__anchor, _, __block) {
 	{
 		var expression_6 = _$_.child(div_7, true);
 
+		_$_.expression(expression_6, fullName);
 		_$_.pop(div_7);
 	}
 
-	_$_.render(() => {
-		_$_.set_text(expression_6, fullName());
-	});
-
 	_$_.append(__anchor, div_7);
 	_$_.pop_component();
 }

package/tests/hydration/compiled/client/return.js

@@ -1711,13 +1711,10 @@ export function ReactiveOuterInnerReturns(__anchor, _, __block) {
 		{
 			var expression = _$_.child(div_39, true);
 
+			_$_.expression(expression, () => _$_.get(lazy_4) ? 'a-on rest' : 'a-off rest');
 			_$_.pop(div_39);
 		}
 
-		_$_.render(() => {
-			_$_.set_text(expression, _$_.get(lazy_4) ? 'a-on rest' : 'a-off rest');
-		});
-
 		_$_.append(__anchor, div_39);
 	};
 

package/tests/hydration/compiled/client/try.js

@@ -60,7 +60,7 @@ function AsyncList(__anchor, _, __block) {
 					{
 						var expression = _$_.child(li_1, true);
 
-						expression.nodeValue = item;
+						_$_.expression(expression, () => item);
 						_$_.pop(li_1);
 					}
 
@@ -120,7 +120,7 @@ function AsyncContent(__anchor, _, __block) {
 		{
 			var expression_1 = _$_.child(div_3, true);
 
-			expression_1.nodeValue = value;
+			_$_.expression(expression_1, () => value);
 			_$_.pop(div_3);
 		}
 

package/tests/utils/compiler-compat-config.test.js

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+import { compile } from 'ripple/compiler';
+
+const source = `
+component App() {
+	<tsx:react>
+		<div className="react-content">{'Hello'}</div>
+	</tsx:react>
+}
+`;
+
+describe('compiler tsx compat configuration', () => {
+	it('allows tsx compat when no compat config is provided', () => {
+		expect(() =>
+			compile(source, '/src/App.ripple', {
+				mode: 'client',
+			}),
+		).not.toThrow();
+	});
+
+	it('throws when tsx compat kind is not configured', () => {
+		expect(() =>
+			compile(source, '/src/App.ripple', {
+				mode: 'client',
+				compat_kinds: [],
+			}),
+		).toThrow('<tsx:react> requires "react" compat to be configured in ripple.config.ts.');
+	});
+
+	it('allows tsx compat kinds that are configured', () => {
+		expect(() =>
+			compile(source, '/src/App.ripple', {
+				mode: 'client',
+				compat_kinds: ['react'],
+			}),
+		).not.toThrow();
+	});
+});

package/tests/utils/vite-plugin-config.test.js

@@ -0,0 +1,113 @@
+import { describe, expect, it } from 'vitest';
+import { RenderRoute, resolveRippleConfig } from '@ripple-ts/vite-plugin';
+
+const fake_compat_factory = Object.assign(
+	() =>
+		Object.assign(
+			{
+				createComponent() {},
+				createRoot() {
+					return () => {};
+				},
+			},
+			{
+				__ripple_compat__: {
+					from: '@ripple-ts/compat-react',
+					factory: 'createReactCompat',
+				},
+			},
+		),
+	{
+		__ripple_compat__: {
+			from: '@ripple-ts/compat-react',
+			factory: 'createReactCompat',
+		},
+	},
+);
+
+describe('vite-plugin-ripple config resolution', () => {
+	it('preserves compat descriptors and applies defaults', () => {
+		const config = resolveRippleConfig({
+			router: {
+				routes: [
+					new RenderRoute({
+						path: '/',
+						entry: '/src/App.ripple',
+					}),
+				],
+			},
+			compat: {
+				react: {
+					from: '@ripple-ts/compat-react',
+					factory: 'createReactCompat',
+				},
+			},
+		});
+
+		expect(config.compat).toEqual({
+			react: {
+				from: '@ripple-ts/compat-react',
+				factory: 'createReactCompat',
+			},
+		});
+		expect(config.middlewares).toEqual([]);
+		expect(config.platform.env).toEqual({});
+		expect(config.server.trustProxy).toBe(false);
+	});
+
+	it('defaults compat to an empty object', () => {
+		const config = resolveRippleConfig({
+			router: {
+				routes: [],
+			},
+		});
+
+		expect(config.compat).toEqual({});
+	});
+
+	it('allows compat-only configs without routes', () => {
+		const config = resolveRippleConfig({
+			compat: {
+				react: fake_compat_factory,
+			},
+		});
+
+		expect(config.router.routes).toEqual([]);
+		expect(config.compat.react).toEqual({
+			from: '@ripple-ts/compat-react',
+			factory: 'createReactCompat',
+		});
+	});
+
+	it('normalizes imported compat factories to descriptors', () => {
+		const config = resolveRippleConfig({
+			router: {
+				routes: [],
+			},
+			compat: {
+				react: fake_compat_factory,
+			},
+		});
+
+		expect(config.compat.react).toEqual({
+			from: '@ripple-ts/compat-react',
+			factory: 'createReactCompat',
+		});
+	});
+
+	it('normalizes invoked compat entries to descriptors', () => {
+		const config = resolveRippleConfig({
+			router: {
+				routes: [],
+			},
+			compat: {
+				react: fake_compat_factory(),
+			},
+		});
+
+		expect(config.compat.react).toEqual({
+			from: '@ripple-ts/compat-react',
+			factory: 'createReactCompat',
+		});
+	});
+});

package/tsconfig.json

@@ -26,7 +26,9 @@
     "./*.js",
     "./src/",
     "./tests/**/*.test.ripple",
+    "./tests/**/*.test.tsrx",
     "./tests/**/*.ripple",
+    "./tests/**/*.tsrx",
     "./tests/**/*.d.ts",
     "./tests/**/*.js"
   ],

package/tsconfig.typecheck.json

@@ -1,4 +1,5 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["./src/runtime/"]
+  "include": ["./src/"],
+  "exclude": ["./tests/"]
 }

package/types/index.d.ts

@@ -10,24 +10,14 @@ export type RippleElement = {
 /** Type for implicit children fragments rendered with `{children}`. */
 export type Children = RippleElement;
 
-export type CompatApi = {
-	createRoot: () => void;
-	createComponent: (node: any, children_fn: () => any) => void;
-	jsx: (type: any, props: any) => any;
-};
-
-export type CompatOptions = {
-	[key: string]: CompatApi;
-};
-
 export function mount(
 	component: Component,
-	options: { target: HTMLElement; props?: Record<string, any>; compat?: CompatOptions },
+	options: { target: HTMLElement; props?: Record<string, any> },
 ): () => void;
 
 export function hydrate(
 	component: Component,
-	options: { target: HTMLElement; props?: Record<string, any>; compat?: CompatOptions },
+	options: { target: HTMLElement; props?: Record<string, any> },
 ): () => void;
 
 export function tick(): Promise<void>;