ripple 0.2.72 → 0.2.74

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.72",
+  "version": "0.2.74",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",
@@ -50,7 +50,8 @@
   },
   "imports": {
     "#client": "./src/runtime/internal/client/types.d.ts",
-    "#client/constants": "./src/internal/client/constants.js"
+    "#client/constants": "./src/internal/client/constants.js",
+    "#public": "./types/index.d.ts"
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.5",

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

@@ -192,6 +192,8 @@ const visitors = {
 
     if (!context.state.to_ts && is_ripple_track_call(callee, context)) {
       if (node.arguments.length === 0) {
+        node.arguments.push(b.void0, b.void0);
+      } else if (node.arguments.length === 1) {
         node.arguments.push(b.void0);
       }
       return {

package/src/runtime/index.js

@@ -36,19 +36,7 @@ export function mount(component, options) {
 
 export { create_context as createContext } from './internal/client/context.js';
 
-export { flush_sync as flushSync, untrack, deferred } from './internal/client/runtime.js';
-
-/**
- * @param {any} v
- * @param {Block} b
- * @returns {Tracked | Derived}
- */
-export function track(v, b) {
-  if (typeof v === 'function') {
-    return derived(v, b);
-  }
-  return tracked(v, b);
-}
+export { flush_sync as flushSync, track, untrack, deferred } from './internal/client/runtime.js';
 
 export { TrackedArray } from './array.js';
 

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

@@ -39,10 +39,14 @@ function move(block, anchor) {
     anchor.before(node);
     return;
   }
-  while (node !== end) {
+  while (node !== null) {
     var next_node = /** @type {TemplateNode} */ (next_sibling(node));
     anchor.before(node);
     node = next_node;
+    if (node === end) {
+      anchor.before(end);
+      break;
+    }
   }
 }
 
@@ -167,6 +171,8 @@ function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
     }
   }
 
+  var fast_path_removal = false;
+
   if (j > a_end) {
     if (j <= b_end) {
       while (j <= b_end) {
@@ -185,13 +191,14 @@ function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
     var b_start = j;
     var a_left = a_end - j + 1;
     var b_left = b_end - j + 1;
-    var fast_path_removal = is_controlled && a_left === a_length;
     var sources = new Int32Array(b_left + 1);
     var moved = false;
     var pos = 0;
     var patched = 0;
     var i = 0;
 
+    fast_path_removal = is_controlled && a_left === a_length;
+
     // When sizes are small, just loop them through
     if (b_length < 4 || (a_left | b_left) < 32) {
       for (i = a_start; i <= a_end; ++i) {
@@ -244,8 +251,8 @@ function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
           if (j !== undefined) {
             if (fast_path_removal) {
               fast_path_removal = false;
-              // while (i > aStart) {
-              //     remove(a[aStart++], dom, animations);
+              // while (i > a_start) {
+              //     destroy_block(a[a_start++]);
               // }
             }
             sources[j - b_start] = i + 1;
@@ -272,7 +279,7 @@ function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
 
   if (fast_path_removal) {
     reconcile_fast_clear(anchor, block, []);
-    reconcile(anchor, block, b, render_fn, is_controlled);
+    reconcile(anchor, block, b, render_fn, is_controlled, is_indexed);
     return;
   } else if (moved) {
     var next_pos = 0;
@@ -385,6 +392,16 @@ export function keyed(collection, key_fn) {
   if (block === null || (block.f & FOR_BLOCK) === 0) {
     throw new Error('keyed() must be used inside a for block');
   }
+
+  var b_array = collection_to_array(collection);
+  var b_keys = b_array.map(key_fn);
+
+  // We only need to do this in DEV
+  var b = new Set(b_keys);
+  if (b.size !== b_keys.length) {
+    throw new Error('Duplicate keys are not allowed');
+  }
+
   var state = block.s;
 
   if (state === null) {
@@ -403,15 +420,6 @@ export function keyed(collection, key_fn) {
     throw new Error('Duplicate keys are not allowed');
   }
 
-  var b_array = collection_to_array(collection);
-  var b_keys = b_array.map(key_fn);
-
-  // We only need to do this in DEV
-  var b = new Set(b_keys);
-  if (b.size !== b_keys.length) {
-    throw new Error('Duplicate keys are not allowed');
-  }
-
   for (let i = 0; i < b_keys.length; i++) {
     var b_val = b_keys[i];
     var index = a.get(b_val);

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

@@ -1,4 +1,5 @@
 /** @import { Block, Component, Dependency, Derived, Tracked } from '#client' */
+/** @import { TrackOptions } from '#public' */
 
 import {
   destroy_block,
@@ -26,7 +27,7 @@ import {
   REF_PROP,
 } from './constants.js';
 import { capture, suspend } from './try.js';
-import { define_property, is_tracked_object } from './utils.js';
+import { define_property, get_descriptors, is_array, is_tracked_object } from './utils.js';
 
 const FLUSH_MICROTASK = 0;
 const FLUSH_SYNC = 1;
@@ -278,6 +279,65 @@ export function derived(fn, block) {
   };
 }
 
+/**
+ * @param {any} v
+ * @param {TrackOptions | undefined} o
+ * @param {Block} b
+ * @returns {Tracked | Derived | Tracked[]}
+ */
+export function track(v, o, b) {
+  var is_tracked = is_tracked_object(v);
+
+  if (o === undefined) {
+    if (is_tracked) {
+      return v;
+    }
+
+    if (typeof v === 'function') {
+      return derived(v, b);
+    }
+    return tracked(v, b);
+  }
+
+  if (is_tracked || typeof v !== "object" || v === null || is_array(v)) {
+    throw new TypeError('Invalid value: expected a non-tracked object');
+  }
+
+  var list = o.split ?? [];
+  /** @type {Tracked[]} */
+  var out = [];
+  /** @type {Record<string|symbol, any>} */
+  var rest = {};
+  /** @type {Record<PropertyKey, any | null>} */
+  var descriptors = get_descriptors(v);
+
+  for (let i = 0, key, t; i < list.length; i++) {
+    key = list[i];
+
+    if (is_tracked_object(v[key])) {
+      t = v[key];
+    } else {
+      t = define_property(tracked(undefined, b), 'v', descriptors[key]);
+    }
+
+    out[i] = t;
+    descriptors[key] = null;
+  }
+
+  var props = Reflect.ownKeys(descriptors);
+  for (let i = 0, key; i < props.length; i++) {
+    key = props[i];
+    if (descriptors[key] === null) {
+      continue;
+    }
+    define_property(rest, key, descriptors[key]);
+  }
+
+  out.push(tracked(rest, b));
+
+  return out;
+}
+
 /**
  * @param {Tracked} tracked
  * @returns {Dependency}

package/tests/basic.test.ripple

@@ -474,13 +474,13 @@ describe('basic', () => {
 		component Basic() {
 			let count = track(0);
 
-			const minus = { 
+			const minus = {
 				onClick() {
 					@count--
 				}
 			}
 
-			const plus = { 
+			const plus = {
 				onClick() {
 					@count++
 				}
@@ -524,7 +524,7 @@ describe('basic', () => {
 			let clickCount = track(0);
 			let focusCount = track(0);
 
-			const mixedHandler = { 
+			const mixedHandler = {
 				onClick() {  // Delegated event
 					@clickCount++
 				},
@@ -980,7 +980,7 @@ describe('basic', () => {
 				div {
 					animation-name: anim;
 				}
-				
+
 				@keyframes anim {}
 
 				p {
@@ -1272,18 +1272,133 @@ describe('basic', () => {
 		expect(container).toMatchSnapshot();
 	});
 
-	it('correctly renders adjacent text nodes', () => {
+	it('can retain reactivity for destructure rest via track split', () => {
+		let logs = [];
+
 		component App() {
-			let a = 1;
-			let b = 1;
-			<div>{1}{1}</div>
-			<div>{a}{b}</div>
-			<div>{true}{true}</div>
-			<div>{true}{true}</div>
+			let count = track(0);
+			let name = track('Click Me');
+
+			function buttonRef(el) {
+				logs.push('ref called');
+				return () => {
+					logs.push('cleanup ref');
+				};
+			}
+
+			<Child
+				class="my-button"
+				onClick={() => @name === 'Click Me' ? @name = 'Clicked' : @name = 'Click Me'}
+				count:={() => @count, (v) => {logs.push('inside setter'); @count++}}
+				{ref buttonRef}
+			>{@name}</Child>;
+		}
+
+		component Child(props: PropsWithChildren<{ count: Tracked<number> }>) {
+			const [children, count, rest] = track(props, {split: ['children', 'count']});
+
+			if (@count < 2) {
+				<button {...@rest}><@children /></button>
+			}
+			<pre>{@count}</pre>
+			<button onClick={() => @count++}>{'Increment Count'}</button>
 		}
 
 		render(App);
+		flushSync();
 
-		expect(container).toMatchSnapshot();
+		const buttonClickMe = container.querySelectorAll('button')[0];
+		const buttonIncrement = container.querySelectorAll('button')[1];
+		const countPre = container.querySelector('pre');
+
+		expect(buttonClickMe.textContent).toBe('Click Me');
+		expect(countPre.textContent).toBe('0');
+		expect(logs).toEqual(['ref called']);
+
+
+		buttonClickMe.click();
+		buttonIncrement.click();
+		flushSync();
+
+		expect(buttonClickMe.textContent).toBe('Clicked');
+		expect(countPre.textContent).toBe('1');
+		expect(logs).toEqual(['ref called','inside setter']);
+
+		buttonIncrement.click();
+		flushSync();
+
+		expect(logs).toEqual(['ref called','inside setter','inside setter','cleanup ref']);
+	});
+
+	it('errors on invalid value as null for track with split', () => {
+		component App() {
+			let message = track('');
+
+			try{
+				const [a, b, rest] = track(null, { split: ['a', 'b'] });
+			} catch(e) {
+				@message = e.message;
+			}
+
+			<pre>{@message}</pre>
+		}
+
+		render(App);
+
+		const pre = container.querySelectorAll('pre')[0];
+		expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
+	});
+
+	it('errors on invalid value as array for track with split', () => {
+		component App() {
+			let message = track('');
+
+			try{
+				const [a, b, rest] = track([1, 2, 3], { split: ['a', 'b'] });
+			} catch(e) {
+				@message = e.message;
+			}
+
+			<pre>{@message}</pre>
+		}
+
+		render(App);
+
+		const pre = container.querySelectorAll('pre')[0];
+		expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
+	});
+
+	it('errors on invalid value as tracked for track with split', () => {
+		component App() {
+			const t = track({a: 1, b: 2, c: 3});
+			let message = track('');
+
+			try{
+				const [a, b, rest] = track(t, { split: ['a', 'b'] });
+			} catch(e) {
+				@message = e.message;
+			}
+
+			<pre>{@message}</pre>
+		}
+
+		render(App);
+
+		const pre = container.querySelectorAll('pre')[0];
+		expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
+	});
+
+	it('returns the same tracked object if plain track is called with a tracked object', () => {
+		component App() {
+			const t = track({a: 1, b: 2, c: 3});
+			const doublet = track(t);
+
+			<pre>{t === doublet}</pre>
+		}
+
+		render(App);
+
+		const pre = container.querySelectorAll('pre')[0];
+		expect(pre.textContent).toBe('true');
 	});
 });

package/tests/boundaries.test.ripple

@@ -105,4 +105,4 @@ describe('passing reactivity between boundaries tests', () => {
     expect(container.querySelector('div').textContent).toBe('Double: 4');
     expect(log).toEqual(['Count:0', 'Count:1', 'Count:2']);
   });
-});
+});

package/tsconfig.json

@@ -11,7 +11,7 @@
 		"allowSyntheticDefaultImports": true,
 		"verbatimModuleSyntax": true,
 		"types": ["node"],
-    "jsx": "preserve",
+		"jsx": "preserve",
 		"jsxImportSource": "ripple",
 		"strict": true,
 		"allowJs": true,
@@ -25,4 +25,4 @@
 		"./src/",
 		"./tests/*/test.ripple",
 	]
-}
+}

package/types/index.d.ts

@@ -29,7 +29,7 @@ export type Context<T> = {
 
 export declare function createContext<T>(initialValue: T): Context<T>;
 
-export class TrackedSet<T> extends Set<T> {
+export declare class TrackedSet<T> extends Set<T> {
 	isDisjointFrom(other: TrackedSet<T> | Set<T>): boolean;
 	isSubsetOf(other: TrackedSet<T> | Set<T>): boolean;
 	isSupersetOf(other: TrackedSet<T> | Set<T>): boolean;
@@ -40,7 +40,7 @@ export class TrackedSet<T> extends Set<T> {
 	toJSON(): T[];
 }
 
-export class TrackedMap<K, V> extends Map<K, V> {
+export declare class TrackedMap<K, V> extends Map<K, V> {
 	toJSON(): [K, V][];
 }
 
@@ -56,7 +56,7 @@ declare global {
 	 * Ripple runtime namespace - injected by the compiler
 	 * These functions are available in compiled Ripple components for TypeScript analysis
 	 */
-	var $: {
+	var _$_: {
 		tracked<T>(value: T, block?: any): T;
 		computed<T>(fn: () => T, block?: any): T;
 		scope(): any;
@@ -69,10 +69,35 @@ declare global {
 
 export declare function createRefKey(): symbol;
 
-type Tracked<V> = { '#v': V };
+export type Tracked<V> = { '#v': V };
+
+export type Props<K extends PropertyKey = any, V = unknown> = Record<K, V>;
+export type PropsWithExtras<T extends object> = Props & T & Record<string, unknown>;
+export type PropsWithChildren<T extends object = {}> =
+  Expand<Omit<Props, 'children'> & { children: Component } & T>;
+
+type UnwrapTracked<T> = [T] extends [Tracked<infer V>] ? T : Tracked<T>;
+
+// force ts to evaluate and expand a type fully
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+
+type PickKeys<T, K extends readonly (keyof T)[]> =
+  { [I in keyof K]: UnwrapTracked<T[K[I] & keyof T]> };
+
+type RestKeys<T, K extends readonly (keyof T)[]> = Expand<Omit<T, K[number]>>;
+
+type SplitResult<T extends Props, K extends readonly (keyof T)[]> =
+  [...PickKeys<T, K>, UnwrapTracked<RestKeys<T, K>>];
+
+type TrackOptions = { split?: readonly (string | number | symbol)[] };
 
 export declare function track<V>(value?: V | (() => V)): Tracked<V>;
 
+export declare function track<V extends Props, const K extends readonly (keyof V)[]>(
+  value: V,
+  options: TrackOptions
+): SplitResult<V, K>;
+
 export function on<Type extends keyof WindowEventMap>(
 	window: Window,
 	type: Type,
@@ -107,3 +132,27 @@ export function on(
 	handler: EventListener,
 	options?: AddEventListenerOptions | undefined
 ): () => void;
+
+export type TrackedObjectShallow<T> = {
+  [K in keyof T]: T[K] | Tracked<T[K]>;
+};
+
+export type TrackedObjectDeep<T> =
+  T extends string | number | boolean | null | undefined | symbol | bigint
+    ? T | Tracked<T>
+    : T extends TrackedArray<infer U>
+      ? TrackedArray<U> | Tracked<TrackedArray<U>>
+    : T extends TrackedSet<infer U>
+      ? TrackedSet<U> | Tracked<TrackedSet<U>>
+    : T extends TrackedMap<infer K, infer V>
+      ? TrackedMap<K, V> | Tracked<TrackedMap<K, V>>
+    : T extends Array<infer U>
+      ? Array<TrackedObjectDeep<U>> | Tracked<Array<TrackedObjectDeep<U>>>
+    : T extends Set<infer U>
+      ? Set<TrackedObjectDeep<U>> | Tracked<Set<TrackedObjectDeep<U>>>
+    : T extends Map<infer K, infer V>
+      ? Map<TrackedObjectDeep<K>, TrackedObjectDeep<V>> |
+        Tracked<Map<TrackedObjectDeep<K>, TrackedObjectDeep<V>>>
+    : T extends object
+      ? { [K in keyof T]: TrackedObjectDeep<T[K]> | Tracked<TrackedObjectDeep<T[K]>> }
+    : T | Tracked<T>;