ripple 0.2.80 → 0.2.82

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/tests/client/basic.test.ripple

@@ -1276,7 +1276,12 @@ describe('basic client', () => {
 		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 client', () => {
 			<Child
 				class="my-button"
 				onClick={() => @name === 'Click Me' ? @name = 'Clicked' : @name = 'Click Me'}
-				count:={() => @count, (v) => {logs.push('inside setter'); @count++}}
+				{count}
 				{ref buttonRef}
 			>{@name}</Child>;
 		}

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/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');
-  });
-});