better code highlighter initialization and loading; live relative time

Author: al3xnag

packages/jsrepl/src/app/dashboard/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import Footer from '@/components/footer'
 import Header from '@/components/header'
+import { CodeHighlighterProvider } from '@/components/providers/code-highlighter-provider'
 
 export const dynamic = 'force-dynamic'
 
@@ -17,12 +18,14 @@ export default function DashboardLayout({
   children: React.ReactNode
 }>) {
   return (
-    <div className="flex min-h-screen flex-col">
-      <Header />
-      <main className="flex-1">
-        <div className="text-foreground/90 container">{children}</div>
-      </main>
-      <Footer className="mt-32 max-md:mt-20" />
-    </div>
+    <CodeHighlighterProvider>
+      <div className="flex min-h-screen flex-col">
+        <Header />
+        <main className="flex-1">
+          <div className="text-foreground/90 container">{children}</div>
+        </main>
+        <Footer className="mt-32 max-md:mt-20" />
+      </div>
+    </CodeHighlighterProvider>
   )
 }

packages/jsrepl/src/app/dashboard/recently-viewed.tsx

@@ -1,12 +1,11 @@
 'use client'
 
-import { useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { LucideTelescope } from 'lucide-react'
 import ErrorComponent from '@/components/error'
+import { RelativeTime } from '@/components/relative-time'
 import { useSupabaseClient } from '@/hooks/useSupabaseClient'
 import { useUser } from '@/hooks/useUser'
-import { formatRelativeTime } from '@/lib/datetime'
 import { loadRecentlyViewedRepls } from '@/lib/repl-stored-state/adapter-supabase'
 import { ReplStoredState } from '@/types'
 import ReplCard from './repl-card'
@@ -49,14 +48,12 @@ export function RecentlyViewed() {
 }
 
 function RecentlyViewedTimestamp({ repl }: { repl: ReplStoredState & { viewed_at: string } }) {
-  const viewedAtRelativeTime = useMemo(() => {
-    return repl.viewed_at ? formatRelativeTime(new Date(repl.viewed_at)) : null
-  }, [repl.viewed_at])
-
   return (
     <>
-      {viewedAtRelativeTime && (
-        <span className="text-muted-foreground text-nowrap text-xs">{viewedAtRelativeTime}</span>
+      {repl.viewed_at && (
+        <span className="text-muted-foreground text-nowrap text-xs">
+          <RelativeTime date={new Date(repl.viewed_at)} />
+        </span>
       )}
     </>
   )

packages/jsrepl/src/app/dashboard/repl-card.tsx

@@ -1,11 +1,11 @@
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
-import { useTheme } from 'next-themes'
+import { Dispatch, SetStateAction, useMemo, useState } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { useQueryClient } from '@tanstack/react-query'
 import { LucideGitFork, LucideLoader2, LucideTrash2 } from 'lucide-react'
-import { BundledLanguage, BundledTheme, codeToHtml } from 'shiki'
+import { BundledLanguage } from 'shiki'
 import { toast } from 'sonner'
+import { RelativeTime } from '@/components/relative-time'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -19,9 +19,9 @@ import {
 } from '@/components/ui/alert-dialog'
 import { Button, buttonVariants } from '@/components/ui/button'
 import { UserAvatar } from '@/components/user-avatar'
+import { useCodeHighlighter } from '@/hooks/useCodeHighlighter'
 import { useSupabaseClient } from '@/hooks/useSupabaseClient'
 import { useUser } from '@/hooks/useUser'
-import { formatRelativeTime } from '@/lib/datetime'
 import * as ReplFS from '@/lib/repl-fs'
 import { fork, getPageUrl, remove } from '@/lib/repl-stored-state/adapter-supabase'
 import { ReplStoredState } from '@/types'
@@ -36,8 +36,8 @@ export default function ReplCard({
   const user = useUser()
   const supabase = useSupabaseClient()
   const queryClient = useQueryClient()
-  const { resolvedTheme: themeId } = useTheme()
   const router = useRouter()
+  const { highlightCode } = useCodeHighlighter()
 
   const [isForking, setIsForking] = useState(false)
   const [isRemoving, setIsRemoving] = useState(false)
@@ -84,28 +84,9 @@ export default function ReplCard({
     }
   }, [filePath])
 
-  const [highlightedCode, setHighlightedCode] = useState<string>(escapeHtml(code))
-
-  useEffect(() => {
-    if (!shikiLang) {
-      return
-    }
-
-    let disposed = false
-
-    codeToHtml(code, {
-      lang: shikiLang,
-      theme: themeId as BundledTheme,
-    }).then((html) => {
-      if (!disposed) {
-        setHighlightedCode(html)
-      }
-    })
-
-    return () => {
-      disposed = true
-    }
-  }, [code, shikiLang, themeId])
+  const highlightedCode = useMemo<string>(() => {
+    return highlightCode(code, shikiLang)
+  }, [code, shikiLang, highlightCode])
 
   async function onForkClick() {
     try {
@@ -186,14 +167,12 @@ export default function ReplCard({
 }
 
 function Timestamp({ repl }: { repl: ReplStoredState }) {
-  const updatedAtRelativeTime = useMemo(() => {
-    return repl.updated_at ? formatRelativeTime(new Date(repl.updated_at)) : null
-  }, [repl.updated_at])
-
   return (
     <>
-      {updatedAtRelativeTime && (
-        <span className="text-muted-foreground text-nowrap text-xs">{updatedAtRelativeTime}</span>
+      {repl.updated_at && (
+        <span className="text-muted-foreground text-nowrap text-xs">
+          <RelativeTime date={new Date(repl.updated_at)} />
+        </span>
       )}
     </>
   )
@@ -286,13 +265,3 @@ function RemoveButton({
     </AlertDialog>
   )
 }
-
-function escapeHtml(str: string) {
-  const escapeMap: { [key: string]: string } = {
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-  }
-
-  return str.replace(/[&<>]/g, (match) => escapeMap[match]!)
-}

packages/jsrepl/src/app/repl/[[...slug]]/components/code-editor.tsx

@@ -1,16 +1,17 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import { useTheme } from 'next-themes'
+import { shikiToMonaco } from '@shikijs/monaco'
 import * as monaco from 'monaco-editor'
 import styles from '@/components/code-editor.module.css'
 import useCodeEditorDTS from '@/hooks/useCodeEditorDTS'
 import useCodeEditorRepl from '@/hooks/useCodeEditorRepl'
+import { useCodeHighlighter } from '@/hooks/useCodeHighlighter'
 import { useMonacoEditor } from '@/hooks/useMonacoEditor'
 import useMonacopilot from '@/hooks/useMonacopilot'
 import { useReplModels } from '@/hooks/useReplModels'
 import { useReplStoredState } from '@/hooks/useReplStoredState'
 import { useUserStoredState } from '@/hooks/useUserStoredState'
 import { PrettierFormattingProvider } from '@/lib/monaco-prettier-formatting-provider'
-import { loadMonacoTheme } from '@/lib/monaco-themes'
 import { Themes } from '@/lib/themes'
 import { cn } from '@/lib/utils'
 
@@ -20,17 +21,18 @@ if (process.env.NEXT_PUBLIC_NODE_ENV === 'test' && typeof window !== 'undefined'
 }
 
 setupMonaco()
+setupInitialMonacoThemes()
 setupTailwindCSS()
 
 export default function CodeEditor() {
   const [replState] = useReplStoredState()
   const [userState] = useUserStoredState()
   const [editorRef, setEditor] = useMonacoEditor()
   const { models, readOnlyModels } = useReplModels()
+  const { highlighter, loadedHighlightTheme } = useCodeHighlighter()
 
   const containerRef = useRef<HTMLDivElement>(null)
 
-  const [isThemeLoaded, setIsThemeLoaded] = useState(false)
   const { resolvedTheme: themeId } = useTheme()
   const theme = useMemo(() => Themes.find((theme) => theme.id === themeId) ?? Themes[0]!, [themeId])
 
@@ -53,7 +55,7 @@ export default function CodeEditor() {
     fontSize: userState.editor.fontSize,
     minimap: { enabled: false },
     readOnly: isReadOnly,
-    theme: theme.id,
+    theme: loadedHighlightTheme ?? (theme.isDark ? 'initial-dark' : 'initial-light'),
     quickSuggestions: {
       other: true,
       comments: true,
@@ -100,12 +102,13 @@ export default function CodeEditor() {
   }, [userState.editor.lineNumbers, editorRef])
 
   useEffect(() => {
-    editorInitialOptions.current.theme = theme.id
-    loadMonacoTheme(theme).then(() => {
-      monaco.editor.setTheme(theme.id)
-      setIsThemeLoaded(true)
-    })
-  }, [theme])
+    if (highlighter && loadedHighlightTheme) {
+      editorInitialOptions.current.theme = loadedHighlightTheme
+
+      shikiToMonaco(highlighter, monaco)
+      monaco.editor.setTheme(loadedHighlightTheme)
+    }
+  }, [highlighter, loadedHighlightTheme])
 
   useEffect(() => {
     const editor = monaco.editor.create(containerRef.current!, editorInitialOptions.current)
@@ -125,7 +128,7 @@ export default function CodeEditor() {
   return (
     <div
       ref={containerRef}
-      className={cn('min-h-0 flex-1', styles.codeEditor, { 'opacity-0': !isThemeLoaded })}
+      className={cn('bg-editor-background min-h-0 flex-1', styles.codeEditor)}
     />
   )
 }
@@ -193,3 +196,27 @@ async function setupTailwindCSS() {
     },
   })
 }
+
+function setupInitialMonacoThemes() {
+  monaco.editor.defineTheme('initial-dark', {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editor.background': '#00000000',
+      'editor.lineHighlightBackground': '#FFFFFF0F',
+      focusBorder: '#00000000',
+    },
+  })
+
+  monaco.editor.defineTheme('initial-light', {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editor.background': '#00000000',
+      'editor.lineHighlightBackground': '#EEEEEE1F',
+      focusBorder: '#00000000',
+    },
+  })
+}

packages/jsrepl/src/app/repl/[[...slug]]/components/info-panel-section.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 import { LucidePencil } from 'lucide-react'
 import EditReplInfoDialog from '@/components/edit-repl-info-dialog'
 import {
@@ -9,11 +9,11 @@ import {
   PanelSectionHeaderActions,
   PanelSectionTrigger,
 } from '@/components/panel-section'
+import { RelativeTime } from '@/components/relative-time'
 import { UserAvatar } from '@/components/user-avatar'
 import { useReplRewindMode } from '@/hooks/useReplRewindMode'
 import { useReplStoredState } from '@/hooks/useReplStoredState'
 import { useUser } from '@/hooks/useUser'
-import { formatRelativeTime } from '@/lib/datetime'
 
 export function InfoPanelSection({ id: sectionId }: { id: string }) {
   const [replState] = useReplStoredState()
@@ -25,14 +25,6 @@ export function InfoPanelSection({ id: sectionId }: { id: string }) {
   const isNew = !replState.id
   const showEditButton = isNew || (user && user.id === replState.user_id)
 
-  const updatedAtRelativeTime = useMemo(() => {
-    return replState.updated_at ? formatRelativeTime(new Date(replState.updated_at)) : null
-  }, [replState.updated_at])
-
-  const createdAtRelativeTime = useMemo(() => {
-    return replState.created_at ? formatRelativeTime(new Date(replState.created_at)) : null
-  }, [replState.created_at])
-
   return (
     <PanelSection value={sectionId}>
       <PanelSectionHeader>
@@ -67,14 +59,14 @@ export function InfoPanelSection({ id: sectionId }: { id: string }) {
           </div>
         )}
         <div className="mt-3 space-y-1 empty:hidden">
-          {updatedAtRelativeTime && (
+          {replState.updated_at && (
             <div title={'Updated at ' + new Date(replState.updated_at).toLocaleString()}>
-              Updated {updatedAtRelativeTime}
+              Updated <RelativeTime date={new Date(replState.updated_at)} />
             </div>
           )}
-          {createdAtRelativeTime && (
+          {replState.created_at && (
             <div title={'Created at ' + new Date(replState.created_at).toLocaleString()}>
-              Created {createdAtRelativeTime}
+              Created <RelativeTime date={new Date(replState.created_at)} />
             </div>
           )}
         </div>

packages/jsrepl/src/components/providers/code-highlighter-provider.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { createContext, useCallback, useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+import { BundledLanguage, BundledTheme } from 'shiki'
+import { ShikiHighlighter, createShikiHighlighter } from '@/lib/shiki'
+
+type ContextWithNotLoadedHighlighter = {
+  highlighter: null
+  loadedHighlightTheme: null
+}
+
+type ContextWithLoadedHighlighter = {
+  highlighter: ShikiHighlighter
+  loadedHighlightTheme: BundledTheme
+}
+
+export type CodeHighlighterContextType = {
+  highlightCode: (code: string, lang: BundledLanguage | null) => string
+} & (ContextWithNotLoadedHighlighter | ContextWithLoadedHighlighter)
+
+export const CodeHighlighterContext = createContext<CodeHighlighterContextType | null>(null)
+
+export function CodeHighlighterProvider({ children }: { children: React.ReactNode }) {
+  const { resolvedTheme: themeId } = useTheme()
+
+  const [highlighterAndTheme, setHighlighterAndTheme] = useState<
+    ContextWithNotLoadedHighlighter | ContextWithLoadedHighlighter
+  >({
+    highlighter: null,
+    loadedHighlightTheme: null,
+  })
+
+  useEffect(() => {
+    const theme = themeId as BundledTheme | undefined
+    if (!theme) {
+      return
+    }
+
+    createShikiHighlighter(theme).then((highlighter) => {
+      setHighlighterAndTheme({
+        highlighter,
+        loadedHighlightTheme: theme,
+      })
+    })
+  }, [themeId])
+
+  const highlightCode = useCallback(
+    (code: string, lang: BundledLanguage | null) => {
+      const { highlighter, loadedHighlightTheme } = highlighterAndTheme
+      if (!highlighter || !loadedHighlightTheme || !lang) {
+        return escapeHtml(code)
+      }
+
+      return highlighter.codeToHtml(code, { lang, theme: loadedHighlightTheme })
+    },
+    [highlighterAndTheme]
+  )
+
+  const value = {
+    ...highlighterAndTheme,
+    highlightCode,
+  }
+
+  return <CodeHighlighterContext.Provider value={value}>{children}</CodeHighlighterContext.Provider>
+}
+
+function escapeHtml(str: string) {
+  const escapeMap: { [key: string]: string } = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+  }
+
+  return str.replace(/[&<>]/g, (match) => escapeMap[match]!)
+}