ripple 0.3.43 → 0.3.45

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # ripple
 
+## 0.3.45
+
+### Patch Changes
+
+- [#1047](https://github.com/Ripple-TS/ripple/pull/1047)
+  [`d1acf12`](https://github.com/Ripple-TS/ripple/commit/d1acf129cdd0bf2ee596dbab26ec4df829a33880)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Removes duplicate utils,
+  moves most utils to @tsrx/core, include their tests.
+
+  Fixes some types
+
+- Updated dependencies
+  [[`d1acf12`](https://github.com/Ripple-TS/ripple/commit/d1acf129cdd0bf2ee596dbab26ec4df829a33880),
+  [`d1acf12`](https://github.com/Ripple-TS/ripple/commit/d1acf129cdd0bf2ee596dbab26ec4df829a33880),
+  [`3928ac8`](https://github.com/Ripple-TS/ripple/commit/3928ac8816399f9eccfd40081d480042a9d74030)]:
+  - @tsrx/ripple@0.0.27
+  - ripple@0.3.45
+
+## 0.3.44
+
+### Patch Changes
+
+- Updated dependencies
+  [[`f5a3c1b`](https://github.com/Ripple-TS/ripple/commit/f5a3c1b9e915c250c8cd1a7dcf4e80c44abe720f)]:
+  - @tsrx/ripple@0.0.26
+  - ripple@0.3.44
+
 ## 0.3.43
 
 ### 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.43",
+  "version": "0.3.45",
   "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.25"
+    "@tsrx/ripple": "0.0.27"
   },
   "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.23"
+    "@tsrx/core": "0.0.25"
   },
   "peerDependencies": {
-    "ripple": "0.3.43"
+    "ripple": "0.3.45"
   }
 }

package/src/runtime/internal/client/events.js

@@ -3,11 +3,11 @@
  * @typedef {EventTarget & Record<string, any>} DelegatedEventTarget
  */
 import {
-	event_name_from_capture,
-	is_capture_event,
-	is_non_delegated,
-	is_passive_event,
-} from '../../../utils/events.js';
+	eventNameFromCapture as event_name_from_capture,
+	isCaptureEvent as is_capture_event,
+	isNonDelegated as is_non_delegated,
+	isPassiveEvent as is_passive_event,
+} from '@tsrx/core';
 import {
 	active_block,
 	active_reaction,

package/src/runtime/internal/client/render.js

@@ -9,10 +9,13 @@ import {
 	is_ripple_object,
 } from './utils.js';
 import { event } from './events.js';
-import { get_attribute_event_name, is_event_attribute } from '../../../utils/events.js';
+import {
+	getAttributeEventName as get_attribute_event_name,
+	isEventAttribute as is_event_attribute,
+} from '@tsrx/core';
 import { get } from './runtime.js';
 import { clsx } from 'clsx';
-import { normalize_css_property_name } from '../../../utils/normalize_css_property_name.js';
+import { normalizeCssPropertyName as normalize_css_property_name } from '@tsrx/core';
 
 /**
  * @param {Text} text

package/src/runtime/internal/server/index.js

@@ -28,10 +28,10 @@ import {
 } from '../client/constants.js';
 import { DEV } from 'esm-env';
 import { is_ripple_object, array_slice } from '../client/utils.js';
-import { escape, escape_script } from '../../../utils/escaping.js';
-import { is_boolean_attribute } from '../../../utils/attributes.js';
+import { escape, escapeScript as escape_script } from '@tsrx/core';
+import { isBooleanAttribute as is_boolean_attribute } from '@tsrx/core';
 import { clsx } from 'clsx';
-import { normalize_css_property_name } from '../../../utils/normalize_css_property_name.js';
+import { normalizeCssPropertyName as normalize_css_property_name } from '@tsrx/core';
 import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../constants.js';
 import { is_tsrx_element, normalize_children, tsrx_element } from '../../element.js';
 import {

package/src/runtime/reactive-value.js

@@ -7,10 +7,13 @@ import { safe_scope, derived } from './internal/client/runtime.js';
  * @type {new <V>(fn: () => V, start: () => void | (() => void)) => ReactiveValueT<V>}
  */
 export const ReactiveValue = /** @type {any} */ (
-	function ReactiveValue(
-		/** @type {() => any} */ fn,
-		/** @type {() => void | (() => void)} */ start,
-	) {
+	/**
+	 * @template V
+	 * @param {() => V} fn
+	 * @param {() => void | (() => void)} start
+	 * @returns {Derived}
+	 */
+	function ReactiveValue(fn, start) {
 		if (!new.target) {
 			throw new TypeError('`ReactiveValue` must be called with new');
 		}
@@ -26,7 +29,7 @@ export const ReactiveValue = /** @type {any} */ (
 				s();
 				return fn();
 			},
-			(/** @type {any} */ _, /** @type {any} */ prev) => prev,
+			(_, prev) => prev,
 		);
 	}
 );

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

@@ -347,6 +347,9 @@ describe('basic client > components & composition', () => {
 			button: component({ children }: PropsWithChildren<{}>) {
 				<button>{children}</button>
 			},
+			arrowButton: component({ children }: PropsWithChildren<{}>) => {
+				<button class="arrow-button">{children}</button>
+			},
 		};
 
 		component App() {
@@ -358,6 +361,7 @@ describe('basic client > components & composition', () => {
 				<h1>{'Component as Property Test'}</h1>
 				<UI.span />
 				<UI.button {children} />
+				<UI.arrowButton {children} />
 			</div>
 		}
 
@@ -367,10 +371,13 @@ describe('basic client > components & composition', () => {
 		const span = container.querySelector('span');
 		const button = container.querySelector('button');
 		const buttonSpan = button.querySelector('span');
+		const arrowButton = container.querySelector('.arrow-button');
+		const arrowButtonSpan = arrowButton.querySelector('span');
 
 		expect(heading.textContent).toBe('Component as Property Test');
 		expect(span.textContent).toBe('Hello from Span');
 		expect(buttonSpan.textContent).toBe('Click me!');
+		expect(arrowButtonSpan.textContent).toBe('Click me!');
 	});
 
 	it('handles empty string children', () => {

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

@@ -55,6 +55,20 @@ second"</pre>
 		expect(container.querySelector('.multiline').textContent).toBe('first\nsecond');
 	});
 
+	it('renders bare double-quoted text in if-else branches', () => {
+		component App() {
+			let condition = false;
+
+			if (condition) {
+				"Hello Ripple"
+			} else "Hello React"
+		}
+
+		render(App);
+
+		expect(container.textContent).toBe('Hello React');
+	});
+
 	it('renders dynamic text', () => {
 		component Basic() {
 			let &[message] = track('Hello World');

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

@@ -79,6 +79,48 @@ describe('compiler > basics', () => {
 		);
 	});
 
+	it('parses backtick text inside fragments as JSX text', () => {
+		const source = `let a = component () {
+			<>
+				\`333\`
+			</>
+		}`;
+
+		const ast = parse(source);
+		const declaration = (ast.body[0] as AST.VariableDeclaration).declarations[0];
+		const component_node = declaration.init as unknown as AST.Component;
+		const fragment = component_node.body[0] as any;
+
+		expect(fragment.type).toBe('Tsx');
+		expect(fragment.children[0].type).toBe('JSXText');
+		expect(fragment.children[0].value).toContain('`333`');
+	});
+
+	it('parses backtick text around JSX elements inside fragments', () => {
+		const source = `let a = component () {
+			<>
+				\`
+				<b></b>
+				\`
+			</>
+		}`;
+
+		const ast = parse(source);
+		const declaration = (ast.body[0] as AST.VariableDeclaration).declarations[0];
+		const component_node = declaration.init as unknown as AST.Component;
+		const fragment = component_node.body[0] as any;
+
+		expect(fragment.type).toBe('Tsx');
+		expect(fragment.children.map((child: any) => child.type)).toEqual([
+			'JSXText',
+			'JSXElement',
+			'JSXText',
+		]);
+		expect(fragment.children[0].value).toContain('`');
+		expect(fragment.children[1].openingElement.name.name).toBe('b');
+		expect(fragment.children[2].value).toContain('`');
+	});
+
 	it('renders without crashing', () => {
 		component App() {
 			let foo: Record<string, number>;
@@ -282,6 +324,32 @@ describe('compiler > basics', () => {
 		expect(js.code).not.toMatch(/_\$_\.template\(`<!><!>`,\s*1,\s*3\)/);
 	});
 
+	it('emits anonymous component expressions as arrows in client output', () => {
+		const source = `
+const Inline = component(props) => {
+	<div>{props.x}</div>
+}
+`;
+		const result = compile(source, 'anonymous-component.tsrx', { mode: 'client' }).js.code;
+
+		expect(result).toContain('const Inline = (__anchor, props, __block) => {');
+		expect(result).not.toContain('function Inline');
+		expect(result).not.toContain('function (__anchor');
+	});
+
+	it('emits legacy anonymous component expressions as functions in client output', () => {
+		const source = `
+const Inline = component(props) {
+	<div>{props.x}</div>
+}
+`;
+		const result = compile(source, 'anonymous-component.tsrx', { mode: 'client' }).js.code;
+
+		expect(result).toContain('const Inline = function (__anchor, props, __block) {');
+		expect(result).not.toContain('function Inline');
+		expect(result).not.toContain('const Inline = (__anchor, props, __block) => {');
+	});
+
 	// 	it(
 	// 		'imports and uses only obfuscated Tracked imports when encountering only shorthand syntax',
 	// 		() => {
@@ -426,6 +494,32 @@ export component MyComponent<Item>(props: Props<Item>) {
 		expect(result).toContain('export function MyComponent<Item>(props: Props<Item>)');
 	});
 
+	it('emits anonymous component expressions as arrows in to_ts output', () => {
+		const source = `
+const Inline = component(props: { x: string }) => {
+	<div>{props.x}</div>
+}
+`;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
+
+		expect(result).toContain('const Inline = (props: { x: string }) => {');
+		expect(result).not.toContain('function Inline');
+		expect(result).not.toContain('function (props');
+	});
+
+	it('emits legacy anonymous component expressions as functions in to_ts output', () => {
+		const source = `
+const Inline = component(props: { x: string }) {
+	<div>{props.x}</div>
+}
+`;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
+
+		expect(result).toContain('const Inline = function(props: { x: string }) {');
+		expect(result).not.toContain('function Inline');
+		expect(result).not.toContain('const Inline = (props: { x: string }) => {');
+	});
+
 	it('preserves generic type arguments on JSX component tags in to_ts output', () => {
 		const source = `
 type User = { name: string };
@@ -882,6 +976,22 @@ export component App() {}
 		);
 	});
 
+	it('does not let nested for...of continues satisfy an outer if body', () => {
+		const source = `
+export component App({ items }: { items: string[] }) {
+	if (items.length) {
+		for (const item of items) {
+			if (!item) continue
+		}
+	}
+}`;
+
+		const result = compile(source, 'test.tsrx', { collect: true });
+		expect(result.errors.map((error) => error.message)).toContain(
+			'Component if statements must contain a template in their "then" body. Move the if statement into an effect if it does not render anything.',
+		);
+	});
+
 	it('preserves class extends generic type arguments in volar output', () => {
 		const source = `class StringMap extends Map<string, string> {}
 export component App() {}`;

package/tests/client/for.test.tsrx

@@ -1,4 +1,5 @@
 import { RippleArray, flushSync, track } from 'ripple';
+import { compile } from '@tsrx/ripple';
 
 describe('for statements', () => {
 	it('renders a simple static array', () => {
@@ -15,6 +16,71 @@ describe('for statements', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('allows continue to skip an iteration', () => {
+		component App() {
+			const items = ['Item 1', '', 'Item 3'];
+
+			for (const item of items) {
+				if (!item) continue;
+				<div class="item">{item}</div>
+			}
+		}
+
+		render(App);
+
+		expect(Array.from(container.querySelectorAll('.item')).map((el) => el.textContent)).toEqual([
+			'Item 1',
+			'Item 3',
+		]);
+	});
+
+	it('allows continue after setup statements to skip an iteration', () => {
+		const skipped = [];
+
+		component App() {
+			const items = ['Item 1', '', 'Item 3'];
+
+			for (const item of items) {
+				if (!item) {
+					skipped.push('skip');
+					continue;
+				}
+				<div class="item">{item}</div>
+			}
+		}
+
+		render(App);
+
+		expect(skipped).toEqual(['skip']);
+		expect(Array.from(container.querySelectorAll('.item')).map((el) => el.textContent)).toEqual([
+			'Item 1',
+			'Item 3',
+		]);
+	});
+
+	it('does not emit JavaScript continue in for...of skip callbacks', () => {
+		const { js } = compile(
+			`component App() {
+				const items = ['Item 1', '', 'Item 3'];
+				const skipped = [];
+
+				for (const item of items) {
+					if (!item) {
+						skipped.push('skip');
+						continue;
+					}
+					<div class="item">{item}</div>
+				}
+			}`,
+			'App.tsrx',
+			{ mode: 'client' },
+		);
+
+		expect(js.code).toContain('skipped.push(\'skip\')');
+		expect(js.code).not.toContain('continue;');
+		expect(js.code).not.toMatch(/continue;\s*return/);
+	});
+
 	it('renders a simple dynamic array', () => {
 		component App() {
 			const items = new RippleArray('Item 1', 'Item 2', 'Item 3');

package/tests/server/basic.components.test.tsrx

@@ -172,6 +172,9 @@ describe('basic server > components & composition', () => {
 			button: component({ children }: PropsWithChildren<{}>) {
 				<button>{children}</button>
 			},
+			arrowButton: component({ children }: PropsWithChildren<{}>) => {
+				<button class="arrow-button">{children}</button>
+			},
 		};
 
 		component App() {
@@ -183,6 +186,7 @@ describe('basic server > components & composition', () => {
 				<h1>{'Component as Property Test'}</h1>
 				<UI.span />
 				<UI.button {children} />
+				<UI.arrowButton {children} />
 			</div>
 		}
 
@@ -193,10 +197,13 @@ describe('basic server > components & composition', () => {
 		const span = document.querySelector('span');
 		const button = document.querySelector('button');
 		const buttonSpan = button.querySelector('span');
+		const arrowButton = document.querySelector('.arrow-button');
+		const arrowButtonSpan = arrowButton.querySelector('span');
 
 		expect(heading.textContent).toBe('Component as Property Test');
 		expect(span.textContent).toBe('Hello from Span');
 		expect(buttonSpan.textContent).toBe('Click me!');
+		expect(arrowButtonSpan.textContent).toBe('Click me!');
 	});
 
 	it('handles empty string children', async () => {

package/tests/server/compiler.test.tsrx

@@ -87,6 +87,44 @@ export default component A() {
 		expect(result).not.toContain(`"Hello";`);
 	});
 
+	it('decodes JSX-style entities before server text escaping', () => {
+		const result = compile(
+			`component App() {
+				<div>"Rock &amp; &quot;Roll&quot;"</div>
+			}`,
+			'/src/App.tsrx',
+			{ mode: 'server' },
+		);
+
+		expect(result.js.code).toContain(`_$_.output_push('Rock &amp; "Roll"')`);
+	});
+
+	it('emits anonymous component expressions as arrows in SSR output', () => {
+		const source = `
+const Inline = component(props) => {
+	<div>{props.x}</div>
+}
+`;
+		const result = compile(source, 'anonymous-component.tsrx', { mode: 'server' }).js.code;
+
+		expect(result).toContain('const Inline = (props) => {');
+		expect(result).not.toContain('function Inline');
+		expect(result).not.toContain('function (props');
+	});
+
+	it('emits legacy anonymous component expressions as functions in SSR output', () => {
+		const source = `
+const Inline = component(props) {
+	<div>{props.x}</div>
+}
+`;
+		const result = compile(source, 'anonymous-component.tsrx', { mode: 'server' }).js.code;
+
+		expect(result).toContain('const Inline = function (props) {');
+		expect(result).not.toContain('function Inline');
+		expect(result).not.toContain('const Inline = (props) => {');
+	});
+
 	it('throws error for calling children as a function in SSR mode', () => {
 		const source = `
 export component Layout({ children }) {

package/tests/server/for.test.tsrx

@@ -95,4 +95,71 @@ describe('for statements in SSR', () => {
 			'<div class="Item 1 0">Item 1 0</div><div class="Item 2 1">Item 2 1</div><div class="Item 3 2">Item 3 2</div>',
 		);
 	});
+
+	it('allows continue to skip a for...of iteration', async () => {
+		component App() {
+			const items = ['Item 1', '', 'Item 3'];
+
+			for (const item of items) {
+				if (!item) continue;
+				<div>{item}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBeHtml('<div>Item 1</div><div>Item 3</div>');
+	});
+
+	it('allows ordinary function control flow inside for...of loops', async () => {
+		component App() {
+			const items = ['Item 1', '', 'Item 3'];
+
+			for (const item of items) {
+				function label(value) {
+					for (let i = 0; i < 1; i++) {
+						while (i < 0) {
+							break;
+						}
+						if (!value) return 'missing';
+					}
+					return value;
+				}
+
+				<div>{label(item)}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBeHtml('<div>Item 1</div><div>missing</div><div>Item 3</div>');
+	});
+
+	it('throws for return statements inside for...of loops', () => {
+		expect(
+			() => compile(
+				`component App(items) {
+					for (const item of items) {
+						if (!item) return
+						<div>{item}</div>
+					}
+				}`,
+				'App.tsrx',
+				{ mode: 'server' },
+			),
+		).toThrow('Return statements are not allowed inside component for...of loops');
+	});
+
+	it('throws for break statements targeting for...of loops', () => {
+		expect(
+			() => compile(
+				`component App(items) {
+					for (const item of items) {
+						if (!item) break
+						<div>{item}</div>
+					}
+				}`,
+				'App.tsrx',
+				{ mode: 'server' },
+			),
+		).toThrow('Break statements are not allowed inside component for...of loops');
+	});
 });

package/tests/server/if.test.tsrx

@@ -27,6 +27,19 @@ describe('if statements in SSR', () => {
 		expect(body).toBeHtml('<div>Else block</div>');
 	});
 
+	it('renders bare double-quoted text in if-else branches', async () => {
+		component App() {
+			let condition = false;
+
+			if (condition) {
+				"Hello Ripple"
+			} else "Hello React"
+		}
+
+		const { body } = await render(App);
+		expect(body).toBeHtml('Hello React');
+	});
+
 	it('renders else if block when condition is true', async () => {
 		component App() {
 			let value = 'b';

package/types/index.d.ts

@@ -1,3 +1,6 @@
+import type { ExtendedEventOptions } from '@tsrx/core/types';
+export type { AddEventOptions, AddEventObject, ExtendedEventOptions } from '@tsrx/core/types';
+
 export type Component<T = Record<string, any>> = (props: T) => void;
 
 declare const TSRX_ELEMENT: unique symbol;
@@ -201,16 +204,6 @@ export function trackPending<V>(value: Tracked<V> | (() => any)): boolean;
 
 export function peek<V>(tracked: Tracked<V>): V;
 
-export interface AddEventOptions extends ExtendedEventOptions {
-	customName?: string;
-}
-
-export interface AddEventObject extends AddEventOptions, EventListenerObject {}
-
-export interface ExtendedEventOptions extends AddEventListenerOptions, EventListenerOptions {
-	delegated?: boolean;
-}
-
 export type OnEventListenerRemover = () => void;
 
 export function on<Type extends keyof WindowEventMap>(
@@ -364,7 +357,7 @@ export const RippleURL: RippleURLConstructor;
 export function createSubscriber(start: () => void | (() => void)): () => void;
 
 declare const REACTIVE_VALUE_BRAND: unique symbol;
-interface ReactiveValue<V> extends Tracked<V> {
+export interface ReactiveValue<V> extends Tracked<V> {
 	new (fn: () => Tracked<V>, start: () => void | (() => void)): Tracked<V>;
 	[REACTIVE_VALUE_BRAND]: void;
 }