ripple 0.2.151 → 0.2.153

package/tests/client/dynamic-elements.test.ripple

@@ -1,7 +1,6 @@
 import { flushSync, track, createRefKey, trackSplit } from 'ripple';
 
 describe('dynamic DOM elements', () => {
-
 	it('renders static dynamic element', () => {
 		component App() {
 			let tag = track('div');
@@ -19,23 +18,27 @@ describe('dynamic DOM elements', () => {
 		component App() {
 			let tag = track('div');
 
-			<button onClick={() => {
+			<button
+				onClick={() => {
 					@tag = 'span';
-				}}>{'Change Tag'}</button>
+				}}
+			>
+				{'Change Tag'}
+			</button>
 			<@tag id="dynamic">{'Hello World'}</@tag>
 		}
 		render(App);
-		
+
 		// Initially should be a div
 		let dynamicElement = container.querySelector('#dynamic');
 		expect(dynamicElement.tagName).toBe('DIV');
 		expect(dynamicElement.textContent).toBe('Hello World');
-		
+
 		// Click button to change tag
 		const button = container.querySelector('button');
 		button.click();
 		flushSync();
-		
+
 		// Should now be a span
 		dynamicElement = container.querySelector('#dynamic');
 		expect(dynamicElement.tagName).toBe('SPAN');
@@ -97,9 +100,7 @@ describe('dynamic DOM elements', () => {
 			let tag = track('div');
 			let active = track(true);
 
-			<@tag class={{ active: @active, 'dynamic-element': true }}>
-				{'Element with class object'}
-			</@tag>
+			<@tag class={{active: @active, 'dynamic-element': true}}>{'Element with class object'}</@tag>
 		}
 		render(App);
 
@@ -113,11 +114,13 @@ describe('dynamic DOM elements', () => {
 		component App() {
 			let tag = track('span');
 
-			<@tag style={{ 
-				color: 'red', 
-				fontSize: '16px',
-				fontWeight: 'bold'
-			}}>
+			<@tag
+				style={{
+					color: 'red',
+					fontSize: '16px',
+					fontWeight: 'bold',
+				}}
+			>
 				{'Styled dynamic element'}
 			</@tag>
 		}
@@ -139,9 +142,7 @@ describe('dynamic DOM elements', () => {
 				class: 'spread-class',
 			};
 
-			<@tag {...attrs} data-extra="additional">
-				{'Element with spread attributes'}
-			</@tag>
+			<@tag {...attrs} data-extra="additional">{'Element with spread attributes'}</@tag>
 		}
 		render(App);
 
@@ -159,13 +160,18 @@ describe('dynamic DOM elements', () => {
 		component App() {
 			let tag = track('article');
 
-			<@tag {ref (node) => { capturedElement = node; }} id="ref-test">
+			<@tag
+				{ref (node) => {
+					capturedElement = node;
+				}}
+				id="ref-test"
+			>
 				{'Element with ref'}
 			</@tag>
 		}
 		render(App);
 		flushSync();
-		
+
 		expect(capturedElement).toBeTruthy();
 		expect(capturedElement.tagName).toBe('ARTICLE');
 		expect(capturedElement.id).toBe('ref-test');
@@ -185,7 +191,7 @@ describe('dynamic DOM elements', () => {
 			const dynamicProps = {
 				id: 'spread-ref-test',
 				class: 'ref-element',
-				[createRefKey()]: elementRef
+				[createRefKey()]: elementRef,
 			};
 
 			<@tag {...dynamicProps}>{'Element with spread ref'}</@tag>
@@ -206,42 +212,49 @@ describe('dynamic DOM elements', () => {
 		component App() {
 			let tag = track('div');
 			let count = track(0);
-			
-			<button onClick={() => { @count++; }}>{'Increment'}</button>
-			<@tag 
+
+			<button
+				onClick={() => {
+					@count++;
+				}}
+			>
+				{'Increment'}
+			</button>
+			<@tag
 				id={@count % 2 ? 'even' : 'odd'}
 				class={@count % 2 ? 'even-class' : 'odd-class'}
 				data-count={@count}
 			>
-				{'Count: '}{@count}
+				{'Count: '}
+				{@count}
 			</@tag>
 		}
 
 		render(App);
-		
+
 		const button = container.querySelector('button');
 		const element = container.querySelector('div');
-		
+
 		// Initial state
 		expect(element.id).toBe('odd');
 		expect(element.className).toBe('odd-class');
 		expect(element.getAttribute('data-count')).toBe('0');
 		expect(element.textContent).toBe('Count: 0');
-		
+
 		// Click to increment
 		button.click();
 		flushSync();
-		
+
 		// Attributes should be reactive and update
 		expect(element.id).toBe('even');
 		expect(element.className).toBe('even-class');
 		expect(element.getAttribute('data-count')).toBe('1');
 		expect(element.textContent).toBe('Count: 1');
-		
+
 		// Click again
 		button.click();
 		flushSync();
-		
+
 		// Should toggle back
 		expect(element.id).toBe('odd');
 		expect(element.className).toBe('odd-class');
@@ -252,9 +265,9 @@ describe('dynamic DOM elements', () => {
 	it('applies scoped CSS to dynamic elements', () => {
 		component App() {
 			let tag = track('div');
-			
+
 			<@tag class="test-class">{'Dynamic element'}</@tag>
-			
+
 			<style>
 				.test-class {
 					color: red;
@@ -263,15 +276,15 @@ describe('dynamic DOM elements', () => {
 		}
 
 		render(App);
-		
+
 		const element = container.querySelector('div');
 		expect(element).toBeTruthy();
 		console.log(element);
 		expect(element.classList.contains('test-class')).toBe(true);
-		
+
 		// Check if scoped CSS class is present - THIS MIGHT FAIL if CSS pruning issue exists
 		const classes = Array.from(element.classList);
-		const hasScopedClass = classes.some(cls => cls.startsWith('ripple-'));
+		const hasScopedClass = classes.some((cls) => cls.startsWith('ripple-'));
 		expect(hasScopedClass).toBe(true);
 	});
 
@@ -279,15 +292,18 @@ describe('dynamic DOM elements', () => {
 		component App() {
 			let tag = track('button');
 			let count = track(0);
-			
-			<@tag 
+
+			<@tag
 				class={@count % 2 ? 'even' : 'odd'}
 				id={@count % 2 ? 'even' : 'odd'}
-				onClick={() => { @count++; }}
+				onClick={() => {
+					@count++;
+				}}
 			>
-				{'Count: '}{@count}
+				{'Count: '}
+				{@count}
 			</@tag>
-			
+
 			<style>
 				.even {
 					background-color: green;
@@ -301,40 +317,40 @@ describe('dynamic DOM elements', () => {
 		}
 
 		render(App);
-		
+
 		const button = container.querySelector('button');
 		expect(button).toBeTruthy();
-		
+
 		// Initial state: should be odd (count=0, 0%2=false)
 		expect(button.classList.contains('odd')).toBe(true);
 		expect(button.classList.contains('even')).toBe(false);
 		expect(button.id).toBe('odd');
 		expect(button.textContent).toBe('Count: 0');
-		
+
 		// Check if scoped CSS hash is applied to dynamic element
 		const classes = Array.from(button.classList);
-		const hasScopedClass = classes.some(cls => cls.startsWith('ripple-'));
+		const hasScopedClass = classes.some((cls) => cls.startsWith('ripple-'));
 		expect(hasScopedClass).toBe(true);
-		
+
 		// Click to increment
 		button.click();
 		flushSync();
-		
-		// Should now be even (count=1, 1%2=true)  
+
+		// Should now be even (count=1, 1%2=true)
 		expect(button.classList.contains('even')).toBe(true);
 		expect(button.classList.contains('odd')).toBe(false);
 		expect(button.id).toBe('even');
 		expect(button.textContent).toBe('Count: 1');
-		
+
 		// Scoped CSS class should still be present
 		const newClasses = Array.from(button.classList);
-		const stillHasScopedClass = newClasses.some(cls => cls.startsWith('ripple-'));
+		const stillHasScopedClass = newClasses.some((cls) => cls.startsWith('ripple-'));
 		expect(stillHasScopedClass).toBe(true);
-		
+
 		// Click again
 		button.click();
 		flushSync();
-		
+
 		// Should toggle back to odd (count=2, 2%2=false)
 		expect(button.classList.contains('odd')).toBe(true);
 		expect(button.classList.contains('even')).toBe(false);
@@ -347,7 +363,7 @@ describe('dynamic DOM elements', () => {
 			const tag = track('button');
 			const [children, rest] = trackSplit(props, ['children']);
 			<@tag {...@rest}>{@rest.class}</@tag>
-			
+
 			<style>
 				.even {
 					background-color: green;
@@ -363,38 +379,39 @@ describe('dynamic DOM elements', () => {
 			<DyanamicButton
 				class={@count % 2 ? 'even' : 'odd'}
 				id={@count % 2 ? 'even' : 'odd'}
-				onClick={() => { @count++; }}
+				onClick={() => {
+					@count++;
+				}}
 			/>
 		}
 
 		render(App);
-		
+
 		const button = container.querySelector('button');
 		expect(button).toBeTruthy();
-		
-		
+
 		// Initial state: should be odd (count=0, 0%2=false)
 		expect(button.classList.contains('odd')).toBe(true);
 		expect(button.classList.contains('even')).toBe(false);
 		expect(button.id).toBe('odd');
-		
+
 		// Check if scoped CSS hash is applied (this is the critical test)
 		const classes = Array.from(button.classList);
-		const hasScopedClass = classes.some(cls => cls.startsWith('ripple-'));
+		const hasScopedClass = classes.some((cls) => cls.startsWith('ripple-'));
 		expect(hasScopedClass).toBe(true);
-		
+
 		// Click to increment
 		button.click();
 		flushSync();
-		
-		// Should now be even (count=1, 1%2=true)  
+
+		// Should now be even (count=1, 1%2=true)
 		expect(button.classList.contains('even')).toBe(true);
 		expect(button.classList.contains('odd')).toBe(false);
 		expect(button.id).toBe('even');
-		
+
 		// Both classes should still be present
 		const newClasses = Array.from(button.classList);
-		const stillHasScopedClass = newClasses.some(cls => cls.startsWith('ripple-'));
+		const stillHasScopedClass = newClasses.some((cls) => cls.startsWith('ripple-'));
 		expect(stillHasScopedClass).toBe(true);
 		expect(newClasses.includes('even')).toBe(true);
 	});
@@ -403,7 +420,9 @@ describe('dynamic DOM elements', () => {
 		component App() {
 			let tag = track('div');
 
-			<@tag class="scoped"><p>{'Scoped dynamic element'}</p></@tag>
+			<@tag class="scoped">
+				<p>{'Scoped dynamic element'}</p>
+			</@tag>
 
 			<style>
 				.scoped {
@@ -416,15 +435,17 @@ describe('dynamic DOM elements', () => {
 		const div = container.querySelector('div');
 		const p = div.querySelector('p');
 
-		expect(Array.from(div.classList).some(c => c.startsWith('ripple-'))).toBe(true);
-		expect(Array.from(p.classList).some(c => c.startsWith('ripple-'))).toBe(true);
+		expect(Array.from(div.classList).some((c) => c.startsWith('ripple-'))).toBe(true);
+		expect(Array.from(p.classList).some((c) => c.startsWith('ripple-'))).toBe(true);
 	});
 
 	it('adds scoping class to dynamic elements when selector targets by tag name', () => {
 		component App() {
 			let tag = track('div');
 
-			<@tag class="scoped"><p>{'Scoped dynamic element'}</p></@tag>
+			<@tag class="scoped">
+				<p>{'Scoped dynamic element'}</p>
+			</@tag>
 
 			<style>
 				div {
@@ -437,13 +458,15 @@ describe('dynamic DOM elements', () => {
 		const div = container.querySelector('div');
 		const p = div.querySelector('p');
 
-		expect(Array.from(div.classList).some(c => c.startsWith('ripple-'))).toBe(true);
-		expect(Array.from(p.classList).some(c => c.startsWith('ripple-'))).toBe(true);
+		expect(Array.from(div.classList).some((c) => c.startsWith('ripple-'))).toBe(true);
+		expect(Array.from(p.classList).some((c) => c.startsWith('ripple-'))).toBe(true);
 	});
 
-	it("doesn't add scoping class to components inside dynamic element", () => {
+	it('doesn\'t add scoping class to components inside dynamic element', () => {
 		component Child() {
-			<div class="child"><p>{"I am a child component"}</p></div>
+			<div class="child">
+				<p>{'I am a child component'}</p>
+			</div>
 
 			<style>
 				.child {
@@ -472,9 +495,9 @@ describe('dynamic DOM elements', () => {
 		const innerDiv = outerDiv.querySelector('.child');
 		const innerP = innerDiv.querySelector('p');
 
-		const outerScope = Array.from(outerDiv.classList).find(c => c.startsWith('ripple-'));
-		const innerScopes = Array.from(innerDiv.classList).filter(c => c.startsWith('ripple-'));
-		const innerInnerScopes = Array.from(innerP.classList).filter(c => c.startsWith('ripple-'));
+		const outerScope = Array.from(outerDiv.classList).find((c) => c.startsWith('ripple-'));
+		const innerScopes = Array.from(innerDiv.classList).filter((c) => c.startsWith('ripple-'));
+		const innerInnerScopes = Array.from(innerP.classList).filter((c) => c.startsWith('ripple-'));
 
 		expect(outerScope).toBeTruthy();
 
@@ -484,9 +507,11 @@ describe('dynamic DOM elements', () => {
 		expect(innerInnerScopes).toHaveLength(0);
 	});
 
-	it("doesn't add scoping class to dynamically rendered component", () => {
+	it('doesn\'t add scoping class to dynamically rendered component', () => {
 		component Child() {
-			<div class="child"><p>{"I am a child component"}</p></div>
+			<div class="child">
+				<p>{'I am a child component'}</p>
+			</div>
 
 			<style>
 				.child {
@@ -511,8 +536,8 @@ describe('dynamic DOM elements', () => {
 		const div = container.querySelector('.child');
 		const p = div.querySelector('p');
 
-		const outerScopes = Array.from(div.classList).filter(c => c.startsWith('ripple-'));
-		const innerScopes = Array.from(p.classList).filter(c => c.startsWith('ripple-'));
+		const outerScopes = Array.from(div.classList).filter((c) => c.startsWith('ripple-'));
+		const innerScopes = Array.from(p.classList).filter((c) => c.startsWith('ripple-'));
 
 		expect(outerScopes).toHaveLength(1);
 		expect(innerScopes).toHaveLength(0);

package/tests/client/for.test.ripple

@@ -51,7 +51,7 @@ describe('for statements', () => {
 				}
 			</div>
 
-			<button onClick={() => items.push(items.length + 1)}>{"Add Item"}</button>
+			<button onClick={() => items.push(items.length + 1)}>{'Add Item'}</button>
 		}
 
 		render(App);
@@ -76,7 +76,9 @@ describe('for statements', () => {
 				}
 			</div>
 
-			<button onClick={() => items.push(String.fromCharCode(97 + items.length))}>{'Add Item'}</button>
+			<button onClick={() => items.push(String.fromCharCode(97 + items.length))}>
+				{'Add Item'}
+			</button>
 			<button onClick={() => items.reverse()}>{'Reverse'}</button>
 		}
 
@@ -109,9 +111,13 @@ describe('for statements', () => {
 				<div>{i + ':' + item.text}</div>
 			}
 
-			<button onClick={() => {
-				@items = @items.toReversed();
-			}}>{'Reverse'}</button>
+			<button
+				onClick={() => {
+					@items = @items.toReversed();
+				}}
+			>
+				{'Reverse'}
+			</button>
 		}
 
 		render(App);
@@ -138,17 +144,21 @@ describe('for statements', () => {
 				<div>{i + ':' + item.text}</div>
 			}
 
-			<button onClick={() => {
-				@items[0].id = 3;
-				@items[1].id = 2;
-				@items[2].id = 1;
-
-				@items = [
-					{...@items[0], text: 'Item 1!'},
-					{...@items[1], text: 'Item 2!'},
-					{...@items[2], text: 'Item 3!'},
-				];
-			}}>{"Reverse"}</button>
+			<button
+				onClick={() => {
+					@items[0].id = 3;
+					@items[1].id = 2;
+					@items[2].id = 1;
+
+					@items = [
+						{ ...@items[0], text: 'Item 1!' },
+						{ ...@items[1], text: 'Item 2!' },
+						{ ...@items[2], text: 'Item 3!' },
+					];
+				}}
+			>
+				{'Reverse'}
+			</button>
 		}
 
 		render(App);
@@ -159,5 +169,5 @@ describe('for statements', () => {
 		flushSync();
 
 		expect(container).toMatchSnapshot();
-	})
+	});
 });

package/tests/client/head.test.ripple

@@ -35,7 +35,13 @@ describe('head elements', () => {
 				<title>{@title}</title>
 			</head>
 			<div>
-				<button onClick={() => { @title = 'Updated Title'; }}>{'Update Title'}</button>
+				<button
+					onClick={() => {
+						@title = 'Updated Title';
+					}}
+				>
+					{'Update Title'}
+				</button>
 				<span>{@title}</span>
 			</div>
 		}
@@ -61,7 +67,13 @@ describe('head elements', () => {
 				<title>{`Hello ${@name}!`}</title>
 			</head>
 			<div>
-				<button onClick={() => { @name = 'Ripple'; }}>{'Change Name'}</button>
+				<button
+					onClick={() => {
+						@name = 'Ripple';
+					}}
+				>
+					{'Change Name'}
+				</button>
 			</div>
 		}
 
@@ -85,7 +97,13 @@ describe('head elements', () => {
 				<title>{prefix + @count}</title>
 			</head>
 			<div>
-				<button onClick={() => { @count++; }}>{'Increment'}</button>
+				<button
+					onClick={() => {
+						@count++;
+					}}
+				>
+					{'Increment'}
+				</button>
 				<span>{@count}</span>
 			</div>
 		}
@@ -110,7 +128,13 @@ describe('head elements', () => {
 				<title>{`Step ${@step} of 3`}</title>
 			</head>
 			<div>
-				<button onClick={() => { @step = (@step % 3) + 1 }}>{'Next Step'}</button>
+				<button
+					onClick={() => {
+						@step = @step % 3 + 1;
+					}}
+				>
+					{'Next Step'}
+				</button>
 			</div>
 		}
 
@@ -155,8 +179,20 @@ describe('head elements', () => {
 				<title>{@showPrefix ? 'App - ' + @title : @title}</title>
 			</head>
 			<div>
-				<button onClick={() => { @showPrefix = !@showPrefix }}>{'Toggle Prefix'}</button>
-				<button onClick={() => { @title = @title === 'Main Page' ? 'Settings' : 'Main Page' }}>{'Change Page'}</button>
+				<button
+					onClick={() => {
+						@showPrefix = !@showPrefix;
+					}}
+				>
+					{'Toggle Prefix'}
+				</button>
+				<button
+					onClick={() => {
+						@title = @title === 'Main Page' ? 'Settings' : 'Main Page';
+					}}
+				>
+					{'Change Page'}
+				</button>
 			</div>
 		}
 

package/tests/client/html.test.ripple

@@ -1,35 +1,41 @@
 import { flushSync, track } from 'ripple';
 
 describe('html directive', () => {
-  it('renders static html', () => {
-    component App() {
-      let str = '<div>Test</div>';
+	it('renders static html', () => {
+		component App() {
+			let str = '<div>Test</div>';
 
-      {html str}
-    }
+			{html str}
+		}
 
-    render(App);
-    expect(container).toMatchSnapshot();
-  });
+		render(App);
+		expect(container).toMatchSnapshot();
+	});
 
-  it('renders dynamic html', () => {
-    component App() {
-      let str = track('<div>Test</div>');
+	it('renders dynamic html', () => {
+		component App() {
+			let str = track('<div>Test</div>');
 
-      {html @str}
+			{html @str}
 
-      <button onClick={() => { @str = '<div>Updated</div>'; }}>{'Update'}</button>
-    }
+			<button
+				onClick={() => {
+					@str = '<div>Updated</div>';
+				}}
+			>
+				{'Update'}
+			</button>
+		}
 
-    render(App);
-    expect(container).toMatchSnapshot();
+		render(App);
+		expect(container).toMatchSnapshot();
 
-    const button = container.querySelector('button');
-    button.click();
-    flushSync();
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
 
-    expect(container).toMatchSnapshot();
-  });
+		expect(container).toMatchSnapshot();
+	});
 
 	it('renders the correct namespace for child svg element when html is surrounded by <svg>', () => {
 		component App() {
@@ -44,18 +50,22 @@ describe('html directive', () => {
 		expect(circle.namespaceURI).toBe('http://www.w3.org/2000/svg');
 	});
 
-	it('renders the correct namespace for child math element when html is surrounded by <math>', () => {
-		component App() {
-			let str = '<mi>x</mi><mo>+</mo><mi>y</mi>';
+	it(
+		'renders the correct namespace for child math element when html is surrounded by <math>',
+		() => {
+			component App() {
+				let str = '<mi>x</mi><mo>+</mo><mi>y</mi>';
 
-			<math>{html str}</math>;
-		}
+				<math>{html str}</math>
 
-		render(App);
+			}
 
-		const mi = container.querySelector('mi');
-		const mo = container.querySelector('mo');
-		expect(mi.namespaceURI).toBe('http://www.w3.org/1998/Math/MathML');
-		expect(mo.namespaceURI).toBe('http://www.w3.org/1998/Math/MathML');
-	});
+			render(App);
+
+			const mi = container.querySelector('mi');
+			const mo = container.querySelector('mo');
+			expect(mi.namespaceURI).toBe('http://www.w3.org/1998/Math/MathML');
+			expect(mo.namespaceURI).toBe('http://www.w3.org/1998/Math/MathML');
+		},
+	);
 });