ripple 0.2.164 → 0.2.166

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.164",
+  "version": "0.2.166",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -81,6 +81,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "ripple": "0.2.164"
+    "ripple": "0.2.166"
   }
 }

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

@@ -1,4 +1,4 @@
-/** @import {Expression, FunctionExpression, Node, Program} from 'estree' */
+/** @import {Expression, FunctionExpression, Node, Program, Statement} from 'estree' */
 
 /** @typedef {Map<number, {offset: number, delta: number}>} PostProcessingChanges */
 /** @typedef {number[]} LineOffsets */
@@ -129,7 +129,7 @@ function visit_head_element(node, context) {
 	}
 }
 
-function apply_updates(init, update) {
+function apply_updates(init, update, state) {
 	if (update.length === 1) {
 		init.push(
 			b.stmt(
@@ -155,8 +155,25 @@ function apply_updates(init, update) {
 		const render_statements = [];
 		let index = 0;
 
+		const grouped_updates = new Map();
+
 		for (const u of update) {
 			if (u.initial) {
+				const id =
+					u.identity.type === 'Identifier' ? state.scope.get(u.identity.name)?.initial : u.identity;
+				let updates = grouped_updates.get(id);
+
+				if (updates === undefined) {
+					updates = [];
+					grouped_updates.set(id, updates);
+				}
+				updates.push(u);
+			}
+		}
+
+		for (const [, updates] of grouped_updates) {
+			if (updates.length === 1) {
+				const u = updates[0];
 				const key = index_to_key(index);
 				index_map.set(u.operation, key);
 				initial.push(b.prop('init', b.id(key), u.initial));
@@ -171,6 +188,29 @@ function apply_updates(init, update) {
 				);
 				index++;
 			} else {
+				const key = index_to_key(index);
+				/** @type {Array<Statement>} */
+				const if_body = [
+					b.stmt(b.assignment('=', b.member(b.id('__prev'), b.id(key)), b.id('__' + key))),
+				];
+				initial.push(b.prop('init', b.id(key), updates[0].initial));
+				render_statements.push(
+					b.var('__' + key, updates[0].expression),
+					b.if(
+						b.binary('!==', b.member(b.id('__prev'), b.id(key)), b.id('__' + key)),
+						b.block(if_body),
+					),
+				);
+				for (const u of updates) {
+					index_map.set(u.operation, key);
+					if_body.push(u.operation(b.id('__' + key)));
+					index++;
+				}
+			}
+		}
+
+		for (const u of update) {
+			if (!u.initial) {
 				render_statements.push(u.operation);
 			}
 		}
@@ -835,6 +875,7 @@ const visitors = {
 		if (is_dom_element) {
 			let class_attribute = null;
 			let style_attribute = null;
+			/** @type {Array<Statement>} */
 			const local_updates = [];
 			const is_void = is_void_element(node.id.name);
 
@@ -997,9 +1038,11 @@ const visitors = {
 								});
 							} else {
 								local_updates.push({
-									operation: b.stmt(
-										b.call('_$_.set_attribute', id, b.literal(attribute), expression),
-									),
+									operation: (key) =>
+										b.stmt(b.call('_$_.set_attribute', id, b.literal(attribute), key)),
+									expression,
+									identity: attr.value,
+									initial: b.void0,
 								});
 							}
 						} else {
@@ -1044,6 +1087,7 @@ const visitors = {
 							operation: (key) =>
 								b.stmt(b.call('_$_.set_class', id, key, hash_arg, b.literal(is_html))),
 							expression,
+							identity: class_attribute.value,
 							initial: b.literal(''),
 						});
 					} else {
@@ -1063,14 +1107,16 @@ const visitors = {
 					const id = state.flush_node();
 					const metadata = { tracking: false, await: false };
 					const expression = visit(style_attribute.value, { ...state, metadata });
-					const name = style_attribute.name.name;
-
-					const statement = b.stmt(b.call('_$_.set_attribute', id, b.literal(name), expression));
 
 					if (metadata.tracking) {
-						local_updates.push({ operation: statement });
+						local_updates.push({
+							operation: (key) => b.stmt(b.call('_$_.set_style', id, key)),
+							identity: style_attribute.value,
+							expression,
+							initial: b.void0,
+						});
 					} else {
-						state.init.push(statement);
+						state.init.push(b.stmt(b.call('_$_.set_style', id, expression)));
 					}
 				}
 			}
@@ -1084,7 +1130,9 @@ const visitors = {
 				);
 			}
 
+			/** @type {Array<Statement>} */
 			const init = [];
+			/** @type {Array<Statement>} */
 			const update = [];
 
 			if (!is_void) {
@@ -1100,7 +1148,7 @@ const visitors = {
 
 			if (update.length > 0) {
 				if (state.scope.parent.declarations.size > 0) {
-					apply_updates(init, update);
+					apply_updates(init, update, state);
 				} else {
 					state.update.push(...update);
 				}
@@ -1159,7 +1207,9 @@ const visitors = {
 						),
 					);
 				} else if (attr.type === 'RefAttribute') {
-					props.push(b.prop('init', b.call('_$_.ref_prop'), visit(attr.argument, state), true));
+					const ref_id = state.scope.generate('ref');
+					state.setup.push(b.var(ref_id, b.call('_$_.ref_prop')));
+					props.push(b.prop('init', b.id(ref_id), visit(attr.argument, state), true));
 				} else {
 					throw new Error('TODO');
 				}
@@ -2250,6 +2300,7 @@ function transform_children(children, context) {
 					state.update.push({
 						operation: (key) => b.stmt(b.call('_$_.set_text', id, key)),
 						expression,
+						identity: node.expression,
 						initial: b.literal(' '),
 					});
 					if (metadata.await) {
@@ -2277,6 +2328,7 @@ function transform_children(children, context) {
 					state.update.push({
 						operation: (key) => b.stmt(b.call('_$_.set_text', id, key)),
 						expression,
+						identity: node.expression,
 						initial: b.literal(' '),
 					});
 					if (metadata.await) {
@@ -2354,7 +2406,7 @@ function transform_body(body, { visit, state }) {
 			// In TypeScript mode, just add the update statements directly
 			body_state.init.push(...body_state.update);
 		} else {
-			apply_updates(body_state.init, body_state.update);
+			apply_updates(body_state.init, body_state.update, state);
 		}
 	}
 

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

@@ -9,13 +9,14 @@ export {
 export {
 	set_text,
 	set_class,
+	set_style,
 	set_attribute,
 	set_value,
 	set_checked,
 	set_selected,
 } from './render.js';
 
-export { render, render_spread, async, ref, branch } from './blocks.js';
+export { render, render_spread, async, ref, branch, destroy_block } from './blocks.js';
 
 export { event, delegate } from './events.js';
 
@@ -60,7 +61,7 @@ export { for_block as for, for_block_keyed as for_keyed } from './for.js';
 
 export { if_block as if } from './if.js';
 
-export { try_block as try, aborted } from './try.js';
+export { try_block as try, aborted, suspend } from './try.js';
 
 export { switch_block as switch } from './switch.js';
 
@@ -83,3 +84,5 @@ export { html } from './html.js';
 export { rpc } from './rpc.js';
 
 export { tsx_compat } from './compat.js';
+
+export { TRY_BLOCK } from './constants.js';

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

@@ -28,12 +28,6 @@ export function init_operations() {
 	// @ts-expect-error
 	element_prototype.__click = undefined;
 	// @ts-expect-error
-	element_prototype.__attributes = null;
-	// @ts-expect-error
-	element_prototype.__styles = null;
-	// @ts-expect-error
-	element_prototype.__e = undefined;
-	// @ts-expect-error
 	event_target_prototype.__root = undefined;
 }
 

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

@@ -1,7 +1,7 @@
 /** @import { Block } from '#client' */
 
 import { destroy_block, ref } from './blocks.js';
-import { REF_PROP, TRACKED, TRACKED_OBJECT } from './constants.js';
+import { REF_PROP } from './constants.js';
 import {
 	get_descriptors,
 	get_own_property_symbols,
@@ -69,25 +69,29 @@ function get_setters(element) {
 
 /**
  * @param {Element} element
- * @param {string} attribute
  * @param {any} value
  * @returns {void}
  */
-export function set_attribute(element, attribute, value) {
-	// @ts-expect-error
-	var attributes = (element.__attributes ??= {});
-
-	if (attributes[attribute] === (attributes[attribute] = value)) return;
-
-	if (attribute === 'style' && '__styles' in element) {
-		// reset styles to force style: directive to update
-		element.__styles = {};
+export function set_style(element, value) {
+	if (value == null) {
+		element.removeAttribute('style');
+	} else if (typeof value !== 'string') {
+		apply_styles(/** @type {HTMLElement} */ (element), value);
+	} else {
+		// @ts-ignore
+		element.style.cssText = value;
 	}
+}
 
+/**
+ * @param {Element} element
+ * @param {string} attribute
+ * @param {any} value
+ * @returns {void}
+ */
+export function set_attribute(element, attribute, value) {
 	if (value == null) {
 		element.removeAttribute(attribute);
-	} else if (attribute === 'style' && typeof value !== 'string') {
-		apply_styles(/** @type {HTMLElement} */ (element), value);
 	} else if (typeof value !== 'string' && get_setters(element).includes(attribute)) {
 		/** @type {any} */ (element)[attribute] = value;
 	} else {
@@ -97,13 +101,13 @@ export function set_attribute(element, attribute, value) {
 
 /**
  * @param {HTMLElement} element
- * @param {HTMLElement['style']} newStyles
+ * @param {HTMLElement['style']} new_styles
  */
-export function apply_styles(element, newStyles) {
+export function apply_styles(element, new_styles) {
 	const style = element.style;
 	const new_properties = new Set();
 
-	for (const [property, value] of Object.entries(newStyles)) {
+	for (const [property, value] of Object.entries(new_styles)) {
 		const normalized_property = normalize_css_property_name(property);
 		const normalized_value = String(value);
 
@@ -132,6 +136,8 @@ function set_attribute_helper(element, key, value) {
 	if (key === 'class') {
 		const is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
 		set_class(/** @type {HTMLElement} */ (element), value, undefined, is_html);
+	} else if (key === 'style') {
+		set_style(/** @type {HTMLElement} */ (element), value);
 	} else if (key === '#class') {
 		// Special case for static class when spreading props
 		element.classList.add(value);

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

@@ -933,12 +933,14 @@ export function spread_props(fn) {
  * @returns {Object}
  */
 export function proxy_props(fn) {
+	const memo = derived(fn, active_block);
+
 	return new Proxy(
 		{},
 		{
 			get(_, property) {
 				/** @type {Record<string | symbol, any> | Record<string | symbol, any>[]} */
-				var obj = fn();
+				var obj = get_derived(memo);
 
 				// Handle array of objects/spreads (for multiple props)
 				if (is_array(obj)) {
@@ -962,7 +964,7 @@ export function proxy_props(fn) {
 					return true;
 				}
 				/** @type {Record<string | symbol, any> | Record<string | symbol, any>[]} */
-				var obj = fn();
+				var obj = get_derived(memo);
 
 				// Handle array of objects/spreads
 				if (is_array(obj)) {
@@ -978,7 +980,7 @@ export function proxy_props(fn) {
 			},
 			getOwnPropertyDescriptor(_, key) {
 				/** @type {Record<string | symbol, any> | Record<string | symbol, any>[]} */
-				var obj = fn();
+				var obj = get_derived(memo);
 
 				// Handle array of objects/spreads
 				if (is_array(obj)) {
@@ -999,7 +1001,7 @@ export function proxy_props(fn) {
 			},
 			ownKeys() {
 				/** @type {Record<string | symbol, any> | Record<string | symbol, any>[]} */
-				var obj = fn();
+				var obj = get_derived(memo);
 				/** @type {Record<string | symbol, 1>} */
 				var done = {};
 				/** @type {(string | symbol)[]} */

package/tests/client/ref.test.ripple

@@ -74,4 +74,34 @@ describe('refs', () => {
 
 		expect(logs).toEqual(['ref called', 'ref called']);
 	});
+
+	it('should handle spreading props with a static ref', () => {
+		let logs: string[] = [];
+
+		component App() {
+			let value = track('test');
+
+			function inputRef(node) {
+				logs.push('ref called');
+			}
+
+			const props = {
+				id: 'example',
+				@value,
+			};
+
+			<input type="text" {ref inputRef} {...props} />
+
+			<Input {ref inputRef} {...props} />
+		}
+
+		component Input({ id, value, ...rest }) {
+			<input type="text" {id} {value} {...rest} />
+		}
+
+		render(App);
+		flushSync();
+
+		expect(logs).toEqual(['ref called', 'ref called']);
+	});
 });