feat: add option to wrap component options by Vue.extend

close #1337
vuejs · Jul 16, 2022 · 2564835 · 2564835
1 parent 0f43937
commit 2564835
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 6 deletions.
diff --git a/extensions/vscode-vue-language-features/schemas/vue-tsconfig.schema.json b/extensions/vscode-vue-language-features/schemas/vue-tsconfig.schema.json
@@ -41,8 +41,18 @@
 						false,
 						"onlyJs"
 					],
+					"default": "onlyJs",
 					"markdownDescription": "Implicit wrap object literal component options export with `defineComponent()`."
 				},
+				"experimentalImplicitWrapComponentOptionsWithVue2Extend": {
+					"enum": [
+						true,
+						false,
+						"onlyJs"
+					],
+					"default": false,
+					"markdownDescription": "Implicit wrap object literal component options export with `Vue.extend()`."
+				},
 				"experimentalDowngradePropsAndEmitsToSetupReturnOnScriptSetup": {
 					"enum": [
 						true,

diff --git a/packages/vue-code-gen/src/generators/script.ts b/packages/vue-code-gen/src/generators/script.ts
@@ -29,7 +29,7 @@ export function generate(
 	scriptSetupRanges: ScriptSetupRanges | undefined,
 	getHtmlGen: () => ReturnType<typeof templateGen['generate']> | undefined,
 	getStyleBindTexts: () => string[],
-	shimComponentOptions: boolean,
+	shimComponentOptions: 'defineComponent' | 'Vue.extend' | false,
 	downgradePropsAndEmitsToSetupReturnOnScriptSetup: boolean,
 	vueVersion: number,
 ) {
@@ -208,7 +208,12 @@ export function generate(
 			}
 			if (isExportRawObject && shimComponentOptions && scriptRanges?.exportDefault) {
 				addVirtualCode('script', 0, scriptRanges.exportDefault.expression.start);
-				codeGen.addText(`(await import('${vueLibName}')).defineComponent(`);
+				if (shimComponentOptions === 'defineComponent') {
+					codeGen.addText(`(await import('${vueLibName}')).defineComponent(`);
+				}
+				else {
+					codeGen.addText(`(await import('vue')).default.extend(`);
+				}
 				addVirtualCode('script', scriptRanges.exportDefault.expression.start, scriptRanges.exportDefault.expression.end);
 				codeGen.addText(`)`);
 				addVirtualCode('script', scriptRanges.exportDefault.expression.end, script.content.length);

diff --git a/packages/vue-code-gen/src/index.ts b/packages/vue-code-gen/src/index.ts
@@ -22,7 +22,7 @@ export function generateSFCScriptTypeCheckCode(
 	scriptLang: 'js' | 'jsx' | 'ts' | 'tsx',
 	scriptCode: string | undefined,
 	scriptSetupCode: string | undefined,
-	shimComponentOptions: boolean,
+	shimComponentOptions: 'defineComponent' | 'Vue.extend' | false,
 	downgradePropsAndEmitsToSetupReturnOnScriptSetup: boolean,
 	vueVersion: number,
 	templateAst?: CompilerDOM.RootNode,

diff --git a/packages/vue-typescript/src/plugins/vue-typescript-scripts.ts b/packages/vue-typescript/src/plugins/vue-typescript-scripts.ts
@@ -23,6 +23,31 @@ export default function (
 
 		getEmbeddedFile(fileName, sfc, i) {
 
+			let shimComponentOptionsMode: 'defineComponent' | 'Vue.extend' | false = false;
+
+			if (
+				(compilerOptions.experimentalImplicitWrapComponentOptionsWithDefineComponent ?? 'onlyJs') === 'onlyJs'
+					? lang.value === 'js' || lang.value === 'jsx'
+					: !!compilerOptions.experimentalImplicitWrapComponentOptionsWithDefineComponent
+			) {
+				shimComponentOptionsMode = 'defineComponent';
+			}
+			if (
+				(compilerOptions.experimentalImplicitWrapComponentOptionsWithVue2Extend ?? 'onlyJs') === 'onlyJs'
+					? lang.value === 'js' || lang.value === 'jsx'
+					: !!compilerOptions.experimentalImplicitWrapComponentOptionsWithVue2Extend
+			) {
+				shimComponentOptionsMode = 'Vue.extend';
+			}
+
+			// true override 'onlyJs'
+			if (compilerOptions.experimentalImplicitWrapComponentOptionsWithDefineComponent === true) {
+				shimComponentOptionsMode = 'defineComponent';
+			}
+			if (compilerOptions.experimentalImplicitWrapComponentOptionsWithVue2Extend === true) {
+				shimComponentOptionsMode = 'Vue.extend';
+			}
+
 			const codeGen = genScript(
 				i === 0 ? 'script' : 'template',
 				fileName,
@@ -38,9 +63,7 @@ export default function (
 					}
 					return bindTexts;
 				},
-				(compilerOptions.experimentalImplicitWrapComponentOptionsWithDefineComponent ?? 'onlyJs') === 'onlyJs'
-					? lang.value === 'js' || lang.value === 'jsx'
-					: !!compilerOptions.experimentalImplicitWrapComponentOptionsWithDefineComponent,
+				shimComponentOptionsMode,
 				(compilerOptions.experimentalDowngradePropsAndEmitsToSetupReturnOnScriptSetup ?? 'onlyJs') === 'onlyJs'
 					? lang.value === 'js' || lang.value === 'jsx'
 					: !!compilerOptions.experimentalDowngradePropsAndEmitsToSetupReturnOnScriptSetup,

diff --git a/packages/vue-typescript/src/types.ts b/packages/vue-typescript/src/types.ts
@@ -13,6 +13,7 @@ export interface VueCompilerOptions {
 	// experimental
 	experimentalRuntimeMode?: 'runtime-dom' | 'runtime-uni-app';
 	experimentalImplicitWrapComponentOptionsWithDefineComponent?: boolean | 'onlyJs';
+	experimentalImplicitWrapComponentOptionsWithVue2Extend?: boolean | 'onlyJs';
 	experimentalDowngradePropsAndEmitsToSetupReturnOnScriptSetup?: boolean | 'onlyJs';
 	experimentalTemplateCompilerOptions?: any;
 	experimentalTemplateCompilerOptionsRequirePath?: string;