ripple 0.2.199 → 0.2.201

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

@@ -4,8 +4,8 @@
 */
 
 import { Readable } from 'stream';
-import { DERIVED, UNINITIALIZED } from '../client/constants.js';
-import { is_tracked_object } from '../client/utils.js';
+import { DERIVED, UNINITIALIZED, TRACKED } from '../client/constants.js';
+import { is_tracked_object, get_descriptor, define_property, is_array } from '../client/utils.js';
 import { escape } from '../../../utils/escaping.js';
 import { is_boolean_attribute } from '../../../compiler/utils.js';
 import { clsx } from 'clsx';
@@ -180,6 +180,8 @@ class Output {
 	#parent = null;
 	/** @type {import('stream').Readable | null} */
 	#stream = null;
+	/** @type {null | 'head'} */
+	target = null;
 
 	/**
 	 * @param {Output | null} parent
@@ -195,6 +197,11 @@ class Output {
 	 * @returns {void}
 	 */
 	push(str) {
+		if (this.target === 'head') {
+			this.head += str;
+			return;
+		}
+
 		if (this.#stream) {
 			this.#stream.push(str);
 		} else {
@@ -476,7 +483,7 @@ export function spread_attrs(attrs, css_hash) {
 		}
 
 		if (name === 'class' && css_hash) {
-			value = value == null ? css_hash : [value, css_hash];
+			value = value == null || value === css_hash ? css_hash : [value, css_hash];
 		}
 
 		attr_str += attr(name, value, is_boolean_attribute(name));
@@ -484,3 +491,99 @@ export function spread_attrs(attrs, css_hash) {
 
 	return attr_str;
 }
+
+var empty_get_set = { get: undefined, set: undefined };
+
+/**
+ * @param {any} v
+ * @param {(value: any) => any} [get]
+ * @param {(next: any, prev: any) => any} [set]
+ * @returns {Tracked}
+ */
+function tracked(v, get, set) {
+	return {
+		a: get || set ? { get, set } : empty_get_set,
+		c: 0,
+		f: TRACKED,
+		v,
+	};
+}
+
+/**
+ * @param {any} v
+ * @param {(value: any) => any} [get]
+ * @param {(next: any, prev: any) => any} [set]
+ * @returns {Tracked | Derived}
+ */
+export function track(v, get, set) {
+	var is_tracked = is_tracked_object(v);
+
+	if (is_tracked) {
+		return v;
+	}
+
+	if (typeof v === 'function') {
+		return {
+			a: get || set ? { get, set } : empty_get_set,
+			c: 0,
+			co: active_component,
+			d: null,
+			f: TRACKED | DERIVED,
+			fn: v,
+			v: UNINITIALIZED,
+		};
+	}
+
+	return tracked(v, get, set);
+}
+
+/**
+ * @param {Record<string|symbol, any>} v
+ * @param {(symbol | string)[]} l
+ * @returns {Tracked[]}
+ */
+export function track_split(v, l) {
+	var is_tracked = is_tracked_object(v);
+
+	if (is_tracked || typeof v !== 'object' || v === null || is_array(v)) {
+		throw new TypeError('Invalid value: expected a non-tracked object');
+	}
+
+	/** @type {Tracked[]} */
+	var out = [];
+	/** @type {Record<string|symbol, any>} */
+	var rest = {};
+	/** @type {Record<PropertyKey, 1>} */
+	var done = {};
+	var props = Reflect.ownKeys(v);
+
+	for (let i = 0, key, t; i < l.length; i++) {
+		key = l[i];
+
+		if (props.includes(key)) {
+			if (is_tracked_object(v[key])) {
+				t = v[key];
+			} else {
+				t = tracked(undefined);
+				t = define_property(t, '__v', /** @type {PropertyDescriptor} */ (get_descriptor(v, key)));
+			}
+		} else {
+			t = tracked(undefined);
+		}
+
+		out[i] = t;
+		done[key] = 1;
+	}
+
+	for (let i = 0, key; i < props.length; i++) {
+		key = props[i];
+		if (done[key]) {
+			continue;
+		}
+		define_property(rest, key, /** @type {PropertyDescriptor} */ (get_descriptor(v, key)));
+	}
+
+	out.push(tracked(rest));
+
+	return out;
+}

package/src/utils/builders.js

@@ -8,13 +8,22 @@ import { sanitize_template_string } from './sanitize_template_string.js';
  * @template {AST.Node} T
  * @param {T} node
  * @param {AST.NodeWithLocation | undefined} loc_info
+ * @param {boolean} is_deep_copy
  * @returns {T}
  */
-function set_location(node, loc_info) {
+export function set_location(node, loc_info, is_deep_copy = false) {
 	if (loc_info) {
 		node.start = loc_info.start;
 		node.end = loc_info.end;
-		node.loc = loc_info.loc;
+
+		if (is_deep_copy) {
+			node.loc = {
+				start: { ...loc_info.loc.start },
+				end: { ...loc_info.loc.end },
+			};
+		} else {
+			node.loc = loc_info.loc;
+		}
 	}
 
 	return node;
@@ -173,7 +182,7 @@ export function call(callee, ...args) {
 
 /**
  * @param {string | AST.Expression} callee
- * @param {...AST.Expression} args
+ * @param {...(AST.Expression | AST.SpreadElement | false | undefined)} args
  * @returns {AST.ChainExpression}
  */
 export function maybe_call(callee, ...args) {
@@ -362,14 +371,25 @@ export function literal(value, loc_info) {
  * @param {string | AST.Expression | AST.PrivateIdentifier} property
  * @param {boolean} computed
  * @param {boolean} optional
+ * @param {AST.NodeWithLocation} [loc_info]
  * @returns {AST.MemberExpression}
  */
-export function member(object, property, computed = false, optional = false) {
+export function member(object, property, computed = false, optional = false, loc_info) {
 	if (typeof property === 'string') {
 		property = id(property);
 	}
 
-	return { type: 'MemberExpression', object, property, computed, optional, metadata: { path: [] } };
+	/** @type {AST.MemberExpression} */
+	const node = {
+		type: 'MemberExpression',
+		object,
+		property,
+		computed,
+		optional,
+		metadata: { path: [] },
+	};
+
+	return set_location(node, loc_info);
 }
 
 /**

package/tests/client/basic/basic.attributes.test.ripple

@@ -139,7 +139,7 @@ describe('basic client > attribute rendering', () => {
 		expect(div.classList.contains('active')).toBe(false);
 	});
 
-	it('applies scoped ripple classs to multiple elements with dynamic class expressions', () => {
+	it('applies scoped ripple class to multiple elements with dynamic class expressions', () => {
 		component Basic() {
 			let selected = track(1);
 

package/tests/client/basic/basic.components.test.ripple

@@ -26,6 +26,53 @@ describe('basic client > components & composition', () => {
 		expect(paragraph.textContent).toBe('Card content here');
 	});
 
+	it('does not render a falsy component call', () => {
+		component Card(props: PropsWithChildren<{}>) {
+			<div class="card">
+				<props.children />
+			</div>
+		}
+
+		component Basic() {
+			<Card>
+				component test() {
+					<p>{'Card content here'}</p>
+				}
+			</Card>
+		}
+
+		render(Basic);
+
+		const card = container.querySelector('.card');
+		const paragraph = card.querySelector('p');
+
+		expect(card).toBeTruthy();
+		expect(paragraph).toBeFalsy();
+	});
+
+	it('renders a component when children is set a component prop', () => {
+		component Card(props: PropsWithChildren<{}>) {
+			<div class="card">
+				<props.children />
+			</div>
+		}
+
+		component Basic() {
+			component children() {
+				<p>{'Card content here'}</p>
+			}
+			<Card {children} />
+		}
+
+		render(Basic);
+
+		const card = container.querySelector('.card');
+		const paragraph = card.querySelector('p');
+
+		expect(card).toBeTruthy();
+		expect(paragraph.textContent).toBe('Card content here');
+	});
+
 	it('renders with nested components and prop passing', () => {
 		component Button(props: PropsWithExtras<{
 			variant: string;

package/tests/client/basic/basic.rendering.test.ripple

@@ -90,7 +90,7 @@ describe('basic client > rendering & text', () => {
 
 	it('renders simple JS expression logic correctly', () => {
 		component Example() {
-			let test = {};
+			let test: Record<number, string> = {};
 			let counter = 0;
 			test[counter++] = 'Test';
 

package/tests/client/composite/composite.props.test.ripple

@@ -1,4 +1,5 @@
-import { track, trackSplit, effect, flushSync, type Props } from 'ripple';
+import type { Tracked, Props } from 'ripple';
+import { track, trackSplit, effect, flushSync } from 'ripple';
 
 describe('composite > props', () => {
 	it('correctly handles default prop values', () => {
@@ -56,7 +57,7 @@ describe('composite > props', () => {
 	});
 
 	it('correctly handles no props #2', () => {
-		component Child({ foo }) {
+		component Child({ foo }: { foo?: number }) {
 			<div>{foo}</div>
 		}
 
@@ -76,7 +77,7 @@ describe('composite > props', () => {
 	it('mutating a tracked value prop should work as intended', () => {
 		const logs: number[] = [];
 
-		component Counter({ count }) {
+		component Counter({ count }: { count: Tracked<number> }) {
 			effect(() => {
 				logs.push(@count);
 			});
@@ -120,7 +121,7 @@ describe('composite > props', () => {
 			</style>
 		}
 
-		component Toggle(props) {
+		component Toggle(props: { pressed: Tracked<boolean> }) {
 			const [pressed, rest] = trackSplit(props, ['pressed']);
 			const onClick = () => (@pressed = !@pressed);
 			<Button {...@rest} class={@pressed ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
@@ -146,4 +147,48 @@ describe('composite > props', () => {
 		expect(button1.className).toContain('off');
 		expect(button2.className).toContain('off');
 	});
+
+	it('correctly renders destructured props', () => {
+		interface ProductInfo {
+			id: string;
+			name: string;
+			organizationName: string;
+			description: string;
+			imageUrl: string;
+			price: number;
+		}
+
+		component Product({ id, name, organizationName, description, imageUrl, price }: ProductInfo) {
+			<article class="no-padding">
+				<img class="responsive small" src={imageUrl} alt={name} />
+				<span>{id}</span>
+				<h5>{name}</h5>
+				<h3>{organizationName}</h3>
+				<p>{description}</p>
+				<price class="price">{price}</price>
+			</article>
+		}
+
+		component App() {
+			<Product
+				id="1"
+				name="Product 1"
+				organizationName="Org 1"
+				description="Description 1"
+				imageUrl="https://picsum.photos/300/200"
+				price={15}
+			/>
+		}
+
+		render(App);
+
+		expect(container.querySelector('img').getAttribute('src')).toBe(
+			'https://picsum.photos/300/200',
+		);
+		expect(container.querySelector('span').textContent).toBe('1');
+		expect(container.querySelector('h5').textContent).toBe('Product 1');
+		expect(container.querySelector('h3').textContent).toBe('Org 1');
+		expect(container.querySelector('p').textContent).toBe('Description 1');
+		expect(container.querySelector('price').textContent).toBe('15');
+	});
 });

package/tests/client/dynamic-elements.test.ripple

@@ -15,6 +15,50 @@ describe('dynamic DOM elements', () => {
 		expect(element.textContent).toBe('Hello World');
 	});
 
+	// The ts errors below are due to limitations in our current tsx generation for dynamic elements.
+	// They can be ignored for now. But we'll fix them via jsx() vs <jsx>
+	it('renders static dynamic element from a plain object with a tracked property', () => {
+		component App() {
+			let obj = { tag: track('div') };
+
+			<obj.@tag>{'Hello World'}</obj.@tag>
+		}
+		render(App);
+
+		const element = container.querySelector('div');
+		expect(element).toBeTruthy();
+		expect(element.textContent).toBe('Hello World');
+	});
+
+	it('renders static dynamic element from a tracked object with a tracked property', () => {
+		component App() {
+			let obj = track({ tag: track('div') });
+
+			<@obj.@tag>{'Hello World'}</@obj.@tag>
+		}
+		render(App);
+
+		const element = container.querySelector('div');
+		expect(element).toBeTruthy();
+		expect(element.textContent).toBe('Hello World');
+	});
+
+	it(
+		'renders static dynamic element from a tracked object with a computed tracked property',
+		() => {
+			component App() {
+				let obj = track({ tag: track('div') });
+
+				<@obj.@['tag']>{'Hello World'}</@obj.@['tag']>
+			}
+			render(App);
+
+			const element = container.querySelector('div');
+			expect(element).toBeTruthy();
+			expect(element.textContent).toBe('Hello World');
+		},
+	);
+
 	it('renders reactive dynamic element', () => {
 		component App() {
 			let tag = track('div');

package/tests/client/switch.test.ripple

@@ -316,4 +316,44 @@ describe('switch statements', () => {
 			expect(container.querySelector('div').querySelectorAll('div')[1].id).toBe('b');
 		},
 	);
+
+	it('renders bare text nodes in switch fall-through cases without element wrappers', () => {
+		component App() {
+			let value = 'a';
+
+			<div>
+				<span>{'before'}</span>
+				switch (value) {
+					case 'a':
+						{'Case A'}
+					case 'b':
+						{'Case B'}
+				}
+			</div>
+		}
+
+		render(App);
+		expect(container.querySelector('div').textContent).toBe('beforeCase ACase B');
+	});
+
+	it('renders bare text nodes in switch cases without element wrappers', () => {
+		component App() {
+			let value = 'a';
+
+			<div>
+				<span>{'before'}</span>
+				switch (value) {
+					case 'a':
+						{'Case A'}
+						break;
+					case 'b':
+						{'Case B'}
+						break;
+				}
+			</div>
+		}
+
+		render(App);
+		expect(container.querySelector('div').textContent).toBe('beforeCase A');
+	});
 });

package/tests/client/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["../../src/**/*", "../**/*"],
+  "exclude": [
+    "../server",
+    "../server.d.ts",
+    "../setup-server.js",
+    "../hydration",
+    "../setup-hydration.js"
+  ]
+}

package/tests/client.d.ts

@@ -1,25 +1,8 @@
-declare var container: HTMLDivElement;
-declare var error: string | undefined;
-declare function render(component: () => void): void;
+import type { Component } from '#public';
 
-// Helper type for test attributes that allows custom data-* and other attributes
-type TestAttributes = Record<string, any>;
+declare global {
+	function render(component: Component): void;
 
-type TagNameMap = HTMLElementTagNameMap & SVGElementTagNameMap;
-
-interface HTMLElement {
-	// We don't care about checking if it returned an element or null in tests
-	// because if it returned null, those tests will fail anyway. This
-	// typing drastically simplifies testing: you don't have to check if the
-	// query returned null or an actual element, and you don't have to do
-	// optional chaining everywhere (elem?.textContent)
-	querySelector<K extends keyof TagNameMap>(selectors: K): TagNameMap[K];
-	querySelector(selectors: string): HTMLElement;
-	querySelectorAll<K extends keyof TagNameMap>(
-		selectors: K,
-	): NodeListOf<TagNameMap[K]>;
-	querySelectorAll(selectors: string): NodeListOf<Element>;
-
-	// Allow dynamic properties for delegated event handlers
-	[key: string]: any;
+	var container: HTMLDivElement;
+	var error: string | undefined;
 }

package/tests/common.d.ts

@@ -0,0 +1,24 @@
+// export allows this file to be treated as a module
+export {};
+
+declare global {
+	// Helper type for test attributes that allows custom data-* and other attributes
+	type TestAttributes = Record<string, any>;
+
+	type TagNameMap = HTMLElementTagNameMap & SVGElementTagNameMap;
+
+	interface ParentNode {
+		// We don't care about checking if it returned an element or null in tests
+		// because if it returned null, those tests will fail anyway. This
+		// typing drastically simplifies testing: you don't have to check if the
+		// query returned null or an actual element, and you don't have to do
+		// optional chaining everywhere (elem?.textContent)
+		querySelector<K extends keyof TagNameMap>(selectors: K): TagNameMap[K];
+		querySelector(selectors: string): HTMLElement;
+		querySelectorAll<K extends keyof TagNameMap>(selectors: K): NodeListOf<TagNameMap[K]>;
+		querySelectorAll(selectors: string): NodeListOf<Element>;
+
+		// Allow dynamic properties for delegated event handlers
+		[key: string]: any;
+	}
+}