ripple 0.3.127 → 0.4.0

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

@@ -3,22 +3,35 @@ import type { Context } from './context.js';
 
 export { Tracked, Derived };
 
+/** One `Context.set` in a component: the context, its value, the parent's chain. */
+export type ContextEntry = {
+	k: Context<any>;
+	v: any;
+	n: null | ContextEntry;
+};
+
 export type Component = {
 	b: null | Block;
-	c: null | Map<Context<any>, any>;
-	e: null | Array<{
-		b: Block;
-		fn: Function;
-		r: null | Block | Derived;
-	}>;
+	// The chain of context values set by this component and its ancestors.
+	c: null | ContextEntry;
+	// Effects deferred until the component has rendered, as flat triples:
+	// fn, the block to create it under, the reaction active at the call.
+	e: null | Array<Function | Block | Derived | null>;
 	p: null | Component;
 	m: boolean;
 };
 
 export type Dependency = {
+	// clock of the tracked value when it was read
 	c: number;
 	t: Tracked | Derived;
+	// next dependency of the same reaction
 	n: null | Dependency;
+	// the reaction that read the tracked value
+	r: Block | Derived;
+	// previous / next subscriber of the same tracked value
+	sp: null | Dependency;
+	sn: null | Dependency;
 };
 
 export type DeferredTrackedEntry = {
@@ -26,8 +39,15 @@ export type DeferredTrackedEntry = {
 	r: number; // request version id
 };
 
+/**
+ * Anchor sentinel for one-shot appends at the end of `parent` (all-component
+ * children, portal content). Only valid at first render: a block that keeps
+ * inserting relative to its anchor must go through `resolve_anchor` first.
+ */
 export type AppendIntoAnchor = {
 	parent: Node;
+	/** Marks the sentinel; a missing-property read on a DOM node is cheaper than `in`. */
+	into: true;
 };
 
 export type Block = {
@@ -36,31 +56,59 @@ export type Block = {
 	first: null | Block;
 	f: number;
 	fn: any;
+	// creation id; flushes run scheduled blocks in this order
+	i: number;
 	last: null | Block;
 	next: null | Block;
 	p: null | Block;
 	prev: null | Block;
 	s: any;
 	// teardown function
-	t: (() => {}) | null;
+	/** teardown; runtime-internal teardowns receive the block state */
+	t: ((state?: any) => void) | null;
 };
 
-export type TryBoundaryState = {
-	p: boolean; // whether pending_fn exists
-	b: () => number; // begin request, returns request id
-	r: (request_id: number, show_resolved_branch?: boolean) => boolean; // complete request, returns whether the request was active
-	c: ((error: any) => void) | null; // catch function
-	rd: (request_id: number, reject_fn: (reason: any) => void) => void; // register deferred reject function
-	pb: (block: Block) => void; // register paused block
-	rp: (old_request_id: number) => number; // replace request, returns new request id
+export type TryCatchFunction = (anchor: Node, error: any, reset?: () => void) => void;
+export type TryPendingFunction = (anchor: Node) => void;
+
+/**
+ * The state of a `@try` block or root boundary. Everything the boundary's
+ * pending, catch, request and streaming helpers need lives here, so those
+ * helpers are module functions that compile only when a boundary uses them.
+ */
+export type TryState = {
+	anchor: Node;
+	try_fn: (anchor: Node, block?: Block) => void;
+	catch_fn: TryCatchFunction | null;
+	pending_fn: TryPendingFunction | null;
+	/** the catch branch's `reset` callback, created on first use */
+	reset: (() => void) | null;
+	pending_count: number;
+	request_version: number;
+	active_requests: Set<number>;
+	try_block: Block | null;
+	resolved_branch: Block | null;
+	pending_branch: Block | null;
+	catch_branch: Block | null;
+	offscreen_fragment: DocumentFragment | null;
+	has_resolved: boolean;
+	mode: 'resolved' | 'pending' | 'catch';
+	pending_deferreds: Map<number, (reason: any) => void>;
+	paused_blocks: Set<Block>;
+	/** a streamed slot this boundary hydrated, until its chunk activates it */
+	streamed_id: string | null;
+	streamed_errored: boolean;
+	streamed_fallback: boolean;
+	slot_open: Comment | null;
+	slot_close: Comment | null;
 };
 
 export type BlockWithTryBoundary = Omit<Block, 's'> & {
-	s: TryBoundaryState;
+	s: TryState;
 };
 
 export type BlockWithTryBoundaryAndCatch = Omit<BlockWithTryBoundary, 's'> & {
-	s: TryBoundaryState & { c: NonNullable<TryBoundaryState['c']> };
+	s: TryState & { catch_fn: TryCatchFunction };
 };
 
 export type RootBoundaryOptions = {
@@ -110,8 +158,4 @@ declare global {
 	interface HTMLSelectElement {
 		__value?: unknown;
 	}
-
-	interface Text {
-		__t?: string | null;
-	}
 }

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

@@ -5,9 +5,7 @@
  * @returns {Text}
  */
 export function create_anchor() {
-	var t = document.createTextNode('');
-	t.__t = '';
-	return t;
+	return document.createTextNode('');
 }
 
 /**

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

@@ -1,5 +1,4 @@
 import { is_void_element } from '@tsrx/core/runtime/html';
-import { exclude_prop_from_object } from '@tsrx/core/runtime/language-helpers';
 import {
 	escape,
 	get,
@@ -10,7 +9,6 @@ import {
 	spread_attrs,
 	spread_inner_html,
 } from './index.js';
-import { tsrx_element } from '../../element.js';
 
 /**
  * @param {any} value
@@ -37,7 +35,7 @@ function render_child(value) {
  */
 function render_element(tag, props) {
 	output_push(`<${tag}`);
-	output_push(spread_attrs(props, undefined, 'is'));
+	output_push(spread_attrs(props));
 
 	if (is_void_element(tag)) {
 		output_push(' />');
@@ -57,24 +55,25 @@ function render_element(tag, props) {
 }
 
 /**
- * @param {{ is?: Function | string | null | undefined | false, [key: string]: any }} props
- * @returns {import('../../element.js').TSRXElement}
+ * Renders a dynamic tag (`<{tag} />`): a component function, a tag name, or
+ * nothing when the tag is `null`, `undefined`, or `false`. The compiler passes
+ * the tag and the element's own props separately, so the props never carry
+ * the tag.
+ * @param {any} tag
+ * @param {Record<string, any>} props
+ * @returns {void}
  */
-export function dynamic_element(props) {
-	return tsrx_element(() => {
-		const component = get(props?.is);
-		if (component == null || component === false) {
-			return;
-		}
-
-		const dynamic_props = props || {};
+export function dynamic_element(tag, props) {
+	const component = get(tag);
+	if (component == null || component === false) {
+		return;
+	}
 
-		if (typeof component === 'function') {
-			render_component(component, exclude_prop_from_object(dynamic_props, 'is'));
-		} else if (is_tsrx_element(component)) {
-			throw new TypeError('Invalid component type: received a TSRXElement value.');
-		} else {
-			render_element(String(component), dynamic_props);
-		}
-	});
+	if (typeof component === 'function') {
+		render_component(component, props);
+	} else if (is_tsrx_element(component)) {
+		throw new TypeError('Invalid component type: received a TSRXElement value.');
+	} else {
+		render_element(String(component), props);
+	}
 }