Refactor importing ElementUI

package.json

@@ -56,6 +56,7 @@
     "babel-jest": "^24.5.0",
     "babel-loader": "^8.0.5",
     "babel-plugin-dynamic-import-node": "^2.2.0",
+    "babel-plugin-import": "^1.11.0",
     "cache-loader": "^2.0.1",
     "codecov": "^3.1.0",
     "copy-webpack-plugin": "^5.0.1",

resources/assets/src/scripts/element.d.ts

@@ -1,6 +0,0 @@
-/* eslint-disable import/no-mutable-exports */
-import { ElMessage } from 'element-ui/types/message'
-import { ElMessageBox } from 'element-ui/types/message-box'
-
-export let Message: ElMessage
-export let MessageBox: ElMessageBox

resources/assets/src/scripts/element.js

@@ -1,29 +0,0 @@
-import Vue from 'vue'
-import Button from 'element-ui/lib/button'
-import Input from 'element-ui/lib/input'
-import Message from 'element-ui/lib/message'
-import MessageBox from 'element-ui/lib/message-box'
-import Switch from 'element-ui/lib/switch'
-
-Vue.use(Button)
-Vue.use(Input)
-Vue.use(Switch)
-
-Vue.prototype.$message = Message
-Vue.prototype.$msgbox = MessageBox
-Vue.prototype.$alert = MessageBox.alert
-Vue.prototype.$confirm = MessageBox.confirm
-Vue.prototype.$prompt = MessageBox.prompt
-
-blessing.ui = {
-  message: Message,
-  msgbox: MessageBox,
-  alert: MessageBox.alert,
-  confirm: MessageBox.confirm,
-  prompt: MessageBox.prompt,
-}
-
-export {
-  Message,
-  MessageBox,
-}

resources/assets/src/scripts/element.ts

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import {
+  Button, Input, Message, MessageBox, Switch,
+} from 'element-ui'
+
+Vue.use(Button)
+Vue.use(Input)
+Vue.use(Switch)
+
+Object.assign(Vue.prototype, {
+  $message: Message,
+  $msgbox: MessageBox,
+  $alert: MessageBox.alert,
+  $confirm: MessageBox.confirm,
+  $prompt: MessageBox.prompt,
+})
+
+blessing.ui = {
+  message: Message,
+  msgbox: MessageBox,
+  alert: MessageBox.alert,
+  confirm: MessageBox.confirm,
+  prompt: MessageBox.prompt,
+}

resources/assets/src/scripts/logout.ts

@@ -1,4 +1,4 @@
-import { Message, MessageBox } from './element'
+import { Message, MessageBox } from 'element-ui'
 import { post } from './net'
 import { trans } from './i18n'
 

resources/assets/src/shims.d.ts

@@ -1,6 +1,5 @@
 /* eslint-disable camelcase */
 import Vue from 'vue'
