ripple 0.2.104 → 0.2.105

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.104",
+  "version": "0.2.105",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -67,6 +67,7 @@
     "@sveltejs/acorn-typescript": "^1.0.6",
     "acorn": "^8.15.0",
     "clsx": "^2.1.1",
+    "esm-env": "^1.2.2",
     "esrap": "^2.1.0",
     "is-reference": "^3.0.3",
     "magic-string": "^0.30.18",

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

@@ -167,9 +167,16 @@ function RipplePlugin(config) {
 
 				if (code === 64) {
 					// @ character
-					// Look ahead to see if this is followed by a valid identifier character
+					// Look ahead to see if this is followed by a valid identifier character or opening paren
 					if (this.pos + 1 < this.input.length) {
 						const nextChar = this.input.charCodeAt(this.pos + 1);
+						
+						// Check if this is @( for unboxing expression syntax
+						if (nextChar === 40) { // ( character
+							this.pos += 2; // skip '@('
+							return this.finishToken(tt.parenL, '@(');
+						}
+						
 						// Check if the next character can start an identifier
 						if (
 							(nextChar >= 65 && nextChar <= 90) || // A-Z
@@ -348,6 +355,11 @@ function RipplePlugin(config) {
 			 * @returns {any} Parsed expression atom
 			 */
 			parseExprAtom(refDestructuringErrors, forNew, forInit) {
+				// Check if this is @(expression) for unboxing tracked values
+				if (this.type === tt.parenL && this.value === '@(') {
+					return this.parseTrackedExpression();
+				}
+				
 				// Check if this is a tuple literal starting with #[
 				if (this.type === tt.bracketL && this.value === '#[') {
 					return this.parseTrackedArrayExpression();
@@ -358,6 +370,33 @@ function RipplePlugin(config) {
 				return super.parseExprAtom(refDestructuringErrors, forNew, forInit);
 			}
 
+			/**
+			 * Parse `@(expression)` syntax for unboxing tracked values
+			 * Creates a TrackedExpression node with the argument property
+			 * @returns {any} TrackedExpression node
+			 */
+			parseTrackedExpression() {
+				const node = this.startNode();
+				this.next(); // consume '@(' token
+				node.argument = this.parseExpression();
+				this.expect(tt.parenR); // expect ')'
+				return this.finishNode(node, 'TrackedExpression');
+			}
+
+			/**
+			 * Override to allow TrackedExpression as a valid lvalue for update expressions
+			 * @param {any} expr - Expression to check
+			 * @param {any} bindingType - Binding type
+			 * @param {any} checkClashes - Check for clashes
+			 */
+			checkLValSimple(expr, bindingType, checkClashes) {
+				// Allow TrackedExpression as a valid lvalue for ++/-- operators
+				if (expr.type === 'TrackedExpression') {
+					return;
+				}
+				return super.checkLValSimple(expr, bindingType, checkClashes);
+			}
+
 			parseTrackedArrayExpression() {
 				const node = this.startNode();
 				this.next(); // consume the '#['

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

@@ -362,6 +362,10 @@ const visitors = {
 		);
 	},
 
+	TrackedExpression(node, context) {
+		return b.call('_$_.get', context.visit(node.argument));
+	},
+
 	MemberExpression(node, context) {
 		const parent = context.path.at(-1);
 
@@ -1001,6 +1005,16 @@ const visitors = {
 			);
 		}
 
+		if (argument.type === 'TrackedExpression') {
+			return b.call(
+				node.prefix ? '_$_.update_pre' : '_$_.update',
+				context.visit(argument.argument, { ...context.state, metadata: { tracking: null } }),
+				b.id('__block'),
+				node.operator === '--' ? b.literal(-1) : undefined,
+			);
+		}
+
+
 		const left = object(argument);
 		const binding = context.state.scope.get(left.name);
 		const transformers = left && binding?.transform;

package/src/compiler/types/index.d.ts

@@ -65,6 +65,11 @@ export interface TrackedArrayExpression extends Omit<ArrayExpression, 'type'> {
 	elements: (Expression | null)[];
 }
 
+export interface TrackedExpression extends Omit<Expression, 'type'> {
+	argument: Expression;
+	type: 'TrackedExpression';
+}
+
 /**
  * Tracked object expression node
  */

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

@@ -1,3 +1,5 @@
+import { DEV } from 'esm-env';
+
 export function remove_ssr_css() {
 	if (!document || typeof requestAnimationFrame !== "function") {
 		return;
@@ -7,14 +9,14 @@ export function remove_ssr_css() {
 }
 
 function remove_styles() {
-	if (import.meta.env.DEV) {
+	if (DEV) {
 		const styles = document.querySelector('style[data-vite-dev-id]');
 		if (styles) {
 			remove();
 		} else {
 			requestAnimationFrame(remove_styles);
 		}
-	} else if (import.meta.env.PROD) {
+	} else {
 		remove_when_css_loaded(() => requestAnimationFrame(remove));
 	}
 }

package/tests/client/__snapshots__/tracked-expression.test.ripple.snap

@@ -0,0 +1,34 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TrackedExpression tests > should handle the syntax correctly 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <div>
+    0
+  </div>
+  <div>
+    1
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    3
+  </div>
+  <div>
+    4
+  </div>
+  <div>
+    false
+  </div>
+  <div>
+    true
+  </div>
+  
+</div>
+`;

package/tests/client/compiler.test.ripple

@@ -287,13 +287,13 @@ describe('compiler success tests', () => {
 			component Child(props) {
 				<div />
 			}
-			
+
 			export default component App() {
 				<Child data-scope="test" aria-label="accessible" class="valid" />
 			}`;
 
 			const result = compile(source, 'test.ripple', { mode: 'client' });
-			
+
 			// Should contain properly quoted hyphenated properties and unquoted valid identifiers
 			expect(result.js.code).toMatch(/'data-scope': "test"/);
 			expect(result.js.code).toMatch(/'aria-label': "accessible"/);
@@ -323,9 +323,9 @@ describe('compiler success tests', () => {
 			component Child(props) {
 				<div />
 			}
-			
+
 			export default component App() {
-				<Child 
+				<Child
 					validProp="valid"
 					class="valid"
 					id="valid"
@@ -336,12 +336,12 @@ describe('compiler success tests', () => {
 			}`;
 
 			const result = compile(source, 'test.ripple', { mode: 'client' });
-			
+
 			// Valid identifiers should not be quoted
 			expect(result.js.code).toMatch(/validProp: "valid"/);
 			expect(result.js.code).toMatch(/class: "valid"/);
 			expect(result.js.code).toMatch(/id: "valid"/);
-			
+
 			// Invalid identifiers (with hyphens) should be quoted
 			expect(result.js.code).toMatch(/'data-invalid': "invalid"/);
 			expect(result.js.code).toMatch(/'aria-invalid': "invalid"/);
@@ -353,25 +353,113 @@ describe('compiler success tests', () => {
 			component Child(props) {
 				<div />
 			}
-			
+
 			export default component App() {
 				<Child data-scope="test" />
 			}`;
 
 			const result = compile(source, 'test.ripple', { mode: 'client' });
-			
+
 			// Extract the props object from the generated code and test it's valid JavaScript
 			const match = result.js.code.match(/Child\([^,]+,\s*(\{[^}]+\})/);
 			expect(match).toBeTruthy();
-			
+
 			const propsObject = match[1];
 			expect(() => {
 				// Test that the object literal is syntactically valid
 				new Function(`return ${propsObject}`);
 			}).not.toThrow();
-			
+
 			// Also verify it contains the expected quoted property
 			expect(propsObject).toMatch(/'data-scope': "test"/);
 		});
 	});
+
+	describe('regex handling', () => {
+		it('renders without crashing using regex literals in method calls', () => {
+			component App() {
+				let text = 'Hello <span>world</span> and <div>content</div>';
+
+				// Test various regex patterns in method calls that previously failed
+				let matchResult = text.match(/<span>/);
+				let replaceResult = text.replace(/<div>/g, '[DIV]');
+				let searchResult = text.search(/<span>/);
+
+				// Test regex literals in variable assignments (should work)
+				let spanRegex = /<span>/g;
+				let divRegex = /<div.*?>/;
+
+				// Test more complex regex patterns
+				let complexMatch = text.match(/<[^>]*>/g);
+				let htmlTags = text.replace(/<(\/*)(\w+)[^>]*>/g, '[$1$2]');
+
+				// Test edge cases with multiple angle brackets
+				let multiAngle = '<<test>> <span>content</span>'.match(/<span>/);
+
+				<div>
+					<span>{String(matchResult)}</span>
+					<span>{replaceResult}</span>
+					<span>{String(searchResult)}</span>
+					<span>{String(spanRegex)}</span>
+					<span>{String(divRegex)}</span>
+					<span>{String(complexMatch)}</span>
+					<span>{htmlTags}</span>
+					<span>{String(multiAngle)}</span>
+				</div>
+			}
+
+			render(App);
+
+			const matchResult = container.querySelectorAll('span')[0];
+			const replaceResult = container.querySelectorAll('span')[1];
+			const searchResult = container.querySelectorAll('span')[2];
+			const spanRegex = container.querySelectorAll('span')[3];
+			const divRegex = container.querySelectorAll('span')[4];
+			const complexMatch = container.querySelectorAll('span')[5];
+			const htmlTags = container.querySelectorAll('span')[6];
+			const multiAngle = container.querySelectorAll('span')[7];
+
+			expect(matchResult.textContent).toBe('<span>');
+			expect(replaceResult.textContent).toBe('Hello <span>world</span> and [DIV]content</div>');
+			expect(searchResult.textContent).toBe('6');
+			expect(spanRegex.textContent).toBe('/<span>/g');
+			expect(divRegex.textContent).toBe('/<div.*?>/');
+			expect(complexMatch.textContent).toBe('<span>,</span>,<div>,</div>');
+			expect(htmlTags.textContent).toBe('Hello [span]world[/span] and [div]content[/div]');
+			expect(multiAngle.textContent).toBe('<span>');
+		});
+
+		it('renders without crashing mixing regex and JSX syntax', () => {
+			component App() {
+				let htmlString = '<p>Paragraph</p><div>Content</div>';
+
+				// Mix of regex parsing and legitimate JSX
+				let paragraphs = htmlString.match(/<p[^>]*>.*?<\/p>/g);
+				let cleaned = htmlString.replace(/<\/?[^>]+>/g, '');
+				let splitArray = htmlString.split(/<\/?\w+>/g).filter(s => s.trim());
+
+				<div class='container'>
+					<span class='result'>{String(paragraphs)}</span>
+					<span class='cleaned'>{cleaned}</span>
+					<p>{'This is real JSX'}</p>
+					<div><span>
+						{'Split result: '}
+						{splitArray.join(', ')}
+					</span></div>
+				</div>
+			}
+
+			render(App);
+
+			const result = container.querySelector('.result');
+			const cleaned = container.querySelector('.cleaned');
+			const jsxParagraph = container.querySelector('p');
+			const splitResult = container.querySelector('.container > div > span');
+
+			expect(result.textContent).toBe('<p>Paragraph</p>');
+			expect(cleaned.textContent).toBe('ParagraphContent');
+			expect(jsxParagraph.textContent).toBe('This is real JSX');
+			expect(splitResult.textContent).toBe('Split result: Paragraph, Content');
+		});
+	});
 });

package/tests/client/tracked-expression.test.ripple

@@ -0,0 +1,46 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, TrackedSet, track } from 'ripple';
+
+describe('TrackedExpression 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('should handle the syntax correctly', () => {
+		component App() {
+      let count = track(0);
+
+      function get_count() {
+        return count;
+      }
+
+
+      <div>{@(count)}</div>
+      <div>{@(get_count())}</div>
+      <div>{++@(count)}</div>
+      <div>{++@(get_count())}</div>
+      <div>{@(count)++}</div>
+      <div>{@(get_count())++}</div>
+      <div>{@(count)}</div>
+      <div>{!@(count)}</div>
+      <div>{!!@(count)}</div>
+    }
+
+    render(App);
+    expect(container).toMatchSnapshot();
+	});
+});