ripple 0.1.1 → 0.2.0

package/src/runtime/array.js

@@ -0,0 +1,215 @@
+import { TRACKED_OBJECT } from './internal/client/constants.js';
+import { get, increment, scope, set, tracked } from './internal/client/runtime.js';
+
+var symbol_iterator = Symbol.iterator;
+
+const introspect_methods = [
+	'entries',
+	'every',
+	'find',
+	'findIndex',
+	'findLast',
+	'findLastIndex',
+	'flat',
+	'flatMap',
+	'forEach',
+	'includes',
+	'indexOf',
+	'join',
+	'keys',
+	'lastIndexOf',
+	'map',
+	'reduce',
+	'reduceRight',
+	'some',
+	'slice',
+	'toLocaleString',
+	'toReversed',
+	'toSorted',
+	'toSpliced',
+	'toString',
+	symbol_iterator,
+	'values',
+	'with'
+];
+
+let init = false;
+
+class RippleArray extends Array {
+	#tracked_elements = [];
+	#tracked_index;
+
+	constructor(...elements) {
+		super(...elements);
+
+		var block = scope();
+		var tracked_elements = this.#tracked_elements;
+
+		for (var i = 0; i < this.length; i++) {
+			tracked_elements[i] = tracked(0, block);
+		}
+		this.#tracked_index = tracked(this.length, block);
+
+		if (!init) {
+			init = true;
+			this.#init();
+		}
+	}
+
+	#init() {
+		var proto = RippleArray.prototype;
+		var array_proto = Array.prototype;
+
+		for (const method of introspect_methods) {
+			proto[method] = function (...v) {
+				this.$length;
+				get_all_elements(this);
+				return array_proto[method].apply(this, v);
+			};
+		}
+	}
+
+	fill() {
+		var block = scope();
+		var tracked_elements = this.#tracked_elements;
+
+		super.fill();
+		for (var i = 0; i < this.length; i++) {
+			increment(tracked_elements[i], block);
+		}
+	}
+
+	reverse() {
+		var block = scope();
+		var tracked_elements = this.#tracked_elements;
+
+		super.reverse();
+		for (var i = 0; i < this.length; i++) {
+			increment(tracked_elements[i], block);
+		}
+	}
+
+	sort(fn) {
+		var block = scope();
+		var tracked_elements = this.#tracked_elements;
+
+		super.sort(fn);
+		for (var i = 0; i < this.length; i++) {
+			increment(tracked_elements[i], block);
+		}
+	}
+
+	unshift(...elements) {
+		var block = scope();
+		var tracked_elements = this.#tracked_elements;
+
+		super.unshift(...elements);
+		for (var i = 0; i < tracked_elements.length; i++) {
+			increment(tracked_elements[i], block);
+		}
+		tracked_elements.unshift(...elements.map(() => tracked(0, block)));
+
+		set(this.#tracked_index, this.length, block);
+	}
+
+	shift() {
+		var block = scope();
+		var tracked_elements = this.#tracked_elements;
+
+		super.shift();
+		for (var i = 0; i < tracked_elements.length; i++) {
+			increment(tracked_elements[i], block);
+		}
+		tracked_elements.shift();
+
+		set(this.#tracked_index, this.length, block);
+	}
+
+	push(...elements) {
+		var block = scope();
+		var start_index = this.length;
+		var tracked_elements = this.#tracked_elements;
+
+		super.push(...elements);
+
+		for (var i = 0; i < elements.length; i++) {
+			tracked_elements[start_index + i] = tracked(0, block);
+		}
+		set(this.#tracked_index, this.length, block);
+	}
+
+	pop() {
+		var block = scope();
+		var tracked_elements = this.#tracked_elements;
+
+		super.pop();
+		if (tracked_elements.length > 0) {
+			increment(tracked_elements[tracked_elements.length - 1], block);
+		}
+		tracked_elements.pop();
+
+		set(this.#tracked_index, this.length, block);
+	}
+
+	splice(start, delete_count, ...elements) {
+		var block = scope();
+		var tracked_elements = this.#tracked_elements;
+
+		super.splice(start, delete_count, ...elements);
+		for (var i = 0; i < tracked_elements.length; i++) {
+			increment(tracked_elements[i], block);
+		}
+		tracked_elements.splice(start, delete_count, ...elements.map(() => tracked(0, block)));
+
+		set(this.#tracked_index, this.length, block);
+	}
+
+	get [TRACKED_OBJECT]() {
+		return this.#tracked_elements;
+	}
+
+	get $length() {
+		return get(this.#tracked_index);
+	}
+
+    set $length(length) {
+        var block = scope();
+        var tracked_elements = this.#tracked_elements;
+
+        if (length !== this.$length) {
+            for (var i = 0; i < tracked_elements.length; i++) {
+                increment(tracked_elements[i], block);
+            }
+            this.length = length;
+            tracked_elements.length = length;
+
+            return true;
+        }
+		return false;
+	}
+
+    set length(_) {
+        throw new Error('Cannot set length on RippleArray, use $length instead');
+    }
+
+	toJSON() {
+		this.$length;
+		return get_all_elements(this);
+	}
+}
+
+export function get_all_elements(array) {
+	var tracked_elements = array[TRACKED_OBJECT];
+	var arr = [];
+
+	for (var i = 0; i < tracked_elements.length; i++) {
+		get(tracked_elements[i]);
+		arr.push(array[i]);
+	}
+
+	return arr;
+}
+
+export function array(...elements) {
+	return new RippleArray(...elements);
+}

package/src/runtime/index.js

@@ -0,0 +1,39 @@
+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';
+import { active_block } from './internal/client/runtime.js';
+import { create_anchor } from './internal/client/utils.js';
+
+// Re-export JSX runtime functions for jsxImportSource: "ripple"
+export { jsx, jsxs, Fragment } from '../jsx-runtime.js';
+
+export function mount(component, options) {
+	init_operations();
+
+	const props = options.props || {};
+	const target = options.target;
+	const anchor = create_anchor();
+	target.append(anchor);
+
+	const cleanup_events = handle_root_events(target);
+
+	const _root = root(() => {
+		component(anchor, props, active_block);
+	});
+
+	return () => {
+		cleanup_events();
+		destroy_block(_root);
+		target.removeChild(anchor_node);
+	};
+}
+
+export { flush_sync as flushSync, untrack, deferred } from './internal/client/runtime.js';
+
+export { array } from './array.js';
+
+export { keyed } from './internal/client/for.js';
+
+export { user_effect as effect } from './internal/client/blocks.js';
+
+export { Portal } from './internal/client/portal.js';

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

@@ -0,0 +1,247 @@
+import {
+	BLOCK_HAS_RUN,
+	BRANCH_BLOCK,
+	COMPUTED,
+	CONTAINS_TEARDOWN,
+	DESTROYED,
+	EFFECT_BLOCK,
+	PAUSED,
+	RENDER_BLOCK,
+	ROOT_BLOCK,
+	TRY_BLOCK
+} from './constants';
+import { next_sibling } from './operations';
+import {
+	active_block,
+	active_component,
+	active_reaction,
+	run_block,
+	run_teardown,
+	schedule_update
+} from './runtime';
+import { suspend } from './try';
+
+export function user_effect(fn) {
+	if (active_block === null) {
+		throw new Error('effect() must be called within an active context, such as a component or effect');
+	}
+
+	var component = active_component;
+	if (component !== null && !component.m) {
+		var e = (component.e ??= []);
+		e.push({
+			b: active_block,
+			fn,
+			r: active_reaction
+		});
+
+		return;
+	}
+
+	return block(EFFECT_BLOCK, fn);
+}
+
+export function effect(fn) {
+	return block(EFFECT_BLOCK, fn);
+}
+
+export function render(fn, flags = 0) {
+	return block(RENDER_BLOCK | flags, fn);
+}
+
+export function branch(fn, flags = 0) {
+	return block(BRANCH_BLOCK | flags, fn);
+}
+
+export function async(fn) {
+	return block(BRANCH_BLOCK, async () => {
+		const unsuspend = suspend();
+		await fn();
+		unsuspend();
+	});
+}
+
+export function root(fn) {
+	return block(ROOT_BLOCK, fn);
+}
+
+export function create_try_block(fn, state) {
+	return block(TRY_BLOCK, fn, state);
+}
+
+function push_block(block, parent_block) {
+	var parent_last = parent_block.last;
+	if (parent_last === null) {
+		parent_block.last = parent_block.first = block;
+	} else {
+		parent_last.next = block;
+		block.prev = parent_last;
+		parent_block.last = block;
+	}
+}
+
+export function block(flags, fn, state = null) {
+	var block = {
+		c: active_component,
+		d: null,
+		first: null,
+		f: flags,
+		fn,
+		last: null,
+		next: null,
+		p: active_block,
+		prev: null,
+		s: state,
+		t: null
+	};
+
+	if (active_reaction !== null && (active_reaction.f & COMPUTED) !== 0) {
+		(active_reaction.blocks ??= []).push(block);
+	}
+
+	if (active_block !== null) {
+		push_block(block, active_block);
+	}
+
+	if ((flags & EFFECT_BLOCK) !== 0) {
+		schedule_update(block);
+	} else {
+		run_block(block);
+		block.f ^= BLOCK_HAS_RUN;
+	}
+
+	return block;
+}
+
+export function destroy_block_children(parent, remove_dom = false) {
+	var block = parent.first;
+	parent.first = parent.last = null;
+
+	if ((parent.f & CONTAINS_TEARDOWN) !== 0) {
+		while (block !== null) {
+			var next = block.next;
+			destroy_block(block, remove_dom);
+			block = next;
+		}
+	}
+}
+
+export function destroy_non_branch_children(parent, remove_dom = false) {
+	var block = parent.first;
+
+	if (
+		(parent.f & CONTAINS_TEARDOWN) === 0 &&
+		parent.first !== null &&
+		(parent.first.f & BRANCH_BLOCK) === 0
+	) {
+		parent.first = parent.last = null;
+	} else {
+		while (block !== null) {
+			var next = block.next;
+			if ((block.f & BRANCH_BLOCK) === 0) {
+				destroy_block(block, remove_dom);
+			}
+			block = next;
+		}
+	}
+}
+
+export function unlink_block(block) {
+	var parent = block.p;
+	var prev = block.prev;
+	var next = block.next;
+
+	if (prev !== null) prev.next = next;
+	if (next !== null) next.prev = prev;
+
+	if (parent !== null) {
+		if (parent.first === block) parent.first = next;
+		if (parent.last === block) parent.last = prev;
+	}
+}
+
+export function pause_block(block) {
+	if ((block.f & PAUSED) !== 0) {
+		return;
+	}
+	block.f ^= PAUSED;
+
+	var child = block.first;
+
+	while (child !== null) {
+		var next = child.next;
+		pause_block(child);
+		child = next;
+	}
+
+	run_teardown(block);
+}
+
+export function resume_block(block) {
+	if ((block.f & PAUSED) === 0) {
+		return;
+	}
+	block.f ^= PAUSED;
+
+	if (is_block_dirty(block)) {
+		schedule_update(block);
+	}
+
+	var child = block.first;
+
+	while (child !== null) {
+		var next = child.next;
+		resume_block(child);
+		child = next;
+	}
+}
+
+export function is_destroyed(target_block) {
+	var block = target_block;
+
+	while (block !== null) {
+		var flags = block.f;
+
+		if ((flags & DESTROYED) !== 0) {
+			return true;
+		}
+		if ((flags & ROOT_BLOCK) !== 0) {
+			return false;
+		}
+		block = block.p;
+	}
+	return true;
+}
+
+export function destroy_block(block, remove_dom = true) {
+	block.f ^= DESTROYED;
+
+	var removed = false;
+
+	if (remove_dom && (block.f & (BRANCH_BLOCK | ROOT_BLOCK)) !== 0) {
+		var node = block.s.start;
+		var end = block.s.end;
+
+		while (node !== null) {
+			var next = node === end ? null : next_sibling(node);
+
+			node.remove();
+			node = next;
+		}
+
+		removed = true;
+	}
+
+	destroy_block_children(block, remove_dom && !removed);
+
+	run_teardown(block);
+
+	var parent = block.p;
+
+	// If the parent doesn't have any children, then skip this work altogether
+	if (parent !== null && parent.first !== null) {
+		unlink_block(block);
+	}
+
+	block.fn = block.s = block.d = block.p = null;
+}

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

@@ -0,0 +1,23 @@
+export var ROOT_BLOCK = 1 << 1;
+export var RENDER_BLOCK = 1 << 2;
+export var EFFECT_BLOCK = 1 << 3;
+export var BRANCH_BLOCK = 1 << 4;
+export var FOR_BLOCK = 1 << 5;
+export var TRY_BLOCK = 1 << 6;
+export var IF_BLOCK = 1 << 7;
+export var ASYNC_BLOCK = 1 << 8;
+export var COMPAT_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 COMPUTED = 1 << 14;
+export var DEFERRED = 1 << 15;
+export var PAUSED = 1 << 16;
+export var DESTROYED = 1 << 17;
+
+export var LOGIC_BLOCK = FOR_BLOCK | IF_BLOCK | TRY_BLOCK;
+
+export var UNINITIALIZED = Symbol();
+export var TRACKED_OBJECT = Symbol();
+export var COMPUTED_PROPERTY = Symbol();