ripple 0.2.85 → 0.2.87

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

@@ -1,3 +1,5 @@
+/** @import { Block } from '#client' */
+
 import { branch, create_try_block, destroy_block, is_destroyed, resume_block } from './blocks.js';
 import { TRY_BLOCK } from './constants.js';
 import { next_sibling } from './operations.js';
@@ -13,13 +15,28 @@ import {
   tracking,
 } from './runtime.js';
 
+/**
+ * @param {Node} node
+ * @param {(anchor: Node) => void} fn
+ * @param {((anchor: Node, error: any) => void) | null} catch_fn
+ * @param {((anchor: Node) => void) | null} [pending_fn=null]
+ * @returns {void}
+ */
 export function try_block(node, fn, catch_fn, pending_fn = null) {
   var anchor = node;
+  /** @type {Block | null} */
   var b = null;
+  /** @type {Block | null} */
   var suspended = null;
   var pending_count = 0;
+  /** @type {DocumentFragment | null} */
   var offscreen_fragment = null;
 
+  /**
+   * @param {Block} block
+   * @param {DocumentFragment} fragment
+   * @returns {void}
+   */
   function move_block(block, fragment) {
     var state = block.s;
     var node = state.start;
@@ -42,7 +59,7 @@ export function try_block(node, fn, catch_fn, pending_fn = null) {
           move_block(b, offscreen_fragment);
 
           b = branch(() => {
-            pending_fn(anchor);
+            /** @type {(anchor: Node) => void} */ (pending_fn)(anchor);
           });
         }
       });
@@ -53,22 +70,26 @@ export function try_block(node, fn, catch_fn, pending_fn = null) {
         if (b !== null) {
           destroy_block(b);
         }
-        anchor.before(offscreen_fragment);
+        /** @type {ChildNode} */ (anchor).before(/** @type {DocumentFragment} */ (offscreen_fragment));
         offscreen_fragment = null;
-        resume_block(suspended);
+        resume_block(/** @type {Block} */ (suspended));
         b = suspended;
         suspended = null;
       }
     };
   }
 
+  /**
+   * @param {any} error
+   * @returns {void}
+   */
   function handle_error(error) {
     if (b !== null) {
       destroy_block(b);
     }
 
     b = branch(() => {
-      catch_fn(anchor, error);
+      /** @type {(anchor: Node, error: any) => void} */ (catch_fn)(anchor, error);
     });
   }
 
@@ -84,6 +105,9 @@ export function try_block(node, fn, catch_fn, pending_fn = null) {
   }, state);
 }
 
