ripple 0.2.156 → 0.2.158

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.156",
+  "version": "0.2.158",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -81,6 +81,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "ripple": "0.2.156"
+    "ripple": "0.2.158"
   }
 }

package/src/compiler/phases/1-parse/index.js

@@ -1591,10 +1591,40 @@ function RipplePlugin(config) {
 						if (this.type === tt.braceL) {
 							const node = this.jsx_parseExpressionContainer();
 							body.push(node);
-						} else {
-							// Parse regular JSX expression (JSXElement, JSXFragment, etc.)
+						} else if (this.type === tstt.jsxTagStart) {
+							// Parse JSX element
 							const node = super.parseExpression();
 							body.push(node);
+						} else {
+							const start = this.start;
+							this.pos = start;
+							let text = '';
+
+							while (this.pos < this.input.length) {
+								const ch = this.input.charCodeAt(this.pos);
+
+								// Stop at opening tag, closing tag, or expression
+								if (ch === 60 || ch === 123) {
+									// < or {
+									break;
+								}
+
+								text += this.input[this.pos];
+								this.pos++;
+							}
+
+							if (text) {
+								const node = {
+									type: 'JSXText',
+									value: text,
+									raw: text,
+									start,
+									end: this.pos,
+								};
+								body.push(node);
+							}
+
+							this.next();
 						}
 					}
 				}

package/src/compiler/phases/2-analyze/index.js

@@ -36,7 +36,8 @@ function mark_control_flow_has_template(path) {
 			node.type === 'ForOfStatement' ||
 			node.type === 'TryStatement' ||
 			node.type === 'IfStatement' ||
-			node.type === 'SwitchStatement'
+			node.type === 'SwitchStatement' ||
+			node.type === 'TsxCompat'
 		) {
 			node.metadata.has_template = true;
 		}
@@ -629,6 +630,11 @@ const visitors = {
 		);
 	},
 
+	TsxCompat(_, context) {
+		mark_control_flow_has_template(context.path);
+		return context.next();
+	},
+
 	Element(node, context) {
 		const { state, visit, path } = context;
 		const is_dom_element = is_element_dom_element(node);

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

@@ -305,6 +305,13 @@ const visitors = {
 		};
 	},
 
