ripple 0.2.152 → 0.2.154

package/README.md

@@ -1,8 +1,8 @@
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/trueadm/ripple/master/assets/ripple-dark.png">
-  <img src="https://raw.githubusercontent.com/trueadm/ripple/master/assets/ripple-light.png" alt="Ripple - the elegant TypeScript UI framework" />
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/Ripple-TS/ripple/master/assets/ripple-dark.png">
+  <img src="https://raw.githubusercontent.com/Ripple-TS/ripple/master/assets/ripple-light.png" alt="Ripple - the elegant TypeScript UI framework" />
 </picture>
 
 # What is Ripple?
 
-Ripple is an elegant TypeScript UI framework. To find out more, view [Ripple's Github README](https://github.com/trueadm/ripple).
+Ripple is an elegant TypeScript UI framework. To find out more, view [Ripple's Github README](https://github.com/Ripple-TS/ripple).

package/package.json

@@ -3,19 +3,19 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.152",
+  "version": "0.2.154",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/trueadm/ripple.git",
+    "url": "git+https://github.com/Ripple-TS/ripple.git",
     "directory": "packages/ripple"
   },
   "bugs": {
-    "url": "https://github.com/trueadm/ripple/issues"
+    "url": "https://github.com/Ripple-TS/ripple/issues"
   },
-  "homepage": "https://ripplejs.com",
+  "homepage": "https://ripple-ts.com",
   "keywords": [
     "ripple",
     "UI",
@@ -81,6 +81,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "ripple": "0.2.152"
+    "ripple": "0.2.154"
   }
 }

package/src/compiler/phases/1-parse/index.js

