ripple 0.3.2 → 0.3.4

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
-export async function Layout(__output, { children }) {
+export async function Layout(__output, __props) {
 	return _$_.async(async () => {
 		_$_.push_component();
 		__output.push('<div');
@@ -10,7 +10,7 @@ export async function Layout(__output, { children }) {
 
 		{
 			{
-				const comp = children;
+				const comp = __props.children;
 				const args = [__output, {}];
 
 				if (comp?.async) {

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

@@ -1,6 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
+import { track } from 'ripple/server';
+
 export function ClickCounter(__output) {
 	_$_.push_component();
 

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

@@ -1,6 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
+import { track } from 'ripple/server';
+
 export function StaticForLoop(__output) {
 	_$_.push_component();
 

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

@@ -1,6 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
+import { track } from 'ripple/server';
+
 export function StaticTitle(__output) {
 	_$_.push_component();
 	__output.push('<div');
@@ -12,7 +14,7 @@ export function StaticTitle(__output) {
 
 	__output.push('</div>');
 	__output.target = 'head';
-	__output.push('<!--df6gdi-->');
+	__output.push('<!--qwqurq-->');
 	__output.push('<title');
 	__output.push('>');
 
@@ -46,7 +48,7 @@ export function ReactiveTitle(__output) {
 
 	__output.push('</div>');
 	__output.target = 'head';
-	__output.push('<!--13wropz-->');
+	__output.push('<!--1h8nm28-->');
 	__output.push('<title');
 	__output.push('>');
 
@@ -70,7 +72,7 @@ export function MultipleHeadElements(__output) {
 
 	__output.push('</div>');
 	__output.target = 'head';
-	__output.push('<!--jbv4cs-->');
+	__output.push('<!--9v67ol-->');
 	__output.push('<title');
 	__output.push('>');
 
@@ -105,7 +107,7 @@ export function ReactiveMetaTags(__output) {
 
 	__output.push('</div>');
 	__output.target = 'head';
-	__output.push('<!--t794k2-->');
+	__output.push('<!--166unm-->');
 	__output.push('<title');
 	__output.push('>');
 
@@ -136,7 +138,7 @@ export function TitleWithTemplate(__output) {
 
 	__output.push('</div>');
 	__output.target = 'head';
-	__output.push('<!--betaue-->');
+	__output.push('<!--3o3mh2-->');
 	__output.push('<title');
 	__output.push('>');
 
@@ -160,7 +162,7 @@ export function EmptyTitle(__output) {
 
 	__output.push('</div>');
 	__output.target = 'head';
-	__output.push('<!--11sq4o6-->');
+	__output.push('<!--kwo3k6-->');
 	__output.push('<title');
 	__output.push('>');
 
@@ -188,7 +190,7 @@ export function ConditionalTitle(__output) {
 
 	__output.push('</div>');
 	__output.target = 'head';
-	__output.push('<!--xxkmhn-->');
+	__output.push('<!--c2i5xr-->');
 	__output.push('<title');
 	__output.push('>');
 
@@ -223,7 +225,7 @@ export function ComputedTitle(__output) {
 
 	__output.push('</div>');
 	__output.target = 'head';
-	__output.push('<!--1hj0can-->');
+	__output.push('<!--1h2z3z5-->');
 	__output.push('<title');
 	__output.push('>');
 
@@ -247,7 +249,7 @@ export function MultipleHeadBlocks(__output) {
 
 	__output.push('</div>');
 	__output.target = 'head';
-	__output.push('<!--15ucmy3-->');
+	__output.push('<!--14rv3le-->');
 	__output.push('<title');
 	__output.push('>');
 
@@ -256,7 +258,7 @@ export function MultipleHeadBlocks(__output) {
 	}
 
 	__output.push('</title>');
-	__output.push('<!--1xolofp-->');
+	__output.push('<!--1eh1mn5-->');
 	__output.push('<meta');
 	__output.push(' name="author"');
 	__output.push(' content="Test Author"');
@@ -276,7 +278,7 @@ export function HeadWithStyle(__output) {
 
 	__output.push('</div>');
 	__output.target = 'head';
-	__output.push('<!--q5et2p-->');
+	__output.push('<!--1dxk6yg-->');
 	__output.push('<title');
 	__output.push('>');
 

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

@@ -1,6 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
+import { track } from 'ripple/server';
+
 export async function Layout(__output, { children }) {
 	return _$_.async(async () => {
 		_$_.push_component();

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

@@ -1,6 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
+import { track } from 'ripple/server';
+
 export function StaticHtml(__output) {
 	_$_.push_component();
 

package/tests/hydration/compiled/server/if-children.js

@@ -1,6 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
+import { track } from 'ripple/server';
+
 export async function IfWithChildren(__output, { children }) {
 	return _$_.async(async () => {
 		_$_.push_component();

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

@@ -1,6 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
+import { track } from 'ripple/server';
+
 export function IfTruthy(__output) {
 	_$_.push_component();
 

package/tests/hydration/compiled/server/mixed-control-flow.js

@@ -1,6 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
+import { track } from 'ripple/server';
+
 export async function MixedControlFlowStatic(__output) {
 	return _$_.async(async () => {
 		_$_.push_component();

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
-import { Portal } from 'ripple/server';
+import { Portal, track } from 'ripple/server';
 
 export async function SimplePortal(__output) {
 	return _$_.async(async () => {

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

@@ -1,6 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
+import { track } from 'ripple/server';
+
 export function TrackedState(__output) {
 	_$_.push_component();
 

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

@@ -1,6 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
+import { track } from 'ripple/server';
+
 export function DirectReturn(__output) {
 	_$_.push_component();
 

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

@@ -1,6 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
+import { track } from 'ripple/server';
+
 export function SwitchStatic(__output) {
 	_$_.push_component();
 

package/tests/hydration/components/composite.ripple

@@ -1,6 +1,6 @@
 import type { Component } from 'ripple';
 
-export component Layout({ children }: { children?: Component }) {
+export component Layout(&{ children }: { children?: Component }) {
 	<div class="layout">
 		<children />
 	</div>

package/tests/hydration/components/events.ripple

@@ -1,7 +1,9 @@
+import { track } from 'ripple';
+
 // Event handling components for hydration testing
 
 export component ClickCounter() {
-	let count = #ripple.track(0);
+	let count = track(0);
 	<div>
 		<button
 			class="increment"
@@ -16,7 +18,7 @@ export component ClickCounter() {
 }
 
 export component IncrementDecrement() {
-	let count = #ripple.track(0);
+	let count = track(0);
 	<div>
 		<button
 			class="decrement"
@@ -39,8 +41,8 @@ export component IncrementDecrement() {
 }
 
 export component MultipleEvents() {
-	let clicks = #ripple.track(0);
-	let hovers = #ripple.track(0);
+	let clicks = track(0);
+	let hovers = track(0);
 	<div>
 		<button
 			class="target"
@@ -59,8 +61,8 @@ export component MultipleEvents() {
 }
 
 export component MultiStateUpdate() {
-	let count = #ripple.track(0);
-	let lastAction = #ripple.track('none');
+	let count = track(0);
+	let lastAction = track('none');
 
 	const handleClick = () => {
 		@count++;
@@ -75,7 +77,7 @@ export component MultiStateUpdate() {
 }
 
 export component ToggleButton() {
-	let isOn = #ripple.track(false);
+	let isOn = track(false);
 	<div>
 		<button
 			class="toggle"
@@ -93,7 +95,7 @@ export component ChildButton(props: { onClick: () => void; label: string }) {
 }
 
 export component ParentWithChildButton() {
-	let count = #ripple.track(0);
+	let count = track(0);
 	<div>
 		<ChildButton
 			onClick={() => {

package/tests/hydration/components/for.ripple

@@ -1,3 +1,5 @@
+import { track } from 'ripple';
+
 // For loop components for hydration testing
 
 export component StaticForLoop() {
@@ -32,7 +34,7 @@ export component KeyedForLoop() {
 }
 
 export component ReactiveForLoopAdd() {
-	let items = #ripple.track(['A', 'B']);
+	let items = track(['A', 'B']);
 	<button
 		class="add"
 		onClick={() => {
@@ -49,7 +51,7 @@ export component ReactiveForLoopAdd() {
 }
 
 export component ReactiveForLoopRemove() {
-	let items = #ripple.track(['A', 'B', 'C']);
+	let items = track(['A', 'B', 'C']);
 	<button
 		class="remove"
 		onClick={() => {
@@ -66,7 +68,7 @@ export component ReactiveForLoopRemove() {
 }
 
 export component ForLoopInteractive() {
-	let counts = #ripple.track([0, 0, 0]);
+	let counts = track([0, 0, 0]);
 	<div>
 		for (const count of @counts; index i) {
 			<div class={`item-${i}`}>
@@ -128,7 +130,7 @@ export component ForLoopComplexObjects() {
 
 // Test reordering items in a keyed for loop
 export component KeyedForLoopReorder() {
-	let items = #ripple.track([
+	let items = track([
 		{ id: 1, name: 'First' },
 		{ id: 2, name: 'Second' },
 		{ id: 3, name: 'Third' },
@@ -150,7 +152,7 @@ export component KeyedForLoopReorder() {
 
 // Test for loop with item property updates (keyed)
 export component KeyedForLoopUpdate() {
-	let items = #ripple.track([
+	let items = track([
 		{ id: 1, name: 'Item 1' },
 		{ id: 2, name: 'Item 2' },
 	]);
@@ -171,7 +173,7 @@ export component KeyedForLoopUpdate() {
 
 // Test for loop with combined add/remove/reorder
 export component ForLoopMixedOperations() {
-	let items = #ripple.track(['A', 'B', 'C', 'D']);
+	let items = track(['A', 'B', 'C', 'D']);
 	<button
 		class="shuffle"
 		onClick={() => {
@@ -190,8 +192,8 @@ export component ForLoopMixedOperations() {
 
 // Test for loop inside if block (combined control flow)
 export component ForLoopInsideIf() {
-	let showList = #ripple.track(true);
-	let items = #ripple.track(['X', 'Y', 'Z']);
+	let showList = track(true);
+	let items = track(['X', 'Y', 'Z']);
 	<button
 		class="toggle"
 		onClick={() => {
@@ -219,7 +221,7 @@ export component ForLoopInsideIf() {
 
 // Test for loop that transitions from empty to populated
 export component ForLoopEmptyToPopulated() {
-	let items = #ripple.track<string[]>([]);
+	let items = track<string[]>([]);
 	<button
 		class="populate"
 		onClick={() => {
@@ -237,7 +239,7 @@ export component ForLoopEmptyToPopulated() {
 
 // Test for loop that transitions from populated to empty
 export component ForLoopPopulatedToEmpty() {
-	let items = #ripple.track(['One', 'Two', 'Three']);
+	let items = track(['One', 'Two', 'Three']);
 	<button
 		class="clear"
 		onClick={() => {
@@ -255,7 +257,7 @@ export component ForLoopPopulatedToEmpty() {
 
 // Test nested for loops with reactivity
 export component NestedForLoopReactive() {
-	let grid = #ripple.track([
+	let grid = track([
 		[1, 2],
 		[3, 4],
 	]);
@@ -328,7 +330,7 @@ export component ForLoopDeeplyNested() {
 
 // Test for loop with index that gets updated
 export component ForLoopIndexUpdate() {
-	let items = #ripple.track(['First', 'Second', 'Third']);
+	let items = track(['First', 'Second', 'Third']);
 	<button
 		class="prepend"
 		onClick={() => {
@@ -346,7 +348,7 @@ export component ForLoopIndexUpdate() {
 
 // Test keyed for loop with index
 export component KeyedForLoopWithIndex() {
-	let items = #ripple.track([
+	let items = track([
 		{ id: 'a', value: 'Alpha' },
 		{ id: 'b', value: 'Beta' },
 		{ id: 'c', value: 'Gamma' },
@@ -368,7 +370,7 @@ export component KeyedForLoopWithIndex() {
 
 // Test for loop with sibling elements
 export component ForLoopWithSiblings() {
-	let items = #ripple.track(['A', 'B']);
+	let items = track(['A', 'B']);
 	<div class="wrapper">
 		<header class="before">{'Before'}</header>
 		for (const item of @items) {
@@ -401,7 +403,7 @@ export component ForLoopItemState() {
 }
 
 component TodoItem(props: { id: number; text: string }) {
-	let done = #ripple.track(false);
+	let done = track(false);
 	<div class={`todo-${props.id}`}>
 		<input
 			type="checkbox"
@@ -427,7 +429,7 @@ export component ForLoopSingleItem() {
 
 // Test for loop adding at beginning
 export component ForLoopAddAtBeginning() {
-	let items = #ripple.track(['B', 'C']);
+	let items = track(['B', 'C']);
 	<button
 		class="prepend"
 		onClick={() => {
@@ -445,7 +447,7 @@ export component ForLoopAddAtBeginning() {
 
 // Test for loop adding in the middle
 export component ForLoopAddInMiddle() {
-	let items = #ripple.track(['A', 'C']);
+	let items = track(['A', 'C']);
 	<button
 		class="insert"
 		onClick={() => {
@@ -465,7 +467,7 @@ export component ForLoopAddInMiddle() {
 
 // Test for loop removing from the middle
 export component ForLoopRemoveFromMiddle() {
-	let items = #ripple.track(['A', 'B', 'C']);
+	let items = track(['A', 'B', 'C']);
 	<button
 		class="remove-middle"
 		onClick={() => {
@@ -493,7 +495,7 @@ export component ForLoopLargeList() {
 
 // Test for loop with swap operation
 export component ForLoopSwap() {
-	let items = #ripple.track(['A', 'B', 'C', 'D']);
+	let items = track(['A', 'B', 'C', 'D']);
 	<button
 		class="swap"
 		onClick={() => {
@@ -513,7 +515,7 @@ export component ForLoopSwap() {
 
 // Test for loop with reverse operation
 export component ForLoopReverse() {
-	let items = #ripple.track(['A', 'B', 'C', 'D']);
+	let items = track(['A', 'B', 'C', 'D']);
 	<button
 		class="reverse"
 		onClick={() => {

package/tests/hydration/components/head.ripple

@@ -1,3 +1,5 @@
+import { track } from 'ripple';
+
 // Static title
 export component StaticTitle() {
 	<head>
@@ -9,7 +11,7 @@ export component StaticTitle() {
 
 // Reactive title
 export component ReactiveTitle() {
-	let title = #ripple.track('Initial Title');
+	let title = track('Initial Title');
 
 	<head>
 		<title>{@title}</title>
@@ -32,7 +34,7 @@ export component MultipleHeadElements() {
 
 // Head with reactive meta tags
 export component ReactiveMetaTags() {
-	let description = #ripple.track('Initial description');
+	let description = track('Initial description');
 
 	<head>
 		<title>{'My Page'}</title>
@@ -44,7 +46,7 @@ export component ReactiveMetaTags() {
 
 // Title with template literal
 export component TitleWithTemplate() {
-	let name = #ripple.track('World');
+	let name = track('World');
 
 	<head>
 		<title>{`Hello ${@name}!`}</title>
@@ -63,8 +65,8 @@ export component EmptyTitle() {
 
 // Title with conditional content
 export component ConditionalTitle() {
-	let showPrefix = #ripple.track(true);
-	let title = #ripple.track('Main Page');
+	let showPrefix = track(true);
+	let title = track('Main Page');
 
 	<head>
 		<title>{@showPrefix ? 'App - ' + @title : @title}</title>
@@ -75,7 +77,7 @@ export component ConditionalTitle() {
 
 // Title with computed value
 export component ComputedTitle() {
-	let count = #ripple.track(0);
+	let count = track(0);
 	let prefix = 'Count: ';
 
 	<head>

package/tests/hydration/components/hmr.ripple

@@ -1,3 +1,5 @@
+import { track } from 'ripple';
+
 // Components for testing HMR re-render after hydration.
 // The key scenario: a layout wrapper whose root element contains children
 // that use if/for blocks. After hydration, hydrate_node can be left pointing
@@ -17,7 +19,7 @@ export component Layout({ children }: { children: any }) {
 
 // A child component with an if block (the key source of deep hydrate_node)
 export component Content() {
-	let visible = #ripple.track(true);
+	let visible = track(true);
 
 	<div class="content">
 		if (@visible) {

package/tests/hydration/components/html.ripple

@@ -1,3 +1,5 @@
+import { track } from 'ripple';
+
 export component StaticHtml() {
 	const html = '<p><strong>Bold</strong> text</p>';
 	<div>{html html}</div>
@@ -227,7 +229,7 @@ component NavItem({
 }
 
 component SidebarSection({ title, children }: { title: string; children: any }) {
-	let expanded = #ripple.track(true);
+	let expanded = track(true);
 	<section class="sidebar-section">
 		<div class="section-header">
 			<h2>{title}</h2>

package/tests/hydration/components/if-children.ripple

@@ -1,8 +1,10 @@
+import { track } from 'ripple';
+
 // Minimal repro for hydration issue with if block containing children
 // Based on SidebarGroup pattern from website-new
 
 export component IfWithChildren({ children }: { children: any }) {
-	let expanded = #ripple.track(true);
+	let expanded = track(true);
 
 	<div class="container">
 		<div class="header" role="button" onClick={() => (@expanded = !@expanded)}>{'Toggle'}</div>
@@ -27,7 +29,7 @@ export component TestIfWithChildren() {
 
 // Simpler variant - if block with static children
 export component IfWithStaticChildren() {
-	let expanded = #ripple.track(true);
+	let expanded = track(true);
 
 	<div class="container">
 		<div class="header" role="button" onClick={() => (@expanded = !@expanded)}>{'Toggle'}</div>
@@ -42,7 +44,7 @@ export component IfWithStaticChildren() {
 
 // Variant with sibling elements before the if block (like SidebarGroup)
 export component IfWithSiblingsAndChildren({ children }: { children: any }) {
-	let expanded = #ripple.track(true);
+	let expanded = track(true);
 
 	<section class="group">
 		<div class="item" role="button" onClick={() => (@expanded = !@expanded)}>
@@ -73,7 +75,7 @@ export component TestIfWithSiblingsAndChildren() {
 // This tests that hydrate_node is properly restored after processing an element's children
 // before navigating to a dynamic sibling (if/for/switch)
 export component ElementWithChildrenThenIf() {
-	let show = #ripple.track(true);
+	let show = track(true);
 
 	<div class="wrapper">
 		<div class="nested-parent">
@@ -91,7 +93,7 @@ export component ElementWithChildrenThenIf() {
 
 // More complex: multiple levels of nesting before if sibling
 export component DeepNestingThenIf() {
-	let visible = #ripple.track(true);
+	let visible = track(true);
 
 	<section class="outer">
 		<article class="middle">
@@ -114,7 +116,7 @@ export component DeepNestingThenIf() {
 // followed by another sibling element. This requires pop() to restore hydrate_node
 // because we descend into the first element to get the button children.
 export component DomElementChildrenThenSibling() {
-	let activeTab = #ripple.track('code');
+	let activeTab = track('code');
 
 	<div class="tabs">
 		<div class="tab-list">
@@ -147,7 +149,7 @@ export component DomElementChildrenThenSibling() {
 // generate sibling() calls. This was causing incorrect pop() generation before next().
 // Pattern: <ul> with dynamic <li> children -> static <h2> -> static <p> -> next()
 export component DomChildrenThenStaticSiblings() {
-	let count = #ripple.track(0);
+	let count = track(0);
 
 	<div class="container">
 		<ul class="list">

package/tests/hydration/components/if.ripple

@@ -1,3 +1,5 @@
+import { track } from 'ripple';
+
 // If block components for hydration testing
 
 export component IfTruthy() {
@@ -24,7 +26,7 @@ export component IfElse() {
 }
 
 export component ReactiveIf() {
-	let show = #ripple.track(true);
+	let show = track(true);
 	<button
 		class="toggle"
 		onClick={() => {
@@ -39,7 +41,7 @@ export component ReactiveIf() {
 }
 
 export component ReactiveIfElse() {
-	let isOn = #ripple.track(false);
+	let isOn = track(false);
 	<button
 		class="toggle"
 		onClick={() => {
@@ -56,8 +58,8 @@ export component ReactiveIfElse() {
 }
 
 export component NestedIf() {
-	let outer = #ripple.track(true);
-	let inner = #ripple.track(true);
+	let outer = track(true);
+	let inner = track(true);
 	<button
 		class="outer-toggle"
 		onClick={() => {
@@ -85,7 +87,7 @@ export component NestedIf() {
 }
 
 export component IfElseIfChain() {
-	let status = #ripple.track<'loading' | 'success' | 'error'>('loading');
+	let status = track<'loading' | 'success' | 'error'>('loading');
 	<div>
 		<button
 			class="success"