feat: support for volar.js devtools

package.json

@@ -22,7 +22,7 @@
 	},
 	"devDependencies": {
 		"@types/node": "latest",
-		"@volar/language-service": "1.5.4",
+		"@volar/language-service": "1.6.0",
 		"typescript": "latest",
 		"vite": "latest",
 		"vitest": "latest"

packages/vscode-vue/package.json

@@ -610,11 +610,6 @@
 				"title": "Write Virtual Files",
 				"category": "Volar (Debug)"
 			},
-			{
-				"command": "volar.action.showVirtualFiles",
-				"title": "Show Virtual Files",
-				"category": "Volar (Debug)"
-			},
 			{
 				"command": "volar.action.serverStats",
 				"title": "Server Stats",
@@ -660,10 +655,6 @@
 					"command": "volar.action.writeVirtualFiles",
 					"when": "volar.activated"
 				},
-				{
-					"command": "volar.action.showVirtualFiles",
-					"when": "volar.activated"
-				},
 				{
 					"command": "volar.action.splitEditors",
 					"when": "editorLangId == vue"
@@ -741,8 +732,8 @@
 	"devDependencies": {
 		"@types/semver": "^7.3.13",
 		"@types/vscode": "1.67.0",
-		"@volar/source-map": "1.5.4",
-		"@volar/vscode": "1.5.4",
+		"@volar/source-map": "1.6.0",
+		"@volar/vscode": "1.6.0",
 		"@vue/language-core": "1.7.0",
 		"@vue/language-server": "1.7.0",
 		"esbuild": "0.15.18",

packages/vscode-vue/src/common.ts

@@ -1,25 +1,24 @@
 import {
 	activateAutoInsertion,
-	activateShowVirtualFiles,
-	activateWriteVirtualFiles,
 	activateFindFileReferences,
 	activateReloadProjects,
 	activateServerStats,
-	activateTsConfigStatusItem,
 	activateServerSys,
+	activateTsConfigStatusItem,
 	activateTsVersionStatusItem,
+	activateWriteVirtualFiles,
 	getTsdk,
-	takeOverModeActive,
+	takeOverModeActive
 } from '@volar/vscode';
 import { DiagnosticModel, ServerMode, VueServerInitializationOptions } from '@vue/language-server';
 import * as vscode from 'vscode';
 import * as lsp from 'vscode-languageclient';
+import { config } from './config';
 import * as componentMeta from './features/componentMeta';
 import * as doctor from './features/doctor';
 import * as nameCasing from './features/nameCasing';
 import * as savingTime from './features/savingTime';
 import * as splitEditors from './features/splitEditors';
-import { config } from './config';
 
 let semanticClient: lsp.BaseLanguageClient;
 let syntacticClient: lsp.BaseLanguageClient;
@@ -102,7 +101,6 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 	};
 
 	activateAutoInsertion([syntacticClient, semanticClient], document => supportedLanguages[document.languageId]);
-	activateShowVirtualFiles('volar.action.showVirtualFiles', semanticClient);
 	activateWriteVirtualFiles('volar.action.writeVirtualFiles', semanticClient);
 	activateFindFileReferences('volar.vue.findAllFileReferences', semanticClient);
 	activateTsConfigStatusItem('volar.openTsconfig', semanticClient,

packages/vscode-vue/src/nodeClientMain.ts

@@ -5,15 +5,18 @@ import * as vscode from 'vscode';
 import * as lsp from 'vscode-languageclient/node';
 import { activate as commonActivate, deactivate as commonDeactivate, getDocumentSelector } from './common';
 import { middleware } from './middleware';
-import { ServerMode } from '@vue/language-server';
+import * as serverLib from '@vue/language-server';
 import { config } from './config';
+import { createExports } from '@volar/vscode';
 
-export function activate(context: vscode.ExtensionContext) {
+export async function activate(context: vscode.ExtensionContext) {
 
 	const cancellationPipeName = path.join(os.tmpdir(), `vscode-${context.extension.id}-cancellation-pipe.tmp`);
-	const documentSelector = getDocumentSelector(context, ServerMode.Semantic);
+	const documentSelector = getDocumentSelector(context, serverLib.ServerMode.Semantic);
 	let cancellationPipeUpdateKey: string | undefined;
 
+	const languageClients: lsp.LanguageClient[] = [];
+
 	vscode.workspace.onDidChangeTextDocument((e) => {
 		let key = e.document.uri.toString() + '|' + e.document.version;
 		if (cancellationPipeUpdateKey === undefined) {
@@ -26,7 +29,7 @@ export function activate(context: vscode.ExtensionContext) {
 		}
 	});
 
-	return commonActivate(context, (
+	await commonActivate(context, (
 		id,
 		name,
 		documentSelector,
@@ -98,10 +101,19 @@ export function activate(context: vscode.ExtensionContext) {
 		);
 		client.start();
 
+		languageClients.push(client);
+
 		updateProviders(client);
 
 		return client;
 	});
+
+	return createExports({
+		devtools: true,
+		codegenStackSupport: true,
+		languageClients,
+		serverLib: serverLib as any,
+	});
 }
 
 export function deactivate(): Thenable<any> | undefined {

packages/vue-component-meta/package.json

@@ -13,7 +13,7 @@
 		"directory": "packages/vue-component-meta"
 	},
 	"dependencies": {
-		"@volar/language-core": "1.5.4",
+		"@volar/language-core": "1.6.0",
 		"@vue/language-core": "1.7.0",
 		"typesafe-path": "^0.2.2",
 		"vue-component-type-helpers": "1.7.0"

packages/vue-language-core/package.json

@@ -13,13 +13,13 @@
 		"directory": "packages/vue-language-core"
 	},
 	"dependencies": {
-		"@volar/language-core": "1.5.4",
-		"@volar/source-map": "1.5.4",
+		"@volar/language-core": "1.6.0",
+		"@volar/source-map": "1.6.0",
 		"@vue/compiler-dom": "^3.3.0-beta.3",
 		"@vue/reactivity": "^3.3.0-beta.3",
 		"@vue/shared": "^3.3.0-beta.3",
 		"minimatch": "^9.0.0",
-		"muggle-string": "^0.2.2",
+		"muggle-string": "^0.3.1",
 		"vue-template-compiler": "^2.7.14"
 	},
 	"devDependencies": {

packages/vue-language-core/src/generators/script.ts

@@ -30,9 +30,10 @@ export function generate(
 	compilerOptions: ts.CompilerOptions,
 	vueCompilerOptions: VueCompilerOptions,
 	sharedTypesImport: string,
+	codegenStack: boolean,
 ) {
 
-	const codes: Segment<FileRangeCapabilities>[] = [];
+	const [codes, codeStacks] = codegenStack ? muggle.track([] as Segment<FileRangeCapabilities>[]) : [[], []];
 	const mirrorBehaviorMappings: SourceMaps.Mapping<[MirrorBehaviorCapabilities, MirrorBehaviorCapabilities]>[] = [];
 
 	//#region monkey fix: https://github.com/vuejs/language-tools/pull/2113
@@ -108,6 +109,7 @@ export function generate(
 
 	return {
 		codes,
+		codeStacks,
 		mirrorBehaviorMappings,
 	};
 
@@ -860,9 +862,14 @@ declare function defineProp<T>(value?: T | (() => T), required?: boolean, rest?:
 		codes.push(`/* CSS variable injection end */\n`);
 
 		if (htmlGen) {
+			muggle.setTracking(false);
 			for (const s of htmlGen.codes) {
 				codes.push(s);
 			}
+			muggle.setTracking(true);
+			for (const s of htmlGen.codeStacks) {
+				codeStacks.push(s);
+			}
 		}
 
 		if (!htmlGen) {
@@ -987,14 +994,17 @@ declare function defineProp<T>(value?: T | (() => T), required?: boolean, rest?:
 		return usageVars;
 	}
 	function addVirtualCode(vueTag: 'script' | 'scriptSetup', start: number, end?: number) {
+		muggle.offsetStack();
 		codes.push([
 			sfc[vueTag]!.content.substring(start, end),
 			vueTag,
 			start,
 			FileRangeCapabilities.full, // diagnostic also working for setup() returns unused in template checking
 		]);
+		muggle.resetOffsetStack();
 	}
 	function addExtraReferenceVirtualCode(vueTag: 'script' | 'scriptSetup', start: number, end: number) {
+		muggle.offsetStack();
 		codes.push([
 			sfc[vueTag]!.content.substring(start, end),
 			vueTag,
@@ -1005,6 +1015,7 @@ declare function defineProp<T>(value?: T | (() => T), required?: boolean, rest?:
 				rename: true,
 			},
 		]);
+		muggle.resetOffsetStack();
 	}
 }
 

packages/vue-language-core/src/generators/template.ts

@@ -71,11 +71,12 @@ export function generate(
 	hasScriptSetupSlots: boolean,
 	sharedTypesImport: string,
 	cssScopedClasses: string[] = [],
+	codegenStack: boolean,
 ) {
 
-	const codes: Code[] = [];
-	const formatCodes: Code[] = [];
-	const cssCodes: Code[] = [];
+	const [codes, codeStacks] = codegenStack ? muggle.track([] as Code[]) : [[], []];
+	const [formatCodes, formatCodeStacks] = codegenStack ? muggle.track([] as Code[]) : [[], []];
+	const [cssCodes, cssCodeStacks] = codegenStack ? muggle.track([] as Code[]) : [[], []];
 	const slots = new Map<string, {
 		varName: string,
 		loc: [number, number],
@@ -113,8 +114,11 @@ export function generate(
 
 	return {
 		codes,
+		codeStacks,
 		formatCodes,
+		formatCodeStacks,
 		cssCodes,
+		cssCodeStacks,
 		tagNames,
 		identifiers,
 		hasSlot,

packages/vue-language-core/src/languageModule.ts

@@ -11,6 +11,7 @@ export function createLanguage(
 	compilerOptions: ts.CompilerOptions = {},
 	vueCompilerOptions = resolveVueCompilerOptions({}),
 	ts: typeof import('typescript/lib/tsserverlibrary') = require('typescript'),
+	codegenStack: boolean = false,
 ): Language {
 
 	patchResolveModuleNames(ts, vueCompilerOptions);
@@ -19,6 +20,7 @@ export function createLanguage(
 		ts,
 		compilerOptions,
 		vueCompilerOptions,
+		codegenStack,
 	);
 	const sharedTypesSnapshot = ts.ScriptSnapshot.fromString(sharedTypes.getTypesCode(vueCompilerOptions));
 	const languageModule: Language = {
@@ -30,7 +32,7 @@ export function createLanguage(
 					&& vueCompilerOptions.extensions.some(ext => fileName.endsWith(ext))
 				)
 			) {
-				return new VueFile(fileName, snapshot, ts, vueLanguagePlugin);
+				return new VueFile(fileName, snapshot, ts, vueLanguagePlugin, codegenStack);
 			}
 		},
 		updateVirtualFile(sourceFile: VueFile, snapshot) {
@@ -84,9 +86,10 @@ export function createLanguages(
 	compilerOptions: ts.CompilerOptions = {},
 	vueCompilerOptions = resolveVueCompilerOptions({}),
 	ts: typeof import('typescript/lib/tsserverlibrary') = require('typescript'),
+	codegenStack: boolean = false,
 ): Language[] {
 	return [
-		createLanguage(compilerOptions, vueCompilerOptions, ts),
+		createLanguage(compilerOptions, vueCompilerOptions, ts, codegenStack),
 		...vueCompilerOptions.experimentalAdditionalLanguageModules?.map(module => require(module)) ?? [],
 	];
 }

packages/vue-language-core/src/plugins.ts

@@ -16,6 +16,7 @@ export function getDefaultVueLanguagePlugins(
 	ts: typeof import('typescript/lib/tsserverlibrary'),
 	compilerOptions: ts.CompilerOptions,
 	vueCompilerOptions: VueCompilerOptions,
+	codegenStack: boolean,
 ) {
 
 	const plugins: VueLanguagePlugin[] = [
@@ -37,6 +38,7 @@ export function getDefaultVueLanguagePlugins(
 		},
 		compilerOptions,
 		vueCompilerOptions,
+		codegenStack,
 	};
 	const pluginInstances = plugins
 		.map(plugin => plugin(pluginCtx))

packages/vue-language-core/src/plugins/vue-tsx.ts

@@ -9,8 +9,9 @@ import { TextRange } from '../types';
 import { parseCssClassNames } from '../utils/parseCssClassNames';
 import { parseCssVars } from '../utils/parseCssVars';
 import * as sharedTypes from '../utils/directorySharedTypes';
+import * as muggle from 'muggle-string';
 
-const plugin: VueLanguagePlugin = ({ modules, vueCompilerOptions, compilerOptions }) => {
+const plugin: VueLanguagePlugin = ({ modules, vueCompilerOptions, compilerOptions, codegenStack }) => {
 
 	const ts = modules.typescript;
 	const instances = new WeakMap<Sfc, ReturnType<typeof createTsx>>();
@@ -52,7 +53,9 @@ const plugin: VueLanguagePlugin = ({ modules, vueCompilerOptions, compilerOption
 				};
 				const tsx = _tsx.tsxGen.value;
 				if (tsx) {
-					embeddedFile.content = [...tsx.codes];
+					const [content, contentStacks] = codegenStack ? muggle.track([...tsx.codes], [...tsx.codeStacks]) : [[...tsx.codes], [...tsx.codeStacks]];
+					embeddedFile.content = content;
+					embeddedFile.contentStacks = contentStacks;
 					embeddedFile.mirrorBehaviorMappings = [...tsx.mirrorBehaviorMappings];
 				}
 			}
@@ -69,7 +72,9 @@ const plugin: VueLanguagePlugin = ({ modules, vueCompilerOptions, compilerOption
 				};
 
 				if (_tsx.htmlGen.value) {
-					embeddedFile.content = [..._tsx.htmlGen.value.formatCodes];
+					const [content, contentStacks] = codegenStack ? muggle.track([..._tsx.htmlGen.value.formatCodes], [..._tsx.htmlGen.value.formatCodeStacks]) : [[..._tsx.htmlGen.value.formatCodes], [..._tsx.htmlGen.value.formatCodeStacks]];
+					embeddedFile.content = content;
+					embeddedFile.contentStacks = contentStacks;
 				}
 
 				for (const cssVar of _tsx.cssVars.value) {
@@ -91,7 +96,9 @@ const plugin: VueLanguagePlugin = ({ modules, vueCompilerOptions, compilerOption
 				embeddedFile.parentFileName = fileName + '.template.' + sfc.template?.lang;
 
 				if (_tsx.htmlGen.value) {
-					embeddedFile.content = [..._tsx.htmlGen.value.cssCodes];
+					const [content, contentStacks] = codegenStack ? muggle.track([..._tsx.htmlGen.value.cssCodes], [..._tsx.htmlGen.value.cssCodeStacks]) : [[..._tsx.htmlGen.value.cssCodes], [..._tsx.htmlGen.value.cssCodeStacks]];
+					embeddedFile.content = content;
+					embeddedFile.contentStacks = contentStacks;
 				}
 
 				// for color pickers support
@@ -146,6 +153,7 @@ const plugin: VueLanguagePlugin = ({ modules, vueCompilerOptions, compilerOption
 				hasScriptSetupSlots.value,
 				sharedTypesImport,
 				Object.values(cssScopedClasses.value).map(style => style.classNames).flat(),
+				codegenStack,
 			);
 		});
 		const hasScriptSetupSlots = ref(false); // remove when https://github.com/vuejs/core/pull/5912 merged
@@ -165,6 +173,7 @@ const plugin: VueLanguagePlugin = ({ modules, vueCompilerOptions, compilerOption
 				compilerOptions,
 				vueCompilerOptions,
 				sharedTypesImport,
+				codegenStack,
 			);
 		});