build: add type (#685)

* build: add type

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

.gitignore

@@ -13,4 +13,4 @@ coverage/
 website-dist
 lib
 website/play/index.vue
-ep-version.js
+packages/element-plus/version.ts

build/bincomp.js

@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable @typescript-eslint/no-var-requires */
 const cp = require('child_process')
 const { getPackagesSync } =  require('@lerna/project')
 const ora = require('ora')

build/build.component.js

@@ -7,11 +7,10 @@ const { nodeResolve } = require('@rollup/plugin-node-resolve')
 const vue = require('rollup-plugin-vue')
 const rollup = require('rollup')
 const typescript = require('rollup-plugin-typescript2')
+const { noElPrefixFile } = require('./common')
 
 const deps = Object.keys(pkg.dependencies)
 
-const noElPrefixFile = /(utils|directives|hooks|locale)/
-
 const runBuild = async () => {
   let index = 0
   const pkgs = await getPackages()

build/common.js

@@ -0,0 +1,3 @@
+module.exports = {
+  noElPrefixFile: /(utils|directives|hooks|locale)/,
+}

build/gen-type.js

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs')
+const path = require('path')
+const { noElPrefixFile } = require('./common')
+
+const outsideImport = /import .* from '..\/(.*?)\/src\/.*/
+
+// index.d.ts
+const newIndexPath = path.resolve(__dirname, '../lib/index.d.ts')
+fs.copyFileSync(path.resolve(__dirname, '../lib/element-plus/index.d.ts'), newIndexPath)
+const index = fs.readFileSync(newIndexPath)
+const newIndex = index.toString().replace(/@element-plus\//g, './el-').replace('el-utils', 'utils')
+fs.writeFileSync(newIndexPath, newIndex)
+
+// remove ep
+fs.rmdirSync(path.resolve(__dirname, '../lib/element-plus'), { recursive: true })
+
+// remove test-utils
+fs.rmdirSync(path.resolve(__dirname, '../lib/test-utils'), { recursive: true })
+
+// component
+const libDirPath = path.resolve(__dirname, '../lib')
+fs.readdirSync(libDirPath).forEach(comp => {
+  if (!noElPrefixFile.test(comp)) {
+    if (fs.lstatSync(path.resolve(libDirPath, comp)).isDirectory()) {
+      // rename
+      const newCompName = `el-${comp}`
+      fs.renameSync(path.resolve(libDirPath, comp),
+        path.resolve(libDirPath, newCompName))
+      // re-import
+      const imp = fs.readFileSync(path.resolve(__dirname, '../lib', newCompName, 'index.d.ts')).toString()
+      if(outsideImport.test(imp)) {
+        const newImp = imp.replace(outsideImport, (i, c) => {
+          return i.replace(c, `el-${c}`)
+        })
+        fs.writeFileSync(path.resolve(__dirname, '../lib', newCompName, 'index.d.ts'), newImp)
+      }
+    }
+  }
+})
+

build/gen-version.js

@@ -2,5 +2,5 @@
 const fs = require('fs')
 const path = require('path')
 const { version } = require('../package.json')
-fs.writeFileSync(path.resolve(__dirname, '../ep-version.js'), `export const version = '${version}'
+fs.writeFileSync(path.resolve(__dirname, '../packages/element-plus/version.ts'), `export const version = '${version}'
 `)

build/rollup.config.bundle.js

@@ -1,7 +1,6 @@
 // import vue from 'rollup-plugin-vue'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import path from 'path'
-import css from 'rollup-plugin-css-only'
 // import commonjs from '@rollup/plugin-commonjs'
 import { terser } from 'rollup-plugin-terser'
 import typescript from 'rollup-plugin-typescript2'
@@ -28,9 +27,6 @@ export default [
       }),
       typescript({
         tsconfigOverride: {
-          compilerOptions: {
-            declaration: false,
-          },
           'include': [
             'packages/**/*',
             'typings/vue-shim.d.ts',

package.json

@@ -8,11 +8,12 @@
     "gen": "bash ./scripts/gc.sh",
     "bootstrap": "yarn --frozen-lockfile && npx lerna bootstrap && yarn gen:version",
     "gen:version": "node build/gen-version.js",
-    "build": "yarn bootstrap && yarn clean:lib && yarn build:lib && yarn build:lib-full && yarn build:theme && yarn build:esm-bundle && yarn build:esm && yarn build:utils && yarn build:locale && yarn build:locale-umd",
+    "build": "yarn bootstrap && yarn clean:lib && yarn build:esm-bundle && yarn build:lib && yarn build:lib-full && yarn build:esm && yarn build:utils && yarn build:locale && yarn build:locale-umd && yarn build:theme",
     "clean:lib": "rimraf lib",
     "build:lib": "cross-env LIBMODE=core webpack --config ./build/webpack.config.js",
     "build:lib-full": "cross-env LIBMODE=full webpack --config ./build/webpack.config.js",
-    "build:esm-bundle": "rollup --config ./build/rollup.config.bundle.js",
+    "build:esm-bundle": "rollup --config ./build/rollup.config.bundle.js && yarn build:type",
+    "build:type": "node build/gen-type.js",
     "build:esm": "node ./build/bincomp.js",
     "build:utils": "cross-env BABEL_ENV=utils babel packages/utils --extensions .ts --out-dir lib/utils",
     "build:locale": "cross-env BABEL_ENV=utils babel packages/locale --extensions .ts --out-dir lib/locale",
@@ -140,7 +141,7 @@
     "packages"
   ],
   "main": "lib/index.js",
-  "typings": "types/index.d.ts",
+  "typings": "lib/index.d.ts",
   "unpkg": "lib/index.js",
   "style": "lib/theme-chalk/index.css",
   "browserslist": [

packages/checkbox/src/useCheckbox.ts

@@ -10,7 +10,7 @@ import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { useGlobalConfig } from '@element-plus/utils/util'
 import { PartialReturnType } from '@element-plus/utils/types'
 import { elFormKey, elFormItemKey } from '@element-plus/form'
-import { ICheckboxGroupInstance, ICheckboxProps } from './checkbox'
+import { ICheckboxGroupInstance, ICheckboxProps } from './checkbox.type'
 
 import type { ElFormContext, ElFormItemContext } from '@element-plus/form'
 

packages/element-plus/index.ts

@@ -83,11 +83,12 @@ import ElTransfer from '@element-plus/transfer'
 import ElTree from '@element-plus/tree'
 import ElUpload from '@element-plus/upload'
 import { use } from '@element-plus/locale'
-import { version } from '../../ep-version'
+import { version as version_ } from './version'
 import { setConfig } from '@element-plus/utils/config'
-
 import type { InstallOptions } from '@element-plus/utils/config'
 
+const version = version_ // version_ to fix tsc issue
+
 const defaultInstallOpt: InstallOptions =  {
   size: '' as ComponentSize,
   zIndex: 2000,

packages/loading/src/createLoadingComponent.ts

@@ -1,6 +1,6 @@
 import { createVNode, reactive, ref, toRefs, h, Transition, render, VNode } from 'vue'
 import { removeClass } from '@element-plus/utils/dom'
-import type { ILoadingCreateComponentParams, ILoadingInstance } from './loading'
+import type { ILoadingCreateComponentParams, ILoadingInstance } from './loading.type'
 
 export function createLoadingComponent({ options , globalLoadingOption }: ILoadingCreateComponentParams): ILoadingInstance {
   let vm: VNode = null

packages/loading/src/index.ts

@@ -1,5 +1,5 @@
 import { createLoadingComponent } from './createLoadingComponent'
-import type { ILoadingOptions, ILoadingInstance, ILoadingGlobalConfig } from './loading'
+import type { ILoadingOptions, ILoadingInstance, ILoadingGlobalConfig } from './loading.type'
 import { addClass, getStyle, removeClass } from '@element-plus/utils/dom'
 import PopupManager from '@element-plus/utils/popup-manager'
 import isServer from '@element-plus/utils/isServer'

packages/message-box/src/messageBox.ts

@@ -2,7 +2,7 @@ import { createVNode, render } from 'vue'
 import MessageBoxConstructor from './index.vue'
 import isServer from '@element-plus/utils/isServer'
 import { isVNode } from '../../utils/util'
-import { ElMessageBoxOptions } from './message-box'
+import { ElMessageBoxOptions } from './message-box.type'
 
 let currentMsg, instance
 

packages/notification/__tests__/notify.spec.ts

@@ -1,5 +1,5 @@
 import Notification, { close, closeAll } from '../src/notify'
-import type { INotificationHandle } from '../src/notification'
+import type { INotificationHandle } from '../src/notification.type'
 
 jest.useFakeTimers()
 

packages/notification/src/notify.ts

@@ -1,6 +1,6 @@
 import { createVNode, render } from 'vue'
 import NotificationConstructor from './index.vue'
-import type { INotificationOptions, INotification, NotificationQueue, NotificationVM } from './notification'
+import type { INotificationOptions, INotification, NotificationQueue, NotificationVM } from './notification.type'
 import isServer from '../../utils/isServer'
 import PopupManager from '../../utils/popup-manager'
 import { isVNode } from '../../utils/util'

packages/slider/src/useMarks.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { ISliderProps, Mark } from './Slider'
+import { ISliderProps, Mark } from './slider.type'
 
 
 export const useMarks = (props: ISliderProps) => {

packages/slider/src/useSlide.ts

@@ -1,7 +1,7 @@
 import { computed, inject, nextTick, ref } from 'vue'
 import { CHANGE_EVENT } from '@element-plus/utils/constants'
 import { elFormKey, elFormItemKey } from '@element-plus/form'
-import { ButtonRefs, ISliderInitData, ISliderProps } from './Slider'
+import { ButtonRefs, ISliderInitData, ISliderProps } from './slider.type'
 
 import type { ElFormContext, ElFormItemContext } from '@element-plus/form'
 

packages/slider/src/useSliderButton.ts

@@ -1,7 +1,7 @@
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { off, on } from '@element-plus/utils/dom'
 import { computed, ComputedRef, inject, nextTick, ref, watch } from 'vue'
-import { ISliderButtonInitData, ISliderButtonProps, ISliderProvider } from './Slider'
+import { ISliderButtonInitData, ISliderButtonProps, ISliderProvider } from './slider.type'
 
 
 const useTooltip = (props: ISliderButtonProps, formatTooltip: ComputedRef<(value: number) => number | string>, showTooltip: ComputedRef<boolean>) => {

packages/slider/src/useStops.ts

@@ -1,5 +1,5 @@
 import { computed, ComputedRef } from 'vue'
-import { ISliderInitData, ISliderProps, Stops } from './Slider'
+import { ISliderInitData, ISliderProps, Stops } from './slider.type'
 
 export const useStops = (props: ISliderProps, initData: ISliderInitData, minValue: ComputedRef<number>, maxValue: ComputedRef<number>): Stops => {
   const stops = computed(() => {

packages/table/src/config.ts

@@ -1,7 +1,7 @@
 import { getPropByPath } from '@element-plus/utils/util'
 import ElCheckbox from '@element-plus/checkbox'
 import { h } from 'vue'
-import { Store, TreeNode, AnyObject, TableColumnCtx } from './table'
+import { Store, TreeNode, AnyObject, TableColumnCtx } from './table.type'
 
 export const cellStarts = {
   default: {

packages/table/src/h-helper.ts

@@ -1,5 +1,5 @@
 import { h } from 'vue'
-import { TableColumnCtx } from './table'
+import { TableColumnCtx } from './table.type'
 
 export function hGutter() {
   return h('col', {

packages/table/src/layout-observer.ts

@@ -6,7 +6,7 @@ import {
   computed,
   getCurrentInstance,
 } from 'vue'
-import { TableLayout, TableHeader, Table } from './table'
+import { TableLayout, TableHeader, Table } from './table.type'
 
 function useLayoutObserver(root: Table) {
   const instance = getCurrentInstance() as TableHeader

packages/table/src/store/current.ts

@@ -1,7 +1,7 @@
 import { arrayFind } from '@element-plus/utils/util'
 import { getRowIdentity } from '../util'
 import { ref, getCurrentInstance, unref } from 'vue'
-import { WatcherPropsData, Table, AnyObject } from '../table'
+import { WatcherPropsData, Table, AnyObject } from '../table.type'
 
 function useCurrent(watcherData: WatcherPropsData) {
   const instance = getCurrentInstance() as Table

packages/table/src/store/expand.ts

@@ -1,6 +1,6 @@
 import { ref, getCurrentInstance } from 'vue'
 import { toggleRowStatus, getKeysMap, getRowIdentity } from '../util'
-import { WatcherPropsData, Table } from '../table'
+import { WatcherPropsData, Table } from '../table.type'
 
 function useExpand(watcherData: WatcherPropsData) {
   const instance = getCurrentInstance() as Table

packages/table/src/store/helper.ts

@@ -1,6 +1,6 @@
 import Store from './index'
 import { debounce } from 'lodash'
-import { Table } from '../table'
+import { Table } from '../table.type'
 
 export function createStore(table: Table, initialState = {}) {
   if (!table) {

packages/table/src/store/index.ts

@@ -1,7 +1,7 @@
 import { nextTick, getCurrentInstance, unref } from 'vue'
 import { arrayFind } from '@element-plus/utils/util'
 import useWatcher from './watcher'
-import { Table, Store, TableColumnCtx } from '../table'
+import { Table, Store, TableColumnCtx } from '../table.type'
 
 function replaceColumn(array: TableColumnCtx[], column: TableColumnCtx) {
   return array.map(item => {

packages/table/src/store/tree.ts

@@ -1,6 +1,6 @@
 import { walkTreeNode, getRowIdentity } from '../util'
 import { ref, computed, watch, getCurrentInstance, unref } from 'vue'
-import { WatcherPropsData, Table, fn } from '../table'
+import { WatcherPropsData, Table, fn } from '../table.type'
 
 function useTree(watcherData: WatcherPropsData) {
   const expandRowKeys = ref([])

packages/table/src/store/watcher.ts

@@ -11,7 +11,7 @@ import {
 import useExpand from './expand'
 import useCurrent from './current'
 import useTree from './tree'
-import { AnyObject, Table } from '../table'
+import { AnyObject, Table } from '../table.type'
 
 const sortData = (data, states) => {
   const sortingColumn = states.sortingColumn

packages/table/src/table-body/events-helper.ts

@@ -3,7 +3,7 @@ import { getStyle, hasClass } from '@element-plus/utils/dom'
 import { getCell, getColumnByCell } from '../util'
 import { debounce } from 'lodash'
 import { TableBodyProps } from './table-body'
-import { Table, AnyObject, TableColumnCtx } from '../table'
+import { Table, AnyObject, TableColumnCtx } from '../table.type'
 
 function useEvents(props: TableBodyProps) {
   const instance = getCurrentInstance()

packages/table/src/table-body/index.ts

@@ -4,7 +4,7 @@ import isServer from '@element-plus/utils/isServer'
 import { defineComponent, getCurrentInstance, h, PropType, watch } from 'vue'
 import { hColgroup } from '../h-helper'
 import useLayoutObserver from '../layout-observer'
-import { Store, Table } from '../table'
+import { Store, Table } from '../table.type'
 import useRender from './render-helper'
 import { TableBodyProps } from './table-body'
 export default defineComponent({

packages/table/src/table-body/render-helper.ts

@@ -4,7 +4,7 @@ import useStyles from './styles-helper'
 import { arrayFindIndex } from '@element-plus/utils/util'
 import { getRowIdentity } from '../util'
 import { TableBodyProps } from './table-body'
-import { RenderRowData, AnyObject, Table } from '../table'
+import { RenderRowData, AnyObject, Table } from '../table.type'
 
 function useRender(props: TableBodyProps) {
   const instance = getCurrentInstance()

packages/table/src/table-body/styles-helper.ts

@@ -1,6 +1,6 @@
 import { getCurrentInstance } from 'vue'
 import { TableBodyProps } from './table-body'
-import { Table, AnyObject, TableColumnCtx } from '../table'
+import { Table, AnyObject, TableColumnCtx } from '../table.type'
 
 function useStyles(props: TableBodyProps) {
   const instance = getCurrentInstance()

packages/table/src/table-body/table-body.d.ts

@@ -1,4 +1,4 @@
-import { Store, AnyObject, fn } from '../table'
+import { Store, AnyObject, fn } from '../table.type'
 
 interface TableBodyProps {
   store: Store

packages/table/src/table-column/index.ts

@@ -10,7 +10,7 @@ import {
 import { cellStarts } from '../config'
 import { mergeOptions, compose } from '../util'
 import ElCheckbox from '@element-plus/checkbox'
-import { TableColumnCtx, TableColumn } from '../table'
+import { TableColumnCtx, TableColumn } from '../table.type'
 import useWatcher from './watcher-helper'
 import useRender from './render-helper'
 

packages/table/src/table-column/render-helper.ts

@@ -8,7 +8,7 @@ import {
 } from 'vue'
 import { cellForced, defaultRenderCell, treeCellPrefix } from '../config'
 import { parseWidth, parseMinWidth } from '../util'
-import { TableColumn, TableColumnCtx } from '../table'
+import { TableColumn, TableColumnCtx } from '../table.type'
 
 function useRender(props: TableColumnCtx, slots, owner: ComputedRef<any>) {
   const instance = (getCurrentInstance() as unknown) as TableColumn

packages/table/src/table-column/watcher-helper.ts

@@ -1,5 +1,5 @@
 import { watch, getCurrentInstance, ComputedRef } from 'vue'
-import { TableColumnCtx, TableColumn } from '../table'
+import { TableColumnCtx, TableColumn } from '../table.type'
 
 function useWatcher(owner: ComputedRef<any>, props_: TableColumnCtx) {
   const instance = (getCurrentInstance() as unknown) as TableColumn

packages/table/src/table-footer/index.ts

@@ -1,5 +1,5 @@
 import { defineComponent, h } from 'vue'
-import { TableFooter } from '../table'
+import { TableFooter } from '../table.type'
 import { hGutter, hColgroup } from '../h-helper'
 import useStyle from './style-helper'
 

packages/table/src/table-footer/mapState-helper.ts

@@ -1,5 +1,5 @@
 import { computed, getCurrentInstance } from 'vue'
-import { Table } from '../table'
+import { Table } from '../table.type'
 
 function useMapState() {
   const instance = getCurrentInstance()

packages/table/src/table-footer/style-helper.ts

@@ -1,5 +1,5 @@
 import { computed, getCurrentInstance } from 'vue'
-import { Table, TableFooter, TableColumnCtx } from '../table'
+import { Table, TableFooter, TableColumnCtx } from '../table.type'
 import useMapState from './mapState-helper'
 
 function useStyle(props: TableFooter) {

packages/table/src/table-header/event-helper.ts

@@ -1,7 +1,7 @@
 import { getCurrentInstance, ref } from 'vue'
 import { hasClass, addClass, removeClass } from '@element-plus/utils/dom'
 import isServer from '@element-plus/utils/isServer'
-import { TableColumnCtx, Table } from '../table'
+import { TableColumnCtx, Table } from '../table.type'
 import { TableHeaderProps } from './table-header'
 
 function useEvent(props: TableHeaderProps, emit) {

packages/table/src/table-header/index.ts

@@ -14,7 +14,7 @@ import useEvent from './event-helper'
 import useStyle from './style.helper'
 import useUtils from './utils-helper'
 import { hColgroup } from '../h-helper'
-import { Table, TableHeader } from '../table'
+import { Table, TableHeader } from '../table.type'
 import { TableHeaderProps } from './table-header'
 
 export default defineComponent({

packages/table/src/table-header/style.helper.ts

@@ -1,5 +1,5 @@
 import { getCurrentInstance } from 'vue'
-import { TableColumnCtx, AnyObject, Table } from '../table'
+import { TableColumnCtx, AnyObject, Table } from '../table.type'
 import { TableHeaderProps } from './table-header'
 
 function useStyle(props: TableHeaderProps) {

packages/table/src/table-header/table-header.d.ts

@@ -1,4 +1,4 @@
-import { Store } from '../table'
+import { Store } from '../table.type'
 
 interface TableHeaderProps {
   fixed: string

packages/table/src/table-header/utils-helper.ts

@@ -1,5 +1,5 @@
 import { getCurrentInstance, computed } from 'vue'
-import { Table, TableColumnCtx } from '../table'
+import { Table, TableColumnCtx } from '../table.type'
 import { TableHeaderProps } from './table-header'
 
 const getAllColumns = (columns: TableColumnCtx[]): TableColumnCtx[] => {

packages/table/src/table-layout.ts

@@ -2,7 +2,7 @@ import { nextTick, ref, isRef, Ref } from 'vue'
 import scrollbarWidth from '@element-plus/utils/scrollbar-width'
 import isServer from '@element-plus/utils/isServer'
 import { parseHeight } from './util'
-import { AnyObject, Table, Store, TableHeader, TableColumnCtx } from './table'
+import { AnyObject, Table, Store, TableHeader, TableColumnCtx } from './table.type'
 
 class TableLayout {
   observers: TableHeader[]

packages/table/src/table/style-helper.ts

@@ -13,7 +13,7 @@ import {
   Store,
   TableColumnCtx,
   fn,
-} from '../table'
+} from '../table.type'
 
 function useStyle(
   props: TableProps,

packages/table/src/table/utils-helper.ts

@@ -1,5 +1,5 @@
 import { ComputedRef } from 'vue'
-import { Store, AnyObject, TableLayout } from '../table'
+import { Store, AnyObject, TableLayout } from '../table.type'
 
 function useUtils(store: Store, layout: TableLayout, shouldUpdateHeight: ComputedRef<unknown>) {
   const setCurrentRow = (row: AnyObject) => {

packages/table/src/util.ts

@@ -1,5 +1,5 @@
 import { getValueByPath } from '@element-plus/utils/util'
-import { AnyObject, TableColumnCtx } from './table'
+import { AnyObject, TableColumnCtx } from './table.type'
 
 export const getCell = function (event: Event): HTMLElement {
   let cell = event.target as HTMLElement

packages/tree/src/model/node.ts

@@ -9,7 +9,7 @@ import {
   FakeNode,
   TreeNodeLoadedDefaultProps,
   TreeNodeChildState,
-} from '../tree.d'
+} from '../tree.type'
 
 export const getChildState = (node: Node[]): TreeNodeChildState => {
   let all = true

packages/tree/src/model/tree-store.ts

@@ -10,7 +10,7 @@ import {
   TreeStoreOptions,
   FilterValue,
   TreeNodeData,
-} from '../tree.d'
+} from '../tree.type'
 
 export default class TreeStore {
   currentNode: Node

packages/tree/src/model/util.ts

@@ -1,5 +1,5 @@
 import Node from './node'
-import { TreeKey, TreeNodeData } from '../tree.d'
+import { TreeKey, TreeNodeData } from '../tree.type'
 
 export const NODE_KEY = '$treeNodeId'
 

packages/upload/src/ajax.ts

@@ -2,7 +2,7 @@ import type {
   ElUploadProgressEvent,
   ElUploadRequestOptions,
   ElUploadAjaxError,
-} from './upload'
+} from './upload.type'
 
 function getError(action: string, option: ElUploadRequestOptions, xhr: XMLHttpRequest) {
   let msg: string

packages/upload/src/useHandlers.ts

@@ -3,7 +3,7 @@ import { ref, watch } from 'vue'
 import { NOOP } from '@vue/shared'
 
 // Inline types
-import type { ListType, UploadFile, ElFile, ElUploadProgressEvent, IUseHandlersProps } from './upload'
+import type { ListType, UploadFile, ElFile, ElUploadProgressEvent, IUseHandlersProps } from './upload.type'
 type UploadRef = {
   abort: (file: UploadFile) => void
   upload: (file: ElFile) => void