feat(cli): add support for Vue Vine

Author: johnsoncodehk

fixtures/meta-frameworks-support/fixture.vine.ts

@@ -0,0 +1,6 @@
+function MyComponent() {
+	return vine`<div>{{ console.log('Hello, world!') }}</div>`;
+}
+
+// This is also valid
+const AnotherComponent = () => vine`<div>Hello World</div>`

fixtures/meta-frameworks-support/package.json

@@ -5,6 +5,7 @@
 	"devDependencies": {
 		"@astrojs/ts-plugin": "latest",
 		"@mdx-js/language-service": "latest",
-		"@vue/language-core": "latest"
+		"@vue/language-core": "latest",
+		"@vue-vine/language-service": "latest"
 	}
 }

packages/cli/index.ts

@@ -21,6 +21,7 @@ const lightYellow = (s: string) => '\x1b[93m' + s + _reset;
 // https://talyian.github.io/ansicolors/
 const tsColor = (s: string) => '\x1b[34m' + s + _reset;
 const vueColor = (s: string) => '\x1b[32m' + s + _reset;
+const vueVineColor = (s: string) => '\x1b[38;5;48m' + s + _reset;
 const mdxColor = (s: string) => '\x1b[33m' + s + _reset;
 const astroColor = (s: string) => '\x1b[38;5;209m' + s + _reset;
 
@@ -64,6 +65,9 @@ class Project {
 			if (this.languages.includes('vue')) {
 				labels.push(vueColor('Vue'));
 			}
+			if (this.languages.includes('vue-vine')) {
+				labels.push(vueVineColor('Vue Vine'));
+			}
 			if (this.languages.includes('mdx')) {
 				labels.push(mdxColor('MDX'));
 			}
@@ -124,6 +128,8 @@ class Project {
 			'--projects',
 			'--vue-project',
 			'--vue-projects',
+			'--vue-vine-project',
+			'--vue-vine-projects',
 			'--mdx-project',
 			'--mdx-projects',
 			'--astro-project',
@@ -136,6 +142,9 @@ class Project {
 			options: [{
 				label: 'Vue',
 				value: 'vue',
+			}, {
+				label: 'Vue Vine',
+				value: 'vue-vine',
 			}, {
 				label: 'MDX',
 				value: 'mdx',
@@ -196,12 +205,10 @@ class Project {
 			}
 		}
 
-		clack.log.info(`Running: ${purple(command)}`);
+		clack.log.info(`${darkGray('Command:')} ${purple(command)}`);
 
 		for (let tsconfig of selectedTsconfigs) {
-			if (!tsconfig.startsWith('.')) {
-				tsconfig = `./${tsconfig}`;
-			}
+			tsconfig = resolvePath(tsconfig);
 			tsconfigAndLanguages.set(tsconfig, languages);
 		}
 	} else {
@@ -214,6 +221,10 @@ class Project {
 				projectFlags: ['--vue-project', '--vue-projects'],
 				language: 'vue',
 			},
+			{
+				projectFlags: ['--vue-vine-project', '--vue-vine-projects'],
+				language: 'vue-vine',
+			},
 			{
 				projectFlags: ['--mdx-project', '--mdx-projects'],
 				projectsFlag: '--mdx-projects',

packages/cli/lib/languagePlugins.ts

@@ -38,6 +38,57 @@ export async function load(tsconfig: string, languages: string[]) {
 		plugins.push(vueLanguagePlugin);
 	}
 
+	if (languages.includes('vue-vine')) {
+		let vue: typeof import('@vue/language-core');
+		let vueVine: typeof import('@vue-vine/language-service');
+		let pkgPath: string | undefined;
+
+		if (pkgPath = findPackageJson('@vue-vine/language-service')) {
+			const pkgDir = path.dirname(pkgPath);
+			vueVine = require('@vue-vine/language-service');
+			vue = require(require.resolve('@vue/language-core', { paths: [pkgDir] }));
+		} else if (pkgPath = findPackageJson('vue-vine-tsc')) {
+			const pkgDir = path.dirname(pkgPath);
+			vue = require(require.resolve('@vue/language-core', { paths: [pkgDir] }));
+			vueVine = require(require.resolve('@vue/language-core', { paths: [pkgDir] }));
+		} else {
+			const pkg = ts.findConfigFile(path.dirname(tsconfig), ts.sys.fileExists, 'package.json');
+			if (pkg) {
+				throw new Error('Please install @vue-vine/language-service or vue-vine-tsc to ' + path.relative(process.cwd(), pkg));
+			} else {
+				throw new Error('Please install @vue-vine/language-service or vue-vine-tsc for ' + path.relative(process.cwd(), tsconfig));
+			}
+		}
+
+		const commonLine = vue.createParsedCommandLine(ts, ts.sys, tsconfig, true);
+		const globalTypesFilePath = vueVine.setupGlobalTypes(path.dirname(tsconfig), commonLine.vueOptions as any, ts.sys);
+		if (globalTypesFilePath) {
+			commonLine.vueOptions.__setupedGlobalTypes = {
+				absolutePath: globalTypesFilePath,
+			};
+		}
+
+		plugins.push(
+			vue.createVueLanguagePlugin<string>(
+				ts,
+				commonLine.options,
+				commonLine.vueOptions,
+				id => id
+			)
+		);
+
+		plugins.push(
+			vueVine.createVueVineLanguagePlugin(
+				ts,
+				{
+					compilerOptions: commonLine.options,
+					vueCompilerOptions: commonLine.vueOptions as any,
+					target: 'tsc',
+				}
+			)
+		);
+	}
+
 	if (languages.includes('mdx')) {
 		let mdx: any;
 
@@ -78,8 +129,6 @@ export async function load(tsconfig: string, languages: string[]) {
 	return plugins;
 
 	function findPackageJson(pkgName: string) {
-		try {
-			return require.resolve(`${pkgName}/package.json`, { paths: [path.dirname(tsconfig)] });
-		} catch { }
+		return ts.findConfigFile(path.dirname(tsconfig), ts.sys.fileExists, `node_modules/${pkgName}/package.json`);
 	}
 }

packages/cli/package.json

@@ -27,6 +27,7 @@
 		"typescript": "*"
 	},
 	"devDependencies": {
-		"@vue/language-core": "latest"
+		"@vue/language-core": "latest",
+		"@vue-vine/language-service": "latest"
 	}
 }