ripple 0.4.4 → 0.4.5

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # ripple
 
+## 0.4.5
+
+### Patch Changes
+
+- [#1497](https://github.com/Ripple-TS/ripple/pull/1497)
+  [`2469ccf`](https://github.com/Ripple-TS/ripple/commit/2469ccfba1a6afad4af6658a777dc735767c5625)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Trim the cold path of a first
+  mount: `template_el` builds nested templates and builds a master in the document
+  itself unless the compiler flagged a resource-loading element; Firefox is
+  detected without reading `navigator` (about 0.1 ms on a fresh page);
+  `Event.prototype.__root` is declared with the first delegated listener instead
+  of at mount; `set_attribute` skips the property-setter walk for `data-` and
+  `aria-` names; the first flush of a mounted app's effects runs in one phase;
+  `track()` and deferred component effects call one function less each; and a
+  mount before any delegated event is registered attaches no listeners.
+
+  New `set_attribute_value` and `set_property_value` helpers write an attribute
+  the compiler classified with the Web IDL setter table, so a standard element
+  never triggers the descriptor walk of `set_attribute`.
+
+- Updated dependencies
+  [[`2469ccf`](https://github.com/Ripple-TS/ripple/commit/2469ccfba1a6afad4af6658a777dc735767c5625)]:
+  - @tsrx/ripple@0.2.4
+
 ## 0.4.4
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "type": "module",
   "sideEffects": false,
   "module": "src/runtime/index-client.js",
@@ -87,7 +87,7 @@
     "devalue": "^5.9.2",
     "esm-env": "^1.2.2",
     "@tsrx/core": "^0.2.3",
-    "@tsrx/ripple": "0.2.3"
+    "@tsrx/ripple": "0.2.4"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

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

@@ -80,7 +80,14 @@ export function set_style(element, value, prev = {}) {
 export function set_attribute(element, attribute, value) {
 	if (value == null) {
 		element.removeAttribute(attribute);
-	} else if (typeof value !== 'string' && get_setters(element).includes(attribute)) {
+	} else if (
+		typeof value !== 'string' &&
+		// A `data-` or `aria-` name is never a property: the setter walk it
+		// would trigger reads every descriptor of the element's prototypes.
+		!attribute.startsWith('data-') &&
+		!attribute.startsWith('aria-') &&
+		get_setters(element).includes(attribute)
+	) {
 		/** @type {any} */ (element)[attribute] = value;
 	} else {
 		element.setAttribute(attribute, value);

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

@@ -536,6 +536,8 @@ export function delegate(events) {
 	}
 }
 
+var event_prototype_prepared = false;
+
 /**
  * @param {RootTargetRef} ref
  * @param {Iterable<string>} events
@@ -546,6 +548,14 @@ function register_root_events(ref, events) {
 
 	for (var event_name of events) {
 		if (registered_events.has(event_name)) continue;
+		if (!event_prototype_prepared) {
+			event_prototype_prepared = true;
+			// `__root` is read on every delegated event: declared on the
+			// prototype, the read stops at Event instead of walking to Object.
+			// Done with the first listener, so a mount before any delegated
+			// event is registered never touches `Event.prototype`.
+			Event.prototype.__root = undefined;
+		}
 		registered_events.add(event_name);
 
 		target.addEventListener(event_name, handle_event_propagation, {
@@ -571,7 +581,11 @@ export function handle_root_events(target) {
 	if (ref === undefined) {
 		ref = { n: 0, e: new Set(), t: target };
 		root_target_refs.set(target, ref);
-		register_root_events(ref, all_registered_events);
+		// Before any delegated event is registered (a first mount) there is
+		// nothing to attach.
+		if (all_registered_events.size > 0) {
+			register_root_events(ref, all_registered_events);
+		}
 	}
 
 	ref.n += 1;

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

@@ -18,6 +18,8 @@ export {
 	set_value,
 	set_checked,
 	set_selected,
+	set_attribute_value,
+	set_property_value,
 } from './render.js';
 
 export {

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

@@ -32,9 +32,12 @@ export var is_firefox;
 export function init_operations() {
 	var node_prototype = Node.prototype;
 	var element_prototype = Element.prototype;
-	var event_target_prototype = Event.prototype;
 
-	is_firefox = /Firefox/.test(navigator.userAgent);
+	// Firefox prefers `importNode` for template content (see `template.js`).
+	// Its Firefox-only `window` property is the test: the first read of
+	// `navigator` creates its wrapper, about 0.1 ms on a fresh page, paid by
+	// the first mount.
+	is_firefox = 'mozInnerScreenX' in window;
 	document = window.document;
 
 	first_child_getter = /** @type {(() => Node | null)} */ (
@@ -47,9 +50,11 @@ export function init_operations() {
 		get_descriptor(node_prototype, 'lastChild')?.get
 	);
 
-	// the following assignments improve perf of lookups on DOM nodes
+	// Declared on the prototype so a delegated handler lookup on an element
+	// stops at Element instead of walking to Object. `Event.prototype.__root`
+	// is declared with the first delegated listener (`events.js`): touching
+	// `Event.prototype` costs about 0.05 ms on a fresh page.
 	element_prototype.__click = undefined;
-	event_target_prototype.__root = undefined;
 }
 
 /**

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

@@ -165,3 +165,40 @@ export function set_selected(element, selected) {
 		element.removeAttribute('selected');
 	}
 }
+
+/**
+ * Writes an attribute the compiler proved is not a property of its element
+ * (`dom-setters.js` in the compiler), so no setter is looked for: `null` and
+ * `undefined` remove it.
+ * @param {Element} element
+ * @param {string} attribute
+ * @param {any} value
+ * @returns {void}
+ */
+export function set_attribute_value(element, attribute, value) {
+	if (value == null) {
+		element.removeAttribute(attribute);
+	} else {
+		element.setAttribute(attribute, value);
+	}
+}
+
+/**
+ * Writes a name the compiler proved is a settable property of its element:
+ * a string sets the attribute, any other value the property, and `null` or
+ * `undefined` remove the attribute, as `set_attribute` decides at runtime
+ * after discovering the element's setters.
+ * @param {Element} element
+ * @param {string} attribute
+ * @param {any} value
+ * @returns {void}
+ */
+export function set_property_value(element, attribute, value) {
+	if (value == null) {
+		element.removeAttribute(attribute);
+	} else if (typeof value !== 'string') {
+		/** @type {any} */ (element)[attribute] = value;
+	} else {
+		element.setAttribute(attribute, value);
+	}
+}

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

@@ -4,7 +4,7 @@
 /** @typedef {DerivedValue} Derived */
 
 import { DEV } from 'esm-env';
-import { destroy_block, destroy_non_branch_children, effect } from './blocks.js';
+import { block, destroy_block, destroy_non_branch_children } from './blocks.js';
 import {
 	ASYNC_DERIVED_READ_THROWN,
 	BLOCK_HAS_RUN,
@@ -796,7 +796,9 @@ export function track_read_only(value, block) {
  * @returns {Tracked | Derived}
  */
 export function track(v, b, hash, get, set) {
-	if (is_ripple_object(v)) {
+	// is_ripple_object(), inline: track() is on every component's cold path
+	// (kept identical by tests/utils/inline-drift.test.js).
+	if (typeof v === 'object' && v !== null && typeof v.f === 'number') {
 		return v;
 	}
 	if (b === null) {
@@ -1126,21 +1128,29 @@ function flush_queue(pending) {
 			blocks.sort(by_block_id);
 		}
 
-		var has_effects = false;
+		var effect_kinds = 0;
+		var has_render_blocks = false;
 
 		for (var i = 0; i < length; i++) {
 			var block = blocks[i];
 			var flags = block.f;
 			block.f = flags & ~SCHEDULED;
-			if ((flags & (PRE_EFFECT_BLOCK | EFFECT_BLOCK)) !== 0) {
-				has_effects = true;
+			var kind = flags & (PRE_EFFECT_BLOCK | EFFECT_BLOCK);
+			if (kind !== 0) {
+				effect_kinds |= kind;
+			} else {
+				has_render_blocks = true;
 			}
 		}
 
 		// New schedules land in the queue that replaced `pending`, so the array
-		// can be run in place. Effects need the three-phase ordering; a queue of
-		// only render blocks (the common flush) runs straight through.
-		if (has_effects) {
+		// can be run in place. A queue mixing kinds needs the three-phase
+		// ordering; one of a single kind (the common flush of render blocks,
+		// the first flush of a mounted app's effects) runs straight through.
+		if (
+			effect_kinds === (PRE_EFFECT_BLOCK | EFFECT_BLOCK) ||
+			(effect_kinds !== 0 && has_render_blocks)
+		) {
 			run_phases(blocks, length);
 		} else {
 			run_phase(blocks);
@@ -1853,7 +1863,9 @@ function create_deferred_effects(effects) {
 	for (var i = 0; i < length; i += 3) {
 		active_block = /** @type {Block} */ (effects[i + 1]);
 		active_reaction = /** @type {Block | Derived | null} */ (effects[i + 2]);
-		effect(/** @type {Function} */ (effects[i]));
+		// effect(), inline: one function less on every component's cold path
+		// (kept identical by tests/utils/inline-drift.test.js).
+		block(EFFECT_BLOCK, /** @type {Function} */ (effects[i]));
 	}
 	active_block = previous_block;
 	active_reaction = previous_reaction;

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

@@ -153,19 +153,74 @@ export function template(content, flags = 0, count = 1) {
 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.
+ * A nested element of a DOM-built template: its tag, attributes and children,
+ * trailing absences left out.
+ * @typedef {[string, (string[] | null)?, (string | TemplateChildren)?]} TemplateElementSpec
+ */
+
+/**
+ * The children of a DOM-built template element in order: a nested element,
+ * a text string, or `null` for a placeholder comment.
+ * @typedef {Array<string | null | TemplateElementSpec>} TemplateChildren
+ */
+
+/**
+ * Builds one element of a DOM-built template, in the inert document and
+ * the active namespace, as a parsed template would create it.
+ * @param {Document} doc
+ * @param {keyof typeof NAMESPACE_URI} ns
+ * @param {string} tag
+ * @param {string[] | null | undefined} attributes
+ * @param {string | TemplateChildren | undefined} children
+ * @returns {Element}
+ */
+function build_template_element(doc, ns, tag, attributes, children) {
+	var 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 (children === undefined || typeof children === 'string') {
+		if (children !== undefined && children !== '') {
+			node.textContent = children;
+		}
+	} else {
+		for (var j = 0; j < children.length; j++) {
+			var child = children[j];
+			node.appendChild(
+				child === null
+					? doc.createComment('')
+					: typeof child === 'string'
+						? doc.createTextNode(child)
+						: build_template_element(doc, ns, child[0], child[1], child[2]),
+			);
+		}
+	}
+	return node;
+}
+
+/**
+ * A template of a few HTML elements with static attributes, built with DOM
+ * calls instead of parsed: a `<template>` parse has a fixed cost that dwarfs
+ * the elements themselves, and an app's first render pays it once per
+ * distinct template, plus the parser's own start-up on a fresh page. The
+ * compiler decides which templates qualify (`dom_built_template` in the
+ * client transform); every other shape still parses. The nodes are created
+ * in the active namespace, as a parsed template would be, and in the inert
+ * template document when one of them could load a resource (`inert`), also
+ * as parsed; any other master is built in the document itself, which skips
+ * creating the inert document on a fresh page.
  * @param {string} tag
  * @param {string[] | null} [attributes] - flat name/value pairs
- * @param {string} [text]
+ * @param {string | TemplateChildren} [children] - one text child, or the
+ *   child nodes in order
+ * @param {number} [inert] - 1 when an element could load a resource from an
+ *   attribute the master carries
  * @returns {() => Node}
  */
-export function template_el(tag, attributes = null, text = '') {
+export function template_el(tag, attributes = null, children = '', inert = 0) {
 	/** @type {Element | undefined} */
 	var node;
 	/** @type {string | undefined} */
@@ -177,19 +232,11 @@ export function template_el(tag, attributes = null, text = '') {
 		}
 		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;
-			}
+			var doc =
+				inert === 0
+					? document
+					: (inert_document ??= document.createElement('template').content.ownerDocument);
+			node = build_template_element(doc, ns, tag, attributes, children);
 			node_ns = ns;
 		}
 		var clone = is_firefox ? document.importNode(node, true) : node.cloneNode(true);

package/tests/hydration/compiled/client/basic.js

@@ -30,7 +30,13 @@ function MultipleElements_render(__anchor, __block) {
 
 MultipleElements[_$_.$r] = MultipleElements_render;
 
-var root_3 = _$_.template(`<div class=outer><div class=inner><span>Nested content`);
+var root_3 = _$_.template_el('div', ['class', 'outer'], [
+	[
+		'div',
+		['class', 'inner'],
+		[['span', null, 'Nested content']]
+	]
+]);
 
 function NestedElements_render(__anchor, __block) {
 	var div_1 = root_3();
@@ -239,7 +245,7 @@ function NestedTsxTsrxFragment_render(__anchor, __block, { label }) {
 NestedTsxTsrxFragment[_$_.$r] = NestedTsxTsrxFragment_render;
 
 var root_19 = _$_.template_el('div', ['class', 'app-item'], ' ');
-var root_18 = _$_.template(`<div class=nested-expression-values><!>`);
+var root_18 = _$_.template_el('div', ['class', 'nested-expression-values'], [null]);
 
 function NestedTsxTsrxExpressionValues_render(__anchor, __block) {
 	var div_8 = root_18();
@@ -279,7 +285,7 @@ NestedTsxTsrxExpressionValues[_$_.$r] = NestedTsxTsrxExpressionValues_render;
 var root_20 = _$_.template_el('strong', ['class', 'middle'], 'beta');
 var root_21 = _$_.template_el('em', ['class', 'tail'], 'epsilon');
 var root_22 = _$_.template(` `, 1, 1);
-var root_23 = _$_.template(`<div class=mixed-collection><!>`);
+var root_23 = _$_.template_el('div', ['class', 'mixed-collection'], [null]);
 
 function MixedTsrxCollectionText_render(__anchor, __block) {
 	const content = _$_.tsrx_element((__anchor, __block) => {
@@ -325,7 +331,7 @@ MixedTsrxCollectionText[_$_.$r] = MixedTsrxCollectionText_render;
 var root_24 = _$_.template_el('strong', ['class', 'middle'], 'beta');
 var root_25 = _$_.template_el('em', ['class', 'tail'], 'epsilon');
 var root_26 = _$_.template(` `, 1, 1);
-var root_27 = _$_.template(`<div class=mixed-collection-split><!>`);
+var root_27 = _$_.template_el('div', ['class', 'mixed-collection-split'], [null]);
 
 function MixedTsrxCollectionSplitServerText_render(__anchor, __block) {
 	const content = _$_.tsrx_element((__anchor, __block) => {
@@ -371,7 +377,7 @@ MixedTsrxCollectionSplitServerText[_$_.$r] = MixedTsrxCollectionSplitServerText_
 var root_28 = _$_.template_el('strong', ['class', 'middle'], 'beta');
 var root_29 = _$_.template_el('em', ['class', 'tail'], 'epsilon');
 var root_30 = _$_.template(` `, 1, 1);
-var root_31 = _$_.template(`<div class=mixed-collection-split><!>`);
+var root_31 = _$_.template_el('div', ['class', 'mixed-collection-split'], [null]);
 
 function MixedTsrxCollectionSplitClientText_render(__anchor, __block) {
 	const content = _$_.tsrx_element((__anchor, __block) => {
@@ -416,7 +422,7 @@ MixedTsrxCollectionSplitClientText[_$_.$r] = MixedTsrxCollectionSplitClientText_
 
 var root_32 = _$_.template_el('span', ['class', 'primitive-tail'], ' ok');
 var root_33 = _$_.template(` `, 1, 1);
-var root_34 = _$_.template(`<div class=mixed-collection-primitive><!>`);
+var root_34 = _$_.template_el('div', ['class', 'mixed-collection-primitive'], [null]);
 
 function MixedTsrxCollectionPrimitiveServerText_render(__anchor, __block) {
 	const content = _$_.tsrx_element((__anchor, __block) => {
@@ -454,7 +460,7 @@ MixedTsrxCollectionPrimitiveServerText[_$_.$r] = MixedTsrxCollectionPrimitiveSer
 
 var root_35 = _$_.template_el('span', ['class', 'primitive-tail'], ' ok');
 var root_36 = _$_.template(` `, 1, 1);
-var root_37 = _$_.template(`<div class=mixed-collection-primitive><!>`);
+var root_37 = _$_.template_el('div', ['class', 'mixed-collection-primitive'], [null]);
 
 function MixedTsrxCollectionPrimitiveClientText_render(__anchor, __block) {
 	const content = _$_.tsrx_element((__anchor, __block) => {
@@ -568,7 +574,7 @@ function DynamicArrayFromLogical_render(__anchor, __block) {
 
 DynamicArrayFromLogical[_$_.$r] = DynamicArrayFromLogical_render;
 
-var root_42 = _$_.template(`<section class=outer><div class=inner>from tsrx`);
+var root_42 = _$_.template_el('section', ['class', 'outer'], [['div', ['class', 'inner'], 'from tsrx']]);
 var root_44 = _$_.template(`<!>`, 1, 1);
 var root_43 = _$_.template(`<!>`, 1, 1);
 
@@ -595,7 +601,14 @@ function NestedTsrxInsideTopLevelTsxExpression_render(__anchor, __block) {
 
 NestedTsrxInsideTopLevelTsxExpression[_$_.$r] = NestedTsrxInsideTopLevelTsxExpression_render;
 
-var root_45 = _$_.template(`<div class=wrapper><section class=native><span class=nested-tsrx>inside nested tsrx`);
+var root_45 = _$_.template_el('div', ['class', 'wrapper'], [
+	[
+		'section',
+		['class', 'native'],
+		[['span', ['class', 'nested-tsrx'], 'inside nested tsrx']]
+	]
+]);
+
 var root_47 = _$_.template(`<!>`, 1, 1);
 var root_46 = _$_.template(`<!>`, 1, 1);
 
@@ -827,7 +840,21 @@ function Header_render(__anchor, __block) {
 Header[_$_.$r] = Header_render;
 
 var root_65 = _$_.template_el('a', ['href', '/playground', 'class', 'playground-link'], 'Playground');
-var root_64 = _$_.template(`<div class=social-links><a href=https://github.com class=github-link>GitHub</a><a href=https://discord.com class=discord-link>Discord</a><!>`);
+
+var root_64 = _$_.template_el('div', ['class', 'social-links'], [
+	[
+		'a',
+		['href', 'https://github.com', 'class', 'github-link'],
+		'GitHub'
+	],
+
+	[
+		'a',
+		['href', 'https://discord.com', 'class', 'discord-link'],
+		'Discord'
+	],
+	null
+]);
 
 function Actions_render(__anchor, __block, { playgroundVisible = false }) {
 	var div_23 = root_64();
@@ -853,7 +880,7 @@ function Actions_render(__anchor, __block, { playgroundVisible = false }) {
 
 Actions[_$_.$r] = Actions_render;
 
-var root_66 = _$_.template(`<main><div class=container><!>`);
+var root_66 = _$_.template_el('main', null, [['div', ['class', 'container'], [null]]]);
 
 function Layout_render(__anchor, __block, { children }) {
 	var main = root_66();
@@ -874,7 +901,7 @@ function Layout_render(__anchor, __block, { children }) {
 
 Layout[_$_.$r] = Layout_render;
 
-var root_67 = _$_.template(`<div class=content><p>Some content here`);
+var root_67 = _$_.template_el('div', ['class', 'content'], [['p', null, 'Some content here']]);
 
 function Content_render(__anchor, __block) {
 	var div_25 = root_67();
@@ -922,7 +949,7 @@ function LastChild_render(__anchor, __block) {
 
 LastChild[_$_.$r] = LastChild_render;
 
-var root_70 = _$_.template(`<div class=wrapper><h1>Header</h1><p>Some content`);
+var root_70 = _$_.template_el('div', ['class', 'wrapper'], [['h1', null, 'Header'], ['p', null, 'Some content']]);
 
 function ComponentAsLastSibling_render(__anchor, __block) {
 	var div_26 = root_70();
@@ -941,7 +968,7 @@ function ComponentAsLastSibling_render(__anchor, __block) {
 
 ComponentAsLastSibling[_$_.$r] = ComponentAsLastSibling_render;
 
-var root_71 = _$_.template(`<div class=inner><span>Inner text`);
+var root_71 = _$_.template_el('div', ['class', 'inner'], [['span', null, 'Inner text']]);
 
 function InnerContent_render(__anchor, __block) {
 	var div_27 = root_71();
@@ -959,7 +986,7 @@ function InnerContent_render(__anchor, __block) {
 
 InnerContent[_$_.$r] = InnerContent_render;
 
-var root_72 = _$_.template(`<section class=outer><h2>Section title`);
+var root_72 = _$_.template_el('section', ['class', 'outer'], [['h2', null, 'Section title']]);
 
 function NestedComponentAsLastSibling_render(__anchor, __block) {
 	var section_1 = root_72();
@@ -1017,7 +1044,7 @@ function FragmentTailExpression_render(__anchor, __block) {
 
 FragmentTailExpression[_$_.$r] = FragmentTailExpression_render;
 
-var root_75 = _$_.template(`<div>frag-<span>tail`);
+var root_75 = _$_.template_el('div', null, ['frag-', ['span', null, 'tail']]);
 
 function FragmentChildOnly_render(__anchor, __block) {
 	var div_30 = root_75();

package/tests/hydration/compiled/client/composite.js

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div class=layout><!>`);
+var root = _$_.template_el('div', ['class', 'layout'], [null]);
 
 function Layout_render(__anchor, __block, { children }) {
 	var div = root();
@@ -18,7 +18,7 @@ function Layout_render(__anchor, __block, { children }) {
 
 Layout[_$_.$r] = Layout_render;
 
-var root_1 = _$_.template(`<div class=layout>before<!>after`);
+var root_1 = _$_.template_el('div', ['class', 'layout'], ['before', null, 'after']);
 
 function TextWrappedLayout_render(__anchor, __block, { children }) {
 	var div_1 = root_1();

package/tests/hydration/compiled/client/events.js

@@ -1,7 +1,10 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div><button class=increment>Increment</button><span class=count>`);
+var root = _$_.template_el('div', null, [
+	['button', ['class', 'increment'], 'Increment'],
+	['span', ['class', 'count']]
+]);
 
 function render(__prev) {
 	var __a = __prev._a.value;
@@ -32,7 +35,11 @@ function ClickCounter_render(__anchor, __block) {
 
 ClickCounter[_$_.$r] = ClickCounter_render;
 
-var root_1 = _$_.template(`<div><button class=decrement>-</button><span class=count></span><button class=increment>+`);
+var root_1 = _$_.template_el('div', null, [
+	['button', ['class', 'decrement'], '-'],
+	['span', ['class', 'count']],
+	['button', ['class', 'increment'], '+']
+]);
 
 function render_1(__prev) {
 	var __a = __prev._a.value;
@@ -68,7 +75,11 @@ function IncrementDecrement_render(__anchor, __block) {
 
 IncrementDecrement[_$_.$r] = IncrementDecrement_render;
 
-var root_2 = _$_.template(`<div><button class=target>Target</button><span class=clicks></span><span class=hovers>`);
+var root_2 = _$_.template_el('div', null, [
+	['button', ['class', 'target'], 'Target'],
+	['span', ['class', 'clicks']],
+	['span', ['class', 'hovers']]
+]);
 
 function render_2(__prev) {
 	var __a = __prev._a.value;
@@ -112,7 +123,11 @@ function MultipleEvents_render(__anchor, __block) {
 
 MultipleEvents[_$_.$r] = MultipleEvents_render;
 
-var root_3 = _$_.template(`<div><button class=btn>Click</button><span class=count></span><span class=action> `);
+var root_3 = _$_.template_el('div', null, [
+	['button', ['class', 'btn'], 'Click'],
+	['span', ['class', 'count']],
+	['span', ['class', 'action'], ' ']
+]);
 
 function render_3(__prev) {
 	var __a = __prev._a.value;
@@ -156,7 +171,7 @@ function MultiStateUpdate_render(__anchor, __block) {
 
 MultiStateUpdate[_$_.$r] = MultiStateUpdate_render;
 
-var root_4 = _$_.template(`<div><button class=toggle>`);
+var root_4 = _$_.template_el('div', null, [['button', ['class', 'toggle']]]);
 
 function render_4(__prev) {
 	var __a = __prev._a.value ? 'ON' : 'OFF';
@@ -206,7 +221,7 @@ function ChildButton_render(__anchor, __block, props) {
 
 ChildButton[_$_.$r] = ChildButton_render;
 
-var root_6 = _$_.template(`<div><span class=count>`);
+var root_6 = _$_.template_el('div', null, [['span', ['class', 'count']]]);
 
 function render_6(__prev) {
 	var __a = __prev._a.value;