+/**
+ * @returns {() => void}
+ */
 export function suspend() {
   var current = active_block;
 
@@ -98,6 +122,9 @@ export function suspend() {
   throw new Error('Missing parent `try { ... } pending { ... }` statement');
 }
 
+/**
+ * @returns {void}
+ */
 function exit() {
   set_tracking(false);
   set_active_reaction(null);
@@ -105,6 +132,9 @@ function exit() {
   set_active_component(null);
 }
 
+/**
+ * @returns {() => void}
+ */
 export function capture() {
   var previous_tracking = tracking;
   var previous_block = active_block;
@@ -121,6 +151,9 @@ export function capture() {
   };
 }
 
+/**
+ * @returns {boolean}
+ */
 export function aborted() {
   if (active_block === null) {
     return true;
@@ -128,6 +161,11 @@ export function aborted() {
   return is_destroyed(active_block);
 }
 
+/**
+ * @template T
+ * @param {Promise<T>} promise
+ * @returns {Promise<() => T>}
+ */
 export async function resume_context(promise) {
   var restore = capture();
   var value = await promise;

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

@@ -1,18 +1,33 @@
+/** @type {typeof Object.getOwnPropertyDescriptor} */
 export var get_descriptor = Object.getOwnPropertyDescriptor;
+/** @type {typeof Object.getOwnPropertyDescriptors} */
 export var get_descriptors = Object.getOwnPropertyDescriptors;
+/** @type {typeof Array.from} */
 export var array_from = Array.from;
+/** @type {typeof Array.isArray} */
 export var is_array = Array.isArray;
+/** @type {typeof Object.defineProperty} */
 export var define_property = Object.defineProperty;
+/** @type {typeof Object.getPrototypeOf} */
 export var get_prototype_of = Object.getPrototypeOf;
+/** @type {typeof Object.values} */
 export var object_values = Object.values;
+/** @type {typeof Object.entries} */
 export var object_entries = Object.entries;
+/** @type {typeof Object.keys} */
 export var object_keys = Object.keys;
+/** @type {typeof Object.getOwnPropertySymbols} */
 export var get_own_property_symbols = Object.getOwnPropertySymbols;
+/** @type {typeof structuredClone} */
 export var structured_clone = structuredClone;
 
+/**
+ * Creates a text node that serves as an anchor point in the DOM.
+ * @returns {Text}
+ */
 export function create_anchor() {
   var t = document.createTextNode('');
-  t.__t = '';
+  /** @type {any} */ (t).__t = '';
   return t;
 }
 
@@ -26,9 +41,9 @@ export function is_positive_integer(value) {
 
 /**
  * Checks if an object is a tracked object (has a numeric 'f' property).
- * @param {object} v - The object to check.
+ * @param {any} v - The object to check.
  * @returns {boolean}
  */
 export function is_tracked_object(v) {
-  return typeof v === 'object' && v !== null && typeof v.f === 'number';
+  return typeof v === 'object' && v !== null && typeof /** @type {any} */ (v).f === 'number';
 }

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

@@ -1,3 +1,5 @@
+/** @import { Component } from '#server' */
+
 import { active_component } from './index.js';
 
 /**

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

@@ -1,4 +1,4 @@
-/** @import { Derived } from '#client' */
+/** @import { Component, Derived } from '#server' */
 
 import { DERIVED, UNINITIALIZED } from '../client/constants';
 import { is_tracked_object } from '../client/utils';
@@ -8,6 +8,7 @@ import { is_boolean_attribute } from '../../../compiler/utils';
 
 export { escape };
 
+/** @type {Component | null} */
 export let active_component = null;
 
 /**
@@ -26,17 +27,29 @@ const replacements = {
 class Output {
 	head = '';
 	body = '';
+	/** @type {Output | null} */
 	#parent = null;
 
+	/**
+	 * @param {Output | null} parent
+	 */
 	constructor(parent) {
 		this.#parent = parent;
 	}
 
+	/**
+	 * @param {string} str
+	 * @returns {void}
+	 */
 	push(str) {
 		this.body += str;
 	}
 }
 
+/**
+ * @param {((output: Output, props: Record<string, any>) => void | Promise<void>) & { async?: boolean }} component
+ * @returns {Promise<{head: string, body: string}>}
+ */
 export async function render(component) {
 	const output = new Output(null);
 
@@ -52,6 +65,9 @@ export async function render(component) {
 	return { head, body };
 }
 
+/**
+ * @returns {void}
+ */
 export function push_component() {
 	var component = {
 		c: null,
@@ -60,15 +76,26 @@ export function push_component() {
 	active_component = component;
 }
 
+/**
+ * @returns {void}
+ */
 export function pop_component() {
-	var component = active_component;
-	active_component = component.p;
+	var component = /** @type {Component} */ (active_component);
+	active_component = component;
 }
 
+/**
+ * @param {() => any} fn
+ * @returns {Promise<void>}
+ */
 export async function async(fn) {
 	// TODO
 }
 
+/**
+ * @param {Derived} tracked
+ * @returns {any}
+ */
 function get_derived(tracked) {
 	let v = tracked.v;
 
@@ -79,6 +106,10 @@ function get_derived(tracked) {
 	return v;
 }
 
+/**
+ * @param {any} tracked
+ * @returns {any}
+ */
 export function get(tracked) {
 	// reflect back the value if it's not boxed
 	if (!is_tracked_object(tracked)) {
@@ -105,6 +136,11 @@ export function attr(name, value, is_boolean = false) {
 	return ` ${name}${assignment}`;
 }
 
+/**
+ * @param {Record<string, any>} attrs
+ * @param {string | undefined} css_hash
+ * @returns {string}
+ */
 export function spread_attrs(attrs, css_hash) {
 	let attr_str = '';
 	let name;

package/src/runtime/internal/server/types.d.ts

@@ -0,0 +1,21 @@
+import type { Context } from './context.js';
+
+export type Component = {
+  c: null | Map<Context<any>, any>;
+  p: null | Component;
+};
+
+
+export type Derived = {
+  a: { get?: Function, set?: Function };
+  co: null | Component;
+  f: number;
+  fn: Function;
+  v: any;
+};
+
+export type Tracked = {
+  a: { get?: Function, set?: Function };
+  f: number;
+  v: any;
+};

package/src/runtime/map.js

@@ -41,20 +41,27 @@ export class TrackedMap extends Map {
     }
   }
 
+  /**
+   * @returns {void}
+   */
   #init() {
     var proto = TrackedMap.prototype;
     var map_proto = Map.prototype;
 
     for (const method of introspect_methods) {
-      proto[method] = function (...v) {
+      /** @type {any} */ (proto)[method] = function (/** @type {...any} */ ...v) {
         this.size;
         this.#read_all();
 
-        return map_proto[method].apply(this, v);
+        return /** @type {any} */ (map_proto)[method].apply(this, v);
       };
     }
   }
 
+  /**
+   * @param {K} key
+   * @returns {V | undefined}
+   */
   get(key) {
     var tracked_items = this.#tracked_items;
     var t = tracked_items.get(key);
@@ -69,6 +76,10 @@ export class TrackedMap extends Map {
     return super.get(key);
   }
 
+  /**
+   * @param {K} key
+   * @returns {boolean}
+   */
   has(key) {
     var has = super.has(key);
     var tracked_items = this.#tracked_items;
@@ -87,6 +98,11 @@ export class TrackedMap extends Map {
     return has;
   }
 
+  /**
+   * @param {K} key
+   * @param {V} value
+   * @returns {this}
+   */
   set(key, value) {
     var block = this.#block;
     var tracked_items = this.#tracked_items;
@@ -105,6 +121,10 @@ export class TrackedMap extends Map {
     return this;
   }
 
+  /**
+   * @param {K} key
+   * @returns {boolean}
+   */
   delete(key) {
     var block = this.#block;
     var tracked_items = this.#tracked_items;
@@ -120,6 +140,9 @@ export class TrackedMap extends Map {
     return result;
   }
 
+  /**
+   * @returns {void}
+   */
   clear() {
     var block = this.#block;
 
@@ -136,21 +159,33 @@ export class TrackedMap extends Map {
     set(this.#tracked_size, 0, block);
   }
 
+  /**
+   * @returns {MapIterator<K>}
+   */
   keys() {
     this.size;
     return super.keys();
   }
 
+  /**
+   * @returns {void}
+   */
   #read_all() {
     for (const [, t] of this.#tracked_items) {
       get(t);
     }
   }
 
+  /**
+   * @returns {number}
+   */
   get size() {
     return get(this.#tracked_size);
   }
 
+  /**
+   * @returns {Array<[K, V]>}
+   */
   toJSON() {
     this.size;
     this.#read_all();

package/src/runtime/set.js

@@ -23,7 +23,7 @@ export class TrackedSet extends Set {
   #block;
 
   /**
-   * @param {Iterable<T>} iterable
+   * @param {Iterable<T>} [iterable]
    */
   constructor(iterable) {
     super();
@@ -45,6 +45,9 @@ export class TrackedSet extends Set {
     }
   }
 
+  /**
+   * @returns {void}
+   */
   #init() {
     var proto = TrackedSet.prototype;
     var set_proto = Set.prototype;
@@ -54,11 +57,10 @@ export class TrackedSet extends Set {
         continue;
       }
 
-      /** @param {...any} v */
-      proto[method] = function (...v) {
+      /** @type {any} */ (proto)[method] = function (/** @type {...any} */ ...v) {
         this.size;
 
-        return set_proto[method].apply(this, v);
+        return /** @type {any} */ (set_proto)[method].apply(this, v);
       };
     }
 
@@ -67,14 +69,14 @@ export class TrackedSet extends Set {
         continue;
       }
 
-      proto[method] = function (other, ...v) {
+      /** @type {any} */ (proto)[method] = function (/** @type {any} */ other, /** @type {...any} */ ...v) {
         this.size;
 
         if (other instanceof TrackedSet) {
           other.size;
         }
 
-        return set_proto[method].apply(this, [other, ...v]);
+        return /** @type {any} */ (set_proto)[method].apply(this, [other, ...v]);
       };
     }
 
@@ -83,14 +85,14 @@ export class TrackedSet extends Set {
         continue;
       }
 
-      proto[method] = function (other, ...v) {
+      /** @type {any} */ (proto)[method] = function (/** @type {any} */ other, /** @type {...any} */ ...v) {
         this.size;
 
         if (other instanceof TrackedSet) {
           other.size;
         }
 
-        return new TrackedSet(set_proto[method].apply(this, [other, ...v]));
+        return new TrackedSet(/** @type {any} */ (set_proto)[method].apply(this, [other, ...v]));
       };
     }
   }
@@ -124,7 +126,9 @@ export class TrackedSet extends Set {
 
     var t = this.#tracked_items.get(value);
 
-    increment(t, block);
+    if (t) {
+      increment(t, block);
+    }
     this.#tracked_items.delete(value);
     set(this.#tracked_size, super.size, block);
 
@@ -154,6 +158,9 @@ export class TrackedSet extends Set {
     return has;
   }
 
+  /**
+   * @returns {void}
+   */
   clear() {
     var block = this.#block;
 
@@ -170,10 +177,16 @@ export class TrackedSet extends Set {
     set(this.#tracked_size, 0, block);
   }
 
+  /**
+   * @returns {number}
+   */
   get size() {
     return get(this.#tracked_size);
   }
 
+  /**
+   * @returns {T[]}
+   */
   toJSON() {
     this.size;
 

package/src/utils/builders.js

@@ -1,4 +1,5 @@
 /** @import * as ESTree from 'estree' */
+
 import { regex_is_valid_identifier } from './patterns.js';
 import { sanitize_template_string } from './sanitize_template_string.js';
 

package/tests/client/basic.test.ripple

@@ -1498,6 +1498,27 @@ describe('basic client', () => {
 		expect(countDiv.textContent).toBe('3');
 	});
 
+	it('passes in next and prev to track set function', () => {
+		let logs = [];
+
+		component App() {
+			let count = track(0, v => v, (next, prev) => {
+				logs.push(prev, next);
+				return next;
+			});
+
+			<button onClick={() => { @count++ }}>{'Increment'}</button>
+		}
+
+		render(App);
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(logs).toEqual([0, 1]);
+	});
+
 	it('works as a reactive TrackedArray when constructed using # syntactic sugar', () => {
 		component App() {
 			const array = #[1, 2, 3];

package/tests/client/ref.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, TrackedArray } from 'ripple';
+import { mount, flushSync, TrackedArray, track, createRefKey } from 'ripple';
 
 describe('refs', () => {
 	let container;
@@ -54,5 +54,36 @@ describe('refs', () => {
 		flushSync();
 
 		expect(_node).toBe(document.querySelector('pre'));
-	})
+	});
+
+	it('should handle spreading into composite refs', () => {
+		let logs: string[] = [];
+
+		component App() {
+			let value = track('test');
+
+			function inputRef(node) {
+				logs.push('ref called');
+			}
+
+			const props = {
+				id: "example",
+				@value,
+				[createRefKey()]: inputRef
+			};
+
+			<input type="text" {...props} />
+
+			<Input {...props} />
+		}
+
+		component Input({ id, value, ...rest }) {
+			<input type="text" {id} {value} {...rest} />
+		}
+
+		render(App);
+		flushSync();
+
+		expect(logs).toEqual(['ref called', 'ref called']);
+	});
 });

package/types/index.d.ts

@@ -86,7 +86,7 @@ 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>, Tracked<RestKeys<T, K>>];
 
-export declare function track<V>(value?: V | (() => V), get?: (v: V) => V, set?: (v: V) => V): Tracked<V>;
+export declare function track<V>(value?: V | (() => V), get?: (v: V) => V, set?: (next: V, prev: V) => V): Tracked<V>;
 
 export declare function trackSplit<V extends Props, const K extends readonly (keyof V)[]>(
 	value: V,