ripple 0.2.79 → 0.2.81

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

@@ -18,6 +18,7 @@ export type Dependency = {
 };
 
 export type Tracked = {
+	a: { get?: Function, set?: Function };
 	b: Block;
 	c: number;
 	f: number;
@@ -25,6 +26,7 @@ export type Tracked = {
 };
 
 export type Derived = {
+	a: { get?: Function, set?: Function };
 	b: Block;
 	blocks: null | Block[];
 	c: number;

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) {
@@ -1276,7 +1276,12 @@ describe('basic', () => {
 		let logs = [];
 
 		component App() {
-			let count = track(0);
+			let count = track(0, {
+				set(v) {
+					logs.push('inside setter');
+					return v;
+				}
+			});
 			let name = track('Click Me');
 
 			function buttonRef(el) {
@@ -1289,7 +1294,7 @@ describe('basic', () => {
 			<Child
 				class="my-button"
 				onClick={() => @name === 'Click Me' ? @name = 'Clicked' : @name = 'Click Me'}
-				count:={() => @count, (v) => {logs.push('inside setter'); @count++}}
+				count={@count}
 				{ref buttonRef}
 			>{@name}</Child>;
 		}

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/index.d.ts

@@ -89,13 +89,13 @@ type RestKeys<T, K extends readonly (keyof T)[]> = Expand<Omit<T, K[number]>>;
 type SplitResult<T extends Props, K extends readonly (keyof T)[]> =
   [...PickKeys<T, K>, UnwrapTracked<RestKeys<T, K>>];
 
-type TrackOptions = { split?: readonly (string | number | symbol)[] };
+type TrackOptions<T> = { split?: readonly (string | number | symbol)[], get?: (v: T) => T, set?: (v: T) => T };
 
 export declare function track<V>(value?: V | (() => V)): Tracked<V>;
 
 export declare function track<V extends Props, const K extends readonly (keyof V)[]>(
   value: V,
-  options: TrackOptions
+  options: TrackOptions<V>
 ): SplitResult<V, K>;
 
 export function on<Type extends keyof WindowEventMap>(

package/types/server.d.ts

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

package/tests/client/accessors-props.test.ripple

@@ -1,146 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, effect, track } from 'ripple';
-
-describe('prop accessors', () => {
-	let container;
-
-	function render(component) {
-		mount(component, {
-			target: container
-		});
-	}
-
-	beforeEach(() => {
-		container = document.createElement('div');
-		document.body.appendChild(container);
-	});
-
-	afterEach(() => {
-		document.body.removeChild(container);
-		container = null;
-	});
-
-  it('should render a basic prop accessor on a composite component', () => {
-    const logs = [];
-
-    component Child(props) {
-      effect(() => {
-        logs.push('App effect', props.@foo);
-      });
-
-      <button onClick={() => props.@foo++}>{"Increment foo"}</button>
-    }
-
-    component App(props) {
-      let foo = track(0);
-
-      <Child {foo} />
-
-      <div>{"parent foo: " + @foo}</div>
-
-      <button onClick={() => { @foo++; }}>{"Increment parent foo"}</button>
-    }
-
-    render(App);
-    flushSync();
-
-    expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 0');
-    expect(logs).toEqual(['App effect', 0]);
-
-    const [button, button2] = container.querySelectorAll('button');
-
-    button.click();
-    flushSync();
-    
-    expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 1');
-    expect(logs).toEqual(['App effect', 0, 'App effect', 1]);
-
-    button2.click();
-    flushSync();
-
-    expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 2');
-    expect(logs).toEqual(['App effect', 0, 'App effect', 1, 'App effect', 2]);
-  });
-
-  // Note: Disabled this test for further investigation.
-  it.skip('should render a basic prop accessor on a composite component #2', () => {
-    const logs = [];
-
-    component Child({ foo }) {
-      effect(() => {
-        logs.push('App effect', props.foo);
-      });
-
-      <button onClick={() => props.foo++}>{"Increment foo"}</button>
-    }
-
-    component App() {
-      let foo = track(0);
-
-      <Child foo:={() => {
-          return @foo;
-        }, v => {
-          // do not update parent
-        }} />
-
-      <div>{"parent foo: " + @foo}</div>
-
-      <button onClick={() => { foo++ }}>{"Increment parent foo"}</button>
-    }
-
-    render(App);
-    flushSync();
-
-    expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 0');
-    expect(logs).toEqual(['App effect', 0]);
-
-    const [button, button2] = container.querySelectorAll('button');
-
-    button.click();
-    flushSync();
-      
-    expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 0');
-    expect(logs).toEqual(['App effect', 0]);
-
-    button2.click();
-    flushSync();
-
-    expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 1');
-    expect(logs).toEqual(['App effect', 0, 'App effect', 1]);
-
-    button2.click();
-    flushSync();
-
-    expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 2');
-    expect(logs).toEqual(['App effect', 0, 'App effect', 1, 'App effect', 2]);
-  });
-
-  it('handles a simple getter prop accessor with no setter', () =>{
-    component Parent() {
-      let value = track(123);
-
-      <Child value:={() => @value} />
-
-      <button onClick={() => { @value++ }}>{"Increment value"}</button>
-    }
-
-    component Child({ value }) {
-      <div>{value}</div>
-    }
-
-    render(Parent);
-
-    expect(container.querySelector('div').textContent).toBe('123');
-
-    const button = container.querySelector('button');
-    button.click();
-    flushSync();
-
-    expect(container.querySelector('div').textContent).toBe('124');
-
-    button.click();
-    flushSync();
-
-    expect(container.querySelector('div').textContent).toBe('125');
-  });
-});