ripple 0.2.216 → 0.3.1

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

@@ -1,8 +1,6 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
-import { track } from 'ripple/server';
-
 export function IfTruthy(__output) {
 	_$_.push_component();
 
@@ -85,7 +83,7 @@ export function IfElse(__output) {
 export function ReactiveIf(__output) {
 	_$_.push_component();
 
-	let show = track(true);
+	let show = _$_.track(true);
 
 	__output.push('<button');
 	__output.push(' class="toggle"');
@@ -117,7 +115,7 @@ export function ReactiveIf(__output) {
 export function ReactiveIfElse(__output) {
 	_$_.push_component();
 
-	let isOn = track(false);
+	let isOn = _$_.track(false);
 
 	__output.push('<button');
 	__output.push(' class="toggle"');
@@ -159,8 +157,8 @@ export function ReactiveIfElse(__output) {
 export function NestedIf(__output) {
 	_$_.push_component();
 
-	let outer = track(true);
-	let inner = track(true);
+	let outer = _$_.track(true);
+	let inner = _$_.track(true);
 
 	__output.push('<button');
 	__output.push(' class="outer-toggle"');
@@ -216,7 +214,7 @@ export function NestedIf(__output) {
 export function IfElseIfChain(__output) {
 	_$_.push_component();
 
-	let status = track('loading');
+	let status = _$_.track('loading');
 
 	__output.push('<div');
 	__output.push('>');

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

@@ -1,8 +1,6 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
-import { track } from 'ripple/server';
-
 export async function MixedControlFlowStatic(__output) {
 	return _$_.async(async () => {
 		_$_.push_component();
@@ -97,9 +95,9 @@ export async function MixedControlFlowReactive(__output) {
 	return _$_.async(async () => {
 		_$_.push_component();
 
-		let show = track(true);
-		let mode = track('a');
-		let items = track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }]);
+		let show = _$_.track(true);
+		let mode = _$_.track('a');
+		let items = _$_.track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }]);
 
 		__output.push('<button');
 		__output.push(' class="toggle-show"');

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

@@ -25,10 +25,8 @@ export async function SimplePortal(__output) {
 
 				const args = [
 					__output,
-
 					{
 						target: typeof document !== 'undefined' ? document.body : null,
-
 						children: function children(__output) {
 							_$_.push_component();
 							__output.push('<div');
@@ -64,7 +62,7 @@ export async function ConditionalPortal(__output) {
 	return _$_.async(async () => {
 		_$_.push_component();
 
-		let show = _$_.get(true);
+		let show = _$_.track(true);
 
 		__output.push('<div');
 		__output.push(' class="container"');
@@ -88,10 +86,8 @@ export async function ConditionalPortal(__output) {
 
 					const args = [
 						__output,
-
 						{
 							target: typeof document !== 'undefined' ? document.body : null,
-
 							children: function children(__output) {
 								_$_.push_component();
 								__output.push('<div');
@@ -148,10 +144,8 @@ export async function PortalWithMainContent(__output) {
 
 				const args = [
 					__output,
-
 					{
 						target: typeof document !== 'undefined' ? document.body : null,
-
 						children: function children(__output) {
 							_$_.push_component();
 							__output.push('<div');
@@ -223,10 +217,8 @@ export async function NestedContentWithPortal(__output) {
 
 				const args = [
 					__output,
-
 					{
 						target: typeof document !== 'undefined' ? document.body : null,
-
 						children: function children(__output) {
 							_$_.push_component();
 							__output.push('<div');

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

@@ -1,12 +1,10 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
-import { track } from 'ripple/server';
-
 export function TrackedState(__output) {
 	_$_.push_component();
 
-	let count = track(0);
+	let count = _$_.track(0);
 
 	__output.push('<div');
 	__output.push(' class="count"');
@@ -23,7 +21,7 @@ export function TrackedState(__output) {
 export function CounterWithInitial(__output, props) {
 	_$_.push_component();
 
-	let count = track(props.initial);
+	let count = _$_.track(props.initial);
 
 	__output.push('<div');
 	__output.push('>');
@@ -60,8 +58,8 @@ export function CounterWrapper(__output) {
 export function ComputedValues(__output) {
 	_$_.push_component();
 
-	let a = track(2);
-	let b = track(3);
+	let a = _$_.track(2);
+	let b = _$_.track(3);
 	const sum = () => _$_.get(a) + _$_.get(b);
 
 	__output.push('<div');
@@ -79,9 +77,9 @@ export function ComputedValues(__output) {
 export function MultipleTracked(__output) {
 	_$_.push_component();
 
-	let x = track(10);
-	let y = track(20);
-	let z = track(30);
+	let x = _$_.track(10);
+	let y = _$_.track(20);
+	let z = _$_.track(30);
 
 	__output.push('<div');
 	__output.push(' class="x"');
@@ -116,8 +114,8 @@ export function MultipleTracked(__output) {
 export function DerivedState(__output) {
 	_$_.push_component();
 
-	let firstName = track('John');
-	let lastName = track('Doe');
+	let firstName = _$_.track('John');
+	let lastName = _$_.track('Doe');
 	const fullName = () => `${_$_.get(firstName)} ${_$_.get(lastName)}`;
 
 	__output.push('<div');

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

@@ -1,8 +1,6 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
-import { track } from 'ripple/server';
-
 export function DirectReturn(__output) {
 	_$_.push_component();
 
@@ -1034,7 +1032,7 @@ export function ReactiveReturnTrueToFalse(__output) {
 	_$_.push_component();
 
 	var __r_28 = false;
-	let condition = track(true);
+	let condition = _$_.track(true);
 
 	__output.push('<button');
 	__output.push(' class="toggle"');
@@ -1083,7 +1081,7 @@ export function ReactiveReturnFalseToTrue(__output) {
 	_$_.push_component();
 
 	var __r_29 = false;
-	let condition = track(false);
+	let condition = _$_.track(false);
 
 	__output.push('<button');
 	__output.push(' class="toggle"');
@@ -1133,7 +1131,7 @@ export function ReactiveNestedReturn(__output) {
 
 	var __r_30 = false;
 	let a = true;
-	let b = track(true);
+	let b = _$_.track(true);
 
 	__output.push('<button');
 	__output.push(' class="toggle"');
@@ -1507,7 +1505,7 @@ export function ReactiveSiblingReturns(__output) {
 
 	var __r_38 = false;
 	var __r_39 = false;
-	let mode = track('first');
+	let mode = _$_.track('first');
 
 	__output.push('<button');
 	__output.push(' class="toggle"');
@@ -1578,8 +1576,8 @@ export function ReactiveOuterInnerReturns(__output) {
 	_$_.push_component();
 
 	var __r_40 = false;
-	let a = track(true);
-	let b = track(true);
+	let a = _$_.track(true);
+	let b = _$_.track(true);
 
 	__output.push('<button');
 	__output.push(' class="toggle-a"');
@@ -1653,7 +1651,7 @@ export function ReactiveElseIfReturns(__output) {
 
 	var __r_41 = false;
 	var __r_42 = false;
-	let status = track(0);
+	let status = _$_.track(0);
 
 	__output.push('<button');
 	__output.push(' class="toggle"');
@@ -1731,10 +1729,10 @@ export function ReactiveDeepNestedIndependentReturns(__output) {
 	var __r_44 = false;
 	var __r_45 = false;
 	var __r_46 = false;
-	let c1 = track(false);
-	let c2 = track(false);
-	let c3 = track(false);
-	let c4 = track(false);
+	let c1 = _$_.track(false);
+	let c2 = _$_.track(false);
+	let c3 = _$_.track(false);
+	let c4 = _$_.track(false);
 
 	__output.push('<button');
 	__output.push(' class="toggle-c1"');

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

@@ -1,8 +1,6 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
-import { track } from 'ripple/server';
-
 export function SwitchStatic(__output) {
 	_$_.push_component();
 
@@ -48,7 +46,7 @@ export function SwitchStatic(__output) {
 export function SwitchReactive(__output) {
 	_$_.push_component();
 
-	let status = track('a');
+	let status = _$_.track('a');
 
 	__output.push('<button');
 	__output.push(' class="toggle"');
@@ -133,7 +131,7 @@ export function SwitchFallthrough(__output) {
 export function SwitchNumericLevels(__output) {
 	_$_.push_component();
 
-	let level = track(1);
+	let level = _$_.track(1);
 
 	__output.push('<button');
 	__output.push(' class="level-toggle"');
@@ -185,7 +183,7 @@ export function SwitchNumericLevels(__output) {
 export function SwitchBlockScoped(__output) {
 	_$_.push_component();
 
-	let level = track(1);
+	let level = _$_.track(1);
 
 	__output.push('<button');
 	__output.push(' class="block-toggle"');
@@ -237,7 +235,7 @@ export function SwitchBlockScoped(__output) {
 export function SwitchNoBreak(__output) {
 	_$_.push_component();
 
-	let level = track(1);
+	let level = _$_.track(1);
 
 	__output.push('<button');
 	__output.push(' class="nobreak-toggle"');

package/tests/hydration/components/events.ripple

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

package/tests/hydration/components/for.ripple

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

package/tests/hydration/components/head.ripple

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

package/tests/hydration/components/hmr.ripple

@@ -3,7 +3,6 @@
 // that use if/for blocks. After hydration, hydrate_node can be left pointing
 // deep inside the layout's root element (from nested block processing), which
 // previously caused branch.s.end to be set incorrectly and target to be null.
-import { track } from 'ripple';
 
 // A layout component similar to docs-layout: a root div wrapping child components
 // where the children contain conditional content (if blocks)
@@ -18,7 +17,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 = track(true);
+	let visible = #ripple.track(true);
 
 	<div class="content">
 		if (@visible) {

package/tests/hydration/components/html.ripple

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

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

@@ -1,9 +1,8 @@
 // Minimal repro for hydration issue with if block containing children
 // Based on SidebarGroup pattern from website-new
-import { track } from 'ripple';
 
 export component IfWithChildren({ children }: { children: any }) {
-	let expanded = track(true);
+	let expanded = #ripple.track(true);
 
 	<div class="container">
 		<div class="header" role="button" onClick={() => (@expanded = !@expanded)}>{'Toggle'}</div>
@@ -28,7 +27,7 @@ export component TestIfWithChildren() {
 
 // Simpler variant - if block with static children
 export component IfWithStaticChildren() {
-	let expanded = track(true);
+	let expanded = #ripple.track(true);
 
 	<div class="container">
 		<div class="header" role="button" onClick={() => (@expanded = !@expanded)}>{'Toggle'}</div>
@@ -43,7 +42,7 @@ export component IfWithStaticChildren() {
 
 // Variant with sibling elements before the if block (like SidebarGroup)
 export component IfWithSiblingsAndChildren({ children }: { children: any }) {
-	let expanded = track(true);
+	let expanded = #ripple.track(true);
 
 	<section class="group">
 		<div class="item" role="button" onClick={() => (@expanded = !@expanded)}>
@@ -74,7 +73,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 = track(true);
+	let show = #ripple.track(true);
 
 	<div class="wrapper">
 		<div class="nested-parent">
@@ -92,7 +91,7 @@ export component ElementWithChildrenThenIf() {
 
 // More complex: multiple levels of nesting before if sibling
 export component DeepNestingThenIf() {
-	let visible = track(true);
+	let visible = #ripple.track(true);
 
 	<section class="outer">
 		<article class="middle">
@@ -115,7 +114,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 = track('code');
+	let activeTab = #ripple.track('code');
 
 	<div class="tabs">
 		<div class="tab-list">
@@ -148,7 +147,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 = track(0);
+	let count = #ripple.track(0);
 
 	<div class="container">
 		<ul class="list">