ripple 0.4.2 → 0.4.4

package/src/runtime/internal/client/template-ns.js

@@ -0,0 +1,88 @@
+/** @import { NAMESPACE_URI } from './constants.js' */
+import { get_first_child } from './operations.js';
+import { render_component, set_ns, with_ns as run_with_ns } from './runtime.js';
+import { set_ns_parser, template } from './template.js';
+
+/**
+ * Create fragment with proper namespace using Svelte's wrapping approach
+ * @param {string} content
+ * @param {'svg' | 'math'} ns
+ * @returns {DocumentFragment}
+ */
+function from_namespace(content, ns) {
+	var wrapped = `<${ns}>${content}</${ns}>`;
+
+	var elem = document.createElement('template');
+	elem.innerHTML = wrapped;
+	var fragment = elem.content;
+
+	var root = /** @type {Element} */ (get_first_child(fragment));
+	var result = document.createDocumentFragment();
+
+	var first;
+	while ((first = get_first_child(root))) {
+		result.appendChild(/** @type {Node} */ (first));
+	}
+
+	return result;
+}
+
+/**
+ * Runs `fn` with `namespace` active: content rendered inside it (children
+ * passed into an `<svg>`, a component rendered there, a dynamic element's
+ * children) creates its DOM in that namespace, and every block created
+ * inside records it (see `create_block`) so its reruns do too. Templates
+ * cloned in the namespace parse through `from_namespace`, so it is installed
+ * here: the compiler only emits this call for the SVG and MathML namespaces.
+ * @template T
+ * @param {keyof typeof NAMESPACE_URI} namespace
+ * @param {() => T} fn
+ * @returns {T}
+ */
+export function with_ns(namespace, fn) {
+	set_ns_parser(from_namespace);
+	return run_with_ns(namespace, fn);
+}
+
+/**
+ * `template()` for content compiled in the SVG or MathML namespace.
+ * @param {string} content
+ * @param {number} [flags]
+ * @param {number} [count]
+ * @returns {() => Node}
+ */
+export function template_ns(content, flags, count) {
+	set_ns_parser(from_namespace);
+	return template(content, flags, count);
+}
+
+/**
+ * Enters `namespace` for the rest of a setup function, as `with_ns` does for
+ * a thunk: the compiler emits this where the content that follows is a
+ * dynamic element or a component called inside an `<svg>` or `<math>`
+ * template. Returns the namespace to restore with `set_ns`.
+ * @param {keyof typeof NAMESPACE_URI} namespace
+ * @returns {keyof typeof NAMESPACE_URI}
+ */
+export function push_ns(namespace) {
+	set_ns_parser(from_namespace);
+	return set_ns(namespace);
+}
+
+/**
+ * `render_component` for a component called inside an `<svg>` or `<math>`
+ * template: its content renders in that namespace.
+ * @param {keyof typeof NAMESPACE_URI} namespace
+ * @param {Function} fn
+ * @param {Node | import('#client').AppendIntoAnchor} anchor
+ * @param {Record<string, any>} props
+ * @returns {void}
+ */
+export function render_component_ns(namespace, fn, anchor, props) {
+	var previous = push_ns(namespace);
+	try {
+		render_component(fn, anchor, props);
+	} finally {
+		set_ns(previous);
+	}
+}

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

@@ -6,9 +6,11 @@ import {
 	TEMPLATE_SVG_NAMESPACE,
 	TEMPLATE_MATHML_NAMESPACE,
 } from '../../../constants.js';
-import { hydrate_append, hydrate_node, hydrating } from './hydration.js';
-import { create_text, get_first_child, get_next_sibling, is_firefox } from './operations.js';
+import { H, hydrate_node, hydrating } from './hydration.js';
+import { create_text, get_first_child, is_firefox } from './operations.js';
 import { active_block, active_namespace } from './runtime.js';
