ripple 0.2.163 → 0.2.165

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.163",
+  "version": "0.2.165",
   "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.163"
+    "ripple": "0.2.165"
   }
 }

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

@@ -1159,7 +1159,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');
 				}

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

@@ -15,7 +15,7 @@ export {
 	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 +60,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 +83,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/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']);
+	});
 });