ripple 0.2.13 → 0.2.14

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.13",
+  "version": "0.2.14",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",
@@ -48,6 +48,10 @@
       "default": "./src/jsx-runtime.js"
     }
   },
+  "imports": {
+    "#client": "./src/runtime/internal/client/types.d.ts",
+    "#client/constants": "./src/internal/client/constants.js"
+  },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.5",
     "acorn": "^8.15.0",
@@ -60,6 +64,7 @@
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",
+    "@types/node": "^24.3.0",
     "typescript": "^5.9.2"
   }
 }

package/src/compiler/index.js

@@ -21,6 +21,5 @@ export function compile_to_volar_mappings(source, filename) {
 	const analysis = analyze(ast, filename);
 	const transformed = transform(filename, source, analysis, true);
 
-	// Use Svelte's approach to convert esrap sourcemap to Volar mappings
 	return convert_source_map_to_mappings(transformed.js.map, source, transformed.js.code);
 }

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

@@ -131,7 +131,32 @@ function read_body(parser) {
 }
 
 function read_at_rule(parser) {
-	debugger;
+	const start = parser.index;
+	parser.eat('@', true);
+
+	const name = read_identifier(parser);
+
+	const prelude = read_value(parser);
+
+	/** @type {AST.CSS.Block | null} */
+	let block = null;
+
+	if (parser.match('{')) {
+		// e.g. `@media (...) {...}`
+		block = read_block(parser);
+	} else {
+		// e.g. `@import '...'`
+		parser.eat(';', true);
+	}
+
+	return {
+		type: 'Atrule',
+		start,
+		end: parser.index,
+		name,
+		prelude,
+		block
+	};
 }
 
 function read_rule(parser) {

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

@@ -5,7 +5,7 @@ import {
 	get_delegated_event,
 	is_event_attribute,
 	is_inside_component,
-	is_svelte_import,
+	is_ripple_import,
 	is_tracked_name,
 } from '../../utils.js';
 import { extract_paths } from '../../../utils/ast.js';
@@ -156,7 +156,7 @@ const visitors = {
 			const init_is_untracked =
 				declarator.init !== null &&
 				declarator.init.type === 'CallExpression' &&
-				is_svelte_import(declarator.init.callee, context) &&
+				is_ripple_import(declarator.init.callee, context) &&
 				declarator.init.callee.type === 'Identifier' &&
 				(declarator.init.callee.name === 'untrack' || declarator.init.callee.name === 'deferred');
 

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

@@ -16,7 +16,7 @@ import {
 	escape_html,
 	is_boolean_attribute,
 	is_dom_property,
-	is_svelte_import,
+	is_ripple_import,
 	is_declared_within_component,
 	is_inside_call_expression,
 } from '../../utils.js';
@@ -131,7 +131,7 @@ const visitors = {
 			(parent?.type === 'MemberExpression' && parent.property === node) ||
 			is_inside_call_expression(context) ||
 			!context.path.some((node) => node.type === 'Component') ||
-			(is_svelte_import(callee, context) &&
+			(is_ripple_import(callee, context) &&
 				(callee.type !== 'Identifier' ||
 					(callee.name !== 'array' && callee.name !== 'deferred'))) ||
 			is_declared_within_component(callee, context)
@@ -150,6 +150,25 @@ const visitors = {
 		);
 	},
 
+	NewExpression(node, context) {
+		const callee = node.callee;
+		const parent = context.path.at(-1);
+
+		if (context.state.metadata?.tracking === false) {
+			context.state.metadata.tracking = true;
+		}
+
+		return b.call(
+			'$.with_scope',
+			b.id('__block'),
+			b.thunk({
+				...node,
+				callee: context.visit(callee),
+				arguments: node.arguments.map((arg) => context.visit(arg)),
+			}),
+		);
+	},
+
 	MemberExpression(node, context) {
 		const parent = context.path.at(-1);
 
@@ -1543,7 +1562,7 @@ export function transform(filename, source, analysis, to_ts) {
 	};
 
 	const program = /** @type {ESTree.Program} */ (
-		walk(/** @type {AST.SvelteNode} */ (analysis.ast), state, visitors)
+		walk((analysis.ast), state, visitors)
 	);
 
 	for (const hoisted of state.hoisted) {

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

@@ -2,6 +2,7 @@ import MagicString from 'magic-string';
 import { walk } from 'zimmerframe';
 
 const regex_css_browser_prefix = /^-((webkit)|(moz)|(o)|(ms))-/;
+const regex_css_name_boundary = /^[\s,;}]$/;
 
 const is_keyframes_node = (node) => remove_css_prefix(node.name) === 'keyframes';
 

package/src/compiler/scope.js

@@ -229,7 +229,7 @@ export class Scope {
 	/**
 	 * A set of all the names referenced with this scope
 	 * — useful for generating unique names
-	 * @type {Map<string, { node: Identifier; path: AST.SvelteNode[] }[]>}
+	 * @type {Map<string, { node: Identifier; path: AST.Node[] }[]>}
 	 */
 	references = new Map();
 
@@ -362,7 +362,7 @@ export class Scope {
 
 	/**
 	 * @param {Identifier} node
-	 * @param {AST.SvelteNode[]} path
+	 * @param {AST.Node[]} path
 	 */
 	reference(node, path) {
 		path = [...path]; // ensure that mutations to path afterwards don't affect this reference

package/src/compiler/utils.js

@@ -367,7 +367,7 @@ export function is_tracked_name(name) {
 	return typeof name === 'string' && name.startsWith('$') && name.length > 1 && name[1] !== '$';
 }
 
-export function is_svelte_import(callee, context) {
+export function is_ripple_import(callee, context) {
 	if (callee.type === 'Identifier') {
 		const binding = context.state.scope.get(callee.name);
 

package/src/runtime/array.js

@@ -35,10 +35,18 @@ const introspect_methods = [
 
 let init = false;
 
-class RippleArray extends Array {
+export class RippleArray extends Array {
 	#tracked_elements = [];
 	#tracked_index;
 
+	static from(arrayLike, mapFn, thisArg) {
+		return new RippleArray(Array.from(arrayLike, mapFn, thisArg));
+	}
+
+	static of(...elements) {
+		return new RippleArray(...elements);
+	}
+
 	constructor(...elements) {
 		super(...elements);
 
@@ -210,6 +218,3 @@ export function get_all_elements(array) {
 	return arr;
 }
 
-export function array(...elements) {
-	return new RippleArray(...elements);
-}

package/src/runtime/index.js

@@ -1,3 +1,5 @@
+/** @import { Block } from '#client' */
+
 import { destroy_block, root } from './internal/client/blocks.js';
 import { handle_root_events } from './internal/client/events.js';
 import { init_operations } from './internal/client/operations.js';
@@ -7,6 +9,11 @@ import { create_anchor } from './internal/client/utils.js';
 // Re-export JSX runtime functions for jsxImportSource: "ripple"
 export { jsx, jsxs, Fragment } from '../jsx-runtime.js';
 
+/**
+ * @param {(anchor: Node, props: Record<string, any>, active_block: Block | null) => void} component
+ * @param {{ props?: Record<string, any>, target: HTMLElement }} options
+ * @returns {() => void}
+ */
 export function mount(component, options) {
 	init_operations();
 
@@ -24,13 +31,14 @@ export function mount(component, options) {
 	return () => {
 		cleanup_events();
 		destroy_block(_root);
-		target.removeChild(anchor_node);
 	};
 }
 
+export { create_context as createContext } from './internal/client/context.js';
+
 export { flush_sync as flushSync, untrack, deferred } from './internal/client/runtime.js';
 
-export { array } from './array.js';
+export { RippleArray } from './array.js';
 
 export { keyed } from './internal/client/for.js';
 

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

@@ -1,3 +1,5 @@
+/** @import { Block, Computed } from '#client' */
+
 import {
 	BLOCK_HAS_RUN,
 	BRANCH_BLOCK,
@@ -23,6 +25,9 @@ import {
 } from './runtime';
 import { suspend } from './try';
 
+/**
+ * @param {Function} fn
+ */
 export function user_effect(fn) {
 	if (active_block === null) {
 		throw new Error(
@@ -45,22 +50,41 @@ export function user_effect(fn) {
 	return block(EFFECT_BLOCK, fn);
 }
 
+/**
+ * @param {Function} fn
+ */
 export function effect(fn) {
 	return block(EFFECT_BLOCK, fn);
 }
 
+/**
+ * @param {Function} fn
+ * @param {number} [flags]
+ */
 export function render(fn, flags = 0) {
 	return block(RENDER_BLOCK | flags, fn);
 }
 
+/**
+ * @param {any} element
+ * @param {any} fn
+ * @param {number} [flags]
+ */
 export function render_spread(element, fn, flags = 0) {
 	return block(RENDER_BLOCK | flags, apply_element_spread(element, fn));
 }
 
+/**
+ * @param {Function} fn
+ * @param {number} [flags]
+ */
 export function branch(fn, flags = 0) {
 	return block(BRANCH_BLOCK | flags, fn);
 }
 
+/**
+ * @param {() => any} fn
+ */
 export function async(fn) {
 	return block(BRANCH_BLOCK, async () => {
 		const unsuspend = suspend();
@@ -118,7 +142,14 @@ function push_block(block, parent_block) {
 	}
 }
 
+/**
+ * @param {number} flags
+ * @param {Function} fn
+ * @param {any} state
+ * @returns {Block}
+ */
 export function block(flags, fn, state = null) {
+	/** @type {Block} */
 	var block = {
 		c: active_component,
 		d: null,
@@ -134,7 +165,7 @@ export function block(flags, fn, state = null) {
 	};
 
 	if (active_reaction !== null && (active_reaction.f & COMPUTED) !== 0) {
-		(active_reaction.blocks ??= []).push(block);
+		(/** @type {Computed} */ (active_reaction).blocks ??= []).push(block);
 	}
 
 	if (active_block !== null) {

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

@@ -0,0 +1,69 @@
+/** @import { Component } from '#client' */
+
+import { active_component } from './runtime';
+
+/**
+ * @template T
+ */
+export class Context {
+	/**
+	 * @param {T} initial_value
+	 */
+	constructor(initial_value) {
+		/** @type {T} */
+		this._v = initial_value;
+	}
+
+	get() {
+		const component = active_component;
+		const context = this;
+
+		if (component === null) {
+			throw new Error('No active component found, cannot get context');
+		}
+		/** @type {Component | null} */
+		let current_component = component;
+
+		while (current_component !== null) {
+			const context_map = current_component.c;
+
+			if (context_map?.has(context)) {
+				return context_map.get(context);
+			}
+
+			current_component = current_component.p;
+		}
+
+		return context._v;
+	}
+
+	/**
+	 * @template T
+	 * @param {T} value
+	 */
+	set(value) {
+		const component = active_component;
+		const context = this;
+
+		if (component === null) {
+			throw new Error('No active component found, cannot set context');
+		}
+
+		let current_context = component.c;
+
+		if (current_context === null) {
+			current_context = component.c = new Map();
+		}
+
+		current_context.set(context, value);
+	}
+}
+
+/**
+ * @template T
+ * @param {T} initial_value
+ * @returns {Context<T>}
+ */
+export function create_context(initial_value) {
+  return new Context(initial_value);
+}

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

@@ -15,6 +15,11 @@ var all_registered_events = new Set();
 /** @type {Set<(events: Array<string>) => void>} */
 var root_event_handles = new Set();
 
+/**
+ * @this {EventTarget}
+ * @param {Event} event
+ * @returns {void}
+ */
 export function handle_event_propagation(event) {
 	var handler_element = this;
 	var owner_document = /** @type {Node} */ (handler_element).ownerDocument;
@@ -148,6 +153,12 @@ export function handle_event_propagation(event) {
 	}
 }
 
+/**
+ * @param {string} event_name
+ * @param {EventTarget} dom
+ * @param {EventListener} [handler]
+ * @param {AddEventListenerOptions} [options]
+ */
 function create_event(event_name, dom, handler, options = {}) {
 	var block = active_block;
 

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

@@ -25,7 +25,7 @@ function get_setters(element) {
 	var element_proto = Element.prototype;
 
 	// Stop at Element, from there on there's only unnecessary setters we're not interested in
-	// Do not use contructor.name here as that's unreliable in some browser environments
+	// Do not use constructor.name here as that's unreliable in some browser environments
 	while (element_proto !== proto) {
 		descriptors = get_descriptors(proto);
 

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

@@ -1,3 +1,5 @@
+/** @import { Block, Component, Dependency, Computed, Tracked, Ref } from '#client' */
+
 import {
 	destroy_block,
 	destroy_non_branch_children,
@@ -37,9 +39,13 @@ import {
 const FLUSH_MICROTASK = 0;
 const FLUSH_SYNC = 1;
 
+/** @type {null | Block} */
 export let active_block = null;
+/** @type {null | Block | Computed} */
 export let active_reaction = null;
+/** @type {null | Block} */
 export let active_scope = null;
+/** @type {null | Component} */
 export let active_component = null;
 
 var old_values = new Map();
@@ -49,9 +55,12 @@ let scheduler_mode = FLUSH_MICROTASK;
 // Used for handling scheduling
 let is_micro_task_queued = false;
 let clock = 0;
+/** @type {Block[]} */
 let queued_root_blocks = [];
+/** @type {(() => void)[]} */
 let queued_microtasks = [];
 let flush_count = 0;
+/** @type {null | Dependency} */
 let active_dependency = null;
 
 export let tracking = false;
@@ -61,22 +70,37 @@ function increment_clock() {
 	return ++clock;
 }
 
+/**
+ * @param {Block | null} block
+ */
 export function set_active_block(block) {
 	active_block = block;
 }
 
+/**
+ * @param {Block | null} reaction
+ */
 export function set_active_reaction(reaction) {
 	active_reaction = reaction;
 }
 
+/**
+ * @param {Component | null} component
+ */
 export function set_active_component(component) {
 	active_component = component;
 }
 
+/**
+ * @param {boolean} value
+ */
 export function set_tracking(value) {
 	tracking = value;
 }
 
+/**
+ * @param {Block} block
+ */
 export function run_teardown(block) {
 	var fn = block.t;
 	if (fn !== null) {
@@ -100,6 +124,9 @@ export function run_teardown(block) {
 	}
 }
 
+/**
+ * @param {Computed} computed
+ */
 function update_computed(computed) {
 	var value = computed.v;
 
@@ -113,6 +140,9 @@ function update_computed(computed) {
 	}
 }
 
+/**
+ * @param {Computed} computed
+ */
 function destroy_computed_children(computed) {
 	var blocks = computed.blocks;
 
@@ -124,6 +154,9 @@ function destroy_computed_children(computed) {
 	}
 }
 
+/**
+ * @param {Computed} computed
+ */
 function run_computed(computed) {
 	var previous_block = active_block;
 	var previous_reaction = active_reaction;
@@ -154,6 +187,10 @@ function run_computed(computed) {
 	}
 }
 
+/**
+ * @param {unknown} error
+ * @param {Block} block
+ */
 export function handle_error(error, block) {
 	var current = block;
 
@@ -169,6 +206,9 @@ export function handle_error(error, block) {
 	throw error;
 }
 
+/**
+ * @param {Block} block
+ */
 export function run_block(block) {
 	var previous_block = active_block;
 	var previous_reaction = active_reaction;
@@ -210,6 +250,12 @@ export function run_block(block) {
 	}
 }
 
+/**
+ *
+ * @param {any} v
+ * @param {Block} b
+ * @returns {Tracked}
+ */
 export function tracked(v, b) {
 	return {
 		b,
@@ -219,6 +265,11 @@ export function tracked(v, b) {
 	};
 }
 
+/**
+ * @param {any} fn
+ * @param {any} block
+ * @returns {Computed}
+ */
 export function computed(fn, block) {
 	return {
 		b: block,
@@ -231,12 +282,17 @@ export function computed(fn, block) {
 	};
 }
 
+/**
+ * @param {Tracked} tracked
+ * @returns {Dependency}
+ */
 function create_dependency(tracked) {
-	var existing = active_reaction.d;
+	var reaction = /** @type {Computed | Block} **/ (active_reaction);
+	var existing = reaction.d;
 
 	// Recycle tracking entries
 	if (existing !== null) {
-		active_reaction.d = existing.n;
+		reaction.d = existing.n;
 		existing.c = tracked.c;
 		existing.t = tracked;
 		existing.n = null;
@@ -250,6 +306,9 @@ function create_dependency(tracked) {
 	};
 }
 
+/**
+ * @param {Dependency | null} tracking
+ */
 function is_tracking_dirty(tracking) {
 	if (tracking === null) {
 		return false;
@@ -258,7 +317,7 @@ function is_tracking_dirty(tracking) {
 		var tracked = tracking.t;
 
 		if ((tracked.f & COMPUTED) !== 0) {
-			update_computed(tracked);
+			update_computed(/** @type {Computed} **/ (tracked));
 		}
 
 		if (tracked.c > tracking.c) {
@@ -270,6 +329,9 @@ function is_tracking_dirty(tracking) {
 	return false;
 }
 
+/**
+ * @param {Block} block
+ */
 function is_block_dirty(block) {
 	var flags = block.f;
 
@@ -405,6 +467,9 @@ function capture_deferred(fn) {
 	return [value, deferred];
 }
 
+/**
+ * @param {Block} block
+ */
 function flush_deferred_upodates(block) {
 	var current = block.first;
 	var is_awaited = false;
@@ -432,7 +497,11 @@ function flush_deferred_upodates(block) {
 	return is_awaited;
 }
 
+/**
+ * @param {Block} root_block
+ */
 function flush_updates(root_block) {
+	/** @type {Block | null} */
 	var current = root_block;
 	var containing_update = null;
 	var effects = [];
@@ -457,6 +526,7 @@ function flush_updates(root_block) {
 					handle_error(error, current);
 				}
 			}
+			/** @type {Block | null} */
 			var child = current.first;
 
 			if (child !== null) {
@@ -465,6 +535,7 @@ function flush_updates(root_block) {
 			}
 		}
 
+		/** @type {Block} */
 		var parent = current.p;
 		current = current.next;
 
@@ -493,6 +564,9 @@ function flush_updates(root_block) {
 	}
 }
 
+/**
+ * @param {Block[]} root_blocks
+ */
 function flush_queued_root_blocks(root_blocks) {
 	for (let i = 0; i < root_blocks.length; i++) {
 		flush_updates(root_blocks[i]);
@@ -523,6 +597,9 @@ function flush_microtasks() {
 	old_values.clear();
 }
 
+/**
+ * @param { (() => void) } [fn]
+ */
 export function queue_microtask(fn) {
 	if (!is_micro_task_queued) {
 		is_micro_task_queued = true;
@@ -533,6 +610,9 @@ export function queue_microtask(fn) {
 	}
 }
 
+/**
+ * @param {Block} block
+ */
 export function schedule_update(block) {
 	if (scheduler_mode === FLUSH_MICROTASK) {
 		queue_microtask();
@@ -552,14 +632,17 @@ export function schedule_update(block) {
 	queued_root_blocks.push(current);
 }
 
+/**
+ * @param {Tracked} tracked
+ */
 function register_dependency(tracked) {
-	var depedency = active_dependency;
+	var dependency = active_dependency;
 
-	if (depedency === null) {
-		depedency = create_dependency(tracked);
-		active_dependency = depedency;
+	if (dependency === null) {
+		dependency = create_dependency(tracked);
+		active_dependency = dependency;
 	} else {
-		var current = depedency;
+		var current = dependency;
 
 		while (current !== null) {
 			if (current.t === tracked) {
@@ -573,11 +656,14 @@ function register_dependency(tracked) {
 			current = next;
 		}
 
-		depedency = create_dependency(tracked);
-		current.n = depedency;
+		dependency = create_dependency(tracked);
+		current.n = dependency;
 	}
 }
 
+/**
+ * @param {Computed} computed
+ */
 export function get_computed(computed) {
 	update_computed(computed);
 	if (tracking) {
@@ -587,10 +673,18 @@ export function get_computed(computed) {
 	return computed.v;
 }
 
+/**
+ * @param {Computed | Tracked} tracked
+ */
 export function get(tracked) {
-	return (tracked.f & COMPUTED) !== 0 ? get_computed(tracked) : get_tracked(tracked);
+	return (tracked.f & COMPUTED) !== 0
+		? get_computed(/** @type {Computed} */ (tracked))
+		: get_tracked(tracked);
 }
 
+/**
+ * @param {Tracked} tracked
+ */
 export function get_tracked(tracked) {
 	var value = tracked.v;
 	if (tracking) {
@@ -602,6 +696,11 @@ export function get_tracked(tracked) {
 	return value;
 }
 
+/**
+ * @param {Computed | Tracked} tracked
+ * @param {any} value
+ * @param {Block} block
+ */
 export function set(tracked, value, block) {
 	var old_value = tracked.v;
 
@@ -622,6 +721,11 @@ export function set(tracked, value, block) {
 	}
 }
 
+/**
+ * @template T
+ * @param {() => T} fn
+ * @returns {T}
+ */
 export function untrack(fn) {
 	var previous_tracking = tracking;
 	var previous_dependency = active_dependency;
@@ -635,11 +739,17 @@ export function untrack(fn) {
 	}
 }
 
+/**
+ * @template T
+ * @param {() => T} [fn]
+ * @returns {T}
+ */
 export function flush_sync(fn) {
 	var previous_scheduler_mode = scheduler_mode;
 	var previous_queued_root_blocks = queued_root_blocks;
 
 	try {
+		/** @type {Block[]} */
 		var root_blocks = [];
 
 		scheduler_mode = FLUSH_SYNC;
@@ -656,7 +766,7 @@ export function flush_sync(fn) {
 
 		flush_count = 0;
 
-		return result;
+		return /** @type {T} */ (result);
 	} finally {
 		scheduler_mode = previous_scheduler_mode;
 		queued_root_blocks = previous_queued_root_blocks;
@@ -908,6 +1018,7 @@ export function scope() {
 
 export function push_component() {
 	var component = {
+		c: null,
 		e: null,
 		m: false,
 		p: active_component,
@@ -916,7 +1027,7 @@ export function push_component() {
 }
 
 export function pop_component() {
-	var component = active_component;
+	var component = /** @type {Component} */ (active_component);
 	component.m = true;
 	var effects = component.e;
 	if (effects !== null) {
@@ -943,6 +1054,11 @@ export function use_prop() {
 	return Symbol(USE_PROP);
 }
 
+/**
+ * @template T
+ * @param {T} value
+ * @returns {Ref<T>}
+ */
 export function ref(value) {
 	var block = active_block || active_scope;
 	if (!block) {

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

@@ -0,0 +1,53 @@
+import type { Context } from './context.js';
+
+export type Component = {
+	c: null | Map<Context<any>, any>;
+	e: null | Array<{
+		b: Block;
+		fn: Function;
+		r: null | Block;
+	}>;
+	p: null | Component;
+	m: boolean;
+};
+
+export type Dependency = {
+	c: number;
+	t: Tracked | Computed;
+	n: null | Dependency;
+};
+
+export type Tracked = {
+	b: Block;
+	c: number;
+	f: number;
+	v: any;
+};
+
+export type Computed = {
+		b: Block,
+		blocks: null | Block[],
+		c: number,
+		d: null,
+		f: number,
+		fn: Function,
+		v: any,
+};
+
+export type Block = {
+	c: null | Component;
+	d: null | Dependency;
+	first: null | Block;
+	f: number;
+	fn: any;
+	last: null;
+	next: null;
+	p: null | Block;
+	prev: null;
+	s: any;
+	t: Tracked | null;
+};
+
+export type Ref<T> = {
+	$current: T;
+};	

package/src/utils/builders.js

@@ -116,7 +116,7 @@ export function call(callee, ...args) {
 	if (typeof callee === 'string') callee = id(callee);
 	args = args.slice();
 
-	// replacing missing arguments with `undefined`, unless they're at the end in which case remove them
+	// replacing missing arguments with `void(0)`, unless they're at the end in which case remove them
 	let i = args.length;
 	let popping = true;
 	while (i--) {
@@ -124,7 +124,7 @@ export function call(callee, ...args) {
 			if (popping) {
 				args.pop();
 			} else {
-				args[i] = id('undefined');
+				args[i] = void0;
 			}
 		} else {
 			popping = false;
@@ -773,6 +773,8 @@ export function jsx_spread_attribute(argument) {
 	};
 }
 
+export const void0 = unary('void', literal(0));
+
 export {
 	await_builder as await,
 	let_builder as let,

package/tests/array.test.ripple

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 
-import { mount, flushSync, array } from 'ripple';
+import { mount, flushSync, RippleArray } from 'ripple';
 
 describe('array', () => {
 	let container;
@@ -23,7 +23,7 @@ describe('array', () => {
 
 	it('handles direct assignment', () => {
 		component ArrayTest() {
-			let items = array(1, 2, 3);
+			let items = new RippleArray(1, 2, 3);
 
 			<button onClick={() => items[items.$length] = items.$length + 1}>{'increment'}</button>
 
@@ -51,4 +51,4 @@ describe('array', () => {
 		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
 	});
-});
+});

package/tests/context.test.ripple

@@ -0,0 +1,46 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+
+import { mount, createContext } from 'ripple';
+
+describe('context', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+	});
+
+  it('creates a reactive ref with initial value', () => {
+    const MyContext = createContext(null);
+
+    component Child() {
+      const value = MyContext.get(MyContext);
+
+      <div>{value}</div>
+    }
+
+    component TestContext() {
+      const value = MyContext.get(MyContext);
+
+      console.log(value);
+
+      MyContext.set("Hello from context!");
+
+      <Child />
+    }
+
+		render(TestContext);
+
+		expect(container.querySelector('div').textContent).toBe('Hello from context!');
+	});
+});

package/tests/for.test.ripple

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 
-import { mount, flushSync, array } from 'ripple';
+import { mount, flushSync, RippleArray } from 'ripple';
 
 describe('for statements', () => {
 	let container;
@@ -37,7 +37,7 @@ describe('for statements', () => {
 
 	it('render a simple dynamic array', () => {
 		component App() {
-			const items = array('Item 1', 'Item 2', 'Item 3');
+			const items = new RippleArray('Item 1', 'Item 2', 'Item 3');
 
 			for (const item of items) {
 				<div class={item}>{item}</div>
@@ -56,4 +56,4 @@ describe('for statements', () => {
 
 		expect(container).toMatchSnapshot();
 	});
-});
+});

package/tests/use.test.ripple

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 
-import { mount, flushSync, array } from 'ripple';
+import { mount, flushSync, RippleArray } from 'ripple';
 
 describe('@use element decorators', () => {
 	let container;
@@ -36,7 +36,7 @@ describe('@use element decorators', () => {
 		let _node;
 
 		component Component() {
-			let items = array(...[1, 2, 3]);
+			let items = RippleArray.from([1, 2, 3]);
 
 			function ref(node) {
 				_node = node;
@@ -56,4 +56,4 @@ describe('@use element decorators', () => {
 
 		expect(_node).toBe(document.querySelector('pre'));
 	})
-});
+});

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+	"compilerOptions": {
+		"module": "esnext",
+		"lib": ["esnext", "dom", "dom.iterable"],
+		"target": "esnext",
+		"noEmit": true,
+		"moduleResolution": "bundler",
+		"resolveJsonModule": true,
+		"noEmitOnError": true,
+		"noErrorTruncation": true,
+		"allowSyntheticDefaultImports": true,
+		"verbatimModuleSyntax": true,
+		"types": ["node"],
+    "jsx": "preserve",
+		"jsxImportSource": "ripple",
+		"strict": true,
+		"allowJs": true,
+		"checkJs": true,
+		"paths": {
+			"ripple": ["./types/index.d.ts"],
+		}
+	},
+	"include": [
+		"./*.js",
+		"./src/",
+		"./tests/*/test.ripple",
+	]
+}

package/types/index.d.ts

@@ -17,9 +17,30 @@ export interface Ref<T> {
 
 export declare function ref<T>(value: T): Ref<T>;
 
-export interface RippleArray<T> extends Array<T> {
-  $length: number;
-  toJSON(): T[];
+export declare class RippleArray<T> extends Array<T> {
+	static from<T>(arrayLike: ArrayLike<T>): RippleArray<T>;
+	static from<T, U>(
+		arrayLike: ArrayLike<T>,
+		mapFn: (v: T, k: number) => U,
+		thisArg?: any
+	): RippleArray<U>;
+	static from<T>(iterable: Iterable<T>): RippleArray<T>;
+	static from<T, U>(
+		iterable: Iterable<T>,
+		mapFn: (v: T, k: number) => U,
+		thisArg?: any
+	): RippleArray<U>;
+
+	static of<T>(...items: T[]): RippleArray<T>;
+
+	$length: number;
+
+	toJSON(): T[];
 }
 
-export declare function array<T>(...elements: T[]): RippleArray<T>;
+export type Context<T> = {
+	get(): T;
+	set(value: T): void;
+};
+
+export declare function createContext<T>(initialValue: T): Context<T>;