ripple 0.2.184 → 0.2.185

package/src/runtime/index-server.js

@@ -2,10 +2,12 @@
 
 import { DERIVED, TRACKED, UNINITIALIZED } from './internal/client/constants.js';
 import { is_tracked_object } from './internal/client/utils.js';
-import { active_component } from './internal/server/index.js';
+import { active_component, get, set, untrack } from './internal/server/index.js';
 
 export { Context } from './internal/server/context.js';
 
+export { get, set, untrack };
+
 export function effect() {
 	// NO-OP
 }
@@ -13,31 +15,6 @@ export function effect() {
 var empty_get_set = { get: undefined, set: undefined };
 
 /**
- * @param {Derived | Tracked} tracked
- * @returns {any}
- */
-export function get(tracked) {
-	if (!is_tracked_object(tracked)) {
-		return tracked;
-	}
-
-	var g = tracked.a.get;
-
-	return g ? g(tracked.v) : tracked.v;
-}
-
-/**
- * @param {Tracked} tracked
- * @param {any} value
- */
-export function set(tracked, value) {
-	var s = tracked.a.set;
-
-	tracked.v = s ? s(value, tracked.v) : value;
-}
-
-/**
- *
  * @param {any} v
  * @param {Function} [get]
  * @param {Function} [set]
@@ -53,7 +30,9 @@ export function track(v, get, set) {
 	if (typeof v === 'function') {
 		return {
 			a: get || set ? { get, set } : empty_get_set,
+			c: 0,
 			co: active_component,
+			d: null,
 			f: TRACKED | DERIVED,
 			fn: v,
 			v: UNINITIALIZED,
@@ -62,6 +41,8 @@ export function track(v, get, set) {
 
 	return {
 		a: get || set ? { get, set } : empty_get_set,
+		c: 0,
+		d: null,
 		f: TRACKED,
 		v,
 	};
@@ -91,5 +72,7 @@ export function MediaQuery(query, matches = false) {
  * @param {any} _
  */
 export function createSubscriber(_) {
-	return () => { /* NO-OP */ };
+	return () => {
+		/* NO-OP */
+	};
 }

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

@@ -48,7 +48,7 @@ export function first_child(node) {
 export function child_frag(node) {
 	var child = /** @type {Text} */ (first_child(node));
 
-	if (child.nodeType === 8 && child.data === '') {
+	if (child.nodeType === Node.COMMENT_NODE && child.data === '') {
 		return next_sibling(child);
 	}
 	return child;

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

@@ -429,7 +429,7 @@ export function track_split(v, l, b) {
 }
 
 /**
- * @param {Tracked} tracked
+ * @param {Tracked | Derived} tracked
  * @returns {Dependency}
  */
 function create_dependency(tracked) {
@@ -512,10 +512,10 @@ export function async_computed(fn, block) {
 
 			var restore = capture();
 			/** @type {(() => void) | undefined} */
-			var unuspend;
+			var unsuspend;
 
 			if (deferred === null) {
-				unuspend = suspend();
+				unsuspend = suspend();
 			} else {
 				for (var i = 0; i < deferred.length; i++) {
 					var tracked = deferred[i];
@@ -538,7 +538,7 @@ export function async_computed(fn, block) {
 				}
 
 				if (deferred === null) {
-					unuspend?.();
+					unsuspend?.();
 				} else if (promise === current) {
 					for (var i = 0; i < deferred.length; i++) {
 						var tracked = deferred[i];
@@ -586,16 +586,16 @@ function capture_deferred(fn) {
 	var value = fn();
 	/** @type {Tracked[] | null} */
 	var deferred = null;
-	var depedency = active_dependency;
+	var dependency = active_dependency;
 
-	while (depedency !== null) {
-		var tracked = depedency.t;
+	while (dependency !== null) {
+		var tracked = dependency.t;
 		if ((tracked.f & DEFERRED) !== 0) {
 			deferred ??= [];
 			deferred.push(tracked);
 			break;
 		}
-		depedency = depedency.n;
+		dependency = dependency.n;
 	}
 
 	return [value, deferred];

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

@@ -19,7 +19,7 @@ export type Dependency = {
 
 export type Tracked<V = any> = {
 	DO_NOT_ACCESS_THIS_OBJECT_DIRECTLY?: true;
-	a: { get?: Function, set?: Function };
+	a: { get?: Function; set?: Function };
 	b: Block;
 	c: number;
 	f: number;
@@ -28,12 +28,12 @@ export type Tracked<V = any> = {
 
 export type Derived = {
 	DO_NOT_ACCESS_THIS_OBJECT_DIRECTLY?: true;
-	a: { get?: Function, set?: Function };
+	a: { get?: Function; set?: Function };
 	b: Block;
 	blocks: null | Block[];
 	c: number;
 	co: null | Component;
-	d: null;
+	d: null | Dependency;
 	f: number;
 	fn: Function;
 	__v: any;
@@ -58,8 +58,8 @@ export type CompatApi = {
 	createRoot: () => void;
 	createComponent: (node: any, children_fn: () => any) => void;
 	jsx: (type: any, props: any) => any;
-}
+};
 
 export type CompatOptions = {
 	[key: string]: CompatApi;
-}
+};

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

@@ -1,18 +1,160 @@
+/**
+@import { Component, Dependency, Derived, Tracked } from '#server';
+@import { render, renderToStream, SSRComponent } from 'ripple/server';
+*/
+
 import { Readable } from 'stream';
-/** @import { Component, Derived } from '#server' */
-/** @import { render, renderToStream, SSRComponent } from 'ripple/server'*/
 import { DERIVED, UNINITIALIZED } from '../client/constants.js';
 import { is_tracked_object } from '../client/utils.js';
 import { escape } from '../../../utils/escaping.js';
 import { is_boolean_attribute } from '../../../compiler/utils.js';
 import { clsx } from 'clsx';
+import { normalize_css_property_name } from '../../../utils/normalize_css_property_name.js';
 
 export { escape };
 export { register_component_css as register_css } from './css-registry.js';
 
-/** @type {Component | null} */
+/** @type {null | Component} */
 export let active_component = null;
 
+/** @type {number} */
+let clock = 0;
+
+/** @type {null | Dependency} */
+let active_dependency = null;
+
+export let tracking = false;
+
+/**
+ * @returns {number}
+ */
+function increment_clock() {
+	return ++clock;
+}
+
+/**
+ * @param {Tracked | Derived} tracked
+ * @returns {Dependency}
+ */
+function create_dependency(tracked) {
+	return {
+		c: tracked.c,
+		t: tracked,
+		n: null,
+	};
+}
+
+/**
+ * @param {Tracked | Derived} tracked
+ */
+function register_dependency(tracked) {
+	var dependency = active_dependency;
+
+	if (dependency === null) {
+		dependency = create_dependency(tracked);
+		active_dependency = dependency;
+	} else {
+		var current = dependency;
+
+		while (current !== null) {
+			if (current.t === tracked) {
+				current.c = tracked.c;
+				return;
+			}
+			var next = current.n;
+			if (next === null) {
+				break;
+			}
+			current = next;
+		}
+
+		dependency = create_dependency(tracked);
+		current.n = dependency;
+	}
+}
+
+/**
+ * @param {Dependency | null} tracking
+ */
+function is_tracking_dirty(tracking) {
+	if (tracking === null) {
+		return false;
+	}
+	while (tracking !== null) {
+		var tracked = tracking.t;
+
+		if ((tracked.f & DERIVED) !== 0) {
+			update_derived(/** @type {Derived} **/ (tracked));
+		}
+
+		if (tracked.c > tracking.c) {
+			return true;
+		}
+		tracking = tracking.n;
+	}
+
+	return false;
+}
+
+/**
+ * @template T
+ * @param {() => T} fn
+ * @returns {T}
+ */
+export function untrack(fn) {
+	var previous_tracking = tracking;
+	var previous_dependency = active_dependency;
+	tracking = false;
+	active_dependency = null;
+	try {
+		return fn();
+	} finally {
+		tracking = previous_tracking;
+		active_dependency = previous_dependency;
+	}
+}
+
+/**
+ * @param {Derived} computed
+ */
+function update_derived(computed) {
+	var value = computed.v;
+
+	if (value === UNINITIALIZED || is_tracking_dirty(computed.d)) {
+		value = run_derived(computed);
+
+		if (value !== computed.v) {
+			computed.v = value;
+			computed.c = increment_clock();
+		}
+	}
+}
+
+/**
+ * @param {Derived} computed
+ */
+function run_derived(computed) {
+	var previous_tracking = tracking;
+	var previous_dependency = active_dependency;
+	var previous_component = active_component;
+
+	try {
+		active_component = computed.co;
+		tracking = true;
+		active_dependency = null;
+
+		var value = computed.fn();
+
+		computed.d = active_dependency;
+
+		return value;
+	} finally {
+		tracking = previous_tracking;
+		active_dependency = previous_dependency;
+		active_component = previous_component;
+	}
+}
+
 /**
  * `<div translate={false}>` should be rendered as `<div translate="no">` and _not_
  * `<div translate="false">`, which is equivalent to `<div translate="yes">`. There
@@ -141,7 +283,7 @@ export function push_component() {
  */
 export function pop_component() {
 	var component = /** @type {Component} */ (active_component);
-	active_component = component;
+	active_component = component.p;
 }
 
 /**
@@ -161,30 +303,119 @@ export function aborted() {
 }
 
 /**
- * @param {Derived} tracked
+ * @param {any} tracked
  * @returns {any}
  */
-function get_derived(tracked) {
-	let v = tracked.v;
+export function get(tracked) {
+	if (!is_tracked_object(tracked)) {
+		return tracked;
+	}
+
+	if ((tracked.f & DERIVED) !== 0) {
+		update_derived(/** @type {Derived} **/ (tracked));
+		if (tracking) {
+			register_dependency(tracked);
+		}
+	} else if (tracking) {
+		register_dependency(tracked);
+	}
+
+	var g = tracked.a.get;
+	return g ? g(tracked.v) : tracked.v;
+}
+
+/**
+ * @param {Derived | Tracked} tracked
+ * @param {any} value
+ */
+export function set(tracked, value) {
+	var old_value = tracked.v;
 
-	if (v === UNINITIALIZED) {
-		v = tracked.fn();
-		tracked.v = v;
+	if (value !== old_value) {
+		var s = tracked.a.set;
+		tracked.v = s ? s(value, tracked.v) : value;
+		tracked.c = increment_clock();
 	}
-	return v;
 }
 
 /**
- * @param {any} tracked
+ * @param {Tracked} tracked
+ * @param {number} [d]
+ * @returns {number}
+ */
+export function update(tracked, d = 1) {
+	var value = get(tracked);
+	var result = d === 1 ? value++ : value--;
+	set(tracked, value);
+	return result;
+}
+
+/**
+ * @param {Tracked} tracked
+ * @param {number} [d]
+ * @returns {number}
+ */
+export function update_pre(tracked, d = 1) {
+	var value = get(tracked);
+	var new_value = d === 1 ? ++value : --value;
+	set(tracked, new_value);
+	return new_value;
+}
+
+/**
+ * @param {any} obj
+ * @param {string | number | symbol} property
+ * @param {any} value
+ * @returns {void}
+ */
+export function set_property(obj, property, value) {
+	var tracked = obj[property];
+	set(tracked, value);
+}
+
+/**
+ * @param {any} obj
+ * @param {string | number | symbol} property
+ * @param {boolean} [chain=false]
  * @returns {any}
  */
-export function get(tracked) {
-	// reflect back the value if it's not boxed
-	if (!is_tracked_object(tracked)) {
+export function get_property(obj, property, chain = false) {
+	if (chain && obj == null) {
+		return undefined;
+	}
+	var tracked = obj[property];
+	if (tracked == null) {
 		return tracked;
 	}
+	return get(tracked);
+}
 
-	return (tracked.f & DERIVED) !== 0 ? get_derived(/** @type {Derived} */ (tracked)) : tracked.v;
+/**
+ * @param {any} obj
+ * @param {string | number | symbol} property
+ * @param {number} [d=1]
+ * @returns {number}
+ */
+export function update_property(obj, property, d = 1) {
+	var tracked = obj[property];
+	var value = get(tracked);
+	var new_value = d === 1 ? value++ : value--;
+	set(tracked, value);
+	return new_value;
+}
+
+/**
+ * @param {any} obj
+ * @param {string | number | symbol} property
+ * @param {number} [d=1]
+ * @returns {number}
+ */
+export function update_pre_property(obj, property, d = 1) {
+	var tracked = obj[property];
+	var value = get(tracked);
+	var new_value = d === 1 ? ++value : --value;
+	set(tracked, new_value);
+	return new_value;
 }
 
 /**
@@ -200,11 +431,31 @@ export function attr(name, value, is_boolean = false) {
 	}
 	if (value == null || (!value && is_boolean)) return '';
 	const normalized = (name in replacements && replacements[name].get(value)) || value;
-	const value_to_escape = name === 'class' ? clsx(normalized) : normalized;
+	let value_to_escape = name === 'class' ? clsx(normalized) : normalized;
+	value_to_escape =
+		name === 'style'
+			? typeof value !== 'string'
+				? get_styles(value)
+				: String(normalized).trim()
+			: value_to_escape;
 	const assignment = is_boolean ? '' : `="${escape(value_to_escape, true)}"`;
 	return ` ${name}${assignment}`;
 }
 
+/**
+ * @param {Record<string, string | number>} styles
+ * @returns {string}
+ */
+function get_styles(styles) {
+	var result = '';
+	for (const key in styles) {
+		const css_prop = normalize_css_property_name(key);
+		const value = String(styles[key]).trim();
+		result += `${css_prop}: ${value}; `;
+	}
+	return result.trim();
+}
+
 /**
  * @param {Record<string, any>} attrs
  * @param {string | undefined} css_hash

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

@@ -1,21 +1,29 @@
 import type { Context } from './context.js';
 
 export type Component = {
-  c: null | Map<Context<any>, any>;
-  p: null | Component;
+	c: null | Map<Context<any>, any>;
+	p: null | Component;
 };
 
+export type Dependency = {
+	c: number;
+	t: Tracked | Derived;
+	n: null | Dependency;
+};
 
 export type Derived = {
-  a: { get?: Function, set?: Function };
-  co: null | Component;
-  f: number;
-  fn: Function;
-  v: any;
+	a: { get?: Function; set?: Function };
+	c: number;
+	co: null | Component;
+	d: null | Dependency;
+	f: number;
+	fn: Function;
+	v: any;
 };
 
 export type Tracked = {
-  a: { get?: Function, set?: Function };
-  f: number;
-  v: any;
-};
+	a: { get?: Function; set?: Function };
+	c: number;
+	f: number;
+	v: any;
+};