ripple 0.3.9 → 0.3.11

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # ripple
 
+## 0.3.11
+
+### Patch Changes
+
+- [#853](https://github.com/Ripple-TS/ripple/pull/853)
+  [`6792c70`](https://github.com/Ripple-TS/ripple/commit/6792c700db30ec0c25077bf8892753f18eddc5cc)
+  Thanks [@RazinShafayet2007](https://github.com/RazinShafayet2007)! -
+  fix(compiler): add `throw` statement support in `if` blocks
+
+- [#858](https://github.com/Ripple-TS/ripple/pull/858)
+  [`f2624a6`](https://github.com/Ripple-TS/ripple/commit/f2624a6596479480c47317ea3030863214a6e2b3)
+  Thanks [@RazinShafayet2007](https://github.com/RazinShafayet2007)! - fix: scoped
+  styles apply correctly when child content is rendered through a parent component
+
+- [#840](https://github.com/Ripple-TS/ripple/pull/840)
+  [`13323dd`](https://github.com/Ripple-TS/ripple/commit/13323dddbcb68e1e8e373142884a7c54fbb76cd7)
+  Thanks [@trueadm](https://github.com/trueadm)! - Remove the `compat` option from
+  `mount()` and `hydrate()`, and stop exporting the old public compat types from
+  `ripple`. Compat integrations are now expected to be provided by the Vite plugin
+  via `ripple.config.ts`, while direct runtime tests can seed the generated global
+  compat registry.
+
+  Also add the `reactCompat()` config-facing helper from `@ripple-ts/compat-react`
+  for use in `ripple.config.ts`.
+
+- Updated dependencies
+  [[`6792c70`](https://github.com/Ripple-TS/ripple/commit/6792c700db30ec0c25077bf8892753f18eddc5cc),
+  [`f2624a6`](https://github.com/Ripple-TS/ripple/commit/f2624a6596479480c47317ea3030863214a6e2b3),
+  [`13323dd`](https://github.com/Ripple-TS/ripple/commit/13323dddbcb68e1e8e373142884a7c54fbb76cd7)]:
+  - ripple@0.3.11
+
+## 0.3.10
+
+### Patch Changes
+
+- [`aef1253`](https://github.com/Ripple-TS/ripple/commit/aef1253dd79c067a8358172d502dc21d8a9a9085)
+  Thanks [@trueadm](https://github.com/trueadm)! - Replace `<children />` with
+  `{children}` expression syntax for rendering component children
+
+- Updated dependencies
+  [[`aef1253`](https://github.com/Ripple-TS/ripple/commit/aef1253dd79c067a8358172d502dc21d8a9a9085)]:
+  - ripple@0.3.10
+
 ## 0.3.9
 
 ### 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.9",
+  "version": "0.3.11",
   "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.9"
+    "ripple": "0.3.11"
   }
 }

package/src/compiler/errors.js

@@ -59,7 +59,7 @@ function is_ripple_error_suppress_comment(comment) {
 }
 
 /**
- * @param {AST.Node} node
+ * @param {AST.Node | AST.NodeWithLocation} node
  * @param {AST.CommentWithLocation[]} comments
  */
 function is_ripple_error_suppressed(node, comments) {

package/src/compiler/index.d.ts

@@ -98,6 +98,7 @@ interface SharedCompileOptions {
 export interface CompileOptions extends SharedCompileOptions {
 	mode?: 'client' | 'server';
 	hmr?: boolean;
+	compat_kinds?: string[];
 }
 
 export interface ParseOptions {
@@ -106,7 +107,8 @@ export interface ParseOptions {
 	comments?: AST.CommentWithLocation[];
 }
 
-export interface AnalyzeOptions extends ParseOptions, Pick<CompileOptions, 'mode'> {
+export interface AnalyzeOptions
+	extends ParseOptions, Pick<CompileOptions, 'mode' | 'compat_kinds'> {
 	errors?: RippleCompileError[];
 	to_ts?: boolean;
 }

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

@@ -1115,7 +1115,7 @@ function RipplePlugin(config) {
 				let node = /** @type {ESTreeJSX.JSXExpressionContainer} */ (this.startNode());
 				this.next();
 
-				if (this.value === 'html') {
+				if (this.type === tt.name && this.value === 'html') {
 					node.html = true;
 					this.next();
 					if (this.type === tt.braceR) {
@@ -1124,6 +1124,15 @@ function RipplePlugin(config) {
 							'"html" is a Ripple keyword and must be used in the form {html some_content}',
 						);
 					}
+				} else if (this.type === tt.name && this.value === 'text') {
+					node.text = true;
+					this.next();
+					if (this.type === tt.braceR) {
+						this.raise(
+							this.start,
+							'"text" is a Ripple keyword and must be used in the form {text some_value}',
+						);
+					}
 				}
 
 				node.expression =
@@ -1328,16 +1337,12 @@ function RipplePlugin(config) {
 					const clause = /** @type {AST.CatchClause} */ (this.startNode());
 					this.next();
 					if (this.eat(tt.parenL)) {
-						clause.param = this.parseCatchClauseParam();
+						clause.param = this.parseBindingAtom();
+						this.expect(tt.parenR);
 					} else {
-						if (this.options.ecmaVersion < 10) {
-							this.unexpected();
-						}
 						clause.param = null;
-						this.enterScope(0);
 					}
-					clause.body = this.parseBlock(false);
-					this.exitScope();
+					clause.body = this.parseBlock();
 					node.handler = this.finishNode(clause, 'CatchClause');
 				}
 				node.finalizer = this.eat(tt._finally) ? this.parseBlock() : null;
@@ -1353,7 +1358,9 @@ function RipplePlugin(config) {
 
 			/** @type {Parse.Parser['jsx_readToken']} */
 			jsx_readToken() {
-				const inside_tsx_compat = this.#path.findLast((n) => n.type === 'TsxCompat');
+				const inside_tsx_compat = this.#path.findLast(
+					(n) => n.type === 'TsxCompat' || n.type === 'Tsx',
+				);
 				if (inside_tsx_compat) {
 					return super.jsx_readToken();
 				}
@@ -1504,6 +1511,48 @@ function RipplePlugin(config) {
 				}
 			}
 
+			/**
+			 * Override jsx_parseElement to intercept expression-level JSX.
+			 * This is called by acorn-jsx's parseExprAtom when it encounters <
+			 * in expression position. Only <tsx> and <tsx:*> are allowed.
+			 * @type {Parse.Parser['jsx_parseElement']}
+			 */
+			jsx_parseElement() {
+				const inside_tsx = this.#path.findLast((n) => n.type === 'TsxCompat' || n.type === 'Tsx');
+				if (inside_tsx) {
+					// Inside tsx/tsx:*, let acorn-jsx handle it normally
+					return super.jsx_parseElement();
+				}
+
+				// Check if the element being parsed IS a <tsx> or <tsx:*> tag
+				// Current token is jsxTagStart, this.end is position after '<'
+				const tag_name_start = this.end;
+				const char_after_tsx = this.input.charCodeAt(tag_name_start + 3);
+				const is_tsx_tag =
+					this.input.startsWith('tsx', tag_name_start) &&
+					(tag_name_start + 3 >= this.input.length ||
+						char_after_tsx === 62 || // >
+						char_after_tsx === 47 || // / (self-closing)
+						char_after_tsx === 32 || // space
+						char_after_tsx === 9 || // tab
+						char_after_tsx === 10 || // newline
+						char_after_tsx === 13 || // carriage return
+						char_after_tsx === 58); // : (tsx:react)
+
+				if (is_tsx_tag) {
+					// Use Ripple's parseElement to create a Tsx/TsxCompat node
+					this.next();
+					return /** @type {import('estree-jsx').JSXElement} */ (
+						/** @type {unknown} */ (this.parseElement())
+					);
+				}
+
+				this.raise(
+					this.start,
+					'JSX elements cannot be used as expressions. Wrap with `<tsx>...</tsx>` or use elements as statements within a component.',
+				);
+			}
+
 			/**
 			 * @type {Parse.Parser['parseElement']}
 			 */
@@ -1515,7 +1564,7 @@ function RipplePlugin(config) {
 				const start = this.start - 1;
 				const position = new acorn.Position(this.curLine, start - this.lineStart);
 
-				const element = /** @type {AST.Element | AST.TsxCompat} */ (this.startNode());
+				const element = /** @type {AST.Element | AST.Tsx | AST.TsxCompat} */ (this.startNode());
 				element.start = start;
 				/** @type {AST.NodeWithLocation} */ (element).loc.start = position;
 				element.metadata = { path: [] };
@@ -1530,6 +1579,8 @@ function RipplePlugin(config) {
 
 				// Check if this is a namespaced element (tsx:react)
 				const is_tsx_compat = open.name.type === 'JSXNamespacedName';
+				const is_tsx =
+					!is_tsx_compat && open.name.type === 'JSXIdentifier' && open.name.name === 'tsx';
 
 				if (is_tsx_compat) {
 					const namespace_node = /** @type {ESTreeJSX.JSXNamespacedName} */ (open.name);
@@ -1543,6 +1594,15 @@ function RipplePlugin(config) {
 							`TSX compatibility elements cannot be self-closing. '<${tagName} />' must have a closing tag '</${tagName}>'.`,
 						);
 					}
+				} else if (is_tsx) {
+					/** @type {AST.Tsx} */ (element).type = 'Tsx';
+
+					if (open.selfClosing) {
+						this.raise(
+							open.start,
+							`TSX elements cannot be self-closing. '<tsx />' must have a closing tag '</tsx>'.`,
+						);
+					}
 				} else {
 					element.type = 'Element';
 				}
@@ -1570,7 +1630,7 @@ function RipplePlugin(config) {
 					}
 				}
 
-				if (!is_tsx_compat) {
+				if (!is_tsx_compat && !is_tsx) {
 					/** @type {AST.Element} */ (element).id = /** @type {AST.Identifier} */ (
 						convert_from_jsx(/** @type {ESTreeJSX.JSXIdentifier} */ (open.name))
 					);
@@ -1740,6 +1800,7 @@ function RipplePlugin(config) {
 						const insideTemplate =
 							parent?.type === 'Component' ||
 							parent?.type === 'Element' ||
+							parent?.type === 'Tsx' ||
 							parent?.type === 'TsxCompat';
 
 						if (curContext === tstc.tc_expr && !insideTemplate) {
@@ -1752,7 +1813,30 @@ function RipplePlugin(config) {
 						this.parseTemplateBody(/** @type {AST.Element} */ (element).children);
 						this.exitScope();
 
-						if (element.type === 'TsxCompat') {
+						if (element.type === 'Tsx') {
+							this.#path.pop();
+
+							if (!element.unclosed) {
+								const raise_error = () => {
+									this.raise(this.start, `Expected closing tag '</tsx>'`);
+								};
+
+								this.next();
+								// we should expect to see </tsx>
+								if (this.value !== '/') {
+									raise_error();
+								}
+								this.next();
+								if (this.value !== 'tsx') {
+									raise_error();
+								}
+								this.next();
+								if (this.type !== tstt.jsxTagEnd) {
+									raise_error();
+								}
+								this.next();
+							}
+						} else if (element.type === 'TsxCompat') {
 							this.#path.pop();
 
 							if (!element.unclosed) {
@@ -1808,6 +1892,7 @@ function RipplePlugin(config) {
 					const insideTemplate =
 						parent?.type === 'Component' ||
 						parent?.type === 'Element' ||
+						parent?.type === 'Tsx' ||
 						parent?.type === 'TsxCompat';
 
 					if (curContext === tstc.tc_expr && !insideTemplate) {
@@ -1815,7 +1900,7 @@ function RipplePlugin(config) {
 					}
 				}
 
-				if (element.closingElement && !is_tsx_compat) {
+				if (element.closingElement && !is_tsx_compat && !is_tsx) {
 					/** @type {unknown} */ (element.closingElement.name) = convert_from_jsx(
 						element.closingElement.name,
 					);
@@ -1831,6 +1916,7 @@ function RipplePlugin(config) {
 			parseTemplateBody(body) {
 				const inside_func =
 					this.context.some((n) => n.token === 'function') || this.scopeStack.length > 1;
+				const inside_tsx = this.#path.findLast((n) => n.type === 'Tsx');
 				const inside_tsx_compat = this.#path.findLast((n) => n.type === 'TsxCompat');
 
 				if (!inside_func) {
@@ -1842,6 +1928,75 @@ function RipplePlugin(config) {
 					}
 				}
 
+				if (inside_tsx) {
+					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>'. Expected '</tsx>' before end of component.`,
+								);
+							} else {
+								inside_tsx.unclosed = true;
+								/** @type {AST.NodeWithLocation} */ (inside_tsx).loc.end = {
+									.../** @type {AST.SourceLocation} */ (inside_tsx.openingElement.loc).end,
+								};
+								inside_tsx.end = inside_tsx.openingElement.end;
+							}
+							return;
+						}
+
+						if (this.input.slice(this.pos, this.pos + 4) === '/tsx') {
+							const after = this.input.charCodeAt(this.pos + 4);
+							// Make sure it's </tsx> and not </tsx:...>
+							if (after === 62 /* > */) {
+								return;
+							}
+						}
+
+						if (this.type === tt.braceL) {
+							const node = this.jsx_parseExpressionContainer();
+							body.push(node);
+						} else if (this.type === tstt.jsxTagStart) {
+							// Parse JSX element
+							const node = super.parseExpression();
+							body.push(node);
+						} else {
+							const start = this.start;
+							this.pos = start;
+							let text = '';
+
+							while (this.pos < this.input.length) {
+								const ch = this.input.charCodeAt(this.pos);
+
+								// Stop at opening tag, expression, or the component-closing brace
+								if (ch === 60 || ch === 123 || ch === 125) {
+									// < or { or }
+									break;
+								}
+
+								text += this.input[this.pos];
+								this.pos++;
+							}
+
+							if (text) {
+								const node = /** @type {ESTreeJSX.JSXText} */ ({
+									type: 'JSXText',
+									value: text,
+									raw: text,
+									start,
+									end: this.pos,
+								});
+								body.push(node);
+							}
+
+							// Always call next() to ensure parser makes progress
+							this.next();
+						}
+					}
+				}
 				if (inside_tsx_compat) {
 					this.exprAllowed = true;
 
@@ -1909,12 +2064,13 @@ function RipplePlugin(config) {
 				if (this.type === tt.braceL) {
 					const node = this.jsx_parseExpressionContainer();
 					// Keep JSXEmptyExpression as-is (for prettier to handle comments)
-					// but convert other expressions to Text/Html nodes
+					// but convert other expressions to Html/RippleExpression/Text nodes
 					if (node.expression.type !== 'JSXEmptyExpression') {
-						/** @type {AST.Html | AST.TextNode} */ (/** @type {unknown} */ (node)).type = node.html
-							? 'Html'
-							: 'Text';
+						/** @type {AST.RippleExpression | AST.Html | AST.TextNode} */ (
+							/** @type {unknown} */ (node)
+						).type = node.html ? 'Html' : node.text ? 'Text' : 'RippleExpression';
 						delete node.html;
+						delete node.text;
 					}
 					body.push(node);
 				} else if (this.type === tt.braceR) {
@@ -1944,7 +2100,9 @@ function RipplePlugin(config) {
 						const currentElement = this.#path[this.#path.length - 1];
 						if (
 							!currentElement ||
-							(currentElement.type !== 'Element' && currentElement.type !== 'TsxCompat')
+							(currentElement.type !== 'Element' &&
+								currentElement.type !== 'Tsx' &&
+								currentElement.type !== 'TsxCompat')
 						) {
 							this.raise(this.start, 'Unexpected closing tag');
 						}
@@ -1960,6 +2118,12 @@ function RipplePlugin(config) {
 								closingElement.name?.type === 'JSXNamespacedName'
 									? closingElement.name.namespace.name + ':' + closingElement.name.name.name
 									: this.getElementName(closingElement.name);
+						} else if (currentElement.type === 'Tsx') {
+							openingTagName = 'tsx';
+							closingTagName =
+								closingElement.name?.type === 'JSXNamespacedName'
+									? closingElement.name.namespace.name + ':' + closingElement.name.name.name
+									: this.getElementName(closingElement.name);
 						} else {
 							// Regular Element node
 							openingTagName = this.getElementName(currentElement.id);
@@ -1981,12 +2145,16 @@ function RipplePlugin(config) {
 									const elem = this.#path[this.#path.length - 1];
 
 									// Stop at non-Element boundaries (Component, etc.)
-									if (elem.type !== 'Element' && elem.type !== 'TsxCompat') {
+									if (elem.type !== 'Element' && elem.type !== 'Tsx' && elem.type !== 'TsxCompat') {
 										break;
 									}
 
 									const elemName =
-										elem.type === 'TsxCompat' ? 'tsx:' + elem.kind : this.getElementName(elem.id);
+										elem.type === 'TsxCompat'
+											? 'tsx:' + elem.kind
+											: elem.type === 'Tsx'
+												? 'tsx'
+												: this.getElementName(elem.id);
 
 									// Found matching opening tag
 									if (elemName === closingTagName) {
@@ -2050,12 +2218,16 @@ function RipplePlugin(config) {
 					this.context.some((c) => c === tstc.tc_expr)
 				) {
 					const node = this.jsx_parseExpressionContainer();
-					// Keep JSXEmptyExpression as-is (don't convert to Text)
+					// Keep JSXEmptyExpression as-is (don't convert to RippleExpression/Text/Html)
 					if (node.expression.type !== 'JSXEmptyExpression') {
-						/** @type {AST.TextNode} */ (/** @type {unknown} */ (node)).type = 'Text';
+						/** @type {AST.RippleExpression | AST.Html | AST.TextNode} */ (
+							/** @type {unknown} */ (node)
+						).type = node.html ? 'Html' : node.text ? 'Text' : 'RippleExpression';
+						delete node.html;
+						delete node.text;
 					}
 
-					return /** @type {ESTreeJSX.JSXEmptyExpression | AST.TextNode | ESTreeJSX.JSXExpressionContainer} */ (
+					return /** @type {ESTreeJSX.JSXEmptyExpression | AST.RippleExpression | AST.Html | AST.TextNode | ESTreeJSX.JSXExpressionContainer} */ (
 						/** @type {unknown} */ (node)
 					);
 				}