WIP

Author: XiNiHa

packages/playground/src/errorHandling.tsx

@@ -0,0 +1,34 @@
+import type { JSX } from "solid-js";
+
+function ErrorFree(props: { children: JSX.Element & Errorable<never> }) {
+	return (<>{props.children}</>) as JSX.Element & Errorable<never>;
+}
+
+function ErrorBoundary<T, U, V = U extends undefined ? never : U>(props: {
+	children: JSX.Element & Errorable<T>;
+	handle: (error: T) => U;
+}) {
+	return (<>{props.children}</>) as JSX.Element & Errorable<V>;
+}
+
+const ErrorTag = Symbol("Error");
+type Errorable<T> = { [ErrorTag]: T };
+
+function Comp<T>(props: { children: JSX.Element & Errorable<T> }) {
+	return (<>{props.children}</>) as JSX.Element & Errorable<T>;
+}
+
+function WithError(props: { foo?: string }) {
+	return (<div>WithError {props.foo}</div>) as unknown as JSX.Element &
+		Errorable<"foo">;
+}
+
+export default function App() {
+	return (
+		<ErrorFree>
+			<Comp>
+				<WithError foo="bar" />
+			</Comp>
+		</ErrorFree>
+	);
+}

packages/volar/src/features/jsxToFn.ts

@@ -0,0 +1,84 @@
+import type { Code, Context, TsmLanguagePlugin } from "ts-macro";
+
+export const jsxToFn = ({ ts }: Context): TsmLanguagePlugin => ({
+	name: "@solid-macros/volar/jsx-to-fn",
+	enforce: "post",
+	resolveVirtualCode({ ast, codes, lang }) {
+		if (!lang.endsWith("x")) return;
+		ast.forEachChild(function walk(node) {
+			if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
+				const openingLike = ts.isJsxElement(node) ? node.openingElement : node;
+				if (/^[A-Z]/.test(openingLike.tagName.getText(ast))) {
+					const props = openingLike.attributes.properties;
+					const contentfulChildren = ts.isJsxElement(node)
+						? node.children.filter(
+								(child) =>
+									!ts.isJsxText(child) || child.getText(ast).trim().length > 0,
+							)
+						: [];
+
+					codes.replaceRange(
+						node.pos,
+						node.end,
+						[
+							openingLike.tagName.getText(ast),
+							openingLike.tagName.getStart(ast),
+							{ semantic: { shouldHighlight: () => false } },
+						],
+						"({\n",
+						...props.flatMap<Code>((prop) => {
+							if (ts.isJsxAttribute(prop)) {
+								return [
+									[
+										prop.name.getText(ast),
+										prop.name.getStart(ast),
+										{ semantic: { shouldHighlight: () => false } },
+									],
+									":",
+									prop.initializer
+										? ts.isJsxExpression(prop.initializer)
+											? prop.initializer.expression
+												? [
+														prop.initializer.expression.getText(ast),
+														prop.initializer.getStart(ast),
+													]
+												: "undefined"
+											: [
+													prop.initializer.getText(ast),
+													prop.initializer.getStart(ast),
+												]
+										: "true",
+									",\n",
+								];
+							}
+							return [];
+						}),
+						...(ts.isJsxElement(node) && contentfulChildren.length > 0
+							? ([
+									..."children"
+										.split("")
+										.map((char): Code => [char, node.openingElement.end - 1]),
+									":",
+									...(contentfulChildren.length > 1
+										? ([
+												"[",
+												...contentfulChildren.flatMap<Code>((node) => [
+													[node.getFullText(ast), node.pos],
+													",",
+												]),
+												"]",
+											] satisfies Code[])
+										: contentfulChildren.map<Code>((node) => [
+												node.getFullText(ast),
+												node.pos,
+											])),
+								] satisfies Code[])
+							: []),
+						"})",
+					);
+				}
+			}
+			node.forEachChild(walk);
+		});
+	},
+});

packages/volar/src/index.ts

@@ -6,6 +6,7 @@ import {
 	type UnwrappedAccessorsOptions,
 	unwrappedAccessors,
 } from "./features/unwrappedAccessors";
+import { jsxToFn } from "./features/jsxToFn";
 
 interface Options {
 	/** Whether to make `<Show>` narrow the types with the condition */
@@ -30,5 +31,6 @@ export default createPlugin<Options | undefined>((ctx, options) => {
 					? options.unwrappedAccessors
 					: undefined,
 			),
+		jsxToFn(ctx),
 	].filter((v) => !!v);
 });