ripple 0.3.28 → 0.3.29

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # ripple
 
+## 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.29",
   "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.11"
   },
   "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.9"
   },
   "peerDependencies": {
-    "ripple": "0.3.28"
+    "ripple": "0.3.29"
   }
 }

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/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 {