ripple 0.2.21 → 0.2.23

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.21",
+  "version": "0.2.23",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -410,7 +410,11 @@ function RipplePlugin(config) {
 				if (this.value === '<' && this.#path.findLast((n) => n.type === 'Component')) {
 					// Check if this looks like JSX by looking ahead
 					const ahead = this.lookahead();
-					if (ahead.type.label === 'name' || ahead.value === '/' || ahead.value === '>') {
+					const curContext = this.curContext();
+					if (
+						curContext.token !== '(' &&
+						(ahead.type.label === 'name' || ahead.value === '/' || ahead.value === '>')
+					) {
 						// This is JSX, rewind to the end of the object expression
 						// and let ASI handle the semicolon insertion naturally
 						this.pos = base.end;

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

@@ -787,8 +787,8 @@ const visitors = {
 
 		if (
 			left.type === 'MemberExpression' &&
-			((left.property.type === 'Identifier' && is_tracked_name(left.property.name)) ||
-				left.computed)
+			left.property.type === 'Identifier' &&
+			is_tracked_name(left.property.name)
 		) {
 			return b.call(
 				'$.set_property',

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

@@ -30,3 +30,15 @@ exports[`basic > render static text 1`] = `
   
 </div>
 `;
+
+exports[`basic > renders simple JS expression logic correctly 1`] = `
+<div>
+  <div>
+    {"0":"Test"}
+  </div>
+  <div>
+    1
+  </div>
+  
+</div>
+`;

package/tests/basic.test.ripple

@@ -275,25 +275,6 @@ describe('basic', () => {
 		expect(div.getAttribute('data-extra')).toBe('value');
 	});
 
-	it('renders without crashing', () => {
-		component App() {
-			let foo;
-			let bar;
-			let baz;
-
-			foo = {};
-			foo = {'test': 0};
-			foo['abc'] = 123;
-
-			bar = { 'def': 456 };
-
-			baz = { 'ghi': 789 };
-			baz['jkl'] = 987;
-		}
-
-		render(App);
-	});
-
 	it('renders multiple reactive lexical blocks', () => {
 		component Basic() {
 			<div>
@@ -510,6 +491,20 @@ describe('basic', () => {
 		expect(evenDiv.textContent).toBe('Even');
 	});
 
+	it('renders simple JS expression logic correctly', () => {
+		component Example() {
+			let test = {}
+			let counter = 0;
+			test[counter++] = 'Test';
+
+			<div>{JSON.stringify(test)}</div>
+			<div>{JSON.stringify(counter)}</div>
+		}
+		render(Example);
+
+		expect(container).toMatchSnapshot();
+	});
+
 	it('renders with simple reactive objects', () => {
 		component Basic() {
 			let $user = {

package/tests/compiler.test.ripple

@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+
+import { mount } from 'ripple';
+
+describe('compiler success tests', () => {
+  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('renders without crashing', () => {
+		component App() {
+			let foo;
+			let bar;
+			let baz;
+
+			foo = {};
+			foo = {'test': 0};
+			foo['abc'] = 123;
+
+			bar = { 'def': 456 };
+
+			baz = { 'ghi': 789 };
+			baz['jkl'] = 987;
+		}
+
+		render(App);
+	});
+
+
+  it('renders without crashing using < character', () => {
+		component App() {
+			function bar() {
+        for (let i = 0; i < 10; i++) {
+          // do nothing
+        }
+        const x = 1 < 1;
+      }
+
+			let x = 5 < 10
+
+      <div>{x}</div>
+		}
+
+		render(App);
+	});
+
+});