refactor: optimize Shiki (#34)

* ♻️ refactor: Language check * ♻️ refactor: Remove Shiki fallback
Innei · Aug 28, 2024 · 4ea9167 · 4ea9167
1 parent b9bea2c
commit 4ea9167
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 61 deletions.
diff --git a/src/components/modules/shared/CodeBlock.tsx b/src/components/modules/shared/CodeBlock.tsx
@@ -3,7 +3,6 @@ import dynamic from 'next/dynamic'
 import type { ReactNode } from 'react'
 import { lazy, Suspense, useMemo, useState } from 'react'
 
-import { HighLighterPrismCdn } from '~/components/ui/code-highlighter'
 import { ShikiHighLighterWrapper } from '~/components/ui/code-highlighter/shiki/ShikiWrapper'
 import { parseShouldCollapsedFromAttrs } from '~/components/ui/code-highlighter/shiki/utils'
 import { ExcalidrawLoading } from '~/components/ui/excalidraw/ExcalidrawLoading'
@@ -65,39 +64,37 @@ export const CodeBlockRender = (props: {
         const { lang } = props
         const nextProps = { ...props }
         nextProps.content = formatCode(props.content)
-        if (lang) {
-          const ShikiHighLighter =
-            shikiImport ??
-            lazy(() =>
-              import('~/components/ui/code-highlighter').then((mod) => ({
-                default: mod.ShikiFallback,
-              })),
-            )
-          if (isClientSide) {
-            shikiImport = ShikiHighLighter
-          }
-
-          const fallback = (
-            <ShikiHighLighterWrapper
-              {...nextProps}
-              shouldCollapsed={parseShouldCollapsedFromAttrs(props.attrs || '')}
-            >
-              <pre className="bg-transparent px-5">
-                <code className="!px-5 !text-base-content">
-                  {nextProps.content}
-                </code>
-              </pre>
-            </ShikiHighLighterWrapper>
-          )
-          if (!isClientSide) return fallback
-          return (
-            <Suspense fallback={fallback}>
-              <ShikiHighLighter {...nextProps} />
-            </Suspense>
+        const ShikiHighLighter =
+          shikiImport ??
+          lazy(() =>
+            import('~/components/ui/code-highlighter/shiki/Shiki').then(
+              (mod) => ({
+                default: mod.ShikiHighLighter,
+              }),
+            ),
           )
+        if (isClientSide) {
+          shikiImport = ShikiHighLighter
         }
 
-        return <HighLighterPrismCdn {...nextProps} />
+        const fallback = (
+          <ShikiHighLighterWrapper
+            {...nextProps}
+            shouldCollapsed={parseShouldCollapsedFromAttrs(props.attrs || '')}
+          >
+            <pre className="bg-transparent px-5">
+              <code className="!px-5 !text-base-content">
+                {nextProps.content}
+              </code>
+            </pre>
+          </ShikiHighLighterWrapper>
+        )
+        if (!isClientSide) return fallback
+        return (
+          <Suspense fallback={fallback}>
+            <ShikiHighLighter {...nextProps} />
+          </Suspense>
+        )
       }
     }
   }, [props])

diff --git a/src/components/ui/code-highlighter/CodeHighlighter.tsx b/src/components/ui/code-highlighter/CodeHighlighter.tsx
@@ -1,13 +1,6 @@
 import type React from 'react'
 import type { FC } from 'react'
-import {
-  use,
-  useCallback,
-  useEffect,
-  useInsertionEffect,
-  useMemo,
-  useRef,
-} from 'react'
+import { useCallback, useEffect, useInsertionEffect, useRef } from 'react'
 
 import { useIsPrintMode } from '~/atoms/css-media'
 import { useIsDark } from '~/hooks/common/use-is-dark'
@@ -17,8 +10,6 @@ import { loadScript, loadStyleSheet } from '~/lib/load-script'
 import { toast } from '~/lib/toast'
 
 import styles from './CodeHighlighter.module.css'
-import type { ShikiProps } from './shiki/Shiki'
-import { ShikiHighLighter } from './shiki/Shiki'
 
 declare global {
   interface Window {
@@ -149,22 +140,3 @@ const useLoadHighlighter = (ref: React.RefObject<HTMLElement | null>) => {
       })
   }, [])
 }
-let bundledLanguagesKeysSet: Set<string> | null = null
-export const ShikiFallback: FC<ShikiProps> = (props) => {
-  const { lang } = props
-  const shikiSupported = use(
-    useMemo(async () => {
-      if (!lang) return false
-
-      if (!bundledLanguagesKeysSet) {
-        const { bundledLanguages } = await import('shiki/langs')
-        bundledLanguagesKeysSet = new Set(Object.keys(bundledLanguages))
-      }
-
-      return bundledLanguagesKeysSet.has(lang)
-    }, [lang]),
-  )
-  return (
-    <ShikiHighLighter {...props} lang={shikiSupported ? props.lang : 'text'} />
-  )
-}
diff --git a/src/components/ui/code-highlighter/shiki/Shiki.tsx b/src/components/ui/code-highlighter/shiki/Shiki.tsx
@@ -53,7 +53,7 @@ export const ShikiHighLighter: FC<ShikiProps> = (props) => {
 
       const { bundledLanguages } = await import('shiki/langs')
 
-      if (!language) return
+      if (!language || !(bundledLanguages as any)[language]) return
       const importFn = (bundledLanguages as any)[language]
       if (!importFn) return
       return loadShikiLanguage(language || '', importFn)