fix(vue): add HTML attributes to generated TypeScript types (#15016)

* fix(vue): add HTML attributes to generated TypeScript types

Fixes #14686

* fix: add package exports and update tests for HTML attributes support

* test(vue): add astro check test for HTML attributes

Add test fixture and test case to verify that Vue components
correctly accept HTML attributes (class, style, id, data-*) and
client directives via astro check.

Follows the same pattern as the Svelte integration tests.

* chore: update lockfile for vue prop-types fixture

Author: rahuld109

.changeset/kind-emus-relate.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/vue': patch
+---
+
+Adds support for arbitrary HTML attributes on Vue components

packages/integrations/vue/package.json

@@ -24,10 +24,12 @@
     "./editor": "./dist/editor.cjs",
     "./client.js": "./dist/client.js",
     "./server.js": "./dist/server.js",
+    "./vue-shims.d.ts": "./vue-shims.d.ts",
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "vue-shims.d.ts"
   ],
   "scripts": {
     "build": "astro-scripts build \"src/**/*.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist && tsc",

packages/integrations/vue/src/editor.cts

@@ -1,7 +1,7 @@
 import { parse } from '@vue/compiler-sfc';
 
 export function toTSX(code: string, className: string): string {
-	let result = `export default function ${className}__AstroComponent_(_props: Record<string, any>): any {}`;
+	let result = `export default function ${className}__AstroComponent_(_props: import('@astrojs/vue/vue-shims.d.ts').PropsWithHTMLAttributes<Record<string, any>>): any {}`;
 
 	// NOTE: As you can expect, using regexes for this is not exactly the most reliable way of doing things
 	// However, I couldn't figure out a way to do it using Vue's compiler, I tried looking at how Volar does it, but I
@@ -33,7 +33,7 @@ export function toTSX(code: string, className: string): string {
 						${regularScriptBlockContent}
 						${scriptSetup.content}
 
-						export default function ${className}__AstroComponent_${propsGenericType}(_props: ${definePropsType[1]}): any {
+						export default function ${className}__AstroComponent_${propsGenericType}(_props: import('@astrojs/vue/vue-shims.d.ts').PropsWithHTMLAttributes<${definePropsType[1]}>): any {
 							<div></div>
 						}
 				`;
@@ -50,7 +50,7 @@ export function toTSX(code: string, className: string): string {
 
 					const Props = ${defineProps[0]}
 
-					export default function ${className}__AstroComponent_${propsGenericType}(_props: typeof Props): any {
+					export default function ${className}__AstroComponent_${propsGenericType}(_props: import('@astrojs/vue/vue-shims.d.ts').PropsWithHTMLAttributes<typeof Props>): any {
 						<div></div>
 					}
 				`;

packages/integrations/vue/test/check.test.js

@@ -0,0 +1,21 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { fileURLToPath } from 'node:url';
+import { cli } from '../../../astro/test/test-utils.js';
+
+describe('Vue Check', () => {
+	it('should pass check for client directives and HTML attributes on Vue components', async () => {
+		const root = fileURLToPath(new URL('./fixtures/prop-types/types/directive', import.meta.url));
+		const tsConfigPath = fileURLToPath(
+			new URL('./fixtures/prop-types/tsconfig.directive.json', import.meta.url),
+		);
+		const { getResult } = cli('check', '--tsconfig', tsConfigPath, '--root', root);
+		const { exitCode, stdout, stderr } = await getResult();
+
+		if (exitCode !== 0) {
+			console.error(stdout);
+			console.error(stderr);
+		}
+		assert.equal(exitCode, 0, 'Expected check to pass (exit code 0)');
+	});
+});

packages/integrations/vue/test/fixtures/prop-types/astro.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+
+export default defineConfig({
+  srcDir: './types',
+  integrations: [vue()]
+});

packages/integrations/vue/test/fixtures/prop-types/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "vue-prop-types",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/vue": "workspace:*",
+    "astro": "workspace:*",
+    "vue": "^3.5.13"
+  }
+}

packages/integrations/vue/test/fixtures/prop-types/tsconfig.directive.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["types/directive"]
+}

packages/integrations/vue/test/fixtures/prop-types/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}

packages/integrations/vue/test/fixtures/prop-types/types/directive/Arbitrary.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+// A component that accepts arbitrary HTML attributes via Vue's $attrs fallthrough
+</script>
+
+<template>
+  <div v-bind="$attrs">Arbitrary</div>
+</template>

packages/integrations/vue/test/fixtures/prop-types/types/directive/Strict.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// A component with strictly typed props
+defineProps<{
+  message: string;
+}>();
+</script>
+
+<template>
+  <div>{{ message }}</div>
+</template>