refactor(vscode) add premium feature settings

Author: johnsoncodehk

extensions/vscode/lib/generated-meta.ts

@@ -4,20 +4,27 @@
 // Meta info
 export const publisher = 'Vue';
 export const name = 'volar';
-export const version = '3.0.0-beta.4';
+export const version = '3.0.1';
 export const displayName = 'Vue (Official)';
 export const description = 'Language Support for Vue';
 export const extensionId = `${publisher}.${name}`;
 
 /**
  * Type union of all commands
  */
-export type CommandKey = 'vue.action.restartServer';
+export type CommandKey =
+	| 'vue.welcome'
+	| 'vue.action.restartServer';
 
 /**
  * Commands map registed by `Vue.volar`
  */
 export const commands = {
+	/**
+	 * %command.welcome%
+	 * @value `vue.welcome`
+	 */
+	welcome: 'vue.welcome',
 	/**
 	 * %command.action.restartServer%
 	 * @value `vue.action.restartServer`
@@ -30,6 +37,9 @@ export const commands = {
  */
 export type ConfigKey =
 	| 'vue.trace.server'
+	| 'vue.editor.focusMode'
+	| 'vue.editor.reactivityVisualization'
+	| 'vue.editor.templateInterpolationDecorators'
 	| 'vue.server.includeLanguages'
 	| 'vue.codeActions.askNewComponentName'
 	| 'vue.suggest.componentNameCasing'
@@ -49,6 +59,9 @@ export type ConfigKey =
 
 export interface ConfigKeyTypeMap {
 	'vue.trace.server': 'off' | 'messages' | 'verbose';
+	'vue.editor.focusMode': boolean;
+	'vue.editor.reactivityVisualization': boolean;
+	'vue.editor.templateInterpolationDecorators': boolean;
 	'vue.server.includeLanguages': string[];
 	'vue.codeActions.askNewComponentName': boolean;
 	'vue.suggest.componentNameCasing': 'preferKebabCase' | 'preferPascalCase' | 'alwaysKebabCase' | 'alwaysPascalCase';
@@ -76,6 +89,9 @@ export interface ConfigKeyTypeMap {
 
 export interface ConfigShorthandMap {
 	traceServer: 'vue.trace.server';
+	editorFocusMode: 'vue.editor.focusMode';
+	editorReactivityVisualization: 'vue.editor.reactivityVisualization';
+	editorTemplateInterpolationDecorators: 'vue.editor.templateInterpolationDecorators';
 	serverIncludeLanguages: 'vue.server.includeLanguages';
 	codeActionsAskNewComponentName: 'vue.codeActions.askNewComponentName';
 	suggestComponentNameCasing: 'vue.suggest.componentNameCasing';
@@ -96,6 +112,9 @@ export interface ConfigShorthandMap {
 
 export interface ConfigShorthandTypeMap {
 	traceServer: 'off' | 'messages' | 'verbose';
+	editorFocusMode: boolean;
+	editorReactivityVisualization: boolean;
+	editorTemplateInterpolationDecorators: boolean;
 	serverIncludeLanguages: string[];
 	codeActionsAskNewComponentName: boolean;
 	suggestComponentNameCasing: 'preferKebabCase' | 'preferPascalCase' | 'alwaysKebabCase' | 'alwaysPascalCase';
@@ -139,6 +158,33 @@ export const configs = {
 		key: 'vue.trace.server',
 		default: 'off',
 	} as ConfigItem<'vue.trace.server'>,
+	/**
+	 * @key `vue.editor.focusMode`
+	 * @default `true`
+	 * @type `boolean`
+	 */
+	editorFocusMode: {
+		key: 'vue.editor.focusMode',
+		default: true,
+	} as ConfigItem<'vue.editor.focusMode'>,
+	/**
+	 * @key `vue.editor.reactivityVisualization`
+	 * @default `true`
+	 * @type `boolean`
+	 */
+	editorReactivityVisualization: {
+		key: 'vue.editor.reactivityVisualization',
+		default: true,
+	} as ConfigItem<'vue.editor.reactivityVisualization'>,
+	/**
+	 * @key `vue.editor.templateInterpolationDecorators`
+	 * @default `true`
+	 * @type `boolean`
+	 */
+	editorTemplateInterpolationDecorators: {
+		key: 'vue.editor.templateInterpolationDecorators',
+		default: true,
+	} as ConfigItem<'vue.editor.templateInterpolationDecorators'>,
 	/**
 	 * @key `vue.server.includeLanguages`
 	 * @default `["vue"]`
@@ -287,6 +333,9 @@ export const configs = {
 
 export interface ScopedConfigKeyTypeMap {
 	'trace.server': 'off' | 'messages' | 'verbose';
+	'editor.focusMode': boolean;
+	'editor.reactivityVisualization': boolean;
+	'editor.templateInterpolationDecorators': boolean;
 	'server.includeLanguages': string[];
 	'codeActions.askNewComponentName': boolean;
 	'suggest.componentNameCasing': 'preferKebabCase' | 'preferPascalCase' | 'alwaysKebabCase' | 'alwaysPascalCase';
@@ -316,6 +365,9 @@ export const scopedConfigs = {
 	scope: 'vue',
 	defaults: {
 		'trace.server': 'off',
+		'editor.focusMode': true,
+		'editor.reactivityVisualization': true,
+		'editor.templateInterpolationDecorators': true,
 		'server.includeLanguages': ['vue'],
 		'codeActions.askNewComponentName': true,
 		'suggest.componentNameCasing': 'preferPascalCase',
@@ -340,6 +392,11 @@ export interface NestedConfigs {
 		'trace': {
 			'server': 'off' | 'messages' | 'verbose';
 		};
+		'editor': {
+			'focusMode': boolean;
+			'reactivityVisualization': boolean;
+			'templateInterpolationDecorators': boolean;
+		};
 		'server': {
 			'includeLanguages': string[];
 		};
@@ -388,6 +445,11 @@ export interface NestedScopedConfigs {
 	'trace': {
 		'server': 'off' | 'messages' | 'verbose';
 	};
+	'editor': {
+		'focusMode': boolean;
+		'reactivityVisualization': boolean;
+		'templateInterpolationDecorators': boolean;
+	};
 	'server': {
 		'includeLanguages': string[];
 	};

extensions/vscode/lib/welcome.ts

@@ -23,11 +23,6 @@ export function activate() {
 				case 'verifySponsor':
 					vscode.commands.executeCommand('vue.action.verify');
 					break;
-				case 'openVideo':
-					vscode.env.openExternal(
-						vscode.Uri.parse(`https://www.youtube.com/watch?v=${message.id}`),
-					);
-					break;
 			}
 		});
 

extensions/vscode/package.json

@@ -237,6 +237,21 @@
 					"default": "off",
 					"markdownDescription": "%configuration.trace.server%"
 				},
+				"vue.editor.focusMode": {
+					"type": "boolean",
+					"default": true,
+					"markdownDescription": "Sponsor this extension to unlock premium features. [Learn more](https://youtu.be/RcPcO4_Ct_U)"
+				},
+				"vue.editor.reactivityVisualization": {
+					"type": "boolean",
+					"default": true,
+					"markdownDescription": "Sponsor this extension to unlock premium features. [Learn more](https://youtu.be/RcPcO4_Ct_U)"
+				},
+				"vue.editor.templateInterpolationDecorators": {
+					"type": "boolean",
+					"default": true,
+					"markdownDescription": "Sponsor this extension to unlock premium features. [Learn more](https://youtu.be/RcPcO4_Ct_U)"
+				},
 				"vue.server.includeLanguages": {
 					"type": "array",
 					"items": {
@@ -359,13 +374,13 @@
 		},
 		"commands": [
 			{
-				"command": "vue.action.restartServer",
-				"title": "%command.action.restartServer%",
+				"command": "vue.welcome",
+				"title": "%command.welcome%",
 				"category": "Vue"
 			},
 			{
-				"command": "vue.welcome",
-				"title": "%command.welcome%",
+				"command": "vue.action.restartServer",
+				"title": "%command.action.restartServer%",
 				"category": "Vue"
 			}
 		],