ripple 0.2.141 → 0.2.143

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.141",
+  "version": "0.2.143",
   "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.141"
+    "ripple": "0.2.143"
   }
 }

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

@@ -925,8 +925,10 @@ const visitors = {
 									const args = [handler, b.id('__block'), ...hoisted_params];
 									delegated_assignment = b.array(args);
 								} else if (
-									handler.type === 'Identifier' &&
-									is_declared_function_within_component(handler, context)
+									(handler.type === 'Identifier' &&
+										is_declared_function_within_component(handler, context)) ||
+									handler.type === 'ArrowFunctionExpression' ||
+									handler.type === 'FunctionExpression'
 								) {
 									delegated_assignment = handler;
 								} else {
@@ -1379,7 +1381,7 @@ const visitors = {
 		}
 
 		const left = object(argument);
-		const binding = context.state.scope.get(left.name);
+		const binding = left && context.state.scope.get(left.name);
 		const transformers = left && binding?.transform;
 
 		if (left === argument) {

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

@@ -194,7 +194,12 @@ function set_attribute_helper(element, key, value) {
  * @returns {string}
  */
 function to_class(value, hash) {
-	return value == null ? (hash ?? '') : clsx([value, hash]);
+	return value == null
+		? (hash ?? '')
+		: // Fast-path for string values
+			typeof value === 'string'
+			? value + (hash ? ' ' + hash : '')
+			: clsx([value, hash]);
 }
 
 /**
@@ -207,24 +212,27 @@ function to_class(value, hash) {
 export function set_class(dom, value, hash, is_html = true) {
 	// @ts-expect-error need to add __className to patched prototype
 	var prev_class_name = dom.__className;
-	var next_class_name = to_class(value, hash);
-
-	if (prev_class_name !== next_class_name) {
-		// Removing the attribute when the value is only an empty string causes
-		// peformance issues vs simply making the className an empty string. So
-		// we should only remove the class if the the value is nullish.
-		if (value == null && !hash) {
-			dom.removeAttribute('class');
-		} else {
-			if (is_html) {
-				dom.className = next_class_name;
+
+	if (prev_class_name !== value) {
+		var next_class_name = to_class(value, hash);
+
+		if (prev_class_name !== next_class_name) {
+			// Removing the attribute when the value is only an empty string causes
+			// peformance issues vs simply making the className an empty string. So
+			// we should only remove the class if the the value is nullish.
+			if (value == null && !hash) {
+				dom.removeAttribute('class');
 			} else {
-				dom.setAttribute('class', next_class_name);
+				if (is_html) {
+					dom.className = next_class_name;
+				} else {
+					dom.setAttribute('class', next_class_name);
+				}
 			}
 		}
 
 		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = next_class_name;
+		dom.__className = value;
 	}
 }
 

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

@@ -342,6 +342,23 @@ export component App() {
 
 	<div>{test}</div>
 }
+`;
+		expect(() => compile(code, 'test.ripple')).not.toThrow();
+	});
+
+	it('should not error on `this` MemberExpression with a UpdateExpression', () => {
+		const code = `
+class Test {
+	constructor() {
+		this.count = 0;
+		this.count++; // This should not fail
+	}
+}
+
+export component App() {
+	const test = new Test();
+	<div>{test.count}</div>
+}
 `;
 		expect(() => compile(code, 'test.ripple')).not.toThrow();
 	});