ripple 0.2.27 → 0.2.28

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is a TypeScript UI framework for the web",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.27",
+  "version": "0.2.28",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

package/src/compiler/phases/1-parse/index.js

@@ -90,6 +90,41 @@ function RipplePlugin(config) {
 
 			jsx_parseAttribute() {
 				let node = this.startNode();
+				const lookahead = this.lookahead();
+
+				if (lookahead.type?.label === ':') {
+					let id = this.startNode();
+					id.name = this.value;
+					node.name = id;
+					this.next();
+					this.finishNode(id, 'Identifier');
+
+					if (this.lookahead().value !== '=') {
+						this.unexpected();
+					}
+					this.next();
+					if (this.lookahead().type !== tt.braceL) {
+						this.unexpected();
+					}
+					this.next();
+					const value = this.jsx_parseAttributeValue();
+					const expression = value.expression;
+					node.get = null;
+					node.set = null;
+
+					if (expression.type == 'SequenceExpression') {
+						node.get = expression.expressions[0];
+						node.set = expression.expressions[1];
+						if (expression.expressions.length > 2) {
+							this.unexpected();
+						}
+					} else {
+						node.get = expression;
+					}
+
+					return this.finishNode(node, 'AccessorAttribute');
+				}
+
 				if (this.eat(tt.braceL)) {
 					if (this.type.label === '@') {
 						this.next();

package/src/compiler/phases/2-analyze/index.js

@@ -321,12 +321,7 @@ const visitors = {
 							binding.transform = {
 								read: (_) => b.call('$.get_computed', path.node),
 								assign: (node, value) => {
-									return b.call(
-										'$.set',
-										path.node,
-										value,
-										b.id('__block'),
-									);
+									return b.call('$.set', path.node, value, b.id('__block'));
 								},
 								update: (_) =>
 									b.call(
@@ -451,6 +446,12 @@ const visitors = {
 							}
 						}
 					}
+				} else if (attr.type === 'AccessorAttribute') {
+					error(
+						'Accessor props are not supported on DOM elements',
+						state.analysis.module.filename,
+						attr,
+					);
 				}
 			}
 		} else {
@@ -459,6 +460,15 @@ const visitors = {
 					if (attr.name.type === 'Identifier') {
 						attribute_names.add(attr.name);
 					}
+				} else if (attr.type === 'AccessorAttribute') {
+					if (!attr.name.name.startsWith('$')) {
+						error(
+							'Accessor props must always be $ prefixed as they are reactive',
+							state.analysis.module.filename,
+							attr,
+						);
+					}
+					attribute_names.add(attr.name);
 				}
 			}
 
@@ -472,7 +482,7 @@ const visitors = {
 						if (implicit_children) {
 							error(
 								'Cannot have both implicit and explicit children',
-								context.state.analysis.module.filename,
+								state.analysis.module.filename,
 								node,
 							);
 						}
@@ -482,7 +492,7 @@ const visitors = {
 					if (explicit_children) {
 						error(
 							'Cannot have both implicit and explicit children',
-							context.state.analysis.module.filename,
+							state.analysis.module.filename,
 							node,
 						);
 					}

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

@@ -617,6 +617,52 @@ const visitors = {
 					);
 				} else if (attr.type === 'UseAttribute') {
 					props.push(b.prop('init', b.call('$.use_prop'), visit(attr.argument, state), true));
+				} else if (attr.type === 'AccessorAttribute') {
+					// # means it's an accessor to the runtime
+					tracked.push(b.literal('#' + attr.name.name));
+					let get_expr;
+
+					if (
+						attr.get.type === 'FunctionExpression' ||
+						attr.get.type === 'ArrowFunctionExpression'
+					) {
+						get_expr = context.state.scope.generate(attr.name.name + '_get');
+
+						state.init.push(b.const(get_expr, visit(attr.get, state)));
+					} else {
+						get_expr = visit(attr.get, state);
+					}
+
+					props.push(
+						b.prop('get', attr.name, b.function(null, [], b.block([b.return(b.call(get_expr))]))),
+					);
+
+					if (attr.set) {
+						let set_expr;
+
+						if (
+							attr.set.type === 'FunctionExpression' ||
+							attr.set.type === 'ArrowFunctionExpression'
+						) {
+							set_expr = context.state.scope.generate(attr.name.name + '_set');
+
+							state.init.push(b.const(set_expr, visit(attr.set, state)));
+						} else {
+							set_expr = visit(attr.set, state);
+						}
+
+						props.push(
+							b.prop(
+								'set',
+								attr.name,
+								b.function(
+									null,
+									[b.id('__value')],
+									b.block([b.return(b.call(set_expr, b.id('__value')))]),
+								),
+							),
+						);
+					}
 				} else {
 					throw new Error('TODO');
 				}
@@ -802,7 +848,8 @@ const visitors = {
 		if (
 			left.type === 'MemberExpression' &&
 			left.property.type === 'Identifier' &&
-			is_tracked_name(left.property.name)
+			is_tracked_name(left.property.name) &&
+			left.property.name !== '$length'
 		) {
 			return b.call(
 				'$.set_property',

package/src/runtime/array.js

@@ -1,3 +1,5 @@
+/** @import { Block } from '#client' */
+
 import { TRACKED_OBJECT } from './internal/client/constants.js';
 import { get, increment, scope, set, tracked } from './internal/client/runtime.js';
 
@@ -35,6 +37,16 @@ const introspect_methods = [
 
 let init = false;
 
+/**
+ * @param {Block | null} block
+ * @throws {Error}
+ */
+function check_block(block) {
+	if (block === null) {
+		throw new Error('Cannot set $length outside of a reactive context');
+	}
+}
+
 export class RippleArray extends Array {
 	#tracked_elements = [];
 	#tracked_index;
@@ -51,6 +63,7 @@ export class RippleArray extends Array {
 		super(...elements);
 
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		for (var i = 0; i < this.length; i++) {
@@ -79,6 +92,7 @@ export class RippleArray extends Array {
 
 	fill() {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		super.fill();
@@ -89,6 +103,7 @@ export class RippleArray extends Array {
 
 	reverse() {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		super.reverse();
@@ -99,6 +114,7 @@ export class RippleArray extends Array {
 
 	sort(fn) {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		super.sort(fn);
@@ -107,8 +123,13 @@ export class RippleArray extends Array {
 		}
 	}
 
+	/**
+	 * @param {...any} elements
+	 * @returns {number}
+	 */
 	unshift(...elements) {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		super.unshift(...elements);
@@ -117,11 +138,14 @@ export class RippleArray extends Array {
 		}
 		tracked_elements.unshift(...elements.map(() => tracked(0, block)));
 
-		set(this.#tracked_index, this.length, block);
+		var length = this.length;
+		set(this.#tracked_index, length, block);
+		return length;
 	}
 
 	shift() {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		super.shift();
@@ -133,8 +157,13 @@ export class RippleArray extends Array {
 		set(this.#tracked_index, this.length, block);
 	}
 
+	/**
+	 * @param {...any} elements
+	 * @returns {number}
+	 */
 	push(...elements) {
 		var block = scope();
+		check_block(block);
 		var start_index = this.length;
 		var tracked_elements = this.#tracked_elements;
 
@@ -143,11 +172,14 @@ export class RippleArray extends Array {
 		for (var i = 0; i < elements.length; i++) {
 			tracked_elements[start_index + i] = tracked(0, block);
 		}
+		var length = this.length;
 		set(this.#tracked_index, this.length, block);
+		return length;
 	}
 
 	pop() {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		super.pop();
@@ -159,8 +191,15 @@ export class RippleArray extends Array {
 		set(this.#tracked_index, this.length, block);
 	}
 
+	/**
+	 * @param {number} start
+	 * @param {number} [delete_count]
+	 * @param {...any} elements
+	 * @returns {any[]}
+	 */
 	splice(start, delete_count, ...elements) {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		super.splice(start, delete_count, ...elements);
@@ -182,6 +221,7 @@ export class RippleArray extends Array {
 
 	set $length(length) {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		if (length !== this.$length) {
@@ -189,13 +229,12 @@ export class RippleArray extends Array {
 				increment(tracked_elements[i], block);
 			}
 			this.length = length;
+			set(this.#tracked_index, length, block);
 			tracked_elements.length = length;
-
-			return true;
 		}
-		return false;
 	}
 
+	/** @param {number} _ */
 	set length(_) {
 		throw new Error('Cannot set length on RippleArray, use $length instead');
 	}
@@ -206,6 +245,10 @@ export class RippleArray extends Array {
 	}
 }
 
+/**
+ * @param {RippleArray} array
+ * @returns {any[]}
+ */
 export function get_all_elements(array) {
 	var tracked_elements = array[TRACKED_OBJECT];
 	var arr = [];

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

@@ -18,6 +18,7 @@ import {
 	active_block,
 	active_component,
 	active_reaction,
+	is_block_dirty,
 	run_block,
 	run_teardown,
 	schedule_update,
@@ -93,21 +94,28 @@ export function async(fn) {
 	});
 }
 
+/**
+ * @param {Element} element
+ * @param {() => (element: Element) => (void | (() => void))} get_fn
+ * @returns {Block}
+ */
 export function use(element, get_fn) {
-	var use_obj = undefined;
+	/** @type {(element: Element) => (void | (() => void) | undefined)} */
+	var use_fn;
+	/** @type {Block | null} */
 	var e;
 
 	return block(RENDER_BLOCK, () => {
-		if (use_obj !== (use_obj = get_fn())) {
+		if (use_fn !== (use_fn = get_fn())) {
 			if (e) {
 				destroy_block(e);
 				e = null;
 			}
 
-			if (use_obj) {
+			if (use_fn) {
 				e = branch(() => {
 					effect(() => {
-						return use_obj(element);
+						return use_fn(element);
 					});
 				});
 			}
@@ -115,14 +123,27 @@ export function use(element, get_fn) {
 	});
 }
 
+/**
+ * @param {() => void} fn
+ * @returns {Block}
+ */
 export function root(fn) {
 	return block(ROOT_BLOCK, fn);
 }
 
+/**
+ * @param {() => void} fn
+ * @param {any} state
+ * @returns {Block}
+ */
 export function create_try_block(fn, state) {
 	return block(TRY_BLOCK, fn, state);
 }
 
+/**
+ * @param {Block} block
+ * @param {Block} parent_block
+ */
 function push_block(block, parent_block) {
 	var parent_last = parent_block.last;
 	if (parent_last === null) {
@@ -174,6 +195,10 @@ export function block(flags, fn, state = null) {
 	return block;
 }
 
+/**
+ * @param {Block} parent
+ * @param {boolean} [remove_dom]
+ */
 export function destroy_block_children(parent, remove_dom = false) {
 	var block = parent.first;
 	parent.first = parent.last = null;
@@ -187,6 +212,10 @@ export function destroy_block_children(parent, remove_dom = false) {
 	}
 }
 
+/**
+ * @param {Block} parent
+ * @param {boolean} [remove_dom]
+ */
 export function destroy_non_branch_children(parent, remove_dom = false) {
 	var block = parent.first;
 
@@ -207,6 +236,9 @@ export function destroy_non_branch_children(parent, remove_dom = false) {
 	}
 }
 
+/**
+ * @param {Block} block
+ */
 export function unlink_block(block) {
 	var parent = block.p;
 	var prev = block.prev;
@@ -221,6 +253,9 @@ export function unlink_block(block) {
 	}
 }
 
+/**
+ * @param {Block} block
+ */
 export function pause_block(block) {
 	if ((block.f & PAUSED) !== 0) {
 		return;
@@ -238,6 +273,9 @@ export function pause_block(block) {
 	run_teardown(block);
 }
 
+/**
+ * @param {Block} block
+ */
 export function resume_block(block) {
 	if ((block.f & PAUSED) === 0) {
 		return;
@@ -257,7 +295,12 @@ export function resume_block(block) {
 	}
 }
 
+/**
+ * @param {Block} target_block
+ * @returns {boolean}
+ */
 export function is_destroyed(target_block) {
+	/** @type {Block | null} */
 	var block = target_block;
 
 	while (block !== null) {
@@ -274,6 +317,10 @@ export function is_destroyed(target_block) {
 	return true;
 }
 
+/**
+ * @param {Block} block
+ * @param {boolean} [remove_dom]
+ */
 export function destroy_block(block, remove_dom = true) {
 	block.f ^= DESTROYED;
 

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

@@ -28,7 +28,7 @@ import {
 	USE_PROP,
 } from './constants';
 import { capture, suspend } from './try.js';
-import { define_property, is_array } from './utils';
+import { define_property, get_descriptor, is_array } from './utils';
 import {
 	object_keys as original_object_keys,
 	object_values as original_object_values,
@@ -192,6 +192,7 @@ function run_computed(computed) {
  * @param {Block} block
  */
 export function handle_error(error, block) {
+	/** @type {Block | null} */
 	var current = block;
 
 	while (current !== null) {
@@ -230,6 +231,7 @@ export function run_block(block) {
 
 		if (typeof res === 'function') {
 			block.t = res;
+			/** @type {Block | null} */
 			let current = block;
 
 			while (current !== null && (current.f & CONTAINS_TEARDOWN) === 0) {
@@ -332,7 +334,7 @@ function is_tracking_dirty(tracking) {
 /**
  * @param {Block} block
  */
-function is_block_dirty(block) {
+export function is_block_dirty(block) {
 	var flags = block.f;
 
 	if ((flags & (ROOT_BLOCK | BRANCH_BLOCK)) !== 0) {
@@ -407,6 +409,7 @@ export function deferred(fn) {
 	var parent = active_block;
 	var block = active_scope;
 	var res = [UNINITIALIZED];
+	// TODO implement DEFERRED flag on tracked
 	var t = tracked(UNINITIALIZED, block, DEFERRED);
 	var tracked_properties = [t];
 	var prev_value = UNINITIALIZED;
@@ -535,7 +538,7 @@ function flush_updates(root_block) {
 			}
 		}
 
-		/** @type {Block} */
+		/** @type {Block | null} */
 		var parent = current.p;
 		current = current.next;
 
@@ -626,7 +629,7 @@ export function schedule_update(block) {
 		if ((flags & ROOT_BLOCK) !== 0) {
 			break;
 		}
-		current = current.p;
+		current = /** @type {Block} */ (current.p);
 	}
 
 	queued_root_blocks.push(current);
@@ -773,6 +776,11 @@ export function flush_sync(fn) {
 	}
 }
 
+/**
+ * @template T
+ * @param {() => T} fn
+ * @returns {T & { [SPREAD_OBJECT]: () => T }}
+ */
 export function tracked_spread_object(fn) {
 	var obj = fn();
 
@@ -784,7 +792,14 @@ export function tracked_spread_object(fn) {
 	return obj;
 }
 
+/**
+ * @param {any} obj
+ * @param {string[]} properties
+ * @param {Block} block
+ * @returns {object}
+ */
 export function tracked_object(obj, properties, block) {
+	/** @type {Record<string, Tracked | Computed>} */
 	var tracked_properties = obj[TRACKED_OBJECT];
 
 	if (tracked_properties === undefined) {
@@ -797,27 +812,42 @@ export function tracked_object(obj, properties, block) {
 
 	for (var i = 0; i < properties.length; i++) {
 		var property = properties[i];
-		var initial = obj[property];
+		/** @type {Tracked | Computed} */
 		var tracked_property;
 
-		if (typeof initial === 'function' && initial[COMPUTED_PROPERTY] === true) {
-			tracked_property = computed(initial, block);
-			initial = run_computed(tracked_property);
+		// accessor passed in, to avoid an expensive get_descriptor call
+		// in the fast path
+		if (property[0] === '#') {
+			property = property.slice(1);
+			var descriptor = /** @type {PropertyDescriptor} */ (get_descriptor(obj, property));
+			var desc_get = descriptor.get;
+			tracked_property = computed(desc_get, block);
+			/** @type {any} */
+			var initial = run_computed(/** @type {Computed} */ (tracked_property));
 			obj[property] = initial;
-			// TODO If nothing is tracked in the computed function, we can make it a standard tracked
-			// however this is more allocations, so we probably want to minimize this
-			// if (tracked_property.d === null) {
-			// 	tracked_property = tracked(initial, block);
-			// }
 		} else {
-			tracked_property = tracked(initial, block);
+			var initial = obj[property];
+
+			if (typeof initial === 'function' && initial[COMPUTED_PROPERTY] === true) {
+				tracked_property = computed(initial, block);
+				initial = run_computed(/** @type {Computed} */ (tracked_property));
+				obj[property] = initial;
+			} else {
+				tracked_property = tracked(initial, block);
+			}
 		}
+
 		tracked_properties[property] = tracked_property;
 	}
 
 	return obj;
 }
 
+/**
+ * @template T
+ * @param {() => T} fn
+ * @returns {() => T}
+ */
 export function computed_property(fn) {
 	define_property(fn, COMPUTED_PROPERTY, {
 		value: true,
@@ -1002,6 +1032,12 @@ export function spread_object(obj) {
 	return values;
 }
 
+/**
+ * @template T
+ * @param {Block} block
+ * @param {() => T} fn
+ * @returns {T}
+ */
 export function with_scope(block, fn) {
 	var previous_scope = active_scope;
 	try {
@@ -1054,6 +1090,12 @@ export function use_prop() {
 	return Symbol(USE_PROP);
 }
 
+/**
+ * @template T
+ * @param {T | undefined} value
+ * @param {T} fallback
+ * @returns {T}
+ */
 export function fallback(value, fallback) {
 	return value === undefined ? fallback : value;
-}
+}

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

@@ -5,7 +5,7 @@ export type Component = {
 	e: null | Array<{
 		b: Block;
 		fn: Function;
-		r: null | Block;
+		r: null | Block | Computed;
 	}>;
 	p: null | Component;
 	m: boolean;
@@ -40,10 +40,11 @@ export type Block = {
 	first: null | Block;
 	f: number;
 	fn: any;
-	last: null;
-	next: null;
+	last: null | Block;
+	next: null | Block;
 	p: null | Block;
-	prev: null;
+	prev: null | Block;
 	s: any;
-	t: Tracked | null;
+	// teardown function
+	t: (() => {}) | null;
 };