refactor(code): ts

src/code/index.js

@@ -1,2 +0,0 @@
-/* istanbul ignore file */
-export { default as NCode } from './src/Code.js'

src/code/index.ts

@@ -0,0 +1,2 @@
+/* istanbul ignore file */
+export { default as NCode } from './src/Code'

src/code/src/Code.ts

@@ -1,16 +1,8 @@
-import {
+import { defineComponent, h, toRef, watch, onMounted, ref, computed } from 'vue'
-  defineComponent,
-  h,
-  nextTick,
-  toRef,
-  watch,
-  onMounted,
-  ref,
-  computed
-} from 'vue'
 import { useTheme, useHljs } from '../../_mixins'
 import { codeLight } from '../styles'
-import style from './styles/index.cssr.js'
+import type { CodeThemeVars } from '../styles'
+import style from './styles/index.cssr'
 
 export default defineComponent({
   name: 'Code',
@@ -34,37 +26,43 @@ export default defineComponent({
     }
   },
   setup (props, { slots }) {
-    const codeRef = ref(null)
+    const codeRef = ref<HTMLElement | null>(null)
     const hljsRef = useHljs(props)
-    const generateCodeHTML = (language, code, trim) => {
+    const createCodeHtml = (language: string, code: string, trim: boolean) => {
       const { value: hljs } = hljsRef
-      const languageValid = !!(language && hljs.getLanguage(language))
+      if (!hljs) {
-      if (trim) code = code.trim()
+        return null
-      return {
-        valid: languageValid,
-        content: hljs.highlight(language, code).value
       }
+      if (!(language && hljs.getLanguage(language))) {
+        return null
+      }
+      return hljs.highlight(language, trim ? code.trim() : code).value
     }
     const setCode = () => {
       if (slots.default) return
+      const { value: codeEl } = codeRef
+      if (!codeEl) return
       const { code, language } = props
       if (language) {
-        const { valid, content } = generateCodeHTML(language, code, props.trim)
+        const html = createCodeHtml(language, code, props.trim)
-        if (valid) {
+        if (html !== null) {
-          codeRef.value.innerHTML = content
+          codeEl.innerHTML = html
           return
         }
       }
-      codeRef.value.textContent = code
+      codeEl.textContent = code
     }
     onMounted(setCode)
-    watch(toRef(props, 'language'), () => {
+    watch(toRef(props, 'language'), setCode)
-      nextTick(setCode)
+    watch(toRef(props, 'code'), setCode)
-    })
+    watch(hljsRef, setCode)
-    watch(toRef(props, 'code'), () => {
+    const themeRef = useTheme<CodeThemeVars>(
-      nextTick(setCode)
+      'Code',
-    })
+      'Code',
-    const themeRef = useTheme('Code', 'Code', style, codeLight, props)
+      style,
+      codeLight,
+      props
+    )
     return {
       codeRef,
       cssVars: computed(() => {

src/code/src/styles/index.cssr.ts

@@ -18,15 +18,21 @@ const codeClass = withPrefix('code')
 // --hue-6
 // --hue-6-2
 export default c([
-  cB('code', `
+  cB(
+    'code',
+    `
     display: block;
     font-size: var(--font-size);
     font-family: var(--font-family);
-  `, [
+  `,
-    c('pre', `
+    [
+      c(
+        'pre',
+        `
       margin: 0;
       font-family: inherit;
-    `),
+    `
+      ),
       c('[class^=hljs]', {
         color: 'var(--text-color)',
         transition: `
@@ -34,7 +40,8 @@ export default c([
         background-color .3s var(--bezier)
       `
       })
-  ]),
+    ]
+  ),
   `${codeClass} .hljs-comment,
   ${codeClass} .hljs-quote {
     color: var(--mono-3);

src/code/styles/dark.ts

@@ -1,9 +1,11 @@
 import { commonDark } from '../../_styles/new-common'
+import type { ThemeCommonVars } from '../../_styles/new-common'
+import type { CodeThemeVars } from './light'
 
 export default {
   name: 'Code',
   common: commonDark,
-  self (vars) {
+  self (vars: ThemeCommonVars): CodeThemeVars {
     const { textColor2, fontSize, fontWeightStrong } = vars
     return {
       textColor: textColor2,

src/code/styles/index.js

@@ -1,2 +0,0 @@
-export { default as codeDark } from './dark.js'
-export { default as codeLight } from './light.js'

src/code/styles/index.ts

@@ -0,0 +1,3 @@
+export { default as codeDark } from './dark'
+export { default as codeLight } from './light'
+export type { CodeThemeVars } from './light'

src/code/styles/light.ts

@@ -1,9 +1,10 @@
 import { commonLight } from '../../_styles/new-common'
+import type { ThemeCommonVars } from '../../_styles/new-common'
 
-export default {
+const codeLight = {
   name: 'Code',
   common: commonLight,
-  self (vars) {
+  self (vars: ThemeCommonVars) {
     const { textColor2, fontSize, fontWeightStrong } = vars
     return {
       textColor: textColor2,
@@ -22,3 +23,6 @@ export default {
     }
   }
 }
+
+export default codeLight
+export type CodeThemeVars = ReturnType<typeof codeLight.self>

src/config-provider/src/ConfigProvider.ts

@@ -21,11 +21,6 @@ import {
 export default defineComponent({
   name: 'ConfigProvider',
   alias: ['App'],
-  provide () {
-    return {
-      NConfigProvider: this
-    }
-  },
   props: {
     abstract: {
       type: Boolean,

src/dropdown/src/Dropdown.ts

@@ -10,12 +10,7 @@ import {
   reactive
 } from 'vue'
 import { RawNode, TreeMate } from 'treemate'
-import {
+import { useMergedState, useKeyboard, useMemo } from 'vooks'
-  useMergedState,
-  // useFalseUntilTruthy,
-  useKeyboard,
-  useMemo
-} from 'vooks'
 import { useTheme } from '../../_mixins'
 import { NPopover, popoverProps } from '../../popover'
 import { keep, call, createKey } from '../../_utils'
@@ -105,7 +100,6 @@ export default defineComponent({
       toRef(props, 'show'),
       uncontrolledShowRef
     )
-    // const dataNeededRef = useFalseUntilTruthy(mergedShowRef)
     const treemateRef = computed(() => {
       return TreeMate(props.options, treemateOptions)
     })