ripple 0.4.1 → 0.4.3

package/tests/hydration/compiled/client/track-async-serialization.js

@@ -1,10 +1,10 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<p class="result"> </p>`, 0);
+var root = _$_.template(`<p class=result> `);
 
 function MoneyResult_render(__anchor, __block, { count }) {
-	const money = _$_.track_async(() => _$_.with_scope(__block, () => doubleMoney(new Money(count.value, 'USD'))), __block, '2e21cbe9');
+	const money = _$_.track_async(() => _$_.with_scope(__block, () => doubleMoney(new Money(count.value, 'USD'))), __block, 'csssmh');
 	var p = root();
 
 	{
@@ -19,12 +19,12 @@ function MoneyResult_render(__anchor, __block, { count }) {
 
 MoneyResult[_$_.$r] = MoneyResult_render;
 
-var root_3 = _$_.template(`<p class="loading">loading...</p>`, 0);
-var root_2 = _$_.template(`<button class="increment">increment</button><!>`, 1, 2);
+var root_3 = _$_.template(`<p class=loading>loading...`);
+var root_2 = _$_.template(`<button class=increment>increment</button><!>`, 1, 2);
 var root_1 = _$_.template(`<!>`, 1, 1);
 
 function AsyncCustomType_render(__anchor, __block) {
-	const count = _$_.track(6, __block, 'f0c2b41e');
+	const count = _$_.track(6, __block, '1usw1lq');
 	var fragment = root_1();
 	var node_1 = _$_.first_child_frag(fragment);
 
@@ -59,10 +59,10 @@ function AsyncCustomType_render(__anchor, __block) {
 
 AsyncCustomType[_$_.$r] = AsyncCustomType_render;
 
-var root_4 = _$_.template(`<p class="result"> </p>`, 0);
+var root_4 = _$_.template(`<p class=result> `);
 
 function ServerCallResult_render(__anchor, __block, { count }) {
-	const data = _$_.track_async(() => _$_.with_scope(__block, () => formatValue(count.value)), __block, '4e502c38');
+	const data = _$_.track_async(() => _$_.with_scope(__block, () => formatValue(count.value)), __block, 'lq8y0o');
 	var p_2 = root_4();
 
 	{
@@ -77,12 +77,12 @@ function ServerCallResult_render(__anchor, __block, { count }) {
 
 ServerCallResult[_$_.$r] = ServerCallResult_render;
 
-var root_7 = _$_.template(`<p class="loading">loading...</p>`, 0);
-var root_6 = _$_.template(`<button class="increment">increment</button><!>`, 1, 2);
+var root_7 = _$_.template(`<p class=loading>loading...`);
+var root_6 = _$_.template(`<button class=increment>increment</button><!>`, 1, 2);
 var root_5 = _$_.template(`<!>`, 1, 1);
 
 function AsyncWithServerCall_render(__anchor, __block) {
-	const count = _$_.track(0, __block, '14891754');
+	const count = _$_.track(0, __block, '5p4g2c');
 	var fragment_2 = root_5();
 	var node_3 = _$_.first_child_frag(fragment_2);
 
@@ -117,14 +117,14 @@ function AsyncWithServerCall_render(__anchor, __block) {
 
 AsyncWithServerCall[_$_.$r] = AsyncWithServerCall_render;
 
-var root_8 = _$_.template(`<p class="result"> </p>`, 0);
-var root_9 = _$_.template(`<p class="loading">loading...</p>`, 0);
+var root_8 = _$_.template(`<p class=result> `);
+var root_9 = _$_.template(`<p class=loading>loading...`);
 
 function AsyncSimpleValue_render(__anchor, __block) {
 	_$_.try(
 		__anchor,
 		(__anchor) => {
-			const data = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('hydrated value')), __block, 'f325448a');
+			const data = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('hydrated value')), __block, '1vgpoju');
 			var p_4 = root_8();
 
 			{
@@ -148,14 +148,14 @@ function AsyncSimpleValue_render(__anchor, __block) {
 
 AsyncSimpleValue[_$_.$r] = AsyncSimpleValue_render;
 
-var root_10 = _$_.template(`<span class="count"> </span>`, 0);
-var root_11 = _$_.template(`<span class="pending">...</span>`, 0);
+var root_10 = _$_.template(`<span class=count> `);
+var root_11 = _$_.template(`<span class=pending>...`);
 
 function AsyncNumericValue_render(__anchor, __block) {
 	_$_.try(
 		__anchor,
 		(__anchor) => {
-			const count = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(42)), __block, 'ab8199a0');
+			const count = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(42)), __block, '1bl4m1s');
 			var span = root_10();
 
 			{
@@ -179,14 +179,14 @@ function AsyncNumericValue_render(__anchor, __block) {
 
 AsyncNumericValue[_$_.$r] = AsyncNumericValue_render;
 
-var root_12 = _$_.template(`<div class="user"><span class="name"> </span><span class="age"> </span></div>`, 0);
-var root_13 = _$_.template(`<div class="loading">loading user...</div>`, 0);
+var root_12 = _$_.template(`<div class=user><span class=name> </span><span class=age> `);
+var root_13 = _$_.template(`<div class=loading>loading user...`);
 
 function AsyncObjectValue_render(__anchor, __block) {
 	_$_.try(
 		__anchor,
 		(__anchor) => {
-			const user = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve({ name: 'Alice', age: 30 })), __block, 'fb7ad40b');
+			const user = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve({ name: 'Alice', age: 30 })), __block, '1xrym8b');
 			var div = root_12();
 
 			{
@@ -223,15 +223,15 @@ function AsyncObjectValue_render(__anchor, __block) {
 
 AsyncObjectValue[_$_.$r] = AsyncObjectValue_render;
 
-var root_14 = _$_.template(`<div class="multi"><span class="first"> </span><span class="second"> </span></div>`, 0);
-var root_15 = _$_.template(`<div class="loading">loading...</div>`, 0);
+var root_14 = _$_.template(`<div class=multi><span class=first> </span><span class=second> `);
+var root_15 = _$_.template(`<div class=loading>loading...`);
 
 function AsyncMultipleValues_render(__anchor, __block) {
 	_$_.try(
 		__anchor,
 		(__anchor) => {
-			const first = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('alpha')), __block, '99982de5');
-			const second = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('beta')), __block, '1dea4c85');
+			const first = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('alpha')), __block, '16m7mxx');
+			const second = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('beta')), __block, '8atc3p');
 			var div_2 = root_14();
 
 			{
@@ -268,15 +268,15 @@ function AsyncMultipleValues_render(__anchor, __block) {
 
 AsyncMultipleValues[_$_.$r] = AsyncMultipleValues_render;
 
-var root_16 = _$_.template(`<p class="result"> </p>`, 0);
-var root_17 = _$_.template(`<p class="error"> </p>`, 0);
-var root_18 = _$_.template(`<p class="loading">loading...</p>`, 0);
+var root_16 = _$_.template(`<p class=result> `);
+var root_17 = _$_.template(`<p class=error> `);
+var root_18 = _$_.template(`<p class=loading>loading...`);
 
 function AsyncWithCatch_render(__anchor, __block) {
 	_$_.try(
 		__anchor,
 		(__anchor) => {
-			const data = _$_.track_async(() => _$_.with_scope(__block, () => Promise.reject(new Error('fetch failed'))), __block, 'c9d12acf');
+			const data = _$_.track_async(() => _$_.with_scope(__block, () => Promise.reject(new Error('fetch failed'))), __block, '1jzw72n');
 			var p_6 = root_16();
 
 			{
@@ -311,14 +311,14 @@ function AsyncWithCatch_render(__anchor, __block) {
 
 AsyncWithCatch[_$_.$r] = AsyncWithCatch_render;
 
-var root_19 = _$_.template(`<p class="result"> </p>`, 0);
-var root_20 = _$_.template(`<p class="pending">loading...</p>`, 0);
+var root_19 = _$_.template(`<p class=result> `);
+var root_20 = _$_.template(`<p class=pending>loading...`);
 
 function ChildWithError_render(__anchor, __block) {
 	_$_.try(
 		__anchor,
 		(__anchor) => {
-			const data = _$_.track_async(() => _$_.with_scope(__block, () => Promise.reject(new Error('child error'))), __block, 'cdd1adb8');
+			const data = _$_.track_async(() => _$_.with_scope(__block, () => Promise.reject(new Error('child error'))), __block, '1l3vago');
 			var p_9 = root_19();
 
 			{
@@ -342,7 +342,7 @@ function ChildWithError_render(__anchor, __block) {
 
 ChildWithError[_$_.$r] = ChildWithError_render;
 
-var root_21 = _$_.template(`<p class="parent-error"> </p>`, 0);
+var root_21 = _$_.template(`<p class=parent-error> `);
 
 function ParentWithCatch_render(__anchor, __block) {
 	_$_.try(
@@ -369,10 +369,10 @@ function ParentWithCatch_render(__anchor, __block) {
 
 ParentWithCatch[_$_.$r] = ParentWithCatch_render;
 
-var root_22 = _$_.template(`<p class="result"> </p>`, 0);
+var root_22 = _$_.template(`<p class=result> `);
 
 function ReactiveDependencyResult_render(__anchor, __block, { count }) {
-	const data = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(`count-${count.value}`)), __block, '18c43c3a');
+	const data = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(`count-${count.value}`)), __block, '6vdwe2');
 	var p_12 = root_22();
 
 	{
@@ -387,12 +387,12 @@ function ReactiveDependencyResult_render(__anchor, __block, { count }) {
 
 ReactiveDependencyResult[_$_.$r] = ReactiveDependencyResult_render;
 
-var root_25 = _$_.template(`<p class="loading">loading...</p>`, 0);
-var root_24 = _$_.template(`<button class="increment">increment</button><!>`, 1, 2);
+var root_25 = _$_.template(`<p class=loading>loading...`);
+var root_24 = _$_.template(`<button class=increment>increment</button><!>`, 1, 2);
 var root_23 = _$_.template(`<!>`, 1, 1);
 
 function AsyncWithReactiveDependency_render(__anchor, __block) {
-	const count = _$_.track(0, __block, 'd5dcc1d3');
+	const count = _$_.track(0, __block, '1nc7lqr');
 	var fragment_4 = root_23();
 	var node_5 = _$_.first_child_frag(fragment_4);
 
@@ -427,12 +427,12 @@ function AsyncWithReactiveDependency_render(__anchor, __block) {
 
 AsyncWithReactiveDependency[_$_.$r] = AsyncWithReactiveDependency_render;
 
-var root_28 = _$_.template(`<p class="loading">loading...</p>`, 0);
-var root_27 = _$_.template(`<button class="increment">increment</button><!>`, 1, 2);
+var root_28 = _$_.template(`<p class=loading>loading...`);
+var root_27 = _$_.template(`<button class=increment>increment</button><!>`, 1, 2);
 var root_26 = _$_.template(`<!>`, 1, 1);
 
 function AsyncWithReadOnlyDependency_render(__anchor, __block) {
-	const count = _$_.track(0, __block, '75a97b64');
+	const count = _$_.track(0, __block, 'wnak4k');
 	var fragment_6 = root_26();
 	var node_7 = _$_.first_child_frag(fragment_6);
 
@@ -449,7 +449,7 @@ function AsyncWithReadOnlyDependency_render(__anchor, __block) {
 		_$_.try(
 			node_6,
 			(__anchor) => {
-				_$_.render_component(ReactiveDependencyResult, __anchor, { count: _$_.with_scope(__block, () => count.readOnly()) });
+				_$_.render_component(ReactiveDependencyResult, __anchor, { count: _$_.track_read_only(count, __block) });
 			},
 			null,
 			(__anchor) => {
@@ -467,7 +467,7 @@ function AsyncWithReadOnlyDependency_render(__anchor, __block) {
 
 AsyncWithReadOnlyDependency[_$_.$r] = AsyncWithReadOnlyDependency_render;
 
-import { track, trackAsync } from 'ripple';
+import { track, trackAsync, trackReadOnly } from 'ripple';
 import { Money } from '../fixtures/money.js';
 
 export const transport = {

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<p class="root-pending">root loading...</p>`, 0);
+var root = _$_.template(`<p class=root-pending>root loading...`);
 
 function RootPending_render(__anchor, __block) {
 	var p = root();
@@ -11,7 +11,7 @@ function RootPending_render(__anchor, __block) {
 
 RootPending[_$_.$r] = RootPending_render;
 
-var root_1 = _$_.template(`<section class="root-catch"><p class="root-error"> </p><button class="root-reset">retry</button></section>`, 0);
+var root_1 = _$_.template(`<section class=root-catch><p class=root-error> </p><button class=root-reset>retry`);
 
 function RootCatch_render(__anchor, __block, { error, reset }) {
 	var section = root_1();
@@ -36,7 +36,7 @@ function RootCatch_render(__anchor, __block, { error, reset }) {
 
 RootCatch[_$_.$r] = RootCatch_render;
 
-var root_2 = _$_.template(`<p>should not render</p>`, 0);
+var root_2 = _$_.template(`<p>should not render`);
 
 function RootThrows_render(__anchor, __block) {
 	throw _$_.with_scope(__block, () => new Error('root exploded'));
@@ -48,10 +48,10 @@ function RootThrows_render(__anchor, __block) {
 
 RootThrows[_$_.$r] = RootThrows_render;
 
-var root_3 = _$_.template(`<p class="root-async-value"> </p>`, 0);
+var root_3 = _$_.template(`<p class=root-async-value> `);
 
 function RootAsyncDirect_render(__anchor, __block) {
-	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('root async value')), __block, 'd6bf9e33');
+	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('root async value')), __block, '1nl29mb');
 	var p_3 = root_3();
 
 	{
@@ -66,10 +66,10 @@ function RootAsyncDirect_render(__anchor, __block) {
 
 RootAsyncDirect[_$_.$r] = RootAsyncDirect_render;
 
-var root_4 = _$_.template(`<p class="root-async-value"> </p>`, 0);
+var root_4 = _$_.template(`<p class=root-async-value> `);
 
 function RootAsyncRejects_render(__anchor, __block) {
-	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.reject(new Error('root async failed'))), __block, 'd2fe7b64');
+	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.reject(new Error('root async failed'))), __block, '1mjk6zo');
 	var p_4 = root_4();
 
 	{
@@ -84,7 +84,7 @@ function RootAsyncRejects_render(__anchor, __block) {
 
 RootAsyncRejects[_$_.$r] = RootAsyncRejects_render;
 
-var root_5 = _$_.template(`<p class="loading">loading...</p>`, 0);
+var root_5 = _$_.template(`<p class=loading>loading...`);
 
 function AsyncListInTryPending_render(__anchor, __block) {
 	_$_.try(
@@ -104,11 +104,11 @@ function AsyncListInTryPending_render(__anchor, __block) {
 
 AsyncListInTryPending[_$_.$r] = AsyncListInTryPending_render;
 
-var root_7 = _$_.template(`<li> </li>`, 0);
-var root_6 = _$_.template(`<ul class="items"></ul>`, 0);
+var root_7 = _$_.template(`<li> `);
+var root_6 = _$_.template(`<ul class=items>`);
 
 function AsyncList_render(__anchor, __block) {
-	const items = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(['alpha', 'beta', 'gamma'])), __block, 'b3d31627');
+	const items = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(['alpha', 'beta', 'gamma'])), __block, '1dw7tpj');
 	var ul = root_6();
 
 	{
@@ -138,8 +138,8 @@ function AsyncList_render(__anchor, __block) {
 
 AsyncList[_$_.$r] = AsyncList_render;
 
-var root_10 = _$_.template(`<div class="loading">loading async content</div>`, 0);
-var root_9 = _$_.template(`<div class="before">before</div><!>`, 1, 2);
+var root_10 = _$_.template(`<div class=loading>loading async content`);
+var root_9 = _$_.template(`<div class=before>before</div><!>`, 1, 2);
 var root_8 = _$_.template(`<!>`, 1, 1);
 
 function AsyncTryWithLeadingSibling_render(__anchor, __block) {
@@ -172,10 +172,10 @@ function AsyncTryWithLeadingSibling_render(__anchor, __block) {
 
 AsyncTryWithLeadingSibling[_$_.$r] = AsyncTryWithLeadingSibling_render;
 
-var root_11 = _$_.template(`<div class="resolved"> </div>`, 0);
+var root_11 = _$_.template(`<div class=resolved> `);
 
 function AsyncContent_render(__anchor, __block) {
-	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('ready')), __block, '15ea8758');
+	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('ready')), __block, '62wwns');
 	var div_2 = root_11();
 
 	{

package/tests/hydration/compiled/client/typed-text.js

@@ -1,26 +1,27 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root_1 = _$_.template(`<div class="typed-run"> <span>tail</span></div><p class="typed-number"> </p><button>update</button>`, 1, 3);
+var root_1 = _$_.template(`<div class=typed-run> <span>tail</span></div><p class=typed-number></p><button>update`, 1, 3);
 
 function render(__prev) {
-	var __a = 'value: ' + (__prev._row.value.label + String(__prev._row.value.count ?? ''));
+	var __a = 'value: ' + (__prev._a.value.label + String(__prev._a.value.count ?? ''));
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression, __prev.a = __a);
+		_$_.set_text(__prev._b, __prev.a = __a);
 	}
 
-	var __b = (0, __prev._row.value.count);
+	var __b = (0, __prev._a.value.count);
 
 	if (__prev.b !== __b) {
-		_$_.set_text(__prev._expression_1, __prev.b = __b);
+		_$_.set_text_content(__prev._c, __b, __prev.b);
+		__prev.b = __b;
 	}
 }
 
 var root = _$_.template(`<!>`, 1, 1);
 
 function TypedText_render(__anchor, __block) {
-	const row = _$_.track({ label: '<first>', count: 2 }, __block, '9bf2304a');
+	const row = _$_.track({ label: '<first>', count: 2 }, __block, '179p9ai');
 	var fragment = root();
 	var node = _$_.first_child_frag(fragment);
 
@@ -35,25 +36,13 @@ function TypedText_render(__anchor, __block) {
 		}
 
 		var p = _$_.hydrating ? _$_.hydrate_sibling() : div.nextSibling;
-
-		{
-			var expression_1 = _$_.hydrating ? _$_.hydrate_text() : p.firstChild;
-		}
-
 		var button = _$_.hydrating ? _$_.hydrate_sibling() : p.nextSibling;
 
 		button.__click = () => {
 			row.value = { label: '&next', count: 3n };
 		};
 
-		_$_.render(render, {
-			a: ' ',
-			b: ' ',
-			_row: row,
-			_expression: expression,
-			_expression_1: expression_1
-		});
-
+		_$_.render(render, { a: ' ', b: '', _a: row, _b: expression, _c: p });
 		_$_.append(__anchor, fragment_1);
 	}));
 

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

@@ -474,7 +474,7 @@ export function DynamicArrayFromCall() {
 
 export function DynamicArrayFromTrack() {
 	return _$_.tsrx_element(() => {
-		const items = _$_.track(['start:', ['one', 2], true, null, false, ':end'], 'b5de6402');
+		const items = _$_.track(['start:', ['one', 2], true, null, false, ':end'], '1egmw3m');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -673,7 +673,7 @@ function TypedTextProp({ children }) {
 
 export function TextPropWithToggle() {
 	return _$_.tsrx_element(() => {
-		const show = _$_.track(false, '1ba81c3b');
+		const show = _$_.track(false, '7o96bf');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -686,7 +686,7 @@ export function TextPropWithToggle() {
 
 				const args = [
 					{
-						children: _$_.normalize_children(_$_.track(() => show.value ? 'hello' : '', '649e2af0'))
+						children: _$_.normalize_children(_$_.track(() => show.value ? 'hello' : '', 'rx1khc'))
 					}
 				];
 
@@ -703,7 +703,7 @@ export function TextPropWithToggle() {
 
 export function TypedTextPropWithToggle() {
 	return _$_.tsrx_element(() => {
-		const show = _$_.track(false, 'ba719d47');
+		const show = _$_.track(false, '1fqc2fb');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -716,7 +716,7 @@ export function TypedTextPropWithToggle() {
 
 				const args = [
 					{
-						children: _$_.normalize_children(_$_.track(() => show.value ? 'hello' : '', '6fb091f9'))
+						children: _$_.normalize_children(_$_.track(() => show.value ? 'hello' : '', 'uzmy9l'))
 					}
 				];
 
@@ -1067,7 +1067,7 @@ export function FragmentLeadsWithPrimitiveCall() {
 
 export function PrimitiveTextCalls() {
 	return _$_.tsrx_element(() => {
-		const count = _$_.track(2, 'eea72017');
+		const count = _$_.track(2, '1u7u49j');
 
 		_$_.regular_block(() => {
 			let __out = '';

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

@@ -5,20 +5,12 @@ import { track } from 'ripple/server';
 
 export function ClickCounter() {
 	return _$_.tsrx_element(() => {
-		const count = _$_.track(0, 'a070e3a7');
+		const count = _$_.track(0, '18illt3');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div><button class="increment">Increment</button><span class="count">';
-
-			{
-				_$_.output_push(__out);
-				__out = '';
-				_$_.render_expression(count.value);
-			}
-
-			__out += '</span></div>';
+			__out += '<div><button class="increment">Increment</button><span class="count">' + _$_.escape(count.value) + '</span></div>';
 			_$_.output_push(__out);
 		});
 	});
@@ -26,20 +18,12 @@ export function ClickCounter() {
 
 export function IncrementDecrement() {
 	return _$_.tsrx_element(() => {
-		const count = _$_.track(0, '87fcabdd');
+		const count = _$_.track(0, '11qc3q5');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div><button class="decrement">-</button><span class="count">';
-
-			{
-				_$_.output_push(__out);
-				__out = '';
-				_$_.render_expression(count.value);
-			}
-
-			__out += '</span><button class="increment">+</button></div>';
+			__out += '<div><button class="decrement">-</button><span class="count">' + _$_.escape(count.value) + '</span><button class="increment">+</button></div>';
 			_$_.output_push(__out);
 		});
 	});
@@ -47,29 +31,13 @@ export function IncrementDecrement() {
 
 export function MultipleEvents() {
 	return _$_.tsrx_element(() => {
-		const clicks = _$_.track(0, '41b9f0b0');
-		const hovers = _$_.track(0, '72789f75');
+		const clicks = _$_.track(0, 'i8ishc');
+		const hovers = _$_.track(0, 'vrf59x');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div><button class="target">Target</button><span class="clicks">';
-
-			{
-				_$_.output_push(__out);
-				__out = '';
-				_$_.render_expression(clicks.value);
-			}
-
-			__out += '</span><span class="hovers">';
-
-			{
-				_$_.output_push(__out);
-				__out = '';
-				_$_.render_expression(hovers.value);
-			}
-
-			__out += '</span></div>';
+			__out += '<div><button class="target">Target</button><span class="clicks">' + _$_.escape(clicks.value) + '</span><span class="hovers">' + _$_.escape(hovers.value) + '</span></div>';
 			_$_.output_push(__out);
 		});
 	});
@@ -77,8 +45,8 @@ export function MultipleEvents() {
 
 export function MultiStateUpdate() {
 	return _$_.tsrx_element(() => {
-		const count = _$_.track(0, '5a375160');
-		const lastAction = _$_.track('none', '3ceeb88c');
+		const count = _$_.track(0, 'p155r4');
+		const lastAction = _$_.track('none', 'gwmyks');
 
 		const handleClick = () => {
 			count.value++;
@@ -88,15 +56,7 @@ export function MultiStateUpdate() {
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div><button class="btn">Click</button><span class="count">';
-
-			{
-				_$_.output_push(__out);
-				__out = '';
-				_$_.render_expression(count.value);
-			}
-
-			__out += '</span><span class="action">';
+			__out += '<div><button class="btn">Click</button><span class="count">' + _$_.escape(count.value) + '</span><span class="action">';
 
 			{
 				_$_.output_push(__out);
@@ -112,7 +72,7 @@ export function MultiStateUpdate() {
 
 export function ToggleButton() {
 	return _$_.tsrx_element(() => {
-		const isOn = _$_.track(false, 'be823ec7');
+		const isOn = _$_.track(false, '1guxsxz');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -136,7 +96,7 @@ export function ChildButton(props) {
 
 export function ParentWithChildButton() {
 	return _$_.tsrx_element(() => {
-		const count = _$_.track(0, 'dcc2e0f9');
+		const count = _$_.track(0, '1p94et5');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -160,15 +120,7 @@ export function ParentWithChildButton() {
 				_$_.render_component(comp, ...args);
 			}
 
-			__out += '<span class="count">';
-
-			{
-				_$_.output_push(__out);
-				__out = '';
-				_$_.render_expression(count.value);
-			}
-
-			__out += '</span></div>';
+			__out += '<span class="count">' + _$_.escape(count.value) + '</span></div>';
 			_$_.output_push(__out);
 		});
 	});