refactor(dev): drop babel (#3678)

* refactor(dev): drop babel

* test: fix test

* drop babel

* refactor: drop nodejs 14 support

.github/workflows/unit-test.yml

@@ -8,10 +8,8 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: ['14', '16']
+        node-version: ['16']
         include:
-          - node-version: '14'
-            node-name: 'LTS'
           - node-version: '16'
             node-name: 'Latest'
     steps:

babel.config.js

@@ -1,54 +0,0 @@
-module.exports = {
-  // ATTENTION!!
-  // Preset ordering is reversed, so `@babel/typescript` will called first
-  // Do not put `@babel/typescript` before `@babel/env`, otherwise will cause a compile error
-  // See https://github.com/babel/babel/issues/12066
-  presets: [
-    [
-      '@babel/env',
-      {
-        loose: true,
-        modules: false,
-      },
-    ],
-    '@babel/typescript',
-  ],
-  plugins: [
-    '@vue/babel-plugin-jsx',
-    '@babel/plugin-proposal-nullish-coalescing-operator',
-    ['@babel/plugin-proposal-private-methods', { loose: true }],
-    '@babel/transform-runtime',
-    'lodash',
-  ],
-  overrides: [
-    {
-      test: /\.vue$/,
-      plugins: ['@babel/transform-typescript'],
-    },
-  ],
-  env: {
-    utils: {
-      ignore: ['**/*.test.ts', '**/*.spec.ts'],
-      presets: [
-        [
-          '@babel/env',
-          {
-            loose: true,
-            modules: false,
-          },
-        ],
-      ],
-      plugins: [
-        [
-          'babel-plugin-module-resolver',
-          {
-            root: ['element-plus'],
-            alias: {
-              '@element-plus': 'element-plus/lib',
-            },
-          },
-        ],
-      ],
-    },
-  },
-}

jest.config.js

@@ -11,28 +11,9 @@ module.exports = {
   modulePathIgnorePatterns: ['/node_modules/', 'dist'],
   testEnvironment: 'jsdom',
   transform: {
+    // Doesn't support jsx/tsx since sucrase doesn't support Vue JSX
+    '\\.(j|t)s$': '@sucrase/jest-plugin',
     '^.+\\.vue$': 'vue-jest',
-    '^.+\\.(t|j)sx?$': [
-      'babel-jest',
-      {
-        presets: [
-          [
-            '@babel/preset-env',
-            {
-              loose: true,
-              targets: {
-                node: true,
-              },
-            },
-          ],
-          '@babel/preset-typescript',
-        ],
-        plugins: [
-          '@vue/babel-plugin-jsx',
-          ['@babel/plugin-proposal-class-properties', { loose: true }],
-        ],
-      },
-    ],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
   // u can change this option to a more specific folder for test single component or util when dev

package.json

@@ -72,12 +72,6 @@
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.7",
-    "@babel/core": "^7.15.5",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-typescript": "^7.15.0",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
     "@pnpm/find-workspace-packages": "^3.1.13",
@@ -88,20 +82,16 @@
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^3.0.0",
     "@rollup/plugin-typescript": "^8.2.5",
+    "@sucrase/jest-plugin": "^2.1.1",
     "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.173",
     "@types/through2": "^2.0.36",
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
-    "@vue/babel-plugin-jsx": "^1.0.7",
     "@vue/compiler-sfc": "^3.2.18",
     "@vue/component-compiler-utils": "^3.2.2",
     "@vue/test-utils": "2.0.0-beta.4",
     "algoliasearch": "^4.10.5",
-    "babel-jest": "^26.3.0",
-    "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "babel-preset-vue": "^2.0.2",
     "chalk": "^4.1.2",
     "clipboard-copy": "^4.0.1",
     "components-helper": "^1.0.4",

packages/components/dropdown/__tests__/dropdown.spec.ts

@@ -25,31 +25,25 @@ const _mount = (template: string, data, otherObj?) =>
 
 describe('Dropdown', () => {
   test('create', async () => {
-    const wrapper = mount({
-      setup() {
-        return () => (
-          <Dropdown
-            ref="b"
-            placement="right"
-            v-slots={{
-              dropdown: () => (
-                <DropdownMenu>
-                  <DropdownItem>Apple</DropdownItem>
-                  <DropdownItem>Orange</DropdownItem>
-                  <DropdownItem>Cherry</DropdownItem>
-                  <DropdownItem disabled>Peach</DropdownItem>
-                  <DropdownItem divided>Pear</DropdownItem>
-                </DropdownMenu>
-              ),
-            }}
-          >
-            <span class="el-dropdown-link" ref="a">
-              dropdown<i class="el-icon-arrow-down el-icon--right"></i>
-            </span>
-          </Dropdown>
-        )
-      },
-    })
+    const wrapper = _mount(
+      `
+        <el-dropdown ref="b" placement="right">
+          <span class="el-dropdown-link" ref="a">
+            dropdown<i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item>Apple</el-dropdown-item>
+              <el-dropdown-item>Orange</el-dropdown-item>
+              <el-dropdown-item>Cherry</el-dropdown-item>
+              <el-dropdown-item disabled>Peach</el-dropdown-item>
+              <el-dropdown-item divided>Pear</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      `,
+      () => ({})
+    )
     const content = wrapper.findComponent({ ref: 'b' }).vm as any
     const triggerElm = wrapper.find('.el-dropdown-link')
     expect(content.visible).toBe(false)