ripple 0.2.207 → 0.2.210

package/CHANGELOG.md

@@ -0,0 +1,43 @@
+# ripple
+
+## 0.2.210
+
+### Patch Changes
+
+- Fix npm OIDC publishing workflow
+
+- Updated dependencies []:
+  - ripple@0.2.210
+
+## 0.2.209
+
+### Patch Changes
+
+- [#682](https://github.com/Ripple-TS/ripple/pull/682)
+  [`96a5614`](https://github.com/Ripple-TS/ripple/commit/96a56141de8aa667a64bf53ad06f63292e38b1d9)
+  Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Add
+  invalid HTML nesting error detection during SSR in dev mode
+
+  During SSR, if the HTML is malformed (e.g., `<button>` elements nested inside
+  other `<button>` elements), the browser tries to repair the HTML, making
+  hydration impossible. This change adds runtime validation of HTML nesting during
+  SSR to detect these cases and provide clear error messages.
+  - Added `push_element` and `pop_element` functions to the server runtime that
+    track the element stack during SSR
+  - Added comprehensive HTML nesting validation rules based on the HTML spec
+  - The server compiler now emits `push_element`/`pop_element` calls when the
+    `dev` option is enabled
+  - Added `dev` option to `CompileOptions`
+  - The Vite plugin now automatically enables dev mode during `vite dev` (serve
+    command)
+
+- [#683](https://github.com/Ripple-TS/ripple/pull/683)
+  [`ae3aa98`](https://github.com/Ripple-TS/ripple/commit/ae3aa981515f81e62a699497e624dd0c2e3d2c91)
+  Thanks [@WebEferen](https://github.com/WebEferen)! - Fix SSR hydration output
+  for early-return guarded content by emitting hydration block markers around
+  return-guarded regions, and add hydration/server coverage for early return
+  scenarios.
+- Updated dependencies
+  [[`96a5614`](https://github.com/Ripple-TS/ripple/commit/96a56141de8aa667a64bf53ad06f63292e38b1d9),
+  [`ae3aa98`](https://github.com/Ripple-TS/ripple/commit/ae3aa981515f81e62a699497e624dd0c2e3d2c91)]:
+  - ripple@0.2.209

package/README.md

@@ -5,4 +5,5 @@
 
 # What is Ripple?
 
-Ripple is an elegant TypeScript UI framework. To find out more, view [Ripple's Github README](https://github.com/Ripple-TS/ripple).
+Ripple is an elegant TypeScript UI framework. To find out more, view
+[Ripple's Github README](https://github.com/Ripple-TS/ripple).

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.207",
+  "version": "0.2.210",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -55,10 +55,6 @@
     "./internal/server": {
       "default": "./src/runtime/internal/server/index.js"
     },
-    "./ssr": {
-      "types": "./types/index.d.ts",
-      "default": "./src/runtime/index-server.js"
-    },
     "./jsx-runtime": {
       "types": "./src/jsx-runtime.d.ts",
       "import": "./src/jsx-runtime.js",
@@ -97,6 +93,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.207"
+    "ripple": "0.2.210"
   }
 }

package/shims/rollup-estree-types.d.ts

@@ -1,2 +1,2 @@
 // Re-export Rollup module types WITHOUT globals
-export * from "rollup/dist/rollup.js";
+export * from 'rollup/dist/rollup.js';

package/src/compiler/index.d.ts

@@ -97,6 +97,7 @@ export interface RippleCompileError extends Error {
 
 interface SharedCompileOptions {
 	minify_css?: boolean;
+	dev?: boolean;
 }
 export interface CompileOptions extends SharedCompileOptions {
 	mode?: 'client' | 'server';

package/src/compiler/index.js

@@ -27,7 +27,13 @@ export function compile(source, filename, options = {}) {
 	const analysis = analyze(ast, filename, options);
 	const result =
 		options.mode === 'server'
-			? transform_server(filename, source, analysis, options?.minify_css ?? false)
+			? transform_server(
+					filename,
+					source,
+					analysis,
+					options?.minify_css ?? false,
+					options?.dev ?? false,
+				)
 			: transform_client(filename, source, analysis, false, options?.minify_css ?? false);
 
 	return result;

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

@@ -109,8 +109,15 @@ function skipWhitespace(parser) {
 	// Update line tracking if whitespace was skipped
 	if (parser.start !== originalStart) {
 		lineInfo = acorn.getLineInfo(parser.input, parser.start);
-		parser.curLine = lineInfo.line;
-		parser.lineStart = parser.start - lineInfo.column;
+		// Only update curLine/lineStart if the tokenizer hasn't already
+		// advanced past this position. When parser.pos > parser.start,
+		// acorn's internal skipSpace() has already processed comments and
+		// whitespace beyond where we stopped, so curLine/lineStart already
+		// reflect a later (correct) position that we must not overwrite.
+		if (parser.pos <= parser.start) {
+			parser.curLine = lineInfo.line;
+			parser.lineStart = parser.start - lineInfo.column;
+		}
 	}
 
 	// After skipping whitespace, update startLoc to reflect our actual position
@@ -2007,8 +2014,12 @@ function RipplePlugin(config) {
 						}
 						if (attr.value !== null) {
 							if (attr.value.type === 'JSXExpressionContainer') {
+								const expression = attr.value.expression;
+								if (expression.type === 'Literal') {
+									expression.was_expression = true;
+								}
 								/** @type {ESTreeJSX.JSXExpressionContainer['expression']} */ (attr.value) =
-									attr.value.expression;
+									expression;
 							}
 						}
 					}
@@ -2274,9 +2285,6 @@ function RipplePlugin(config) {
 				const inside_tsx_compat = this.#path.findLast((n) => n.type === 'TsxCompat');
 
 				if (!inside_func) {
-					if (this.type.label === 'return') {
-						throw new Error('`return` statements are not allowed in components');
-					}
 					if (this.type.label === 'continue') {
 						throw new Error('`continue` statements are not allowed in components');
 					}
@@ -3158,6 +3166,7 @@ export function parse(source, filename, options) {
 		ast = parser.parse(source, {
 			sourceType: 'module',
 			ecmaVersion: 13,
+			allowReturnOutsideFunction: true,
 			locations: true,
 			onComment,
 			rippleOptions: {

package/src/compiler/phases/2-analyze/css-analyze.js

@@ -39,126 +39,122 @@ function is_global(relative_selector) {
  * @param {AST.CSS.Node} css - The CSS AST
  */
 export function analyze_css(css) {
-	walk(
-		css,
-		/** @type {{ rule: AST.CSS.Rule | null }} */ ({ rule: null }),
-		{
-			Rule(node, context) {
-				node.metadata.parent_rule = context.state.rule;
-
-				// Check for :global blocks
-				// A global block is when the selector starts with :global and has no local selectors before it
-				for (const complex_selector of node.prelude.children) {
-					let is_global_block = false;
-
-					for (
-						let selector_idx = 0;
-						selector_idx < complex_selector.children.length;
-						selector_idx++
-					) {
-						const child = complex_selector.children[selector_idx];
-						const idx = child.selectors.findIndex(is_global_block_selector);
+	walk(css, /** @type {{ rule: AST.CSS.Rule | null }} */ ({ rule: null }), {
+		Rule(node, context) {
+			node.metadata.parent_rule = context.state.rule;
+
+			// Check for :global blocks
+			// A global block is when the selector starts with :global and has no local selectors before it
+			for (const complex_selector of node.prelude.children) {
+				let is_global_block = false;
+
+				for (
+					let selector_idx = 0;
+					selector_idx < complex_selector.children.length;
+					selector_idx++
+				) {
+					const child = complex_selector.children[selector_idx];
+					const idx = child.selectors.findIndex(is_global_block_selector);
 
-						if (is_global_block) {
-							// All selectors after :global are unscoped
-							child.metadata.is_global_like = true;
-						}
+					if (is_global_block) {
+						// All selectors after :global are unscoped
+						child.metadata.is_global_like = true;
+					}
 
-						// Only set is_global_block if this is the FIRST RelativeSelector and it starts with :global
-						if (selector_idx === 0 && idx === 0) {
-							// `child` starts with `:global` and is the first selector in the chain
-							is_global_block = true;
-							node.metadata.is_global_block = is_global_block;
-						} else if (idx === 0) {
-							// :global appears later in the selector chain (e.g., `div :global p`)
-							// Set is_global_block for marking subsequent selectors as global-like
-							is_global_block = true;
-						} else if (idx !== -1) {
-							// `:global` is not at the start - this is invalid but we'll let it through for now
-							// The transform phase will handle removal
-						}
+					// Only set is_global_block if this is the FIRST RelativeSelector and it starts with :global
+					if (selector_idx === 0 && idx === 0) {
+						// `child` starts with `:global` and is the first selector in the chain
+						is_global_block = true;
+						node.metadata.is_global_block = is_global_block;
+					} else if (idx === 0) {
+						// :global appears later in the selector chain (e.g., `div :global p`)
+						// Set is_global_block for marking subsequent selectors as global-like
+						is_global_block = true;
+					} else if (idx !== -1) {
+						// `:global` is not at the start - this is invalid but we'll let it through for now
+						// The transform phase will handle removal
 					}
 				}
+			}
 
-				// Pass the current rule as state to nested nodes
-				const state = { rule: node };
-				context.visit(node.prelude, state);
-				context.visit(node.block, state);
-			},
+			// Pass the current rule as state to nested nodes
+			const state = { rule: node };
+			context.visit(node.prelude, state);
+			context.visit(node.block, state);
+		},
 
-			ComplexSelector(node, context) {
-				// Set the rule metadata before analyzing children
-				node.metadata.rule = context.state.rule;
+		ComplexSelector(node, context) {
+			// Set the rule metadata before analyzing children
+			node.metadata.rule = context.state.rule;
 
-				context.next(); // analyze relevant selectors first
+			context.next(); // analyze relevant selectors first
 
-				{
-					const global = node.children.find(is_global);
+			{
+				const global = node.children.find(is_global);
 
-					if (global) {
-						const is_nested = context.path.at(-2)?.type === 'PseudoClassSelector';
-						if (
-							is_nested &&
-							!(/** @type {AST.CSS.PseudoClassSelector} */ (global.selectors[0]).args)
-						) {
-							throw new Error(`A :global selector cannot be inside a pseudoclass.`);
-						}
+				if (global) {
+					const is_nested = context.path.at(-2)?.type === 'PseudoClassSelector';
+					if (
+						is_nested &&
+						!(/** @type {AST.CSS.PseudoClassSelector} */ (global.selectors[0]).args)
+					) {
+						throw new Error(`A :global selector cannot be inside a pseudoclass.`);
+					}
 
-						const idx = node.children.indexOf(global);
-						const first = /** @type {AST.CSS.PseudoClassSelector} */ (global.selectors[0]);
-						if (first.args !== null && idx !== 0 && idx !== node.children.length - 1) {
-							// ensure `:global(...)` is not used in the middle of a selector (but multiple `global(...)` in sequence are ok)
-							for (let i = idx + 1; i < node.children.length; i++) {
-								if (!is_global(node.children[i])) {
-									throw new Error(
-										`:global(...) can be at the start or end of a selector sequence, but not in the middle.`,
-									);
-								}
+					const idx = node.children.indexOf(global);
+					const first = /** @type {AST.CSS.PseudoClassSelector} */ (global.selectors[0]);
+					if (first.args !== null && idx !== 0 && idx !== node.children.length - 1) {
+						// ensure `:global(...)` is not used in the middle of a selector (but multiple `global(...)` in sequence are ok)
+						for (let i = idx + 1; i < node.children.length; i++) {
+							if (!is_global(node.children[i])) {
+								throw new Error(
+									`:global(...) can be at the start or end of a selector sequence, but not in the middle.`,
+								);
 							}
 						}
 					}
 				}
+			}
 
-				// Set is_global metadata
-				node.metadata.is_global = node.children.every(
-					({ metadata }) => metadata.is_global || metadata.is_global_like,
-				);
-
-				node.metadata.used ||= node.metadata.is_global;
-			},
-
-			PseudoClassSelector(node, context) {
-				// Walk into :is(), :where(), :has(), and :not() to initialize metadata for nested selectors
-				if (
-					(node.name === 'is' ||
-						node.name === 'where' ||
-						node.name === 'has' ||
-						node.name === 'not') &&
-					node.args
-				) {
-					context.next();
-				}
-			},
-			RelativeSelector(node, context) {
-				// Check if this selector is a :global selector
-				node.metadata.is_global = node.selectors.length >= 1 && is_global(node);
-
-				// Check for :root and other global-like selectors
-				if (
-					node.selectors.length >= 1 &&
-					node.selectors.every(
-						(selector) =>
-							selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector',
-					)
-				) {
-					const first = node.selectors[0];
-					node.metadata.is_global_like ||=
-						(first.type === 'PseudoClassSelector' && first.name === 'host') ||
-						(first.type === 'PseudoClassSelector' && first.name === 'root');
-				}
+			// Set is_global metadata
+			node.metadata.is_global = node.children.every(
+				({ metadata }) => metadata.is_global || metadata.is_global_like,
+			);
 
+			node.metadata.used ||= node.metadata.is_global;
+		},
+
+		PseudoClassSelector(node, context) {
+			// Walk into :is(), :where(), :has(), and :not() to initialize metadata for nested selectors
+			if (
+				(node.name === 'is' ||
+					node.name === 'where' ||
+					node.name === 'has' ||
+					node.name === 'not') &&
+				node.args
+			) {
 				context.next();
-			},
+			}
 		},
-	);
+		RelativeSelector(node, context) {
+			// Check if this selector is a :global selector
+			node.metadata.is_global = node.selectors.length >= 1 && is_global(node);
+
+			// Check for :root and other global-like selectors
+			if (
+				node.selectors.length >= 1 &&
+				node.selectors.every(
+					(selector) =>
+						selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector',
+				)
+			) {
+				const first = node.selectors[0];
+				node.metadata.is_global_like ||=
+					(first.type === 'PseudoClassSelector' && first.name === 'host') ||
+					(first.type === 'PseudoClassSelector' && first.name === 'root');
+			}
+
+			context.next();
+		},
+	});
 }

package/src/compiler/phases/2-analyze/index.js

@@ -109,6 +109,113 @@ function mark_as_tracked(path) {
 	}
 }
 
+/**
+ * @param {AST.ReturnStatement} node
+ * @returns {AST.ReturnStatement}
+ */
+function get_return_keyword_node(node) {
+	const return_keyword_length = 'return'.length;
+	return /** @type {AST.ReturnStatement} */ ({
+		...node,
+		end: /** @type {AST.NodeWithLocation} */ (node).start + return_keyword_length,
+		loc: {
+			start: /** @type {AST.NodeWithLocation} */ (node).loc.start,
+			end: {
+				line: /** @type {AST.NodeWithLocation} */ (node).loc.start.line,
+				column: /** @type {AST.NodeWithLocation} */ (node).loc.start.column + return_keyword_length,
+			},
+		},
+	});
+}
+
+/**
+ * @param {AST.ReturnStatement} node
+ * @param {AnalysisContext} context
+ * @param {string} message
+ */
+function error_return_keyword(node, context, message) {
+	const return_keyword_node = get_return_keyword_node(node);
+
+	error(
+		message,
+		context.state.analysis.module.filename,
+		return_keyword_node,
+		context.state.loose ? context.state.analysis.errors : undefined,
+	);
+}
+
+/**
+ * @param {AST.Expression} expression
+ * @returns {AST.Expression}
+ */
+function unwrap_template_expression(expression) {
+	/** @type {AST.Expression} */
+	let node = expression;
+
+	while (true) {
+		if (
+			node.type === 'ParenthesizedExpression' ||
+			node.type === 'TSAsExpression' ||
+			node.type === 'TSSatisfiesExpression' ||
+			node.type === 'TSNonNullExpression' ||
+			node.type === 'TSInstantiationExpression'
+		) {
+			node = /** @type {AST.Expression} */ (node.expression);
+			continue;
+		}
+
+		if (node.type === 'ChainExpression') {
+			node = /** @type {AST.Expression} */ (node.expression);
+			continue;
+		}
+
+		break;
+	}
+
+	return node;
+}
+
+/**
+ * @param {AST.Expression} expression
+ * @param {AnalysisState} state
+ * @returns {boolean}
+ */
+function is_children_template_expression(expression, state) {
+	const unwrapped = unwrap_template_expression(expression);
+
+	if (unwrapped.type === 'TrackedExpression') {
+		return is_children_template_expression(
+			/** @type {AST.Expression} */ (unwrapped.argument),
+			state,
+		);
+	}
+
+	if (unwrapped.type === 'MemberExpression') {
+		let property_name = null;
+
+		if (!unwrapped.computed && unwrapped.property.type === 'Identifier') {
+			property_name = unwrapped.property.name;
+		} else if (
+			unwrapped.computed &&
+			unwrapped.property.type === 'Literal' &&
+			typeof unwrapped.property.value === 'string'
+		) {
+			property_name = unwrapped.property.value;
+		}
+
+		if (property_name === 'children') {
+			const target = unwrap_template_expression(/** @type {AST.Expression} */ (unwrapped.object));
+
+			if (target.type === 'Identifier') {
+				const binding = state.scope.get(target.name);
+				return binding?.declaration_kind === 'param';
+			}
+		}
+	}
+
+	return unwrapped.type === 'Identifier' && unwrapped.name === 'children';
+}
+
 /** @type {Visitors<AST.Node, AnalysisState>} */
 const visitors = {
 	_(node, { state, next, path }) {
@@ -128,6 +235,14 @@ const visitors = {
 	},
 
 	ServerBlock(node, context) {
+		if (context.path.at(-1)?.type !== 'Program') {
+			// fatal since we don't have a transformation defined for this case
+			error(
+				'`#server` block can only be declared at the module level.',
+				context.state.analysis.module.filename,
+				node,
+			);
+		}
 		node.metadata = {
 			...node.metadata,
 			exports: new Set(),
@@ -331,6 +446,13 @@ const visitors = {
 		context.next();
 	},
 
+	NewExpression(node, context) {
+		if (context.state.metadata?.tracking === false) {
+			context.state.metadata.tracking = true;
+		}
+		context.next();
+	},
+
 	VariableDeclaration(node, context) {
 		const { state, visit } = context;
 
@@ -732,9 +854,26 @@ const visitors = {
 			has_await: false,
 		};
 
+		const test_metadata = { tracking: false };
+		context.visit(node.test, { ...context.state, metadata: test_metadata });
+		if (test_metadata.tracking) {
+			/** @type {AST.TrackedNode} */ (node.test).tracked = true;
+		}
+
 		context.visit(node.consequent, context.state);
 
-		if (!node.metadata.has_template) {
+		const consequent_body =
+			node.consequent.type === 'BlockStatement' ? node.consequent.body : [node.consequent];
+
+		if (
+			consequent_body.length === 1 &&
+			consequent_body[0].type === 'ReturnStatement' &&
+			!node.alternate
+		) {
+			node.metadata.lone_return = true;
+		}
+
+		if (!node.metadata.has_template && !node.metadata.has_return) {
 			error(
 				'Component if statements must contain a template in their "then" body. Move the if statement into an effect if it does not render anything.',
 				context.state.analysis.module.filename,
@@ -744,11 +883,13 @@ const visitors = {
 		}
 
 		if (node.alternate) {
+			const saved_has_return = node.metadata.has_return;
+			const saved_returns = node.metadata.returns;
 			node.metadata.has_template = false;
 			node.metadata.has_await = false;
 			context.visit(node.alternate, context.state);
 
-			if (!node.metadata.has_template) {
+			if (!node.metadata.has_template && !node.metadata.has_return) {
 				error(
 					'Component if statements must contain a template in their "else" body. Move the if statement into an effect if it does not render anything.',
 					context.state.analysis.module.filename,
@@ -756,6 +897,63 @@ const visitors = {
 					context.state.loose ? context.state.analysis.errors : undefined,
 				);
 			}
+
+			if (saved_has_return) {
+				node.metadata.has_return = true;
+				if (saved_returns) {
+					node.metadata.returns = [...saved_returns, ...(node.metadata.returns || [])];
+				}
+			}
+		}
+	},
+
+	ReturnStatement(node, context) {
+		const parent = context.path.at(-1);
+
+		if (!is_inside_component(context)) {
+			if (parent?.type === 'Program') {
+				error_return_keyword(
+					node,
+					context,
+					'Return statements are not allowed at the top level of a module.',
+				);
+			}
+
+			return context.next();
+		}
+
+		if (node.argument !== null) {
+			error_return_keyword(
+				node,
+				context,
+				'Return statements inside components cannot have a return value.',
+			);
+		}
+
+		for (let i = context.path.length - 1; i >= 0; i--) {
+			const ancestor = context.path[i];
+
+			if (
+				ancestor.type === 'Component' ||
+				ancestor.type === 'FunctionExpression' ||
+				ancestor.type === 'ArrowFunctionExpression' ||
+				ancestor.type === 'FunctionDeclaration'
+			) {
+				break;
+			}
+
+			if (
+				ancestor.type === 'IfStatement' &&
+				/** @type {AST.TrackedNode} */ (ancestor.test).tracked
+			) {
+				node.metadata.is_reactive = true;
+			}
+
+			if (!ancestor.metadata.returns) {
+				ancestor.metadata.returns = [];
+			}
+			ancestor.metadata.returns.push(node);
+			ancestor.metadata.has_return = true;
 		}
 	},
 
@@ -1092,6 +1290,21 @@ const visitors = {
 
 	Text(node, context) {
 		mark_control_flow_has_template(context.path);
+
+		if (
+			is_children_template_expression(
+				/** @type {AST.Expression} */ (node.expression),
+				context.state,
+			)
+		) {
+			error(
+				'`children` cannot be rendered using text interpolation. Use `<children />` instead.',
+				context.state.analysis.module.filename,
+				node.expression,
+				context.state.loose ? context.state.analysis.errors : undefined,
+			);
+		}
+
 		context.next();
 	},