ripple 0.2.51 → 0.2.53

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.51",
+  "version": "0.2.53",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -823,7 +823,7 @@ const visitors = {
             b.call(
               node.id,
               id,
-              b.call('$.tracked_spread_object', b.thunk(b.object(props))),
+              b.call('$.tracked_spread_object', b.thunk(b.object(props)), b.id('__block')),
               b.id('$.active_block'),
             ),
           ),

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

@@ -21,7 +21,6 @@ export var LOGIC_BLOCK = FOR_BLOCK | IF_BLOCK | TRY_BLOCK;
 export var UNINITIALIZED = Symbol();
 /** @type {unique symbol} */
 export const TRACKED_OBJECT = Symbol();
-export var SPREAD_OBJECT = Symbol();
 export var COMPUTED_PROPERTY = Symbol();
 export var REF_PROP = 'ref';
 /** @type {unique symbol} */

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

@@ -20,7 +20,6 @@ import {
   EFFECT_BLOCK,
   PAUSED,
   ROOT_BLOCK,
-  SPREAD_OBJECT,
   TRACKED,
   TRACKED_OBJECT,
   TRY_BLOCK,
@@ -781,17 +780,18 @@ export function flush_sync(fn) {
 
 /**
  * @param {() => Object} fn
+ * @param {Block} block
  * @returns {Object}
  */
-export function tracked_spread_object(fn) {
-  var obj = fn();
+export function tracked_spread_object(fn, block) {
+  let computed = derived(fn, block);
 
-  define_property(obj, SPREAD_OBJECT, {
-    value: fn,
-    enumerable: false,
+  return new Proxy({}, {
+    get(target, property) {
+      const obj = get_derived(computed);
+      return obj[property];
+    }
   });
-
-  return obj;
 }
 
 /**
@@ -918,10 +918,6 @@ export function old_get_property(obj, property, chain = false) {
     if (obj[property] !== value) {
       obj[property] = value;
     }
-  } else if (SPREAD_OBJECT in obj) {
-    var spread_fn = obj[SPREAD_OBJECT];
-    var properties = spread_fn();
-    return old_get_property(properties, property, chain);
   } else if (is_ripple_array(obj)) {
     obj.$length;
   }
@@ -1267,6 +1263,9 @@ export function exclude_from_object(obj, keys) {
   return obj;
 }
 
+/**
+ * @param {any} v
+ */
 export async function maybe_tracked(v) {
   var restore = capture();
   let value;
@@ -1275,7 +1274,9 @@ export async function maybe_tracked(v) {
     if ((v.f & DERIVED) !== 0) {
       value = await async_computed(v.fn, v.b);
     } else {
-      value = await get_tracked(v);
+      value = await async_computed(async () => {
+        return await get_tracked(v);
+      }, /** @type {Block} */ (active_block));
     }
   } else {
     value = await v;

package/tests/array.test.ripple

@@ -1547,7 +1547,7 @@ describe('RippleArray', () => {
 			}
 
 			component ArrayTest() {
-				//const items = await RippleArray.fromAsync([6]);
+				const items = await RippleArray.fromAsync([6]);
 
 				<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
 				<pre>{items ? items.$length : ''}</pre>

package/tests/composite.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, track, RippleArray } from 'ripple';
+import { mount, flushSync, track, RippleArray, effect } from 'ripple';
 
 describe('composite components', () => {
 	let container;
@@ -295,4 +295,45 @@ describe('composite components', () => {
 
 		render(ArrayTest);
 	});
+
+	it('handles spreading of props', () => {
+		let logs = [];
+
+		component App() {
+			const a = track(1);
+			const b = track(2);
+			const c = track(3);
+
+			const obj = track(() => ({
+				@a,
+				@b,
+				@c,
+			}));
+
+			<Child {...@obj} />
+
+			<button onClick={() => { @a++; @b++; @c++; }}>{"Increment all"}</button>
+		}
+
+		component Child({ a, b, c }) {
+			effect(() => {
+				logs.push(`Child effect: ${a}, ${b}, ${c}`);
+			});
+
+			<div>{a + ' ' +  b + ' ' + c}</div>
+		}
+
+		render(App);
+		flushSync();
+
+		expect(container.querySelector('div').textContent).toBe('1 2 3');
+		expect(logs).toEqual(['Child effect: 1, 2, 3']);
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('div').textContent).toBe('2 3 4');
+		expect(logs).toEqual(['Child effect: 1, 2, 3', 'Child effect: 2, 3, 4']);
+	});
 });