refactor(mixins): better type

.eslintrc.js

@@ -1,12 +1,10 @@
 module.exports = {
   extends: [
-    'plugin:vue/recommended',
+    'plugin:vue/essential',
     '@vue/standard',
+    '@vue/typescript/recommended',
     'plugin:markdown/recommended'
   ],
-  parserOptions: {
-    parser: 'babel-eslint'
-  },
   rules: {
     'vue/max-attributes-per-line': [
       2,
@@ -24,6 +22,12 @@ module.exports = {
     'no-void': 0
   },
   overrides: [
+    {
+      files: ['light.ts'],
+      rules: {
+        '@typescript-eslint/explicit-module-boundary-types': 0
+      }
+    },
     {
       files: '**/*.md/*.js',
       rules: {

package.json

@@ -45,6 +45,10 @@
       "prettier --write",
       "eslint --fix"
     ],
+    "*.ts": [
+      "prettier --write",
+      "eslint --fix"
+    ],
     "*.vue": [
       "prettier --parser=vue --write",
       "eslint --fix"
@@ -67,22 +71,25 @@
     "@rollup/plugin-replace": "^2.3.4",
     "@types/jest": "^26.0.15",
     "@types/lodash-es": "^4.17.4",
+    "@typescript-eslint/eslint-plugin": "^4.13.0",
+    "@typescript-eslint/parser": "^4.13.0",
     "@vitejs/plugin-vue": "^1.0.4",
     "@vue/compiler-sfc": "^3.0.5",
     "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^2.0.0-beta.12",
     "autoprefixer": "^9.8.6",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.2",
     "cross-env": "^5.2.1",
     "cssnano": "^4.1.10",
-    "eslint": "^7.15.0",
+    "eslint": "^7.0.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-markdown": "^2.0.0-rc.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.2",
-    "eslint-plugin-vue": "^7.1.0",
+    "eslint-plugin-vue": "^7.0.0",
     "fs-extra": "^9.0.1",
     "husky": "^4.3.5",
     "jest": "^26.6.2",
@@ -110,13 +117,13 @@
     "evtd": "^0.1.0",
     "highlight.js": "^10.4.1",
     "lodash-es": "^4.17.15",
-    "seemly": "^0.1.2",
-    "treemate": "^0.1.13",
+    "seemly": "^0.1.3",
+    "treemate": "^0.1.18",
     "vdirs": "^0.0.3",
     "vfonts": "^0.0.1",
     "vooks": "^0.0.6",
     "vue": "^3.0.5",
-    "vueuc": "0.0.8"
+    "vueuc": "0.0.11"
   },
   "husky": {
     "hooks": {

src/_mixins/use-config.ts

@@ -1,12 +1,22 @@
-import { inject, computed } from 'vue'
+import { inject, computed, ComputedRef } from 'vue'
 import { ConfigProviderInjection } from '../config-provider'
 
-interface UseConfigProps {
+type UseConfigProps = Readonly<{
   bordered?: boolean
-}
+  [key: string]: unknown
+}>
 
-export default function useConfig (props: UseConfigProps) {
-  const NConfigProvider = inject<ConfigProviderInjection | null>('NConfigProvider', null)
+export default function useConfig (
+  props: UseConfigProps
+): {
+  NConfigProvider: ConfigProviderInjection | null
+  mergedBordered: ComputedRef<boolean>
+  namespace: ComputedRef<string | undefined>
+} {
+  const NConfigProvider = inject<ConfigProviderInjection | null>(
+    'NConfigProvider',
+    null
+  )
   return {
     NConfigProvider,
     mergedBordered: computed(() => {

src/_mixins/use-form-item.ts

@@ -1,10 +1,5 @@
 import { computed, inject, provide, onBeforeUnmount } from 'vue'
 
-interface UseFormItemOptions {
-  defaultSize?: string
-  mergedSize?: (formItem: FormItemInjection | null) => string
-}
-
 interface FormItemInjection {
   size: string | undefined
   mergedSize: string
@@ -15,11 +10,19 @@ interface FormItemInjection {
   handleContentChange: () => void
 }
 
+interface UseFormItemOptions {
+  defaultSize?: string
+  mergedSize?: (formItem: FormItemInjection | null) => string
+}
+
 interface UseFormItemProps {
   size?: string
 }
 
-export default function useFormItem (props: UseFormItemProps, { defaultSize = 'medium', mergedSize }: UseFormItemOptions = {}) {
+export default function useFormItem (
+  props: UseFormItemProps,
+  { defaultSize = 'medium', mergedSize }: UseFormItemOptions = {}
+) {
   const NFormItem = inject<FormItemInjection | null>('NFormItem', null)
   provide('NFormItem', null)
   const mergedSizeRef = computed(

src/_mixins/use-hljs.ts

@@ -1,13 +1,24 @@
-import { inject, getCurrentInstance, computed } from 'vue'
+import { inject, getCurrentInstance, computed, ComputedRef } from 'vue'
 import { ConfigProviderInjection } from '../config-provider'
 import { warn } from '../_utils'
 
 interface UseHljsProps {
-  hljs?: any
+  hljs?: unknown
+  [key: string]: unknown
 }
 
-export default function useHljs (props: UseHljsProps) {
-  const NConfigProvider = inject<ConfigProviderInjection | null>('NConfigProvider', null)
+interface Hljs {
+  getLanguage(lang: string): string | undefined
+  highlight(language: string, code: string): { value: string }
+}
+
+export default function useHljs (
+  props: UseHljsProps
+): ComputedRef<Hljs | undefined> {
+  const NConfigProvider = inject<ConfigProviderInjection | null>(
+    'NConfigProvider',
+    null
+  )
   const vm = getCurrentInstance()?.proxy as any
   if (
     __DEV__ &&

src/_mixins/use-style.ts

@@ -1,6 +1,6 @@
 import { CNode } from 'css-render'
 import { onBeforeMount } from 'vue'
-import globalStyle from '../_styles/global/index.cssr.js'
+import globalStyle from '../_styles/global/index.cssr'
 
 globalStyle.mount({
   id: 'naive-ui-global'

src/_mixins/use-theme.ts

@@ -1,20 +1,45 @@
-import { inject, computed, onBeforeMount } from 'vue'
+import { inject, computed, onBeforeMount, ComputedRef, PropType } from 'vue'
 import { merge } from 'lodash-es'
-import globalStyle from '../_styles/global/index.cssr.js'
+import globalStyle from '../_styles/global/index.cssr'
 import { CNode } from 'css-render'
-import { ConfigProviderInjection, Theme, ThemeOverrides } from '../config-provider/index.js'
+import {
+  ConfigProviderInjection,
+  ThemeOverrides
+} from '../config-provider/index.js'
+import type { ThemeCommonVars } from '../_styles/new-common'
 
 globalStyle.mount({
   id: 'naive-ui-global'
 })
 
-interface UseThemeProps {
-  unstableTheme: Theme
-  unstableThemeOverrides: ThemeOverrides
-  builtinThemeOverrides: ThemeOverrides
+interface Theme<T> {
+  name: string
+  common?: any
+  peers?: any
+  self(vars: ThemeCommonVars): T
 }
 
-function useTheme (resolveId: string, mountId: string, style: CNode | undefined, defaultTheme: Theme, props: UseThemeProps) {
+type UseThemeProps<T> = Readonly<{
+  unstableTheme: Theme<T>
+  unstableThemeOverrides: ThemeOverrides
+  builtinThemeOverrides: ThemeOverrides
+  [key: string]: unknown
+}>
+
+export interface MergedTheme<T> {
+  common: ThemeCommonVars
+  self: T
+  peers: any
+  overrides: any
+}
+
+function useTheme<T> (
+  resolveId: string,
+  mountId: string,
+  style: CNode | undefined,
+  defaultTheme: Theme<T>,
+  props: UseThemeProps<T>
+): ComputedRef<MergedTheme<T>> {
   if (style) {
     onBeforeMount(() => {
       style.mount({
@@ -22,7 +47,10 @@ function useTheme (resolveId: string, mountId: string, style: CNode | undefined,
       })
     })
   }
-  const NConfigProvider = inject<ConfigProviderInjection | null>('NConfigProvider', null)
+  const NConfigProvider = inject<ConfigProviderInjection | null>(
+    'NConfigProvider',
+    null
+  )
   const mergedThemeRef = computed(() => {
     // keep props to make theme overrideable
     const {
@@ -71,7 +99,7 @@ function useTheme (resolveId: string, mountId: string, style: CNode | undefined,
     return {
       common: mergedCommon,
       self: mergedSelf,
-      peers: merge(peers, injectedPeers),
+      peers: merge(defaultTheme.peers, peers, injectedPeers),
       overrides: merge(peersOverrides, injectedPeersOverrides)
     }
   })
@@ -93,6 +121,23 @@ useTheme.props = {
   }
 }
 
+useTheme.createProps = function <T> () {
+  return {
+    unstableTheme: {
+      type: Object as PropType<Theme<T>>,
+      default: undefined
+    },
+    unstableThemeOverrides: {
+      type: Object,
+      default: undefined
+    },
+    builtinThemeOverrides: {
+      type: Object,
+      default: undefined
+    }
+  }
+}
+
 /**
  * props.unstableTheme:
  * { common, self(), peers }

src/shims-vue.d.ts

@@ -1,5 +1,5 @@
-declare module "*.vue" {
-  import { defineComponent } from "vue";
-  const component: ReturnType<typeof defineComponent>;
-  export default component;
-}
+declare module '*.vue' {
+  import { defineComponent } from 'vue'
+  const component: ReturnType<typeof defineComponent>
+  export default component
+}

src/styles.ts

@@ -1,6 +1,5 @@
 export { commonDark } from './_styles/new-common'
 export { alertDark } from './alert/styles'
-export { affixDark } from './affix/styles'
 export { anchorDark } from './anchor/styles'
 export { autoCompleteDark } from './auto-complete/styles'
 export { avatarDark } from './avatar/styles'

src/version.ts

@@ -0,0 +1 @@
+export default '2.0.0-beta.1'