ripple 0.2.4 → 0.2.6

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

@@ -8,7 +8,7 @@ import {
 	PAUSED,
 	RENDER_BLOCK,
 	ROOT_BLOCK,
-	TRY_BLOCK
+	TRY_BLOCK,
 } from './constants';
 import { next_sibling } from './operations';
 import { apply_element_spread } from './render';
@@ -18,13 +18,15 @@ import {
 	active_reaction,
 	run_block,
 	run_teardown,
-	schedule_update
+	schedule_update,
 } from './runtime';
 import { suspend } from './try';
 
 export function user_effect(fn) {
 	if (active_block === null) {
-		throw new Error('effect() must be called within an active context, such as a component or effect');
+		throw new Error(
+			'effect() must be called within an active context, such as a component or effect'
+		);
 	}
 
 	var component = active_component;
@@ -33,7 +35,7 @@ export function user_effect(fn) {
 		e.push({
 			b: active_block,
 			fn,
-			r: active_reaction
+			r: active_reaction,
 		});
 
 		return;
@@ -66,6 +68,26 @@ export function async(fn) {
 	});
 }
 
+export function use(element, get_fn) {
+	var fn = undefined;
+	var e;
+
+	return block(RENDER_BLOCK, () => {
+		if (fn !== (fn = get_fn())) {
+			if (e) {
+				destroy_block(e);
+				e = null;
+			}
+
+			if (fn) {
+				e = branch(() => {
+					effect(() => fn(element));
+				});
+			}
+		}
+	});
+}
+
 export function root(fn) {
 	return block(ROOT_BLOCK, fn);
 }
