ripple 0.2.20 → 0.2.22

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

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

@@ -77,20 +77,6 @@ function RipplePlugin(config) {
 				return this.finishNode(node, 'JSXExpressionContainer');
 			}
 
-			jsx_parseBindingExpression() {
-				let node = this.startNode();
-				this.next();
-
-				if (this.type === tt.bracketR) {
-					this.raise(node.start, 'bindings must only be assigned a non-empty expression');
-				}
-
-				node.expression = this.parseExpression();
-
-				this.expect(tt.bracketR);
-				return this.finishNode(node, 'BindingExpression');
-			}
-
 			jsx_parseTupleContainer() {
 				var t = this.startNode();
 				return (
@@ -104,7 +90,6 @@ function RipplePlugin(config) {
 
 			jsx_parseAttribute() {
 				let node = this.startNode();
-
 				if (this.eat(tt.braceL)) {
 					if (this.type.label === '@') {
 						this.next();
@@ -144,9 +129,6 @@ function RipplePlugin(config) {
 				const tok = this.acornTypeScript.tokTypes;
 
 				switch (this.type) {
-					case tt.bracketL:
-						var t = this.jsx_parseBindingExpression();
-						return t;
 					case tt.braceL:
 						var t = this.jsx_parseExpressionContainer();
 						return (
@@ -196,21 +178,6 @@ function RipplePlugin(config) {
 				}
 				return this.finishNode(node, 'TryStatement');
 			}
-
-			// updateContext(e) {
-			// 	const s = this.type;
-			// 	const context = this.curContext();
-			// 	const tokContexts = this.acornTypeScript.tokContexts;
-
-			// 	if (s == tt.bracketL && context == tokContexts.tc_oTag) {
-			// 		this.context.push(tc.b_expr);
-			// 	} else if (s == tt.bracketR && context == tc.b_expr) {
-			// 		this.context.pop();
-			// 	}
-
-			// 	return super.updateContext(e);
-			// }
-
 			jsx_readToken() {
 				let out = '',
 					chunkStart = this.pos;

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/src/compiler/utils.js

@@ -466,7 +466,13 @@ export function visit_assignment_expression(node, context, build_assignment) {
 		throw new Error(`Unexpected assignment type ${node.left.type}`);
 	}
 
-	return build_assignment(node.operator, node.left, node.right, context);
+	const transformed = build_assignment(node.operator, node.left, node.right, context);
+
+	if (transformed === node.left) {
+		return node;
+	}
+
+	return transformed;
 }
 
 export function build_assignment(operator, left, right, context) {

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,6 +275,25 @@ 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>
@@ -344,4 +363,472 @@ describe('basic', () => {
 
 		expect(container.querySelector('.count').textContent).toBe('0');
 	});
+
+	it('renders with different event types', () => {
+		component Basic() {
+			let $focusCount = 0;
+			let $clickCount = 0;
+
+			<button 
+				onFocus={() => $focusCount++}
+				onClick={() => $clickCount++}
+			>{'Test Button'}</button>
+			<div class='focus-count'>{$focusCount}</div>
+			<div class='click-count'>{$clickCount}</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const focusDiv = container.querySelector('.focus-count');
+		const clickDiv = container.querySelector('.click-count');
+
+		button.dispatchEvent(new Event('focus'));
+		flushSync();
+		expect(focusDiv.textContent).toBe('1');
+
+		button.click();
+		flushSync();
+		expect(clickDiv.textContent).toBe('1');
+	});
+
+	it('renders with capture events', () => {
+		component Basic() {
+			let $captureClicks = 0;
+			let $bubbleClicks = 0;
+
+			<div onClickCapture={() => $captureClicks++}>
+				<button onClick={() => $bubbleClicks++}>{'Click me'}</button>
+				<div class='capture-count'>{$captureClicks}</div>
+				<div class='bubble-count'>{$bubbleClicks}</div>
+			</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const captureDiv = container.querySelector('.capture-count');
+		const bubbleDiv = container.querySelector('.bubble-count');
+
+		button.click();
+		flushSync();
+
+		expect(captureDiv.textContent).toBe('1');
+		expect(bubbleDiv.textContent).toBe('1');
+	});
+
+	it('renders with component composition and children', () => {
+		component Card(props) {
+			<div class='card'>
+				<props.$children />
+			</div>
+		}
+
+		component Basic() {
+			<Card>
+				component $children() {
+					<p>{'Card content here'}</p>
+				}
+			</Card>
+		}
+
+		render(Basic);
+
+		const card = container.querySelector('.card');
+		const paragraph = card.querySelector('p');
+
+		expect(card).toBeTruthy();
+		expect(paragraph.textContent).toBe('Card content here');
+	});
+
+	it('renders with error handling simulation', () => {
+		component Basic() {
+			let $hasError = false;
+			let $errorMessage = '';
+
+			const triggerError = () => {
+				try {
+					throw new Error('Test error');
+				} catch (e) {
+					$hasError = true;
+					$errorMessage = e.message;
+				}
+			};
+
+			<div>
+				<button onClick={triggerError}>{'Trigger Error'}</button>
+				if ($hasError) {
+					<div class='error'>{'Error caught: ' + $errorMessage}</div>
+				} else {
+					<div class='success'>{'No error'}</div>
+				}
+			</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const successDiv = container.querySelector('.success');
+
+		expect(successDiv).toBeTruthy();
+		expect(successDiv.textContent).toBe('No error');
+
+		button.click();
+		flushSync();
+
+		const errorDiv = container.querySelector('.error');
+		expect(errorDiv).toBeTruthy();
+		expect(errorDiv.textContent).toBe('Error caught: Test error');
+	});
+
+	it('renders with computed reactive state', () => {
+		component Basic() {
+			let $count = 5;
+			
+			<div class='count'>{$count}</div>
+			<div class='doubled'>{$count * 2}</div>
+			<div class='is-even'>{$count % 2 === 0 ? 'Even' : 'Odd'}</div>
+			<button onClick={() => $count++}>{'Increment'}</button>
+		}
+
+		render(Basic);
+
+		const countDiv = container.querySelector('.count');
+		const doubledDiv = container.querySelector('.doubled');
+		const evenDiv = container.querySelector('.is-even');
+		const button = container.querySelector('button');
+
+		expect(countDiv.textContent).toBe('5');
+		expect(doubledDiv.textContent).toBe('10');
+		expect(evenDiv.textContent).toBe('Odd');
+
+		button.click();
+		flushSync();
+
+		expect(countDiv.textContent).toBe('6');
+		expect(doubledDiv.textContent).toBe('12');
+		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 = {
+				$name: 'John',
+				$age: 25
+			};
+
+			<div class='name'>{$user.$name}</div>
+			<div class='age'>{$user.$age}</div>
+			<button onClick={() => {
+				$user.$name = 'Jane';
+				$user.$age = 30;
+			}}>{'Update User'}</button>
+		}
+
+		render(Basic);
+
+		const nameDiv = container.querySelector('.name');
+		const ageDiv = container.querySelector('.age');
+		const button = container.querySelector('button');
+
+		expect(nameDiv.textContent).toBe('John');
+		expect(ageDiv.textContent).toBe('25');
+
+		button.click();
+		flushSync();
+
+		expect(nameDiv.textContent).toBe('Jane');
+		expect(ageDiv.textContent).toBe('30');
+	});
+
+	it('renders with conditional rendering using if statements', () => {
+		component Basic() {
+			let $showContent = false;
+			let $userRole = 'guest';
+
+			<button onClick={() => $showContent = !$showContent}>{'Toggle Content'}</button>
+			<button onClick={() => $userRole = $userRole === 'guest' ? 'admin' : 'guest'}>{'Toggle Role'}</button>
+			
+			<div class='content'>
+				if ($showContent) {
+					if ($userRole === 'admin') {
+						<div class='admin-content'>{'Admin content'}</div>
+					} else {
+						<div class='user-content'>{'User content'}</div>
+					}
+				} else {
+					<div class='no-content'>{'No content'}</div>
+				}
+			</div>
+		}
+
+		render(Basic);
+
+		const buttons = container.querySelectorAll('button');
+		const contentDiv = container.querySelector('.content');
+
+		expect(contentDiv.querySelector('.no-content')).toBeTruthy();
+		expect(contentDiv.querySelector('.admin-content')).toBeFalsy();
+		expect(contentDiv.querySelector('.user-content')).toBeFalsy();
+
+		buttons[0].click();
+		flushSync();
+
+		expect(contentDiv.querySelector('.no-content')).toBeFalsy();
+		expect(contentDiv.querySelector('.user-content')).toBeTruthy();
+		expect(contentDiv.querySelector('.admin-content')).toBeFalsy();
+
+		buttons[1].click();
+		flushSync();
+
+		expect(contentDiv.querySelector('.no-content')).toBeFalsy();
+		expect(contentDiv.querySelector('.user-content')).toBeFalsy();
+		expect(contentDiv.querySelector('.admin-content')).toBeTruthy();
+	});
+
+	it('renders with nested components and prop passing', () => {
+		component Button(props) {
+			<button class={props.variant} onClick={props.onClick}>
+				{props.label}
+			</button>
+		}
+
+		component Card(props) {
+			<div class='card'>
+				<h3>{props.title}</h3>
+				<p>{props.content}</p>
+				<Button variant='primary' label={props.buttonText} onClick={props.onAction} />
+			</div>
+		}
+
+		component Basic() {
+			let $clicked = false;
+
+			<Card
+				title='Test Card'
+				content='This is a test card'
+				buttonText='Click me'
+				onAction={() => $clicked = true}
+			/>
+			<div class='status'>{$clicked ? 'Clicked' : 'Not clicked'}</div>
+		}
+
+		render(Basic);
+
+		const card = container.querySelector('.card');
+		const title = card.querySelector('h3');
+		const content = card.querySelector('p');
+		const button = card.querySelector('button');
+		const status = container.querySelector('.status');
+
+		expect(title.textContent).toBe('Test Card');
+		expect(content.textContent).toBe('This is a test card');
+		expect(button.textContent).toBe('Click me');
+		expect(button.className).toBe('primary');
+		expect(status.textContent).toBe('Not clicked');
+
+		button.click();
+		flushSync();
+
+		expect(status.textContent).toBe('Clicked');
+	});
+
+	it('renders with complex event handling and state updates', () => {
+		component Basic() {
+			let $counter = 0;
+			let $history = [];
+			let $isEven = true;
+
+			const handleIncrement = () => {
+				$counter++;
+				$history = [...$history, `Inc to ${$counter}`];
+				$isEven = $counter % 2 === 0;
+			};
+
+			const handleDecrement = () => {
+				$counter--;
+				$history = [...$history, `Dec to ${$counter}`];
+				$isEven = $counter % 2 === 0;
+			};
+
+			const handleReset = () => {
+				$counter = 0;
+				$history = [...$history, 'Reset'];
+				$isEven = true;
+			};
+
+			<div class='counter'>{$counter}</div>
+			<div class='parity'>{$isEven ? 'Even' : 'Odd'}</div>
+			<div class='history-count'>{$history.length}</div>
+			
+			<button class='inc-btn' onClick={handleIncrement}>{'+'}</button>
+			<button class='dec-btn' onClick={handleDecrement}>{'-'}</button>
+			<button class='reset-btn' onClick={handleReset}>{'Reset'}</button>
+		}
+
+		render(Basic);
+
+		const counterDiv = container.querySelector('.counter');
+		const parityDiv = container.querySelector('.parity');
+		const historyDiv = container.querySelector('.history-count');
+		const incBtn = container.querySelector('.inc-btn');
+		const decBtn = container.querySelector('.dec-btn');
+		const resetBtn = container.querySelector('.reset-btn');
+
+		expect(counterDiv.textContent).toBe('0');
+		expect(parityDiv.textContent).toBe('Even');
+		expect(historyDiv.textContent).toBe('0');
+
+		incBtn.click();
+		flushSync();
+
+		expect(counterDiv.textContent).toBe('1');
+		expect(parityDiv.textContent).toBe('Odd');
+		expect(historyDiv.textContent).toBe('1');
+
+		incBtn.click();
+		flushSync();
+
+		expect(counterDiv.textContent).toBe('2');
+		expect(parityDiv.textContent).toBe('Even');
+		expect(historyDiv.textContent).toBe('2');
+
+		decBtn.click();
+		flushSync();
+
+		expect(counterDiv.textContent).toBe('1');
+		expect(parityDiv.textContent).toBe('Odd');
+		expect(historyDiv.textContent).toBe('3');
+
+		resetBtn.click();
+		flushSync();
+
+		expect(counterDiv.textContent).toBe('0');
+		expect(parityDiv.textContent).toBe('Even');
+		expect(historyDiv.textContent).toBe('4');
+	});
+
+	it('renders with reactive component props', () => {
+		component ChildComponent(props) {
+			<div class='child-content'>{props.$text}</div>
+			<div class='child-count'>{props.$count}</div>
+		}
+
+		component Basic() {
+			let $message = 'Hello';
+			let $number = 1;
+
+			<ChildComponent $text={$message} $count={$number} />
+			<button onClick={() => {
+				$message = $message === 'Hello' ? 'Goodbye' : 'Hello';
+				$number++;
+			}}>{'Update Props'}</button>
+		}
+
+		render(Basic);
+
+		const contentDiv = container.querySelector('.child-content');
+		const countDiv = container.querySelector('.child-count');
+		const button = container.querySelector('button');
+
+		expect(contentDiv.textContent).toBe('Hello');
+		expect(countDiv.textContent).toBe('1');
+
+		button.click();
+		flushSync();
+
+		expect(contentDiv.textContent).toBe('Goodbye');
+		expect(countDiv.textContent).toBe('2');
+
+		button.click();
+		flushSync();
+
+		expect(contentDiv.textContent).toBe('Hello');
+		expect(countDiv.textContent).toBe('3');
+	});
+
+	it('renders with styling scoped to component', () => {
+		component Basic() {
+			<div class='styled-container'>
+				<h1>{'Styled heading'}</h1>
+				<p class='text'>{'Styled paragraph'}</p>
+			</div>
+
+			<style>
+				.styled-container {
+					background-color: rgb(0, 0, 255);
+					padding: 16px;
+				}
+
+				h1 {
+					color: rgb(255, 255, 255);
+					font-size: 32px;
+				}
+
+				.text {
+					color: rgb(200, 200, 200);
+					font-size: 14px;
+				}
+			</style>
+		}
+
+		render(Basic);
+
+		const styledContainer = container.querySelector('.styled-container');
+		const heading = styledContainer.querySelector('h1');
+		const paragraph = styledContainer.querySelector('.text');
+
+		expect(styledContainer).toBeTruthy();
+		expect(heading.textContent).toBe('Styled heading');
+		expect(paragraph.textContent).toBe('Styled paragraph');
+	});
+
+	it('renders with mixed static and dynamic content', () => {
+		component Basic() {
+			let $name = 'World';
+			let $count = 0;
+			const staticMessage = 'Welcome to Ripple!';
+
+			<div class='mixed-content'>
+				<h1>{staticMessage}</h1>
+				<p class='greeting'>{'Hello, ' + $name + '!'}</p>
+				<p class='notifications'>{'You have ' + $count + ' notifications'}</p>
+				<button onClick={() => $count++}>{'Add Notification'}</button>
+				<button onClick={() => $name = $name === 'World' ? 'User' : 'World'}>{'Toggle Name'}</button>
+			</div>
+		}
+
+		render(Basic);
+
+		const heading = container.querySelector('h1');
+		const greetingP = container.querySelector('.greeting');
+		const notificationsP = container.querySelector('.notifications');
+		const buttons = container.querySelectorAll('button');
+
+		expect(heading.textContent).toBe('Welcome to Ripple!');
+		expect(greetingP.textContent).toBe('Hello, World!');
+		expect(notificationsP.textContent).toBe('You have 0 notifications');
+
+		buttons[0].click();
+		flushSync();
+		expect(notificationsP.textContent).toBe('You have 1 notifications');
+
+		buttons[1].click();
+		flushSync();
+		expect(greetingP.textContent).toBe('Hello, User!');
+	});
 });

package/tests/context.test.ripple

@@ -32,8 +32,6 @@ describe('context', () => {
     component TestContext() {
       const value = MyContext.get();
 
-      console.log(value);
-
       MyContext.set("Hello from context!");
 
       <Child />