ripple 0.2.215 → 0.3.0

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

@@ -1,8 +1,6 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
-import { track } from 'ripple/server';
-
 export function StaticForLoop(__output) {
 	_$_.push_component();
 
@@ -100,7 +98,7 @@ export function KeyedForLoop(__output) {
 export function ReactiveForLoopAdd(__output) {
 	_$_.push_component();
 
-	let items = track(['A', 'B']);
+	let items = _$_.track(['A', 'B']);
 
 	__output.push('<button');
 	__output.push(' class="add"');
@@ -138,7 +136,7 @@ export function ReactiveForLoopAdd(__output) {
 export function ReactiveForLoopRemove(__output) {
 	_$_.push_component();
 
-	let items = track(['A', 'B', 'C']);
+	let items = _$_.track(['A', 'B', 'C']);
 
 	__output.push('<button');
 	__output.push(' class="remove"');
@@ -176,7 +174,7 @@ export function ReactiveForLoopRemove(__output) {
 export function ForLoopInteractive(__output) {
 	_$_.push_component();
 
-	let counts = track([0, 0, 0]);
+	let counts = _$_.track([0, 0, 0]);
 
 	__output.push('<div');
 	__output.push('>');
@@ -357,7 +355,7 @@ export function ForLoopComplexObjects(__output) {
 export function KeyedForLoopReorder(__output) {
 	_$_.push_component();
 
-	let items = track([
+	let items = _$_.track([
 		{ id: 1, name: 'First' },
 		{ id: 2, name: 'Second' },
 		{ id: 3, name: 'Third' }
@@ -400,7 +398,7 @@ export function KeyedForLoopReorder(__output) {
 export function KeyedForLoopUpdate(__output) {
 	_$_.push_component();
 
-	let items = track([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]);
+	let items = _$_.track([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]);
 
 	__output.push('<button');
 	__output.push(' class="update"');
@@ -439,7 +437,7 @@ export function KeyedForLoopUpdate(__output) {
 export function ForLoopMixedOperations(__output) {
 	_$_.push_component();
 
-	let items = track(['A', 'B', 'C', 'D']);
+	let items = _$_.track(['A', 'B', 'C', 'D']);
 
 	__output.push('<button');
 	__output.push(' class="shuffle"');
@@ -478,8 +476,8 @@ export function ForLoopMixedOperations(__output) {
 export function ForLoopInsideIf(__output) {
 	_$_.push_component();
 
-	let showList = track(true);
-	let items = track(['X', 'Y', 'Z']);
+	let showList = _$_.track(true);
+	let items = _$_.track(['X', 'Y', 'Z']);
 
 	__output.push('<button');
 	__output.push(' class="toggle"');
@@ -533,7 +531,7 @@ export function ForLoopInsideIf(__output) {
 export function ForLoopEmptyToPopulated(__output) {
 	_$_.push_component();
 
-	let items = track([]);
+	let items = _$_.track([]);
 
 	__output.push('<button');
 	__output.push(' class="populate"');
@@ -572,7 +570,7 @@ export function ForLoopEmptyToPopulated(__output) {
 export function ForLoopPopulatedToEmpty(__output) {
 	_$_.push_component();
 
-	let items = track(['One', 'Two', 'Three']);
+	let items = _$_.track(['One', 'Two', 'Three']);
 
 	__output.push('<button');
 	__output.push(' class="clear"');
@@ -611,7 +609,7 @@ export function ForLoopPopulatedToEmpty(__output) {
 export function NestedForLoopReactive(__output) {
 	_$_.push_component();
 
-	let grid = track([[1, 2], [3, 4]]);
+	let grid = _$_.track([[1, 2], [3, 4]]);
 
 	__output.push('<button');
 	__output.push(' class="add-row"');
@@ -684,7 +682,6 @@ export function ForLoopDeeplyNested(__output) {
 		{
 			id: 'd1',
 			name: 'Engineering',
-
 			teams: [
 				{ id: 't1', name: 'Frontend', members: ['Alice', 'Bob'] },
 				{ id: 't2', name: 'Backend', members: ['Charlie'] }
@@ -780,7 +777,7 @@ export function ForLoopDeeplyNested(__output) {
 export function ForLoopIndexUpdate(__output) {
 	_$_.push_component();
 
-	let items = track(['First', 'Second', 'Third']);
+	let items = _$_.track(['First', 'Second', 'Third']);
 
 	__output.push('<button');
 	__output.push(' class="prepend"');
@@ -822,7 +819,7 @@ export function ForLoopIndexUpdate(__output) {
 export function KeyedForLoopWithIndex(__output) {
 	_$_.push_component();
 
-	let items = track([
+	let items = _$_.track([
 		{ id: 'a', value: 'Alpha' },
 		{ id: 'b', value: 'Beta' },
 		{ id: 'c', value: 'Gamma' }
@@ -869,7 +866,7 @@ export function KeyedForLoopWithIndex(__output) {
 export function ForLoopWithSiblings(__output) {
 	_$_.push_component();
 
-	let items = track(['A', 'B']);
+	let items = _$_.track(['A', 'B']);
 
 	__output.push('<div');
 	__output.push(' class="wrapper"');
@@ -958,7 +955,7 @@ export function ForLoopItemState(__output) {
 function TodoItem(__output, props) {
 	_$_.push_component();
 
-	let done = track(false);
+	let done = _$_.track(false);
 
 	__output.push('<div');
 	__output.push(_$_.attr('class', `todo-${props.id}`));
@@ -1018,7 +1015,7 @@ export function ForLoopSingleItem(__output) {
 export function ForLoopAddAtBeginning(__output) {
 	_$_.push_component();
 
-	let items = track(['B', 'C']);
+	let items = _$_.track(['B', 'C']);
 
 	__output.push('<button');
 	__output.push(' class="prepend"');
@@ -1057,7 +1054,7 @@ export function ForLoopAddAtBeginning(__output) {
 export function ForLoopAddInMiddle(__output) {
 	_$_.push_component();
 
-	let items = track(['A', 'C']);
+	let items = _$_.track(['A', 'C']);
 
 	__output.push('<button');
 	__output.push(' class="insert"');
@@ -1096,7 +1093,7 @@ export function ForLoopAddInMiddle(__output) {
 export function ForLoopRemoveFromMiddle(__output) {
 	_$_.push_component();
 
-	let items = track(['A', 'B', 'C']);
+	let items = _$_.track(['A', 'B', 'C']);
 
 	__output.push('<button');
 	__output.push(' class="remove-middle"');
@@ -1169,7 +1166,7 @@ export function ForLoopLargeList(__output) {
 export function ForLoopSwap(__output) {
 	_$_.push_component();
 
-	let items = track(['A', 'B', 'C', 'D']);
+	let items = _$_.track(['A', 'B', 'C', 'D']);
 
 	__output.push('<button');
 	__output.push(' class="swap"');
@@ -1208,7 +1205,7 @@ export function ForLoopSwap(__output) {
 export function ForLoopReverse(__output) {
 	_$_.push_component();
 
-	let items = track(['A', 'B', 'C', 'D']);
+	let items = _$_.track(['A', 'B', 'C', 'D']);
 
 	__output.push('<button');
 	__output.push(' class="reverse"');

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

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

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

@@ -0,0 +1,107 @@
+// @ts-nocheck
+import * as _$_ from 'ripple/internal/server';
+
+export async function Layout(__output, { children }) {
+	return _$_.async(async () => {
+		_$_.push_component();
+		__output.push('<div');
+		__output.push(' class="layout"');
+		__output.push('>');
+
+		{
+			__output.push('<nav');
+			__output.push(' class="nav"');
+			__output.push('>');
+
+			{
+				__output.push('Navigation');
+			}
+
+			__output.push('</nav>');
+			__output.push('<main');
+			__output.push(' class="main"');
+			__output.push('>');
+
+			{
+				{
+					const comp = children;
+					const args = [__output, {}];
+
+					if (comp?.async) {
+						await comp(...args);
+					} else if (comp) {
+						comp(...args);
+					}
+				}
+			}
+
+			__output.push('</main>');
+		}
+
+		__output.push('</div>');
+		_$_.pop_component();
+	});
+}
+
+Layout.async = true;
+
+export function Content(__output) {
+	_$_.push_component();
+
+	let visible = _$_.track(true);
+
+	__output.push('<div');
+	__output.push(' class="content"');
+	__output.push('>');
+
+	{
+		__output.push('<!--[-->');
+
+		if (_$_.get(visible)) {
+			__output.push('<p');
+			__output.push(' class="text"');
+			__output.push('>');
+
+			{
+				__output.push('Hello world');
+			}
+
+			__output.push('</p>');
+		}
+
+		__output.push('<!--]-->');
+	}
+
+	__output.push('</div>');
+	_$_.pop_component();
+}
+
+export function LayoutWithContent(__output) {
+	_$_.push_component();
+
+	{
+		const comp = Layout;
+
+		const args = [
+			__output,
+			{
+				children: function children(__output) {
+					_$_.push_component();
+
+					{
+						const comp = Content;
+						const args = [__output, {}];
+
+						comp(...args);
+					}
+
+					_$_.pop_component();
+				}
+			}
+		];
+
+		comp(...args);
+	}
+
+	_$_.pop_component();
+}

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

@@ -1,8 +1,6 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
-import { track } from 'ripple/server';
-
 export function StaticHtml(__output) {
 	_$_.push_component();
 
@@ -178,7 +176,6 @@ export function HtmlInChildren(__output) {
 
 		const args = [
 			__output,
-
 			{
 				children: function children(__output) {
 					_$_.push_component();
@@ -216,7 +213,6 @@ export function HtmlInChildrenWithSiblings(__output) {
 
 		const args = [
 			__output,
-
 			{
 				children: function children(__output) {
 					_$_.push_component();
@@ -263,7 +259,6 @@ export function MultipleHtmlInChildren(__output) {
 
 		const args = [
 			__output,
-
 			{
 				children: function children(__output) {
 					_$_.push_component();
@@ -347,7 +342,6 @@ export function HtmlWithCommentsInChildren(__output) {
 
 		const args = [
 			__output,
-
 			{
 				children: function children(__output) {
 					_$_.push_component();
@@ -554,11 +548,9 @@ export function HtmlWithServerData(__output) {
 
 		const args = [
 			__output,
-
 			{
 				editPath: "docs/introduction.md",
 				nextLink: { href: '/docs/quick-start', text: 'Quick Start' },
-
 				toc: [
 					{ href: '#intro', text: 'Introduction' },
 					{ href: '#features', text: 'Features' }
@@ -600,7 +592,6 @@ export function HtmlWithClientDefaults(__output) {
 
 		const args = [
 			__output,
-
 			{
 				children: function children(__output) {
 					_$_.push_component();
@@ -638,7 +629,6 @@ export function HtmlWithUndefinedContent(__output) {
 
 		const args = [
 			__output,
-
 			{
 				children: function children(__output) {
 					_$_.push_component();
@@ -813,7 +803,6 @@ export function HtmlAfterSwitchInChildren(__output) {
 
 		const args = [
 			__output,
-
 			{
 				children: function children(__output) {
 					_$_.push_component();
@@ -823,10 +812,8 @@ export function HtmlAfterSwitchInChildren(__output) {
 
 						const args = [
 							__output,
-
 							{
 								level: 1,
-
 								children: function children(__output) {
 									_$_.push_component();
 									__output.push('Title');
@@ -924,7 +911,7 @@ async function SidebarSection(__output, { title, children }) {
 	return _$_.async(async () => {
 		_$_.push_component();
 
-		let expanded = track(true);
+		let expanded = _$_.track(true);
 
 		__output.push('<section');
 		__output.push(' class="sidebar-section"');
@@ -1009,10 +996,8 @@ function SideNav(__output, { currentPath }) {
 
 					const args = [
 						__output,
-
 						{
 							title: "Getting Started",
-
 							children: function children(__output) {
 								_$_.push_component();
 
@@ -1021,7 +1006,6 @@ function SideNav(__output, { currentPath }) {
 
 									const args = [
 										__output,
-
 										{
 											href: "/intro",
 											text: "Introduction",
@@ -1037,7 +1021,6 @@ function SideNav(__output, { currentPath }) {
 
 									const args = [
 										__output,
-
 										{
 											href: "/start",
 											text: "Quick Start",
@@ -1068,10 +1051,8 @@ function SideNav(__output, { currentPath }) {
 
 					const args = [
 						__output,
-
 						{
 							title: "Guide",
-
 							children: function children(__output) {
 								_$_.push_component();
 
@@ -1080,7 +1061,6 @@ function SideNav(__output, { currentPath }) {
 
 									const args = [
 										__output,
-
 										{
 											href: "/guide/app",
 											text: "Application",
@@ -1096,7 +1076,6 @@ function SideNav(__output, { currentPath }) {
 
 									const args = [
 										__output,
-
 										{
 											href: "/guide/syntax",
 											text: "Syntax",
@@ -1312,7 +1291,6 @@ export function ArticleWithChildrenThenSibling(__output) {
 
 			const args = [
 				__output,
-
 				{
 					children: function children(__output) {
 						_$_.push_component();
@@ -1414,7 +1392,6 @@ export function ArticleWithHtmlChildThenSibling(__output) {
 
 			const args = [
 				__output,
-
 				{
 					children: function children(__output) {
 						_$_.push_component();
@@ -1557,7 +1534,6 @@ export function InlineArticleWithHtmlChild(__output) {
 
 		const args = [
 			__output,
-
 			{
 				children: function children(__output) {
 					_$_.push_component();
@@ -1786,11 +1762,9 @@ export function DocsLayoutWithData(__output) {
 
 		const args = [
 			__output,
-
 			{
 				editPath: "docs/styling.md",
 				nextLink: { href: '/next', text: 'Next' },
-
 				children: function children(__output) {
 					_$_.push_component();
 					__output.push('<div');
@@ -1827,7 +1801,6 @@ export function DocsLayoutWithoutData(__output) {
 
 		const args = [
 			__output,
-
 			{
 				children: function children(__output) {
 					_$_.push_component();
@@ -1857,7 +1830,6 @@ export function DocsLayoutWithoutData(__output) {
 
 async function DocsLayoutExact(
 	__output,
-
 	{
 		children,
 		editPath = '',
@@ -2112,12 +2084,10 @@ export function DocsLayoutExactWithData(__output) {
 
 		const args = [
 			__output,
-
 			{
 				editPath: "docs/guide/styling.md",
 				prevLink: { href: '/prev', text: 'Previous' },
 				nextLink: { href: '/next', text: 'Next' },
-
 				toc: [
 					{ href: '#intro', text: 'Introduction' },
 					{ href: '#usage', text: 'Usage' }
@@ -2163,13 +2133,11 @@ export function DocsLayoutExactWithoutData(__output) {
 
 		const args = [
 			__output,
-
 			{
 				editPath,
 				prevLink,
 				nextLink,
 				toc,
-
 				children: function children(__output) {
 					_$_.push_component();
 					__output.push('<div');
@@ -2336,10 +2304,8 @@ export function NestedTemplateInLayout(__output) {
 
 		const args = [
 			__output,
-
 			{
 				data: doc,
-
 				children: function children(__output) {
 					_$_.push_component();
 					__output.push('<div');