ripple 0.2.83 → 0.2.84

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';
@@ -53,4 +58,6 @@ export { try_block as try, aborted } from './try.js';
 
 export { template, append } from './template.js';
 
-export { tracked_array } from '../../array.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,8 +325,8 @@ export function track(v, o, b) {
 	/** @type {Record<PropertyKey, any | null>} */
 	var descriptors = get_descriptors(v);
 
-	for (let i = 0, key, t, exists = true; 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];
@@ -775,7 +774,7 @@ export function get_tracked(tracked) {
 	}
 	var get = tracked.a.get;
 	if (get) {
-		tracked.v = get(value);
+		value = get(value);
 	}
 	return value;
 }
@@ -791,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/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;
@@ -1271,7 +1272,7 @@ 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() {
@@ -1296,7 +1297,7 @@ describe('basic client', () => {
 		}
 
 		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>
@@ -1329,12 +1330,12 @@ describe('basic client', () => {
 		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;
 			}
@@ -1348,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;
 			}
@@ -1367,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;
 			}
@@ -1387,9 +1388,9 @@ describe('basic client', () => {
 		expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
 	});
 
-	it('returns undefined for non-existent props in track with split', () => {
+	it('returns undefined for non-existent props in track with trackSplit', () => {
 		component App() {
-			const [a, b, rest] = track({a: 1, c: 1}, { split: ['a', 'b'] });
+			const [a, b, rest] = trackSplit({a: 1, c: 1}, ['a', 'b']);
 
 			<pre>{@a}</pre>
 			<pre>{String(@b)}</pre>
@@ -1433,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>(