ripple 0.3.3 → 0.3.4

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # ripple
 
+## 0.3.4
+
+### Patch Changes
+
+- [`92982cd`](https://github.com/Ripple-TS/ripple/commit/92982cd7b918d0afee9334c74765573b30c8a645)
+  Thanks [@trueadm](https://github.com/trueadm)! - feat(compiler): add lazy
+  destructuring syntax (`&{...}` and `&[...]`)
+
+  Lazy destructuring defers property/index access until the binding is read,
+  preserving reactivity for destructured props. Works with default values,
+  compound assignment operators, and update expressions.
+
+- [#814](https://github.com/Ripple-TS/ripple/pull/814)
+  [`747ae1f`](https://github.com/Ripple-TS/ripple/commit/747ae1fc7948e994eeb521f3ed78711c9dd3e802)
+  Thanks [@RazinShafayet2007](https://github.com/RazinShafayet2007)! -
+  fix(compiler): strip TypeScript class syntax from JS output
+
+  This fixes compiler output for `.ripple` classes by stripping TypeScript-only
+  `implements` clauses and `extends` type arguments from emitted JavaScript.
+
+- [#820](https://github.com/Ripple-TS/ripple/pull/820)
+  [`abe1caa`](https://github.com/Ripple-TS/ripple/commit/abe1caa6ab636722099a6ecd4cafbf117d208ec2)
+  Thanks [@RazinShafayet2007](https://github.com/RazinShafayet2007)! - fix: sync
+  `<select>` `bindValue` with typed and dynamic options
+
+- [#817](https://github.com/Ripple-TS/ripple/pull/817)
+  [`046d0ba`](https://github.com/Ripple-TS/ripple/commit/046d0baf190d161c3b851799080d11eb4f95e094)
+  Thanks [@RazinShafayet2007](https://github.com/RazinShafayet2007)! -
+  fix(compiler): preserve class `extends` generics in volar output
+
+- [`79a920e`](https://github.com/Ripple-TS/ripple/commit/79a920e30f0f35f2ec07ff8d52dc709f8bb74c77)
+  Thanks [@trueadm](https://github.com/trueadm)! - Remove `#ripple` namespace
+  syntax in favor of direct imports from `'ripple'`
+
+  The `#ripple` namespace (`#ripple.track()`, `#ripple.effect()`,
+  `#ripple.array()`, etc.) has been removed. All reactive APIs are now accessed
+  via standard imports:
+
+  ```ripple
+  import {
+    track,
+    effect,
+    untrack,
+    Context,
+    RippleArray,
+    RippleObject,
+  } from 'ripple';
+  ```
+
+  - `#ripple.track(value)` → `track(value)`
+  - `#ripple.effect(fn)` → `effect(fn)`
+  - `#ripple.untrack(fn)` → `untrack(fn)`
+  - `#ripple.context(value)` → `new Context(value)`
+  - `#ripple[1, 2, 3]` → `new RippleArray(1, 2, 3)`
+  - `#ripple{ key: value }` → `new RippleObject({ key: value })`
+  - `#ripple.style` → `#style`
+  - `#ripple.server` → `#server`
+
+- [#824](https://github.com/Ripple-TS/ripple/pull/824)
+  [`83807a4`](https://github.com/Ripple-TS/ripple/commit/83807a412603ff49c398f9365b011fd4b4a5f8bf)
+  Thanks [@RazinShafayet2007](https://github.com/RazinShafayet2007)! -
+  fix(parser): avoid hanging on unclosed tsx compat tags
+
+- Updated dependencies
+  [[`92982cd`](https://github.com/Ripple-TS/ripple/commit/92982cd7b918d0afee9334c74765573b30c8a645),
+  [`747ae1f`](https://github.com/Ripple-TS/ripple/commit/747ae1fc7948e994eeb521f3ed78711c9dd3e802),
+  [`abe1caa`](https://github.com/Ripple-TS/ripple/commit/abe1caa6ab636722099a6ecd4cafbf117d208ec2),
+  [`046d0ba`](https://github.com/Ripple-TS/ripple/commit/046d0baf190d161c3b851799080d11eb4f95e094),
+  [`79a920e`](https://github.com/Ripple-TS/ripple/commit/79a920e30f0f35f2ec07ff8d52dc709f8bb74c77),
+  [`83807a4`](https://github.com/Ripple-TS/ripple/commit/83807a412603ff49c398f9365b011fd4b4a5f8bf)]:
+  - ripple@0.3.4
+
 ## 0.3.3
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -105,6 +105,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.3"
+    "ripple": "0.3.4"
   }
 }

package/src/compiler/identifier-utils.js

@@ -1,13 +1,6 @@
 export const IDENTIFIER_OBFUSCATION_PREFIX = '_$_';
-export const RIPPLE_NAMESPACE_IDENTIFIER =
-	IDENTIFIER_OBFUSCATION_PREFIX + encode_utf16_char('#') + 'ripple';
 export const STYLE_IDENTIFIER = IDENTIFIER_OBFUSCATION_PREFIX + encode_utf16_char('#') + 'style';
-export const SERVER_IDENTIFIER =
-	IDENTIFIER_OBFUSCATION_PREFIX +
-	encode_utf16_char('#') +
-	'ripple' +
-	encode_utf16_char('.') +
-	'server';
+export const SERVER_IDENTIFIER = IDENTIFIER_OBFUSCATION_PREFIX + encode_utf16_char('#') + 'server';
 export const CSS_HASH_IDENTIFIER = IDENTIFIER_OBFUSCATION_PREFIX + 'hash';
 
 const DECODE_UTF16_REGEX = /_u([0-9a-fA-F]{4})_/g;

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

@@ -665,46 +665,14 @@ function RipplePlugin(config) {
 							ch === 13 || // carriage return
 							ch === -1; // EOF
 
-						if (startsWith('#ripple[')) {
-							this.pos += 8;
-							return this.finishToken(tt.bracketL, '#ripple[');
-						}
-
-						if (startsWith('#ripple{')) {
-							this.pos += 8;
-							return this.finishToken(tt.braceL, '#ripple{');
-						}
-
-						const ripple_keywords = [
-							'#ripple.map',
-							'#ripple.set',
-							'#ripple.array',
-							'#ripple.object',
-							'#ripple.track',
-							'#ripple.trackSplit',
-							'#ripple.untrack',
-							'#ripple.effect',
-							'#ripple.context',
-							'#ripple.date',
-							'#ripple.url',
-							'#ripple.urlSearchParams',
-							'#ripple.mediaQuery',
-							'#ripple.server',
-							'#ripple.style',
-							'#ripple.validate',
-						];
-
-						for (let i = 0; i < ripple_keywords.length; i++) {
-							const keyword = ripple_keywords[i];
-							if (startsWith(keyword) && is_ripple_delimiter(char_after(keyword.length))) {
-								this.pos += keyword.length;
-								return this.finishToken(tt.name, keyword);
-							}
+						if (startsWith('#server') && is_ripple_delimiter(char_after(7))) {
+							this.pos += 7;
+							return this.finishToken(tt.name, '#server');
 						}
 
-						if (this.#loose && startsWith('#ripple') && is_ripple_delimiter(char_after(7))) {
-							this.pos += 7;
-							return this.finishToken(tt.name, '#ripple');
+						if (startsWith('#style') && is_ripple_delimiter(char_after(6))) {
+							this.pos += 6;
+							return this.finishToken(tt.name, '#style');
 						}
 					}
 				}
@@ -904,6 +872,49 @@ function RipplePlugin(config) {
 				);
 			}
 
+			/**
+			 * Override isLet to recognize `let &{` and `let &[` as variable declarations.
+			 * Acorn's isLet checks the char after `let` and only recognizes `{`, `[`, or identifiers.
+			 * The `&` char (38) is not in that set, so `let &{...}` would not be parsed as a declaration.
+			 * @param {string} context
+			 * @returns {boolean}
+			 */
+			isLet(context) {
+				if (!this.isContextual('let')) return false;
+				const skip = /\s*/y;
+				skip.lastIndex = this.pos;
+				const match = skip.exec(this.input);
+				if (!match) return super.isLet(context);
+				const next = this.pos + match[0].length;
+				const nextCh = this.input.charCodeAt(next);
+				// If next char is &, check if char after & is { or [
+				if (nextCh === 38) {
+					const afterAmp = this.input.charCodeAt(next + 1);
+					if (afterAmp === 123 || afterAmp === 91) return true;
+				}
+				return super.isLet(context);
+			}
+
+			/**
+			 * Parse binding atom - handles lazy destructuring patterns (&{...} and &[...])
+			 * When & is directly followed by { or [, parse as a lazy destructuring pattern.
+			 * The resulting ObjectPattern/ArrayPattern node gets a `lazy: true` flag.
+			 */
+			parseBindingAtom() {
+				if (this.type === tt.bitwiseAND) {
+					// Check that the char immediately after & is { or [ (no whitespace)
+					const charAfterAmp = this.input.charCodeAt(this.end);
+					if (charAfterAmp === 123 || charAfterAmp === 91) {
+						// & directly followed by { or [ — lazy destructuring
+						this.next(); // consume &, now current token is { or [
+						const pattern = super.parseBindingAtom();
+						pattern.lazy = true;
+						return pattern;
+					}
+				}
+				return super.parseBindingAtom();
+			}
+
 			/**
 			 * Parse expression atom - handles RippleArray and RippleObject literals
 			 * @type {Parse.Parser['parseExprAtom']}
@@ -917,69 +928,19 @@ function RipplePlugin(config) {
 					return this.parseTrackedExpression();
 				}
 
-				// Check if this is #ripple.server identifier for server function calls
-				if (this.type === tt.name && this.value === '#ripple.server') {
+				// Check if this is #server identifier for server function calls
+				if (this.type === tt.name && this.value === '#server') {
 					const node = this.startNode();
 					this.next();
 					return /** @type {AST.ServerIdentifier} */ (this.finishNode(node, 'ServerIdentifier'));
 				}
 
-				if (this.type === tt.name && this.value === '#ripple.style') {
+				if (this.type === tt.name && this.value === '#style') {
 					const node = this.startNode();
 					this.next();
 					return /** @type {AST.StyleIdentifier} */ (this.finishNode(node, 'StyleIdentifier'));
 				}
 
-				if (this.type === tt.name && typeof this.value === 'string') {
-					const ripple_identifier_map = {
-						'#ripple.array': 'RippleArray',
-						'#ripple.object': 'RippleObject',
-						'#ripple.track': 'track',
-						'#ripple.trackSplit': 'trackSplit',
-						'#ripple.untrack': 'untrack',
-						'#ripple.effect': 'effect',
-						'#ripple.context': 'Context',
-						'#ripple.date': 'RippleDate',
-						'#ripple.map': 'RippleMap',
-						'#ripple.set': 'RippleSet',
-						'#ripple.url': 'RippleURL',
-						'#ripple.urlSearchParams': 'RippleURLSearchParams',
-						'#ripple.mediaQuery': 'MediaQuery',
-					};
-
-					const identifier_name =
-						ripple_identifier_map[/** @type {keyof typeof ripple_identifier_map} */ (this.value)];
-					if (identifier_name !== undefined) {
-						const node = /** @type {AST.Identifier} */ (this.startNode());
-						node.name = identifier_name;
-						node.metadata ??= { path: [] };
-						node.metadata.source_name = this.value;
-						this.next();
-						return this.finishNode(node, 'Identifier');
-					}
-				}
-
-				// In loose mode, handle incomplete #ripple prefixes for autocomplete
-				if (
-					this.#loose &&
-					this.type === tt.name &&
-					typeof this.value === 'string' &&
-					this.value === '#ripple'
-				) {
-					// Return an Identifier node for incomplete tracked syntax
-					const node = /** @type {AST.Identifier} */ (this.startNode());
-					node.name = this.value;
-					this.next();
-					return this.finishNode(node, 'Identifier');
-				}
-
-				// Check if this is a tuple literal starting with #ripple[
-				if (this.type === tt.bracketL && this.value === '#ripple[') {
-					return this.parseRippleArrayExpression();
-				} else if (this.type === tt.braceL && this.value === '#ripple{') {
-					return this.parseRippleObjectExpression();
-				}
-
 				// Check if this is a component expression (e.g., in object literal values)
 				if (this.type === tt.name && this.value === 'component') {
 					return this.parseComponent();
@@ -1080,79 +1041,6 @@ function RipplePlugin(config) {
 				return this.finishNode(node, 'ServerBlock');
 			}
 
-			/**
-			 * @type {Parse.Parser['parseRippleArrayExpression']}
-			 */
-			parseRippleArrayExpression() {
-				const node = /** @type {AST.RippleArrayExpression} */ (this.startNode());
-				this.next(); // consume the '#ripple['
-
-				node.elements = [];
-
-				// Parse array elements similar to regular array parsing
-				let first = true;
-				while (!this.eat(tt.bracketR)) {
-					if (!first) {
-						this.expect(tt.comma);
-						if (this.afterTrailingComma(tt.bracketR)) break;
-					} else {
-						first = false;
-					}
-
-					if (this.type === tt.comma) {
-						// Hole in array
-						node.elements.push(null);
-					} else if (this.type === tt.ellipsis) {
-						// Spread element
-						const element = this.parseSpread();
-						node.elements.push(element);
-						if (this.type === tt.comma && this.input.charCodeAt(this.pos) === 93) {
-							this.raise(this.pos, 'Trailing comma is not permitted after the rest element');
-						}
-					} else {
-						// Regular element
-						node.elements.push(this.parseMaybeAssign(false));
-					}
-				}
-
-				return this.finishNode(node, 'RippleArrayExpression');
-			}
-
-			/**
-			 * @type {Parse.Parser['parseRippleObjectExpression']}
-			 */
-			parseRippleObjectExpression() {
-				const node = /** @type {AST.RippleObjectExpression} */ (this.startNode());
-				this.next(); // consume the '#ripple{'
-
-				node.properties = [];
-
-				// Parse object properties similar to regular object parsing
-				let first = true;
-				while (!this.eat(tt.braceR)) {
-					if (!first) {
-						this.expect(tt.comma);
-						if (this.afterTrailingComma(tt.braceR)) break;
-					} else {
-						first = false;
-					}
-
-					if (this.type === tt.ellipsis) {
-						// Spread property
-						const prop = this.parseSpread();
-						node.properties.push(prop);
-						if (this.type === tt.comma && this.input.charCodeAt(this.pos) === 125) {
-							this.raise(this.pos, 'Trailing comma is not permitted after the rest element');
-						}
-					} else {
-						// Regular property
-						node.properties.push(this.parseProperty(false, new DestructuringErrors()));
-					}
-				}
-
-				return this.finishNode(node, 'RippleObjectExpression');
-			}
-
 			/**
 			 * Parse a component - common implementation used by statements, expressions, and export defaults
 			 * @type {Parse.Parser['parseComponent']}
@@ -2146,32 +2034,34 @@ function RipplePlugin(config) {
 						if (element.type === 'TsxCompat') {
 							this.#path.pop();
 
-							const raise_error = () => {
-								this.raise(this.start, `Expected closing tag '</tsx:${element.kind}>'`);
-							};
+							if (!element.unclosed) {
+								const raise_error = () => {
+									this.raise(this.start, `Expected closing tag '</tsx:${element.kind}>'`);
+								};
 
-							this.next();
-							// we should expect to see </tsx:kind>
-							if (this.value !== '/') {
-								raise_error();
-							}
-							this.next();
-							if (this.value !== 'tsx') {
-								raise_error();
-							}
-							this.next();
-							if (this.type.label !== ':') {
-								raise_error();
-							}
-							this.next();
-							if (this.value !== element.kind) {
-								raise_error();
-							}
-							this.next();
-							if (this.type !== tstt.jsxTagEnd) {
-								raise_error();
+								this.next();
+								// we should expect to see </tsx:kind>
+								if (this.value !== '/') {
+									raise_error();
+								}
+								this.next();
+								if (this.value !== 'tsx') {
+									raise_error();
+								}
+								this.next();
+								if (this.type.label !== ':') {
+									raise_error();
+								}
+								this.next();
+								if (this.value !== element.kind) {
+									raise_error();
+								}
+								this.next();
+								if (this.type !== tstt.jsxTagEnd) {
+									raise_error();
+								}
+								this.next();
 							}
-							this.next();
 						} else if (this.#path[this.#path.length - 1] === element) {
 							// Check if this element was properly closed
 							if (!this.#loose) {
@@ -2235,6 +2125,22 @@ function RipplePlugin(config) {
 					this.exprAllowed = true;
 
 					while (true) {
+						if (this.type === tt.eof || this.pos >= this.input.length || this.type === tt.braceR) {
+							if (!this.#loose) {
+								this.raise(
+									this.start,
+									`Unclosed tag '<tsx:${inside_tsx_compat.kind}>'. Expected '</tsx:${inside_tsx_compat.kind}>' before end of component.`,
+								);
+							} else {
+								inside_tsx_compat.unclosed = true;
+								/** @type {AST.NodeWithLocation} */ (inside_tsx_compat).loc.end = {
+									.../** @type {AST.SourceLocation} */ (inside_tsx_compat.openingElement.loc).end,
+								};
+								inside_tsx_compat.end = inside_tsx_compat.openingElement.end;
+							}
+							return;
+						}
+
 						if (this.input.slice(this.pos, this.pos + 5) === '/tsx:') {
 							return;
 						}
@@ -2254,9 +2160,9 @@ function RipplePlugin(config) {
 							while (this.pos < this.input.length) {
 								const ch = this.input.charCodeAt(this.pos);
 
-								// Stop at opening tag, closing tag, or expression
-								if (ch === 60 || ch === 123) {
-									// < or {
+								// Stop at opening tag, expression, or the component-closing brace
+								if (ch === 60 || ch === 123 || ch === 125) {
+									// < or { or }
 									break;
 								}
 
@@ -2433,16 +2339,16 @@ function RipplePlugin(config) {
 					);
 				}
 
-				if (this.value === '#ripple.server') {
-					// Peek ahead to see if this is a server block (#ripple.server { ... }) vs
-					// a server identifier expression (#ripple.server.fn(), #ripple.server.fn().then())
+				if (this.value === '#server') {
+					// Peek ahead to see if this is a server block (#server { ... }) vs
+					// a server identifier expression (#server.fn(), #server.fn().then())
 					let peek_pos = this.end;
 					while (peek_pos < this.input.length && /\s/.test(this.input[peek_pos])) peek_pos++;
 					if (peek_pos < this.input.length && this.input.charCodeAt(peek_pos) === 123) {
 						// Next non-whitespace character is '{' — parse as server block
 						return this.parseServerBlock();
 					}
-					// Otherwise fall through to parse as expression statement (e.g., #ripple.server.fn().then(...))
+					// Otherwise fall through to parse as expression statement (e.g., #server.fn().then(...))
 				}
 
 				if (this.value === 'component') {