+import { DEFAULT_NAMESPACE, NAMESPACE_URI } from './constants.js';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 /**
  * Assigns start and end nodes to the active block's state.
@@ -30,92 +32,46 @@ export function assign_nodes(start, end) {
 }
 
 /**
- * Creates a DocumentFragment from an HTML string.
- * @param {string} html - The HTML string.
- * @param {boolean} use_svg_namespace - Whether to use SVG namespace.
- * @param {boolean} use_mathml_namespace - Whether to use MathML namespace.
- * @returns {DocumentFragment}
+ * Parses content that belongs in the SVG or MathML namespace. Installed by
+ * `template-ns.js` when a template or a dynamic element needs it, so an app
+ * with HTML templates only ships neither.
+ * @type {((html: string, ns: 'svg' | 'math') => DocumentFragment) | null}
  */
-export function create_fragment_from_html(
-	html,
-	use_svg_namespace = false,
-	use_mathml_namespace = false,
-) {
-	if (use_svg_namespace) {
-		return from_namespace(html, 'svg');
-	}
-	if (use_mathml_namespace) {
-		return from_namespace(html, 'math');
-	}
-	var elem = document.createElement('template');
-	elem.innerHTML = html;
-	return elem.content;
-}
+var parse_ns = null;
 
 /**
- * The hydration path of a {@link template} instance: adopts the server node(s)
- * at the cursor instead of cloning. Kept out of the clone path so a client-only
- * mount never compiles it.
- * @param {boolean} is_fragment
- * @param {number} count
- * @returns {Node}
+ * @param {(html: string, ns: 'svg' | 'math') => DocumentFragment} fn
  */
