ripple 0.2.22 → 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.22",
+  "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/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>

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);
+	});
+
+});