feat: add defineOptions for script-setup (#5932)

* feat: add unplugin-vue-define-options

* feat: add jest support

build/full-bundle.ts

@@ -3,6 +3,7 @@ import { nodeResolve } from '@rollup/plugin-node-resolve'
 import { rollup } from 'rollup'
 import commonjs from '@rollup/plugin-commonjs'
 import vue from '@vitejs/plugin-vue'
+import DefineOptions from 'unplugin-vue-define-options/vite'
 import esbuild from 'rollup-plugin-esbuild'
 import replace from '@rollup/plugin-replace'
 import filesize from 'rollup-plugin-filesize'
@@ -30,6 +31,7 @@ async function buildFullEntry(minify: boolean) {
     input: path.resolve(epRoot, 'index.ts'),
     plugins: [
       ElementPlusAlias(),
+      DefineOptions(),
       vue({
         isProduction: true,
       }) as Plugin,

build/modules.ts

@@ -1,5 +1,6 @@
 import { rollup } from 'rollup'
 import vue from '@vitejs/plugin-vue'
+import DefineOptions from 'unplugin-vue-define-options/vite'
 import css from 'rollup-plugin-css-only'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
@@ -27,6 +28,7 @@ export const buildModules = async () => {
     plugins: [
       ElementPlusAlias(),
       css(),
+      DefineOptions(),
       vue({
         isProduction: false,
       }),

build/vue-jest-transformer.js

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const transfomer = require('vue-jest')
+const { transform } = require('unplugin-vue-define-options')
+
+module.exports = {
+  getCacheKey: transfomer.getCacheKey,
+  process(src, filename, config) {
+    src = transform(src, filename)?.code || src
+    return transfomer.process(src, filename, config)
+  },
+}

docs/vite.config.ts

@@ -1,6 +1,7 @@
 import path from 'path'
 import Inspect from 'vite-plugin-inspect'
 import { defineConfig } from 'vite'
+import DefineOptions from 'unplugin-vue-define-options/vite'
 import WindiCSS from 'vite-plugin-windicss'
 import mkcert from 'vite-plugin-mkcert'
 import glob from 'fast-glob'
@@ -69,6 +70,8 @@ export default async () => {
       },
     },
     plugins: [
+      DefineOptions(),
+
       // https://github.com/antfu/unplugin-vue-components
       Components({
         // custom resolvers

jest.config.js

@@ -1,3 +1,6 @@
+/**
+ * @type import('@jest/types').Config.InitialOptions
+ */
 module.exports = {
   globals: {
     // work around: https://github.com/kulshekhar/ts-jest/issues/748#issuecomment-423528659
@@ -14,9 +17,9 @@ module.exports = {
   transform: {
     // Doesn't support jsx/tsx since sucrase doesn't support Vue JSX
     '\\.(j|t)s$': '@sucrase/jest-plugin',
-    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.vue$': '<rootDir>/build/vue-jest-transformer.js',
   },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'vue'],
   // u can change this option to a more specific folder for test single component or util when dev
   // for example, ['<rootDir>/packages/components/input']
   roots: ['<rootDir>'],

package.json

@@ -126,6 +126,7 @@
     "ts-morph": "13.0.3",
     "type-fest": "2.11.2",
     "typescript": "4.5.5",
+    "unplugin-vue-define-options": "0.0.6",
     "vue": "3.2.30",
     "vue-jest": "5.0.0-alpha.10",
     "vue-router": "4.0.12",

play/global.d.ts

@@ -0,0 +1,110 @@
+// GlobalComponents for Volar
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElAffix: typeof import('../packages/element-plus')['ElAffix']
+    ElAlert: typeof import('../packages/element-plus')['ElAlert']
+    ElAside: typeof import('../packages/element-plus')['ElAside']
+    ElAutocomplete: typeof import('../packages/element-plus')['ElAutocomplete']
+    ElAvatar: typeof import('../packages/element-plus')['ElAvatar']
+    ElBacktop: typeof import('../packages/element-plus')['ElBacktop']
+    ElBadge: typeof import('../packages/element-plus')['ElBadge']
+    ElBreadcrumb: typeof import('../packages/element-plus')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('../packages/element-plus')['ElBreadcrumbItem']
+    ElButton: typeof import('../packages/element-plus')['ElButton']
+    ElButtonGroup: typeof import('../packages/element-plus')['ElButtonGroup']
+    ElCalendar: typeof import('../packages/element-plus')['ElCalendar']
+    ElCard: typeof import('../packages/element-plus')['ElCard']
+    ElCarousel: typeof import('../packages/element-plus')['ElCarousel']
+    ElCarouselItem: typeof import('../packages/element-plus')['ElCarouselItem']
+    ElCascader: typeof import('../packages/element-plus')['ElCascader']
+    ElCascaderPanel: typeof import('../packages/element-plus')['ElCascaderPanel']
+    ElCheckbox: typeof import('../packages/element-plus')['ElCheckbox']
+    ElCheckboxButton: typeof import('../packages/element-plus')['ElCheckboxButton']
+    ElCheckboxGroup: typeof import('../packages/element-plus')['ElCheckboxGroup']
+    ElCol: typeof import('../packages/element-plus')['ElCol']
+    ElCollapse: typeof import('../packages/element-plus')['ElCollapse']
+    ElCollapseItem: typeof import('../packages/element-plus')['ElCollapseItem']
+    ElCollapseTransition: typeof import('../packages/element-plus')['ElCollapseTransition']
+    ElColorPicker: typeof import('../packages/element-plus')['ElColorPicker']
+    ElContainer: typeof import('../packages/element-plus')['ElContainer']
+    ElConfigProvider: typeof import('../packages/element-plus')['ElConfigProvider']
+    ElDatePicker: typeof import('../packages/element-plus')['ElDatePicker']
+    ElDialog: typeof import('../packages/element-plus')['ElDialog']
+    ElDivider: typeof import('../packages/element-plus')['ElDivider']
+    ElDrawer: typeof import('../packages/element-plus')['ElDrawer']
+    ElDropdown: typeof import('../packages/element-plus')['ElDropdown']
+    ElDropdownItem: typeof import('../packages/element-plus')['ElDropdownItem']
+    ElDropdownMenu: typeof import('../packages/element-plus')['ElDropdownMenu']
+    ElEmpty: typeof import('../packages/element-plus')['ElEmpty']
+    ElFooter: typeof import('../packages/element-plus')['ElFooter']
+    ElForm: typeof import('../packages/element-plus')['ElForm']
+    ElFormItem: typeof import('../packages/element-plus')['ElFormItem']
+    ElHeader: typeof import('../packages/element-plus')['ElHeader']
+    ElIcon: typeof import('../packages/element-plus')['ElIcon']
+    ElImage: typeof import('../packages/element-plus')['ElImage']
+    ElImageViewer: typeof import('../packages/element-plus')['ElImageViewer']
+    ElInput: typeof import('../packages/element-plus')['ElInput']
+    ElInputNumber: typeof import('../packages/element-plus')['ElInputNumber']
+    ElLink: typeof import('../packages/element-plus')['ElLink']
+    ElMain: typeof import('../packages/element-plus')['ElMain']
+    ElMenu: typeof import('../packages/element-plus')['ElMenu']
+    ElMenuItem: typeof import('../packages/element-plus')['ElMenuItem']
+    ElMenuItemGroup: typeof import('../packages/element-plus')['ElMenuItemGroup']
+    ElOption: typeof import('../packages/element-plus')['ElOption']
+    ElOptionGroup: typeof import('../packages/element-plus')['ElOptionGroup']
+    ElPageHeader: typeof import('../packages/element-plus')['ElPageHeader']
+    ElPagination: typeof import('../packages/element-plus')['ElPagination']
+    ElPopconfirm: typeof import('../packages/element-plus')['ElPopconfirm']
+    ElPopper: typeof import('../packages/element-plus')['ElPopper']
+    ElProgress: typeof import('../packages/element-plus')['ElProgress']
+    ElRadio: typeof import('../packages/element-plus')['ElRadio']
+    ElRadioButton: typeof import('../packages/element-plus')['ElRadioButton']
+    ElRadioGroup: typeof import('../packages/element-plus')['ElRadioGroup']
+    ElRate: typeof import('../packages/element-plus')['ElRate']
+    ElRow: typeof import('../packages/element-plus')['ElRow']
+    ElScrollbar: typeof import('../packages/element-plus')['ElScrollbar']
+    ElSelect: typeof import('../packages/element-plus')['ElSelect']
+    ElSlider: typeof import('../packages/element-plus')['ElSlider']
+    ElStep: typeof import('../packages/element-plus')['ElStep']
+    ElSteps: typeof import('../packages/element-plus')['ElSteps']
+    ElSubMenu: typeof import('../packages/element-plus')['ElSubMenu']
+    ElSwitch: typeof import('../packages/element-plus')['ElSwitch']
+    ElTabPane: typeof import('../packages/element-plus')['ElTabPane']
+    ElTable: typeof import('../packages/element-plus')['ElTable']
+    ElTableColumn: typeof import('../packages/element-plus')['ElTableColumn']
+    ElTabs: typeof import('../packages/element-plus')['ElTabs']
+    ElTag: typeof import('../packages/element-plus')['ElTag']
+    ElTimePicker: typeof import('../packages/element-plus')['ElTimePicker']
+    ElTimeSelect: typeof import('../packages/element-plus')['ElTimeSelect']
+    ElTimeline: typeof import('../packages/element-plus')['ElTimeline']
+    ElTimelineItem: typeof import('../packages/element-plus')['ElTimelineItem']
+    ElTooltip: typeof import('../packages/element-plus')['ElTooltip']
+    ElTransfer: typeof import('../packages/element-plus')['ElTransfer']
+    ElTree: typeof import('../packages/element-plus')['ElTree']
+    ElTreeV2: typeof import('../packages/element-plus')['ElTreeV2']
+    ElUpload: typeof import('../packages/element-plus')['ElUpload']
+    ElSpace: typeof import('../packages/element-plus')['ElSpace']
+    ElSkeleton: typeof import('../packages/element-plus')['ElSkeleton']
+    ElSkeletonItem: typeof import('../packages/element-plus')['ElSkeletonItem']
+    ElCheckTag: typeof import('../packages/element-plus')['ElCheckTag']
+    ElDescriptions: typeof import('../packages/element-plus')['ElDescriptions']
+    ElDescriptionsItem: typeof import('../packages/element-plus')['ElDescriptionsItem']
+    ElResult: typeof import('../packages/element-plus')['ElResult']
+    ElSelectV2: typeof import('../packages/element-plus')['ElSelectV2']
+  }
+}
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $message: typeof import('../packages/element-plus')['ElMessage']
+    $notify: typeof import('../packages/element-plus')['ElNotification']
+    $msgbox: typeof import('../packages/element-plus')['ElMessageBox']
+    $messageBox: typeof import('../packages/element-plus')['ElMessageBox']
+    $alert: typeof import('../packages/element-plus')['ElMessageBox']['alert']
+    $confirm: typeof import('../packages/element-plus')['ElMessageBox']['confirm']
+    $prompt: typeof import('../packages/element-plus')['ElMessageBox']['prompt']
+    $loading: typeof import('../packages/element-plus')['ElLoadingService']
+  }
+}
+
+export {}

play/tsconfig.json

@@ -4,7 +4,7 @@
     "allowJs": true,
     "module": "ESNext",
     "lib": ["ESNext", "DOM"],
-    "types": ["vite/client", "../typings/global"],
+    "types": ["vite/client", "../global"],
     "resolveJsonModule": true,
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true,

play/vite.config.ts

@@ -6,6 +6,7 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import Inspect from 'vite-plugin-inspect'
 import mkcert from 'vite-plugin-mkcert'
 import glob from 'fast-glob'
+import DefineOptions from 'unplugin-vue-define-options/vite'
 import { epRoot, pkgRoot, projRoot, epPackage } from '../build/utils/paths'
 import { getPackageDependencies } from '../build/utils/pkg'
 import './vite.init'
@@ -38,6 +39,7 @@ export default defineConfig(async () => {
     },
     plugins: [
       vue(),
+      DefineOptions(),
       Components({
         include: `${__dirname}/**`,
         resolvers: ElementPlusResolver({ importStyle: 'sass' }),

pnpm-lock.yaml

@@ -76,6 +76,7 @@ importers:
       ts-morph: 13.0.3
       type-fest: 2.11.2
       typescript: 4.5.5
+      unplugin-vue-define-options: 0.0.6
       vue: 3.2.30
       vue-jest: 5.0.0-alpha.10
       vue-router: 4.0.12
@@ -154,6 +155,7 @@ importers:
       ts-morph: 13.0.3
       type-fest: 2.11.2
       typescript: 4.5.5
+      unplugin-vue-define-options: 0.0.6
       vue: 3.2.30
       vue-jest: 5.0.0-alpha.10_e098c2dbe4ae204628e6416de688af6f
       vue-router: 4.0.12_vue@3.2.30
@@ -525,22 +527,6 @@ packages:
       '@babel/types': 7.16.8
     dev: true
 
-  /@babel/helper-module-transforms/7.15.4:
-    resolution: {integrity: sha512-9fHHSGE9zTC++KuXLZcB5FKgvlV83Ox+NLUmQTawovwlJ85+QMhk1CnVk406CQVj97LaWod6KVjl2Sfgw9Aktw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-module-imports': 7.15.4
-      '@babel/helper-replace-supers': 7.15.4
-      '@babel/helper-simple-access': 7.15.4
-      '@babel/helper-split-export-declaration': 7.15.4
-      '@babel/helper-validator-identifier': 7.16.7
-      '@babel/template': 7.15.4
-      '@babel/traverse': 7.15.4
-      '@babel/types': 7.16.8
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/helper-module-transforms/7.15.8:
     resolution: {integrity: sha512-DfAfA6PfpG8t4S6npwzLvTUpp0sS7JrcuaMiy1Y5645laRJIp/LiLGIBbQKaXSInK8tiGNI7FL7L8UvB8gdUZg==}
     engines: {node: '>=6.9.0'}
@@ -752,7 +738,7 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/helper-module-transforms': 7.15.4
+      '@babel/helper-module-transforms': 7.15.8
       '@babel/helper-plugin-utils': 7.14.5
       '@babel/helper-simple-access': 7.15.4
       babel-plugin-dynamic-import-node: 2.3.3
@@ -10682,6 +10668,10 @@ packages:
       - webpack
     dev: true
 
+  /unplugin-vue-define-options/0.0.6:
+    resolution: {integrity: sha512-BHV0KVKXDci+yiJdPd6KHoqgMs1dkRJK6ocF8sIh/cYswVYyfm3DBwEtHf/niMMH0QcmO3aurcHpyJ+EmTKtQg==}
+    dev: true
+
   /unplugin/0.3.0_737339f39a52c341515b0d4dcab71b66:
     resolution: {integrity: sha512-9yLlOo+XC4NdIRgpkDSHOAHkQDq2x4mbuVNO/eKVa3C8WTn5wWGfzEFfRJFL8euqnX3Gf7hEur0AhXxy+WSwkg==}
     peerDependencies:

tsconfig.json

@@ -13,7 +13,8 @@
     "lib": ["ES2018", "DOM"],
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "types": ["unplugin-vue-define-options"]
   },
   "include": ["packages"],
   "exclude": ["node_modules", "**/__test?__", "**/dist"]