+	TSNonNullExpression(node, context) {
+		if (context.state.to_ts) {
+			return context.next();
+		}
+		return context.visit(node.expression);
+	},
+
 	CallExpression(node, context) {
 		if (!context.state.to_ts) {
 			delete node.typeArguments;
@@ -2193,7 +2200,17 @@ function transform_children(children, context) {
 		} else if (state.to_ts) {
 			transform_ts_child(node, { visit, state });
 		} else {
-			if (initial === null && root) {
+			let metadata;
+			let expression;
+			let isCreateTextOnly = false;
+			if (node.type === 'Text' || node.type === 'Html') {
+				metadata = { tracking: false, await: false };
+				expression = visit(node.expression, { ...state, metadata });
+				isCreateTextOnly =
+					node.type === 'Text' && normalized.length === 1 && expression.type === 'Literal';
+			}
+
+			if (initial === null && root && !isCreateTextOnly) {
 				create_initial(node);
 			}
 
@@ -2240,9 +2257,6 @@ function transform_children(children, context) {
 			} else if (node.type === 'TsxCompat') {
 				visit(node, { ...state, flush_node, namespace: state.namespace });
 			} else if (node.type === 'Html') {
-				const metadata = { tracking: false, await: false };
-				const expression = visit(node.expression, { ...state, metadata });
-
 				context.state.template.push('<!>');
 
 				const id = flush_node();
@@ -2258,9 +2272,6 @@ function transform_children(children, context) {
 					),
 				});
 			} else if (node.type === 'Text') {
-				const metadata = { tracking: false, await: false };
-				const expression = visit(node.expression, { ...state, metadata });
-
 				if (metadata.tracking) {
 					state.template.push(' ');
 					const id = flush_node();
@@ -2274,7 +2285,13 @@ function transform_children(children, context) {
 					}
 				} else if (normalized.length === 1) {
 					if (expression.type === 'Literal') {
-						state.template.push(escape_html(expression.value));
+						if (state.template.length > 0) {
+							state.template.push(escape_html(expression.value));
+						} else {
+							const id = flush_node();
+							state.init.push(b.var(id, b.call('_$_.create_text', expression)));
+							state.final.push(b.stmt(b.call('_$_.append', b.id('__anchor'), id)));
+						}
 					} else {
 						const id = flush_node();
 						state.template.push(' ');

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

@@ -1,7 +1,7 @@
 /** @import { CompatApi } from '#client' */
 
-import { ROOT_BLOCK } from "./constants";
-import { active_block } from "./runtime";
+import { ROOT_BLOCK } from "./constants.js";
+import { active_block } from "./runtime.js";
 
 /**
  * @param {string} kind

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

@@ -3,6 +3,7 @@ export {
 	child_frag,
 	next_sibling as sibling,
 	document,
+	create_text,
 } from './operations.js';
 
 export {

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

@@ -122,49 +122,6 @@ export function apply_styles(element, newStyles) {
 	}
 }
 
-/**
- * @param {Element} element
- * @param {Record<string, any>} prev
- * @param {Record<string, any>} next
- * @returns {void}
- */
-export function set_attributes(element, prev, next) {
-	let found_enumerable_keys = false;
-
-	for (const key in next) {
-		if (key === 'children') continue;
-		found_enumerable_keys = true;
-
-		let value = next[key];
-		if (prev[key] === value && key !== '#class') {
-			continue;
-		}
-		if (is_tracked_object(value)) {
-			value = get(value);
-		}
-		set_attribute_helper(element, key, value);
-	}
-
-	// Only if no enumerable keys but attributes object exists
-	// This handles spread_props Proxy objects from dynamic elements with {...spread}
-	if (!found_enumerable_keys && next) {
-		const allKeys = Reflect.ownKeys(next);
-		for (const key of allKeys) {
-			if (key === 'children') continue;
-			if (typeof key === 'symbol') continue; // Skip symbols - handled by apply_element_spread
-
-			let value = next[key];
-			if (prev[key] === value && key !== '#class') {
-				continue;
-			}
-			if (is_tracked_object(value)) {
-				value = get(value);
-			}
-			set_attribute_helper(element, key, value);
-		}
-	}
-}
-
 /**
  * Helper function to set a single attribute
  * @param {Element} element
@@ -298,7 +255,7 @@ export function apply_element_spread(element, fn) {
 	var effects = {};
 
 	return () => {
-		var next = { ...fn() };
+		var next = fn();
 
 		for (let symbol of get_own_property_symbols(effects)) {
 			if (!next[symbol]) {
@@ -319,8 +276,25 @@ export function apply_element_spread(element, fn) {
 			next[symbol] = ref_fn;
 		}
 
-		set_attributes(element, prev, next);
+		/** @type {Record<string | symbol, any>} */
+		const current = {};
+		for (const key in next) {
+			if (key === 'children') continue;
 
-		prev = next;
+			let value = next[key];
+			if (is_tracked_object(value)) {
+				value = get(value);
+			}
+			current[key] = value;
+
+			if (!(key in prev) || prev[key] !== value) {
+				prev[key] = value;
+			} else if (key !== '#class') {
+				continue;
+			}
+
+			set_attribute_helper(element, key, value);
+		}
+		prev = current;
 	};
 }

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

@@ -268,4 +268,20 @@ describe('basic client > components & composition', () => {
 		expect(span.textContent).toBe('Hello from Span');
 		expect(buttonSpan.textContent).toBe('Click me!');
 	});
+
+	it('handles empty string children', () => {
+		component Button({ children }) {
+			<children />
+		}
+
+		component App() {
+			let text = '';
+			<Button>{''}</Button>
+			<Button>{text}</Button>
+		}
+
+		expect(() => {
+			render(App);
+		}).not.toThrow();
+	});
 });

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

@@ -266,4 +266,64 @@ describe('composite > reactivity', () => {
 			expect(span.textContent).toBe('Counter: 0');
 		},
 	);
+
+	it('keeps reactivity on elements for element spreads and adds / removes dynamic props', () => {
+		component App() {
+			const count = track(0);
+			<CounterWrapper {@count} up={() => @count++} />
+		}
+
+		component CounterWrapper(props) {
+			const more = #{
+				double: track(() => props.@count * 2),
+				another: track(0),
+				onemore: 100,
+			};
+
+			effect(() => {
+				props.count;
+				if (props.count === 1) {
+					delete more.another;
+				} else if (props.count === 2) {
+					more.another = 0;
+				}
+			});
+
+			<div>
+				<Counter {...props} double={more.double} another={more.another} onemore={more.onemore} />
+			</div>
+		}
+
+		component Counter(props) {
+			const [count, up, rest] = trackSplit(props, ['count', 'up']);
+			<div {...@rest}>{`Counter: ${@count} Double: ${props.@double}`}</div>
+			<button onClick={() => @up()}>{'UP'}</button>
+		}
+
+		render(App);
+
+		const buttonIncrement = container.querySelectorAll('button')[0];
+		const div = container.querySelectorAll('div')[1];
+
+		expect(div.getAttribute('double')).toBe('0');
+		expect(div.getAttribute('another')).toBe('0');
+		expect(div.getAttribute('onemore')).toBe('100');
+		expect(div.textContent).toBe('Counter: 0 Double: 0');
+
+		buttonIncrement.click();
+		flushSync();
+
+		expect(div.getAttribute('double')).toBe('2');
+		expect(div.hasAttribute('another')).toBe(false);
+		expect(div.getAttribute('onemore')).toBe('100');
+		expect(div.textContent).toBe('Counter: 1 Double: 2');
+
+		buttonIncrement.click();
+		flushSync();
+
+		expect(div.getAttribute('double')).toBe('4');
+		expect(div.getAttribute('another')).toBe('0');
+		expect(div.getAttribute('onemore')).toBe('100');
+		expect(div.textContent).toBe('Counter: 2 Double: 4');
+	});
 });