-import { Message, MessageBox } from 'element-ui'
 import * as JQuery from 'jquery'
 
 declare global {
@@ -16,6 +15,7 @@ declare global {
     route: string
     extra: any
     i18n: object
+    ui: object
 
     fetch: {
       get(url: string, params?: object): Promise<object>

resources/assets/src/views/skinlib/List.vue

@@ -115,10 +115,9 @@
 <script>
 import Vue from 'vue'
 import Paginate from 'vuejs-paginate'
-import ButtonGroup from 'element-ui/lib/button-group'
-import 'element-ui/lib/theme-chalk/select.css'
-import Select from 'element-ui/lib/select'
-import Option from 'element-ui/lib/option'
+import {
+  ButtonGroup, Select, Option,
+} from 'element-ui'
 import { queryString } from '../../scripts/utils'
 import SkinLibItem from '../../components/SkinLibItem.vue'
 

resources/assets/src/views/skinlib/Upload.vue

@@ -102,8 +102,7 @@
 import Vue from 'vue'
 import FileUpload from 'vue-upload-component'
 import { isSlimSkin } from 'skinview3d'
-import 'element-ui/lib/theme-chalk/radio.css'
-import Radio from 'element-ui/lib/radio'
+import { Radio } from 'element-ui'
 
 Vue.use(Radio)
 

resources/assets/src/views/user/Dashboard.vue

@@ -95,8 +95,7 @@
 
 <script>
 import Vue from 'vue'
-import 'element-ui/lib/theme-chalk/progress.css'
-import Progress from 'element-ui/lib/progress'
+import { Progress } from 'element-ui'
 import Tween from '@tweenjs/tween.js'
 import EmailVerification from '../../components/EmailVerification.vue'
 

resources/assets/tests/scripts/logout.test.ts

@@ -1,12 +1,12 @@
 import { logout } from '@/scripts/logout'
 import { post } from '@/scripts/net'
-import { MessageBox } from '@/scripts/element'
+import { MessageBox } from 'element-ui'
 
+jest.mock('element-ui')
 jest.mock('@/scripts/net')
-jest.mock('@/scripts/element')
 
 test('log out', async () => {
-  MessageBox.confirm
+  jest.spyOn(MessageBox, 'confirm')
     .mockRejectedValueOnce('cancel')
     .mockResolvedValue('confirm')
   post.mockResolvedValue({ message: '' })

resources/assets/tests/views/skinlib/List.test.ts

@@ -1,45 +1,57 @@
 import Vue from 'vue'
 import { mount } from '@vue/test-utils'
-import { Button } from 'element-ui'
+// @ts-ignore
+import Button from 'element-ui/lib/button'
 import List from '@/views/skinlib/List.vue'
 
-jest.mock('element-ui/lib/select', () => ({
-  install(vue: typeof Vue) {
-    vue.component('ElSelect', {
-      render(h) {
-        return h('select', {
-          on: {
-            change: (event: Event) => this.$emit(
-              'change',
-              (event.target as HTMLSelectElement).value
-            ),
-          },
-          attrs: {
-            value: this.value,
-          },
-        }, this.$slots.default)
-      },
-      props: {
-        value: String,
-      },
-      model: {
-        prop: 'value',
-        event: 'change',
-      },
-    })
+jest.mock('element-ui', () => ({
+  Select: {
+    install(vue: typeof Vue) {
+      vue.component('ElSelect', {
+        render(h) {
+          return h('select', {
+            on: {
+              change: (event: Event) => this.$emit(
+                'change',
+                (event.target as HTMLSelectElement).value
+              ),
+            },
+            attrs: {
+              value: this.value,
+            },
+          }, this.$slots.default)
+        },
+        props: {
+          value: String,
+        },
+        model: {
+          prop: 'value',
+          event: 'change',
+        },
+      })
+    },
   },
-}))
-jest.mock('element-ui/lib/option', () => ({
-  install(vue: typeof Vue) {
-    vue.component('ElOption', {
-      render(h) {
-        return h('option', { attrs: { value: this.value } }, this.label)
-      },
-      props: {
-        label: String,
-        value: String,
-      },
-    })
+  Option: {
+    install(vue: typeof Vue) {
+      vue.component('ElOption', {
+        render(h) {
+          return h('option', { attrs: { value: this.value } }, this.label)
+        },
+        props: {
+          label: String,
+          value: String,
+        },
+      })
+    },
+  },
+  ButtonGroup: {
+    install(vue: typeof Vue) {
+      vue.component('ElButtonGroup', {
+        render(h) {
+          return h('div', {}, this.$slots.default)
+        },
+      })
+    },
   },
 }))
 

webpack.config.js

@@ -36,7 +36,22 @@ const config = {
       {
         test: /\.(t|j)s$/,
         exclude: /node_modules/,
-        use: ['cache-loader', 'babel-loader'],
+        use: [
+          'cache-loader',
+          {
+            loader: 'babel-loader',
+            options: {
+              plugins: [
+                ['babel-plugin-import', {
+                  libraryName: 'element-ui',
+                  libraryDirectory: 'lib',
+                  camel2DashComponentName: true,
+                  style: name => `${name.replace('lib/', 'lib/theme-chalk/')}.css`,
+                }],
+              ],
+            },
+          },
+        ],
       },
       {
         test: /\.vue$/,

yarn.lock

@@ -690,7 +690,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.3.2"
 
-"@babel/runtime@^7.4.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.4.4":
   version "7.4.4"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.4.tgz#dc2e34982eb236803aa27a07fea6857af1b9171d"
   integrity sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==
@@ -1836,6 +1836,14 @@ babel-plugin-dynamic-import-node@^2.2.0:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-import@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.11.0.tgz#78ac908e6b225206babb734e19eae5f78d6d1035"
+  integrity sha512-de9dWdU1YjmWRPYurlHRKD2hTd24z0bIQ0/JgyXqLMXML+TsvEkVhtqzOsNtu9MmCuvwBiTTTjZBbZXA1Xu7TQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/runtime" "^7.0.0"
+
 babel-plugin-istanbul@^5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.1.1.tgz#7981590f1956d75d67630ba46f0c22493588c893"