ripple 0.4.2 → 0.4.4

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

@@ -3,6 +3,7 @@
 import {
 	block,
 	branch,
+	create_block,
 	destroy_block,
 	get_first_node,
 	get_last_node,
@@ -10,10 +11,12 @@ import {
 	remove_block_dom,
 } from './blocks.js';
 import { DETACHED_BLOCK, IF_BLOCK, RENDER_BLOCK, UNINITIALIZED } from './constants.js';
+import { IF_ROOT_CONTROLLED, IF_TRACKED } from '../../../constants.js';
 import { hydrate_next, hydrate_node, hydrating } from './hydration.js';
 import { create_text, resolve_anchor } from './operations.js';
-import { active_block, probe_if, run_untracked } from './runtime.js';
+import { active_block, probe_if, run_in_block, run_untracked } from './runtime.js';
 import { append } from './template.js';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 /**
  * The if block renders its branch directly: the block owns the branch's DOM
@@ -108,7 +111,9 @@ function destroy_branch(state, block) {
  * is materialized as late as possible: when a branch swap needs the position
  * of the branch being replaced (still rendered), or when the if renders
  * nothing and would otherwise have no position at all. Until then a list of
- * `@if` items keeps no anchor nodes in the DOM.
+ * `@if` items keeps no anchor nodes in the DOM. A tail sentinel (the if is
+ * the last thing rendered into its parent) is never materialized: appending
+ * to the parent stays right for the if's whole life.
  * @param {IfState} state
  * @param {Block} block
  */
@@ -147,9 +152,14 @@ function update_branch(state, fn) {
 
 	var block = /** @type {Block} */ (active_block);
 
+	var anchor = /** @type {AppendIntoAnchor} */ (state.a);
+	// A sentinel the if may still materialize (a tail sentinel never is).
+	var sentinel = anchor.into === true && anchor.tail !== true;
+
 	if (previous !== UNINITIALIZED) {
-		if (/** @type {AppendIntoAnchor} */ (state.a).into === true) {
+		if (sentinel) {
 			materialize_anchor(state, block);
+			sentinel = false;
 		}
 		destroy_branch(state, block);
 	}
@@ -161,14 +171,10 @@ function update_branch(state, fn) {
 
 		if (o !== null) {
 			move_block_last(o);
-		} else if (
-			/** @type {AppendIntoAnchor} */ (state.a).into === true &&
-			state.start === null &&
-			first_child_node(block, null) === null
-		) {
+		} else if (sentinel && state.start === null && first_child_node(block, null) === null) {
 			materialize_anchor(state, block);
 		}
-	} else if (/** @type {AppendIntoAnchor} */ (state.a).into === true) {
+	} else if (sentinel) {
 		materialize_anchor(state, block);
 	}
 }
@@ -222,7 +228,7 @@ export function if_block(node, fn, root_controlled, x) {
 	var boundary;
 	var anchor = node;
 
-	if (!hydrating) {
+	if (!(HYDRATION && hydrating)) {
 		// Evaluate the condition before deciding whether the if needs a block:
 		// a condition that read no tracked state has its branch rendered by the
 		// probe itself, directly under the current block, with no if block, no
@@ -258,3 +264,56 @@ export function if_block(node, fn, root_controlled, x) {
 		append(/** @type {ChildNode} */ (node), /** @type {Node} */ (boundary));
 	}
 }
+
+/**
+ * An if whose condition the enclosing render function evaluates (see the
+ * compiler's if lowering): the block only owns the branch, its DOM range and
+ * its blocks, and never runs itself. The render function calls `if_update`
+ * with the branch the condition selected whenever that changes. As
+ * `if_block` does, a condition that read no tracked state has its branch
+ * rendered by the probe, with no block at all: null is returned and the
+ * updates are no-ops. While hydrating, the if keeps a block of its own that
+ * runs the condition, exactly as `if_block` creates: the branch claims its
+ * server nodes in document order, and that block owns the condition's
+ * subscription and a pending read it throws; null is returned then too.
+ * @param {Node | AppendIntoAnchor} node
+ * @param {IfState['fn']} fn
+ * @param {number} [flags] `IF_ROOT_CONTROLLED` (see `if_block`) and
+ *   `IF_TRACKED`, set when the compiler proved the condition reads tracked
+ *   state, so the probe is skipped
+ * @param {any} [x] see `if_block`
+ * @returns {Block | null}
+ */
+export function if_static(node, fn, flags = 0, x) {
+	var root_controlled = (flags & IF_ROOT_CONTROLLED) !== 0;
+
+	if (HYDRATION && hydrating) {
+		if_block(node, fn, root_controlled, x);
+		return null;
+	}
+	if ((flags & IF_TRACKED) === 0) {
+		var rendered;
+		try {
+			rendered = probe_if(fn, x, node);
+		} catch {
+			rendered = false;
+		}
+		if (rendered) {
+			return null;
+		}
+	}
+
+	return create_block(IF_BLOCK, noop, if_block_state(node, fn, x));
+}
+
+/**
+ * Renders `fn` as the branch of an if created by `if_static`, when it is not
+ * the current one. The branch's blocks belong to the if block.
+ * @param {Block | null} block
+ * @param {Branch | undefined} fn
+ */
+export function if_update(block, fn) {
+	if (block !== null) {
+		run_in_block(block, update_branch, fn);
+	}
+}

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

@@ -14,8 +14,7 @@ export {
 	set_text,
 	set_text_content,
 	set_class,
-	set_style,
-	set_attribute,
+	set_class_value,
 	set_value,
 	set_checked,
 	set_selected,
@@ -23,7 +22,6 @@ export {
 
 export {
 	render,
-	render_spread,
 	ref,
 	branch,
 	destroy_block,
@@ -41,7 +39,8 @@ export {
 	SUSPENSE_REJECTED,
 	RENDER_ENTRY as $r,
 } from './constants.js';
-export { event, render_event, delegate } from './events.js';
+export { event, render_event, delegate, listen } from './events.js';
+export { set_style, set_attribute, render_spread, spread } from './attributes.js';
 export { portal } from './portal.js';
 
 export {
@@ -63,7 +62,7 @@ export {
 	update_property,
 	update_pre_property,
 	track,
-	track_async,
+	track_read_only,
 	is_tracked_pending,
 	peek_tracked,
 	push_component,
@@ -74,13 +73,15 @@ export {
 	derived,
 	tick,
 	with_block,
-	with_ns,
+	set_ns,
 	handle_error,
 	queue_post_block_flush_callback,
 	schedule_update,
 } from './runtime.js';
 
-export { composite } from './composite.js';
+export { track_async } from './track-async.js';
+
+export { composite, dynamic, dynamic_init } from './composite.js';
 
 export { render_component } from './component.js';
 
@@ -88,15 +89,22 @@ export { for_block as for, for_block_keyed as for_keyed, item } from './for.js';
 
 export { selector, selector_match } from './selector.js';
 
-export { if_block as if } from './if.js';
+export { if_block as if, if_static, if_update } from './if.js';
 
 export { try_block as try, get_pending_boundary } from './try.js';
 
 export { if_block as switch } from './if.js';
 
-export { template, append, text } from './template.js';
+export { template, template_el, append, text } from './template.js';
+
+export { template_ns, with_ns, render_component_ns } from './template-ns.js';
 
-export { ripple_array } from '../../array.js';
+export {
+	ripple_array,
+	ripple_array_from,
+	ripple_array_of,
+	ripple_array_from_async,
+} from '../../array.js';
 
 export { ripple_object } from '../../object.js';
 

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

@@ -8,6 +8,7 @@ import {
 	set_hydrate_node,
 } from './hydration.js';
 import { get_descriptor } from '@tsrx/core/runtime/language-helpers';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 export { hydrate_first_child, hydrate_next_sibling };
 
@@ -76,7 +77,7 @@ export function get_last_child(node) {
  * @returns {Node | null}
  */
 export function first_child(node, is_text) {
-	if (!hydrating) {
+	if (!(HYDRATION && hydrating)) {
 		return node.firstChild;
 	}
 	return hydrate_first_child(is_text);
@@ -89,10 +90,13 @@ export function first_child(node, is_text) {
  * hydration we descend the cursor into `parent` (mirroring first_child) so the
  * first appended component adopts the server's first child of `parent`.
  * @param {Node} parent
+ * @param {boolean} [tail] the sentinel stands for the tail of `parent`: what
+ *   it anchors is the last thing the framework appends there, so it stays the
+ *   right insertion point for its whole life (see the `if` runtime)
  * @returns {AppendIntoAnchor}
  */
-export function append_into(parent) {
-	if (hydrating) {
+export function append_into(parent, tail) {
+	if (HYDRATION && hydrating) {
 		var child = get_first_child(/** @type {Node} */ (hydrate_node));
 
 		if (child === null) {
@@ -102,7 +106,7 @@ export function append_into(parent) {
 		set_hydrate_node(child);
 	}
 
-	return { parent, into: true };
+	return { parent, into: true, tail: tail === true };
 }
 
 /**
@@ -121,7 +125,7 @@ export function resolve_anchor(node) {
 	if (/** @type {AppendIntoAnchor} */ (node).into !== true) {
 		return /** @type {Node} */ (node);
 	}
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		return /** @type {Node} */ (hydrate_node);
 	}
 	return /** @type {AppendIntoAnchor} */ (node).parent.appendChild(create_text());
@@ -136,7 +140,7 @@ export function resolve_anchor(node) {
 export function first_child_frag(node, is_text) {
 	// During hydration, for fragment templates, hydrate_node is already
 	// pointing to the first element of the fragment. Don't descend into it.
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		return hydrate_node;
 	}
 	var child = /** @type {Text} */ (first_child(node, is_text));
@@ -163,7 +167,7 @@ export function get_next_sibling(node) {
  * @returns {Node | null}
  */
 export function next_sibling(node, is_text) {
-	if (!hydrating) {
+	if (!(HYDRATION && hydrating)) {
 		return node.nextSibling;
 	}
 	return hydrate_next_sibling(is_text);

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

@@ -6,6 +6,7 @@ import { handle_root_events, release_root_events } from './events.js';
 import { active_block } from './runtime.js';
 import { hydrating, hydrate_node, set_hydration, set_hydrating } from './hydration.js';
 import { is_tsrx_element, tsrx_element } from '../../element.js';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 /**
  * @typedef {(anchor: AppendIntoAnchor, block: Block) => void} PortalRender
@@ -67,7 +68,7 @@ function run_portal(s) {
 		end: null,
 		r: s.r,
 		c: next_children,
-		a: { parent: next_target, into: true },
+		a: { parent: next_target, into: true, tail: false },
 		b: /** @type {Block} */ (s.p),
 	});
 
@@ -126,7 +127,7 @@ function create_portal(get_target, render_children, get_children) {
 		p: null,
 	};
 
-	if (!hydrating) {
+	if (!(HYDRATION && hydrating)) {
 		render(run_portal, state);
 		return;
 	}