ripple 0.2.31 → 0.2.33

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is a TypeScript UI framework for the web",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.31",
+  "version": "0.2.33",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -398,6 +398,7 @@ const visitors = {
 
 		if (is_dom_element) {
 			let class_attribute = null;
+			const local_updates = [];
 
 			state.template.push(`<${node.id.name}`);
 
@@ -422,7 +423,7 @@ const visitors = {
 							const expression = visit(attr.value, state);
 
 							if (name === '$value') {
-								state.update.push(b.stmt(b.call('$.set_value', id, expression)));
+								local_updates.push(b.stmt(b.call('$.set_value', id, expression)));
 							} else {
 								state.init.push(b.stmt(b.call('$.set_value', id, expression)));
 							}
@@ -435,7 +436,7 @@ const visitors = {
 							const expression = visit(attr.value, state);
 
 							if (name === '$checked') {
-								state.update.push(b.stmt(b.call('$.set_checked', id, expression)));
+								local_updates.push(b.stmt(b.call('$.set_checked', id, expression)));
 							} else {
 								state.init.push(b.stmt(b.call('$.set_checked', id, expression)));
 							}
@@ -447,7 +448,7 @@ const visitors = {
 							const expression = visit(attr.value, state);
 
 							if (name === '$selected') {
-								state.update.push(b.stmt(b.call('$.set_selected', id, expression)));
+								local_updates.push(b.stmt(b.call('$.set_selected', id, expression)));
 							} else {
 								state.init.push(b.stmt(b.call('$.set_selected', id, expression)));
 							}
@@ -523,9 +524,9 @@ const visitors = {
 							const expression = visit(attr.value, state);
 
 							if (is_dom_property(attribute)) {
-								state.update.push(b.stmt(b.assignment('=', b.member(id, attribute), expression)));
+								local_updates.push(b.stmt(b.assignment('=', b.member(id, attribute), expression)));
 							} else {
-								state.update.push(
+								local_updates.push(
 									b.stmt(b.call('$.set_attribute', id, b.literal(attribute), expression)),
 								);
 							}
@@ -566,7 +567,7 @@ const visitors = {
 					}
 
 					if (class_attribute.name.name === '$class') {
-						state.update.push(b.stmt(b.call('$.set_class', id, expression)));
+						local_updates.push(b.stmt(b.call('$.set_class', id, expression)));
 					} else {
 						state.init.push(b.stmt(b.call('$.set_class', id, expression)));
 					}
@@ -591,6 +592,8 @@ const visitors = {
 
 			transform_children(node.children, { visit, state: { ...state, init, update }, root: false });
 
+			update.push(...local_updates);
+
 			if (init.length > 0) {
 				state.init.push(b.block(init));
 			}
@@ -1581,7 +1584,7 @@ function transform_children(children, { visit, state, root }) {
 					state.update.push(b.stmt(b.call('$.set_text', id, expression)));
 				} else if (normalized.length === 1) {
 					if (expression.type === 'Literal') {
-						state.template.push(expression.value);
+						state.template.push(escape_html(expression.value));
 					} else {
 						const id = state.flush_node();
 						state.init.push(

package/src/compiler/utils.js

@@ -570,7 +570,7 @@ export function build_assignment(operator, left, right, context) {
 const ATTR_REGEX = /[&"<]/g;
 const CONTENT_REGEX = /[&<]/g;
 
-export function escape_html(value, is_attr) {
+export function escape_html(value, is_attr = false) {
 	const str = String(value ?? '');
 
 	const pattern = is_attr ? ATTR_REGEX : CONTENT_REGEX;

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

@@ -43,6 +43,7 @@ export {
 	untrack,
 	use_prop,
 	fallback,
+	exclude_from_object,
 } from './runtime.js';
 
 export { for_block as for } from './for.js';

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

@@ -1182,3 +1182,17 @@ export function use_prop() {
 export function fallback(value, fallback) {
 	return value === undefined ? fallback : value;
 }
+
+/**
+ * @param {Record<string, unknown>} obj
+ * @param {string[]} keys
+ * @returns {Record<string, unknown>}
+ */
+export function exclude_from_object(obj, keys) {
+	obj = { ...obj };
+	let key;
+	for (key of keys) {
+		delete obj[key];
+	}
+	return obj;
+}

package/tests/basic.test.ripple

@@ -811,4 +811,25 @@ describe('basic', () => {
 		flushSync();
 		expect(greetingP.textContent).toBe('Hello, User!');
 	});
+
+	it('renders with reactive attributes with nested reactive attributes', () => {
+		component App() {
+			let $value = 'parent-class';
+
+			<p $class={$value}>{'Colored parent value'}</p>
+
+			<div>
+				let $nested = 'nested-class';
+
+				<p $class={$nested}>{'Colored nested value'}</p>
+			</div>
+		}
+
+		render(App);
+
+		const paragraphs = container.querySelectorAll('p');
+
+		expect(paragraphs[0].className).toBe('parent-class');
+		expect(paragraphs[1].className).toBe('nested-class');
+	});
 });