ripple 0.3.3 → 0.3.5

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

@@ -88,6 +88,8 @@ var root_83 = _$_.template(`<div class="layout"><template id="page-data"></templ
 var root_85 = _$_.template(`<div class="doc-content"><!></div>`, 0);
 var root_84 = _$_.template(`<!>`, 1, 1);
 
+import { track } from 'ripple';
+
 export function StaticHtml(__anchor, _, __block) {
 	_$_.push_component();
 
@@ -213,7 +215,7 @@ export function HtmlWithReactivity(__anchor, _, __block) {
 	_$_.pop_component();
 }
 
-export function HtmlWrapper(__anchor, __props, __block) {
+export function HtmlWrapper(__anchor, { children }, __block) {
 	_$_.push_component();
 
 	var div_6 = root_6();
@@ -224,7 +226,7 @@ export function HtmlWrapper(__anchor, __props, __block) {
 		{
 			var node_7 = _$_.child(div_7);
 
-			_$_.composite(() => __props.children, node_7, {});
+			children(node_7, {}, _$_.active_block);
 			_$_.pop(div_7);
 		}
 	}
@@ -436,7 +438,11 @@ function DocFooter(__anchor, _, __block) {
 	_$_.pop_component();
 }
 
-export function DocLayout(__anchor, __props, __block) {
+export function DocLayout(
+	__anchor,
+	{ children, editPath = '', nextLink = null, toc = [] },
+	__block
+) {
 	_$_.push_component();
 
 	var div_14 = root_18();
@@ -453,7 +459,7 @@ export function DocLayout(__anchor, __props, __block) {
 				{
 					var node_19 = _$_.child(div_15);
 
-					_$_.composite(() => __props.children, node_19, {});
+					children(node_19, {}, _$_.active_block);
 					_$_.pop(div_15);
 				}
 			}
@@ -468,17 +474,15 @@ export function DocLayout(__anchor, __props, __block) {
 
 					{
 						var a_1 = _$_.child(div_17);
-					}
 
-					_$_.render(() => {
-						_$_.set_attribute(a_1, 'href', `https://github.com/edit/${_$_.fallback(__props.editPath, '')}`);
-					});
+						_$_.set_attribute(a_1, 'href', `https://github.com/edit/${editPath}`);
+					}
 
 					_$_.append(__anchor, div_17);
 				};
 
 				_$_.if(node_20, (__render) => {
-					if (_$_.fallback(__props.editPath, '')) __render(consequent);
+					if (editPath) __render(consequent);
 				});
 			}
 
