fix: Avoid downstream need node polyfill for browser (#3696)

johnsoncodehk · web-flow · commit 3cd2fd4ef9cc · 2023-10-31T11:44:15.000+08:00
diff --git a/package.json b/package.json
@@ -21,7 +21,6 @@
 		"chrome": "vscode-test-web --browserType=chromium --extensionDevelopmentPath=./extensions/vscode ../volar-starter"
 	},
 	"devDependencies": {
-		"@types/node": "latest",
 		"@volar/language-service": "~1.10.9",
 		"typescript": "latest",
 		"vite": "latest",
diff --git a/packages/component-meta/package.json b/packages/component-meta/package.json
@@ -25,5 +25,8 @@
 		"typescript": {
 			"optional": true
 		}
+	},
+	"devDependencies": {
+		"@types/node": "latest"
 	}
 }
diff --git a/packages/component-meta/src/index.ts b/packages/component-meta/src/index.ts
@@ -22,14 +22,14 @@ export type ComponentMetaChecker = ReturnType<typeof baseCreate>;
 const windowsPathReg = /\\/g;
 
 export function createComponentMetaCheckerByJsonConfig(
-	root: string,
+	_rootPath: string,
 	json: any,
 	checkerOptions: MetaCheckerOptions = {},
 	ts: typeof import('typescript/lib/tsserverlibrary') = require('typescript'),
 ) {
-	const rootPath = (root as path.OsPath).replace(windowsPathReg, '/') as path.PosixPath;
+	const rootPath = _rootPath.replace(windowsPathReg, '/') as path.PosixPath;
 	return createComponentMetaCheckerWorker(
-		() => vue.createParsedCommandLineByJson(ts, ts.sys, root, json),
+		() => vue.createParsedCommandLineByJson(ts, ts.sys, rootPath, json),
 		checkerOptions,
 		rootPath,
 		path.join(rootPath, 'jsconfig.json.global.vue' as path.PosixPath),
@@ -38,13 +38,13 @@ export function createComponentMetaCheckerByJsonConfig(
 }
 
 export function createComponentMetaChecker(
-	tsconfigPath: string,
+	_tsconfig: string,
 	checkerOptions: MetaCheckerOptions = {},
 	ts: typeof import('typescript/lib/tsserverlibrary') = require('typescript'),
 ) {
-	const tsconfig = (tsconfigPath as path.OsPath).replace(windowsPathReg, '/') as path.PosixPath;
+	const tsconfig = _tsconfig.replace(windowsPathReg, '/') as path.PosixPath;
 	return createComponentMetaCheckerWorker(
-		() => vue.createParsedCommandLine(ts, ts.sys, tsconfigPath),
+		() => vue.createParsedCommandLine(ts, ts.sys, tsconfig),
 		checkerOptions,
 		path.dirname(tsconfig),
 		tsconfig + '.global.vue',
@@ -152,11 +152,11 @@ export function baseCreate(
 			return _host[prop as keyof typeof _host];
 		},
 	}) as vue.TypeScriptLanguageHost;
-	const vueLanguages = ts ? vue.createLanguages(
+	const vueLanguages = vue.createLanguages(
+		ts,
 		host.getCompilationSettings(),
 		vueCompilerOptions,
-		ts,
-	) : [];
+	);
 	const core = vue.createLanguageContext(host, vueLanguages);
 	const tsLsHost = createLanguageServiceHost(core, ts, ts.sys);
 	const tsLs = ts.createLanguageService(tsLsHost);
diff --git a/packages/language-core/package.json b/packages/language-core/package.json
@@ -20,10 +20,13 @@
 		"computeds": "^0.0.1",
 		"minimatch": "^9.0.3",
 		"muggle-string": "^0.3.1",
+		"path-browserify": "^1.0.1",
 		"vue-template-compiler": "^2.7.14"
 	},
 	"devDependencies": {
 		"@types/minimatch": "^5.1.2",
+		"@types/node": "latest",
+		"@types/path-browserify": "^1.0.1",
 		"@vue/compiler-sfc": "^3.3.0"
 	},
 	"peerDependencies": {
diff --git a/packages/language-core/src/generators/script.ts b/packages/language-core/src/generators/script.ts
@@ -2,7 +2,7 @@ import { FileRangeCapabilities, MirrorBehaviorCapabilities } from '@volar/langua
 import * as SourceMaps from '@volar/source-map';
 import { Segment, getLength } from '@volar/source-map';
 import * as muggle from 'muggle-string';
-import { posix as path } from 'path';
+import * as path from 'path-browserify';
 import type * as ts from 'typescript/lib/tsserverlibrary';
 import type * as templateGen from '../generators/template';
 import type { ScriptRanges } from '../parsers/scriptRanges';
diff --git a/packages/language-core/src/languageModule.ts b/packages/language-core/src/languageModule.ts
@@ -1,5 +1,5 @@
 import type { Language } from '@volar/language-core';
-import { posix as path } from 'path';
+import * as path from 'path-browserify';
 import { getDefaultVueLanguagePlugins } from './plugins';
 import { VueFile } from './virtualFile/vueFile';
 import { VueCompilerOptions, VueLanguagePlugin } from './types';
@@ -118,9 +118,9 @@ export function createVueLanguage(
  * @deprecated planed to remove in 2.0, please use createVueLanguage instead of
  */
 export function createLanguages(
+	ts: typeof import('typescript/lib/tsserverlibrary'),
 	compilerOptions: ts.CompilerOptions = {},
 	vueCompilerOptions: Partial<VueCompilerOptions> = {},
-	ts: typeof import('typescript/lib/tsserverlibrary') = require('typescript'),
 	codegenStack: boolean = false,
 ): Language[] {
 	return [
diff --git a/packages/language-core/src/utils/ts.ts b/packages/language-core/src/utils/ts.ts
@@ -1,5 +1,5 @@
 import type * as ts from 'typescript/lib/tsserverlibrary';
-import * as path from 'path';
+import * as path from 'path-browserify';
 import type { RawVueCompilerOptions, VueCompilerOptions, VueLanguagePlugin } from '../types';
 
 export type ParsedCommandLine = ts.ParsedCommandLine & {
diff --git a/packages/language-plugin-pug/package.json b/packages/language-plugin-pug/package.json
@@ -13,6 +13,7 @@
 		"directory": "packages/language-plugin-pug"
 	},
 	"devDependencies": {
+		"@types/node": "latest",
 		"@vue/language-core": "1.8.22"
 	},
 	"dependencies": {
diff --git a/packages/language-server/src/languageServerPlugin.ts b/packages/language-server/src/languageServerPlugin.ts
@@ -41,10 +41,10 @@ export function createServerPlugin(connection: Connection) {
 				}
 
 				return vue.resolveConfig(
+					ts,
 					config,
 					ctx?.host.getCompilationSettings() ?? {},
 					vueOptions,
-					ts,
 					initOptions.codegenStack,
 				);
 
diff --git a/packages/language-service/package.json b/packages/language-service/package.json
@@ -36,6 +36,7 @@
 		"vscode-languageserver-textdocument": "^1.0.11"
 	},
 	"devDependencies": {
+		"@types/node": "latest",
 		"@volar/kit": "~1.10.9",
 		"vscode-languageserver-protocol": "^3.17.5",
 		"vscode-uri": "^3.0.8"
diff --git a/packages/language-service/src/languageService.ts b/packages/language-service/src/languageService.ts
@@ -36,15 +36,15 @@ export interface Settings {
 }
 
 export function resolveConfig(
+	ts: typeof import('typescript/lib/tsserverlibrary'),
 	config: Config,
 	compilerOptions: ts.CompilerOptions = {},
 	vueCompilerOptions: Partial<VueCompilerOptions> = {},
-	ts: typeof import('typescript/lib/tsserverlibrary') = require('typescript'),
 	codegenStack: boolean = false,
 ) {
 
 	const resolvedVueCompilerOptions = resolveVueCompilerOptions(vueCompilerOptions);
-	const vueLanguageModules = createLanguages(compilerOptions, resolvedVueCompilerOptions, ts, codegenStack);
+	const vueLanguageModules = createLanguages(ts, compilerOptions, resolvedVueCompilerOptions, codegenStack);
 
 	config.languages = Object.assign({}, vueLanguageModules, config.languages);
 	config.services = resolvePlugins(config.services, resolvedVueCompilerOptions);
diff --git a/packages/language-service/tests/utils/createTester.ts b/packages/language-service/tests/utils/createTester.ts
@@ -107,7 +107,7 @@ function createTester(root: string) {
 				},
 			}
 		},
-		resolveConfig({}),
+		resolveConfig(ts, {}),
 		host,
 	);
 
diff --git a/packages/language-service/tests/utils/format.ts b/packages/language-service/tests/utils/format.ts
@@ -1,8 +1,9 @@
 import { describe, expect, it } from 'vitest';
 import * as kit from '@volar/kit';
 import { resolveConfig } from '../../out';
+import * as ts from 'typescript';
 
-const formatter = kit.createFormatter(resolveConfig({}));
+const formatter = kit.createFormatter(resolveConfig(ts as any, {}));
 
 export function defineFormatTest(options: {
 	title: string;
diff --git a/packages/tsc/package.json b/packages/tsc/package.json
@@ -23,5 +23,8 @@
 	},
 	"peerDependencies": {
 		"typescript": "*"
+	},
+	"devDependencies": {
+		"@types/node": "latest"
 	}
 }
diff --git a/packages/tsc/src/index.ts b/packages/tsc/src/index.ts
@@ -81,9 +81,9 @@ export function createProgram(options: ts.CreateProgramOptions) {
 		const languageContext = vue.createLanguageContext(
 			languageHost,
 			vue.createLanguages(
+				ts,
 				languageHost.getCompilationSettings(),
 				vueCompilerOptions,
-				ts,
 			),
 		);
 		const languageServiceHost = volarTs.createLanguageServiceHost(languageContext, ts, ts.sys);
@@ -97,7 +97,7 @@ export function createProgram(options: ts.CreateProgramOptions) {
 		function getVueCompilerOptions(): Partial<vue.VueCompilerOptions> {
 			const tsConfig = ctx.options.options.configFilePath;
 			if (typeof tsConfig === 'string') {
-				return vue.createParsedCommandLine(ts as any, ts.sys, tsConfig).vueOptions;
+				return vue.createParsedCommandLine(ts as any, ts.sys, tsConfig.replace(windowsPathReg, '/')).vueOptions;
 			}
 			return {};
 		}
diff --git a/packages/tsc/tests/__snapshots__/dts.spec.ts.snap b/packages/tsc/tests/__snapshots__/dts.spec.ts.snap
@@ -126,13 +126,13 @@ exports[`vue-tsc-dts > Input: reference-type-events/component.vue, Output: refer
     }) => void;
     baz: () => void;
 }, string, import(\\"vue\\").VNodeProps & import(\\"vue\\").AllowedComponentProps & import(\\"vue\\").ComponentCustomProps, Readonly<import(\\"vue\\").ExtractPropTypes<{}>> & {
-    onFoo?: (data?: {
-        foo: string;
-    }) => any;
     onBar?: (value: {
         arg1: number;
         arg2?: any;
     }) => any;
+    onFoo?: (data?: {
+        foo: string;
+    }) => any;
     onBaz?: () => any;
 }, {}, {}>;
 export default _default;
diff --git a/packages/typescript-plugin/src/index.ts b/packages/typescript-plugin/src/index.ts
@@ -3,6 +3,7 @@ import * as vue from '@vue/language-core';
 import type * as ts from 'typescript/lib/tsserverlibrary';
 
 const externalFiles = new WeakMap<ts.server.Project, string[]>();
+const windowsPathReg = /\\/g;
 
 const init: ts.server.PluginModuleFactory = (modules) => {
 	const { typescript: ts } = modules;
@@ -11,9 +12,9 @@ const init: ts.server.PluginModuleFactory = (modules) => {
 
 			const virtualFiles = vue.createVirtualFiles(
 				vue.createLanguages(
+					ts,
 					info.languageServiceHost.getCompilationSettings(),
 					getVueCompilerOptions(),
-					ts,
 				),
 			);
 
@@ -35,7 +36,7 @@ const init: ts.server.PluginModuleFactory = (modules) => {
 			function getVueCompilerOptions() {
 				if (info.project.projectKind === ts.server.ProjectKind.Configured) {
 					const tsconfig = info.project.getProjectName();
-					return vue.createParsedCommandLine(ts, ts.sys, tsconfig).vueOptions;
+					return vue.createParsedCommandLine(ts, ts.sys, tsconfig.replace(windowsPathReg, '/')).vueOptions;
 				}
 				else {
 					return vue.createParsedCommandLineByJson(ts, ts.sys, info.languageServiceHost.getCurrentDirectory(), {}).vueOptions;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -25,5 +25,8 @@`
`25`	`25`	`"typescript": {`
`26`	`26`	`"optional": true`
`27`	`27`	`}`
	`28`	`+ },`
	`29`	`+ "devDependencies": {`
	`30`	`+ "@types/node": "latest"`
`28`	`31`	`}`
`29`	`32`	`}`