refactor(code, log): new hljs impl

demo/SiteHeader.vue

@@ -50,7 +50,7 @@
 <script>
 import { computed, readonly, ref } from 'vue'
 import version from '../src/version'
-import { i18n } from './util-composables'
+import { i18n } from './utils/composables'
 import {
   useThemeName,
   useLocaleName,

demo/SiteRoot.vue

@@ -5,6 +5,7 @@
     :unstable-theme="theme"
     :locale="locale"
     :date-locale="dateLocale"
+    :hljs="hljs"
   >
     <n-loading-bar-provider>
       <n-message-provider>

demo/index.dev.js

@@ -1,17 +1,13 @@
 import { createApp } from 'vue'
 import { installDemoComponents } from './init'
-import hljs from './hljs'
 import SiteRoot from './SiteRoot.vue'
 import naive from '../src/index'
-import './font'
 import { routes, childRoutes } from './routes/routes'
 import createDemoRouter from './routes/router'
 
 import debugRouteMixin from './routes/debug-route-mixin'
 debugRouteMixin(routes, childRoutes)
 
-naive.setHljs(hljs)
-
 const app = createApp(SiteRoot)
 
 const router = createDemoRouter(app, routes)

demo/index.prod.js

@@ -1,14 +1,10 @@
 import { createApp } from 'vue'
 import naive from 'naive-ui'
 import { installDemoComponents } from './init'
-import hljs from './hljs'
 import SiteRoot from './SiteRoot.vue'
-import './font'
 import { routes } from './routes/routes'
 import createDemoRouter from './routes/router'
 
-naive.setHljs(hljs)
-
 const app = createApp(SiteRoot)
 
 const router = createDemoRouter(app, routes)

demo/index.ts-dev.js

@@ -1,9 +1,7 @@
 import { createApp } from 'vue'
 import { installDemoComponents } from './init'
-import hljs from './hljs'
 import SiteRoot from './SiteRoot.vue'
 import naive from '../src/index'
-import './font'
 import { routes, childRoutes } from './routes/routes'
 import createDemoRouter from './routes/router'
 import tusimpleTheme from '../themes/tusimple'
@@ -11,7 +9,6 @@ import tusimpleTheme from '../themes/tusimple'
 import debugRouteMixin from './routes/debug-route-mixin'
 debugRouteMixin(routes, childRoutes)
 
-naive.setHljs(hljs)
 naive.use(tusimpleTheme)
 
 const app = createApp(SiteRoot)

demo/index.ts-prod.js

@@ -1,14 +1,11 @@
 import { createApp } from 'vue'
 import naive from 'naive-ui'
 import { installDemoComponents } from './init'
-import hljs from './hljs'
 import SiteRoot from './SiteRoot.vue'
-import './font'
 import { routes } from './routes/routes'
 import createDemoRouter from './routes/router'
 import tusimpleTheme from '../themes/tusimple'
 
-naive.setHljs(hljs)
 naive.use(tusimpleTheme)
 
 const app = createApp(SiteRoot)

demo/pages/landing/index.vue

@@ -54,7 +54,7 @@
 import LandingFooter from './Footer.vue'
 import leftImage from './Left.vue'
 import rightImage from './Right.vue'
-import { i18n } from '../../util-composables'
+import { i18n } from '../../utils/composables'
 import { useThemeName } from '../../store'
 
 export default {

demo/store/index.js

@@ -1,8 +1,9 @@
 import { computed, ref, provide, reactive, toRef, inject } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { darkTheme, enUS, zhCN, dateEnUS, dateZhCN } from '../../src'
-import menuOptions from './menu-options'
 import { i18n } from '../utils/composables'
+import menuOptions from './menu-options'
+import hljs from './hljs'
 
 const storeKey = 'site-store'
 
@@ -88,6 +89,7 @@ export function siteSetup () {
   )
   i18n.provide(computed(() => localeNameRef.value))
   return {
+    hljs,
     theme: themeRef,
     locale: localeRef,
     dateLocale: dateLocaleRef

demo/utils/ComponentDemo.vue

@@ -57,7 +57,7 @@
 import { nextTick } from 'vue'
 import { CodeOutline } from '@vicons/ionicons-v5'
 import { useDisplayMode } from '../store'
-import { i18n } from '../util-composables'
+import { i18n } from '../utils/composables'
 
 export default {
   components: {

demo/utils/EditOnGithubHeader.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { i18n } from '../util-composables'
+import { i18n } from '../utils/composables'
 
 export default {
   name: 'EditOnGithubHeader',

src/_mixins/index.js

@@ -3,3 +3,4 @@ export { default as useTheme } from './use-theme'
 export { default as useConfig } from './use-config'
 export { default as useLocale } from './use-locale'
 export { default as useStyle } from './use-style'
+export { default as useHljs } from './use-hljs'

src/_mixins/use-hljs.js

@@ -0,0 +1,18 @@
+import { inject, getCurrentInstance, computed } from 'vue'
+import { warn } from '../_utils'
+
+export default function useHljs (props) {
+  const NConfigProvider = inject('NConfigProvider', {})
+  const vm = getCurrentInstance().proxy
+  if (
+    __DEV__ &&
+    !props.hljs &&
+    !NConfigProvider.mergedHljs &&
+    !vm.$naive.hljs
+  ) {
+    warn('code', 'hljs is not set.')
+  }
+  return computed(() => {
+    return props.hljs || NConfigProvider.mergedHljs || vm.$naive.hljs
+  })
+}

src/code/demos/enUS/index.demo-entry.md

@@ -6,19 +6,29 @@
   Due to package size, Naive UI doesn't include highlight.js. If you want use Code, make sure you have set highlightjs before using it.
 </n-alert>
 
-The following code shows how to set hljs of Naive UI. Importing highlight.js on demand is recommonded, because it can significantly reduce bundle size of your app.
+The following code shows how to set hljs of Code. Importing highlight.js on demand is recommonded, because it can significantly reduce bundle size of your app.
 
-```js
-// ...
-import naive from 'naive-ui'
-import hljs from 'highlight.js/lib/core'
-import cpp from 'highlight.js/lib/languages/cpp'
+```html
+<template>
+  <n-config-provider :hljs="hljs">
+    <my-app />
+  </n-config-provider>
+</template>
 
-hljs.registerLanguage('cpp', cpp)
-naive.setHljs(hljs)
+<script>
+  import hljs from 'highlight.js/lib/core'
+  import cpp from 'highlight.js/lib/languages/cpp'
 
-// ...
-app.use(naive)
+  hljs.registerLanguage('cpp', cpp)
+
+  export default {
+    setup() {
+      return {
+        hljs
+      }
+    }
+  }
+</script>
 ```
 
 ## Demos

src/code/demos/zhCN/index.demo-entry.md

@@ -6,19 +6,29 @@
   由于尺寸原因，Naive UI 并不把 hightlight.js 内置。如果你需要使用代码组件，请确保你在使用之前已经设定了 highlight.js。
 </n-alert>
 
-下面的代码展示了如何为 Naive UI 设定 hljs。比较推荐的方式是按需引入，因为它可以极大的减小打包尺寸。
+下面的代码展示了如何为 Code 设定 hljs。比较推荐的方式是按需引入，因为它可以极大的减小打包尺寸。
 
-```js
-// ...
-import naive from 'naive-ui'
-import hljs from 'highlight.js/lib/core'
-import cpp from 'highlight.js/lib/languages/cpp'
+```html
+<template>
+  <n-config-provider :hljs="hljs">
+    <my-app />
+  </n-config-provider>
+</template>
 
-hljs.registerLanguage('cpp', cpp)
-naive.setHljs(hljs)
+<script>
+  import hljs from 'highlight.js/lib/core'
+  import cpp from 'highlight.js/lib/languages/cpp'
 
-// ...
-app.use(naive)
+  hljs.registerLanguage('cpp', cpp)
+
+  export default {
+    setup() {
+      return {
+        hljs
+      }
+    }
+  }
+</script>
 ```
 
 ## 演示

src/code/src/Code.js

@@ -4,13 +4,11 @@ import {
   nextTick,
   toRef,
   watch,
-  getCurrentInstance,
   onMounted,
   ref,
   computed
 } from 'vue'
-import { useTheme, useConfig } from '../../_mixins'
-import { warn } from '../../_utils'
+import { useTheme, useHljs } from '../../_mixins'
 import { codeLight } from '../styles'
 import style from './styles/index.cssr.js'
 
@@ -36,22 +34,10 @@ export default defineComponent({
     }
   },
   setup (props, { slots }) {
-    const vm = getCurrentInstance().proxy
     const codeRef = ref(null)
-    const { NConfigProvider } = useConfig(props)
-    if (
-      __DEV__ &&
-      !props.hljs &&
-      !NConfigProvider.mergedHljs &&
-      !vm.$naive.hljs
-    ) {
-      warn('code', 'hljs is not set.')
-    }
-    const getHljs = () => {
-      return props.hljs || NConfigProvider.mergedHljs || vm.$naive.hljs
-    }
+    const hljsRef = useHljs(props)
     const generateCodeHTML = (language, code, trim) => {
-      const hljs = getHljs()
+      const { value: hljs } = hljsRef
       const languageValid = !!(language && hljs.getLanguage(language))
       if (trim) code = code.trim()
       return {

src/log/demos/enUS/index.demo-entry.md

@@ -10,20 +10,33 @@ If you have some logs to show, use log.
 
 In hightlight demo, we defined a language called `naive-log` which will highlight all the numbers of line. The following code shows how we defined it. If you want to know more about hightlight.js, see <n-a href="https://highlightjs.org/">hightlight.js</n-a> and <n-a href="https://highlightjs.readthedocs.io/en/latest/index.html">highlight.js developer documentation</n-a>
 
-```js
-// ...
-hljs.registerLanguage('naive-log', () => ({
-  contains: [
-    {
-      className: 'number',
-      begin: /\d+/
-    }
-  ]
-}))
+```html
+<template>
+  <n-config-provider :hljs="hljs">
+    <my-app />
+  </n-config-provider>
+</template>
 
-naive.setHljs(hljs)
-app.use(naive)
-// ...
+<script>
+  import hljs from 'highlight.js/lib/core'
+
+  hljs.registerLanguage('naive-log', () => ({
+    contains: [
+      {
+        className: 'number',
+        begin: /\d+/
+      }
+    ]
+  }))
+
+  export default {
+    setup() {
+      return {
+        hljs
+      }
+    }
+  }
+</script>
 ```
 
 ## Demos

src/log/demos/zhCN/index.demo-entry.md

@@ -10,20 +10,33 @@
 
 在本页如何高亮的演示中，我们定义了一个叫做 `naive-log` 的语言来高亮全部的数字。下面的代码是我们怎么定义的。如果你想了解 highlight.js，可以参考 <n-a href="https://highlightjs.org/">hightlight.js</n-a> 和 <n-a href="https://highlightjs.readthedocs.io/en/latest/index.html">highlight.js developer documentation</n-a>
 
-```js
-// ...
-hljs.registerLanguage('naive-log', () => ({
-  contains: [
-    {
-      className: 'number',
-      begin: /\d+/
-    }
-  ]
-}))
+```html
+<template>
+  <n-config-provider :hljs="hljs">
+    <my-app />
+  </n-config-provider>
+</template>
 
-naive.setHljs(hljs)
-app.use(naive)
-// ...
+<script>
+  import hljs from 'highlight.js/lib/core'
+
+  hljs.registerLanguage('naive-log', () => ({
+    contains: [
+      {
+        className: 'number',
+        begin: /\d+/
+      }
+    ]
+  }))
+
+  export default {
+    setup() {
+      return {
+        hljs
+      }
+    }
+  }
+</script>
 ```
 
 ## 演示

src/log/src/Log.vue

@@ -34,7 +34,7 @@
 <script>
 import { defineComponent, ref, computed } from 'vue'
 import { throttle } from 'lodash-es'
-import { useTheme } from '../../_mixins'
+import { useTheme, useHljs } from '../../_mixins'
 import { warn } from '../../_utils'
 import { NScrollbar } from '../../scrollbar'
 import { NCode } from '../../code'
@@ -120,6 +120,7 @@ export default defineComponent({
     return {
       scrollbarRef: ref(null),
       mergedTheme: themeRef,
+      mergedHljs: useHljs(props),
       cssVars: computed(() => {
         const {
           self: {
@@ -167,9 +168,6 @@ export default defineComponent({
     this.handleWheel = throttle(this.handleWheel, 300)
   },
   methods: {
-    getHljs () {
-      return this.hljs || this.$naive.hljs
-    },
     handleScroll (e) {
       const container = e.target
       const content = e.target.firstElementChild

src/log/src/LogLine.vue

@@ -4,6 +4,7 @@
 
 <script>
 import { defineComponent } from 'vue'
+import { useConfig } from '../../_mixins'
 
 export default defineComponent({
   inject: {
@@ -17,6 +18,11 @@ export default defineComponent({
       default: undefined
     }
   },
+  setup (props) {
+    return {
+      ...useConfig(props)
+    }
+  },
   computed: {
     highlight () {
       return this.NLog.highlight
@@ -50,15 +56,13 @@ export default defineComponent({
         ).content
       }
     },
-    getHljs () {
-      return this.hljs || this.$naive.hljs
-    },
     generateCodeHTML (language, code, trim) {
-      const languageValid = !!(language && this.getHljs().getLanguage(language))
+      const { mergedHljs: hljs } = this.NLog
+      const languageValid = !!(language && hljs.getLanguage(language))
       if (trim) code = code.trim()
       return {
         valid: languageValid,
-        content: this.getHljs().highlight(language, code).value
+        content: hljs.highlight(language, code).value
       }
     }
   }