ripple 0.3.28 → 0.3.30

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # ripple
 
+## 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
+
+- Updated dependencies
+  [[`4543794`](https://github.com/Ripple-TS/ripple/commit/45437944a99decfb4bc56f7171772614a7f5691a)]:
+  - @tsrx/ripple@0.0.11
+  - ripple@0.3.29
+
 ## 0.3.28
 
 ### 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.28",
+  "version": "0.3.30",
   "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.10"
+    "@tsrx/ripple": "0.0.12"
   },
   "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.8"
+    "@tsrx/core": "0.0.10"
   },
   "peerDependencies": {
-    "ripple": "0.3.28"
+    "ripple": "0.3.30"
   }
 }

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/src/runtime/proxy.js

@@ -30,13 +30,13 @@ export function proxy(value, block) {
 		TRACKED_ARRAY in value ||
 		TRACKED_OBJECT in value
 	) {
-		return value;
+		return /** @type {RippleArray<T> | RippleObject<T>} */ (value);
 	}
 
 	const prototype = get_prototype_of(value);
 
 	if (prototype !== object_prototype && prototype !== array_prototype) {
-		return value;
+		return /** @type {RippleArray<T> | RippleObject<T>} */ (value);
 	}
 
 	/** @type {Map<any,Tracked>} */
@@ -50,222 +50,224 @@ export function proxy(value, block) {
 		tracked_elements.set('length', tracked_len);
 	}
 
