@tsrx/core 0.1.8 → 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.8",
+  "version": "0.1.9",
   "type": "module",
   "repository": {
     "type": "git",
@@ -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.8",
-    "@tsrx/react": "0.2.8",
-    "@tsrx/solid": "0.1.8",
-    "@tsrx/vue": "0.1.8"
+    "@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,8 @@ 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,
@@ -1969,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();
@@ -1992,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');
 			}
 
@@ -2205,6 +2236,8 @@ export function TSRXPlugin(config) {
 							// 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).
+							this.start = this.pos;
+							this.startLoc = this.curPosition();
 							if (ch === CharCode.lessThan) {
 								++this.pos;
 								return this.finishToken(tstt.jsxTagStart);
@@ -2434,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)
@@ -2492,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';
@@ -2534,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();
@@ -2548,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) {
@@ -2725,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) {
@@ -2749,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();
@@ -2771,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();
@@ -2781,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.",

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: {