ripple 0.2.78 → 0.2.80

package/package.json

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

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

@@ -802,20 +802,35 @@ const visitors = {
 				}
 			}
 
-			if (is_spreading) {
+			const metadata = { tracking: false, await: false };
+			// We visit, but only to gather metadata
+			b.call(visit(node.id, { ...state, metadata }));
+
+			if (metadata.tracking) {
 				state.init.push(
 					b.stmt(
 						b.call(
-							node.id,
+							'_$_.composite',
+							b.thunk(visit(node.id, state)),
 							id,
-							b.call('_$_.spread_props', b.thunk(b.object(props)), b.id('__block')),
-							b.id('_$_.active_block'),
+							is_spreading
+								? b.call('_$_.spread_props', b.thunk(b.object(props)), b.id('__block'))
+								: b.object(props),
 						),
 					),
 				);
 			} else {
 				state.init.push(
-					b.stmt(b.call(visit(node.id, state), id, b.object(props), b.id('_$_.active_block'))),
+					b.stmt(
+						b.call(
+							visit(node.id, state),
+							id,
+							is_spreading
+								? b.call('_$_.spread_props', b.thunk(b.object(props)), b.id('__block'))
+								: b.object(props),
+							b.id('_$_.active_block'),
+						),
+					),
 				);
 			}
 		}

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

@@ -0,0 +1,22 @@
+import { branch, destroy_block, render } from './blocks.js';
+import { COMPOSITE_BLOCK } from './constants.js';
+import { active_block } from './runtime.js';
+
+export function composite(get_component, node, props) {
+	var anchor = node;
+	var b = null;
+
+	render(() => {
+		var component = get_component();
+
+    if (b !== null) {
+      destroy_block(b);
+      b = null;
+    }
+
+		b = branch(() => {
+			var block = active_block;
+			component(anchor, props, block);
+		});
+	}, COMPOSITE_BLOCK);
+}

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

@@ -5,8 +5,8 @@ export var BRANCH_BLOCK = 1 << 4;
 export var FOR_BLOCK = 1 << 5;
 export var TRY_BLOCK = 1 << 6;
 export var IF_BLOCK = 1 << 7;
-export var ASYNC_BLOCK = 1 << 8;
-export var COMPAT_BLOCK = 1 << 9;
+export var COMPOSITE_BLOCK = 1 << 8;
+export var ASYNC_BLOCK = 1 << 9;
 export var CONTAINS_UPDATE = 1 << 10;
 export var CONTAINS_TEARDOWN = 1 << 11;
 export var BLOCK_HAS_RUN = 1 << 12;
@@ -16,7 +16,7 @@ export var DEFERRED = 1 << 15;
 export var PAUSED = 1 << 16;
 export var DESTROYED = 1 << 17;
 
-export var LOGIC_BLOCK = FOR_BLOCK | IF_BLOCK | TRY_BLOCK;
+export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | TRY_BLOCK | COMPOSITE_BLOCK;
 
 export var UNINITIALIZED = Symbol();
 /** @type {unique symbol} */

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

@@ -43,6 +43,8 @@ export {
   maybe_tracked,
 } from './runtime.js';
 
+export { composite } from './composite.js';
+
 export { for_block as for } from './for.js';
 
 export { if_block as if } from './if.js';

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

@@ -114,6 +114,10 @@ export function spread_attrs(attrs, css_hash) {
 
 		if (typeof value === 'function') continue;
 
+    if (is_tracked_object(value)) {
+      value = get(value);
+    }
+
     if (name === 'class' && css_hash) {
       value = (value == null ? '' : value) + ' ' + css_hash;
     }

package/tests/client/__snapshots__/basic.test.ripple.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`basic > basic operations 1`] = `
+exports[`basic client > basic operations 1`] = `
 <div>
   <div>
     0
@@ -18,25 +18,7 @@ exports[`basic > basic operations 1`] = `
 </div>
 `;
 
