@tsrx/core 0.1.7 → 0.1.9

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core compiler infrastructure for TSRX syntax",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "repository": {
     "type": "git",
@@ -64,7 +64,7 @@
     "@types/estree-jsx": "^1.0.5",
     "@types/estree": "^1.0.8",
     "acorn": "^8.15.0",
-    "esrap": "^2.2.7",
+    "esrap": "^2.2.8",
     "is-reference": "^3.0.3",
     "magic-string": "^0.30.18",
     "zimmerframe": "^1.1.2"
@@ -82,10 +82,10 @@
     "vscode-languageserver-types": "^3.17.5",
     "vue": "3.6.0-beta.10",
     "vue-jsx-vapor": "^3.2.12",
-    "@tsrx/preact": "0.1.7",
-    "@tsrx/react": "0.2.7",
-    "@tsrx/solid": "0.1.7",
-    "@tsrx/vue": "0.1.7"
+    "@tsrx/preact": "0.1.9",
+    "@tsrx/react": "0.2.9",
+    "@tsrx/solid": "0.1.9",
+    "@tsrx/vue": "0.1.9"
   },
   "files": [
     "src",

package/src/diagnostics.js

@@ -5,4 +5,5 @@ export const DIAGNOSTIC_CODES = {
 	UNCLOSED_TAG: 'tsrx-unclosed-tag',
 	MISMATCHED_CLOSING_TAG: 'tsrx-mismatched-closing-tag',
 	TEMPLATE_EXPRESSION_TRAILING_SEMICOLON: 'tsrx-template-expression-trailing-semicolon',
+	HTML_DIRECTIVE_AS_ATTRIBUTE_VALUE: 'tsrx-html-directive-as-attribute-value',
 };

package/src/index.js

@@ -146,14 +146,21 @@ export {
 	clone_switch_helper_invocation as cloneSwitchHelperInvocation,
 	collect_param_bindings as collectParamBindings,
 	collect_statement_bindings as collectStatementBindings,
+	create_host_html_attribute as createHostHtmlAttribute,
+	create_host_html_conflict_error as createHostHtmlConflictError,
 	createJsxTransform,
 	CREATE_REF_PROP_INTERNAL_NAME,
 	extract_jsx_setup_declarations as extractJsxSetupDeclarations,
+	get_host_html_conflicting_attribute as getHostHtmlConflictingAttribute,
+	get_invalid_html_child_error_message as getInvalidHtmlChildErrorMessage,
+	is_component_like_element,
 	is_ref_prop_expression as isRefPropExpression,
 	MERGE_REFS_INTERNAL_NAME,
 	merge_duplicate_refs as mergeDuplicateRefs,
 	NORMALIZE_SPREAD_PROPS_INTERNAL_NAME,
 	plan_switch_lift as planSwitchLift,
+	recover_invalid_html_child as recoverInvalidHtmlChild,
+	rewrite_host_html_children as rewriteHostHtmlChildren,
 	return_value_body_to_expression as returnValueBodyToExpression,
 	rewrite_loop_continues_to_bare_returns as rewriteLoopContinuesToBareReturns,
 	to_jsx_attribute as toJsxAttribute,

package/src/plugin.js

@@ -19,6 +19,41 @@ import { DIAGNOSTIC_CODES } from './diagnostics.js';
 
 const JSX_EXPRESSION_VALUE_ERROR =
 	'JSX elements cannot be used as expressions. Wrap JSX with `<>...</>` or `<tsx>...</tsx>`, wrap TSRX templates with `<tsrx>...</tsrx>`, or use elements as statements within a component.';
+const HTML_ATTRIBUTE_VALUE_ERROR =
+	'`{html ...}` is not supported as an attribute value. Use a string literal or expression without `html`.';
+
+const CharCode = Object.freeze({
+	tab: 9,
+	lineFeed: 10,
+	carriageReturn: 13,
+	space: 32,
+	doubleQuote: 34,
+	dollar: 36,
+	ampersand: 38,
+	singleQuote: 39,
+	openParen: 40,
+	closeParen: 41,
+	asterisk: 42,
+	slash: 47,
+	colon: 58,
+	semicolon: 59,
+	lessThan: 60,
+	equals: 61,
+	greaterThan: 62,
+	at: 64,
+	digit0: 48,
+	digit9: 57,
+	uppercaseA: 65,
+	uppercaseZ: 90,
+	openBracket: 91,
+	backslash: 92,
+	underscore: 95,
+	backtick: 96,
+	lowercaseA: 97,
+	lowercaseZ: 122,
+	openBrace: 123,
+	closeBrace: 125,
+});
 
 /** @type {WeakMap<Record<string, boolean>, Map<string, number>>} */
 const argument_clash_first_positions = new WeakMap();
@@ -58,7 +93,13 @@ function get_argument_clash_reported_names(check_clashes) {
 function skip_whitespace_from(input, i) {
 	while (i < input.length) {
 		const ch = input.charCodeAt(i);
-		if (ch !== 32 && ch !== 9 && ch !== 10 && ch !== 13) break;
+		if (
+			ch !== CharCode.space &&
+			ch !== CharCode.tab &&
+			ch !== CharCode.lineFeed &&
+			ch !== CharCode.carriageReturn
+		)
+			break;
 		i++;
 	}
 	return i;
@@ -75,7 +116,7 @@ function skip_string_from(input, i, quote) {
 	while (i < input.length) {
 		const ch = input.charCodeAt(i);
 		i++;
-		if (ch === 92)
+		if (ch === CharCode.backslash)
 			i++; // backslash escape
 		else if (ch === quote) return i;
 	}
@@ -95,7 +136,7 @@ function scan_balanced_from(input, i, open, close) {
 	i++;
 	while (i < input.length) {
 		const ch = input.charCodeAt(i);
-		if (ch === 34 || ch === 39 || ch === 96) {
+		if (ch === CharCode.doubleQuote || ch === CharCode.singleQuote || ch === CharCode.backtick) {
 			i = skip_string_from(input, i, ch);
 			continue;
 		}
@@ -114,47 +155,50 @@ function scan_balanced_from(input, i, open, close) {
  * @param {number} pos
  */
 function looks_like_generic_arrow(input, pos) {
-	if (input.charCodeAt(pos) !== 60) return false;
+	if (input.charCodeAt(pos) !== CharCode.lessThan) return false;
 
 	// Match the angle brackets, skipping over string literals.
 	let i = pos + 1;
 	let depth = 1;
 	while (i < input.length) {
 		const ch = input.charCodeAt(i);
-		if (ch === 34 || ch === 39 || ch === 96) {
+		if (ch === CharCode.doubleQuote || ch === CharCode.singleQuote || ch === CharCode.backtick) {
 			i = skip_string_from(input, i, ch);
 			continue;
 		}
-		if (ch === 60) depth++;
-		else if (ch === 62 && --depth === 0) break;
+		if (ch === CharCode.lessThan) depth++;
+		else if (ch === CharCode.greaterThan && --depth === 0) break;
 		i++;
 	}
 	if (depth !== 0) return false;
 
 	// `>` must be followed by `(...)`.
 	i = skip_whitespace_from(input, i + 1);
-	if (input.charCodeAt(i) !== 40) return false;
-	i = scan_balanced_from(input, i, 40, 41);
+	if (input.charCodeAt(i) !== CharCode.openParen) return false;
+	i = scan_balanced_from(input, i, CharCode.openParen, CharCode.closeParen);
 	if (i === -1) return false;
 
 	// Optional `: ReturnType` before `=>`.
 	i = skip_whitespace_from(input, i);
-	if (input.charCodeAt(i) === 58) {
+	if (input.charCodeAt(i) === CharCode.colon) {
 		i++;
 		while (i < input.length) {
 			const ch = input.charCodeAt(i);
-			if (ch === 34 || ch === 39 || ch === 96) {
+			if (ch === CharCode.doubleQuote || ch === CharCode.singleQuote || ch === CharCode.backtick) {
 				i = skip_string_from(input, i, ch);
 				continue;
 			}
-			if (ch === 61 && input.charCodeAt(i + 1) === 62) return true;
-			if (ch === 59 || ch === 123 || ch === 125) return false;
+			if (ch === CharCode.equals && input.charCodeAt(i + 1) === CharCode.greaterThan) return true;
+			if (ch === CharCode.semicolon || ch === CharCode.openBrace || ch === CharCode.closeBrace)
+				return false;
 			i++;
 		}
 		return false;
 	}
 
-	return input.charCodeAt(i) === 61 && input.charCodeAt(i + 1) === 62;
+	return (
+		input.charCodeAt(i) === CharCode.equals && input.charCodeAt(i + 1) === CharCode.greaterThan
+	);
 }
 
 /**
@@ -176,7 +220,13 @@ function previous_word_before(input, pos) {
 	let i = pos - 1;
 	while (i >= 0) {
 		const ch = input.charCodeAt(i);
-		if (ch !== 32 && ch !== 9 && ch !== 10 && ch !== 13) break;
+		if (
+			ch !== CharCode.space &&
+			ch !== CharCode.tab &&
+			ch !== CharCode.lineFeed &&
+			ch !== CharCode.carriageReturn
+		)
+			break;
 		i--;
 	}
 	const end = i + 1;
@@ -266,7 +316,12 @@ export function TSRXPlugin(config) {
 				let index = this.pos - 1;
 				while (index >= 0) {
 					const ch = this.input.charCodeAt(index);
-					if (ch !== 32 && ch !== 9 && ch !== 10 && ch !== 13) {
+					if (
+						ch !== CharCode.space &&
+						ch !== CharCode.tab &&
+						ch !== CharCode.lineFeed &&
+						ch !== CharCode.carriageReturn
+					) {
 						return ch;
 					}
 					index--;
@@ -454,7 +509,7 @@ export function TSRXPlugin(config) {
 				}
 
 				const after = this.input.charCodeAt(this.pos + 4);
-				return after === 62 /* > */;
+				return after === CharCode.greaterThan;
 			}
 
 			#parseTsxIslandText() {
@@ -466,7 +521,7 @@ export function TSRXPlugin(config) {
 					const ch = this.input.charCodeAt(this.pos);
 
 					// Stop at opening tag, expression, or the component-closing brace
-					if (ch === 60 || ch === 123 || ch === 125) {
+					if (ch === CharCode.lessThan || ch === CharCode.openBrace || ch === CharCode.closeBrace) {
 						break;
 					}
 
@@ -496,24 +551,27 @@ export function TSRXPlugin(config) {
 				// fragment props like `content={<></>}` still need the JSX context.
 				while (index < this.input.length) {
 					const ch = this.input.charCodeAt(index);
-					if (ch === 32 || ch === 9) {
+					if (ch === CharCode.space || ch === CharCode.tab) {
 						index++;
-					} else if (ch === 10 || ch === 13) {
+					} else if (ch === CharCode.lineFeed || ch === CharCode.carriageReturn) {
 						has_newline = true;
 						index++;
-					} else if (ch === 47 && this.input.charCodeAt(index + 1) === 42) {
+					} else if (
+						ch === CharCode.slash &&
+						this.input.charCodeAt(index + 1) === CharCode.asterisk
+					) {
 						const end = this.input.indexOf('*/', index + 2);
 						const comment_end = end === -1 ? this.input.length : end + 2;
 						if (this.input.slice(index, comment_end).match(regex_newline_characters)) {
 							has_newline = true;
 						}
 						index = comment_end;
-					} else if (ch === 47 && this.input.charCodeAt(index + 1) === 47) {
+					} else if (ch === CharCode.slash && this.input.charCodeAt(index + 1) === CharCode.slash) {
 						has_newline = true;
 						index += 2;
 						while (index < this.input.length) {
 							const comment_ch = this.input.charCodeAt(index);
-							if (comment_ch === 10 || comment_ch === 13) break;
+							if (comment_ch === CharCode.lineFeed || comment_ch === CharCode.carriageReturn) break;
 							index++;
 						}
 					} else {
@@ -521,7 +579,7 @@ export function TSRXPlugin(config) {
 					}
 				}
 
-				if (!has_newline || this.input.charCodeAt(index) !== 123) {
+				if (!has_newline || this.input.charCodeAt(index) !== CharCode.openBrace) {
 					return;
 				}
 
@@ -544,16 +602,24 @@ export function TSRXPlugin(config) {
 			#skipWhitespaceAndComments(index) {
 				while (index < this.input.length) {
 					const ch = this.input.charCodeAt(index);
-					if (ch === 32 || ch === 9 || ch === 10 || ch === 13) {
+					if (
+						ch === CharCode.space ||
+						ch === CharCode.tab ||
+						ch === CharCode.lineFeed ||
+						ch === CharCode.carriageReturn
+					) {
 						index++;
-					} else if (ch === 47 && this.input.charCodeAt(index + 1) === 42) {
+					} else if (
+						ch === CharCode.slash &&
+						this.input.charCodeAt(index + 1) === CharCode.asterisk
+					) {
 						const end = this.input.indexOf('*/', index + 2);
 						index = end === -1 ? this.input.length : end + 2;
-					} else if (ch === 47 && this.input.charCodeAt(index + 1) === 47) {
+					} else if (ch === CharCode.slash && this.input.charCodeAt(index + 1) === CharCode.slash) {
 						index += 2;
 						while (index < this.input.length) {
 							const comment_ch = this.input.charCodeAt(index);
-							if (comment_ch === 10 || comment_ch === 13) break;
+							if (comment_ch === CharCode.lineFeed || comment_ch === CharCode.carriageReturn) break;
 							index++;
 						}
 					} else {
@@ -569,7 +635,7 @@ export function TSRXPlugin(config) {
 				let count = 0;
 				while (index < this.input.length) {
 					index = this.#skipWhitespaceAndComments(index);
-					if (this.input.charCodeAt(index) !== 125) break;
+					if (this.input.charCodeAt(index) !== CharCode.closeBrace) break;
 					count++;
 					index++;
 				}
@@ -701,11 +767,11 @@ export function TSRXPlugin(config) {
 				const prev = this.#previousNonWhitespaceChar();
 				return (
 					prev === null ||
-					prev === 34 || // "
-					prev === 59 || // ;
-					prev === 62 || // >
-					(prev === 123 && this.#allowDoubleQuotedTextChildAfterBrace) || // {
-					prev === 125 // }
+					prev === CharCode.doubleQuote ||
+					prev === CharCode.semicolon ||
+					prev === CharCode.greaterThan ||
+					(prev === CharCode.openBrace && this.#allowDoubleQuotedTextChildAfterBrace) ||
+					prev === CharCode.closeBrace
 				);
 			}
 
@@ -718,13 +784,13 @@ export function TSRXPlugin(config) {
 				while (this.pos < this.input.length) {
 					const ch = this.input.charCodeAt(this.pos);
 
-					if (ch === 34 /* " */) {
+					if (ch === CharCode.doubleQuote) {
 						out += this.input.slice(chunkStart, this.pos);
 						this.pos++;
 						return this.finishToken(tt.string, out);
 					}
 
-					if (ch === 38 /* & */) {
+					if (ch === CharCode.ampersand) {
 						out += this.input.slice(chunkStart, this.pos);
 						out += this.jsx_readEntity();
 						chunkStart = this.pos;
@@ -1050,7 +1116,7 @@ export function TSRXPlugin(config) {
 			 * @type {Parse.Parser['readToken']}
 			 */
 			readToken(code) {
-				if (code === 60 && looks_like_generic_arrow(this.input, this.pos)) {
+				if (code === CharCode.lessThan && looks_like_generic_arrow(this.input, this.pos)) {
 					++this.pos;
 					return this.finishToken(tt.relational, '<');
 				}
@@ -1062,7 +1128,19 @@ export function TSRXPlugin(config) {
 			 * @type {Parse.Parser['getTokenFromCode']}
 			 */
 			getTokenFromCode(code) {
-				if (code === 34) {
+				// Callback props that return `<tsrx>...</tsrx>` without a semicolon can
+				// leave the attribute expression context above the still-open tag. Drop
+				// it before tokenizing `/>`, otherwise Acorn treats `/` as a regexp.
+				if (
+					code === CharCode.slash &&
+					this.input.charCodeAt(this.pos + 1) === CharCode.greaterThan &&
+					this.curContext() === b_expr &&
+					this.context[this.context.length - 2] === tstc.tc_oTag
+				) {
+					this.context.pop();
+					this.exprAllowed = false;
+				}
+				if (code === CharCode.doubleQuote) {
 					const is_double_quoted_text_child = this.#isDoubleQuotedTextChildStart();
 					this.#allowDoubleQuotedTextChildAfterBrace = false;
 					if (is_double_quoted_text_child) {
@@ -1072,11 +1150,11 @@ export function TSRXPlugin(config) {
 					this.#allowDoubleQuotedTextChildAfterBrace = false;
 				}
 
-				if (code !== 60) {
+				if (code !== CharCode.lessThan) {
 					this.#allowTagStartAfterDoubleQuotedText = false;
 				}
 
-				if (code === 60) {
+				if (code === CharCode.lessThan) {
 					// < character
 					const inComponent = this.#isInsideComponentTemplate();
 					/** @type {number | null} */
@@ -1093,7 +1171,7 @@ export function TSRXPlugin(config) {
 					// Skip whitespace backwards
 					while (lookback >= 0) {
 						const ch = this.input.charCodeAt(lookback);
-						if (ch !== 32 && ch !== 9) break; // not space or tab
+						if (ch !== CharCode.space && ch !== CharCode.tab) break; // not space or tab
 						lookback--;
 					}
 
@@ -1105,12 +1183,12 @@ export function TSRXPlugin(config) {
 						// If preceded by identifier character (letter, digit, _, $) or closing paren,
 						// this is likely TypeScript generics, not JSX
 						const isIdentifierChar =
-							(prevChar >= 65 && prevChar <= 90) || // A-Z
-							(prevChar >= 97 && prevChar <= 122) || // a-z
-							(prevChar >= 48 && prevChar <= 57) || // 0-9
-							prevChar === 95 || // _
-							prevChar === 36 || // $
-							prevChar === 41; // )
+							(prevChar >= CharCode.uppercaseA && prevChar <= CharCode.uppercaseZ) ||
+							(prevChar >= CharCode.lowercaseA && prevChar <= CharCode.lowercaseZ) ||
+							(prevChar >= CharCode.digit0 && prevChar <= CharCode.digit9) ||
+							prevChar === CharCode.underscore ||
+							prevChar === CharCode.dollar ||
+							prevChar === CharCode.closeParen;
 
 						if (isIdentifierChar) {
 							return super.getTokenFromCode(code);
@@ -1125,23 +1203,26 @@ export function TSRXPlugin(config) {
 					const nextChar =
 						this.pos + 1 < this.input.length ? this.input.charCodeAt(this.pos + 1) : -1;
 					const isWhitespaceAfterLt =
-						nextChar === 32 || nextChar === 9 || nextChar === 10 || nextChar === 13;
+						nextChar === CharCode.space ||
+						nextChar === CharCode.tab ||
+						nextChar === CharCode.lineFeed ||
+						nextChar === CharCode.carriageReturn;
 					const isTagLikeAfterLt =
 						!isWhitespaceAfterLt &&
-						(nextChar === 47 || // '/'
-							nextChar === 62 || // '>' (fragments: <>)
-							nextChar === 64 || // '@'
-							nextChar === 36 || // '$'
-							nextChar === 95 || // '_'
-							(nextChar >= 65 && nextChar <= 90) || // A-Z
-							(nextChar >= 97 && nextChar <= 122)); // a-z
+						(nextChar === CharCode.slash ||
+							nextChar === CharCode.greaterThan ||
+							nextChar === CharCode.at ||
+							nextChar === CharCode.dollar ||
+							nextChar === CharCode.underscore ||
+							(nextChar >= CharCode.uppercaseA && nextChar <= CharCode.uppercaseZ) ||
+							(nextChar >= CharCode.lowercaseA && nextChar <= CharCode.lowercaseZ));
 					const prevAllowsTagStart =
 						prevNonWhitespaceChar === null ||
-						prevNonWhitespaceChar === 10 || // '\n'
-						prevNonWhitespaceChar === 13 || // '\r'
-						prevNonWhitespaceChar === 123 || // '{'
-						prevNonWhitespaceChar === 125 || // '}'
-						prevNonWhitespaceChar === 62; // '>'
+						prevNonWhitespaceChar === CharCode.lineFeed || // '\n'
+						prevNonWhitespaceChar === CharCode.carriageReturn || // '\r'
+						prevNonWhitespaceChar === CharCode.openBrace ||
+						prevNonWhitespaceChar === CharCode.closeBrace ||
+						prevNonWhitespaceChar === CharCode.greaterThan;
 
 					if (!inComponent && prevAllowsTagStart && isTagLikeAfterLt) {
 						++this.pos;
@@ -1153,10 +1234,10 @@ export function TSRXPlugin(config) {
 						// a newline/indentation before the next '<'. This is important for inputs
 						// like `<div />` and `</div><style>...</style>` which Prettier formats.
 						if (
-							(prevNonWhitespaceChar === 34 /* '"' */ &&
+							(prevNonWhitespaceChar === CharCode.doubleQuote &&
 								this.#allowTagStartAfterDoubleQuotedText) ||
-							prevNonWhitespaceChar === 123 /* '{' */ ||
-							prevNonWhitespaceChar === 62 /* '>' */
+							prevNonWhitespaceChar === CharCode.openBrace ||
+							prevNonWhitespaceChar === CharCode.greaterThan
 						) {
 							if (!isWhitespaceAfterLt) {
 								this.#allowTagStartAfterDoubleQuotedText = false;
@@ -1172,8 +1253,8 @@ export function TSRXPlugin(config) {
 						let lineStart = this.pos - 1;
 						while (
 							lineStart >= 0 &&
-							this.input.charCodeAt(lineStart) !== 10 &&
-							this.input.charCodeAt(lineStart) !== 13
+							this.input.charCodeAt(lineStart) !== CharCode.lineFeed &&
+							this.input.charCodeAt(lineStart) !== CharCode.carriageReturn
 						) {
 							lineStart--;
 						}
@@ -1183,7 +1264,7 @@ export function TSRXPlugin(config) {
 						let allWhitespace = true;
 						for (let i = lineStart; i < this.pos; i++) {
 							const ch = this.input.charCodeAt(i);
-							if (ch !== 32 && ch !== 9) {
+							if (ch !== CharCode.space && ch !== CharCode.tab) {
 								allWhitespace = false;
 								break;
 							}
@@ -1205,7 +1286,7 @@ export function TSRXPlugin(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.
+			 * The `&` character is not in that set, so `let &{...}` would not be parsed as a declaration.
 			 * @type {Parse.Parser['isLet']}
 			 */
 			isLet(context) {
@@ -1217,9 +1298,9 @@ export function TSRXPlugin(config) {
 				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) {
+				if (nextCh === CharCode.ampersand) {
 					const afterAmp = this.input.charCodeAt(next + 1);
-					if (afterAmp === 123 || afterAmp === 91) return true;
+					if (afterAmp === CharCode.openBrace || afterAmp === CharCode.openBracket) return true;
 				}
 				return super.isLet(context);
 			}
@@ -1233,7 +1314,7 @@ export function TSRXPlugin(config) {
 				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) {
+					if (charAfterAmp === CharCode.openBrace || charAfterAmp === CharCode.openBracket) {
 						// & directly followed by { or [ — lazy destructuring
 						this.next(); // consume &, now current token is { or [
 						const pattern = super.parseBindingAtom();
@@ -1890,6 +1971,27 @@ export function TSRXPlugin(config) {
 						/** @type {AST.RefAttribute} */ (node).argument = this.parseMaybeAssign();
 						this.expect(tt.braceR);
 						return /** @type {AST.RefAttribute} */ (this.finishNode(node, 'RefAttribute'));
+					} else if (this.type === tt.name && this.value === 'html') {
+						// {html ...}
+						// The support is purely for better error messages to avoid
+						// the parser throw an unexpected token error
+						const id = /** @type {AST.Identifier} */ (this.parseIdentNode());
+						id.tracked = false;
+						this.finishNode(id, 'Identifier');
+						this.next();
+						const value = this.type === tt.braceR ? id : this.parseMaybeAssign();
+						const report_end = this.type === tt.braceR ? this.end : (value.end ?? this.end);
+						this.#report_recoverable_error_range(
+							node.start ?? id.start ?? this.start,
+							report_end,
+							HTML_ATTRIBUTE_VALUE_ERROR,
+							DIAGNOSTIC_CODES.HTML_DIRECTIVE_AS_ATTRIBUTE_VALUE,
+						);
+						/** @type {AST.Attribute} */ (node).name = id;
+						/** @type {AST.Attribute} */ (node).value = value;
+						/** @type {AST.Attribute} */ (node).shorthand = false;
+						this.expect(tt.braceR);
+						return this.finishNode(node, 'Attribute');
 					} else if (this.type === tt.ellipsis) {
 						this.expect(tt.ellipsis);
 						/** @type {AST.SpreadAttribute} */ (node).argument = this.parseMaybeAssign();
@@ -1913,10 +2015,18 @@ export function TSRXPlugin(config) {
 					}
 				}
 				/** @type {ESTreeJSX.JSXAttribute} */ (node).name = this.jsx_parseNamespacedName();
-				/** @type {ESTreeJSX.JSXAttribute} */ (node).value =
-					/** @type {ESTreeJSX.JSXAttribute['value'] | null} */ (
-						this.eat(tt.eq) ? this.jsx_parseAttributeValue() : null
+				const value = /** @type {ESTreeJSX.JSXAttribute['value'] | null} */ (
+					this.eat(tt.eq) ? this.jsx_parseAttributeValue() : null
+				);
+				if (value?.type === 'JSXExpressionContainer' && value.html) {
+					this.#report_recoverable_error_range(
+						value.start ?? node.start ?? this.start,
+						value.end ?? node.end ?? this.end,
+						HTML_ATTRIBUTE_VALUE_ERROR,
+						DIAGNOSTIC_CODES.HTML_DIRECTIVE_AS_ATTRIBUTE_VALUE,
 					);
+				}
+				/** @type {ESTreeJSX.JSXAttribute} */ (node).value = value;
 				return this.finishNode(node, 'JSXAttribute');
 			}
 
@@ -2121,20 +2231,22 @@ export function TSRXPlugin(config) {
 					let ch = this.input.charCodeAt(this.pos);
 
 					switch (ch) {
-						case 60: // '<'
-						case 123: // '{'
+						case CharCode.lessThan:
+						case CharCode.openBrace:
 							// In JSX text mode, '<' and '{' always start a tag/expression container.
 							// `exprAllowed` can be false here due to surrounding parser state, but
 							// throwing breaks valid templates (e.g. sibling tags after a close).
-							if (ch === 60) {
+							this.start = this.pos;
+							this.startLoc = this.curPosition();
+							if (ch === CharCode.lessThan) {
 								++this.pos;
 								return this.finishToken(tstt.jsxTagStart);
 							}
 							return this.getTokenFromCode(ch);
 
-						case 47: // '/'
+						case CharCode.slash:
 							// Check if this is a comment (// or /*)
-							if (this.input.charCodeAt(this.pos + 1) === 47) {
+							if (this.input.charCodeAt(this.pos + 1) === CharCode.slash) {
 								// '//'
 								// Line comment - handle it properly
 								const commentStart = this.pos;
@@ -2168,7 +2280,7 @@ export function TSRXPlugin(config) {
 
 								// Continue processing from current position
 								break;
-							} else if (this.input.charCodeAt(this.pos + 1) === 42) {
+							} else if (this.input.charCodeAt(this.pos + 1) === CharCode.asterisk) {
 								// '/*'
 								// Block comment - handle it properly
 								const commentStart = this.pos;
@@ -2178,8 +2290,8 @@ export function TSRXPlugin(config) {
 								let commentText = '';
 								while (this.pos < this.input.length - 1) {
 									if (
-										this.input.charCodeAt(this.pos) === 42 &&
-										this.input.charCodeAt(this.pos + 1) === 47
+										this.input.charCodeAt(this.pos) === CharCode.asterisk &&
+										this.input.charCodeAt(this.pos + 1) === CharCode.slash
 									) {
 										this.pos += 2;
 										break;
@@ -2214,17 +2326,16 @@ export function TSRXPlugin(config) {
 							this.exprAllowed = true;
 							return original.readToken.call(this, ch);
 
-						case 38: // '&'
+						case CharCode.ampersand:
 							out += this.input.slice(chunkStart, this.pos);
 							out += this.jsx_readEntity();
 							chunkStart = this.pos;
 							break;
 
-						case 62: // '>'
-						case 125: {
-							// '}'
+						case CharCode.greaterThan:
+						case CharCode.closeBrace: {
 							if (
-								ch === 125 &&
+								ch === CharCode.closeBrace &&
 								(this.#path.length === 0 ||
 									this.#path.at(-1)?.type === 'Component' ||
 									this.#path.at(-1)?.type === 'Element' ||
@@ -2238,7 +2349,7 @@ export function TSRXPlugin(config) {
 								'Unexpected token `' +
 									this.input[this.pos] +
 									'`. Did you mean `' +
-									(ch === 62 ? '&gt;' : '&rbrace;') +
+									(ch === CharCode.greaterThan ? '&gt;' : '&rbrace;') +
 									'` or ' +
 									'`{"' +
 									this.input[this.pos] +
@@ -2252,7 +2363,7 @@ export function TSRXPlugin(config) {
 								out += this.input.slice(chunkStart, this.pos);
 								out += this.jsx_readNewLine(true);
 								chunkStart = this.pos;
-							} else if (ch === 32 || ch === 9) {
+							} else if (ch === CharCode.space || ch === CharCode.tab) {
 								++this.pos;
 							} else {
 								this.#resetTokenStartToCurrentPosition();
@@ -2283,28 +2394,28 @@ export function TSRXPlugin(config) {
 				// Check if the element being parsed IS a <tsx>, <tsrx>, or <tsx:*> tag
 				// Current token is jsxTagStart, this.end is position after '<'
 				const tag_name_start = this.end;
-				const is_fragment_tag = this.input.charCodeAt(tag_name_start) === 62;
+				const is_fragment_tag = this.input.charCodeAt(tag_name_start) === CharCode.greaterThan;
 				const char_after_tsx = this.input.charCodeAt(tag_name_start + 3);
 				const char_after_tsrx = this.input.charCodeAt(tag_name_start + 4);
 				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)
+						char_after_tsx === CharCode.greaterThan ||
+						char_after_tsx === CharCode.slash ||
+						char_after_tsx === CharCode.space ||
+						char_after_tsx === CharCode.tab ||
+						char_after_tsx === CharCode.lineFeed ||
+						char_after_tsx === CharCode.carriageReturn ||
+						char_after_tsx === CharCode.colon);
 				const is_tsrx_tag =
 					this.input.startsWith('tsrx', tag_name_start) &&
 					(tag_name_start + 4 >= this.input.length ||
-						char_after_tsrx === 62 || // >
-						char_after_tsrx === 47 || // / (self-closing)
-						char_after_tsrx === 32 || // space
-						char_after_tsrx === 9 || // tab
-						char_after_tsrx === 10 || // newline
-						char_after_tsrx === 13); // carriage return
+						char_after_tsrx === CharCode.greaterThan ||
+						char_after_tsrx === CharCode.slash ||
+						char_after_tsrx === CharCode.space ||
+						char_after_tsrx === CharCode.tab ||
+						char_after_tsrx === CharCode.lineFeed ||
+						char_after_tsrx === CharCode.carriageReturn);
 
 				if (is_fragment_tag || is_tsx_tag || is_tsrx_tag) {
 					// Use Ripple's parseElement to create a Tsx/Tsrx/TsxCompat node.
@@ -2356,6 +2467,8 @@ export function TSRXPlugin(config) {
 				/** @type {AST.NodeWithLocation} */ (element).loc.start = position;
 				element.metadata = { path: [] };
 				element.children = [];
+				element.type = 'Element';
+				this.#path.push(element);
 
 				const open = /** @type {ESTreeJSX.JSXOpeningElement & AST.NodeWithLocation} */ (
 					this.jsx_parseOpeningElementAt(start, position)
@@ -2414,8 +2527,6 @@ export function TSRXPlugin(config) {
 					element.type = 'Element';
 				}
 
-				this.#path.push(element);
-
 				for (const attr of open.attributes) {
 					if (attr.type === 'JSXAttribute') {
 						/** @type {AST.Attribute} */ (/** @type {unknown} */ (attr)).type = 'Attribute';
@@ -2456,7 +2567,12 @@ export function TSRXPlugin(config) {
 
 				element.attributes = open.attributes;
 				element.metadata ??= { path: [] };
-				element.metadata.commentContainerId = ++this.#commentContextId;
+				// Opening-tag parsing can tokenize comments that appear before the first
+				// child. Preserve that early container id so the comment stays associated
+				// with this element during comment attachment/printing.
+				if (element.metadata.commentContainerId === undefined) {
+					element.metadata.commentContainerId = ++this.#commentContextId;
+				}
 
 				if (element.selfClosing) {
 					this.#path.pop();
@@ -2470,7 +2586,7 @@ export function TSRXPlugin(config) {
 						enterScope: true,
 					});
 
-					if (element.type === 'Tsx') {
+					if (/** @type {AST.Tsx} */ (element).type === 'Tsx') {
 						this.#path.pop();
 
 						if (!element.unclosed) {
@@ -2647,7 +2763,7 @@ export function TSRXPlugin(config) {
 							enterScope: true,
 						});
 
-						if (element.type === 'Tsx') {
+						if (/** @type {AST.Tsx} */ (element).type === 'Tsx') {
 							this.#path.pop();
 
 							if (!element.unclosed) {
@@ -2671,12 +2787,15 @@ export function TSRXPlugin(config) {
 								this.#popTsxTokenContextBeforeTemplateExpressionChild();
 								this.next();
 							}
-						} else if (element.type === 'TsxCompat') {
+						} else if (/** @type {AST.TsxCompat} */ (element).type === 'TsxCompat') {
 							this.#path.pop();
 
 							if (!element.unclosed) {
 								const raise_error = () => {
-									this.raise(this.start, `Expected closing tag '</tsx:${element.kind}>'`);
+									this.raise(
+										this.start,
+										`Expected closing tag '</tsx:${/** @type {AST.TsxCompat} */ (element).kind}>'`,
+									);
 								};
 
 								this.next();
@@ -2693,7 +2812,7 @@ export function TSRXPlugin(config) {
 									raise_error();
 								}
 								this.next();
-								if (this.value !== element.kind) {
+								if (this.value !== /** @type {AST.TsxCompat} */ (element).kind) {
 									raise_error();
 								}
 								this.next();
@@ -2703,7 +2822,10 @@ export function TSRXPlugin(config) {
 								this.#popTsxTokenContextBeforeTemplateExpressionChild();
 								this.next();
 							}
-						} else if (element.type === 'Tsrx' && this.#path[this.#path.length - 1] === element) {
+						} else if (
+							/** @type {AST.Tsrx} */ (element).type === 'Tsrx' &&
+							this.#path[this.#path.length - 1] === element
+						) {
 							this.#report_broken_markup_error(
 								this.start,
 								"Unclosed tag '<tsrx>'. Expected '</tsrx>' before end of component.",
@@ -2787,7 +2909,10 @@ export function TSRXPlugin(config) {
 				}
 				if (this.type === tt.braceL) {
 					body.push(this.#parseNativeTemplateExpressionContainer());
-				} else if (this.type === tt.string && this.input.charCodeAt(this.start) === 34) {
+				} else if (
+					this.type === tt.string &&
+					this.input.charCodeAt(this.start) === CharCode.doubleQuote
+				) {
 					body.push(this.parseDoubleQuotedTextChild());
 				} else if (this.type === tt.braceR) {
 					// Leaving a component/template body. We may still be in TSX/JSX tokenization
@@ -2800,8 +2925,8 @@ export function TSRXPlugin(config) {
 					return;
 				} else if (
 					this.type === tstt.jsxTagStart ||
-					(this.input.charCodeAt(this.start) === 60 /* < */ &&
-						this.input.charCodeAt(this.start + 1) === 47) /* / */
+					(this.input.charCodeAt(this.start) === CharCode.lessThan &&
+						this.input.charCodeAt(this.start + 1) === CharCode.slash)
 				) {
 					const startPos = this.start;
 					const startLoc = this.startLoc;
@@ -3082,7 +3207,7 @@ export function TSRXPlugin(config) {
 				if (
 					this.#functionBodyDepth === 0 &&
 					this.type === tt.string &&
-					this.input.charCodeAt(this.start) === 34 &&
+					this.input.charCodeAt(this.start) === CharCode.doubleQuote &&
 					(this.#path.at(-1)?.type === 'Component' || this.#path.at(-1)?.type === 'Element')
 				) {
 					this.pos = this.start;
@@ -3096,7 +3221,7 @@ export function TSRXPlugin(config) {
 				// e.g., &[data] = track(0); or &{x, y} = obj;
 				if (this.type === tt.bitwiseAND) {
 					const charAfterAmp = this.input.charCodeAt(this.end);
-					if (charAfterAmp === 123 || charAfterAmp === 91) {
+					if (charAfterAmp === CharCode.openBrace || charAfterAmp === CharCode.openBracket) {
 						const node = /** @type {AST.ExpressionStatement} */ (this.startNode());
 						const assign_node = /** @type {AST.AssignmentExpression} */ (this.startNode());
 						this.next(); // consume &

package/src/transform/jsx/index.js

@@ -60,20 +60,43 @@ const HOOK_CALLBACK_OUTER_MUTATION_ERROR =
 const TEMPLATE_FRAGMENT_ERROR =
 	'JSX fragment syntax is not needed in TSRX templates. TSRX renders in immediate mode, so everything is already a fragment. Use `<>...</>` only within <tsx>...</tsx>.';
 
+/**
+ * @param {TransformContext} transform_context
+ * @returns {string}
+ */
+export function get_invalid_html_child_error_message(transform_context) {
+	return `\`{html ...}\` is only supported as the sole child of an element in ${transform_context.platform.name}.`;
+}
+
 /**
  * @param {AST.Node} node
  * @param {TransformContext} transform_context
  */
-function report_html_template_unsupported_error(node, transform_context) {
-	// this should be a fatal error so we don't pass the errors collection,
-	// since we don't have a transform for the Html node
+function report_invalid_html_child_error(node, transform_context) {
 	error(
-		`\`{html ...}\` is not supported on the ${transform_context.platform.name} target. Use \`dangerouslySetInnerHTML={{ __html: ... }}\` as an element attribute instead.`,
+		get_invalid_html_child_error_message(transform_context),
 		transform_context.filename,
 		node,
+		transform_context.errors,
+		transform_context.comments,
 	);
 }
 
+/**
+ * In loose/editor mode `error(...)` records the diagnostic and continues, so an
+ * invalid standalone `{html ...}` child still needs a valid expression node for
+ * the virtual TSX output.
+ *
+ * @param {any} node
+ * @param {TransformContext} transform_context
+ * @returns {ESTreeJSX.JSXExpressionContainer}
+ */
+export function recover_invalid_html_child(node, transform_context) {
+	report_invalid_html_child_error(node, transform_context);
+	const expression = set_loc(clone_expression_node(node.expression), node);
+	return to_jsx_expression_container(expression, node);
+}
+
 /**
  * @param {AST.Node} node
  * @param {TransformContext} transform_context
@@ -2310,10 +2333,19 @@ function to_jsx_element(node, transform_context, raw_children = node.children ||
 			selfClosing = child_transform.selfClosing;
 		}
 	} else {
-		if (walked_children.some((/** @type {any} */ c) => c && c.type === 'Html')) {
-			return report_html_template_unsupported_error(node, transform_context);
+		const html_child_transform = rewrite_host_html_children(
+			node,
+			walked_children,
+			raw_children,
+			attributes,
+			transform_context,
+		);
+		if (html_child_transform) {
+			children = html_child_transform.children;
+			selfClosing = html_child_transform.selfClosing;
+		} else {
+			children = create_element_children(walked_children, transform_context);
 		}
-		children = create_element_children(walked_children, transform_context);
 	}
 	const has_unmappable_attribute = attributes.some(
 		(/** @type {any} */ attribute) => attribute?.metadata?.has_unmappable_value,
@@ -2341,6 +2373,117 @@ function to_jsx_element(node, transform_context, raw_children = node.children ||
 	return set_loc(b.jsx_element_fresh(openingElement, closingElement, children), node);
 }
 
+/**
+ * @param {any} node
+ * @param {any[]} walked_children
+ * @param {any[]} raw_children
+ * @param {any[]} attributes
+ * @param {TransformContext} transform_context
+ * @returns {{ children: any[]; selfClosing: boolean } | null}
+ */
+export function rewrite_host_html_children(
+	node,
+	walked_children,
+	raw_children,
+	attributes,
+	transform_context,
+) {
+	const source_children = raw_children || walked_children;
+	const source_html_index = source_children.findIndex((child) => child?.type === 'Html');
+	if (source_html_index === -1) {
+		return null;
+	}
+	const source_html = source_children[source_html_index];
+	const walked_html =
+		walked_children[source_html_index]?.type === 'Html'
+			? walked_children[source_html_index]
+			: source_html;
+
+	if (is_component_like_element(node) || source_children.length !== 1) {
+		report_invalid_html_child_error(source_html, transform_context);
+	}
+
+	const conflicting_attribute = get_host_html_conflicting_attribute(attributes, transform_context);
+	if (conflicting_attribute !== null) {
+		error(
+			create_host_html_conflict_error(conflicting_attribute, transform_context),
+			transform_context.filename,
+			source_html,
+			transform_context.errors,
+			transform_context.comments,
+		);
+	}
+
+	attributes.push(create_host_html_attribute(walked_html, source_html, transform_context));
+
+	return { children: [], selfClosing: true };
+}
+
+/**
+ * @param {any[]} attributes
+ * @param {TransformContext} transform_context
+ * @returns {{ kind: 'attribute'; name: string } | null}
+ */
+export function get_host_html_conflicting_attribute(attributes, transform_context) {
+	const conflicting_attributes = get_host_html_conflicting_attribute_names(transform_context);
+	for (const name of conflicting_attributes) {
+		if (has_jsx_attribute(attributes, name)) {
+			return { kind: 'attribute', name };
+		}
+	}
+
+	return null;
+}
+
+/**
+ * @param {{ kind: 'attribute'; name: string }} conflicting_attribute
+ * @param {TransformContext} transform_context
+ * @returns {string}
+ */
+export function create_host_html_conflict_error(conflicting_attribute, transform_context) {
+	const html_attribute = get_host_html_attribute_name(transform_context);
+	return `\`{html ...}\` lowers to \`${html_attribute}\` on the ${transform_context.platform.name} target and cannot be combined with an existing \`${conflicting_attribute.name}\` attribute.`;
+}
+
+/**
+ * @param {TransformContext} transform_context
+ * @returns {string[]}
+ */
+function get_host_html_conflicting_attribute_names(transform_context) {
+	switch (transform_context.platform.name) {
+		case 'Solid':
+			return ['innerHTML', 'textContent'];
+		case 'Vue':
+			return ['innerHTML'];
+		default:
+			return [get_host_html_attribute_name(transform_context)];
+	}
+}
+
+/**
+ * @param {TransformContext} transform_context
+ * @returns {'dangerouslySetInnerHTML' | 'innerHTML'}
+ */
+function get_host_html_attribute_name(transform_context) {
+	return transform_context.platform.jsx?.htmlProp === 'dangerouslySetInnerHTML'
+		? 'dangerouslySetInnerHTML'
+		: 'innerHTML';
+}
+
+/**
+ * @param {any[]} attributes
+ * @param {string} name
+ * @returns {boolean}
+ */
+function has_jsx_attribute(attributes, name) {
+	return attributes.some(
+		(attr) =>
+			attr?.type === 'JSXAttribute' &&
+			attr.name?.type === 'JSXIdentifier' &&
+			attr.name.name === name,
+	);
+}
+
 /**
  * @param {any[]} children
  * @param {TransformContext} transform_context
@@ -3580,7 +3723,7 @@ function to_jsx_child(node, transform_context) {
 		case 'TSRXExpression':
 			return to_jsx_expression_container(node.expression, node);
 		case 'Html':
-			return report_html_template_unsupported_error(node, transform_context);
+			return recover_invalid_html_child(node, transform_context);
 		case 'IfStatement':
 			return (
 				transform_context.platform.hooks?.controlFlow?.ifStatement ?? if_statement_to_jsx_child
@@ -4918,7 +5061,7 @@ function transform_element_attributes_dispatch(attrs, transform_context, element
  * @param {any} element
  * @returns {boolean}
  */
-function is_component_like_element(element) {
+export function is_component_like_element(element) {
 	const id = element?.id;
 	if (!id) return false;
 	if (id.type === 'Identifier') return /^[A-Z]/.test(id.name);
@@ -5127,6 +5270,31 @@ function is_named_ref_attribute(attr) {
 	);
 }
 
+/**
+ * @param {any} html_expression
+ * @param {any} source_attr
+ * @param {TransformContext} transform_context
+ * @returns {any}
+ */
+export function create_host_html_attribute(html_expression, source_attr, transform_context) {
+	const expression =
+		html_expression?.type === 'Html' ? html_expression.expression : html_expression;
+	const name = get_host_html_attribute_name(transform_context);
+	const value =
+		name === 'dangerouslySetInnerHTML'
+			? set_loc(b.object([b.prop('init', b.id('__html'), expression)]), source_attr)
+			: expression;
+	const value_container = to_jsx_expression_container(value, source_attr);
+	if (name !== 'dangerouslySetInnerHTML') {
+		setLocation(value_container, source_attr, true);
+	}
+
+	return set_loc(
+		build_jsx_attribute(b.jsx_id(name), value_container, false, source_attr),
+		source_attr,
+	);
+}
+
 /**
  * @param {any} expression
  * @returns {boolean}

package/types/jsx-platform.d.ts

@@ -345,6 +345,8 @@ export interface JsxPlatform {
 		 * explicit `ref={normalized.ref}` attribute.
 		 */
 		hostSpreadRefStrategy?: 'explicit-ref-attr';
+		/** Native host prop used when lowering a sole child `{html ...}`. */
+		htmlProp?: 'dangerouslySetInnerHTML' | 'innerHTML';
 	};
 
 	validation: {