ripple 0.4.3 → 0.4.5

package/tests/client/svg.test.tsrx

@@ -1,7 +1,279 @@
-import { track } from 'ripple';
+import { track, flushSync } from 'ripple';
 import type { Component, PropsWithChildren, PropsWithExtras } from 'ripple';
 
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const HTML_NS = 'http://www.w3.org/1999/xhtml';
+
+// The namespace is only known at runtime here: the component's children are
+// compiled without it and rendered into an `<svg>` the component owns, so
+// every block must keep the namespace it was created in when it reruns.
+describe('SVG namespace in runtime-only contexts', () => {
+	function SVG({ children }: PropsWithChildren<{}>) @{
+		<svg>{children}</svg>
+	}
+
+	it('parses a nested template in the SVG namespace', () => {
+		function App() @{
+			<SVG>
+				<g class="group">
+					<circle r="1" />
+				</g>
+			</SVG>
+		}
+
+		render(App);
+		expect(container.querySelector('.group').namespaceURI).toBe(SVG_NS);
+		expect(container.querySelector('circle').namespaceURI).toBe(SVG_NS);
+	});
+
+	it('keeps the namespace when an @if in component children toggles', () => {
+		let setFlag: ((value: boolean) => void) | undefined;
+
+		function App() @{
+			const flag = track(true);
+			setFlag = (value) => {
+				flag.value = value;
+			};
+			<SVG>
+				@if (flag.value) {
+					<polygon class="a" points="0,0 1,1" />
+				} @else {
+					<g class="b">
+						<rect width="1" height="1" />
+					</g>
+				}
+			</SVG>
+		}
+
+		render(App);
+		expect(container.querySelector('.a').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setFlag?.(false));
+		expect(container.querySelector('.b').namespaceURI).toBe(SVG_NS);
+		expect(container.querySelector('rect').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setFlag?.(true));
+		expect(container.querySelector('.a').namespaceURI).toBe(SVG_NS);
+	});
+
+	it('keeps the namespace when an @if in a leaf component toggles', () => {
+		let setFlag: ((value: boolean) => void) | undefined;
+
+		function Shape() @{
+			const flag = track(true);
+			setFlag = (value) => {
+				flag.value = value;
+			};
+			@if (flag.value) {
+				<polygon class="a" points="0,0 1,1" />
+			} @else {
+				<rect class="b" width="1" height="1" />
+			}
+		}
+
+		function App() @{
+			<svg>
+				<Shape />
+			</svg>
+		}
+
+		render(App);
+		expect(container.querySelector('.a').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setFlag?.(false));
+		expect(container.querySelector('.b').namespaceURI).toBe(SVG_NS);
+	});
+
+	it('keeps the namespace when a dynamic tag in component children changes', () => {
+		let setTag: ((value: string) => void) | undefined;
+
+		function App() @{
+			const tag = track('polygon');
+			setTag = (value) => {
+				tag.value = value;
+			};
+			<SVG>
+				<{tag.value} class="shape" />
+			</SVG>
+		}
+
+		render(App);
+		expect(container.querySelector('.shape').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setTag?.('rect'));
+		const shape = container.querySelector('.shape');
+		expect(shape.localName).toBe('rect');
+		expect(shape.namespaceURI).toBe(SVG_NS);
+	});
+
+	it('keeps the namespace for items added to an @for in component children', () => {
+		let setItems: ((value: string[]) => void) | undefined;
+
+		function App() @{
+			const items = track(['a']);
+			setItems = (value) => {
+				items.value = value;
+			};
+			<SVG>
+				@for (const id of items.value) {
+					<circle data-id={id} r="1" />
+				}
+			</SVG>
+		}
+
+		render(App);
+		expect(container.querySelector('[data-id=a]').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setItems?.(['a', 'b']));
+		expect(container.querySelector('[data-id=b]').namespaceURI).toBe(SVG_NS);
+	});
+
+	it('renders HTML inside a foreignObject in component children', () => {
+		let setTag: ((value: string) => void) | undefined;
+
+		function App() @{
+			const tag = track('div');
+			setTag = (value) => {
+				tag.value = value;
+			};
+			<SVG>
+				<foreignObject>
+					@if (tag.value !== 'none') {
+						<div class="static-label">
+							<span>hi</span>
+						</div>
+					}
+					<{tag.value} class="html-label">Label</{tag.value}>
+				</foreignObject>
+				<circle class="after" r="1" />
+			</SVG>
+		}
+
+		render(App);
+		expect(container.querySelector('.static-label').namespaceURI).toBe(HTML_NS);
+		expect(container.querySelector('span').namespaceURI).toBe(HTML_NS);
+		expect(container.querySelector('.html-label').namespaceURI).toBe(HTML_NS);
+		expect(container.querySelector('.after').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setTag?.('span'));
+		const label = container.querySelector('.html-label');
+		expect(label.localName).toBe('span');
+		expect(label.namespaceURI).toBe(HTML_NS);
+	});
+
+	it('sets a dynamic class on SVG elements in component children', () => {
+		let setName: ((value: string) => void) | undefined;
+
+		function App() @{
+			const name = track('one');
+			setName = (value) => {
+				name.value = value;
+			};
+			<SVG>
+				<circle class={name.value} r="1" />
+				<a class={name.value} href="#link">
+					<text>link</text>
+				</a>
+			</SVG>
+		}
+
+		render(App);
+		expect(container.querySelector('circle').getAttribute('class')).toBe('one');
+		expect(container.querySelector('a').getAttribute('class')).toBe('one');
+		flushSync(() => setName?.('two'));
+		expect(container.querySelector('circle').getAttribute('class')).toBe('two');
+		expect(container.querySelector('a').getAttribute('class')).toBe('two');
+	});
+});
+
+describe('dynamic element namespace changes', () => {
+	it('switches a root between HTML and SVG with its children', () => {
+		let setTag: ((value: string) => void) | undefined;
+
+		function App() @{
+			const tag = track('div');
+			setTag = (value) => {
+				tag.value = value;
+			};
+			<{tag.value} class="root">
+				<g class="inner">
+					<title>t</title>
+				</g>
+			</{tag.value}>
+		}
+
+		render(App);
+		expect(container.querySelector('.root').namespaceURI).toBe(HTML_NS);
+		expect(container.querySelector('.inner').namespaceURI).toBe(HTML_NS);
+		flushSync(() => setTag?.('svg'));
+		expect(container.querySelector('.root').namespaceURI).toBe(SVG_NS);
+		expect(container.querySelector('.inner').namespaceURI).toBe(SVG_NS);
+		expect(container.querySelector('title').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setTag?.('div'));
+		expect(container.querySelector('.root').namespaceURI).toBe(HTML_NS);
+		expect(container.querySelector('.inner').namespaceURI).toBe(HTML_NS);
+	});
+
+	it('renders HTML children once the tag becomes foreignObject', () => {
+		let setTag: ((value: string) => void) | undefined;
+
+		function App() @{
+			const tag = track('g');
+			setTag = (value) => {
+				tag.value = value;
+			};
+			<svg>
+				<{tag.value} class="host">
+					<a class="content">hi</a>
+				</{tag.value}>
+			</svg>
+		}
+
+		render(App);
+		expect(container.querySelector('.host').namespaceURI).toBe(SVG_NS);
+		expect(container.querySelector('.content').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setTag?.('foreignObject'));
+		const host = container.querySelector('.host');
+		expect(host.localName).toBe('foreignObject');
+		expect(host.namespaceURI).toBe(SVG_NS);
+		expect(container.querySelector('.content').namespaceURI).toBe(HTML_NS);
+		flushSync(() => setTag?.('g'));
+		expect(container.querySelector('.content').namespaceURI).toBe(SVG_NS);
+	});
+});
+
 describe('SVG namespace handling', () => {
+	it('preserves SVG and foreignObject namespaces when dynamic tags change', () => {
+		let setTags: ((svgTag: string, htmlTag: string) => void) | undefined;
+
+		function App() @{
+			const shape = track('circle');
+			const html = track('div');
+			setTags = (svgTag, htmlTag) => {
+				shape.value = svgTag;
+				html.value = htmlTag;
+			};
+			<svg>
+				<{shape.value} class="shape">
+					<title>Dynamic shape</title>
+				</{shape.value}>
+				<foreignObject>
+					<{html.value} class="html-label">Label</{html.value}>
+				</foreignObject>
+			</svg>
+		}
+
+		render(App);
+		for (const [svgTag, htmlTag] of [['circle', 'div'], ['path', 'span'], ['line', 'div']]) {
+			flushSync(() => {
+				setTags?.(svgTag, htmlTag);
+			});
+			const element = container.querySelector('.shape');
+			expect(element.localName).toBe(svgTag);
+			expect(element.namespaceURI).toBe('http://www.w3.org/2000/svg');
+			expect(element.querySelector('title').namespaceURI).toBe('http://www.w3.org/2000/svg');
+			expect(element.textContent).toBe('Dynamic shape');
+			const label = container.querySelector('.html-label');
+			expect(label.localName).toBe(htmlTag);
+			expect(label.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+			expect(label.textContent).toBe('Label');
+		}
+	});
+
 	it('should render static SVG elements with correct namespace', () => {
 		function App() @{
 			<svg

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div>Hello World`);
+var root = _$_.template_el('div', null, 'Hello World');
 
 function StaticText_render(__anchor, __block) {
 	var div = root();
@@ -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();
@@ -59,7 +65,7 @@ function WithAttributes_render(__anchor, __block) {
 
 WithAttributes[_$_.$r] = WithAttributes_render;
 
-var root_6 = _$_.template(`<span class=child>Child content`);
+var root_6 = _$_.template_el('span', ['class', 'child'], 'Child content');
 
 function ChildComponent_render(__anchor, __block) {
 	var span = root_6();
@@ -69,7 +75,7 @@ function ChildComponent_render(__anchor, __block) {
 
 ChildComponent[_$_.$r] = ChildComponent_render;
 
-var root_7 = _$_.template(`<div class=parent>`);
+var root_7 = _$_.template_el('div', ['class', 'parent']);
 
 function ParentWithChild_render(__anchor, __block) {
 	var div_2 = root_7();
@@ -86,7 +92,7 @@ function ParentWithChild_render(__anchor, __block) {
 
 ParentWithChild[_$_.$r] = ParentWithChild_render;
 
-var root_8 = _$_.template(`<div class=first>First`);
+var root_8 = _$_.template_el('div', ['class', 'first'], 'First');
 
 function FirstSibling_render(__anchor, __block) {
 	var div_3 = root_8();
@@ -96,7 +102,7 @@ function FirstSibling_render(__anchor, __block) {
 
 FirstSibling[_$_.$r] = FirstSibling_render;
 
-var root_9 = _$_.template(`<div class=second>Second`);
+var root_9 = _$_.template_el('div', ['class', 'second'], 'Second');
 
 function SecondSibling_render(__anchor, __block) {
 	var div_4 = root_9();
@@ -130,7 +136,7 @@ function SiblingComponents_render(__anchor, __block) {
 
 SiblingComponents[_$_.$r] = SiblingComponents_render;
 
-var root_12 = _$_.template(`<div>`);
+var root_12 = _$_.template_el('div');
 
 function render(__prev) {
 	var __a = 'Hello ' + __prev._a.name;
@@ -190,7 +196,7 @@ function ExpressionContent_render(__anchor, __block) {
 
 ExpressionContent[_$_.$r] = ExpressionContent_render;
 
-var root_15 = _$_.template(`<div class=helper-item>`);
+var root_15 = _$_.template_el('div', ['class', 'helper-item']);
 
 function NestedHelperItem_render(__anchor, __block, { item }) {
 	var div_7 = root_15();
@@ -238,8 +244,8 @@ function NestedTsxTsrxFragment_render(__anchor, __block, { label }) {
 
 NestedTsxTsrxFragment[_$_.$r] = NestedTsxTsrxFragment_render;
 
-var root_19 = _$_.template(`<div class=app-item> `);
-var root_18 = _$_.template(`<div class=nested-expression-values><!>`);
+var root_19 = _$_.template_el('div', ['class', 'app-item'], ' ');
+var root_18 = _$_.template_el('div', ['class', 'nested-expression-values'], [null]);
 
 function NestedTsxTsrxExpressionValues_render(__anchor, __block) {
 	var div_8 = root_18();
@@ -276,10 +282,10 @@ function NestedTsxTsrxExpressionValues_render(__anchor, __block) {
 
 NestedTsxTsrxExpressionValues[_$_.$r] = NestedTsxTsrxExpressionValues_render;
 
-var root_20 = _$_.template(`<strong class=middle>beta`);
-var root_21 = _$_.template(`<em class=tail>epsilon`);
+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) => {
@@ -322,10 +328,10 @@ function MixedTsrxCollectionText_render(__anchor, __block) {
 
 MixedTsrxCollectionText[_$_.$r] = MixedTsrxCollectionText_render;
 
-var root_24 = _$_.template(`<strong class=middle>beta`);
-var root_25 = _$_.template(`<em class=tail>epsilon`);
+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) => {
@@ -368,10 +374,10 @@ function MixedTsrxCollectionSplitServerText_render(__anchor, __block) {
 
 MixedTsrxCollectionSplitServerText[_$_.$r] = MixedTsrxCollectionSplitServerText_render;
 
-var root_28 = _$_.template(`<strong class=middle>beta`);
-var root_29 = _$_.template(`<em class=tail>epsilon`);
+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) => {
@@ -414,9 +420,9 @@ function MixedTsrxCollectionSplitClientText_render(__anchor, __block) {
 
 MixedTsrxCollectionSplitClientText[_$_.$r] = MixedTsrxCollectionSplitClientText_render;
 
-var root_32 = _$_.template(`<span class=primitive-tail> ok`);
+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) => {
@@ -452,9 +458,9 @@ function MixedTsrxCollectionPrimitiveServerText_render(__anchor, __block) {
 
 MixedTsrxCollectionPrimitiveServerText[_$_.$r] = MixedTsrxCollectionPrimitiveServerText_render;
 
-var root_35 = _$_.template(`<span class=primitive-tail> ok`);
+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) => {
@@ -490,7 +496,7 @@ function MixedTsrxCollectionPrimitiveClientText_render(__anchor, __block) {
 
 MixedTsrxCollectionPrimitiveClientText[_$_.$r] = MixedTsrxCollectionPrimitiveClientText_render;
 
-var root_38 = _$_.template(`<div class=dynamic-array-call> `);
+var root_38 = _$_.template_el('div', ['class', 'dynamic-array-call'], ' ');
 
 function DynamicArrayFromCall_render(__anchor, __block) {
 	const items = _$_.with_scope(__block, createPrimitiveItems);
@@ -508,7 +514,7 @@ function DynamicArrayFromCall_render(__anchor, __block) {
 
 DynamicArrayFromCall[_$_.$r] = DynamicArrayFromCall_render;
 
-var root_39 = _$_.template(`<div class=dynamic-array-track> `);
+var root_39 = _$_.template_el('div', ['class', 'dynamic-array-track'], ' ');
 
 function DynamicArrayFromTrack_render(__anchor, __block) {
 	const items = _$_.track(['start:', ['one', 2], true, null, false, ':end'], __block, '1egmw3m');
@@ -526,7 +532,7 @@ function DynamicArrayFromTrack_render(__anchor, __block) {
 
 DynamicArrayFromTrack[_$_.$r] = DynamicArrayFromTrack_render;
 
-var root_40 = _$_.template(`<div class=dynamic-array-conditional> `);
+var root_40 = _$_.template_el('div', ['class', 'dynamic-array-conditional'], ' ');
 
 function DynamicArrayFromConditional_render(__anchor, __block) {
 	const condition = true;
@@ -549,7 +555,7 @@ function DynamicArrayFromConditional_render(__anchor, __block) {
 
 DynamicArrayFromConditional[_$_.$r] = DynamicArrayFromConditional_render;
 
-var root_41 = _$_.template(`<div class=dynamic-array-logical> `);
+var root_41 = _$_.template_el('div', ['class', 'dynamic-array-logical'], ' ');
 
 function DynamicArrayFromLogical_render(__anchor, __block) {
 	const condition = true;
@@ -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);
 
@@ -622,8 +635,8 @@ function NestedTsrxElementsInsideTopLevelTsxValue_render(__anchor, __block) {
 
 NestedTsrxElementsInsideTopLevelTsxValue[_$_.$r] = NestedTsrxElementsInsideTopLevelTsxValue_render;
 
-var root_48 = _$_.template(`<span class=nested-tsx>inside nested tsx`);
-var root_49 = _$_.template(`<div class=native> `);
+var root_48 = _$_.template_el('span', ['class', 'nested-tsx'], 'inside nested tsx');
+var root_49 = _$_.template_el('div', ['class', 'native'], ' ');
 var root_51 = _$_.template(`<!>`, 1, 1);
 var root_50 = _$_.template(`<!>`, 1, 1);
 
@@ -663,7 +676,7 @@ function TsxDeclaredBeforeTopLevelTsx_render(__anchor, __block) {
 
 TsxDeclaredBeforeTopLevelTsx[_$_.$r] = TsxDeclaredBeforeTopLevelTsx_render;
 
-var root_52 = _$_.template(`<div class=text-prop> `);
+var root_52 = _$_.template_el('div', ['class', 'text-prop'], ' ');
 
 function TextProp_render(__anchor, __block, { children }) {
 	var div_21 = root_52();
@@ -680,7 +693,7 @@ function TextProp_render(__anchor, __block, { children }) {
 
 TextProp[_$_.$r] = TextProp_render;
 
-var root_53 = _$_.template(`<div class=text-prop>`);
+var root_53 = _$_.template_el('div', ['class', 'text-prop']);
 
 function render_1(__prev) {
 	var __a = __prev._a.value;
@@ -826,8 +839,22 @@ function Header_render(__anchor, __block) {
 
 Header[_$_.$r] = Header_render;
 
-var root_65 = _$_.template(`<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_65 = _$_.template_el('a', ['href', '/playground', 'class', 'playground-link'], 'Playground');
+
+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();
@@ -912,7 +939,7 @@ function WebsiteIndex_render(__anchor, __block) {
 
 WebsiteIndex[_$_.$r] = WebsiteIndex_render;
 
-var root_69 = _$_.template(`<footer class=last-child>I am the last child`);
+var root_69 = _$_.template_el('footer', ['class', 'last-child'], 'I am the last child');
 
 function LastChild_render(__anchor, __block) {
 	var footer = root_69();
@@ -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();
@@ -977,7 +1004,7 @@ function NestedComponentAsLastSibling_render(__anchor, __block) {
 
 NestedComponentAsLastSibling[_$_.$r] = NestedComponentAsLastSibling_render;
 
-var root_73 = _$_.template(`<div>`);
+var root_73 = _$_.template_el('div');
 
 function render_2(__prev) {
 	var __a = "label: " + String(_$_.with_scope(__prev._a, fetchLabel));
@@ -997,7 +1024,7 @@ function TextTailExpression_render(__anchor, __block) {
 
 TextTailExpression[_$_.$r] = TextTailExpression_render;
 
-var root_74 = _$_.template(`<div>`);
+var root_74 = _$_.template_el('div');
 
 function render_3(__prev) {
 	var __a = 'frag-' + String(_$_.with_scope(__prev._a, fetchLabel));
@@ -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();
@@ -1052,7 +1079,7 @@ function OpaqueLead_render(__anchor, __block, props) {
 
 OpaqueLead[_$_.$r] = OpaqueLead_render;
 
-var root_78 = _$_.template(`<div>`);
+var root_78 = _$_.template_el('div');
 
 function FragmentLeadsWithOpaqueValue_render(__anchor, __block) {
 	var div_31 = root_78();
@@ -1099,7 +1126,7 @@ function PrimitiveCallLead_render(__anchor, __block) {
 
 PrimitiveCallLead[_$_.$r] = PrimitiveCallLead_render;
 
-var root_81 = _$_.template(`<div>`);
+var root_81 = _$_.template_el('div');
 
 function FragmentLeadsWithPrimitiveCall_render(__anchor, __block) {
 	var div_32 = root_81();
@@ -1119,7 +1146,8 @@ FragmentLeadsWithPrimitiveCall[_$_.$r] = FragmentLeadsWithPrimitiveCall_render;
 var root_83 = _$_.template(`<div class=primitive-calls></div><button>update`, 1, 2);
 
 function render_5(__prev) {
-	var __a = "sum: " + (String(Number(__prev._a.value) + Number(__prev._a.value) ?? '') + ("; big: " + String(_$_.with_scope(__prev._b, () => BigInt(__prev._a.value)) ?? '')));
+	var __count_value = __prev._a.value;
+	var __a = "sum: " + (String(Number(__count_value) + Number(__count_value) ?? '') + ("; big: " + String(_$_.with_scope(__prev._b, () => BigInt(__prev._a.value)) ?? '')));
 
 	if (__prev.a !== __a) {
 		_$_.set_text_content(__prev._c, __a, __prev.a);
@@ -1149,10 +1177,10 @@ function PrimitiveTextCalls_render(__anchor, __block) {
 
 PrimitiveTextCalls[_$_.$r] = PrimitiveTextCalls_render;
 
-var root_84 = _$_.template(`<b>string`);
-var root_85 = _$_.template(`<b>number`);
-var root_86 = _$_.template(`<b>bigint`);
-var root_87 = _$_.template(`<b>date`);
+var root_84 = _$_.template_el('b', null, 'string');
+var root_85 = _$_.template_el('b', null, 'number');
+var root_86 = _$_.template_el('b', null, 'bigint');
+var root_87 = _$_.template_el('b', null, 'date');
 var root_89 = _$_.template(`<p>before<!>after</p><p>before<!>after</p><p>before<!>after</p><p>before<!>after`, 1, 4);
 var root_88 = _$_.template(`<!>`, 1, 1);