@@ -1795,7 +1795,7 @@ function RipplePlugin(config) {
 /**
  * Acorn doesn't add comments to the AST by itself. This factory returns the capabilities
  * to add them after the fact. They are needed in order to support `ripple-ignore` comments
- * in JS code and so that `prettier-plugin-ripple` doesn't remove all comments when formatting.
+ * in JS code and so that `prettier-plugin` doesn't remove all comments when formatting.
  * @param {string} source
  * @param {CommentWithLocation[]} comments
  * @param {number} [index=0] - Starting index

package/src/compiler/phases/3-transform/client/index.js

@@ -1240,29 +1240,50 @@ const visitors = {
 			// We're calling a component from within svg/mathml context
 			const is_with_ns = state.namespace !== DEFAULT_NAMESPACE;
 
+			let object_props;
+			if (is_spreading) {
+				// Optimization: if only one spread with no other props, pass it directly
+				if (props.length === 1 && props[0].type === 'SpreadElement') {
+					object_props = b.call('_$_.spread_props', b.thunk(props[0].argument));
+				} else {
+					// Multiple items: build array of objects/spreads for proper merge order
+					const items = [];
+					let current_obj_props = [];
+
+					for (const prop of props) {
+						if (prop.type === 'SpreadElement') {
+							// Flush accumulated regular props as an object
+							if (current_obj_props.length > 0) {
+								items.push(b.object(current_obj_props));
+								current_obj_props = [];
+							}
+							// Add the spread argument directly
+							items.push(prop.argument);
+						} else {
+							// Accumulate regular properties
+							current_obj_props.push(prop);
+						}
+					}
+
+					// Flush any remaining regular props
+					if (current_obj_props.length > 0) {
+						items.push(b.object(current_obj_props));
+					}
+
+					object_props = b.call('_$_.spread_props', b.thunk(b.array(items)));
+				}
+			} else {
+				object_props = b.object(props);
+			}
 			if (metadata.tracking) {
-				const shared = b.call(
-					'_$_.composite',
-					b.thunk(visit(node.id, state)),
-					id,
-					is_spreading
-						? b.call('_$_.spread_props', b.thunk(b.object(props)), b.id('__block'))
-						: b.object(props),
-				);
+				const shared = b.call('_$_.composite', b.thunk(visit(node.id, state)), id, object_props);
 				state.init.push(
 					is_with_ns
 						? b.call('_$_.with_ns', b.literal(state.namespace), b.thunk(shared))
 						: b.stmt(shared),
 				);
 			} else {
-				const shared = b.call(
-					visit(node.id, state),
-					id,
-					is_spreading
-						? b.call('_$_.spread_props', b.thunk(b.object(props)), b.id('__block'))
-						: b.object(props),
-					b.id('_$_.active_block'),
-				);
+				const shared = b.call(visit(node.id, state), id, object_props, b.id('_$_.active_block'));
 				state.init.push(
 					is_with_ns
 						? b.call('_$_.with_ns', b.literal(state.namespace), b.thunk(shared))

package/src/compiler/phases/3-transform/server/index.js

@@ -120,14 +120,23 @@ const visitors = {
 			component_fn = b.async(component_fn);
 		}
 
-		const declaration = b.function_declaration(node.id, component_fn.params, component_fn.body, component_fn.async);
+		const declaration = b.function_declaration(
+			node.id,
+			component_fn.params,
+			component_fn.body,
+			component_fn.async,
+		);
 
 		if (metadata.await) {
 			const parent = context.path.at(-1);
 			if (parent.type === 'Program' || parent.type === 'BlockStatement') {
 				const body = parent.body;
 				const index = body.indexOf(node);
-				body.splice(index + 1, 0, b.stmt(b.assignment('=', b.member(node.id, b.id('async')), b.true)));
+				body.splice(
+					index + 1,
+					0,
+					b.stmt(b.assignment('=', b.member(node.id, b.id('async')), b.true)),
+				);
 			}
 		}
 
@@ -281,10 +290,11 @@ const visitors = {
 			let class_attribute = null;
 
 			const handle_static_attr = (name, value) => {
-				const attr_str = ` ${name}${is_boolean_attribute(name) && value === true
+				const attr_str = ` ${name}${
+					is_boolean_attribute(name) && value === true
 						? ''
 						: `="${value === true ? '' : escape_html(value, true)}"`
-					}`;
+				}`;
 
 				if (is_spreading) {
 					// For spread attributes, store just the actual value, not the full attribute string
@@ -566,15 +576,13 @@ const visitors = {
 			return b.call(
 				'set',
 				context.visit(left, { ...context.state, metadata: { tracking: false } }),
-				context.visit(node.right)
+				context.visit(node.right),
 			);
 		}
 
 		return context.next();
 	},
 
-
-
 	ServerIdentifier(node, context) {
 		return b.id('_$_server_$_');
 	},
@@ -617,27 +625,36 @@ const visitors = {
 				context.state.metadata.await = true;
 			}
 
+			// Render pending block first
+			if (node.pending) {
+				const pending_body = transform_body(node.pending.body, {
+					...context,
+					state: { ...context.state, scope: context.state.scopes.get(node.pending) },
+				});
+				context.state.init.push(...pending_body);
+			}
+
 			// For SSR with pending block: render the resolved content wrapped in async
 			// In a streaming SSR implementation, we'd render pending first, then stream resolved
 			const try_statements =
 				node.handler !== null
 					? [
-						b.try(
-							b.block(body),
-							b.catch_clause(
-								node.handler.param || b.id('error'),
-								b.block(
-									transform_body(node.handler.body.body, {
-										...context,
-										state: {
-											...context.state,
-											scope: context.state.scopes.get(node.handler.body),
-										},
-									}),
+							b.try(
+								b.block(body),
+								b.catch_clause(
+									node.handler.param || b.id('error'),
+									b.block(
+										transform_body(node.handler.body.body, {
+											...context,
+											state: {
+												...context.state,
+												scope: context.state.scopes.get(node.handler.body),
+											},
+										}),
+									),
 								),
 							),
-						),
-					]
+						]
 					: body;
 
 			context.state.init.push(
@@ -664,8 +681,8 @@ const visitors = {
 	},
 
 	AwaitExpression(node, context) {
-		context.state.scope.server_block = true
-		context.inside_server_block = true
+		context.state.scope.server_block = true;
+		context.inside_server_block = true;
 		if (context.state.to_ts) {
 			return context.next();
 		}
@@ -715,7 +732,9 @@ const visitors = {
 
 		if (expression.type === 'Literal') {
 			state.init.push(
-				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(escape(expression.value)))),
+				b.stmt(
+					b.call(b.member(b.id('__output'), b.id('push')), b.literal(escape(expression.value))),
+				),
 			);
 		} else {
 			state.init.push(
@@ -810,7 +829,6 @@ export function transform_server(filename, source, analysis) {
 	}
 
 	// Add async property to component functions
-	
 
 	for (const import_node of state.imports) {
 		program.body.unshift(b.stmt(b.id(import_node)));

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

@@ -29,6 +29,8 @@ export function on(element, type, handler, options = {}) {
 	};
 }
 
+let last_propagated_event = null;
+
 /**
  * @this {EventTarget}
  * @param {Event} event
@@ -41,6 +43,8 @@ export function handle_event_propagation(event) {
 	var path = event.composedPath?.() || [];
 	var current_target = /** @type {null | Element} */ (path[0] || event.target);
 
+	last_propagated_event = event;
+
 	// composedPath contains list of nodes the event has propagated through.
 	// We check __root to skip all nodes below it in case this is a
 	// parent of the __root node, which indicates that there's nested
@@ -48,7 +52,7 @@ export function handle_event_propagation(event) {
 	var path_idx = 0;
 
 	// @ts-expect-error is added below
-	var handled_at = event.__root;
+	var handled_at = last_propagated_event === event && event.__root;
 
 	if (handled_at) {
 		var at_idx = path.indexOf(handled_at);

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

@@ -47,9 +47,10 @@ export {
 	derived,
 	maybe_tracked,
 	tick,
-	proxy_tracked,
+	proxy_props,
 	with_block,
 	with_ns,
+	handle_error,
 } from './runtime.js';
 
 export { composite } from './composite.js';

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

@@ -124,17 +124,21 @@ export function apply_styles(element, newStyles) {
 
 /**
  * @param {Element} element
- * @param {Record<string, any>} attributes
+ * @param {Record<string, any>} prev
+ * @param {Record<string, any>} next
  * @returns {void}
  */
-export function set_attributes(element, attributes) {
+export function set_attributes(element, prev, next) {
 	let found_enumerable_keys = false;
 
-	for (const key in attributes) {
+	for (const key in next) {
 		if (key === 'children') continue;
 		found_enumerable_keys = true;
 
-		let value = attributes[key];
+		let value = next[key];
+		if (prev[key] === value && key !== '#class') {
+			continue;
+		}
 		if (is_tracked_object(value)) {
 			value = get(value);
 		}
@@ -143,13 +147,16 @@ export function set_attributes(element, attributes) {
 
 	// Only if no enumerable keys but attributes object exists
 	// This handles spread_props Proxy objects from dynamic elements with {...spread}
-	if (!found_enumerable_keys && attributes) {
-		const allKeys = Reflect.ownKeys(attributes);
+	if (!found_enumerable_keys && next) {
+		const allKeys = Reflect.ownKeys(next);
 		for (const key of allKeys) {
 			if (key === 'children') continue;
 			if (typeof key === 'symbol') continue; // Skip symbols - handled by apply_element_spread
 
-			let value = attributes[key];
+			let value = next[key];
+			if (prev[key] === value && key !== '#class') {
+				continue;
+			}
 			if (is_tracked_object(value)) {
 				value = get(value);
 			}
@@ -285,13 +292,13 @@ export function set_selected(element, selected) {
  * @returns {() => void}
  */
 export function apply_element_spread(element, fn) {
-	/** @type {Record<string | symbol, any> | undefined} */
-	var prev;
+	/** @type {Record<string | symbol, any>} */
+	var prev = {};
 	/** @type {Record<symbol, Block>} */
 	var effects = {};
 
 	return () => {
-		var next = fn();
+		var next = { ...fn() };
 
 		for (let symbol of get_own_property_symbols(effects)) {
 			if (!next[symbol]) {
@@ -300,10 +307,6 @@ export function apply_element_spread(element, fn) {
 		}
 
 		for (const symbol of get_own_property_symbols(next)) {
-			// Ensure we are not trying to write to a proxied object
-			if (TRACKED_OBJECT in next) {
-				next = { ...next };
-			}
 			var ref_fn = next[symbol];
 
 			if (symbol.description === REF_PROP && (!prev || ref_fn !== prev[symbol])) {
@@ -316,7 +319,7 @@ export function apply_element_spread(element, fn) {
 			next[symbol] = ref_fn;
 		}
 
-		set_attributes(element, next);
+		set_attributes(element, prev, next);
 
 		prev = next;
 	};

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

@@ -922,42 +922,107 @@ export function flush_sync(fn) {
 
 /**
  * @param {() => Object} fn
- * @param {Block} block
  * @returns {Object}
  */
-export function spread_props(fn, block) {
-	var computed = derived(fn, block);
-	return proxy_tracked(computed);
+export function spread_props(fn) {
+	return proxy_props(fn);
 }
 
 /**
- * @param {Tracked | Derived} tracked
+ * @param {() => Object} fn
  * @returns {Object}
  */
-export function proxy_tracked(tracked) {
+export function proxy_props(fn) {
 	return new Proxy(
 		{},
 		{
 			get(_, property) {
-				const obj = get(tracked);
+				/** @type {Record<string | symbol, any> | Record<string | symbol, any>[]} */
+				var obj = fn();
+
+				// Handle array of objects/spreads (for multiple props)
+				if (is_array(obj)) {
+					// Search in reverse order (right-to-left) since later props override earlier ones
+					/** @type {Record<string | symbol, any>} */
+					var item;
+					for (var i = obj.length - 1; i >= 0; i--) {
+						item = obj[i];
+						if (property in item) {
+							return item[property];
+						}
+					}
+					return undefined;
+				}
+
+				// Single object case
 				return obj[property];
 			},
 			has(_, property) {
 				if (property === TRACKED_OBJECT) {
 					return true;
 				}
-				const obj = get(tracked);
+				/** @type {Record<string | symbol, any> | Record<string | symbol, any>[]} */
+				var obj = fn();
+
+				// Handle array of objects/spreads
+				if (is_array(obj)) {
+					for (var i = obj.length - 1; i >= 0; i--) {
+						if (property in obj[i]) {
+							return true;
+						}
+					}
+					return false;
+				}
+
 				return property in obj;
 			},
 			getOwnPropertyDescriptor(_, key) {
-				const obj = get(tracked);
+				/** @type {Record<string | symbol, any> | Record<string | symbol, any>[]} */
+				var obj = fn();
+
+				// Handle array of objects/spreads
+				if (is_array(obj)) {
+					/** @type {Record<string | symbol, any>} */
+					var item;
+					for (var i = obj.length - 1; i >= 0; i--) {
+						item = obj[i];
+						if (key in item) {
+							return get_descriptor(item, key);
+						}
+					}
+					return undefined;
+				}
 
 				if (key in obj) {
 					return get_descriptor(obj, key);
 				}
 			},
 			ownKeys() {
-				const obj = get(tracked);
+				/** @type {Record<string | symbol, any> | Record<string | symbol, any>[]} */
+				var obj = fn();
+				/** @type {Record<string | symbol, 1>} */
+				var done = {};
+				/** @type {(string | symbol)[]} */
+				var keys = [];
+
+				// Handle array of objects/spreads
+				if (is_array(obj)) {
+					// Collect all keys from all objects, order doesn't matter
+					/** @type {Record<string | symbol, any>} */
+					var item;
+					for (var i = 0; i < obj.length; i++) {
+						item = obj[i];
+						for (const key of Reflect.ownKeys(item)) {
+							if (done[key]) {
+								continue;
+							}
+							done[key] = 1;
+							keys.push(key);
+						}
+					}
+					return keys;
+				}
+
 				return Reflect.ownKeys(obj);
 			},
 		},

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

@@ -1,5 +1,6 @@
+import { Readable } from 'stream';
 /** @import { Component, Derived } from '#server' */
-/** @import { render } from 'ripple/server'*/
+/** @import { render, renderToStream, SSRComponent } from 'ripple/server'*/
 import { DERIVED, UNINITIALIZED } from '../client/constants.js';
 import { is_tracked_object } from '../client/utils.js';
 import { escape } from '../../../utils/escaping.js';
@@ -34,12 +35,16 @@ class Output {
 	promises = [];
 	/** @type {Output | null} */
 	#parent = null;
+	/** @type {import('stream').Readable | null} */
+	#stream = null;
 
 	/**
 	 * @param {Output | null} parent
+	 * @param {import('stream').Readable | null} stream
 	 */
-	constructor(parent) {
+	constructor(parent, stream = null) {
 		this.#parent = parent;
+		this.#stream = stream;
 	}
 
 	/**
@@ -47,7 +52,11 @@ class Output {
 	 * @returns {void}
 	 */
 	push(str) {
-		this.body += str;
+		if (this.#stream) {
+			this.#stream.push(str);
+		} else {
+			this.body += str;
+		}
 	}
 
 	/**
@@ -61,7 +70,7 @@ class Output {
 
 /** @type {render} */
 export async function render(component) {
-	const output = new Output(null);
+	const output = new Output(null, null);
 	let head = '';
 	let body = '';
 	let css = new Set();
@@ -76,14 +85,45 @@ export async function render(component) {
 			await Promise.all(output.promises);
 		}
 
-		head = output.head
-		body = output.body
-		css = output.css
+		head = output.head;
+		body = output.body;
+		css = output.css;
+	} catch (error) {
+		console.log(error);
 	}
-	catch (error) {
-		console.log(error)
+	return { head, body, css };
+}
+
+/** @type {renderToStream} */
+export function renderToStream(component) {
+	const stream = new Readable({
+		read() {},
+	});
+	const output = new Output(null, stream);
+	render_in_chunks(component, stream, output);
+	return stream;
+}
+/**
+ *
+ * @param {SSRComponent} component
+ * @param {Readable} stream
+ * @param {Output} output
+ */
+async function render_in_chunks(component, stream, output) {
+	try {
+		if (component.async) {
+			await component(output, {});
+		} else {
+			component(output, {});
+		}
+		if (output.promises.length > 0) {
+			await Promise.all(output.promises);
+		}
+		stream.push(null);
+	} catch (error) {
+		console.error(error);
+		stream.emit('error', error);
 	}
-	return { head, body, css }
 }
 /**
  * @returns {void}
@@ -144,7 +184,7 @@ export function get(tracked) {
 		return tracked;
 	}
 
-	return (tracked.f & DERIVED) !== 0 ? get_derived(/** @type {Derived} */(tracked)) : tracked.v;
+	return (tracked.f & DERIVED) !== 0 ? get_derived(/** @type {Derived} */ (tracked)) : tracked.v;
 }
 
 /**

package/src/server/index.js

@@ -1,3 +1,3 @@
-export { render } from '../runtime/internal/server/index.js';
+export { render, renderToStream } from '../runtime/internal/server/index.js';
 export { get_css_for_hashes } from '../runtime/internal/server/css-registry.js';
 export { executeServerFunction } from '../runtime/internal/server/rpc.js';