ripple 0.3.72 → 0.3.76

package/src/runtime/internal/client/types.d.ts

@@ -59,16 +59,6 @@ export type BlockWithTryBoundaryAndCatch = Omit<BlockWithTryBoundary, 's'> & {
 	s: TryBoundaryState & { c: NonNullable<TryBoundaryState['c']> };
 };
 
-export type CompatApi = {
-	createRoot: () => void;
-	createComponent: (node: any, children_fn: () => any) => void;
-	jsx: (type: any, props: any) => any;
-};
-
-export type CompatOptions = {
-	[key: string]: CompatApi;
-};
-
 export type RootBoundaryOptions = {
 	pending?: (anchor: Node, props: Record<string, never>, block: Block | null) => void;
 	catch?: (anchor: Node, props: { error: unknown; reset: () => void }, block: Block | null) => void;

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

@@ -1244,18 +1244,25 @@ function get_styles(styles) {
 /**
  * @param {Record<string, any>} attrs
  * @param {string | undefined} css_hash
+ * @param {string} [exclude_prop]
  * @returns {string}
  */
-export function spread_attrs(attrs, css_hash) {
+export function spread_attrs(attrs, css_hash, exclude_prop) {
 	let attr_str = '';
 	let name;
 
+	if (css_hash === undefined && Object.prototype.hasOwnProperty.call(attrs, '#class')) {
+		css_hash = attrs['#class'];
+	}
+
 	for (name in attrs) {
 		var value = attrs[name];
 
 		if (
 			name === 'children' ||
 			name === 'innerHTML' ||
+			name === '#class' ||
+			name === exclude_prop ||
 			typeof value === 'function' ||
 			is_tsrx_element(value)
 		)

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

@@ -2,48 +2,56 @@
 
 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.tsrx.snap

@@ -2,6 +2,7 @@
 
 exports[`for statements > correctly handles intermediate statements in for block 1`] = `
 <div>
+  <!---->
   <div>
     <div>
       <div>
@@ -32,12 +33,14 @@ exports[`for statements > correctly handles intermediate statements in for block
   <button>
     Add Item
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > correctly handles intermediate statements in for block 2`] = `
 <div>
+  <!---->
   <div>
     <div>
       <div>
@@ -76,12 +79,14 @@ exports[`for statements > correctly handles intermediate statements in for block
   <button>
     Add Item
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > correctly handles keyed for...of loops 1`] = `
 <div>
+  <!---->
   <!---->
   <div>
     0:Item 1
@@ -96,12 +101,14 @@ exports[`for statements > correctly handles keyed for...of loops 1`] = `
   <button>
     Reverse
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > correctly handles keyed for...of loops 2`] = `
 <div>
+  <!---->
   <!---->
   <div>
     0:Item 3
@@ -116,12 +123,14 @@ exports[`for statements > correctly handles keyed for...of loops 2`] = `
   <button>
     Reverse
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > correctly handles the index in a for...of loop 1`] = `
 <div>
+  <!---->
   <div>
     <div>
       0 : a
@@ -140,12 +149,14 @@ exports[`for statements > correctly handles the index in a for...of loop 1`] = `
   <button>
     Reverse
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > correctly handles the index in a for...of loop 2`] = `
 <div>
+  <!---->
   <div>
     <div>
       0 : a
@@ -167,12 +178,14 @@ exports[`for statements > correctly handles the index in a for...of loop 2`] = `
   <button>
     Reverse
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > correctly handles the index in a for...of loop 3`] = `
 <div>
+  <!---->
   <div>
     <div>
       0 : d
@@ -194,12 +207,14 @@ exports[`for statements > correctly handles the index in a for...of loop 3`] = `
   <button>
     Reverse
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > handles updating with new objects with same key 1`] = `
 <div>
+  <!---->
   <!---->
   <div>
     0:Item 1
@@ -214,12 +229,14 @@ exports[`for statements > handles updating with new objects with same key 1`] =
   <button>
     Reverse
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > handles updating with new objects with same key 2`] = `
 <div>
+  <!---->
   <!---->
   <div>
     0:Item 1!
@@ -234,12 +251,14 @@ exports[`for statements > handles updating with new objects with same key 2`] =
   <button>
     Reverse
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > renders a simple dynamic array 1`] = `
 <div>
+  <!---->
   <!---->
   <div
     class="Item 1"
@@ -260,12 +279,14 @@ exports[`for statements > renders a simple dynamic array 1`] = `
   <button>
     Add Item
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > renders a simple dynamic array 2`] = `
 <div>
+  <!---->
   <!---->
   <div
     class="Item 1"
@@ -291,6 +312,7 @@ exports[`for statements > renders a simple dynamic array 2`] = `
   <button>
     Add Item
   </button>
+  <!---->
   
 </div>
 `;

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

@@ -2,6 +2,7 @@
 
 exports[`Fragment innerHTML > renders dynamic innerHTML fragments 1`] = `
 <div>
+  <!---->
   <!---->
   <div>
     Test
@@ -10,12 +11,14 @@ exports[`Fragment innerHTML > renders dynamic innerHTML fragments 1`] = `
   <button>
     Update
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`Fragment innerHTML > renders dynamic innerHTML fragments 2`] = `
 <div>
+  <!---->
   <!---->
   <div>
     Updated
@@ -24,6 +27,7 @@ exports[`Fragment innerHTML > renders dynamic innerHTML fragments 2`] = `
   <button>
     Update
   </button>
+  <!---->
   
 </div>
 `;

package/tests/client/array/array.copy-within.test.tsrx

@@ -2,19 +2,19 @@ import { RippleArray, flushSync, track } from 'ripple';
 
 describe('RippleArray copyWithin', () => {
 	it('handles copyWithin operation with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3, 4, 5);
-				let &[firstItem] = track(() => items[0]);
-				let &[thirdItem] = track(() => items[2]);
-				let &[fourthItem] = track(() => items[3]);
+		function ArrayTest() @{
+			let items = new RippleArray(1, 2, 3, 4, 5);
+			let &[firstItem] = track(() => items[0]);
+			let &[thirdItem] = track(() => items[2]);
+			let &[fourthItem] = track(() => items[3]);
+			<>
 				<button onClick={() => items.copyWithin(0, 3)}>{'copy end to start'}</button>
 				<button onClick={() => items.copyWithin(2, 0, 2)}>{'copy start to middle'}</button>
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{firstItem}</pre>
 				<pre>{thirdItem}</pre>
 				<pre>{fourthItem}</pre>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -48,16 +48,16 @@ describe('RippleArray copyWithin', () => {
 	});
 
 	it('handles copyWithin with negative indexes and reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3, 4, 5);
-				let &[secondItem] = track(() => items[1]);
-				let &[thirdItem] = track(() => items[2]);
+		function ArrayTest() @{
+			let items = new RippleArray(1, 2, 3, 4, 5);
+			let &[secondItem] = track(() => items[1]);
+			let &[thirdItem] = track(() => items[2]);
+			<>
 				<button onClick={() => items.copyWithin(-4, -2)}>{'copy with negative indexes'}</button>
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{secondItem}</pre>
 				<pre>{thirdItem}</pre>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -80,16 +80,16 @@ describe('RippleArray copyWithin', () => {
 	});
 
 	it('handles copyWithin with overlapping ranges', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3, 4, 5);
-				let &[entries] = track(() => Array.from(items.entries()));
+		function ArrayTest() @{
+			let items = new RippleArray(1, 2, 3, 4, 5);
+			let &[entries] = track(() => Array.from(items.entries()));
+			<>
 				<button onClick={() => items.copyWithin(2, 1, 4)}>{'copy with overlap'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				for (const [i, value] of entries) {
+				@for (const [i, value] of entries) {
 					<pre>{`items[${i}]: ${value}`}</pre>
 				}
-			</>;
+			</>
 		}
 
 		render(ArrayTest);