-function hydrate_template(is_fragment, count) {
-	var node = /** @type {Node} */ (hydrate_node);
-	var end = is_fragment ? hydrate_fragment_end(node, count) : node;
-	// assign_nodes, inline: the per-node hydration path stays free of helpers.
-	var block = /** @type {Block} */ (active_block);
-	var s = block.s;
-	if (s === null) {
-		block.s = { start: node, end };
-	} else if (s.start === null) {
-		s.start = node;
-		s.end = end;
-	}
-	return node;
+export function set_ns_parser(fn) {
+	parse_ns = fn;
 }
 
 /**
- * The last top-level node of a hydrated fragment template. Walks using the
- * compiler-provided hop count so hydration never parses template HTML.
- * @param {Node} start
- * @param {number} count
- * @returns {Node}
+ * Creates a DocumentFragment from an HTML string.
+ * @param {string} html - The HTML string.
+ * @param {string} ns - `'svg'`, `'math'`, or `''` for HTML.
+ * @returns {DocumentFragment}
  */
-function hydrate_fragment_end(start, count) {
-	var end = start;
-
-	for (var i = 1; i < count; i++) {
-		var next = get_next_sibling(end);
-
-		while (next !== null && next.nodeType === Node.COMMENT_NODE) {
-			next = get_next_sibling(next);
-		}
-
-		if (next === null) {
-			break;
-		}
-
-		end = next;
+export function create_fragment_from_html(html, ns = '') {
+	if (ns !== '') {
+		return /** @type {NonNullable<typeof parse_ns>} */ (parse_ns)(
+			html,
+			/** @type {'svg' | 'math'} */ (ns),
+		);
 	}
-
-	return end;
+	var elem = document.createElement('template');
+	elem.innerHTML = html;
+	return elem.content;
 }
 
 /**
- * A template's parsed content and the flags that shaped it, shared by every
- * clone of one `template()` instance.
+ * A template's content and flags, shared by every clone of one `template()`
+ * instance, with the parsed node cached for the namespace it was parsed in.
  * @typedef {{
- *   content: string;
- *   is_fragment: boolean;
- *   use_import_node: boolean;
- *   use_svg_namespace: boolean;
- *   use_mathml_namespace: boolean;
- *   is_comment: boolean;
- *   has_start: boolean;
- *   node: Node | DocumentFragment | undefined;
- *   node_svg: boolean;
- *   node_mathml: boolean;
+ *   c: string;
+ *   f: number;
+ *   n: Node | DocumentFragment | undefined;
+ *   ns: string | undefined;
  * }} TemplateState
  */
 
@@ -126,24 +82,33 @@ function hydrate_fragment_end(start, count) {
  * @returns {Node}
  */
 function clone_template(t) {
-	var is_fragment = t.is_fragment;
-	var is_comment = t.is_comment;
-	var node = t.node;
-	// If using runtime namespace, check active_namespace
-	var svg = !is_comment && (t.use_svg_namespace || active_namespace === 'svg');
-	var mathml = !is_comment && (t.use_mathml_namespace || active_namespace === 'mathml');
-
-	if (node === undefined || t.node_svg !== svg || t.node_mathml !== mathml) {
-		node = create_fragment_from_html(t.has_start ? t.content : '<!>' + t.content, svg, mathml);
+	var flags = t.f;
+	var content = t.c;
+	var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
+	// The namespace the content parses in: a static one from the flags, else
+	// the active namespace (a comment placeholder needs none).
+	var ns =
+		content === '<!>'
+			? ''
+			: (flags & TEMPLATE_SVG_NAMESPACE) !== 0 || active_namespace === 'svg'
+				? 'svg'
+				: (flags & TEMPLATE_MATHML_NAMESPACE) !== 0 || active_namespace === 'mathml'
+					? 'math'
+					: '';
+	var node = t.n;
+
+	if (node === undefined || t.ns !== ns) {
+		// Content that opens with a placeholder comment gets one more in
+		// front, so the first child the compiler navigates to is the element.
+		node = create_fragment_from_html(content.startsWith('<!>') ? '<!>' + content : content, ns);
 		if (!is_fragment) node = /** @type {Node} */ (get_first_child(node));
-		t.node = node;
-		t.node_svg = svg;
-		t.node_mathml = mathml;
+		t.n = node;
+		t.ns = ns;
 	}
 
 	/** @type {DocumentFragment | Node} */
 	var clone =
-		t.use_import_node || is_firefox
+		(flags & TEMPLATE_USE_IMPORT_NODE) !== 0 || is_firefox
 			? document.importNode(/** @type {Node} */ (node), true)
 			: /** @type {Node} */ (node).cloneNode(true);
 
@@ -155,15 +120,7 @@ function clone_template(t) {
 		end = /** @type {Node} */ (/** @type {DocumentFragment} */ (clone).lastChild);
 	}
 
-	// assign_nodes, inline: every template clone records its range.
-	var block = /** @type {Block} */ (active_block);
-	var s = block.s;
-	if (s === null) {
-		block.s = { start, end };
-	} else if (s.start === null) {
-		s.start = start;
-		s.end = end;
-	}
+	assign_nodes(start, end);
 
 	return clone;
 }
@@ -175,24 +132,70 @@ function clone_template(t) {
  * @param {number} [count] - Pre-calculated count of top-level nodes (for fragments). When provided, avoids runtime parsing.
  * @returns {() => Node}
  */
-export function template(content, flags, count = 1) {
+export function template(content, flags = 0, count = 1) {
 	var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
-	var is_comment = content === '<!>';
 	/** @type {TemplateState} */
-	var t = {
-		content,
-		is_fragment,
-		use_import_node: (flags & TEMPLATE_USE_IMPORT_NODE) !== 0,
-		use_svg_namespace: (flags & TEMPLATE_SVG_NAMESPACE) !== 0,
-		use_mathml_namespace: (flags & TEMPLATE_MATHML_NAMESPACE) !== 0,
-		is_comment,
-		has_start: !is_comment && !content.startsWith('<!>'),
-		node: undefined,
-		node_svg: false,
-		node_mathml: false,
-	};
+	var t = { c: content, f: flags, n: undefined, ns: undefined };
 
-	return () => (hydrating ? hydrate_template(is_fragment, count) : clone_template(t));
+	return () =>
+		HYDRATION && hydrating
+			? /** @type {import('./hydrate.js').HydrationRuntime} */ (H).t(is_fragment, count)
+			: clone_template(t);
+}
+
+/**
+ * The document that owns parsed template content: it has no browsing
+ * context, so an element created in it does not load its `src` (an image,
+ * a video) until a clone is adopted into the page, exactly like a node
+ * parsed from a `<template>`.
+ * @type {Document | undefined}
+ */
+var inert_document;
+
+/**
+ * A template that is one HTML element with static attributes and at most one
+ * text child, built with DOM calls instead of parsed: a `<template>` parse
+ * has a fixed cost that dwarfs the element itself, and an app's first render
+ * pays it once per distinct template. The compiler decides which templates
+ * qualify (`template_el` in the client transform); every other shape still
+ * parses. The element is created in the inert template document and in the
+ * active namespace, as a parsed template would be.
+ * @param {string} tag
+ * @param {string[] | null} [attributes] - flat name/value pairs
+ * @param {string} [text]
+ * @returns {() => Node}
+ */
+export function template_el(tag, attributes = null, text = '') {
+	/** @type {Element | undefined} */
+	var node;
+	/** @type {string | undefined} */
+	var node_ns;
+
+	return () => {
+		if (HYDRATION && hydrating) {
+			return /** @type {import('./hydrate.js').HydrationRuntime} */ (H).t(false, 1);
+		}
+		var ns = active_namespace;
+		if (node === undefined || node_ns !== ns) {
+			var doc = (inert_document ??= document.createElement('template').content.ownerDocument);
+			node =
+				ns === DEFAULT_NAMESPACE
+					? doc.createElement(tag)
+					: doc.createElementNS(NAMESPACE_URI[ns], tag);
+			if (attributes !== null) {
+				for (var i = 0; i < attributes.length; i += 2) {
+					node.setAttribute(attributes[i], attributes[i + 1]);
+				}
+			}
+			if (text !== '') {
+				node.textContent = text;
+			}
+			node_ns = ns;
+		}
+		var clone = is_firefox ? document.importNode(node, true) : node.cloneNode(true);
+		assign_nodes(clone, clone);
+		return clone;
+	};
 }
 
 /**
@@ -201,8 +204,8 @@ export function template(content, flags, count = 1) {
  * @param {Node} dom - The DOM node to append.
  */
 export function append(anchor, dom) {
-	if (hydrating) {
-		hydrate_append(anchor, dom);
+	if (HYDRATION && hydrating) {
+		/** @type {import('./hydrate.js').HydrationRuntime} */ (H).a(anchor, dom);
 		return;
 	}
 	if (/** @type {AppendIntoAnchor} */ (anchor).into === true) {
@@ -217,7 +220,7 @@ export function append(anchor, dom) {
 }
 
 export function text(data = '') {
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		assign_nodes(/** @type {Node} */ (hydrate_node), /** @type {Node} */ (hydrate_node));
 		return /** @type {Node} */ (hydrate_node);
 	}
@@ -225,27 +228,3 @@ export function text(data = '') {
 	assign_nodes(node, node);
 	return node;
 }
-
-/**
- * Create fragment with proper namespace using Svelte's wrapping approach
- * @param {string} content
- * @param {'svg' | 'math'} ns
- * @returns {DocumentFragment}
- */
-function from_namespace(content, ns = 'svg') {
-	var wrapped = `<${ns}>${content}</${ns}>`;
-
-	var elem = document.createElement('template');
-	elem.innerHTML = wrapped;
-	var fragment = elem.content;
-
-	var root = /** @type {Element} */ (get_first_child(fragment));
-	var result = document.createDocumentFragment();
-
-	var first;
-	while ((first = get_first_child(root))) {
-		result.appendChild(/** @type {Node} */ (first));
-	}
-
-	return result;
-}