ripple 0.3.2 → 0.3.4

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

@@ -1,9 +1,9 @@
-import { flushSync } from 'ripple';
+import { RippleURL, RippleURLSearchParams, flushSync, track } from 'ripple';
 
 describe('RippleURLSearchParams > mutation', () => {
 	it('handles append operation with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar');
+			const params = RippleURLSearchParams('foo=bar');
 
 			<button onClick={() => params.append('baz', 'qux')}>{'append'}</button>
 			<pre>{params.toString()}</pre>
@@ -28,8 +28,8 @@ describe('RippleURLSearchParams > mutation', () => {
 
 	it('handles append with multiple values for same key', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar');
-			let allFoo = #ripple.track(() => params.getAll('foo'));
+			const params = RippleURLSearchParams('foo=bar');
+			let allFoo = track(() => params.getAll('foo'));
 
 			<button onClick={() => params.append('foo', 'baz')}>{'append foo'}</button>
 			<pre>{params.toString()}</pre>
@@ -54,7 +54,7 @@ describe('RippleURLSearchParams > mutation', () => {
 
 	it('handles delete operation with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar&baz=qux');
+			const params = RippleURLSearchParams('foo=bar&baz=qux');
 
 			<button onClick={() => params.delete('foo')}>{'delete foo'}</button>
 			<pre>{params.toString()}</pre>
@@ -82,7 +82,7 @@ describe('RippleURLSearchParams > mutation', () => {
 
 	it('handles delete with specific value', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar&foo=baz&foo=qux');
+			const params = RippleURLSearchParams('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('RippleURLSearchParams > mutation', () => {
 
 	it('handles delete when key does not exist', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar');
-			let reactiveSize = #ripple.track(() => params.size);
+			const params = RippleURLSearchParams('foo=bar');
+			let reactiveSize = track(() => params.size);
 
 			<button onClick={() => params.delete('nonexistent')}>{'delete nonexistent'}</button>
 			<pre>{params.toString()}</pre>
@@ -133,7 +133,7 @@ describe('RippleURLSearchParams > mutation', () => {
 
 	it('handles set operation with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar');
+			const params = RippleURLSearchParams('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('RippleURLSearchParams > mutation', () => {
 
 	it('handles set with multiple existing values', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar&foo=baz&foo=qux');
-			let allFoo = #ripple.track(() => params.getAll('foo'));
+			const params = RippleURLSearchParams('foo=bar&foo=baz&foo=qux');
+			let allFoo = track(() => params.getAll('foo'));
 
 			<button onClick={() => params.set('foo', 'single')}>{'set foo'}</button>
 			<pre>{params.toString()}</pre>
@@ -193,8 +193,8 @@ describe('RippleURLSearchParams > mutation', () => {
 
 	it('handles set when value is the same', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar');
-			let reactiveString = #ripple.track(() => params.toString());
+			const params = RippleURLSearchParams('foo=bar');
+			let reactiveString = track(() => params.toString());
 
 			<button onClick={() => params.set('foo', 'bar')}>{'set same value'}</button>
 			<pre>{@reactiveString}</pre>
@@ -218,7 +218,7 @@ describe('RippleURLSearchParams > mutation', () => {
 
 	it('handles sort operation with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('z=last&a=first&m=middle');
+			const params = RippleURLSearchParams('z=last&a=first&m=middle');
 
 			<button onClick={() => params.sort()}>{'sort'}</button>
 			<pre>{params.toString()}</pre>
@@ -240,7 +240,7 @@ describe('RippleURLSearchParams > mutation', () => {
 
 	it('handles clearing all params via delete', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com?foo=bar&baz=qux');
+			const url = RippleURL('https://example.com?foo=bar&baz=qux');
 			const params = url.searchParams;
 
 			<button
@@ -275,7 +275,7 @@ describe('RippleURLSearchParams > mutation', () => {
 
 	it('handles multiple operations in sequence', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams();
+			const params = RippleURLSearchParams();
 
 			<button
 				onClick={() => {
@@ -311,8 +311,8 @@ describe('RippleURLSearchParams > mutation', () => {
 
 	it('handles duplicate keys with different values', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams();
-			let tags = #ripple.track(() => params.getAll('tag'));
+			const params = RippleURLSearchParams();
+			let tags = 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 } from 'ripple';
+import { RippleURL, RippleURLSearchParams, flushSync, track } from 'ripple';
 
 describe('RippleURLSearchParams > retrieval', () => {
 	it('handles get operation with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar&baz=qux');
-			let foo = #ripple.track(() => params.get('foo'));
-			let baz = #ripple.track(() => params.get('baz'));
+			const params = RippleURLSearchParams('foo=bar&baz=qux');
+			let foo = track(() => params.get('foo'));
+			let baz = track(() => params.get('baz'));
 
 			<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
 			<pre>{@foo}</pre>
@@ -30,8 +30,8 @@ describe('RippleURLSearchParams > retrieval', () => {
 
 	it('handles get for nonexistent key', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar');
-			let nonexistent = #ripple.track(() => params.get('nonexistent'));
+			const params = RippleURLSearchParams('foo=bar');
+			let nonexistent = track(() => params.get('nonexistent'));
 
 			<pre>{String(@nonexistent)}</pre>
 		}
@@ -43,8 +43,8 @@ describe('RippleURLSearchParams > retrieval', () => {
 
 	it('handles getAll operation with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar&foo=baz');
-			let allFoo = #ripple.track(() => params.getAll('foo'));
+			const params = RippleURLSearchParams('foo=bar&foo=baz');
+			let allFoo = track(() => params.getAll('foo'));
 
 			<button onClick={() => params.append('foo', 'qux')}>{'append foo'}</button>
 			<pre>{JSON.stringify(@allFoo)}</pre>
@@ -66,9 +66,9 @@ describe('RippleURLSearchParams > retrieval', () => {
 
 	it('handles has operation with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar');
-			let hasFoo = #ripple.track(() => params.has('foo'));
-			let hasBaz = #ripple.track(() => params.has('baz'));
+			const params = RippleURLSearchParams('foo=bar');
+			let hasFoo = track(() => params.has('foo'));
+			let hasBaz = 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('RippleURLSearchParams > retrieval', () => {
 
 	it('handles has with specific value', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar&foo=baz');
-			let hasBarValue = #ripple.track(() => params.has('foo', 'bar'));
-			let hasQuxValue = #ripple.track(() => params.has('foo', 'qux'));
+			const params = RippleURLSearchParams('foo=bar&foo=baz');
+			let hasBarValue = track(() => params.has('foo', 'bar'));
+			let hasQuxValue = track(() => params.has('foo', 'qux'));
 
 			<button onClick={() => params.append('foo', 'qux')}>{'add qux'}</button>
 			<pre>{@hasBarValue.toString()}</pre>
@@ -129,8 +129,8 @@ describe('RippleURLSearchParams > retrieval', () => {
 
 	it('handles size property with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar');
-			let size = #ripple.track(() => params.size);
+			const params = RippleURLSearchParams('foo=bar');
+			let size = 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 } from 'ripple';
+import { RippleURL, RippleURLSearchParams, flushSync, track } from 'ripple';
 
 describe('RippleURLSearchParams > serialization', () => {
 	it('handles toString method with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar');
-			let string = #ripple.track(() => params.toString());
+			const params = RippleURLSearchParams('foo=bar');
+			let string = track(() => params.toString());
 
 			<button onClick={() => params.append('baz', 'qux')}>{'add'}</button>
 			<pre>{@string}</pre>
@@ -26,7 +26,7 @@ describe('RippleURLSearchParams > serialization', () => {
 
 	it('handles special characters encoding', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams();
+			const params = RippleURLSearchParams();
 
 			<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 } from 'ripple';
+import { RippleURL, flushSync } from 'ripple';
 
 describe('RippleURLSearchParams > RippleURL integration', () => {
 	it('integrates with RippleURL', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com?foo=bar');
+			const url = RippleURL('https://example.com?foo=bar');
 			const params = url.searchParams;
 
 			<button onClick={() => params.append('baz', 'qux')}>{'add param'}</button>
@@ -31,7 +31,7 @@ describe('RippleURLSearchParams > RippleURL integration', () => {
 
 	it('handles empty search string in URL', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com');
+			const url = RippleURL('https://example.com');
 			const params = url.searchParams;
 
 			<button onClick={() => params.append('foo', 'bar')}>{'add first param'}</button>

package/tests/hydration/build-components.js

@@ -25,19 +25,13 @@ const serverOutDir = join(__dirname, 'compiled', 'server');
  * @returns {string} - Transformed code with server-compatible imports
  */
 function transformServerImports(code) {
-	// Replace `import { track } from 'ripple'` with server version
-	// Replace `import { Portal } from 'ripple'` with server version
+	// Replace `import { ... } from 'ripple'` with server version
 	// Use 'ripple/server' which always points to the server runtime,
 	// bypassing the browser/default condition resolution
-	let transformed = code.replace(
-		/import\s*\{\s*track\s*\}\s*from\s*['"]ripple['"]/g,
-		"import { track } from 'ripple/server'",
+	return code.replace(
+		/import\s*\{([^}]+)\}\s*from\s*['"]ripple['"]/g,
+		(match, specifiers) => `import {${specifiers}} from 'ripple/server'`,
 	);
-	transformed = transformed.replace(
-		/import\s*\{\s*Portal\s*\}\s*from\s*['"]ripple['"]/g,
-		"import { Portal } from 'ripple/server'",
-	);
-	return transformed;
 }
 
 function buildComponents() {

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

@@ -238,7 +238,7 @@ function Header(__anchor, _, __block) {
 	_$_.pop_component();
 }
 
-function Actions(__anchor, __props, __block) {
+function Actions(__anchor, { playgroundVisible = false }, __block) {
 	_$_.push_component();
 
 	var div_8 = root_15();
@@ -256,7 +256,7 @@ function Actions(__anchor, __props, __block) {
 			};
 
 			_$_.if(node_5, (__render) => {
-				if (_$_.fallback(__props.playgroundVisible, false)) __render(consequent);
+				if (playgroundVisible) __render(consequent);
 			});
 		}
 
@@ -267,7 +267,7 @@ function Actions(__anchor, __props, __block) {
 	_$_.pop_component();
 }
 
-function Layout(__anchor, __props, __block) {
+function Layout(__anchor, { children }, __block) {
 	_$_.push_component();
 
 	var main_1 = root_17();
@@ -278,7 +278,7 @@ function Layout(__anchor, __props, __block) {
 		{
 			var node_6 = _$_.child(div_9);
 
-			_$_.composite(() => __props.children, node_6, {});
+			children(node_6, {}, _$_.active_block);
 			_$_.pop(div_9);
 		}
 	}

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

@@ -9,6 +9,8 @@ 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();
 

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

@@ -64,6 +64,8 @@ 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();
 

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

@@ -15,12 +15,14 @@ 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('df6gdi', (__anchor) => {
+	_$_.head('qwqurq', (__anchor) => {
 		_$_.document.title = 'Static Test Title';
 	});
 
@@ -44,7 +46,7 @@ export function ReactiveTitle(__anchor, _, __block) {
 		}
 	}
 
-	_$_.head('13wropz', (__anchor) => {
+	_$_.head('1h8nm28', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = _$_.get(title);
 		});
@@ -63,7 +65,7 @@ export function MultipleHeadElements(__anchor, _, __block) {
 
 	var div_3 = root_2();
 
-	_$_.head('jbv4cs', (__anchor) => {
+	_$_.head('9v67ol', (__anchor) => {
 		var fragment = root_3();
 
 		_$_.document.title = 'Page Title';
@@ -87,7 +89,7 @@ export function ReactiveMetaTags(__anchor, _, __block) {
 		_$_.pop(div_4);
 	}
 
-	_$_.head('t794k2', (__anchor) => {
+	_$_.head('166unm', (__anchor) => {
 		var meta_1 = root_5();
 
 		_$_.document.title = 'My Page';
@@ -115,7 +117,7 @@ export function TitleWithTemplate(__anchor, _, __block) {
 		_$_.pop(div_5);
 	}
 
-	_$_.head('betaue', (__anchor) => {
+	_$_.head('3o3mh2', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = `Hello ${_$_.get(name)}!`;
 		});
@@ -134,7 +136,7 @@ export function EmptyTitle(__anchor, _, __block) {
 
 	var div_6 = root_7();
 
-	_$_.head('11sq4o6', (__anchor) => {
+	_$_.head('kwo3k6', (__anchor) => {
 		_$_.document.title = '';
 	});
 
@@ -155,7 +157,7 @@ export function ConditionalTitle(__anchor, _, __block) {
 		_$_.pop(div_7);
 	}
 
-	_$_.head('xxkmhn', (__anchor) => {
+	_$_.head('c2i5xr', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = _$_.get(showPrefix) ? 'App - ' + _$_.get(title) : _$_.get(title);
 		});
@@ -186,7 +188,7 @@ export function ComputedTitle(__anchor, _, __block) {
 		}
 	}
 
-	_$_.head('1hj0can', (__anchor) => {
+	_$_.head('1h2z3z5', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = prefix + _$_.get(count);
 		});
@@ -205,11 +207,11 @@ export function MultipleHeadBlocks(__anchor, _, __block) {
 
 	var div_9 = root_10();
 
-	_$_.head('15ucmy3', (__anchor) => {
+	_$_.head('14rv3le', (__anchor) => {
 		_$_.document.title = 'First Head';
 	});
 
-	_$_.head('1xolofp', (__anchor) => {
+	_$_.head('1eh1mn5', (__anchor) => {
 		var meta_2 = root_11();
 
 		_$_.append(__anchor, meta_2);
@@ -224,7 +226,7 @@ export function HeadWithStyle(__anchor, _, __block) {
 
 	var div_10 = root_12();
 
-	_$_.head('q5et2p', (__anchor) => {
+	_$_.head('1dxk6yg', (__anchor) => {
 		_$_.document.title = 'Styled Page';
 	});
 

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

@@ -7,7 +7,9 @@ var root_1 = _$_.template(`<div class="content"><!></div>`, 0);
 var root_4 = _$_.template(`<!>`, 1, 1);
 var root_3 = _$_.template(`<!>`, 1, 1);
 
-export function Layout(__anchor, __props, __block) {
+import { track } from 'ripple';
+
+export function Layout(__anchor, { children }, __block) {
 	_$_.push_component();
 
 	var div_1 = root();
@@ -19,7 +21,7 @@ export function Layout(__anchor, __props, __block) {
 		{
 			var node = _$_.child(main_1);
 
-			_$_.composite(() => __props.children, node, {});
+			children(node, {}, _$_.active_block);
 			_$_.pop(main_1);
 		}
 	}