-exports[`basic > correctly renders adjacent text nodes 1`] = `
-<div>
-  <div>
-    11
-  </div>
-  <div>
-    11
-  </div>
-  <div>
-    truetrue
-  </div>
-  <div>
-    truetrue
-  </div>
-  
-</div>
-`;
-
-exports[`basic > handles boolean attributes with no prop value provides 1`] = `
+exports[`basic client > handles boolean attributes with no prop value provides 1`] = `
 <div>
   <div
     class="container"
@@ -55,7 +37,7 @@ exports[`basic > handles boolean attributes with no prop value provides 1`] = `
 </div>
 `;
 
-exports[`basic > render semi-dynamic text 1`] = `
+exports[`basic client > render semi-dynamic text 1`] = `
 <div>
   <div>
     Hello World
@@ -64,7 +46,7 @@ exports[`basic > render semi-dynamic text 1`] = `
 </div>
 `;
 
-exports[`basic > render spread props without duplication 1`] = `
+exports[`basic client > render spread props without duplication 1`] = `
 <div>
   <div>
     <input
@@ -78,7 +60,7 @@ exports[`basic > render spread props without duplication 1`] = `
 </div>
 `;
 
-exports[`basic > render static attributes 1`] = `
+exports[`basic client > render static attributes 1`] = `
 <div>
   <div
     class="foo"
@@ -91,7 +73,7 @@ exports[`basic > render static attributes 1`] = `
 </div>
 `;
 
-exports[`basic > render static text 1`] = `
+exports[`basic client > render static text 1`] = `
 <div>
   <div>
     Hello World
@@ -100,7 +82,7 @@ exports[`basic > render static text 1`] = `
 </div>
 `;
 
-exports[`basic > renders simple JS expression logic correctly 1`] = `
+exports[`basic client > renders simple JS expression logic correctly 1`] = `
 <div>
   <div>
     {"0":"Test"}
@@ -112,7 +94,7 @@ exports[`basic > renders simple JS expression logic correctly 1`] = `
 </div>
 `;
 
-exports[`basic > should handle lexical scopes correctly 1`] = `
+exports[`basic client > should handle lexical scopes correctly 1`] = `
 <div>
   <section>
     Nested scope variable

package/tests/client/basic.test.ripple

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { mount, flushSync, effect, track } from 'ripple';
 import { compile } from 'ripple/compiler';
 
-describe('basic', () => {
+describe('basic client', () => {
 	let container;
 
 	function render(component) {

package/tests/client/composite.test.ripple

@@ -663,5 +663,41 @@ describe('composite components', () => {
 
 		render(App);
 		expect(container).toMatchSnapshot();
-	})
+	});
+
+	it('handles dynamic component switching', () => {
+		component Child1() {
+			<div>{"I am child 1"}</div>
+		}
+
+		component Child2() {
+			<div>{"I am child 2"}</div>
+		}
+
+		component App() {
+			let thing = track(() => Child1)
+
+			<div id="container">
+				<@thing />
+			</div>
+
+			<button onClick={() => @thing = @thing === Child1 ? Child2 : Child1}>{"Change Child"}</button>
+		}
+
+		render(App);
+		flushSync();
+
+		expect(container.querySelector('#container').textContent).toBe('I am child 1');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('#container').textContent).toBe('I am child 2');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('#container').textContent).toBe('I am child 1');
+	});
 });

package/tests/server/basic.test.ripple

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'ripple/server';
+
+describe('basic client', () => {
+	it('render static text', async () => {
+		component Basic() {
+			<div>{'Hello World'}</div>
+		}
+
+		const { head, body } = await render(Basic);
+
+		expect(head).toBe('');
+		expect(body).toBe('<div>Hello World</div>');
+	});
+});

package/types/server.d.ts

@@ -0,0 +1,4 @@
+
+export declare async function render(
+	component: () => void,
+): { head: string; body: string };