ripple 0.3.49 → 0.3.52

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # ripple
 
+## 0.3.52
+
+### Patch Changes
+
+- Updated dependencies
+  [[`2010290`](https://github.com/Ripple-TS/ripple/commit/20102904d68951b47dce3958f88ddd1fc150e7a1)]:
+  - @tsrx/core@0.1.2
+  - ripple@0.3.52
+  - @tsrx/ripple@0.1.2
+
+## 0.3.51
+
+### Patch Changes
+
+- [`f1b1f94`](https://github.com/Ripple-TS/ripple/commit/f1b1f9475553cbe3632a5cc9794a8f54615c29f2)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Patch packages currently
+  versioned at 0.3.50 to fix the bump that caused major 1.0.0 release with a minor
+  changeset.
+
+- Updated dependencies
+  [[`0fdf340`](https://github.com/Ripple-TS/ripple/commit/0fdf3408417a7565a00304b766e958b438b3c834),
+  [`f1b1f94`](https://github.com/Ripple-TS/ripple/commit/f1b1f9475553cbe3632a5cc9794a8f54615c29f2)]:
+  - @tsrx/core@0.1.1
+  - ripple@0.3.51
+  - @tsrx/ripple@0.1.1
+
+## 0.3.50
+
+### Patch Changes
+
+- Updated dependencies
+  [[`2a85e9b`](https://github.com/Ripple-TS/ripple/commit/2a85e9bb73f4d82f2bd2273c33735b4dc7b82d5f)]:
+  - @tsrx/core@0.1.0
+  - @tsrx/ripple@0.1.0
+  - ripple@0.3.50
+
 ## 0.3.49
 
 ### 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.49",
+  "version": "0.3.52",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -76,8 +76,8 @@
     "esm-env": "^1.2.2",
     "@types/estree": "^1.0.8",
     "@types/estree-jsx": "^1.0.5",
-    "@tsrx/core": "0.0.28",
-    "@tsrx/ripple": "0.0.30"
+    "@tsrx/core": "0.1.2",
+    "@tsrx/ripple": "0.1.2"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
@@ -87,6 +87,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.49"
+    "ripple": "0.3.52"
   }
 }

package/tests/client/tsx.test.tsrx

@@ -108,7 +108,10 @@ describe('tsx expression', () => {
 
 	it('renders a tsx element with multiple children', () => {
 		component App() {
-			const el = <tsx><div>first</div><div>second</div></tsx>;
+			const el = <tsx>
+				<div>first</div>
+				<div>second</div>
+			</tsx>;
 			{el}
 		}
 		render(App);
@@ -209,6 +212,7 @@ describe('tsx expression', () => {
 			const el = <tsx>just text</tsx>;
 			{el}
 		}
+
 		render(App);
 		expect(container.textContent).toBe('just text');
 	});
@@ -220,6 +224,7 @@ describe('tsx expression', () => {
 			</tsx>;
 			{el}
 		}
+
 		render(App);
 		const div = container.querySelector('div');
 		expect(div.id).toBe('my-id');
@@ -231,10 +236,12 @@ describe('tsx expression', () => {
 	it('renders tsx element with dynamic attribute values', () => {
 		component App() {
 			let &[name] = track('initial');
+
 			const el = <tsx><div id={name} class={'cls-' + name}>content</div></tsx>;
 			{el}
 			<button onClick={() => (name = 'updated')}>{'update'}</button>
 		}
+
 		render(App);
 		const div = container.querySelector('div');
 		expect(div.id).toBe('initial');
@@ -249,6 +256,7 @@ describe('tsx expression', () => {
 	it('renders tsx element with event handlers', () => {
 		component App() {
 			let &[clicked] = track(false);
+
 			const el = <tsx>
 				<button onClick={() => (clicked = true)}>
 					{'click me'}
@@ -257,6 +265,7 @@ describe('tsx expression', () => {
 			{el}
 			<div class="status">{clicked ? 'clicked' : 'not clicked'}</div>
 		}
+
 		render(App);
 		expect(container.querySelector('.status').textContent).toBe('not clicked');
 
@@ -268,6 +277,7 @@ describe('tsx expression', () => {
 	it('renders tsx element with boolean attributes', () => {
 		component App() {
 			let &[isDisabled] = track(true);
+
 			const el = <tsx>
 				<button disabled={isDisabled}>
 					{'btn'}
@@ -276,6 +286,7 @@ describe('tsx expression', () => {
 			{el}
 			<button class="toggle" onClick={() => (isDisabled = !isDisabled)}>{'toggle'}</button>
 		}
+
 		render(App);
 		expect(container.querySelector('button:not(.toggle)').disabled).toBe(true);
 
@@ -287,10 +298,12 @@ describe('tsx expression', () => {
 	it('renders tsx element with style attribute', () => {
 		component App() {
 			let &[color] = track('red');
+
 			const el = <tsx><div style={'color: ' + color}>styled</div></tsx>;
 			{el}
 			<button onClick={() => (color = 'blue')}>{'change color'}</button>
 		}
+
 		render(App);
 		expect(container.querySelector('div').style.color).toBe('red');
 
@@ -302,6 +315,7 @@ describe('tsx expression', () => {
 	it('renders tsx element with multiple dynamic attributes', () => {
 		component App() {
 			let &[index] = track(0);
+
 			const el = <tsx>
 				<div id={'item-' + index} class={'item pos-' + index} data-index={index} title={'Item ' +
 					index}>
@@ -311,6 +325,7 @@ describe('tsx expression', () => {
 			{el}
 			<button onClick={() => index++}>{'next'}</button>
 		}
+
 		render(App);
 		const div = container.querySelector('div');
 		expect(div.id).toBe('item-0');
@@ -334,6 +349,7 @@ describe('tsx expression', () => {
 		component App() {
 			<Wrapper content={<tsx><span class="inner">direct prop</span></tsx>} />
 		}
+
 		render(App);
 		const wrapper = container.querySelector('.wrapper');
 		expect(wrapper).toBeTruthy();
@@ -355,6 +371,7 @@ describe('tsx expression', () => {
 				children={<tsx><p>Card content here</p></tsx>}
 			/>
 		}
+
 		render(App);
 		const card = container.querySelector('.card');
 		expect(card.querySelector('.card-title .bold').textContent).toBe('Title');
@@ -363,17 +380,14 @@ describe('tsx expression', () => {
 
 	it('renders tsx from function defined outside component', () => {
 		function createBadge(label: string) {
-			return <tsx>
-				<span class="badge">
-					{label}
-				</span>
-			</tsx>;
+			return <tsx><span class="badge">{label}</span></tsx>;
 		}
 
 		component App() {
 			const badge = createBadge('New');
 			{badge}
 		}
+
 		render(App);
 		expect(container.querySelector('.badge')).toBeTruthy();
 		expect(container.querySelector('.badge').textContent).toBe('New');
@@ -381,11 +395,7 @@ describe('tsx expression', () => {
 
 	it('renders tsx from function with multiple elements', () => {
 		function createListItem(item: string) {
-			return <tsx>
-				<li class="list-item">
-					{item}
-				</li>
-			</tsx>;
+			return <tsx><li class="list-item">{item}</li></tsx>;
 		}
 
 		component App() {
@@ -396,6 +406,7 @@ describe('tsx expression', () => {
 				}
 			</ul>
 		}
+
 		render(App);
 		const listItems = container.querySelectorAll('.list-item');
 		expect(listItems.length).toBe(3);
@@ -416,9 +427,7 @@ describe('tsx expression', () => {
 		function itemRenderer(item: string) {
 			return <tsx>
 				<li>
-					<span class="item-content">
-						{item}
-					</span>
+					<span class="item-content">{item}</span>
 				</li>
 			</tsx>;
 		}
@@ -426,6 +435,7 @@ describe('tsx expression', () => {
 		component App() {
 			<List items={['One', 'Two', 'Three']} renderItem={itemRenderer} />
 		}
+
 		render(App);
 		const items = container.querySelectorAll('.item-content');
 		expect(items.length).toBe(3);
@@ -438,9 +448,7 @@ describe('tsx expression', () => {
 		function createCounter(label: string, getCount: () => number) {
 			return <tsx>
 				<div class="counter-display">
-					<span class="label">
-						{label}
-					</span>
+					<span class="label">{label}</span>
 					<span class="count">
 						{getCount()}
 					</span>
@@ -450,10 +458,12 @@ describe('tsx expression', () => {
 
 		component App() {
 			let &[count] = track(0);
+
 			const counterElement = createCounter('Count:', () => count);
 			{counterElement}
 			<button onClick={() => count++}>{'increment'}</button>
 		}
+
 		render(App);
 		expect(container.querySelector('.label').textContent).toBe('Count:');
 		expect(container.querySelector('.count').textContent).toBe('0');
@@ -472,9 +482,7 @@ describe('tsx expression', () => {
 			return <tsx>
 				<button class="icon-button">
 					{createIcon(icon)}
-					<span class="btn-label">
-						{label}
-					</span>
+					<span class="btn-label">{label}</span>
 				</button>
 			</tsx>;
 		}
@@ -483,6 +491,7 @@ describe('tsx expression', () => {
 			const btn = createButton('save', 'Save');
 			{btn}
 		}
+
 		render(App);
 		const button = container.querySelector('.icon-button');
 		expect(button).toBeTruthy();
@@ -502,6 +511,7 @@ describe('tsx expression', () => {
 			<Alert message="No icon" />
 			<Alert icon={<tsx><span class="custom-icon">✓</span></tsx>} message="Custom icon" />
 		}
+
 		render(App);
 		const alerts = container.querySelectorAll('.alert');
 		expect(alerts[0].querySelector('.message').textContent).toBe('No icon');
@@ -511,11 +521,7 @@ describe('tsx expression', () => {
 
 	it('renders tsx stored in array via function', () => {
 		function createItem(className: string, content: string) {
-			return <tsx>
-				<div class={className}>
-					{content}
-				</div>
-			</tsx>;
+			return <tsx><div class={className}>{content}</div></tsx>;
 		}
 
 		component App() {
@@ -531,6 +537,7 @@ describe('tsx expression', () => {
 				}
 			</div>
 		}
+
 		render(App);
 		const container_el = container.querySelector('.container');
 		expect(container_el.querySelector('.item-a').textContent).toBe('A');
@@ -554,6 +561,7 @@ describe('tsx expression', () => {
 			<button class="set-success" onClick={() => (status = 'success')}>{'Success'}</button>
 			<button class="set-error" onClick={() => (status = 'error')}>{'Error'}</button>
 		}
+
 		render(App);
 		expect(container.querySelector('.default')).toBeTruthy();
 
@@ -568,3 +576,84 @@ describe('tsx expression', () => {
 		expect(container.querySelector('.success')).toBeFalsy();
 	});
 });
+
+describe('tsrx expression', () => {
+	it('renders native double-quoted text in an assigned fragment', () => {
+		component App() {
+			const el = <tsrx>
+				<div>"Hello world"</div>
+			</tsrx>;
+			{el}
+		}
+
+		render(App);
+
+		const div = container.querySelector('div');
+		expect(div).toBeTruthy();
+		expect(div.textContent).toBe('Hello world');
+	});
+
+	it('runs setup statements before native template output', () => {
+		component App() {
+			const el = <tsrx>
+				const label = 'from setup';
+				<div>{label}</div>
+			</tsrx>;
+			{el}
+		}
+
+		render(App);
+
+		expect(container.querySelector('div').textContent).toBe('from setup');
+	});
+
+	it('updates reactive expressions inside native fragments', () => {
+		component App() {
+			let &[count] = track(0);
+
+			const el = <tsrx>
+				<div>{'count: ' + count}</div>
+			</tsrx>;
+			{el}
+			<button onClick={() => count++}>{'increment'}</button>
+		}
+
+		render(App);
+
+		expect(container.querySelector('div').textContent).toBe('count: 0');
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.querySelector('div').textContent).toBe('count: 1');
+	});
+
+	it('renders native control flow inside an assigned fragment', () => {
+		component App() {
+			const el = <tsrx>
+				if (true) {
+					<span>"visible"</span>
+				}
+			</tsrx>;
+			{el}
+		}
+
+		render(App);
+
+		expect(container.querySelector('span').textContent).toBe('visible');
+	});
+
+	it('renders fragments returned from helpers outside components', () => {
+		function makeFragment(label: string) {
+			return <tsrx>
+				<span>{label}</span>
+			</tsrx>;
+		}
+
+		component App() {
+			{makeFragment('from helper')}
+		}
+
+		render(App);
+
+		expect(container.querySelector('span').textContent).toBe('from helper');
+	});
+});

package/tests/server/basic.test.tsrx

@@ -40,6 +40,21 @@ second"</pre>
 		);
 	});
 
+	it('renders inline tsrx fragments', async () => {
+		component Basic() {
+			const content = <tsrx>
+				const label = 'Server';
+				<span>{label}</span>
+			</tsrx>;
+
+			<div>{content}</div>
+		}
+
+		const { body } = await render(Basic);
+
+		expect(body).toBeHtml('<div><span>Server</span></div>');
+	});
+
 	it('renders tracked state updates', async () => {
 		component Counter() {
 			let &[count] = track(0);