ripple 0.2.216 → 0.3.1

package/tests/client/url-search-params/url-search-params.mutation.test.ripple

@@ -1,9 +1,9 @@
-import { flushSync, track, TrackedURL, TrackedURLSearchParams } from 'ripple';
+import { flushSync } from 'ripple';
 
-describe('TrackedURLSearchParams > mutation', () => {
+describe('RippleURLSearchParams > mutation', () => {
 	it('handles append operation with reactivity', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar');
+			const params = #ripple.urlSearchParams('foo=bar');
 
 			<button onClick={() => params.append('baz', 'qux')}>{'append'}</button>
 			<pre>{params.toString()}</pre>
@@ -28,8 +28,8 @@ describe('TrackedURLSearchParams > mutation', () => {
 
 	it('handles append with multiple values for same key', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar');
-			let allFoo = track(() => params.getAll('foo'));
+			const params = #ripple.urlSearchParams('foo=bar');
+			let allFoo = #ripple.track(() => params.getAll('foo'));
 
 			<button onClick={() => params.append('foo', 'baz')}>{'append foo'}</button>
 			<pre>{params.toString()}</pre>
@@ -54,7 +54,7 @@ describe('TrackedURLSearchParams > mutation', () => {
 
 	it('handles delete operation with reactivity', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar&baz=qux');
+			const params = #ripple.urlSearchParams('foo=bar&baz=qux');
 
 			<button onClick={() => params.delete('foo')}>{'delete foo'}</button>
 			<pre>{params.toString()}</pre>
@@ -82,7 +82,7 @@ describe('TrackedURLSearchParams > mutation', () => {
 
 	it('handles delete with specific value', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar&foo=baz&foo=qux');
+			const params = #ripple.urlSearchParams('foo=bar&foo=baz&foo=qux');
 
 			<button onClick={() => params.delete('foo', 'baz')}>{'delete foo=baz'}</button>
 			<pre>{params.toString()}</pre>
@@ -107,8 +107,8 @@ describe('TrackedURLSearchParams > mutation', () => {
 
 	it('handles delete when key does not exist', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar');
-			let reactiveSize = track(() => params.size);
+			const params = #ripple.urlSearchParams('foo=bar');
+			let reactiveSize = #ripple.track(() => params.size);
 
 			<button onClick={() => params.delete('nonexistent')}>{'delete nonexistent'}</button>
 			<pre>{params.toString()}</pre>
@@ -133,7 +133,7 @@ describe('TrackedURLSearchParams > mutation', () => {
 
 	it('handles set operation with reactivity', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar');
+			const params = #ripple.urlSearchParams('foo=bar');
 
 			<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
 			<button onClick={() => params.set('baz', 'qux')}>{'add baz'}</button>
@@ -167,8 +167,8 @@ describe('TrackedURLSearchParams > mutation', () => {
 
 	it('handles set with multiple existing values', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar&foo=baz&foo=qux');
-			let allFoo = track(() => params.getAll('foo'));
+			const params = #ripple.urlSearchParams('foo=bar&foo=baz&foo=qux');
+			let allFoo = #ripple.track(() => params.getAll('foo'));
 
 			<button onClick={() => params.set('foo', 'single')}>{'set foo'}</button>
 			<pre>{params.toString()}</pre>
@@ -193,8 +193,8 @@ describe('TrackedURLSearchParams > mutation', () => {
 
 	it('handles set when value is the same', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar');
-			let reactiveString = track(() => params.toString());
+			const params = #ripple.urlSearchParams('foo=bar');
+			let reactiveString = #ripple.track(() => params.toString());
 
 			<button onClick={() => params.set('foo', 'bar')}>{'set same value'}</button>
 			<pre>{@reactiveString}</pre>
@@ -218,7 +218,7 @@ describe('TrackedURLSearchParams > mutation', () => {
 
 	it('handles sort operation with reactivity', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('z=last&a=first&m=middle');
+			const params = #ripple.urlSearchParams('z=last&a=first&m=middle');
 
 			<button onClick={() => params.sort()}>{'sort'}</button>
 			<pre>{params.toString()}</pre>
@@ -240,7 +240,7 @@ describe('TrackedURLSearchParams > mutation', () => {
 
 	it('handles clearing all params via delete', () => {
 		component URLTest() {
-			const url = new TrackedURL('https://example.com?foo=bar&baz=qux');
+			const url = #ripple.url('https://example.com?foo=bar&baz=qux');
 			const params = url.searchParams;
 
 			<button
@@ -275,7 +275,7 @@ describe('TrackedURLSearchParams > mutation', () => {
 
 	it('handles multiple operations in sequence', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams();
+			const params = #ripple.urlSearchParams();
 
 			<button
 				onClick={() => {
@@ -311,8 +311,8 @@ describe('TrackedURLSearchParams > mutation', () => {
 
 	it('handles duplicate keys with different values', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams();
-			let tags = track(() => params.getAll('tag'));
+			const params = #ripple.urlSearchParams();
+			let tags = #ripple.track(() => params.getAll('tag'));
 
 			<button onClick={() => params.append('tag', 'javascript')}>{'add js'}</button>
 			<button onClick={() => params.append('tag', 'typescript')}>{'add ts'}</button>

package/tests/client/url-search-params/url-search-params.retrieval.test.ripple

@@ -1,11 +1,11 @@
-import { flushSync, track, TrackedURLSearchParams } from 'ripple';
+import { flushSync } from 'ripple';
 
-describe('TrackedURLSearchParams > retrieval', () => {
+describe('RippleURLSearchParams > retrieval', () => {
 	it('handles get operation with reactivity', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar&baz=qux');
-			let foo = track(() => params.get('foo'));
-			let baz = track(() => params.get('baz'));
+			const params = #ripple.urlSearchParams('foo=bar&baz=qux');
+			let foo = #ripple.track(() => params.get('foo'));
+			let baz = #ripple.track(() => params.get('baz'));
 
 			<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
 			<pre>{@foo}</pre>
@@ -30,8 +30,8 @@ describe('TrackedURLSearchParams > retrieval', () => {
 
 	it('handles get for nonexistent key', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar');
-			let nonexistent = track(() => params.get('nonexistent'));
+			const params = #ripple.urlSearchParams('foo=bar');
+			let nonexistent = #ripple.track(() => params.get('nonexistent'));
 
 			<pre>{String(@nonexistent)}</pre>
 		}
@@ -43,8 +43,8 @@ describe('TrackedURLSearchParams > retrieval', () => {
 
 	it('handles getAll operation with reactivity', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar&foo=baz');
-			let allFoo = track(() => params.getAll('foo'));
+			const params = #ripple.urlSearchParams('foo=bar&foo=baz');
+			let allFoo = #ripple.track(() => params.getAll('foo'));
 
 			<button onClick={() => params.append('foo', 'qux')}>{'append foo'}</button>
 			<pre>{JSON.stringify(@allFoo)}</pre>
@@ -66,9 +66,9 @@ describe('TrackedURLSearchParams > retrieval', () => {
 
 	it('handles has operation with reactivity', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar');
-			let hasFoo = track(() => params.has('foo'));
-			let hasBaz = track(() => params.has('baz'));
+			const params = #ripple.urlSearchParams('foo=bar');
+			let hasFoo = #ripple.track(() => params.has('foo'));
+			let hasBaz = #ripple.track(() => params.has('baz'));
 
 			<button onClick={() => params.append('baz', 'qux')}>{'add baz'}</button>
 			<button onClick={() => params.delete('foo')}>{'delete foo'}</button>
@@ -102,9 +102,9 @@ describe('TrackedURLSearchParams > retrieval', () => {
 
 	it('handles has with specific value', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar&foo=baz');
-			let hasBarValue = track(() => params.has('foo', 'bar'));
-			let hasQuxValue = track(() => params.has('foo', 'qux'));
+			const params = #ripple.urlSearchParams('foo=bar&foo=baz');
+			let hasBarValue = #ripple.track(() => params.has('foo', 'bar'));
+			let hasQuxValue = #ripple.track(() => params.has('foo', 'qux'));
 
 			<button onClick={() => params.append('foo', 'qux')}>{'add qux'}</button>
 			<pre>{@hasBarValue.toString()}</pre>
@@ -129,8 +129,8 @@ describe('TrackedURLSearchParams > retrieval', () => {
 
 	it('handles size property with reactivity', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar');
-			let size = track(() => params.size);
+			const params = #ripple.urlSearchParams('foo=bar');
+			let size = #ripple.track(() => params.size);
 
 			<button onClick={() => params.append('baz', 'qux')}>{'add'}</button>
 			<button onClick={() => params.delete('foo')}>{'delete'}</button>

package/tests/client/url-search-params/url-search-params.serialization.test.ripple

@@ -1,10 +1,10 @@
-import { flushSync, track, TrackedURLSearchParams } from 'ripple';
+import { flushSync } from 'ripple';
 
-describe('TrackedURLSearchParams > serialization', () => {
+describe('RippleURLSearchParams > serialization', () => {
 	it('handles toString method with reactivity', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams('foo=bar');
-			let string = track(() => params.toString());
+			const params = #ripple.urlSearchParams('foo=bar');
+			let string = #ripple.track(() => params.toString());
 
 			<button onClick={() => params.append('baz', 'qux')}>{'add'}</button>
 			<pre>{@string}</pre>
@@ -26,7 +26,7 @@ describe('TrackedURLSearchParams > serialization', () => {
 
 	it('handles special characters encoding', () => {
 		component URLTest() {
-			const params = new TrackedURLSearchParams();
+			const params = #ripple.urlSearchParams();
 
 			<button onClick={() => params.set('key', 'value with spaces')}>{'add spaces'}</button>
 			<button onClick={() => params.set('special', '!@#$%^&*()')}>{'add special'}</button>

package/tests/client/url-search-params/url-search-params.tracked-url.test.ripple

@@ -1,9 +1,9 @@
-import { flushSync, TrackedURL } from 'ripple';
+import { flushSync } from 'ripple';
 
-describe('TrackedURLSearchParams > TrackedURL integration', () => {
-	it('integrates with TrackedURL', () => {
+describe('RippleURLSearchParams > RippleURL integration', () => {
+	it('integrates with RippleURL', () => {
 		component URLTest() {
-			const url = new TrackedURL('https://example.com?foo=bar');
+			const url = #ripple.url('https://example.com?foo=bar');
 			const params = url.searchParams;
 
 			<button onClick={() => params.append('baz', 'qux')}>{'add param'}</button>
@@ -31,7 +31,7 @@ describe('TrackedURLSearchParams > TrackedURL integration', () => {
 
 	it('handles empty search string in URL', () => {
 		component URLTest() {
-			const url = new TrackedURL('https://example.com');
+			const url = #ripple.url('https://example.com');
 			const params = url.searchParams;
 
 			<button onClick={() => params.append('foo', 'bar')}>{'add first param'}</button>

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

@@ -9,12 +9,10 @@ var root_4 = _$_.template(`<div><button class="toggle"> </button></div>`, 0);
 var root_5 = _$_.template(`<button class="child-btn"> </button>`, 0);
 var root_6 = _$_.template(`<div><!><span class="count"> </span></div>`, 0);
 
-import { track } from 'ripple';
-
 export function ClickCounter(__anchor, _, __block) {
 	_$_.push_component();
 
-	let count = track(0, void 0, void 0, __block);
+	let count = _$_.track(0, void 0, void 0, __block);
 	var div_1 = root();
 
 	{
@@ -44,7 +42,7 @@ export function ClickCounter(__anchor, _, __block) {
 export function IncrementDecrement(__anchor, _, __block) {
 	_$_.push_component();
 
-	let count = track(0, void 0, void 0, __block);
+	let count = _$_.track(0, void 0, void 0, __block);
 	var div_2 = root_1();
 
 	{
@@ -80,8 +78,8 @@ export function IncrementDecrement(__anchor, _, __block) {
 export function MultipleEvents(__anchor, _, __block) {
 	_$_.push_component();
 
-	let clicks = track(0, void 0, void 0, __block);
-	let hovers = track(0, void 0, void 0, __block);
+	let clicks = _$_.track(0, void 0, void 0, __block);
+	let hovers = _$_.track(0, void 0, void 0, __block);
 	var div_3 = root_2();
 
 	{
@@ -136,8 +134,8 @@ export function MultipleEvents(__anchor, _, __block) {
 export function MultiStateUpdate(__anchor, _, __block) {
 	_$_.push_component();
 
-	let count = track(0, void 0, void 0, __block);
-	let lastAction = track('none', void 0, void 0, __block);
+	let count = _$_.track(0, void 0, void 0, __block);
+	let lastAction = _$_.track('none', void 0, void 0, __block);
 
 	const handleClick = () => {
 		_$_.update(count);
@@ -192,7 +190,7 @@ export function MultiStateUpdate(__anchor, _, __block) {
 export function ToggleButton(__anchor, _, __block) {
 	_$_.push_component();
 
-	let isOn = track(false, void 0, void 0, __block);
+	let isOn = _$_.track(false, void 0, void 0, __block);
 	var div_5 = root_4();
 
 	{
@@ -241,7 +239,7 @@ export function ChildButton(__anchor, props, __block) {
 export function ParentWithChildButton(__anchor, _, __block) {
 	_$_.push_component();
 
-	let count = track(0, void 0, void 0, __block);
+	let count = _$_.track(0, void 0, void 0, __block);
 	var div_6 = root_6();
 
 	{
@@ -253,7 +251,6 @@ export function ParentWithChildButton(__anchor, _, __block) {
 				onClick: () => {
 					_$_.update(count);
 				},
-
 				label: "Click me"
 			},
 			_$_.active_block

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

@@ -64,8 +64,6 @@ var root_58 = _$_.template(`<button class="swap">Swap First and Last</button><ul
 var root_61 = _$_.template(`<li> </li>`, 0);
 var root_60 = _$_.template(`<button class="reverse">Reverse</button><ul></ul>`, 1, 2);
 
-import { track } from 'ripple';
-
 export function StaticForLoop(__anchor, _, __block) {
 	_$_.push_component();
 
@@ -177,7 +175,7 @@ export function KeyedForLoop(__anchor, _, __block) {
 export function ReactiveForLoopAdd(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track(['A', 'B'], void 0, void 0, __block);
+	let items = _$_.track(['A', 'B'], void 0, void 0, __block);
 	var fragment = root_6();
 	var button_1 = _$_.first_child_frag(fragment);
 
@@ -217,7 +215,7 @@ export function ReactiveForLoopAdd(__anchor, _, __block) {
 export function ReactiveForLoopRemove(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track(['A', 'B', 'C'], void 0, void 0, __block);
+	let items = _$_.track(['A', 'B', 'C'], void 0, void 0, __block);
 	var fragment_1 = root_8();
 	var button_2 = _$_.first_child_frag(fragment_1);
 
@@ -257,7 +255,7 @@ export function ReactiveForLoopRemove(__anchor, _, __block) {
 export function ForLoopInteractive(__anchor, _, __block) {
 	_$_.push_component();
 
-	let counts = track([0, 0, 0], void 0, void 0, __block);
+	let counts = _$_.track([0, 0, 0], void 0, void 0, __block);
 	var div_1 = root_10();
 
 	{
@@ -464,7 +462,7 @@ export function ForLoopComplexObjects(__anchor, _, __block) {
 export function KeyedForLoopReorder(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track(
+	let items = _$_.track(
 		[
 			{ id: 1, name: 'First' },
 			{ id: 2, name: 'Second' },
@@ -531,7 +529,7 @@ export function KeyedForLoopReorder(__anchor, _, __block) {
 export function KeyedForLoopUpdate(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }], void 0, void 0, __block);
+	let items = _$_.track([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }], void 0, void 0, __block);
 	var fragment_3 = root_21();
 	var button_5 = _$_.first_child_frag(fragment_3);
 
@@ -588,7 +586,7 @@ export function KeyedForLoopUpdate(__anchor, _, __block) {
 export function ForLoopMixedOperations(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track(['A', 'B', 'C', 'D'], void 0, void 0, __block);
+	let items = _$_.track(['A', 'B', 'C', 'D'], void 0, void 0, __block);
 	var fragment_4 = root_23();
 	var button_6 = _$_.first_child_frag(fragment_4);
 
@@ -630,8 +628,8 @@ export function ForLoopMixedOperations(__anchor, _, __block) {
 export function ForLoopInsideIf(__anchor, _, __block) {
 	_$_.push_component();
 
-	let showList = track(true, void 0, void 0, __block);
-	let items = track(['X', 'Y', 'Z'], void 0, void 0, __block);
+	let showList = _$_.track(true, void 0, void 0, __block);
+	let items = _$_.track(['X', 'Y', 'Z'], void 0, void 0, __block);
 	var fragment_5 = root_25();
 	var button_7 = _$_.first_child_frag(fragment_5);
 
@@ -688,7 +686,7 @@ export function ForLoopInsideIf(__anchor, _, __block) {
 export function ForLoopEmptyToPopulated(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track([], void 0, void 0, __block);
+	let items = _$_.track([], void 0, void 0, __block);
 	var fragment_6 = root_28();
 	var button_9 = _$_.first_child_frag(fragment_6);
 
@@ -728,7 +726,7 @@ export function ForLoopEmptyToPopulated(__anchor, _, __block) {
 export function ForLoopPopulatedToEmpty(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track(['One', 'Two', 'Three'], void 0, void 0, __block);
+	let items = _$_.track(['One', 'Two', 'Three'], void 0, void 0, __block);
 	var fragment_7 = root_30();
 	var button_10 = _$_.first_child_frag(fragment_7);
 
@@ -768,7 +766,7 @@ export function ForLoopPopulatedToEmpty(__anchor, _, __block) {
 export function NestedForLoopReactive(__anchor, _, __block) {
 	_$_.push_component();
 
-	let grid = track([[1, 2], [3, 4]], void 0, void 0, __block);
+	let grid = _$_.track([[1, 2], [3, 4]], void 0, void 0, __block);
 	var fragment_8 = root_32();
 	var button_11 = _$_.first_child_frag(fragment_8);
 
@@ -844,7 +842,6 @@ export function ForLoopDeeplyNested(__anchor, _, __block) {
 		{
 			id: 'd1',
 			name: 'Engineering',
-
 			teams: [
 				{ id: 't1', name: 'Frontend', members: ['Alice', 'Bob'] },
 				{ id: 't2', name: 'Backend', members: ['Charlie'] }
@@ -977,7 +974,7 @@ export function ForLoopDeeplyNested(__anchor, _, __block) {
 export function ForLoopIndexUpdate(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track(['First', 'Second', 'Third'], void 0, void 0, __block);
+	let items = _$_.track(['First', 'Second', 'Third'], void 0, void 0, __block);
 	var fragment_9 = root_39();
 	var button_13 = _$_.first_child_frag(fragment_9);
 
@@ -1033,7 +1030,7 @@ export function ForLoopIndexUpdate(__anchor, _, __block) {
 export function KeyedForLoopWithIndex(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track(
+	let items = _$_.track(
 		[
 			{ id: 'a', value: 'Alpha' },
 			{ id: 'b', value: 'Beta' },
@@ -1106,7 +1103,7 @@ export function KeyedForLoopWithIndex(__anchor, _, __block) {
 export function ForLoopWithSiblings(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track(['A', 'B'], void 0, void 0, __block);
+	let items = _$_.track(['A', 'B'], void 0, void 0, __block);
 	var fragment_11 = root_43();
 	var div_13 = _$_.first_child_frag(fragment_11);
 
@@ -1197,7 +1194,7 @@ export function ForLoopItemState(__anchor, _, __block) {
 function TodoItem(__anchor, props, __block) {
 	_$_.push_component();
 
-	let done = track(false, void 0, void 0, __block);
+	let done = _$_.track(false, void 0, void 0, __block);
 	var div_16 = root_47();
 
 	{
@@ -1284,7 +1281,7 @@ export function ForLoopSingleItem(__anchor, _, __block) {
 export function ForLoopAddAtBeginning(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track(['B', 'C'], void 0, void 0, __block);
+	let items = _$_.track(['B', 'C'], void 0, void 0, __block);
 	var fragment_13 = root_50();
 	var button_16 = _$_.first_child_frag(fragment_13);
 
@@ -1326,7 +1323,7 @@ export function ForLoopAddAtBeginning(__anchor, _, __block) {
 export function ForLoopAddInMiddle(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track(['A', 'C'], void 0, void 0, __block);
+	let items = _$_.track(['A', 'C'], void 0, void 0, __block);
 	var fragment_14 = root_52();
 	var button_17 = _$_.first_child_frag(fragment_14);
 
@@ -1371,7 +1368,7 @@ export function ForLoopAddInMiddle(__anchor, _, __block) {
 export function ForLoopRemoveFromMiddle(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track(['A', 'B', 'C'], void 0, void 0, __block);
+	let items = _$_.track(['A', 'B', 'C'], void 0, void 0, __block);
 	var fragment_15 = root_54();
 	var button_18 = _$_.first_child_frag(fragment_15);
 
@@ -1449,7 +1446,7 @@ export function ForLoopLargeList(__anchor, _, __block) {
 export function ForLoopSwap(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track(['A', 'B', 'C', 'D'], void 0, void 0, __block);
+	let items = _$_.track(['A', 'B', 'C', 'D'], void 0, void 0, __block);
 	var fragment_16 = root_58();
 	var button_19 = _$_.first_child_frag(fragment_16);
 
@@ -1494,7 +1491,7 @@ export function ForLoopSwap(__anchor, _, __block) {
 export function ForLoopReverse(__anchor, _, __block) {
 	_$_.push_component();
 
-	let items = track(['A', 'B', 'C', 'D'], void 0, void 0, __block);
+	let items = _$_.track(['A', 'B', 'C', 'D'], void 0, void 0, __block);
 	var fragment_17 = root_60();
 	var button_20 = _$_.first_child_frag(fragment_17);
 

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

@@ -15,14 +15,12 @@ var root_11 = _$_.template(`<meta name="author" content="Test Author">`, 0);
 var root_10 = _$_.template(`<div>Content</div>`, 0);
 var root_12 = _$_.template(`<div>Styled content</div>`, 0);
 
-import { track } from 'ripple';
-
 export function StaticTitle(__anchor, _, __block) {
 	_$_.push_component();
 
 	var div_1 = root();
 
-	_$_.head('qwqurq', (__anchor) => {
+	_$_.head('df6gdi', (__anchor) => {
 		_$_.document.title = 'Static Test Title';
 	});
 
@@ -33,7 +31,7 @@ export function StaticTitle(__anchor, _, __block) {
 export function ReactiveTitle(__anchor, _, __block) {
 	_$_.push_component();
 
-	let title = track('Initial Title', void 0, void 0, __block);
+	let title = _$_.track('Initial Title', void 0, void 0, __block);
 	var div_2 = root_1();
 
 	{
@@ -46,7 +44,7 @@ export function ReactiveTitle(__anchor, _, __block) {
 		}
 	}
 
-	_$_.head('1h8nm28', (__anchor) => {
+	_$_.head('13wropz', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = _$_.get(title);
 		});
@@ -65,7 +63,7 @@ export function MultipleHeadElements(__anchor, _, __block) {
 
 	var div_3 = root_2();
 
-	_$_.head('9v67ol', (__anchor) => {
+	_$_.head('jbv4cs', (__anchor) => {
 		var fragment = root_3();
 
 		_$_.document.title = 'Page Title';
@@ -80,7 +78,7 @@ export function MultipleHeadElements(__anchor, _, __block) {
 export function ReactiveMetaTags(__anchor, _, __block) {
 	_$_.push_component();
 
-	let description = track('Initial description', void 0, void 0, __block);
+	let description = _$_.track('Initial description', void 0, void 0, __block);
 	var div_4 = root_4();
 
 	{
@@ -89,7 +87,7 @@ export function ReactiveMetaTags(__anchor, _, __block) {
 		_$_.pop(div_4);
 	}
 
-	_$_.head('166unm', (__anchor) => {
+	_$_.head('t794k2', (__anchor) => {
 		var meta_1 = root_5();
 
 		_$_.document.title = 'My Page';
@@ -108,7 +106,7 @@ export function ReactiveMetaTags(__anchor, _, __block) {
 export function TitleWithTemplate(__anchor, _, __block) {
 	_$_.push_component();
 
-	let name = track('World', void 0, void 0, __block);
+	let name = _$_.track('World', void 0, void 0, __block);
 	var div_5 = root_6();
 
 	{
@@ -117,7 +115,7 @@ export function TitleWithTemplate(__anchor, _, __block) {
 		_$_.pop(div_5);
 	}
 
-	_$_.head('3o3mh2', (__anchor) => {
+	_$_.head('betaue', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = `Hello ${_$_.get(name)}!`;
 		});
@@ -136,7 +134,7 @@ export function EmptyTitle(__anchor, _, __block) {
 
 	var div_6 = root_7();
 
-	_$_.head('kwo3k6', (__anchor) => {
+	_$_.head('11sq4o6', (__anchor) => {
 		_$_.document.title = '';
 	});
 
@@ -147,8 +145,8 @@ export function EmptyTitle(__anchor, _, __block) {
 export function ConditionalTitle(__anchor, _, __block) {
 	_$_.push_component();
 
-	let showPrefix = track(true, void 0, void 0, __block);
-	let title = track('Main Page', void 0, void 0, __block);
+	let showPrefix = _$_.track(true, void 0, void 0, __block);
+	let title = _$_.track('Main Page', void 0, void 0, __block);
 	var div_7 = root_8();
 
 	{
@@ -157,7 +155,7 @@ export function ConditionalTitle(__anchor, _, __block) {
 		_$_.pop(div_7);
 	}
 
-	_$_.head('c2i5xr', (__anchor) => {
+	_$_.head('xxkmhn', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = _$_.get(showPrefix) ? 'App - ' + _$_.get(title) : _$_.get(title);
 		});
@@ -174,7 +172,7 @@ export function ConditionalTitle(__anchor, _, __block) {
 export function ComputedTitle(__anchor, _, __block) {
 	_$_.push_component();
 
-	let count = track(0, void 0, void 0, __block);
+	let count = _$_.track(0, void 0, void 0, __block);
 	let prefix = 'Count: ';
 	var div_8 = root_9();
 
@@ -188,7 +186,7 @@ export function ComputedTitle(__anchor, _, __block) {
 		}
 	}
 
-	_$_.head('1h2z3z5', (__anchor) => {
+	_$_.head('1hj0can', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = prefix + _$_.get(count);
 		});
@@ -207,11 +205,11 @@ export function MultipleHeadBlocks(__anchor, _, __block) {
 
 	var div_9 = root_10();
 
-	_$_.head('14rv3le', (__anchor) => {
+	_$_.head('15ucmy3', (__anchor) => {
 		_$_.document.title = 'First Head';
 	});
 
-	_$_.head('1eh1mn5', (__anchor) => {
+	_$_.head('1xolofp', (__anchor) => {
 		var meta_2 = root_11();
 
 		_$_.append(__anchor, meta_2);
@@ -226,7 +224,7 @@ export function HeadWithStyle(__anchor, _, __block) {
 
 	var div_10 = root_12();
 
-	_$_.head('1dxk6yg', (__anchor) => {
+	_$_.head('q5et2p', (__anchor) => {
 		_$_.document.title = 'Styled Page';
 	});
 

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

@@ -7,8 +7,6 @@ var root_1 = _$_.template(`<div class="content"><!></div>`, 0);
 var root_4 = _$_.template(`<!>`, 1, 1);
 var root_3 = _$_.template(`<!>`, 1, 1);
 
-import { track } from 'ripple';
-
 export function Layout(__anchor, __props, __block) {
 	_$_.push_component();
 
@@ -33,7 +31,7 @@ export function Layout(__anchor, __props, __block) {
 export function Content(__anchor, _, __block) {
 	_$_.push_component();
 
-	let visible = track(true, void 0, void 0, __block);
+	let visible = _$_.track(true, void 0, void 0, __block);
 	var div_2 = root_1();
 
 	{