fix(log): warn on highlight.js when no language is set, closes #327

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Fixes
+
+- Fix `n-log` warn on highlight.js when no language is set, closes [#327](https://github.com/TuSimple/naive-ui/issues/327).
+
 ## 2.15.1 (2021-06-30)
 
 - Fix no `web-types.json`.

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Fixes
+
+- 修复 `n-log` 在未设定语言时仍然对缺少 highlight.js 报错，关闭 [#327](https://github.com/TuSimple/naive-ui/issues/327)
+
 ## 2.15.1 (2021-06-30)
 
 - 修复缺少 `web-types.json`

jest.config.js

@@ -53,7 +53,7 @@ module.exports = {
 
   // A set of global variables that need to be available in all test environments
   globals: {
-    __DEV__: false
+    __DEV__: true
   },
 
   // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.

src/_mixins/use-hljs.ts

@@ -1,4 +1,4 @@
-import { inject, computed, ComputedRef } from 'vue'
+import { inject, computed, ComputedRef, Ref, watchEffect } from 'vue'
 import type { HLJSApi } from 'highlight.js'
 import { configProviderInjectionKey } from '../config-provider/src/ConfigProvider'
 import { warn } from '../_utils'
@@ -13,11 +13,25 @@ export interface Hljs {
   getLanguage: HLJSApi['getLanguage']
 }
 export default function useHljs (
-  props: UseHljsProps
+  props: UseHljsProps,
+  shouldHighlightRef?: Ref<boolean>
 ): ComputedRef<Hljs | undefined> {
   const NConfigProvider = inject(configProviderInjectionKey, null)
-  if (__DEV__ && !props.hljs && !NConfigProvider?.mergedHljsRef.value) {
-    warn('code', 'hljs is not set.')
+  if (__DEV__) {
+    const warnHljs = (): void => {
+      if (!props.hljs && !NConfigProvider?.mergedHljsRef.value) {
+        warn('code', 'hljs is not set.')
+      }
+    }
+    if (!shouldHighlightRef) {
+      warnHljs()
+    } else {
+      watchEffect(() => {
+        if (shouldHighlightRef.value) {
+          warnHljs()
+        }
+      })
+    }
   }
   return computed(() => {
     return (props.hljs as any) || NConfigProvider?.mergedHljsRef.value

src/code/src/Code.tsx

@@ -31,7 +31,9 @@ const codeProps = {
   uri: {
     type: Boolean,
     default: false
-  }
+  },
+  // In n-log, we only need to mount code's style for highlight
+  internalNoHighlight: Boolean
 }
 
 export type CodeProps = ExtractPublicPropTypes<typeof codeProps>
@@ -40,9 +42,10 @@ export default defineComponent({
   name: 'Code',
   props: codeProps,
   setup (props, { slots }) {
+    const { internalNoHighlight } = props
     const { mergedClsPrefixRef } = useConfig()
     const codeRef = ref<HTMLElement | null>(null)
-    const hljsRef = useHljs(props)
+    const hljsRef = internalNoHighlight ? { value: undefined } : useHljs(props)
     const createCodeHtml = (
       language: string,
       code: string,
@@ -79,7 +82,7 @@ export default defineComponent({
     onMounted(setCode)
     watch(toRef(props, 'language'), setCode)
     watch(toRef(props, 'code'), setCode)
-    watch(hljsRef, setCode)
+    if (!internalNoHighlight) watch(hljsRef, setCode)
     const themeRef = useTheme(
       'Code',
       'Code',

src/code/tests/Code.spec.ts

@@ -2,7 +2,9 @@ import { mount } from '@vue/test-utils'
 import { NCode } from '../index'
 
 describe('n-code', () => {
-  it('should work with import on demand', () => {
+  it('should warn when no hljs is set', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation()
     mount(NCode)
+    expect(spy).toHaveBeenCalled()
   })
 })

src/log/src/Log.tsx

@@ -208,7 +208,7 @@ export default defineComponent({
     }
     provide(logInjectionKey, {
       languageRef: toRef(props, 'language'),
-      mergedHljsRef: useHljs(props),
+      mergedHljsRef: useHljs(props, highlightRef),
       trimRef: toRef(props, 'trim'),
       highlightRef
     })
@@ -270,6 +270,7 @@ export default defineComponent({
           {{
             default: () => (
               <NCode
+                internalNoHighlight
                 theme={mergedTheme.peers.Code}
                 themeOverrides={mergedTheme.peerOverrides.Code}
               >

src/log/tests/Log.spec.ts

@@ -2,7 +2,15 @@ import { mount } from '@vue/test-utils'
 import { NLog } from '../index'
 
 describe('n-log', () => {
-  it('should work with import on demand', () => {
+  it('should warn with language setted & no hljs is set', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation()
     mount(NLog)
+    expect(spy).not.toHaveBeenCalled()
+    mount(NLog, {
+      props: {
+        language: 'kirby'
+      }
+    })
+    expect(spy).toHaveBeenCalled()
   })
 })