refactor(components): switch to vue macros (#9306)

docs/package.json

@@ -42,8 +42,8 @@
     "unocss": "0.33.5",
     "unplugin-icons": "^0.14.6",
     "unplugin-vue-components": "^0.20.1",
-    "unplugin-vue-define-options": "^0.6.1",
-    "vite": "^2.9.13",
+    "unplugin-vue-macros": "^0.11.2",
+    "vite": "^2.9.15",
     "vite-plugin-inspect": "^0.5.0",
     "vite-plugin-mkcert": "^1.7.2",
     "vite-plugin-pwa": "^0.12.0",

docs/vite.config.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 import Inspect from 'vite-plugin-inspect'
 import { defineConfig, loadEnv } from 'vite'
-import DefineOptions from 'unplugin-vue-define-options/vite'
+import VueMacros from 'unplugin-vue-macros/vite'
 import UnoCSS from 'unocss/vite'
 import mkcert from 'vite-plugin-mkcert'
 import glob from 'fast-glob'
@@ -69,8 +69,13 @@ export default defineConfig(async ({ mode }) => {
       alias,
     },
     plugins: [
-      vueJsx(),
-      DefineOptions(),
+      VueMacros({
+        setupComponent: false,
+        setupSFC: false,
+        plugins: {
+          vueJsx: vueJsx(),
+        },
+      }),
 
       // https://github.com/antfu/unplugin-vue-components
       Components({

internal/build/package.json

@@ -33,7 +33,7 @@
     "rollup": "^2.75.7",
     "rollup-plugin-esbuild": "^4.9.1",
     "ts-morph": "^14.0.0",
-    "unplugin-vue-define-options": "^0.6.1"
+    "unplugin-vue-macros": "^0.11.2"
   },
   "devDependencies": {
     "@esbuild-kit/cjs-loader": "^2.2.1",

internal/build/src/tasks/full-bundle.ts

@@ -3,7 +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/rollup'
+import VueMacros from 'unplugin-vue-macros/rollup'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import esbuild, { minify as minifyPlugin } from 'rollup-plugin-esbuild'
 import { parallel } from 'gulp'
@@ -31,11 +31,16 @@ const banner = `/*! ${PKG_BRAND_NAME} v${version} */\n`
 async function buildFullEntry(minify: boolean) {
   const plugins: Plugin[] = [
     ElementPlusAlias(),
-    DefineOptions(),
-    vue({
-      isProduction: true,
+    VueMacros({
+      setupComponent: false,
+      setupSFC: false,
+      plugins: {
+        vue: vue({
+          isProduction: true,
+        }),
+        vueJsx: vueJsx(),
+      },
     }),
-    vueJsx(),
     nodeResolve({
       extensions: ['.mjs', '.js', '.json', '.ts'],
     }),

internal/build/src/tasks/modules.ts

@@ -1,7 +1,7 @@
 import { rollup } from 'rollup'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import DefineOptions from 'unplugin-vue-define-options/rollup'
+import VueMacros from 'unplugin-vue-macros/rollup'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import esbuild from 'rollup-plugin-esbuild'
@@ -25,11 +25,16 @@ export const buildModules = async () => {
     input,
     plugins: [
       ElementPlusAlias(),
-      DefineOptions(),
-      vue({
-        isProduction: false,
+      VueMacros({
+        setupComponent: false,
+        setupSFC: false,
+        plugins: {
+          vue: vue({
+            isProduction: false,
+          }),
+          vueJsx: vueJsx(),
+        },
       }),
-      vueJsx(),
       nodeResolve({
         extensions: ['.mjs', '.js', '.json', '.ts'],
       }),

package.json

@@ -113,7 +113,7 @@
     "type-fest": "^2.14.0",
     "typescript": "^4.7.4",
     "unplugin-element-plus": "^0.4.0",
-    "unplugin-vue-define-options": "^0.6.1",
+    "unplugin-vue-macros": "^0.11.2",
     "vitest": "0.12.6",
     "vue": "^3.2.37",
     "vue-router": "^4.0.16",

packages/components/affix/src/affix.vue

@@ -20,7 +20,7 @@ import type { CSSProperties } from 'vue'
 
 const COMPONENT_NAME = 'ElAffix'
 defineOptions({
-  name: 'ElAffix',
+  name: COMPONENT_NAME,
 })
 
 const props = defineProps(affixProps)

packages/components/autocomplete/src/autocomplete.vue

@@ -124,13 +124,12 @@ import type { StyleValue } from 'vue'
 import type { TooltipInstance } from '@element-plus/components/tooltip'
 import type { InputInstance } from '@element-plus/components/input'
 
+const COMPONENT_NAME = 'ElAutocomplete'
 defineOptions({
-  name: 'ElAutocomplete',
+  name: COMPONENT_NAME,
   inheritAttrs: false,
 })
 
-const COMPONENT_NAME = 'ElAutocomplete'
-
 const props = defineProps(autocompleteProps)
 const emit = defineEmits(autocompleteEmits)
 

packages/components/backtop/src/backtop.vue

@@ -23,9 +23,8 @@ import { useNamespace } from '@element-plus/hooks'
 import { backtopEmits, backtopProps } from './backtop'
 
 const COMPONENT_NAME = 'ElBacktop'
-
 defineOptions({
-  name: 'ElBacktop',
+  name: COMPONENT_NAME,
 })
 
 const props = defineProps(backtopProps)

packages/components/calendar/src/calendar.vue

@@ -66,9 +66,8 @@ import type { ComputedRef } from 'vue'
 import type { Dayjs } from 'dayjs'
 
 const COMPONENT_NAME = 'ElCalendar'
-
 defineOptions({
-  name: 'ElCalendar',
+  name: COMPONENT_NAME,
 })
 
 const props = defineProps(calendarProps)

packages/components/form/src/form.vue

@@ -24,7 +24,7 @@ import type { FormItemProp } from './form-item'
 
 const COMPONENT_NAME = 'ElForm'
 defineOptions({
-  name: 'ElForm',
+  name: COMPONENT_NAME,
 })
 const props = defineProps(formProps)
 const emit = defineEmits(formEmits)

packages/components/switch/src/switch.vue

@@ -112,9 +112,8 @@ import { switchEmits, switchProps } from './switch'
 import type { CSSProperties } from 'vue'
 
 const COMPONENT_NAME = 'ElSwitch'
-
 defineOptions({
-  name: 'ElSwitch',
+  name: COMPONENT_NAME,
 })
 
 const props = defineProps(switchProps)

packages/components/tabs/src/tab-bar.vue

@@ -18,7 +18,7 @@ import type { CSSProperties } from 'vue'
 
 const COMPONENT_NAME = 'ElTabBar'
 defineOptions({
-  name: 'ElTabBar',
+  name: COMPONENT_NAME,
 })
 const props = defineProps(tabBarProps)
 

packages/components/tabs/src/tab-pane.vue

@@ -32,7 +32,7 @@ import { tabPaneProps } from './tab-pane'
 
 const COMPONENT_NAME = 'ElTabPane'
 defineOptions({
-  name: 'ElTabPane',
+  name: COMPONENT_NAME,
 })
 const props = defineProps(tabPaneProps)
 

packages/components/upload/src/upload-dragger.vue

@@ -19,7 +19,7 @@ import { uploadDraggerEmits, uploadDraggerProps } from './upload-dragger'
 const COMPONENT_NAME = 'ElUploadDrag'
 
 defineOptions({
-  name: 'ElUploadDrag',
+  name: COMPONENT_NAME,
 })
 
 const props = defineProps(uploadDraggerProps)

play/package.json

@@ -13,7 +13,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.3",
     "unplugin-vue-components": "^0.20.1",
-    "vite": "^2.9.13",
+    "vite": "^2.9.15",
     "vite-plugin-inspect": "^0.5.0",
     "vite-plugin-mkcert": "^1.7.2"
   }

play/vite.config.ts

@@ -7,7 +7,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 VueMacros from 'unplugin-vue-macros/vite'
 import esbuild from 'rollup-plugin-esbuild'
 import {
   epPackage,
@@ -16,9 +16,10 @@ import {
   pkgRoot,
   projRoot,
 } from '@element-plus/build-utils'
+import type { Plugin } from 'vite'
 import './vite.init'
 
-const esbuildPlugin = () => ({
+const esbuildPlugin = (): Plugin => ({
   ...esbuild({
     target: 'chrome64',
     include: /\.vue$/,
@@ -57,10 +58,15 @@ export default defineConfig(async ({ mode }) => {
       https: !!env.HTTPS,
     },
     plugins: [
-      vue(),
+      VueMacros({
+        setupComponent: false,
+        setupSFC: false,
+        plugins: {
+          vue: vue(),
+          vueJsx: vueJsx(),
+        },
+      }),
       esbuildPlugin(),
-      vueJsx(),
-      DefineOptions(),
       Components({
         include: `${__dirname}/**`,
         resolvers: ElementPlusResolver({ importStyle: 'sass' }),

ssr-testing/vitest.config.ts

@@ -1,11 +1,20 @@
 import { defineConfig } from 'vitest/config'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import DefineOptions from 'unplugin-vue-define-options/rollup'
+import VueMacros from 'unplugin-vue-macros/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueJsx(), DefineOptions()],
+  plugins: [
+    VueMacros({
+      setupComponent: false,
+      setupSFC: false,
+      plugins: {
+        vue: vue(),
+        vueJsx: vueJsx(),
+      },
+    }),
+  ],
   server: {
     port: 5000,
   },

tsconfig.vitest.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "composite": true,
     "lib": ["ES2021", "DOM", "DOM.Iterable"],
-    "types": ["node", "jsdom", "unplugin-vue-define-options"],
+    "types": ["node", "jsdom", "unplugin-vue-macros/macros-global"],
     "skipLibCheck": true
   },
   "include": ["packages", "vitest.setup.ts", "typings/env.d.ts"],

tsconfig.web.json

@@ -4,7 +4,7 @@
     "composite": true,
     "jsx": "preserve",
     "lib": ["ES2018", "DOM", "DOM.Iterable"],
-    "types": ["unplugin-vue-define-options"],
+    "types": ["unplugin-vue-macros/macros-global"],
     "skipLibCheck": true
   },
   "include": ["packages", "typings/components.d.ts", "typings/env.d.ts"],

vitest.config.ts

@@ -1,10 +1,19 @@
 import { defineConfig } from 'vitest/config'
 import Vue from '@vitejs/plugin-vue'
 import VueJsx from '@vitejs/plugin-vue-jsx'
-import DefineOptions from 'unplugin-vue-define-options/vite'
+import VueMacros from 'unplugin-vue-macros/vite'
 
 export default defineConfig({
-  plugins: [Vue(), VueJsx(), DefineOptions()],
+  plugins: [
+    VueMacros({
+      setupComponent: false,
+      setupSFC: false,
+      plugins: {
+        vue: Vue(),
+        vueJsx: VueJsx(),
+      },
+    }),
+  ],
   optimizeDeps: {
     disabled: true,
   },