@tsrx/vue 0.0.12 → 0.0.14

package/package.json

@@ -3,7 +3,7 @@
   "description": "Vue compiler built on @tsrx/core",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -19,13 +19,18 @@
       "default": "./src/index.js"
     },
     "./error-boundary": {
+      "types": "./types/error-boundary.d.ts",
       "default": "./src/error-boundary.js"
+    },
+    "./merge-refs": {
+      "types": "./types/merge-refs.d.ts",
+      "default": "./src/merge-refs.js"
     }
   },
   "dependencies": {
     "esrap": "^2.1.0",
     "zimmerframe": "^1.1.2",
-    "@tsrx/core": "0.0.17"
+    "@tsrx/core": "0.0.19"
   },
   "peerDependencies": {
     "vue": ">=3.5",

package/src/index.js

@@ -26,9 +26,19 @@ export function parse(source, filename, options) {
  */
 export function compile(source, filename, options) {
 	const errors = /** @type {CompileError[]} */ ([]);
+	const comments = /** @type {AST.CommentWithLocation[]} */ ([]);
 	const collect = !!options?.loose;
-	const ast = parseModule(source, filename, collect ? { loose: true, errors } : undefined);
-	const { ast: _ast, ...result } = transform(ast, source, filename);
+	const ast = parseModule(
+		source,
+		filename,
+		collect ? { loose: true, errors, comments } : undefined,
+	);
+	const { ast: _ast, ...result } = transform(
+		ast,
+		source,
+		filename,
+		collect ? { loose: true, errors, comments } : undefined,
+	);
 	return { ...result, errors };
 }
 
@@ -42,8 +52,13 @@ export function compile(source, filename, options) {
  */
 export function compile_to_volar_mappings(source, filename, options) {
 	const errors = /** @type {import('@tsrx/core/types').CompileError[]} */ ([]);
-	const ast = parseModule(source, filename, { ...options, errors });
-	const transformed = transform(ast, source, filename);
+	const comments = /** @type {AST.CommentWithLocation[]} */ ([]);
+	const ast = parseModule(source, filename, { ...options, errors, comments });
+	const transformed = transform(ast, source, filename, {
+		loose: true,
+		errors,
+		comments,
+	});
 	const result = createVolarMappingsResult({
 		ast: transformed.ast,
 		ast_from_source: ast,

package/src/merge-refs.js

@@ -0,0 +1 @@
+export { mergeRefs } from '@tsrx/core/runtime/merge-refs';

package/src/transform.js

@@ -6,7 +6,7 @@ import {
 	clone_identifier,
 	componentToFunctionDeclaration,
 	createJsxTransform,
-	create_compile_error,
+	error,
 	identifier_to_jsx_name,
 	setLocation,
 } from '@tsrx/core';
@@ -25,10 +25,12 @@ const vue_platform = {
 	imports: {
 		suspense: 'vue',
 		errorBoundary: '@tsrx/vue/error-boundary',
+		mergeRefs: '@tsrx/vue/merge-refs',
 	},
 	jsx: {
 		rewriteClassAttr: false,
 		acceptedTsxKinds: ['vue'],
+		multiRefStrategy: 'merge-refs',
 	},
 	validation: {
 		requireUseServerForAwait: true,
@@ -66,13 +68,22 @@ const vue_platform = {
 				metadata: { path: [] },
 			};
 		},
-		transformElementChildren(node, walked_children, raw_children, attributes) {
-			return rewrite_host_text_or_html_children(node, walked_children, raw_children, attributes);
+		transformElementChildren(node, walked_children, raw_children, attributes, ctx) {
+			return rewrite_host_text_or_html_children(
+				node,
+				walked_children,
+				raw_children,
+				attributes,
+				ctx,
+			);
 		},
-		validateComponentAwait(await_expression) {
-			throw create_compile_error(
-				await_expression,
+		validateComponentAwait(await_expression, _component, ctx) {
+			error(
 				'`await` is not yet supported in Vue TSRX components.',
+				ctx?.filename ?? null,
+				await_expression,
+				ctx?.errors,
+				ctx?.comments,
 			);
 		},
 		componentToFunction(component, ctx, helper_state) {
@@ -404,77 +415,33 @@ function is_vue_setup_call(call_expression) {
 }
 
 /**
+ * Reject `{ref expr}` on composite (component-like) elements: Vue component
+ * refs resolve to the component instance, not the rendered DOM node, so
+ * Ripple-style component refs don't have a meaningful DOM target. Multi-ref
+ * merging itself is handled by the shared `merge_duplicate_refs` pass via
+ * the platform's `multiRefStrategy: 'merge-refs'` config.
+ *
  * @param {any[]} attrs
  * @param {any} element
  * @param {any} transform_context
  * @returns {any[]}
  */
 function preprocess_ref_attributes(attrs, element, transform_context) {
-	/** @type {any[]} */
-	const result = [];
-	/** @type {any[]} */
-	const ref_attrs = [];
-
+	if (!is_component_like_element(element)) {
+		return attrs;
+	}
 	for (const attr of attrs) {
-		if (!attr) continue;
-		if (attr.type === 'RefAttribute') {
-			ref_attrs.push(attr);
-			continue;
+		if (attr?.type === 'RefAttribute') {
+			error(
+				'`{ref ...}` on the Vue target is only supported on host elements. Vue component refs resolve to component instances rather than the rendered DOM node, so Ripple-style component refs are not supported here.',
+				transform_context?.filename ?? null,
+				attr,
+				transform_context?.errors,
+				transform_context?.comments,
+			);
 		}
-		result.push(attr);
-	}
-
-	if (ref_attrs.length > 0 && is_component_like_element(element)) {
-		throw create_compile_error(
-			ref_attrs[0],
-			'`{ref ...}` on the Vue target is only supported on host elements. Vue component refs resolve to component instances rather than the rendered DOM node, so Ripple-style component refs are not supported here.',
-		);
 	}
-
-	if (ref_attrs.length === 1) {
-		result.push(ref_attrs[0]);
-	} else if (ref_attrs.length > 1) {
-		result.push({
-			type: 'RefAttribute',
-			argument: create_combined_ref_callback(ref_attrs),
-			loc: ref_attrs[0].loc,
-			metadata: { path: [] },
-		});
-	}
-
-	return result;
-}
-
-/**
- * @param {any[]} ref_attrs
- * @returns {any}
- */
-function create_combined_ref_callback(ref_attrs) {
-	const node_id = builders.id('node');
-
-	return {
-		type: 'ArrowFunctionExpression',
-		params: [node_id],
-		body: {
-			type: 'BlockStatement',
-			body: ref_attrs.map((attr) => ({
-				type: 'ExpressionStatement',
-				expression: {
-					type: 'CallExpression',
-					callee: attr.argument,
-					arguments: [clone_identifier(node_id)],
-					optional: false,
-					metadata: { path: [] },
-				},
-				metadata: { path: [] },
-			})),
-			metadata: { path: [] },
-		},
-		expression: false,
-		async: false,
-		generator: false,
-		metadata: { path: [] },
-	};
+	return attrs;
 }
 
 /**
@@ -482,9 +449,16 @@ function create_combined_ref_callback(ref_attrs) {
  * @param {any[]} walked_children
  * @param {any[]} raw_children
  * @param {any[]} attributes
+ * @param {any} [transform_context]
  * @returns {{ children: any[]; selfClosing?: boolean } | null}
  */
-function rewrite_host_text_or_html_children(node, walked_children, raw_children, attributes) {
+function rewrite_host_text_or_html_children(
+	node,
+	walked_children,
+	raw_children,
+	attributes,
+	transform_context,
+) {
 	const source_children = raw_children || walked_children;
 	const is_composite = is_component_like_element(node);
 	const html_children = source_children.filter((child) => child?.type === 'Html');
@@ -496,9 +470,12 @@ function rewrite_host_text_or_html_children(node, walked_children, raw_children,
 			has_dom_content_attribute(attributes, 'innerHTML') ||
 			has_dom_content_attribute(attributes, 'textContent')
 		) {
-			throw create_compile_error(
-				html_children[0],
+			error(
 				'`{html ...}` on the Vue target is only supported as the sole child of a host element. Use `innerHTML={...}` as an element attribute when you need the explicit prop form.',
+				transform_context?.filename ?? null,
+				html_children[0],
+				transform_context?.errors,
+				transform_context?.comments,
 			);
 		}
 
@@ -652,15 +629,20 @@ function inject_vue_imports(program, transform_context) {
 	if (transform_context.needs_error_boundary) {
 		ensure_named_import(program, '@tsrx/vue/error-boundary', 'TsrxErrorBoundary');
 	}
+
+	if (transform_context.needs_merge_refs) {
+		ensure_named_import(program, '@tsrx/vue/merge-refs', 'mergeRefs', '__mergeRefs');
+	}
 }
 
 /**
  * @param {import('estree').Program} program
  * @param {string} source
  * @param {string} name
+ * @param {string} [local]
  * @returns {void}
  */
-function ensure_named_import(program, source, name) {
+function ensure_named_import(program, source, name, local = name) {
 	for (const statement of program.body) {
 		if (statement.type !== 'ImportDeclaration' || statement.source?.value !== source) {
 			continue;
@@ -670,28 +652,30 @@ function ensure_named_import(program, source, name) {
 			(/** @type {any} */ specifier) =>
 				specifier.type === 'ImportSpecifier' &&
 				specifier.imported?.type === 'Identifier' &&
-				specifier.imported.name === name,
+				specifier.imported.name === name &&
+				specifier.local?.name === local,
 		);
 
 		if (!has_specifier) {
-			statement.specifiers.push(create_import_specifier(name));
+			statement.specifiers.push(create_import_specifier(name, local));
 		}
 
 		return;
 	}
 
-	program.body.unshift(create_import_declaration(source, [create_import_specifier(name)]));
+	program.body.unshift(create_import_declaration(source, [create_import_specifier(name, local)]));
 }
 
 /**
  * @param {string} name
+ * @param {string} [local]
  * @returns {any}
  */
-function create_import_specifier(name) {
+function create_import_specifier(name, local = name) {
 	return {
 		type: 'ImportSpecifier',
 		imported: builders.id(name),
-		local: builders.id(name),
+		local: builders.id(local),
 		importKind: 'value',
 		metadata: { path: [] },
 	};

package/types/error-boundary.d.ts

@@ -0,0 +1,11 @@
+export interface TsrxErrorBoundaryProps {
+	content: () => any;
+	fallback: (error: unknown, reset: () => void) => any;
+}
+
+export interface TsrxErrorBoundaryComponent {
+	(props: TsrxErrorBoundaryProps): any;
+	__setup(): void;
+}
+
+export const TsrxErrorBoundary: TsrxErrorBoundaryComponent;

package/types/merge-refs.d.ts

@@ -0,0 +1 @@
+export { mergeRefs } from '@tsrx/core/runtime/merge-refs';