ripple 0.2.121 → 0.2.124

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.121",
+  "version": "0.2.124",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",

package/src/compiler/phases/2-analyze/index.js

@@ -582,6 +582,14 @@ const visitors = {
 				}
 				binding.metadata.is_dynamic_component = true;
 			}
+
+			if (!is_dom_element && state.elements) {
+				state.elements.push(node);
+				// Mark dynamic elements as scoped by default since we can't match CSS at compile time
+				if (state.component?.css) {
+						node.metadata.scoped = true;
+				}
+		}
 		}
 
 		if (is_dom_element) {

package/src/compiler/phases/3-transform/client/index.js

@@ -840,6 +840,14 @@ const visitors = {
 						let property =
 							attr.value === null ? b.literal(true) : visit(attr.value, { ...state, metadata });
 
+						if (attr.name.name === 'class' && node.metadata.scoped && state.component.css) {
+							if (property.type === 'Literal') {
+								property = b.literal(`${state.component.css.hash} ${property.value}`);
+							} else {
+								property = b.array([property, b.literal(state.component.css.hash)]);
+							}
+						}
+
 						if (metadata.tracking || attr.name.tracked) {
 							if (attr.name.name === 'children') {
 								children_prop = b.thunk(property);
@@ -872,6 +880,17 @@ const visitors = {
 				}
 			}
 
+		if (node.metadata.scoped && state.component.css) {
+			const hasClassAttr = node.attributes.some(attr => 
+				attr.type === 'Attribute' && attr.name.type === 'Identifier' && attr.name.name === 'class'
+			);
+			if (!hasClassAttr) {
+				const name = is_spreading ? '#class' : 'class';
+				const value = state.component.css.hash;
+				props.push(b.prop('init', b.key(name), b.literal(value)));
+			}
+		}
+
 			const children_filtered = [];
 
 			for (const child of node.children) {

package/src/runtime/internal/client/composite.js

@@ -1,8 +1,7 @@
 /** @import { Block, Component } from '#client' */
 
-import { branch, destroy_block, render } from './blocks.js';
+import { branch, destroy_block, render, render_spread } from './blocks.js';
 import { COMPOSITE_BLOCK } from './constants.js';
-import { apply_element_spread } from './render';
 import { active_block } from './runtime.js';
 
 /**
@@ -48,8 +47,7 @@ export function composite(get_component, node, props) {
 					};
 				}
 
-				const spread_fn = apply_element_spread(element, () => props || {});
-				spread_fn();
+				render_spread(element, () => props || {});
 
 				if (typeof props?.children === 'function') {
 					var child_anchor = document.createComment('');

package/src/runtime/internal/client/script.js

@@ -1,4 +1,4 @@
-import { effect } from './blocks';
+import { effect } from './blocks.js';
 /**
  * @param {Text | Comment} node
  * @param {string} content

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

@@ -1,4 +1,5 @@
 /** @import { Component, Derived } from '#server' */
+/** @import { render } from 'ripple/server'*/
 import { DERIVED, UNINITIALIZED } from '../client/constants.js';
 import { is_tracked_object } from '../client/utils.js';
 import { escape } from '../../../utils/escaping.js';
@@ -56,10 +57,7 @@ class Output {
 	}
 }
 
-/**
- * @param {((output: Output, props: Record<string, any>) => void | Promise<void>) & { async?: boolean }} component
- * @returns {Promise<{head: string, body: string, css: Set<string>}>}
- */
+/** @type {render} */
 export async function render(component) {
 	const output = new Output(null);
 

package/tests/client/basic/basic.get-set.test.ripple

@@ -0,0 +1,291 @@
+import { track, flushSync, get, set, effect, untrack } from 'ripple';
+
+describe('basic client > get/set functions', () => {
+	it('gets tracked value', () => {
+		component Test() {
+			let count = track(0);
+
+			<div>{get(count)}</div>
+		}
+
+		render(Test);
+
+		const div = container.querySelector('div');
+		expect(div.textContent).toBe('0');
+	});
+
+	it('gets tracked value after mutation', () => {
+		component Test() {
+			let count = track(0);
+
+			<p>{get(count)}</p>
+			<button onClick={() => @count++}>{'increment'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('1');
+	});
+
+	it('gets tracked value after multiple mutations', () => {
+		component Test() {
+			let count = track(0);
+
+			<p>{get(count)}</p>
+			<button onClick={() => {
+				@count++;
+				@count++;
+				@count++;
+			}}>{'increment'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('3');
+	});
+
+	it('sets tracked value', () => {
+		component Test() {
+			let count = track(0);
+
+			<p>{get(count)}</p>
+			<button onClick={() => set(count, 10)}>{'set to 10'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('10');
+	});
+
+	it('sets tracked value multiple times', () => {
+		component Test() {
+			let count = track(0);
+
+			<p>{get(count)}</p>
+			<button onClick={() => {
+				set(count, 5);
+				set(count, 15);
+				set(count, 25);
+			}}>{'set multiple times'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('25');
+	});
+
+	it('sets tracked value based on previous value', () => {
+		component Test() {
+			let count = track(0);
+
+			<p>{get(count)}</p>
+			<button onClick={() => set(count, get(count) + 10)}>{'add 10'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('10');
+
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('20');
+	});
+
+	it('sets tracked value multiple times based on previous value', () => {
+		component Test() {
+			let count = track(0);
+
+			<p>{get(count)}</p>
+			<button onClick={() => {
+				set(count, get(count) + 5);
+				set(count, get(count) + 15);
+				set(count, get(count) + 25);
+			}}>{'add multiple times'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('45');
+
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('90');
+	});
+
+	function store() {
+		return track(0);
+	}
+
+	it('gets value declared outside Ripple component', () => {
+		component Test() {
+			let count = store();
+			<p>{get(count)}</p>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+	});
+
+	it('sets value declared outside Ripple component', () => {
+		component Test() {
+			let count = store();
+
+			<p>{get(count)}</p>
+			<button onClick={() => set(count, 50)}>{'set to 50'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('50');
+	});
+
+	it('works with effects', () => {
+		component Test() {
+			let count = track(0);
+			let double = track(0);
+
+			effect(() => {
+				set(double, get(count) * 2);
+			});
+
+			<p>{get(double)}</p>
+			<button onClick={() => set(count, get(count) + 1)}>{'increment'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('2');
+
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('4');
+	});
+
+	it('works with effects and untrack', () => {
+		component Test() {
+			let count = track(0);
+			let double = track(0);
+
+			effect(() => {
+				untrack(() => {
+					set(double, get(count) * 2);
+				});
+			});
+
+			<p>{get(double)}</p>
+			<button onClick={() => set(count, get(count) + 1)}>{'increment'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('2');
+
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('2');
+	});
+
+	it("get isn't reactive when declared outside Ripple context", () => {
+		let count = store();
+
+		component Test() {
+			<p>{get(count)}</p>
+			<button onClick={() => { set(count, get(count) + 1) }}>{'increment'}</button>
+		}
+
+		expect(get(count)).toBe(0);
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+		expect(get(count)).toBe(0);
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('0');
+		expect(get(count)).toBe(1);
+	});
+
+	it('throws on trying to set a value outside Ripple component', () => {
+		let count = store();
+
+		expect(get(count)).toBe(0);
+		expect(() => set(count, 1)).toThrow();
+		expect(get(count)).toBe(0);
+	});
+});

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

@@ -1,6 +1,7 @@
-import { flushSync, track, createRefKey } from 'ripple';
+import { flushSync, track, createRefKey, trackSplit } from 'ripple';
 
 describe('dynamic DOM elements', () => {
+
 	it('renders static dynamic element', () => {
 		component App() {
 			let tag = track('div');
@@ -24,14 +25,17 @@ describe('dynamic DOM elements', () => {
 			<@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');
@@ -46,7 +50,7 @@ describe('dynamic DOM elements', () => {
 		}
 		render(App);
 
-		const element = container.querySelector('input') as HTMLInputElement;
+		const element = container.querySelector('input');
 		expect(element).toBeTruthy();
 		expect(element.type).toBe('text');
 		expect(element.value).toBe('test');
@@ -109,8 +113,8 @@ describe('dynamic DOM elements', () => {
 		component App() {
 			let tag = track('span');
 
-			<@tag style={{
-				color: 'red',
+			<@tag style={{ 
+				color: 'red', 
 				fontSize: '16px',
 				fontWeight: 'bold'
 			}}>
@@ -150,17 +154,18 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with ref', () => {
-		let capturedElement: HTMLArticleElement | undefined;
+		let capturedElement = null;
 
 		component App() {
 			let tag = track('article');
 
-			<@tag {ref (node: HTMLArticleElement) => { 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');
@@ -171,7 +176,7 @@ describe('dynamic DOM elements', () => {
 		component App() {
 			let tag = track('header');
 
-			function elementRef(node: HTMLHeaderElement) {
+			function elementRef(node) {
 				// Set an attribute on the element to prove ref was called
 				node.setAttribute('data-spread-ref-called', 'true');
 				node.setAttribute('data-spread-ref-tag', node.tagName.toLowerCase());
@@ -196,4 +201,201 @@ describe('dynamic DOM elements', () => {
 		expect(element.id).toBe('spread-ref-test');
 		expect(element.className).toBe('ref-element');
 	});
-});
+
+	it('has reactive attributes on dynamic elements', () => {
+		component App() {
+			let tag = track('div');
+			let count = track(0);
+			
+			<button onClick={() => { @count++; }}>{'Increment'}</button>
+			<@tag 
+				id={@count % 2 ? 'even' : 'odd'}
+				class={@count % 2 ? 'even-class' : 'odd-class'}
+				data-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');
+		expect(element.getAttribute('data-count')).toBe('2');
+		expect(element.textContent).toBe('Count: 2');
+	});
+
+	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;
+				}
+			</style>
+		}
+
+		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-'));
+		expect(hasScopedClass).toBe(true);
+	});
+
+	it('applies scoped CSS to dynamic elements with reactive classes', () => {
+		component App() {
+			let tag = track('button');
+			let count = track(0);
+			
+			<@tag 
+				class={@count % 2 ? 'even' : 'odd'}
+				id={@count % 2 ? 'even' : 'odd'}
+				onClick={() => { @count++; }}
+			>
+				{'Count: '}{@count}
+			</@tag>
+			
+			<style>
+				.even {
+					background-color: green;
+					color: white;
+				}
+				.odd {
+					background-color: red;
+					color: white;
+				}
+			</style>
+		}
+
+		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-'));
+		expect(hasScopedClass).toBe(true);
+		
+		// Click to increment
+		button.click();
+		flushSync();
+		
+		// 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-'));
+		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);
+		expect(button.id).toBe('odd');
+		expect(button.textContent).toBe('Count: 2');
+	});
+
+	it('handles spread attributes with class and CSS scoping ', () => {
+		component DyanamicButton(props) {
+			const tag = track('button');
+			const [children, rest] = trackSplit(props, ['children']);
+			<@tag {...@rest}>{@rest.class}</@tag>
+			
+			<style>
+				.even {
+					background-color: green;
+				}
+				.odd {
+					background-color: red;
+				}
+			</style>
+		}
+
+		component App() {
+			const count = track(0);
+			<DyanamicButton
+				class={@count % 2 ? 'even' : 'odd'}
+				id={@count % 2 ? 'even' : 'odd'}
+				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-'));
+		expect(hasScopedClass).toBe(true);
+		
+		// Click to increment
+		button.click();
+		flushSync();
+		
+		// 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-'));
+		expect(stillHasScopedClass).toBe(true);
+		expect(newClasses.includes('even')).toBe(true);
+	});
+});

package/types/server.d.ts

@@ -1,4 +1,26 @@
+import type { Props } from '#public'
 
-export declare async function render(
-	component: () => void,
-): { head: string; body: string };
+export interface SSRRenderOutput {
+	head: string;
+	body: string;
+	css: Set<string>;
+	push(chunk: string): void;
+	register_css(hash: string): void;
+}
+
+export interface SSRComponent {
+	(output: SSRRenderOutput, props?: Props): void | Promise<void>;
+	async?: boolean;
+}
+
+export interface SSRRenderResult {
+	head: string;
+	body: string;
+	css: Set<string>;
+}
+
+export type SSRRender = (component: SSRComponent) => Promise<SSRRenderResult>;
+
+export declare function render(
+	component: SSRComponent,
+): Promise<SSRRenderResult>;