ripple 0.3.29 → 0.3.31

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # ripple
 
+## 0.3.31
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.3.31
+  - @tsrx/ripple@0.0.13
+
+## 0.3.30
+
+### Patch Changes
+
+- [`7f59ed8`](https://github.com/Ripple-TS/ripple/commit/7f59ed80d7b44c847fb9eb8bf00d4fe9835c3136)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Replace `node:crypto` usage
+  in the compiler with a pure-JS implementation so Ripple can be compiled inside
+  browser workers (e.g. the Monaco-based playground) where `crypto.createHash` is
+  not available.
+
+  The hashing utility is split into two functions:
+  - `simple_hash` — fast non-cryptographic djb2 (base36). Used for CSS class-name
+    prefixes and runtime `{html}` hydration markers where the input is user
+    content and the output multiplies across the shipped bundle.
+  - `strong_hash` — preimage-resistant SHA-256 prefix (pure-JS via
+    `@noble/hashes`). Used everywhere a hash is derived from a server-only
+    filesystem path (`#server` RPC ids, `track`/`trackAsync` ids, head-element
+    hydration markers) so the hash can't be inverted to reveal the original path.
+
+  The runtime `ripple` package no longer ships its own `hashing.js` — it
+  re-exports `simple_hash`/`strong_hash` from `@tsrx/core`, and the compiler emits
+  `_$_.simple_hash` (previously `_$_.hash`) for dynamic `{html}` hydration
+  markers.
+
+- Updated dependencies
+  [[`7f59ed8`](https://github.com/Ripple-TS/ripple/commit/7f59ed80d7b44c847fb9eb8bf00d4fe9835c3136)]:
+  - @tsrx/ripple@0.0.12
+  - ripple@0.3.30
+
 ## 0.3.29
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.29",
+  "version": "0.3.31",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -76,7 +76,7 @@
     "esm-env": "^1.2.2",
     "@types/estree": "^1.0.8",
     "@types/estree-jsx": "^1.0.5",
-    "@tsrx/ripple": "0.0.11"
+    "@tsrx/ripple": "0.0.13"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
@@ -84,9 +84,9 @@
     "typescript": "^5.9.3",
     "@volar/language-core": "~2.4.28",
     "vscode-languageserver-types": "^3.17.5",
-    "@tsrx/core": "0.0.9"
+    "@tsrx/core": "0.0.11"
   },
   "peerDependencies": {
-    "ripple": "0.3.29"
+    "ripple": "0.3.31"
   }
 }

package/src/runtime/internal/server/index.js

@@ -51,7 +51,7 @@ import { COMPONENT_BLOCK, TRY_BLOCK } from './constants.js';
 
 export { escape };
 export { register_component_css as register_css } from './css-registry.js';
-export { hash } from '../../../utils/hashing.js';
+export { simpleHash as simple_hash, strongHash as strong_hash } from '@tsrx/core';
 export { context } from './context.js';
 export { try_block, component_block, regular_block } from './blocks.js';
 export { array_slice };

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

@@ -22,7 +22,7 @@ export function StaticTitle(__anchor, _, __block) {
 
 	var div_1 = root();
 
-	_$_.head('o6otu9', (__anchor) => {
+	_$_.head('c8908187', (__anchor) => {
 		_$_.document.title = 'Static Test Title';
 	});
 
@@ -47,7 +47,7 @@ export function ReactiveTitle(__anchor, _, __block) {
 		}
 	}
 
-	_$_.head('1kaaszj', (__anchor) => {
+	_$_.head('8af28792', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = _$_.get(lazy);
 		});
@@ -62,7 +62,7 @@ export function MultipleHeadElements(__anchor, _, __block) {
 
 	var div_3 = root_2();
 
-	_$_.head('9nqthf', (__anchor) => {
+	_$_.head('3a79945b', (__anchor) => {
 		var fragment = root_3();
 
 		_$_.document.title = 'Page Title';
@@ -87,7 +87,7 @@ export function ReactiveMetaTags(__anchor, _, __block) {
 		_$_.pop(div_4);
 	}
 
-	_$_.head('1v7o69o', (__anchor) => {
+	_$_.head('c9fd7b0f', (__anchor) => {
 		var meta_1 = root_5();
 
 		_$_.document.title = 'My Page';
@@ -112,7 +112,7 @@ export function TitleWithTemplate(__anchor, _, __block) {
 		_$_.pop(div_5);
 	}
 
-	_$_.head('za44d', (__anchor) => {
+	_$_.head('72f81455', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = `Hello ${_$_.get(lazy_2)}!`;
 		});
@@ -127,7 +127,7 @@ export function EmptyTitle(__anchor, _, __block) {
 
 	var div_6 = root_7();
 
-	_$_.head('1st5x80', (__anchor) => {
+	_$_.head('35a7fe4a', (__anchor) => {
 		_$_.document.title = '';
 	});
 
@@ -149,7 +149,7 @@ export function ConditionalTitle(__anchor, _, __block) {
 		_$_.pop(div_7);
 	}
 
-	_$_.head('54ijvi', (__anchor) => {
+	_$_.head('453e9ed4', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = _$_.get(lazy_3) ? 'App - ' + _$_.get(lazy_4) : _$_.get(lazy_4);
 		});
@@ -177,7 +177,7 @@ export function ComputedTitle(__anchor, _, __block) {
 		}
 	}
 
-	_$_.head('h5jm3a', (__anchor) => {
+	_$_.head('63888c83', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = prefix + _$_.get(lazy_5);
 		});
@@ -192,11 +192,11 @@ export function MultipleHeadBlocks(__anchor, _, __block) {
 
 	var div_9 = root_10();
 
-	_$_.head('133vcai', (__anchor) => {
+	_$_.head('43cf39fd', (__anchor) => {
 		_$_.document.title = 'First Head';
 	});
 
-	_$_.head('fju8tw', (__anchor) => {
+	_$_.head('e9abd92f', (__anchor) => {
 		var meta_2 = root_11();
 
 		_$_.append(__anchor, meta_2);
@@ -211,7 +211,7 @@ export function HeadWithStyle(__anchor, _, __block) {
 
 	var div_10 = root_12();
 
-	_$_.head('1iodql4', (__anchor) => {
+	_$_.head('d246667e', (__anchor) => {
 		_$_.document.title = 'Styled Page';
 	});
 

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

@@ -18,7 +18,7 @@ export function StaticTitle() {
 	});
 
 	_$_.set_output_target('head');
-	_$_.output_push('<!--o6otu9-->');
+	_$_.output_push('<!--c8908187-->');
 	_$_.output_push('<title');
 	_$_.output_push('>');
 
@@ -55,7 +55,7 @@ export function ReactiveTitle() {
 	});
 
 	_$_.set_output_target('head');
-	_$_.output_push('<!--1kaaszj-->');
+	_$_.output_push('<!--8af28792-->');
 	_$_.output_push('<title');
 	_$_.output_push('>');
 
@@ -83,7 +83,7 @@ export function MultipleHeadElements() {
 	});
 
 	_$_.set_output_target('head');
-	_$_.output_push('<!--9nqthf-->');
+	_$_.output_push('<!--3a79945b-->');
 	_$_.output_push('<title');
 	_$_.output_push('>');
 
@@ -121,7 +121,7 @@ export function ReactiveMetaTags() {
 	});
 
 	_$_.set_output_target('head');
-	_$_.output_push('<!--1v7o69o-->');
+	_$_.output_push('<!--c9fd7b0f-->');
 	_$_.output_push('<title');
 	_$_.output_push('>');
 
@@ -155,7 +155,7 @@ export function TitleWithTemplate() {
 	});
 
 	_$_.set_output_target('head');
-	_$_.output_push('<!--za44d-->');
+	_$_.output_push('<!--72f81455-->');
 	_$_.output_push('<title');
 	_$_.output_push('>');
 
@@ -183,7 +183,7 @@ export function EmptyTitle() {
 	});
 
 	_$_.set_output_target('head');
-	_$_.output_push('<!--1st5x80-->');
+	_$_.output_push('<!--35a7fe4a-->');
 	_$_.output_push('<title');
 	_$_.output_push('>');
 
@@ -214,7 +214,7 @@ export function ConditionalTitle() {
 	});
 
 	_$_.set_output_target('head');
-	_$_.output_push('<!--54ijvi-->');
+	_$_.output_push('<!--453e9ed4-->');
 	_$_.output_push('<title');
 	_$_.output_push('>');
 
@@ -252,7 +252,7 @@ export function ComputedTitle() {
 	});
 
 	_$_.set_output_target('head');
-	_$_.output_push('<!--h5jm3a-->');
+	_$_.output_push('<!--63888c83-->');
 	_$_.output_push('<title');
 	_$_.output_push('>');
 
@@ -280,7 +280,7 @@ export function MultipleHeadBlocks() {
 	});
 
 	_$_.set_output_target('head');
-	_$_.output_push('<!--133vcai-->');
+	_$_.output_push('<!--43cf39fd-->');
 	_$_.output_push('<title');
 	_$_.output_push('>');
 
@@ -289,7 +289,7 @@ export function MultipleHeadBlocks() {
 	}
 
 	_$_.output_push('</title>');
-	_$_.output_push('<!--fju8tw-->');
+	_$_.output_push('<!--e9abd92f-->');
 	_$_.output_push('<meta');
 	_$_.output_push(' name="author"');
 	_$_.output_push(' content="Test Author"');
@@ -313,7 +313,7 @@ export function HeadWithStyle() {
 	});
 
 	_$_.set_output_target('head');
-	_$_.output_push('<!--1iodql4-->');
+	_$_.output_push('<!--d246667e-->');
 	_$_.output_push('<title');
 	_$_.output_push('>');
 

package/tests/hydration/compiled/server/html-in-template.js

@@ -14,7 +14,7 @@ export function SimpleTemplateHtml() {
 		{
 			const html_value = String(data ?? '');
 
-			_$_.output_push('<!--' + _$_.hash(html_value) + '-->');
+			_$_.output_push('<!--' + _$_.simple_hash(html_value) + '-->');
 			_$_.output_push(html_value);
 			_$_.output_push('<!---->');
 		}
@@ -38,7 +38,7 @@ export function TemplateWithJSON() {
 		{
 			const html_value_1 = String(jsonData ?? '');
 
-			_$_.output_push('<!--' + _$_.hash(html_value_1) + '-->');
+			_$_.output_push('<!--' + _$_.simple_hash(html_value_1) + '-->');
 			_$_.output_push(html_value_1);
 			_$_.output_push('<!---->');
 		}

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

@@ -15,7 +15,7 @@ export function StaticHtml() {
 		{
 			const html_value = String(html ?? '');
 
-			_$_.output_push('<!--' + _$_.hash(html_value) + '-->');
+			_$_.output_push('<!--' + _$_.simple_hash(html_value) + '-->');
 			_$_.output_push(html_value);
 			_$_.output_push('<!---->');
 		}
@@ -38,7 +38,7 @@ export function DynamicHtml() {
 		{
 			const html_value_1 = String(content ?? '');
 
-			_$_.output_push('<!--' + _$_.hash(html_value_1) + '-->');
+			_$_.output_push('<!--' + _$_.simple_hash(html_value_1) + '-->');
 			_$_.output_push(html_value_1);
 			_$_.output_push('<!---->');
 		}
@@ -61,7 +61,7 @@ export function EmptyHtml() {
 		{
 			const html_value_2 = String(html ?? '');
 
-			_$_.output_push('<!--' + _$_.hash(html_value_2) + '-->');
+			_$_.output_push('<!--' + _$_.simple_hash(html_value_2) + '-->');
 			_$_.output_push(html_value_2);
 			_$_.output_push('<!---->');
 		}
@@ -84,7 +84,7 @@ export function ComplexHtml() {
 		{
 			const html_value_3 = String(html ?? '');
 
-			_$_.output_push('<!--' + _$_.hash(html_value_3) + '-->');
+			_$_.output_push('<!--' + _$_.simple_hash(html_value_3) + '-->');
 			_$_.output_push(html_value_3);
 			_$_.output_push('<!---->');
 		}
@@ -108,13 +108,13 @@ export function MultipleHtml() {
 		{
 			const html_value_4 = String(html1 ?? '');
 
-			_$_.output_push('<!--' + _$_.hash(html_value_4) + '-->');
+			_$_.output_push('<!--' + _$_.simple_hash(html_value_4) + '-->');
 			_$_.output_push(html_value_4);
 			_$_.output_push('<!---->');
 
 			const html_value_5 = String(html2 ?? '');
 
-			_$_.output_push('<!--' + _$_.hash(html_value_5) + '-->');
+			_$_.output_push('<!--' + _$_.simple_hash(html_value_5) + '-->');
 			_$_.output_push(html_value_5);
 			_$_.output_push('<!---->');
 		}
@@ -198,7 +198,7 @@ export function HtmlInChildren() {
 						{
 							const html_value_6 = String(content ?? '');
 
-							_$_.output_push('<!--' + _$_.hash(html_value_6) + '-->');
+							_$_.output_push('<!--' + _$_.simple_hash(html_value_6) + '-->');
 							_$_.output_push(html_value_6);
 							_$_.output_push('<!---->');
 						}
@@ -244,7 +244,7 @@ export function HtmlInChildrenWithSiblings() {
 						{
 							const html_value_7 = String(content ?? '');
 
-							_$_.output_push('<!--' + _$_.hash(html_value_7) + '-->');
+							_$_.output_push('<!--' + _$_.simple_hash(html_value_7) + '-->');
 							_$_.output_push(html_value_7);
 							_$_.output_push('<!---->');
 						}
@@ -283,13 +283,13 @@ export function MultipleHtmlInChildren() {
 						{
 							const html_value_8 = String(html1 ?? '');
 
-							_$_.output_push('<!--' + _$_.hash(html_value_8) + '-->');
+							_$_.output_push('<!--' + _$_.simple_hash(html_value_8) + '-->');
 							_$_.output_push(html_value_8);
 							_$_.output_push('<!---->');
 
 							const html_value_9 = String(html2 ?? '');
 
-							_$_.output_push('<!--' + _$_.hash(html_value_9) + '-->');
+							_$_.output_push('<!--' + _$_.simple_hash(html_value_9) + '-->');
 							_$_.output_push(html_value_9);
 							_$_.output_push('<!---->');
 						}
@@ -319,7 +319,7 @@ export function HtmlWithComments() {
 		{
 			const html_value_10 = String(content ?? '');
 
-			_$_.output_push('<!--' + _$_.hash(html_value_10) + '-->');
+			_$_.output_push('<!--' + _$_.simple_hash(html_value_10) + '-->');
 			_$_.output_push(html_value_10);
 			_$_.output_push('<!---->');
 		}
@@ -342,7 +342,7 @@ export function HtmlWithEmptyComment() {
 		{
 			const html_value_11 = String(content ?? '');
 
-			_$_.output_push('<!--' + _$_.hash(html_value_11) + '-->');
+			_$_.output_push('<!--' + _$_.simple_hash(html_value_11) + '-->');
 			_$_.output_push(html_value_11);
 			_$_.output_push('<!---->');
 		}
@@ -373,7 +373,7 @@ export function HtmlWithCommentsInChildren() {
 						{
 							const html_value_12 = String(content ?? '');
 
-							_$_.output_push('<!--' + _$_.hash(html_value_12) + '-->');
+							_$_.output_push('<!--' + _$_.simple_hash(html_value_12) + '-->');
 							_$_.output_push(html_value_12);
 							_$_.output_push('<!---->');
 						}
@@ -579,7 +579,7 @@ export function HtmlWithServerData() {
 						{
 							const html_value_13 = String(content ?? '');
 
-							_$_.output_push('<!--' + _$_.hash(html_value_13) + '-->');
+							_$_.output_push('<!--' + _$_.simple_hash(html_value_13) + '-->');
 							_$_.output_push(html_value_13);
 							_$_.output_push('<!---->');
 						}
@@ -617,7 +617,7 @@ export function HtmlWithClientDefaults() {
 						{
 							const html_value_14 = String(content ?? '');
 
-							_$_.output_push('<!--' + _$_.hash(html_value_14) + '-->');
+							_$_.output_push('<!--' + _$_.simple_hash(html_value_14) + '-->');
 							_$_.output_push(html_value_14);
 							_$_.output_push('<!---->');
 						}
@@ -655,7 +655,7 @@ export function HtmlWithUndefinedContent() {
 						{
 							const html_value_15 = String(content ?? '');
 
-							_$_.output_push('<!--' + _$_.hash(html_value_15) + '-->');
+							_$_.output_push('<!--' + _$_.simple_hash(html_value_15) + '-->');
 							_$_.output_push(html_value_15);
 							_$_.output_push('<!---->');
 						}
@@ -748,7 +748,7 @@ function CodeBlock({ code }) {
 			{
 				const html_value_16 = String(highlighted ?? '');
 
-				_$_.output_push('<!--' + _$_.hash(html_value_16) + '-->');
+				_$_.output_push('<!--' + _$_.simple_hash(html_value_16) + '-->');
 				_$_.output_push(html_value_16);
 				_$_.output_push('<!---->');
 			}
@@ -1393,7 +1393,7 @@ export function ArticleWithHtmlChildThenSibling() {
 							{
 								const html_value_17 = String(htmlContent ?? '');
 
-								_$_.output_push('<!--' + _$_.hash(html_value_17) + '-->');
+								_$_.output_push('<!--' + _$_.simple_hash(html_value_17) + '-->');
 								_$_.output_push(html_value_17);
 								_$_.output_push('<!---->');
 							}
@@ -1528,7 +1528,7 @@ export function InlineArticleWithHtmlChild() {
 						{
 							const html_value_18 = String(htmlContent ?? '');
 
-							_$_.output_push('<!--' + _$_.hash(html_value_18) + '-->');
+							_$_.output_push('<!--' + _$_.simple_hash(html_value_18) + '-->');
 							_$_.output_push(html_value_18);
 							_$_.output_push('<!---->');
 						}
@@ -1762,7 +1762,7 @@ export function DocsLayoutWithData() {
 						{
 							const html_value_19 = String(htmlContent ?? '');
 
-							_$_.output_push('<!--' + _$_.hash(html_value_19) + '-->');
+							_$_.output_push('<!--' + _$_.simple_hash(html_value_19) + '-->');
 							_$_.output_push(html_value_19);
 							_$_.output_push('<!---->');
 						}
@@ -1800,7 +1800,7 @@ export function DocsLayoutWithoutData() {
 						{
 							const html_value_20 = String(htmlContent ?? '');
 
-							_$_.output_push('<!--' + _$_.hash(html_value_20) + '-->');
+							_$_.output_push('<!--' + _$_.simple_hash(html_value_20) + '-->');
 							_$_.output_push(html_value_20);
 							_$_.output_push('<!---->');
 						}
@@ -2082,7 +2082,7 @@ export function DocsLayoutExactWithData() {
 						{
 							const html_value_21 = String(htmlContent ?? '');
 
-							_$_.output_push('<!--' + _$_.hash(html_value_21) + '-->');
+							_$_.output_push('<!--' + _$_.simple_hash(html_value_21) + '-->');
 							_$_.output_push(html_value_21);
 							_$_.output_push('<!---->');
 						}
@@ -2128,7 +2128,7 @@ export function DocsLayoutExactWithoutData() {
 						{
 							const html_value_22 = String(htmlContent ?? '');
 
-							_$_.output_push('<!--' + _$_.hash(html_value_22) + '-->');
+							_$_.output_push('<!--' + _$_.simple_hash(html_value_22) + '-->');
 							_$_.output_push(html_value_22);
 							_$_.output_push('<!---->');
 						}
@@ -2163,7 +2163,7 @@ export function TemplateWithHtmlContent() {
 			{
 				const html_value_23 = String(JSON.stringify(data) ?? '');
 
-				_$_.output_push('<!--' + _$_.hash(html_value_23) + '-->');
+				_$_.output_push('<!--' + _$_.simple_hash(html_value_23) + '-->');
 				_$_.output_push(html_value_23);
 				_$_.output_push('<!---->');
 			}
@@ -2212,7 +2212,7 @@ export function TemplateWithHtmlAndSiblings() {
 			{
 				const html_value_24 = String(JSON.stringify(data) ?? '');
 
-				_$_.output_push('<!--' + _$_.hash(html_value_24) + '-->');
+				_$_.output_push('<!--' + _$_.simple_hash(html_value_24) + '-->');
 				_$_.output_push(html_value_24);
 				_$_.output_push('<!---->');
 			}
@@ -2251,7 +2251,7 @@ function LayoutWithTemplate({ children, data }) {
 			{
 				const html_value_25 = String(JSON.stringify(data) ?? '');
 
-				_$_.output_push('<!--' + _$_.hash(html_value_25) + '-->');
+				_$_.output_push('<!--' + _$_.simple_hash(html_value_25) + '-->');
 				_$_.output_push(html_value_25);
 				_$_.output_push('<!---->');
 			}
@@ -2294,7 +2294,7 @@ export function NestedTemplateInLayout() {
 						{
 							const html_value_26 = String(doc.html ?? '');
 
-							_$_.output_push('<!--' + _$_.hash(html_value_26) + '-->');
+							_$_.output_push('<!--' + _$_.simple_hash(html_value_26) + '-->');
 							_$_.output_push(html_value_26);
 							_$_.output_push('<!---->');
 						}
@@ -2368,7 +2368,7 @@ export function HtmlCodeBlocksWithSiblingChain() {
 				{
 					const html_value_27 = String(html1 ?? '');
 
-					_$_.output_push('<!--' + _$_.hash(html_value_27) + '-->');
+					_$_.output_push('<!--' + _$_.simple_hash(html_value_27) + '-->');
 					_$_.output_push(html_value_27);
 					_$_.output_push('<!---->');
 				}
@@ -2396,7 +2396,7 @@ export function HtmlCodeBlocksWithSiblingChain() {
 				{
 					const html_value_28 = String(html2 ?? '');
 
-					_$_.output_push('<!--' + _$_.hash(html_value_28) + '-->');
+					_$_.output_push('<!--' + _$_.simple_hash(html_value_28) + '-->');
 					_$_.output_push(html_value_28);
 					_$_.output_push('<!---->');
 				}
@@ -2424,7 +2424,7 @@ export function HtmlCodeBlocksWithSiblingChain() {
 				{
 					const html_value_29 = String(html3 ?? '');
 
-					_$_.output_push('<!--' + _$_.hash(html_value_29) + '-->');
+					_$_.output_push('<!--' + _$_.simple_hash(html_value_29) + '-->');
 					_$_.output_push(html_value_29);
 					_$_.output_push('<!---->');
 				}

package/tests/hydration/components/for.tsrx

@@ -413,7 +413,9 @@ component TodoItem(props: { id: number; text: string }) {
 				done = (e.target as HTMLInputElement).checked;
 			}}
 		/>
-		<span class={done ? 'completed' : 'pending'}>{props.text}</span>
+		<span class={done ? 'completed' : 'pending'}>
+			{props.text}
+		</span>
 	</div>
 }
 

package/src/utils/hashing.js

@@ -1,15 +0,0 @@
-const regex_return_characters = /\r/g;
-
-/**
- * Hashes a string to a base36 value
- * @param {string} str
- * @returns {string}
- */
-export function hash(str) {
-	str = str.replace(regex_return_characters, '');
-	let hash = 5381;
-	let i = str.length;
-
-	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
-	return (hash >>> 0).toString(36);
-}

package/tests/client/__snapshots__/computed-properties.test.ripple.snap

@@ -1,49 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`computed tracked properties > should update a property using assignment 1`] = `
-<div>
-  <div>
-    0
-  </div>
-  <button>
-    Increment
-  </button>
-  
-</div>
-`;
-
-exports[`computed tracked properties > should update a property using assignment 2`] = `
-<div>
-  <div>
-    1
-  </div>
-  <button>
-    Increment
-  </button>
-  
-</div>
-`;
-
-exports[`computed tracked properties > should update a property using update expressions 1`] = `
-<div>
-  <div>
-    0
-  </div>
-  <button>
-    Increment
-  </button>
-  
-</div>
-`;
-
-exports[`computed tracked properties > should update a property using update expressions 2`] = `
-<div>
-  <div>
-    1
-  </div>
-  <button>
-    Increment
-  </button>
-  
-</div>
-`;

package/tests/client/__snapshots__/for.test.ripple.snap

@@ -1,319 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`for statements > correctly handles intermediate statements in for block 1`] = `
-<div>
-  <div>
-    <div>
-      <div>
-        1
-      </div>
-      <div>
-        1
-      </div>
-    </div>
-    <div>
-      <div>
-        2
-      </div>
-      <div>
-        2
-      </div>
-    </div>
-    <div>
-      <div>
-        3
-      </div>
-      <div>
-        3
-      </div>
-    </div>
-    
-  </div>
-  <button>
-    Add Item
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > correctly handles intermediate statements in for block 2`] = `
-<div>
-  <div>
-    <div>
-      <div>
-        1
-      </div>
-      <div>
-        1
-      </div>
-    </div>
-    <div>
-      <div>
-        2
-      </div>
-      <div>
-        2
-      </div>
-    </div>
-    <div>
-      <div>
-        3
-      </div>
-      <div>
-        3
-      </div>
-    </div>
-    <div>
-      <div>
-        4
-      </div>
-      <div>
-        4
-      </div>
-    </div>
-    
-  </div>
-  <button>
-    Add Item
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > correctly handles keyed for...of loops 1`] = `
-<div>
-  <!---->
-  <div>
-    0:Item 1
-  </div>
-  <div>
-    1:Item 2
-  </div>
-  <div>
-    2:Item 3
-  </div>
-  <!---->
-  <button>
-    Reverse
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > correctly handles keyed for...of loops 2`] = `
-<div>
-  <!---->
-  <div>
-    0:Item 3
-  </div>
-  <div>
-    1:Item 2
-  </div>
-  <div>
-    2:Item 1
-  </div>
-  <!---->
-  <button>
-    Reverse
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > correctly handles the index in a for...of loop 1`] = `
-<div>
-  <div>
-    <div>
-      0 : a
-    </div>
-    <div>
-      1 : b
-    </div>
-    <div>
-      2 : c
-    </div>
-    
-  </div>
-  <button>
-    Add Item
-  </button>
-  <button>
-    Reverse
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > correctly handles the index in a for...of loop 2`] = `
-<div>
-  <div>
-    <div>
-      0 : a
-    </div>
-    <div>
-      1 : b
-    </div>
-    <div>
-      2 : c
-    </div>
-    <div>
-      3 : d
-    </div>
-    
-  </div>
-  <button>
-    Add Item
-  </button>
-  <button>
-    Reverse
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > correctly handles the index in a for...of loop 3`] = `
-<div>
-  <div>
-    <div>
-      0 : d
-    </div>
-    <div>
-      1 : c
-    </div>
-    <div>
-      2 : b
-    </div>
-    <div>
-      3 : a
-    </div>
-    
-  </div>
-  <button>
-    Add Item
-  </button>
-  <button>
-    Reverse
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > handles updating with new objects with same key 1`] = `
-<div>
-  <!---->
-  <div>
-    0:Item 1
-  </div>
-  <div>
-    1:Item 2
-  </div>
-  <div>
-    2:Item 3
-  </div>
-  <!---->
-  <button>
-    Reverse
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > handles updating with new objects with same key 2`] = `
-<div>
-  <!---->
-  <div>
-    0:Item 1!
-  </div>
-  <div>
-    1:Item 2!
-  </div>
-  <div>
-    2:Item 3!
-  </div>
-  <!---->
-  <button>
-    Reverse
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > renders a simple dynamic array 1`] = `
-<div>
-  <!---->
-  <div
-    class="Item 1"
-  >
-    Item 1
-  </div>
-  <div
-    class="Item 2"
-  >
-    Item 2
-  </div>
-  <div
-    class="Item 3"
-  >
-    Item 3
-  </div>
-  <!---->
-  <button>
-    Add Item
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > renders a simple dynamic array 2`] = `
-<div>
-  <!---->
-  <div
-    class="Item 1"
-  >
-    Item 1
-  </div>
-  <div
-    class="Item 2"
-  >
-    Item 2
-  </div>
-  <div
-    class="Item 3"
-  >
-    Item 3
-  </div>
-  <div
-    class="Item 4"
-  >
-    Item 4
-  </div>
-  <!---->
-  <button>
-    Add Item
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > renders a simple static array 1`] = `
-<div>
-  <!---->
-  <div
-    class="Item 1"
-  >
-    Item 1
-  </div>
-  <div
-    class="Item 2"
-  >
-    Item 2
-  </div>
-  <div
-    class="Item 3"
-  >
-    Item 3
-  </div>
-  <!---->
-  
-</div>
-`;

package/tests/client/__snapshots__/html.test.ripple.snap

@@ -1,40 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`html directive > renders dynamic html 1`] = `
-<div>
-  <!---->
-  <div>
-    Test
-  </div>
-  <!---->
-  <button>
-    Update
-  </button>
-  
-</div>
-`;
-
-exports[`html directive > renders dynamic html 2`] = `
-<div>
-  <!---->
-  <div>
-    Updated
-  </div>
-  <!---->
-  <button>
-    Update
-  </button>
-  
-</div>
-`;
-
-exports[`html directive > renders static html 1`] = `
-<div>
-  <!---->
-  <div>
-    Test
-  </div>
-  <!---->
-  
-</div>
-`;

package/tests/client/basic/__snapshots__/basic.attributes.test.ripple.snap

@@ -1,60 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`basic client > attribute rendering > handles boolean attributes with no prop value provides 1`] = `
-<div>
-  <div
-    class="container"
-  >
-    <button
-      disabled=""
-    >
-      Button
-    </button>
-    <input
-      checked=""
-      type="checkbox"
-    />
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > attribute rendering > handles boolean props correctly 1`] = `
-<div>
-  <div
-    data-disabled=""
-  />
-  <input
-    disabled=""
-  />
-  <!---->
-  
-</div>
-`;
-
-exports[`basic client > attribute rendering > render spread props without duplication 1`] = `
-<div>
-  <div>
-    <input
-      id="vehicle1"
-      name="car"
-      type="checkbox"
-      value="Bike"
-    />
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > attribute rendering > render static attributes 1`] = `
-<div>
-  <div
-    class="foo"
-    id="bar"
-    style="color: red;"
-  >
-    Hello World
-  </div>
-  
-</div>
-`;

package/tests/client/basic/__snapshots__/basic.rendering.test.ripple.snap

@@ -1,59 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`basic client > rendering & text > basic operations 1`] = `
-<div>
-  <div>
-    0
-  </div>
-  <div>
-    2
-  </div>
-  <div>
-    5
-  </div>
-  <div>
-    2
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > rendering & text > renders semi-dynamic text 1`] = `
-<div>
-  <div>
-    Hello World
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > rendering & text > renders simple JS expression logic correctly 1`] = `
-<div>
-  <div>
-    {"0":"Test"}
-  </div>
-  <div>
-    1
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > rendering & text > renders static text 1`] = `
-<div>
-  <div>
-    Hello World
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > rendering & text > should handle lexical scopes correctly 1`] = `
-<div>
-  <section>
-    Nested scope variable
-    <!---->
-  </section>
-  
-</div>
-`;

package/tests/client/basic/__snapshots__/basic.text.test.ripple.snap

@@ -1,49 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`basic client > text rendering > basic operations 1`] = `
-<div>
-  <div>
-    0
-  </div>
-  <div>
-    2
-  </div>
-  <div>
-    5
-  </div>
-  <div>
-    2
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > text rendering > renders semi-dynamic text 1`] = `
-<div>
-  <div>
-    Hello World
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > text rendering > renders simple JS expression logic correctly 1`] = `
-<div>
-  <div>
-    {"0":"Test"}
-  </div>
-  <div>
-    1
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > text rendering > renders static text 1`] = `
-<div>
-  <div>
-    Hello World
-  </div>
-  
-</div>
-`;

package/tests/client/compiler/__snapshots__/compiler.assignments.test.ripple.snap

@@ -1,12 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`compiler > assignments > compiles tracked values in effect with assignment expression 1`] = `"state.count = _$_.get(lazy);"`;
-
-exports[`compiler > assignments > compiles tracked values in effect with update expressions 1`] = `
-"_$_.untrack(() => {
-			state.preIncrement = _$_.update_pre(lazy);
-			state.postIncrement = _$_.update(lazy);
-			state.preDecrement = _$_.update_pre(lazy, -1);
-			state.postDecrement = _$_.update(lazy, -1);
-		});"
-`;

package/tests/client/compiler/__snapshots__/compiler.typescript.test.ripple.snap

@@ -1,46 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`compiler > typescript > compiles TSInstantiationExpression 1`] = `
-"import * as _$_ from 'ripple/internal/client';
-
-function makeBox(value) {
-	return { value };
-}
-
-const makeStringBox = (makeBox);
-const stringBox = makeStringBox('abc');
-const ErrorMap = (Map);
-const errorMap = new ErrorMap();"
-`;
-
-exports[`compiler > typescript > removes class TypeScript syntax from JS output 1`] = `
-"import * as _$_ from 'ripple/internal/client';
-
-class PrintEvent {
-	text;
-
-	constructor(text) {
-		this.text = text;
-	}
-}"
-`;
-
-exports[`compiler > typescript > removes class extends type arguments from JS output 1`] = `
-"import * as _$_ from 'ripple/internal/client';
-
-class StringMap extends Map {
-	constructor() {
-		var __block = _$_.scope();
-
-		super();
-	}
-}"
-`;
-
-exports[`compiler > typescript > removes type assertions from function parameters and leaves default values 1`] = `
-"import * as _$_ from 'ripple/internal/client';
-
-function getString(e = 'test') {
-	return e;
-}"
-`;

package/tests/client/composite/__snapshots__/composite.render.test.ripple.snap

@@ -1,37 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`composite > render > correct handles passing through component props and children 1`] = `
-<div>
-  <!---->
-  <div>
-    <div>
-      I am A
-    </div>
-    <!---->
-    <div>
-      other text
-    </div>
-    <!---->
-    <div>
-      I am B
-    </div>
-    <!---->
-  </div>
-  <!---->
-  
-</div>
-`;
-
-exports[`composite > render > render simple text as children 1`] = `
-<div>
-  <!---->
-  <button
-    class="my-button"
-  >
-    Click Me
-    <!---->
-  </button>
-  <!---->
-  
-</div>
-`;