ripple 0.3.10 → 0.3.12

package/src/compiler/utils.js

@@ -1087,3 +1087,177 @@ export function get_ripple_namespace_call_name(name) {
 export function ripple_import_requires_block(name) {
 	return name !== 'effect' && name !== 'untrack' && name !== 'Context';
 }
+
+/**
+ * Converts a JSXMemberExpression to an AST MemberExpression.
+ * e.g., <Foo.Bar.Baz> → MemberExpression(MemberExpression(Foo, Bar), Baz)
+ * @param {import('estree-jsx').JSXMemberExpression} jsx_member
+ * @returns {AST.MemberExpression}
+ */
+function jsx_member_expression_to_member_expression(jsx_member) {
+	/** @type {AST.Expression} */
+	let object;
+
+	if (jsx_member.object.type === 'JSXMemberExpression') {
+		// Recursively convert nested member expressions
+		object = jsx_member_expression_to_member_expression(jsx_member.object);
+	} else {
+		// Base case: JSXIdentifier
+		object = /** @type {AST.Identifier} */ ({
+			type: 'Identifier',
+			name: jsx_member.object.name,
+			start: jsx_member.object.start,
+			end: jsx_member.object.end,
+		});
+	}
+
+	return /** @type {AST.MemberExpression} */ ({
+		type: 'MemberExpression',
+		object,
+		property: /** @type {AST.Identifier} */ ({
+			type: 'Identifier',
+			name: jsx_member.property.name,
+			start: jsx_member.property.start,
+			end: jsx_member.property.end,
+		}),
+		computed: false,
+		optional: false,
+		start: jsx_member.start,
+		end: jsx_member.end,
+	});
+}
+
+/**
+ * Converts a JSX AST node (JSXElement, JSXText, etc.) to a Ripple AST node
+ * (Element, Text, RippleExpression) for processing inside `<tsx>` blocks.
+ * @param {AST.Node} node
+ * @returns {AST.Node | AST.Node[] | null}
+ */
+export function jsx_to_ripple_node(node) {
+	if (node.type === 'JSXElement') {
+		const opening = node.openingElement;
+		const name = opening.name;
+
+		/** @type {AST.Identifier | AST.MemberExpression} */
+		let id;
+
+		if (name.type === 'JSXIdentifier') {
+			id = /** @type {AST.Identifier} */ ({
+				type: 'Identifier',
+				name: name.name,
+				start: name.start,
+				end: name.end,
+			});
+		} else if (name.type === 'JSXMemberExpression') {
+			// Convert JSXMemberExpression to MemberExpression
+			// e.g., <Foo.Bar.Baz> → MemberExpression(MemberExpression(Foo, Bar), Baz)
+			id = jsx_member_expression_to_member_expression(name);
+		} else if (name.type === 'JSXNamespacedName') {
+			// For JSXNamespacedName like <namespace:element>, create an identifier with the full name
+			id = /** @type {AST.Identifier} */ ({
+				type: 'Identifier',
+				name: name.namespace.name + ':' + name.name.name,
+				start: name.start,
+				end: name.end,
+			});
+		} else {
+			// Fallback - should not reach here
+			id = /** @type {AST.Identifier} */ ({
+				type: 'Identifier',
+				name: 'unknown',
+				start: /** @type {any} */ (name).start,
+				end: /** @type {any} */ (name).end,
+			});
+		}
+
+		const attributes = opening.attributes
+			.map((attr) => {
+				if (attr.type === 'JSXAttribute') {
+					const is_dynamic = attr.value && attr.value.type === 'JSXExpressionContainer';
+					return /** @type {AST.Node} */ ({
+						type: 'Attribute',
+						name: {
+							type: 'Identifier',
+							name:
+								attr.name.type === 'JSXIdentifier'
+									? attr.name.name
+									: attr.name.namespace.name + ':' + attr.name.name.name,
+							tracked: is_dynamic,
+							start: attr.name.start,
+							end: attr.name.end,
+						},
+						value: attr.value
+							? attr.value.type === 'JSXExpressionContainer'
+								? attr.value.expression
+								: attr.value
+							: null,
+						shorthand: false,
+						start: attr.start,
+						end: attr.end,
+					});
+				} else if (attr.type === 'JSXSpreadAttribute') {
+					return /** @type {AST.Node} */ ({
+						type: 'SpreadAttribute',
+						argument: attr.argument,
+						start: attr.start,
+						end: attr.end,
+					});
+				}
+				return null;
+			})
+			.filter(Boolean);
+
+		const children = /** @type {AST.Node[]} */ (
+			/** @type {AST.Node[]} */ (node.children).map(jsx_to_ripple_node).flat().filter(Boolean)
+		);
+
+		return /** @type {AST.Element} */ (
+			/** @type {unknown} */ ({
+				type: 'Element',
+				id,
+				attributes,
+				children,
+				selfClosing: opening.selfClosing,
+				metadata: { scoped: false, path: /** @type {string[]} */ ([]) },
+				start: node.start,
+				end: node.end,
+			})
+		);
+	}
+
+	if (node.type === 'JSXText') {
+		if (node.value.trim() === '') return null;
+		return /** @type {AST.Node} */ ({
+			type: 'Text',
+			expression: {
+				type: 'Literal',
+				value: node.value,
+				raw: JSON.stringify(node.value),
+				start: node.start,
+				end: node.end,
+			},
+			metadata: {},
+			start: node.start,
+			end: node.end,
+		});
+	}
+
+	if (node.type === 'JSXExpressionContainer') {
+		if (node.expression.type === 'JSXEmptyExpression') return null;
+		return /** @type {AST.Node} */ ({
+			type: 'RippleExpression',
+			expression: node.expression,
+			metadata: {},
+			start: node.start,
+			end: node.end,
+		});
+	}
+
+	if (node.type === 'JSXFragment') {
+		return /** @type {AST.Node[]} */ (
+			/** @type {AST.Node[]} */ (node.children).map(jsx_to_ripple_node).flat().filter(Boolean)
+		);
+	}
+
+	return node;
+}

package/src/runtime/index-client.js

@@ -22,15 +22,24 @@ import { COMMENT_NODE, HYDRATION_START } from '../constants.js';
 // Re-export JSX runtime functions for jsxImportSource: "ripple"
 export { jsx, jsxs, Fragment } from '../jsx-runtime.js';
 
+/**
+ * @returns {CompatOptions | undefined}
+ */
+function get_default_compat() {
+	return /** @type {typeof globalThis & { __RIPPLE_COMPAT__?: CompatOptions }} */ (globalThis)
+		.__RIPPLE_COMPAT__;
+}
+
 /**
  * @param {(anchor: Node, props: Record<string, any>, active_block: Block | null) => void} component
- * @param {{ props?: Record<string, any>, target: HTMLElement, compat?: CompatOptions }} options
+ * @param {{ props?: Record<string, any>, target: HTMLElement }} options
  * @returns {() => void}
  */
 export function mount(component, options) {
 	init_operations();
 	remove_ssr_css();
 
+	const compat = get_default_compat();
 	const props = options.props || {};
 	const target = options.target;
 	const anchor = create_anchor();
@@ -46,7 +55,7 @@ export function mount(component, options) {
 
 	const _root = root(() => {
 		component(anchor, props, active_block);
-	}, options.compat);
+	}, compat);
 
 	return () => {
 		cleanup_events();
@@ -56,13 +65,14 @@ export function mount(component, options) {
 
 /**
  * @param {(anchor: Node, props: Record<string, any>, active_block: Block | null) => void} component
- * @param {{ props?: Record<string, any>, target: HTMLElement, compat?: CompatOptions }} options
+ * @param {{ props?: Record<string, any>, target: HTMLElement }} options
  * @returns {() => void}
  */
 export function hydrate(component, options) {
 	init_operations();
 	remove_ssr_css();
 
+	const compat = get_default_compat();
 	const props = options.props || {};
 	const target = options.target;
 	const was_hydrating = hydrating;
@@ -86,7 +96,7 @@ export function hydrate(component, options) {
 
 		_root = root(() => {
 			component(/** @type {Comment} */ (anchor), props, active_block);
-		}, options.compat);
+		}, compat);
 	} catch (e) {
 		throw e;
 	} finally {

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

@@ -74,9 +74,9 @@ export function composite(get_component, node, props) {
 						element.appendChild(child_anchor);
 
 						if (ns !== DEFAULT_NAMESPACE) {
-							with_ns(ns, () => props.children.render(child_anchor, {}, block));
+							with_ns(ns, () => props.children.render(child_anchor, block));
 						} else {
-							props.children.render(child_anchor, {}, block);
+							props.children.render(child_anchor, block);
 						}
 					}
 				};

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

@@ -1,13 +1,28 @@
 /** @import { Block } from '#client' */
 
 import { branch, destroy_block, render } from './blocks.js';
-import { UNINITIALIZED } from './constants.js';
+import { BRANCH_BLOCK, UNINITIALIZED } from './constants.js';
 import { create_text, get_next_sibling } from './operations.js';
 import { active_block } from './runtime.js';
 import { hydrating, set_hydrate_node } from './hydration.js';
 import { COMMENT_NODE, HYDRATION_END, HYDRATION_START, TEXT_NODE } from '../../../constants.js';
 import { is_ripple_element } from '../../element.js';
 
+/**
+ * Finds the nearest enclosing BRANCH_BLOCK in the block hierarchy.
+ * @param {Block | null} block
+ * @returns {Block | null}
+ */
+function find_enclosing_branch(block) {
+	while (block !== null) {
+		if ((block.f & BRANCH_BLOCK) !== 0) {
+			return block;
+		}
+		block = block.p;
+	}
+	return null;
+}
+
 /**
  * @param {Node} node
  * @param {() => any} get_value
@@ -25,6 +40,10 @@ export function expression(node, get_value) {
 	var value = UNINITIALIZED;
 	var is_element = false;
 	var initialized = false;
+	/** @type {Block | null} */
+	var modified_parent_branch = null;
+	/** @type {Node | null} */
+	var original_parent_start = null;
 
 	render(() => {
 		var next_value = get_value();
@@ -53,6 +72,12 @@ export function expression(node, get_value) {
 			if (child_block !== null) {
 				destroy_block(child_block);
 				child_block = null;
+				// Restore parent branch's start since we may update it again below
+				if (modified_parent_branch !== null && modified_parent_branch.s !== null) {
+					modified_parent_branch.s.start = original_parent_start;
+					modified_parent_branch = null;
+					original_parent_start = null;
+				}
 			}
 
 			if (end !== null && (initialized || !hydrating)) {
@@ -63,11 +88,41 @@ export function expression(node, get_value) {
 				set_hydrate_node(get_next_sibling(anchor) ?? end);
 			}
 
+			// Find the enclosing branch block BEFORE creating child_block
+			// so we can update its s.start to include content inserted before anchor
+			var parent_branch = find_enclosing_branch(active_block);
+
 			child_block = branch(() => {
 				var block = active_block;
-				next_value.render(end ?? anchor, {}, block);
+				next_value.render(end ?? anchor, block);
 			});
 
+			// Update parent branch's s.start to include content inserted before anchor.
+			// This ensures that when the parent branch is destroyed, the full DOM range
+			// (including RippleElement content) is removed.
+			if (
+				parent_branch !== null &&
+				parent_branch.s !== null &&
+				child_block.s !== null &&
+				child_block.s.start !== null
+			) {
+				// The child inserted content before the anchor. Update parent's start
+				// to encompass this content.
+				var child_start = child_block.s.start;
+				var parent_start = parent_branch.s.start;
+
+				// If parent's start is the anchor (or comes after child's start),
+				// update it to include the child's content
+				if (parent_start === anchor || parent_start === end) {
+					// Save original so we can restore it when switching to non-RippleElement
+					if (modified_parent_branch === null) {
+						modified_parent_branch = parent_branch;
+						original_parent_start = parent_start;
+					}
+					parent_branch.s.start = child_start;
+				}
+			}
+
 			value = next_value;
 			is_element = true;
 			initialized = true;
@@ -89,6 +144,13 @@ export function expression(node, get_value) {
 		if (child_block !== null) {
 			destroy_block(child_block);
 			child_block = null;
+			// Restore parent branch's start to original value since the child's DOM nodes
+			// have been removed and the old start reference would be stale
+			if (modified_parent_branch !== null && modified_parent_branch.s !== null) {
+				modified_parent_branch.s.start = original_parent_start;
+				modified_parent_branch = null;
+				original_parent_start = null;
+			}
 		}
 
 		if (is_hydration_marker) {

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

@@ -72,7 +72,7 @@ export function Portal(_, props) {
 
 			b = branch(() => {
 				if (is_ripple_element(children)) {
-					children.render(/** @type {Text} */ (anchor), {}, block);
+					children.render(/** @type {Text} */ (anchor), block);
 				}
 			});
 

package/src/utils/builders.js

@@ -513,6 +513,36 @@ export function ts_intersection_type(types, loc_info) {
 	return set_location(node, loc_info);
 }
 
+/**
+ * @param {'string' | 'number' | 'boolean' | 'any' | 'void' | 'null' | 'undefined' | 'never' | 'unknown' | 'bigint' | 'symbol' | 'object'} keyword
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TypeNode}
+ */
+export function ts_keyword_type(keyword, loc_info) {
+	/** @type {Record<string, string>} */
+	const keyword_to_type = {
+		string: 'TSStringKeyword',
+		number: 'TSNumberKeyword',
+		boolean: 'TSBooleanKeyword',
+		any: 'TSAnyKeyword',
+		void: 'TSVoidKeyword',
+		null: 'TSNullKeyword',
+		undefined: 'TSUndefinedKeyword',
+		never: 'TSNeverKeyword',
+		unknown: 'TSUnknownKeyword',
+		bigint: 'TSBigIntKeyword',
+		symbol: 'TSSymbolKeyword',
+		object: 'TSObjectKeyword',
+	};
+
+	const node = /** @type {AST.TypeNode} */ ({
+		type: keyword_to_type[keyword],
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
 /**
  * @param {AST.Node} type_annotation
  * @param {AST.NodeWithLocation} [loc_info]

package/tests/client/basic/__snapshots__/basic.rendering.test.ripple.snap

@@ -52,6 +52,7 @@ exports[`basic client > rendering & text > should handle lexical scopes correctl
 <div>
   <section>
     Nested scope variable
+    <!---->
   </section>
   
 </div>

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

@@ -167,8 +167,10 @@ describe('basic client > rendering & text', () => {
 	it('basic operations', () => {
 		component App() {
 			let &[count] = track(0);
-			<div>{count++}</div>
-			<div>{++count}</div>
+			const a = count++;
+			const b = ++count;
+			<div>{a}</div>
+			<div>{b}</div>
 			<div>{5}</div>
 			<div>{count}</div>
 		}

package/tests/client/composite/composite.render.test.ripple

@@ -192,3 +192,49 @@ describe('composite > render', () => {
 		expect(div.innerHTML).not.toContain('<undefined');
 	});
 });
+
+describe('scoped styles with children', () => {
+	it('generates correct CSS hashes for wrapper and child with empty style in App', () => {
+		component Wrapper(&{ children }: { children?: Component }) {
+			<div class="green">
+				{'Wrapper'}
+				{children}
+			</div>
+
+			<style>
+				.green {
+					color: green;
+				}
+			</style>
+		}
+
+		component Child() {
+			<div class="red">{'Child'}</div>
+
+			<style>
+				.red {
+					color: red;
+				}
+			</style>
+		}
+
+		component App() {
+			<Wrapper>
+				<Child />
+			</Wrapper>
+			<style></style>
+		}
+
+		render(App);
+
+		const wrapper = container.querySelector('.green');
+		const child = container.querySelector('.red');
+
+		const wrapper_classes = Array.from(wrapper.classList).filter((c) => c.startsWith('ripple-'));
+		const child_classes = Array.from(child.classList).filter((c) => c.startsWith('ripple-'));
+
+		expect(wrapper_classes).toHaveLength(1);
+		expect(child_classes).toHaveLength(1);
+		expect(wrapper_classes[0]).not.toBe(child_classes[0]);
+	});
+});

package/tests/client/return.test.ripple

@@ -2498,3 +2498,104 @@ describe('early return in client components', () => {
 		});
 	});
 });
+
+describe('throw statements in if blocks', () => {
+	it('allows if statement with throw in then body', () => {
+		const code = `
+			export default component App() {
+				let error = true;
+				if (error) {
+					throw new Error('Test error');
+				}
+				<div>{'no error'}</div>
+			}
+		`;
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).not.toThrow();
+	});
+
+	it('allows if statement with throw in else body', () => {
+		const code = `
+			export default component App() {
+				let error = false;
+				if (error) {
+					<div>{'no error'}</div>
+				} else {
+					throw new Error('Test error');
+				}
+			}
+		`;
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).not.toThrow();
+	});
+
+	it('allows if statement with throw in both bodies', () => {
+		const code = `
+			export default component App() {
+				let mode = 'error';
+				if (mode === 'a') {
+					<div>{'a'}</div>
+				} else if (mode === 'b') {
+					<div>{'b'}</div>
+				} else {
+					throw new Error('Unknown mode');
+				}
+			}
+		`;
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).not.toThrow();
+	});
+
+	it('allows nested if with throw', () => {
+		const code = `
+			export default component App() {
+				let a = true;
+				let b = true;
+				if (a) {
+					if (b) {
+						throw new Error('Both true');
+					}
+					<div>{'a only'}</div>
+				}
+				<div>{'rest'}</div>
+			}
+		`;
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).not.toThrow();
+	});
+
+	it('allows throw with reactive condition', () => {
+		const code = `
+			export default component App() {
+				let &[error] = track(false);
+				if (error) {
+					throw new Error('Error occurred');
+				}
+				<div>{'success'}</div>
+			}
+		`;
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).not.toThrow();
+	});
+
+	it('allows throw with template in then body and throw in else body', () => {
+		const code = `
+			export default component App() {
+				let error = true;
+				if (error) {
+					<div>{'error case'}</div>
+				} else {
+					throw new Error('No error');
+				}
+			}
+		`;
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).not.toThrow();
+	});
+});