ripple 0.2.82 → 0.2.84

package/src/runtime/array.js

@@ -287,3 +287,7 @@ const methods_returning_arrays = new Set([
   'toSpliced',
   'with',
 ]);
+
+export function tracked_array(elements, block) {
+  return proxy({ elements, block, from_static: true });
+}

package/src/runtime/index-client.js

@@ -25,7 +25,7 @@ export function mount(component, options) {
   if (target.firstChild) {
     target.textContent = '';
   }
-  
+
   target.append(anchor);
 
   const cleanup_events = handle_root_events(target);
@@ -42,7 +42,13 @@ export function mount(component, options) {
 
 export { create_context as createContext } from './internal/client/context.js';
 
-export { flush_sync as flushSync, track, untrack, deferred } from './internal/client/runtime.js';
+export {
+  flush_sync as flushSync,
+  track,
+  trackSplit,
+  untrack,
+  deferred,
+} from './internal/client/runtime.js';
 
 export { TrackedArray } from './array.js';
 

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

@@ -7,14 +7,15 @@ export var TRY_BLOCK = 1 << 6;
 export var IF_BLOCK = 1 << 7;
 export var COMPOSITE_BLOCK = 1 << 8;
 export var ASYNC_BLOCK = 1 << 9;
-export var CONTAINS_UPDATE = 1 << 10;
-export var CONTAINS_TEARDOWN = 1 << 11;
-export var BLOCK_HAS_RUN = 1 << 12;
-export var TRACKED = 1 << 13;
-export var DERIVED = 1 << 14;
-export var DEFERRED = 1 << 15;
-export var PAUSED = 1 << 16;
-export var DESTROYED = 1 << 17;
+export var HEAD_BLOCK = 1 << 10;
+export var CONTAINS_UPDATE = 1 << 11;
+export var CONTAINS_TEARDOWN = 1 << 12;
+export var BLOCK_HAS_RUN = 1 << 13;
+export var TRACKED = 1 << 14;
+export var DERIVED = 1 << 15;
+export var DEFERRED = 1 << 16;
+export var PAUSED = 1 << 17;
+export var DESTROYED = 1 << 18;
 
 export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | TRY_BLOCK | COMPOSITE_BLOCK;
 

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

@@ -0,0 +1,14 @@
+import { render } from './blocks.js';
+import { HEAD_BLOCK } from './constants.js';
+import { create_text } from './operations.js';
+
+/**
+ * @param {(anchor: Node) => void} render_fn
+ * @returns {void}
+ */
+export function head(render_fn) {
+	/** @type {Comment | Text} */
+	var anchor = document.head.appendChild(create_text());
+
+	render(() => render_fn(anchor), HEAD_BLOCK);
+}

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

@@ -1,12 +1,17 @@
-export { first_child as child, child_frag, next_sibling as sibling } from './operations.js';
+export {
+	first_child as child,
+	child_frag,
+	next_sibling as sibling,
+	document,
+} from './operations.js';
 
 export {
-  set_text,
-  set_class,
-  set_attribute,
-  set_value,
-  set_checked,
-  set_selected,
+	set_text,
+	set_class,
+	set_attribute,
+	set_value,
+	set_checked,
+	set_selected,
 } from './render.js';
 
 export { render, render_spread, async, ref } from './blocks.js';
@@ -14,33 +19,33 @@ export { render, render_spread, async, ref } from './blocks.js';
 export { event, delegate } from './events.js';
 
 export {
-  active_block,
-  scope,
-  safe_scope,
-  with_scope,
-  get,
-  get_tracked,
-  get_derived,
-  set,
-  async_computed,
-  tracked,
-  spread_props,
-  computed_property,
-  call_property,
-  get_property,
-  set_property,
-  update,
-  update_pre,
-  update_property,
-  update_pre_property,
-  push_component,
-  pop_component,
-  untrack,
-  ref_prop,
-  fallback,
-  exclude_from_object,
-  derived,
-  maybe_tracked,
+	active_block,
+	scope,
+	safe_scope,
+	with_scope,
+	get,
+	get_tracked,
+	get_derived,
+	set,
+	async_computed,
+	tracked,
+	spread_props,
+	computed_property,
+	call_property,
+	get_property,
+	set_property,
+	update,
+	update_pre,
+	update_property,
+	update_pre_property,
+	push_component,
+	pop_component,
+	untrack,
+	ref_prop,
+	fallback,
+	exclude_from_object,
+	derived,
+	maybe_tracked,
 } from './runtime.js';
 
 export { composite } from './composite.js';
@@ -52,3 +57,7 @@ export { if_block as if } from './if.js';
 export { try_block as try, aborted } from './try.js';
 
 export { template, append } from './template.js';
+
+export { tracked_array } from '../../array.js';
+
+export { head } from './head.js';

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

@@ -5,34 +5,38 @@ var first_child_getter;
 /** @type {() => Node | null} */
 var next_sibling_getter;
 
+/** @type {Document} */
+export var document;
+
 export var is_firefox;
 
 export function init_operations() {
-  var node_prototype = Node.prototype;
-  var element_prototype = Element.prototype;
-  var object_prototype = Object.prototype;
-  var event_target_prototype = EventTarget.prototype;
+	var node_prototype = Node.prototype;
+	var element_prototype = Element.prototype;
+	var object_prototype = Object.prototype;
+	var event_target_prototype = EventTarget.prototype;
 
-  is_firefox = /Firefox/.test(navigator.userAgent);
+	is_firefox = /Firefox/.test(navigator.userAgent);
+	document = window.document;
 
-  // @ts-ignore
-  first_child_getter = get_descriptor(node_prototype, 'firstChild').get;
-  // @ts-ignore
-  next_sibling_getter = get_descriptor(node_prototype, 'nextSibling').get;
+	// @ts-ignore
+	first_child_getter = get_descriptor(node_prototype, 'firstChild').get;
+	// @ts-ignore
+	next_sibling_getter = get_descriptor(node_prototype, 'nextSibling').get;
 
-  // the following assignments improve perf of lookups on DOM nodes
-  // @ts-expect-error
-  element_prototype.__click = undefined;
-  // @ts-expect-error
-  element_prototype.__className = '';
-  // @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;
+	// the following assignments improve perf of lookups on DOM nodes
+	// @ts-expect-error
+	element_prototype.__click = undefined;
+	// @ts-expect-error
+	element_prototype.__className = '';
+	// @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;
 }
 
 /**
@@ -42,16 +46,16 @@ export function init_operations() {
  */
 /*@__NO_SIDE_EFFECTS__*/
 export function first_child(node) {
-  return first_child_getter.call(node);
+	return first_child_getter.call(node);
 }
 
 export function child_frag(node) {
-  var child = first_child(node);
+	var child = first_child(node);
 
-  if (child.nodeType === 8 && child.data === '') {
-    return next_sibling(child);
-  }
-  return child;
+	if (child.nodeType === 8 && child.data === '') {
+		return next_sibling(child);
+	}
+	return child;
 }
 
 /**
@@ -61,9 +65,9 @@ export function child_frag(node) {
  */
 /*@__NO_SIDE_EFFECTS__*/
 export function next_sibling(node) {
-  return next_sibling_getter.call(node);
+	return next_sibling_getter.call(node);
 }
 
 export function create_text(value = '') {
-  return document.createTextNode(value);
+	return document.createTextNode(value);
 }

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

@@ -289,36 +289,35 @@ export function derived(fn, block, get, set) {
 
 /**
  * @param {any} v
- * @param {TrackOptions<any> | undefined} o
+ * @param {Function | undefined} get
+ * @param {Function | undefined} set
  * @param {Block} b
- * @returns {Tracked | Derived | Tracked[]}
+ * @returns {Tracked | Derived}
  */
-export function track(v, o, b) {
-	var is_tracked = is_tracked_object(v);
-	var get;
-	var set;
-
-	if (o !== undefined) {
-		get = o.get;
-		set = o.set;
+export function track(v, get, set, b) {
+	if (is_tracked_object(v)) {
+		return v;
 	}
 
-	if (o === undefined || get || set) {
-		if (is_tracked) {
-			return v;
-		}
-
-		if (typeof v === 'function') {
-			return derived(v, b, get, set);
-		}
-		return tracked(v, b, get, set);
+	if (typeof v === 'function') {
+		return derived(v, b, get, set);
 	}
+	return tracked(v, b, get, set);
+}
+
+/**
+ * @param {Record<string|symbol, any>} v
+ * @param {(symbol | string)[]} l
+ * @param {Block} b
+ * @returns {Tracked[]}
+ */
+export function trackSplit(v, l, b) {
+	var is_tracked = is_tracked_object(v);
 
 	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>} */
@@ -326,17 +325,23 @@ export function track(v, o, b) {
 	/** @type {Record<PropertyKey, any | null>} */
 	var descriptors = get_descriptors(v);
 
-	for (let i = 0, key, t; i < list.length; i++) {
-		key = list[i];
+	for (let i = 0, key, t, exists = true; i < l.length; i++) {
+		key = l[i];
 
 		if (is_tracked_object(v[key])) {
 			t = v[key];
 		} else {
-			t = define_property(tracked(undefined, b), 'v', descriptors[key]);
+			t = tracked(undefined, b);
+			exists = !!descriptors[key];
+			if (exists) {
+				t = define_property(t, 'v', descriptors[key]);
+			}
 		}
 
 		out[i] = t;
-		descriptors[key] = null;
+		if (exists) {
+			descriptors[key] = null;
+		}
 	}
 
 	var props = Reflect.ownKeys(descriptors);
@@ -769,7 +774,7 @@ export function get_tracked(tracked) {
 	}
 	var get = tracked.a.get;
 	if (get) {
-		tracked.v = get(value);
+		value = get(value);
 	}
 	return value;
 }
@@ -785,10 +790,6 @@ export function set(tracked, value, block) {
 	if (value !== old_value) {
 		var tracked_block = tracked.b;
 
-		if (!tracked_block) {
-			debugger;
-		}
-
 		if ((block.f & CONTAINS_TEARDOWN) !== 0) {
 			if (teardown) {
 				old_values.set(tracked, value);

package/src/utils/builders.js

@@ -790,4 +790,5 @@ export {
   null_instane as null,
   debugger_builder as debugger,
   try_builder as try,
+  new_builder as new,
 };

package/tests/client/basic.test.ripple

@@ -1,6 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, effect, track } from 'ripple';
+import { mount, flushSync, effect, track, trackSplit } from 'ripple';
 import { compile } from 'ripple/compiler';
+import { TRACKED_ARRAY } from '../../src/runtime/internal/client/constants.js';
 
 describe('basic client', () => {
 	let container;
@@ -379,8 +380,7 @@ describe('basic client', () => {
 		expect(container.querySelector('.count').textContent).toBe('0');
 	});
 
-	// TODO
-	it.skip('renders multiple reactive lexical blocks with complexity', () => {
+	it('renders multiple reactive lexical blocks with complexity', () => {
 
 		component Basic() {
 			const count = 'count';
@@ -1272,16 +1272,11 @@ describe('basic client', () => {
 		expect(container).toMatchSnapshot();
 	});
 
-	it('can retain reactivity for destructure rest via track split', () => {
+	it('can retain reactivity for destructure rest via track trackSplit', () => {
 		let logs = [];
 
 		component App() {
-			let count = track(0, {
-				set(v) {
-					logs.push('inside setter');
-					return v;
-				}
-			});
+			let count = track(0);
 			let name = track('Click Me');
 
 			function buttonRef(el) {
@@ -1294,19 +1289,20 @@ describe('basic client', () => {
 			<Child
 				class="my-button"
 				onClick={() => @name === 'Click Me' ? @name = 'Clicked' : @name = 'Click Me'}
-				{count}
+				{@count}
 				{ref buttonRef}
-			>{@name}</Child>;
+			>{@name}</Child>
+
+			<button onClick={() => @count++}>{'Increment Count'}</button>
 		}
 
 		component Child(props: PropsWithChildren<{ count: Tracked<number> }>) {
-			const [children, count, rest] = track(props, {split: ['children', 'count']});
+			const [children, count, rest] = trackSplit(props, ['children', 'count']);
 
 			if (@count < 2) {
 				<button {...@rest}><@children /></button>
 			}
 			<pre>{@count}</pre>
-			<button onClick={() => @count++}>{'Increment Count'}</button>
 		}
 
 		render(App);
@@ -1327,20 +1323,19 @@ describe('basic client', () => {
 
 		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']);
+		expect(logs).toEqual(['ref called','cleanup ref']);
 	});
 
-	it('errors on invalid value as null for track with split', () => {
+	it('errors on invalid value as null for track with trackSplit', () => {
 		component App() {
 			let message = track('');
 
 			try{
-				const [a, b, rest] = track(null, { split: ['a', 'b'] });
+				const [a, b, rest] = trackSplit(null, ['a', 'b']);
 			} catch(e) {
 				@message = e.message;
 			}
@@ -1354,12 +1349,12 @@ describe('basic client', () => {
 		expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
 	});
 
-	it('errors on invalid value as array for track with split', () => {
+	it('errors on invalid value as array for track with trackSplit', () => {
 		component App() {
 			let message = track('');
 
 			try{
-				const [a, b, rest] = track([1, 2, 3], { split: ['a', 'b'] });
+				const [a, b, rest] = trackSplit([1, 2, 3], ['a', 'b']);
 			} catch(e) {
 				@message = e.message;
 			}
@@ -1373,13 +1368,13 @@ describe('basic client', () => {
 		expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
 	});
 
-	it('errors on invalid value as tracked for track with split', () => {
+	it('errors on invalid value as tracked for track with trackSplit', () => {
 		component App() {
 			const t = track({a: 1, b: 2, c: 3});
 			let message = track('');
 
 			try{
-				const [a, b, rest] = track(t, { split: ['a', 'b'] });
+				const [a, b, rest] = trackSplit(t, ['a', 'b']);
 			} catch(e) {
 				@message = e.message;
 			}
@@ -1393,6 +1388,26 @@ describe('basic client', () => {
 		expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
 	});
 
+	it('returns undefined for non-existent props in track with trackSplit', () => {
+		component App() {
+			const [a, b, rest] = trackSplit({a: 1, c: 1}, ['a', 'b']);
+
+			<pre>{@a}</pre>
+			<pre>{String(@b)}</pre>
+			<pre>{@rest.c}</pre>
+		}
+
+		render(App);
+
+		const preA = container.querySelectorAll('pre')[0];
+		const preB = container.querySelectorAll('pre')[1];
+		const preC = container.querySelectorAll('pre')[2];
+
+		expect(preA.textContent).toBe('1');
+		expect(preB.textContent).toBe('undefined');
+		expect(preC.textContent).toBe('1');
+	});
+
 	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});
@@ -1419,4 +1434,97 @@ describe('basic client', () => {
 		render(App);
 		expect(container).toMatchSnapshot();
 	});
+
+	it('uses track get and set where both mutate value', () => {
+		component App() {
+			let count = track(0, v => v + 1, v => v * 2);
+
+
+			<div class='count'>{@count}</div>
+			<button onClick={() => { @count++ }}>{'Increment'}</button>
+		}
+
+		render(App);
+
+		const countDiv = container.querySelector('.count');
+		const button = container.querySelector('button');
+
+		expect(countDiv.textContent).toBe('1');
+
+		button.click();
+		flushSync();
+		expect(countDiv.textContent).toBe('5');
+	});
+
+	it('uses track get and set where set only mutates value', () => {
+		component App() {
+			let count = track(1, v => v, v => v * 2);
+
+
+			<div class='count'>{@count}</div>
+			<button onClick={() => { @count++ }}>{'Increment'}</button>
+		}
+
+		render(App);
+
+		const countDiv = container.querySelector('.count');
+		const button = container.querySelector('button');
+
+		expect(countDiv.textContent).toBe('1');
+
+		button.click();
+		flushSync();
+		expect(countDiv.textContent).toBe('4');
+	});
+
+	it('uses track get and set where get only mutates value', () => {
+		component App() {
+			let count = track(0, v => v + 1, v => v);
+
+
+			<div class='count'>{@count}</div>
+			<button onClick={() => { @count++ }}>{'Increment'}</button>
+		}
+
+		render(App);
+
+		const countDiv = container.querySelector('.count');
+		const button = container.querySelector('button');
+
+		expect(countDiv.textContent).toBe('1');
+
+		button.click();
+		flushSync();
+		expect(countDiv.textContent).toBe('3');
+	});
+
+	it('works as a reactive TrackedArray when constructed using # syntactic sugar', () => {
+		component App() {
+			const array = #[1, 2, 3];
+
+			<pre>{String(array[3])}</pre>
+			<pre>{array[0]}</pre>
+			<pre>{TRACKED_ARRAY in array}</pre>
+
+			<button onClick={() => { array.push(array.length + 1); array[0] = array[0] + 1 }}>{'Add'}</button>
+		}
+
+		render(App);
+
+		const pre1 = container.querySelectorAll('pre')[0];
+		const pre2 = container.querySelectorAll('pre')[1];
+		const pre3 = container.querySelectorAll('pre')[2];
+		const button = container.querySelector('button');
+
+		expect(pre1.textContent).toBe('undefined');
+		expect(pre2.textContent).toBe('1');
+		expect(pre3.textContent).toBe('true');
+
+		button.click();
+		flushSync();
+
+		expect(pre1.textContent).toBe('4');
+		expect(pre2.textContent).toBe('2');
+	});
 });
+

package/types/index.d.ts

@@ -76,26 +76,21 @@ export type PropsWithExtras<T extends object> = Props & T & Record<string, unkno
 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]> };
+  { [I in keyof K]: Tracked<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<T> = { split?: readonly (string | number | symbol)[], get?: (v: T) => T, set?: (v: T) => T };
+  [...PickKeys<T, K>, Tracked<RestKeys<T, K>>];
 
-export declare function track<V>(value?: V | (() => V)): Tracked<V>;
+export declare function track<V>(value?: V | (() => V), get?: (v: V) => V, set?: (v: V) => V): Tracked<V>;
 
-export declare function track<V extends Props, const K extends readonly (keyof V)[]>(
-  value: V,
-  options: TrackOptions<V>
+export declare function trackSplit<V extends Props, const K extends readonly (keyof V)[]>(
+	value: V,
+	splitKeys: K,
 ): SplitResult<V, K>;
 
 export function on<Type extends keyof WindowEventMap>(