@@ -500,13 +504,13 @@ export function DocLayout(__anchor, __props, __block) {
 
 					_$_.render(
 						(__prev) => {
-							var __a = _$_.fallback(__props.nextLink, null).text;
+							var __a = nextLink.text;
 
 							if (__prev.a !== __a) {
 								_$_.set_text(text_1, __prev.a = __a);
 							}
 
-							var __b = _$_.fallback(__props.nextLink, null).href;
+							var __b = nextLink.href;
 
 							if (__prev.b !== __b) {
 								_$_.set_attribute(a_2, 'href', __prev.b = __b);
@@ -519,7 +523,7 @@ export function DocLayout(__anchor, __props, __block) {
 				};
 
 				_$_.if(node_21, (__render) => {
-					if (_$_.fallback(__props.nextLink, null)) __render(consequent_1);
+					if (nextLink) __render(consequent_1);
 				});
 			}
 
@@ -544,7 +548,7 @@ export function DocLayout(__anchor, __props, __block) {
 						{
 							_$_.for(
 								ul_1,
-								() => _$_.fallback(__props.toc, []),
+								() => toc,
 								(__anchor, item) => {
 									var li_1 = root_22();
 
@@ -588,7 +592,7 @@ export function DocLayout(__anchor, __props, __block) {
 				};
 
 				_$_.if(node_23, (__render) => {
-					if (_$_.fallback(__props.toc, []).length > 0) __render(consequent_2);
+					if (toc.length > 0) __render(consequent_2);
 				});
 			}
 
@@ -715,7 +719,7 @@ export function HtmlWithUndefinedContent(__anchor, _, __block) {
 	_$_.pop_component();
 }
 
-function DynamicHeading(__anchor, __props, __block) {
+function DynamicHeading(__anchor, { level, children }, __block) {
 	_$_.push_component();
 
 	var fragment_8 = root_29();
@@ -728,7 +732,7 @@ function DynamicHeading(__anchor, __props, __block) {
 			{
 				var node_31 = _$_.child(h1_2);
 
-				_$_.composite(() => __props.children, node_31, {});
+				children(node_31, {}, _$_.active_block);
 				_$_.pop(h1_2);
 			}
 
@@ -741,7 +745,7 @@ function DynamicHeading(__anchor, __props, __block) {
 			{
 				var node_32 = _$_.child(h2_1);
 
-				_$_.composite(() => __props.children, node_32, {});
+				children(node_32, {}, _$_.active_block);
 				_$_.pop(h2_1);
 			}
 
@@ -751,7 +755,7 @@ function DynamicHeading(__anchor, __props, __block) {
 		_$_.switch(node_30, () => {
 			var result = [];
 
-			switch (__props.level) {
+			switch (level) {
 				case 1:
 					result.push(switch_case_0);
 
@@ -766,10 +770,10 @@ function DynamicHeading(__anchor, __props, __block) {
 	_$_.pop_component();
 }
 
-function CodeBlock(__anchor, __props, __block) {
+function CodeBlock(__anchor, { code }, __block) {
 	_$_.push_component();
 
-	const highlighted = `<pre class="shiki"><code>${__props.code}</code></pre>`;
+	const highlighted = `<pre class="shiki"><code>${code}</code></pre>`;
 	var div_22 = root_32();
 
 	{
@@ -794,7 +798,7 @@ function CodeBlock(__anchor, __props, __block) {
 	_$_.pop_component();
 }
 
-function ContentWrapper(__anchor, __props, __block) {
+function ContentWrapper(__anchor, { children }, __block) {
 	_$_.push_component();
 
 	var div_25 = root_33();
@@ -805,7 +809,7 @@ function ContentWrapper(__anchor, __props, __block) {
 		{
 			var node_34 = _$_.child(div_26);
 
-			_$_.composite(() => __props.children, node_34, {});
+			children(node_34, {}, _$_.active_block);
 			_$_.pop(div_26);
 		}
 	}
@@ -861,11 +865,13 @@ export function HtmlAfterSwitchInChildren(__anchor, _, __block) {
 	_$_.pop_component();
 }
 
-function NavItem(__anchor, __props, __block) {
+function NavItem(__anchor, { href, text, active = false }, __block) {
 	_$_.push_component();
 
 	var div_27 = root_36();
 
+	_$_.set_class(div_27, `nav-item${active ? ' active' : ''}`, void 0, true);
+
 	{
 		var node_38 = _$_.child(div_27);
 
@@ -877,18 +883,21 @@ function NavItem(__anchor, __props, __block) {
 			};
 
 			_$_.if(node_38, (__render) => {
-				if (_$_.fallback(__props.active, false)) __render(consequent_3);
+				if (active) __render(consequent_3);
 			});
 		}
 
 		var a_4 = _$_.sibling(node_38);
 
+		_$_.set_attribute(a_4, 'href', href);
+
 		{
 			var span_1 = _$_.child(a_4);
 
 			{
 				var text_4 = _$_.child(span_1, true);
 
+				text_4.nodeValue = text;
 				_$_.pop(span_1);
 			}
 		}
@@ -896,34 +905,11 @@ function NavItem(__anchor, __props, __block) {
 		_$_.pop(div_27);
 	}
 
-	_$_.render(
-		(__prev) => {
-			var __a = __props.text;
-
-			if (__prev.a !== __a) {
-				_$_.set_text(text_4, __prev.a = __a);
-			}
-
-			var __b = __props.href;
-
-			if (__prev.b !== __b) {
-				_$_.set_attribute(a_4, 'href', __prev.b = __b);
-			}
-
-			var __c = `nav-item${_$_.fallback(__props.active, false) ? ' active' : ''}`;
-
-			if (__prev.c !== __c) {
-				_$_.set_class(div_27, __prev.c = __c, void 0, true);
-			}
-		},
-		{ a: ' ', b: void 0, c: Symbol() }
-	);
-
 	_$_.append(__anchor, div_27);
 	_$_.pop_component();
 }
 
-function SidebarSection(__anchor, __props, __block) {
+function SidebarSection(__anchor, { title, children }, __block) {
 	_$_.push_component();
 
 	let expanded = _$_.track(true, void 0, void 0, __block);
@@ -938,6 +924,7 @@ function SidebarSection(__anchor, __props, __block) {
 			{
 				var text_5 = _$_.child(h2_2, true);
 
+				text_5.nodeValue = title;
 				_$_.pop(h2_2);
 			}
 
@@ -957,7 +944,7 @@ function SidebarSection(__anchor, __props, __block) {
 				{
 					var node_40 = _$_.child(div_30);
 
-					_$_.composite(() => __props.children, node_40, {});
+					children(node_40, {}, _$_.active_block);
 					_$_.pop(div_30);
 				}
 
@@ -972,15 +959,11 @@ function SidebarSection(__anchor, __props, __block) {
 		_$_.pop(section_2);
 	}
 
-	_$_.render(() => {
-		_$_.set_text(text_5, __props.title);
-	});
-
 	_$_.append(__anchor, section_2);
 	_$_.pop_component();
 }
 
-function SideNav(__anchor, __props, __block) {
+function SideNav(__anchor, { currentPath }, __block) {
 	_$_.push_component();
 
 	var aside_2 = root_40();
@@ -1009,9 +992,7 @@ function SideNav(__anchor, __props, __block) {
 								{
 									href: "/intro",
 									text: "Introduction",
-									get active() {
-										return __props.currentPath === '/intro';
-									}
+									active: currentPath === '/intro'
 								},
 								_$_.active_block
 							);
@@ -1023,9 +1004,7 @@ function SideNav(__anchor, __props, __block) {
 								{
 									href: "/start",
 									text: "Quick Start",
-									get active() {
-										return __props.currentPath === '/start';
-									}
+									active: currentPath === '/start'
 								},
 								_$_.active_block
 							);
@@ -1060,9 +1039,7 @@ function SideNav(__anchor, __props, __block) {
 								{
 									href: "/guide/app",
 									text: "Application",
-									get active() {
-										return __props.currentPath === '/guide/app';
-									}
+									active: currentPath === '/guide/app'
 								},
 								_$_.active_block
 							);
@@ -1074,9 +1051,7 @@ function SideNav(__anchor, __props, __block) {
 								{
 									href: "/guide/syntax",
 									text: "Syntax",
-									get active() {
-										return __props.currentPath === '/guide/syntax';
-									}
+									active: currentPath === '/guide/syntax'
 								},
 								_$_.active_block
 							);
@@ -1160,7 +1135,7 @@ export function LayoutWithSidebarAndMain(__anchor, _, __block) {
 	_$_.pop_component();
 }
 
-function ArticleWrapper(__anchor, __props, __block) {
+function ArticleWrapper(__anchor, { children }, __block) {
 	_$_.push_component();
 
 	var article_2 = root_46();
@@ -1171,7 +1146,7 @@ function ArticleWrapper(__anchor, __props, __block) {
 		{
 			var node_51 = _$_.child(div_37);
 
-			_$_.composite(() => __props.children, node_51, {});
+			children(node_51, {}, _$_.active_block);
 			_$_.pop(div_37);
 		}
 	}
@@ -1308,7 +1283,7 @@ export function ArticleWithHtmlChildThenSibling(__anchor, _, __block) {
 	_$_.pop_component();
 }
 
-function InlineArticleLayout(__anchor, __props, __block) {
+function InlineArticleLayout(__anchor, { children }, __block) {
 	_$_.push_component();
 
 	var div_43 = root_55();
@@ -1322,7 +1297,7 @@ function InlineArticleLayout(__anchor, __props, __block) {
 			{
 				var node_60 = _$_.child(div_44);
 
-				_$_.composite(() => __props.children, node_60, {});
+				children(node_60, {}, _$_.active_block);
 				_$_.pop(div_44);
 			}
 		}
@@ -1416,7 +1391,11 @@ function FooterStub(__anchor, _, __block) {
 	_$_.pop_component();
 }
 
-function DocsLayoutInner(__anchor, __props, __block) {
+function DocsLayoutInner(
+	__anchor,
+	{ children, editPath = '', nextLink = null },
+	__block
+) {
 	_$_.push_component();
 
 	var div_47 = root_62();
@@ -1453,7 +1432,7 @@ function DocsLayoutInner(__anchor, __props, __block) {
 								{
 									var node_67 = _$_.child(div_49);
 
-									_$_.composite(() => __props.children, node_67, {});
+									children(node_67, {}, _$_.active_block);
 									_$_.pop(div_49);
 								}
 							}
@@ -1470,7 +1449,7 @@ function DocsLayoutInner(__anchor, __props, __block) {
 								};
 
 								_$_.if(node_68, (__render) => {
-									if (_$_.fallback(__props.editPath, '')) __render(consequent_10);
+									if (editPath) __render(consequent_10);
 								});
 							}
 
@@ -1492,13 +1471,13 @@ function DocsLayoutInner(__anchor, __props, __block) {
 
 									_$_.render(
 										(__prev) => {
-											var __a = _$_.fallback(__props.nextLink, null).text;
+											var __a = nextLink.text;
 
 											if (__prev.a !== __a) {
 												_$_.set_text(text_6, __prev.a = __a);
 											}
 
-											var __b = _$_.fallback(__props.nextLink, null).href;
+											var __b = nextLink.href;
 
 											if (__prev.b !== __b) {
 												_$_.set_attribute(a_5, 'href', __prev.b = __b);
@@ -1511,7 +1490,7 @@ function DocsLayoutInner(__anchor, __props, __block) {
 								};
 
 								_$_.if(node_69, (__render) => {
-									if (_$_.fallback(__props.nextLink, null)) __render(consequent_11);
+									if (nextLink) __render(consequent_11);
 								});
 							}
 
@@ -1608,7 +1587,17 @@ export function DocsLayoutWithoutData(__anchor, _, __block) {
 	_$_.pop_component();
 }
 
-function DocsLayoutExact(__anchor, __props, __block) {
+function DocsLayoutExact(
+	__anchor,
+	{
+		children,
+		editPath = '',
+		prevLink = null,
+		nextLink = null,
+		toc = []
+	},
+	__block
+) {
 	_$_.push_component();
 
 	var div_56 = root_69();
@@ -1645,7 +1634,7 @@ function DocsLayoutExact(__anchor, __props, __block) {
 								{
 									var node_77 = _$_.child(div_58);
 
-									_$_.composite(() => __props.children, node_77, {});
+									children(node_77, {}, _$_.active_block);
 									_$_.pop(div_58);
 								}
 							}
@@ -1660,17 +1649,15 @@ function DocsLayoutExact(__anchor, __props, __block) {
 
 									{
 										var a_6 = _$_.child(div_62);
-									}
 
-									_$_.render(() => {
-										_$_.set_attribute(a_6, 'href', `/edit/${_$_.fallback(__props.editPath, '')}`);
-									});
+										_$_.set_attribute(a_6, 'href', `/edit/${editPath}`);
+									}
 
 									_$_.append(__anchor, div_62);
 								};
 
 								_$_.if(node_78, (__render) => {
-									if (_$_.fallback(__props.editPath, '')) __render(consequent_12);
+									if (editPath) __render(consequent_12);
 								});
 							}
 
@@ -1699,13 +1686,13 @@ function DocsLayoutExact(__anchor, __props, __block) {
 
 												_$_.render(
 													(__prev) => {
-														var __a = _$_.fallback(__props.prevLink, null).text;
+														var __a = prevLink.text;
 
 														if (__prev.a !== __a) {
 															_$_.set_text(text_7, __prev.a = __a);
 														}
 
-														var __b = _$_.fallback(__props.prevLink, null).href;
+														var __b = prevLink.href;
 
 														if (__prev.b !== __b) {
 															_$_.set_attribute(a_7, 'href', __prev.b = __b);
@@ -1724,7 +1711,7 @@ function DocsLayoutExact(__anchor, __props, __block) {
 											};
 
 											_$_.if(node_80, (__render) => {
-												if (_$_.fallback(__props.prevLink, null)) __render(consequent_13); else __render(alternate, false);
+												if (prevLink) __render(consequent_13); else __render(alternate, false);
 											});
 										}
 
@@ -1746,13 +1733,13 @@ function DocsLayoutExact(__anchor, __props, __block) {
 
 												_$_.render(
 													(__prev) => {
-														var __a = _$_.fallback(__props.nextLink, null).text;
+														var __a = nextLink.text;
 
 														if (__prev.a !== __a) {
 															_$_.set_text(text_8, __prev.a = __a);
 														}
 
-														var __b = _$_.fallback(__props.nextLink, null).href;
+														var __b = nextLink.href;
 
 														if (__prev.b !== __b) {
 															_$_.set_attribute(a_8, 'href', __prev.b = __b);
@@ -1765,7 +1752,7 @@ function DocsLayoutExact(__anchor, __props, __block) {
 											};
 
 											_$_.if(node_81, (__render) => {
-												if (_$_.fallback(__props.nextLink, null)) __render(consequent_14);
+												if (nextLink) __render(consequent_14);
 											});
 										}
 
@@ -1776,7 +1763,7 @@ function DocsLayoutExact(__anchor, __props, __block) {
 								};
 
 								_$_.if(node_79, (__render) => {
-									if (_$_.fallback(__props.prevLink, null) || _$_.fallback(__props.nextLink, null)) __render(consequent_15);
+									if (prevLink || nextLink) __render(consequent_15);
 								});
 							}
 
@@ -1804,7 +1791,7 @@ function DocsLayoutExact(__anchor, __props, __block) {
 									{
 										_$_.for(
 											nav_6,
-											() => _$_.fallback(__props.toc, []),
+											() => toc,
 											(__anchor, item) => {
 												var a_9 = root_76();
 
@@ -1844,7 +1831,7 @@ function DocsLayoutExact(__anchor, __props, __block) {
 							};
 
 							_$_.if(node_83, (__render) => {
-								if (_$_.fallback(__props.toc, []).length > 0) __render(consequent_16);
+								if (toc.length > 0) __render(consequent_16);
 							});
 						}
 
@@ -1988,7 +1975,7 @@ export function TemplateWithHtmlAndSiblings(__anchor, _, __block) {
 	_$_.pop_component();
 }
 
-function LayoutWithTemplate(__anchor, __props, __block) {
+function LayoutWithTemplate(__anchor, { children, data }, __block) {
 	_$_.push_component();
 
 	var div_68 = root_83();
@@ -2000,13 +1987,13 @@ function LayoutWithTemplate(__anchor, __props, __block) {
 		{
 			var node_88 = _$_.child(main_4);
 
-			_$_.composite(() => __props.children, node_88, {});
+			children(node_88, {}, _$_.active_block);
 			_$_.pop(main_4);
 		}
 	}
 
 	_$_.render(() => {
-		template_3.innerHTML = _$_.with_scope(__block, () => JSON.stringify(__props.data));
+		template_3.innerHTML = _$_.with_scope(__block, () => JSON.stringify(data));
 	});
 
 	_$_.append(__anchor, div_68);

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

@@ -22,7 +22,9 @@ var root_15 = _$_.template(`<div class="tabs"><div class="tab-list"><button clas
 var root_18 = _$_.template(`<div class="container"><ul class="list"><li class="item"> </li><li class="item">Another item</li></ul><h2 class="heading">Static Heading</h2><p class="para">Static paragraph</p></div><button class="inc">Increment</button>`, 1, 2);
 var root_19 = _$_.template(`<div class="wrapper"><ul class="features"><li><strong>Feature One</strong>: Description of feature one with <code>code</code> reference</li><li><strong>Feature Two</strong>: Another feature description</li><li><strong>Feature Three</strong>: Third feature</li></ul><h2 class="section-heading">Section Heading</h2><p class="section-content">Static paragraph with <a href="/link">a link</a> and more text.</p></div>`, 0);
 
-export function IfWithChildren(__anchor, __props, __block) {
+import { track } from 'ripple';
+
+export function IfWithChildren(__anchor, { children }, __block) {
 	_$_.push_component();
 
 	let expanded = _$_.track(true, void 0, void 0, __block);
@@ -42,7 +44,7 @@ export function IfWithChildren(__anchor, __props, __block) {
 				{
 					var node_1 = _$_.child(div_3);
 
-					_$_.composite(() => __props.children, node_1, {});
+					children(node_1, {}, _$_.active_block);
 					_$_.pop(div_3);
 				}
 
@@ -61,7 +63,7 @@ export function IfWithChildren(__anchor, __props, __block) {
 	_$_.pop_component();
 }
 
-export function ChildItem(__anchor, __props, __block) {
+export function ChildItem(__anchor, { text }, __block) {
 	_$_.push_component();
 
 	var div_4 = root_2();
@@ -69,13 +71,10 @@ export function ChildItem(__anchor, __props, __block) {
 	{
 		var text_1 = _$_.child(div_4, true);
 
+		text_1.nodeValue = text;
 		_$_.pop(div_4);
 	}
 
-	_$_.render(() => {
-		_$_.set_text(text_1, __props.text);
-	});
-
 	_$_.append(__anchor, div_4);
 	_$_.pop_component();
 }
@@ -143,7 +142,7 @@ export function IfWithStaticChildren(__anchor, _, __block) {
 	_$_.pop_component();
 }
 
-export function IfWithSiblingsAndChildren(__anchor, __props, __block) {
+export function IfWithSiblingsAndChildren(__anchor, { children }, __block) {
 	_$_.push_component();
 
 	let expanded = _$_.track(true, void 0, void 0, __block);
@@ -164,7 +163,7 @@ export function IfWithSiblingsAndChildren(__anchor, __props, __block) {
 				{
 					var node_7 = _$_.child(div_9);
 
-					_$_.composite(() => __props.children, node_7, {});
+					children(node_7, {}, _$_.active_block);
 					_$_.pop(div_9);
 				}
 

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

@@ -22,6 +22,8 @@ var root_19 = _$_.template(`<div class="state">Error occurred</div>`, 0);
 var root_17 = _$_.template(`<!>`, 1, 1);
 var root_15 = _$_.template(`<div><button class="success">Success</button><button class="error">Error</button><button class="loading">Loading</button><!></div>`, 0);
 
+import { track } from 'ripple';
+
 export function IfTruthy(__anchor, _, __block) {
 	_$_.push_component();
 

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

@@ -28,6 +28,8 @@ var root_19 = _$_.template(`<!>`, 1, 1);
 var root_18 = _$_.template(`<div class="before">before</div><!>`, 1, 2);
 var root_25 = _$_.template(`<div class="resolved-row"> </div>`, 0);
 
+import { track } from 'ripple';
+
 export function MixedControlFlowStatic(__anchor, _, __block) {
 	_$_.push_component();
 
@@ -456,11 +458,11 @@ export function MixedControlFlowAsyncPending(__anchor, _, __block) {
 	_$_.pop_component();
 }
 
-function AsyncRow(__anchor, __props, __block) {
+function AsyncRow(__anchor, { label }, __block) {
 	_$_.async(async () => {
 		_$_.push_component();
 
-		let value = (await _$_.maybe_tracked(_$_.with_scope(__block, async () => Promise.resolve(__props.label))))();
+		let value = (await _$_.maybe_tracked(_$_.with_scope(__block, async () => Promise.resolve(label))))();
 
 		if (_$_.aborted()) return;
 

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

@@ -11,7 +11,7 @@ var root_5 = _$_.template(`<div><div class="main-content">Main page content</div
 var root_8 = _$_.template(`<div class="portal-content">Portal content</div>`, 0);
 var root_7 = _$_.template(`<div class="outer"><div class="inner"><span>Nested content</span></div><!></div>`, 0);
 
-import { Portal } from 'ripple';
+import { Portal, track } from 'ripple';
 
 export function SimplePortal(__anchor, _, __block) {
 	_$_.push_component();

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

@@ -8,6 +8,8 @@ var root_3 = _$_.template(`<div class="sum"> </div>`, 0);
 var root_4 = _$_.template(`<div class="x"> </div><div class="y"> </div><div class="z"> </div>`, 1, 3);
 var root_5 = _$_.template(`<div class="name"> </div>`, 0);
 
+import { track } from 'ripple';
+
 export function TrackedState(__anchor, _, __block) {
 	_$_.push_component();
 

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

@@ -130,6 +130,8 @@ var root_121 = _$_.template(`<div class="middle">middle</div><section class="nes
 var root_127 = _$_.template(`<div class="root-1">root-1</div><div class="root-2">root-2</div><div class="root-3">root-3</div><div class="root-4">root-4</div>`, 1, 4);
 var root_119 = _$_.template(`<button class="toggle-c1">Toggle C1</button><button class="toggle-c2">Toggle C2</button><button class="toggle-c3">Toggle C3</button><button class="toggle-c4">Toggle C4</button><div class="top">top</div><!><!><!>`, 1, 8);
 
+import { track } from 'ripple';
+
 export function DirectReturn(__anchor, _, __block) {
 	_$_.push_component();
 

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

@@ -25,6 +25,8 @@ var root_21 = _$_.template(`<div class="nobreak-2">NoBreak 2</div>`, 0);
 var root_22 = _$_.template(`<div class="nobreak-3">NoBreak 3</div>`, 0);
 var root_19 = _$_.template(`<button class="nobreak-toggle">Toggle</button><!>`, 1, 2);
 
+import { track } from 'ripple';
+
 export function SwitchStatic(__anchor, _, __block) {
 	_$_.push_component();