-	return new Proxy(value, {
-		/**
-		 * @param {PropertyKey} prop
-		 */
-		get(target, prop, receiver) {
-			var t = tracked_elements.get(prop);
-			var exists = prop in target;
-
-			if (t === undefined && (!exists || get_descriptor(target, prop)?.writable)) {
-				t = tracked(exists ? /** @type {any} */ (target)[prop] : UNINITIALIZED, block);
-				tracked_elements.set(prop, t);
-			}
-
-			if (t !== undefined) {
-				var v = get(t);
-				return v === UNINITIALIZED ? undefined : v;
-			}
-
-			var result = Reflect.get(target, prop, receiver);
-
-			if (typeof result === 'function') {
-				if (methods_returning_arrays.has(prop)) {
-					/** @type {(this: any, ...args: any[]) => any} */
-					return function (...args) {
-						var output = Reflect.apply(result, receiver, args);
-
-						if (Array.isArray(output) && output !== target) {
-							return array_proxy({ elements: output, block, use_array: true });
-						}
+	return /** @type {RippleArray<T> | RippleObject<T>} */ (
+		new Proxy(value, {
+			/**
+			 * @param {PropertyKey} prop
+			 */
+			get(target, prop, receiver) {
+				var t = tracked_elements.get(prop);
+				var exists = prop in target;
 
-						return output;
-					};
+				if (t === undefined && (!exists || get_descriptor(target, prop)?.writable)) {
+					t = tracked(exists ? /** @type {any} */ (target)[prop] : UNINITIALIZED, block);
+					tracked_elements.set(prop, t);
 				}
 
-				// When generating an iterator, we need to ensure that length is tracked
-				if (is_proxied_array && (prop === 'entries' || prop === 'values' || prop === 'keys')) {
-					receiver.length;
+				if (t !== undefined) {
+					var v = get(t);
+					return v === UNINITIALIZED ? undefined : v;
 				}
-			}
-
-			return result;
-		},
-
-		set(target, prop, value, receiver) {
-			var t = tracked_elements.get(prop);
-			var exists = prop in target;
-
-			if (is_proxied_array && prop === 'length' && t !== undefined) {
-				for (var i = value; i < t.__v; i += 1) {
-					var other_t = tracked_elements.get(i + '');
-					if (other_t !== undefined) {
-						set(other_t, UNINITIALIZED);
-					} else if (i in target) {
-						// If the item exists in the original, we need to create a uninitialized tracked,
-						// else a later read of the property would result in a tracked being created with
-						// the value of the original item at that index.
-						other_t = tracked(UNINITIALIZED, block);
-						tracked_elements.set(i + '', other_t);
+
+				var result = Reflect.get(target, prop, receiver);
+
+				if (typeof result === 'function') {
+					if (methods_returning_arrays.has(prop)) {
+						/** @type {(this: any, ...args: any[]) => any} */
+						return function (...args) {
+							var output = Reflect.apply(result, receiver, args);
+
+							if (Array.isArray(output) && output !== target) {
+								return array_proxy({ elements: output, block, use_array: true });
+							}
+
+							return output;
+						};
 					}
-				}
-			}
-
-			// If we haven't yet created a tracked for this property, we need to ensure
-			// we do so otherwise if we read it later, then the write won't be tracked and
-			// the heuristics of effects will be different vs if we had read the proxied
-			// object property before writing to that property.
-			if (t === undefined) {
-				if (!exists || get_descriptor(target, prop)?.writable) {
-					t = tracked(undefined, block);
-					set(t, value);
 
-					tracked_elements.set(prop, t);
+					// When generating an iterator, we need to ensure that length is tracked
+					if (is_proxied_array && (prop === 'entries' || prop === 'values' || prop === 'keys')) {
+						receiver.length;
+					}
 				}
-			} else {
-				exists = t.__v !== UNINITIALIZED;
 
-				set(t, value);
-			}
+				return result;
+			},
 
-			var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+			set(target, prop, value, receiver) {
+				var t = tracked_elements.get(prop);
+				var exists = prop in target;
+
+				if (is_proxied_array && prop === 'length' && t !== undefined) {
+					for (var i = value; i < t.__v; i += 1) {
+						var other_t = tracked_elements.get(i + '');
+						if (other_t !== undefined) {
+							set(other_t, UNINITIALIZED);
+						} else if (i in target) {
+							// If the item exists in the original, we need to create a uninitialized tracked,
+							// else a later read of the property would result in a tracked being created with
+							// the value of the original item at that index.
+							other_t = tracked(UNINITIALIZED, block);
+							tracked_elements.set(i + '', other_t);
+						}
+					}
+				}
 
-			// Set the new value before updating any tracked's so that any listeners get the new value
-			if (descriptor?.set) {
-				descriptor.set.call(receiver, value);
-			}
+				// If we haven't yet created a tracked for this property, we need to ensure
+				// we do so otherwise if we read it later, then the write won't be tracked and
+				// the heuristics of effects will be different vs if we had read the proxied
+				// object property before writing to that property.
+				if (t === undefined) {
+					if (!exists || get_descriptor(target, prop)?.writable) {
+						t = tracked(undefined, block);
+						set(t, value);
 
-			if (!exists && is_proxied_array && typeof prop === 'string') {
-				// If we have mutated an array directly, we might need to
-				// signal that length has also changed. Do it before updating metadata
-				// to ensure that iterating over the array as a result of a metadata update
-				// will not cause the length to be out of sync.
-				var n = Number(prop);
+						tracked_elements.set(prop, t);
+					}
+				} else {
+					exists = t.__v !== UNINITIALIZED;
 
-				if (Number.isInteger(n) && n >= tracked_len.__v) {
-					set(tracked_len, n + 1);
+					set(t, value);
 				}
-			}
 
-			return true;
-		},
+				var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
 
-		setPrototypeOf() {
-			throw new Error(
-				`Cannot set prototype of ${is_proxied_array ? '\`RippleArray\`' : '\`RippleObject\`'}`,
-			);
-		},
+				// Set the new value before updating any tracked's so that any listeners get the new value
+				if (descriptor?.set) {
+					descriptor.set.call(receiver, value);
+				}
 
-		deleteProperty(target, prop) {
-			var t = tracked_elements.get(prop);
+				if (!exists && is_proxied_array && typeof prop === 'string') {
+					// If we have mutated an array directly, we might need to
+					// signal that length has also changed. Do it before updating metadata
+					// to ensure that iterating over the array as a result of a metadata update
+					// will not cause the length to be out of sync.
+					var n = Number(prop);
 
-			if (t === undefined) {
-				if (prop in target) {
-					const t = tracked(UNINITIALIZED, block);
-					tracked_elements.set(prop, t);
+					if (Number.isInteger(n) && n >= tracked_len.__v) {
+						set(tracked_len, n + 1);
+					}
 				}
-			} else {
-				set(t, UNINITIALIZED);
-			}
-
-			return Reflect.deleteProperty(target, prop);
-		},
 
-		has(target, prop) {
-			if (is_proxied_array && prop === TRACKED_ARRAY) {
 				return true;
-			}
+			},
 
-			if (prop === TRACKED_OBJECT) {
-				return true;
-			}
+			setPrototypeOf() {
+				throw new Error(
+					`Cannot set prototype of ${is_proxied_array ? '\`RippleArray\`' : '\`RippleObject\`'}`,
+				);
+			},
 
-			var t = tracked_elements.get(prop);
-			var exists = (t !== undefined && t.__v !== UNINITIALIZED) || Reflect.has(target, prop);
+			deleteProperty(target, prop) {
+				var t = tracked_elements.get(prop);
 
-			if (t !== undefined || !exists || get_descriptor(target, prop)?.writable) {
 				if (t === undefined) {
-					t = tracked(exists ? /** @type {any} */ (target)[prop] : UNINITIALIZED, block);
+					if (prop in target) {
+						const t = tracked(UNINITIALIZED, block);
+						tracked_elements.set(prop, t);
+					}
+				} else {
+					set(t, UNINITIALIZED);
+				}
 
-					tracked_elements.set(prop, t);
+				return Reflect.deleteProperty(target, prop);
+			},
+
+			has(target, prop) {
+				if (is_proxied_array && prop === TRACKED_ARRAY) {
+					return true;
 				}
 
-				var value = get(t);
-				if (value === UNINITIALIZED) {
-					return false;
+				if (prop === TRACKED_OBJECT) {
+					return true;
 				}
-			}
-
-			return exists;
-		},
-
-		defineProperty(_, prop, descriptor) {
-			if (
-				!('value' in descriptor) ||
-				descriptor.configurable === false ||
-				descriptor.enumerable === false ||
-				descriptor.writable === false
-			) {
-				// we disallow non-basic descriptors, because unless they are applied to the
-				// target object — which we avoid, so that state can be forked — we will run
-				// afoul of the various invariants
-				// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor#invariants
-				throw new Error(
-					'Only basic property descriptors are supported with value and configurable, enumerable, and writable set to true',
-				);
-			}
 
-			var t = tracked_elements.get(prop);
+				var t = tracked_elements.get(prop);
+				var exists = (t !== undefined && t.__v !== UNINITIALIZED) || Reflect.has(target, prop);
 
-			if (t === undefined) {
-				t = tracked(descriptor.value, block);
-				tracked_elements.set(prop, t);
-			} else {
-				set(t, descriptor.value);
-			}
+				if (t !== undefined || !exists || get_descriptor(target, prop)?.writable) {
+					if (t === undefined) {
+						t = tracked(exists ? /** @type {any} */ (target)[prop] : UNINITIALIZED, block);
 
-			return true;
-		},
+						tracked_elements.set(prop, t);
+					}
 
-		ownKeys(target) {
-			var own_keys = Reflect.ownKeys(target).filter((key) => {
-				var t = tracked_elements.get(key);
-				return t === undefined || t.__v !== UNINITIALIZED;
-			});
+					var value = get(t);
+					if (value === UNINITIALIZED) {
+						return false;
+					}
+				}
 
-			for (var [key, t] of tracked_elements) {
-				if (t.__v !== UNINITIALIZED && !(key in target)) {
-					own_keys.push(key);
+				return exists;
+			},
+
+			defineProperty(_, prop, descriptor) {
+				if (
+					!('value' in descriptor) ||
+					descriptor.configurable === false ||
+					descriptor.enumerable === false ||
+					descriptor.writable === false
+				) {
+					// we disallow non-basic descriptors, because unless they are applied to the
+					// target object — which we avoid, so that state can be forked — we will run
+					// afoul of the various invariants
+					// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor#invariants
+					throw new Error(
+						'Only basic property descriptors are supported with value and configurable, enumerable, and writable set to true',
+					);
 				}
-			}
 
-			return own_keys;
-		},
+				var t = tracked_elements.get(prop);
 
-		getOwnPropertyDescriptor(target, prop) {
-			var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+				if (t === undefined) {
+					t = tracked(descriptor.value, block);
+					tracked_elements.set(prop, t);
+				} else {
+					set(t, descriptor.value);
+				}
 
-			if (descriptor && 'value' in descriptor) {
-				var t = tracked_elements.get(prop);
-				if (t) descriptor.value = get(t);
-			} else if (descriptor === undefined) {
-				var t = tracked_elements.get(prop);
-				var value = t?.__v;
-
-				if (t !== undefined && value !== UNINITIALIZED) {
-					return {
-						enumerable: true,
-						configurable: true,
-						value,
-						writable: true,
-					};
+				return true;
+			},
+
+			ownKeys(target) {
+				var own_keys = Reflect.ownKeys(target).filter((key) => {
+					var t = tracked_elements.get(key);
+					return t === undefined || t.__v !== UNINITIALIZED;
+				});
+
+				for (var [key, t] of tracked_elements) {
+					if (t.__v !== UNINITIALIZED && !(key in target)) {
+						own_keys.push(key);
+					}
+				}
+
+				return own_keys;
+			},
+
+			getOwnPropertyDescriptor(target, prop) {
+				var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+
+				if (descriptor && 'value' in descriptor) {
+					var t = tracked_elements.get(prop);
+					if (t) descriptor.value = get(t);
+				} else if (descriptor === undefined) {
+					var t = tracked_elements.get(prop);
+					var value = t?.__v;
+
+					if (t !== undefined && value !== UNINITIALIZED) {
+						return {
+							enumerable: true,
+							configurable: true,
+							value,
+							writable: true,
+						};
+					}
 				}
-			}
 
-			return descriptor;
-		},
-	});
+				return descriptor;
+			},
+		})
+	);
 }
 
 /**
@@ -304,7 +306,7 @@ export function array_proxy({ elements, block, from_static = false, use_array =
  * @returns {RippleObject<T>}
  */
 export function object_proxy(obj, block) {
-	return proxy(obj, block);
+	return /** @type {RippleObject<T>} */ (proxy(obj, block));
 }
 
 /** @type {Set<PropertyKey>} */

package/tests/client/compiler/compiler.basic.test.tsrx

@@ -74,7 +74,7 @@ describe('compiler > basics', () => {
 }`;
 
 		expect(() => parse(invalid_source)).toThrow(
-			'"text" is a Ripple keyword and must be used in the form {text some_value}',
+			'"text" is a TSRX keyword and must be used in the form {text some_value}',
 		);
 	});
 

package/tests/client/tsconfig.json

@@ -1,11 +1,5 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["../../src/**/*", "../**/*"],
-  "exclude": [
-    "../server",
-    "../server.d.ts",
-    "../setup-server.js",
-    "../hydration",
-    "../setup-hydration.js"
-  ]
+  "exclude": ["../server", "../setup-server.js", "../hydration", "../setup-hydration.js"]
 }

package/tests/client/tsx.test.tsrx

@@ -11,6 +11,56 @@ describe('tsx expression', () => {
 		expect(container.querySelector('div')).toBeTruthy();
 	});
 
+	it('applies scoped classes inside tsx blocks and fragment shorthand', () => {
+		component App() {
+			<tsx>
+				<div class="card">
+					<h2>
+						{'tsx block'}
+					</h2>
+				</div>
+			</tsx>
+
+			<>
+				<div class="card">
+					<h2>
+						{'fragment shorthand'}
+					</h2>
+				</div>
+			</>
+
+			<style>
+				.card {
+					padding: 1rem;
+				}
+
+				h2 {
+					color: red;
+				}
+			</style>
+		}
+
+		render(App);
+
+		const cards = Array.from(container.querySelectorAll('.card'));
+		const headings = Array.from(container.querySelectorAll('h2'));
+
+		expect(cards).toHaveLength(2);
+		expect(headings).toHaveLength(2);
+
+		cards.forEach((card) => {
+			expect(
+				Array.from(card.classList).filter((className) => className.startsWith('tsrx-')),
+			).toHaveLength(1);
+		});
+
+		headings.forEach((heading) => {
+			expect(
+				Array.from(heading.classList).filter((className) => className.startsWith('tsrx-')),
+			).toHaveLength(1);
+		});
+	});
+
 	it('renders a tsx element assigned to a variable', () => {
 		component App() {
 			const el = <tsx><span class="test">content</span></tsx>;

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/tests/hydration/tsconfig.json

@@ -1,12 +1,5 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["../../src/**/*", "../**/*"],
-  "exclude": [
-    "../client",
-    "../client.d.ts",
-    "../setup-client.js",
-    "../server",
-    "../server.d.ts",
-    "../setup-server.js"
-  ]
+  "exclude": ["../client", "../setup-client.js", "../server", "../setup-server.js"]
 }

package/tests/server/basic.attributes.test.tsrx

@@ -35,7 +35,9 @@ describe('basic server > attribute rendering', () => {
 
 		const div = document.querySelector('div');
 
-		expect(Array.from(div.classList).some((className) => className.startsWith('tsrx-'))).toBe(true);
+		expect(
+			Array.from(div.classList).filter((className) => className.startsWith('tsrx-')),
+		).toHaveLength(1);
 		expect(div.classList.contains('inactive')).toBe(true);
 	});
 
@@ -70,7 +72,9 @@ describe('basic server > attribute rendering', () => {
 
 		const div = document.querySelector('div');
 
-		expect(Array.from(div.classList).some((className) => className.startsWith('tsrx-'))).toBe(true);
+		expect(
+			Array.from(div.classList).filter((className) => className.startsWith('tsrx-')),
+		).toHaveLength(1);
 
 		expect(div.classList.contains('foo')).toBe(true);
 		expect(div.classList.contains('bar')).toBe(true);
@@ -83,6 +87,57 @@ describe('basic server > attribute rendering', () => {
 		expect(div.classList.contains('fff')).toBe(false);
 	});
 
+	it('applies scoped classes inside tsx blocks and fragment shorthand', async () => {
+		component App() {
+			<tsx>
+				<div class="card">
+					<h2>
+						{'tsx block'}
+					</h2>
+				</div>
+			</tsx>
+
+			<>
+				<div class="card">
+					<h2>
+						{'fragment shorthand'}
+					</h2>
+				</div>
+			</>
+
+			<style>
+				.card {
+					padding: 1rem;
+				}
+
+				h2 {
+					color: red;
+				}
+			</style>
+		}
+
+		const { body } = await render(App);
+		const { document } = parseHtml(body);
+
+		const cards = Array.from(document.querySelectorAll('.card'));
+		const headings = Array.from(document.querySelectorAll('h2'));
+
+		expect(cards).toHaveLength(2);
+		expect(headings).toHaveLength(2);
+
+		cards.forEach((card) => {
+			expect(
+				Array.from(card.classList).filter((className) => className.startsWith('tsrx-')),
+			).toHaveLength(1);
+		});
+
+		headings.forEach((heading) => {
+			expect(
+				Array.from(heading.classList).filter((className) => className.startsWith('tsrx-')),
+			).toHaveLength(1);
+		});
+	});
+
 	it('render dynamic class object', async () => {
 		component Basic() {
 			let &[active] = track(false);
@@ -101,7 +156,9 @@ describe('basic server > attribute rendering', () => {
 
 		const div = document.querySelector('div');
 
-		expect(Array.from(div.classList).some((className) => className.startsWith('tsrx-'))).toBe(true);
+		expect(
+			Array.from(div.classList).filter((className) => className.startsWith('tsrx-')),
+		).toHaveLength(1);
 		expect(div.classList.contains('inactive')).toBe(true);
 		expect(div.classList.contains('active')).toBe(false);
 	});
@@ -132,9 +189,9 @@ describe('basic server > attribute rendering', () => {
 			const divs = document.querySelectorAll('div');
 
 			divs.forEach((div) => {
-				expect(Array.from(div.classList).some((className) => className.startsWith('tsrx-'))).toBe(
-					true,
-				);
+				expect(
+					Array.from(div.classList).filter((className) => className.startsWith('tsrx-')),
+				).toHaveLength(1);
 			});
 		},
 	);
@@ -204,7 +261,10 @@ describe('basic server > attribute rendering', () => {
 
 	it('render tracked object as style attribute', async () => {
 		component Basic() {
-			let style = new RippleObject({ color: 'red', fontWeight: 'bold' });
+			let style = new RippleObject({
+				color: 'red',
+				fontWeight: 'bold',
+			});
 
 			<div style={{ color: style.color, fontWeight: style.fontWeight }}>{'Dynamic Style'}</div>
 		}

package/tests/server/tsconfig.json

@@ -1,12 +1,5 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["../../src/**/*", "../**/*"],
-  "exclude": [
-    "../client",
-    "../client.d.ts",
-    "../setup-client.js",
-    "../hydration",
-    "../hydration.d.ts",
-    "../setup-hydration.js"
-  ]
+  "exclude": ["../client", "../setup-client.js", "../hydration", "../setup-hydration.js"]
 }

package/tsconfig.json

@@ -22,13 +22,6 @@
       "rollup/*": ["./shims/rollup-estree-types.d.ts"]
     }
   },
-  "include": [
-    "./*.js",
-    "./src/",
-    "./tests/**/*.test.tsrx",
-    "./tests/**/*.tsrx",
-    "./tests/**/*.d.ts",
-    "./tests/**/*.js"
-  ],
+  "include": ["./*.js", "./src/"],
   "exclude": ["node_modules", "dist"]
 }

package/tsconfig.typecheck.json

@@ -1,5 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["./src/"],
-  "exclude": ["./tests/"]
+  "include": ["./src/"]
 }

package/types/index.d.ts

@@ -285,7 +285,7 @@ export interface RippleObjectCallable {
 export interface RippleObjectConstructor {
 	new <T extends Object>(obj: T): RippleObject<T>;
 }
-export interface RippleObject<T> extends Object {}
+export type RippleObject<T> = { [K in keyof T]: T[K] };
 export const RippleObject: RippleObjectConstructor;
 
 export interface RippleDateCallable {

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);
-}