@@ -97,7 +119,7 @@ export function block(flags, fn, state = null) {
 		p: active_block,
 		prev: null,
 		s: state,
-		t: null
+		t: null,
 	};
 
 	if (active_reaction !== null && (active_reaction.f & COMPUTED) !== 0) {

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

@@ -22,3 +22,4 @@ export var UNINITIALIZED = Symbol();
 export var TRACKED_OBJECT = Symbol();
 export var SPREAD_OBJECT = Symbol();
 export var COMPUTED_PROPERTY = Symbol();
+export var USE_PROP = '@use';

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

@@ -9,7 +9,7 @@ export {
 	set_selected,
 } from './render.js';
 
-export { render, render_spread, async } from './blocks.js';
+export { render, render_spread, async, use } from './blocks.js';
 
 export { event, delegate } from './events.js';
 
@@ -39,7 +39,8 @@ export {
 	structured_clone,
 	push_component,
 	pop_component,
-	untrack
+	untrack,
+	use_prop,
 } from './runtime.js';
 
 export { for_block as for } from './for.js';
@@ -49,5 +50,3 @@ export { if_block as if } from './if.js';
 export { try_block as try, resume_context, aborted } from './try.js';
 
 export { template, append } from './template.js';
-
-

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

@@ -1,5 +1,6 @@
-import { effect } from './blocks';
-import { get_descriptors, get_prototype_of } from './utils';
+import { destroy_block, use } from './blocks';
+import { USE_PROP } from './constants';
+import { get_descriptors, get_own_property_symbols, get_prototype_of } from './utils';
 
 export function set_text(text, value) {
 	// For objects, we apply string coercion (which might make things like $state array references in the template reactive) before diffing
@@ -62,6 +63,8 @@ export function set_attribute(element, attribute, value) {
 
 export function set_attributes(element, attributes) {
 	for (const key in attributes) {
+		if (key === '$children') continue;
+
 		let value = attributes[key];
 
 		if (key === 'class') {
@@ -158,7 +161,33 @@ export function set_selected(element, selected) {
 }
 
 export function apply_element_spread(element, fn) {
+	var prev;
+	var effects = {};
+
 	return () => {
-		set_attributes(element, fn());
+		var next = fn();
+
+		for (let symbol of get_own_property_symbols(effects)) {
+			if (!next[symbol]) {
+				destroy_block(effects[symbol]);
+			}
+		}
+
+		for (const symbol of get_own_property_symbols(next)) {
+			var use_fn = next[symbol];
+
+			if (symbol.description === USE_PROP && (!prev || use_fn !== prev[symbol])) {
+				if (effects[symbol]) {
+					destroy_block(effects[symbol]);
+				}
+				effects[symbol] = use(element, use_fn);
+			}
+
+			next[symbol] = use_fn;
+		}
+
+		set_attributes(element, next);
+
+		prev = next;
 	};
 }

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

@@ -22,7 +22,8 @@ import {
 	TRACKED,
 	TRACKED_OBJECT,
 	TRY_BLOCK,
-	UNINITIALIZED
+	UNINITIALIZED,
+	USE_PROP
 } from './constants';
 import { capture, suspend } from './try.js';
 import { define_property, is_array } from './utils';
@@ -923,3 +924,7 @@ export function pop_component() {
 	}
 	active_component = component.p;
 }
+
+export function use_prop() {
+	return Symbol(USE_PROP);
+}

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

@@ -7,6 +7,7 @@ export var get_prototype_of = Object.getPrototypeOf;
 export var object_values = Object.values;
 export var object_entries = Object.entries;
 export var object_keys = Object.keys;
+export var get_own_property_symbols = Object.getOwnPropertySymbols;
 export var structured_clone = structuredClone;
 
 export function create_anchor() {

package/src/utils/builders.js

@@ -716,6 +716,17 @@ export function jsx_id(name) {
 	};
 }
 
+/**
+ * @param {ESTree.Expression} argument
+ * @returns {ESTree.JSXSpreadAttribute}
+ */
+export function jsx_spread_attribute(argument) {
+	return {
+		type: 'JSXSpreadAttribute',
+		argument
+	};
+}
+
 export {
 	await_builder as await,
 	let_builder as let,

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

@@ -0,0 +1,66 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`basic > render dynamic text 1`] = `
+<div>
+  <button>
+    Change Text
+  </button>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic > render semi-dynamic text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic > render static attributes 1`] = `
+<div>
+  <div
+    class="foo"
+    id="bar"
+    style="color: red;"
+  >
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic > render static elements 1`] = `
+<div>
+  <div
+    class="foo"
+    id="bar"
+    style="color: red;"
+  >
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic > render static text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic > renders correctly 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;

package/tests/basic.test.ripple

@@ -0,0 +1,273 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync } from 'ripple';
+
+describe('basic', () => {
+  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('render static text', () => {
+    component Basic() {
+      <div>{"Hello World"}</div>
+    }
+
+    render(Basic);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('render static attributes', () => {
+    component Basic() {
+      <div class="foo" id="bar" style="color: red;">{"Hello World"}</div>
+    }
+
+    render(Basic);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('render semi-dynamic text', () => {
+    component Basic() {
+      let text = 'Hello World';
+      <div>{text}</div>
+    }
+
+    render(Basic);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('render dynamic text', () => {
+    component Basic() {
+      let $text = 'Hello World';
+
+      <button onClick={() => $text = 'Hello Ripple'}>{"Change Text"}</button>
+
+      <div>{$text}</div>
+    }
+
+    render(Basic);
+
+    const button = container.querySelector('button');
+    
+    button.click();
+    flushSync();
+
+    expect(container.querySelector('div').textContent).toEqual('Hello Ripple');
+  });
+
+  it('render dynamic class attribute', () => {
+    component Basic() {
+      let $active = false;
+
+      <button onClick={() => $active = !$active}>{"Toggle"}</button>
+
+      <div $class={$active ? 'active' : 'inactive'}>{"Dynamic Class"}</div>
+    }
+
+    render(Basic);
+
+    const button = container.querySelector('button');
+    const div = container.querySelector('div');
+    
+    expect(div.className).toBe('inactive');
+    
+    button.click();
+    flushSync();
+    
+    expect(div.className).toBe('active');
+    
+    button.click();
+    flushSync();
+    
+    expect(div.className).toBe('inactive');
+  });
+
+  it('render dynamic id attribute', () => {
+    component Basic() {
+      let $count = 0;
+
+      <button onClick={() => $count++}>{"Increment"}</button>
+
+      <div $id={`item-${$count}`}>{"Dynamic ID"}</div>
+    }
+
+    render(Basic);
+
+    const button = container.querySelector('button');
+    const div = container.querySelector('div');
+    
+    expect(div.id).toBe('item-0');
+    
+    button.click();
+    flushSync();
+    
+    expect(div.id).toBe('item-1');
+    
+    button.click();
+    flushSync();
+    
+    expect(div.id).toBe('item-2');
+  });
+
+  it('render dynamic style attribute', () => {
+    component Basic() {
+      let $color = 'red';
+
+      <button onClick={() => $color = $color === 'red' ? 'blue' : 'red'}>{"Change Color"}</button>
+
+      <div $style={`color: ${$color}; font-weight: bold;`}>{"Dynamic Style"}</div>
+    }
+
+    render(Basic);
+
+    const button = container.querySelector('button');
+    const div = container.querySelector('div');
+    
+    expect(div.style.color).toBe('red');
+    expect(div.style.fontWeight).toBe('bold');
+    
+    button.click();
+    flushSync();
+    
+    expect(div.style.color).toBe('blue');
+    expect(div.style.fontWeight).toBe('bold');
+  });
+
+  it('render dynamic boolean attributes', () => {
+    component Basic() {
+      let $disabled = false;
+      let $checked = false;
+
+      <button onClick={() => { $disabled = !$disabled; $checked = !$checked; }}>{"Toggle"}</button>
+
+      <input type="checkbox" $disabled={$disabled} $checked={$checked} />
+    }
+
+    render(Basic);
+
+    const button = container.querySelector('button');
+    const input = container.querySelector('input');
+    
+    expect(input.disabled).toBe(false);
+    expect(input.checked).toBe(false);
+    
+    button.click();
+    flushSync();
+    
+    expect(input.disabled).toBe(true);
+    expect(input.checked).toBe(true);
+  });
+
+  it('render multiple dynamic attributes', () => {
+    component Basic() {
+      let $theme = 'light';
+      let $size = 'medium';
+
+      <button onClick={() => {
+        $theme = $theme === 'light' ? 'dark' : 'light';
+        $size = $size === 'medium' ? 'large' : 'medium';
+      }}>{"Toggle Theme & Size"}</button>
+
+      <div 
+        $class={`theme-${$theme} size-${$size}`}
+        $data-theme={$theme}
+        $data-size={$size}
+      >
+        {"Multiple Dynamic Attributes"}
+      </div>
+    }
+
+    render(Basic);
+
+    const button = container.querySelector('button');
+    const div = container.querySelector('div');
+    
+    expect(div.className).toBe('theme-light size-medium');
+    expect(div.getAttribute('data-theme')).toBe('light');
+    expect(div.getAttribute('data-size')).toBe('medium');
+    
+    button.click();
+    flushSync();
+    
+    expect(div.className).toBe('theme-dark size-large');
+    expect(div.getAttribute('data-theme')).toBe('dark');
+    expect(div.getAttribute('data-size')).toBe('large');
+  });
+
+  it('render conditional attributes', () => {
+    component Basic() {
+      let $showTitle = false;
+      let $showAria = false;
+
+      <button onClick={() => { $showTitle = !$showTitle; $showAria = !$showAria; }}>{"Toggle Attributes"}</button>
+
+      <div 
+        $title={$showTitle ? 'This is a title' : null}
+        $aria-label={$showAria ? 'Accessible label' : null}
+      >
+        {"Conditional Attributes"}
+      </div>
+    }
+
+    render(Basic);
+
+    const button = container.querySelector('button');
+    const div = container.querySelector('div');
+    
+    expect(div.hasAttribute('title')).toBe(false);
+    expect(div.hasAttribute('aria-label')).toBe(false);
+    
+    button.click();
+    flushSync();
+    
+    expect(div.getAttribute('title')).toBe('This is a title');
+    expect(div.getAttribute('aria-label')).toBe('Accessible label');
+    
+    button.click();
+    flushSync();
+    
+    expect(div.hasAttribute('title')).toBe(false);
+    expect(div.hasAttribute('aria-label')).toBe(false);
+  });
+
+  it('render spread attributes', () => {
+    component Basic() {
+      let $attrs = { class: 'initial', id: 'test-1' };
+
+      <button onClick={() => {
+        $attrs = { class: 'updated', id: 'test-2', 'data-extra': 'value' };
+      }}>{"Update Attributes"}</button>
+
+      <div {...$attrs}>{"Spread Attributes"}</div>
+    }
+
+    render(Basic);
+
+    const button = container.querySelector('button');
+    const div = container.querySelector('div');
+    
+    expect(div.className).toBe('initial');
+    expect(div.id).toBe('test-1');
+    expect(div.hasAttribute('data-extra')).toBe(false);
+    
+    button.click();
+    flushSync();
+    
+    expect(div.className).toBe('updated');
+    expect(div.id).toBe('test-2');
+    expect(div.getAttribute('data-extra')).toBe('value');
+  });
+});

package/tests/use.test.ripple

@@ -0,0 +1,32 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync } from 'ripple';
+
+describe('@use element decorators', () => {
+  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('capture a <div>', () => {
+    let div;
+    
+    component Component() {
+      <div {@use (node) => { div = node; }}>{"Hello World"}</div>
+    }
+
+    render(Component);
+
+    expect(div.textContent).toBe('Hello World');
+  });
+});