Upgrade lighter for edge support

code-hike · Jul 17, 2023 · 4f7ce9f · 4f7ce9f
1 parent c8e1fce
commit 4f7ce9f
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 28 deletions.
diff --git a/.changeset/wet-singers-sneeze.md b/.changeset/wet-singers-sneeze.md
@@ -0,0 +1,5 @@
+---
+"bright": patch
+---
+
+Upgrade lighter for edge support
diff --git a/lib/package.json b/lib/package.json
@@ -16,7 +16,7 @@
     "watch": "tsup src/index.tsx --format esm,cjs --watch --dts"
   },
   "dependencies": {
-    "@code-hike/lighter": "0.6.6",
+    "@code-hike/lighter": "0.8.1",
     "server-only": "^0.0.1"
   },
   "devDependencies": {

diff --git a/lib/src/code.tsx b/lib/src/code.tsx
@@ -1,4 +1,8 @@
-import { Theme, annotatedHighlight } from "@code-hike/lighter"
+import {
+  Theme,
+  getThemeColorsSync,
+  highlight as light,
+} from "@code-hike/lighter"
 import { TitleBar } from "./title"
 import { LinesComponent } from "./lines"
 import { BrightProps, CodeProps } from "./types"
@@ -23,12 +27,9 @@ async function highlight(props: CodeProps): Promise<BrightProps> {
   }
 
   const { code, lang, theme, annotations } = props
-  const { lines, colors } = await annotatedHighlight(
-    code,
-    lang,
-    theme,
-    annotations
-  )
+
+  const { lines } = await light(code, lang, theme, { annotations })
+  const colors = getThemeColorsSync(theme)
 
   const brightProps: BrightProps = {
     ...props,
@@ -56,15 +57,16 @@ export function Root(props: BrightProps) {
         borderRadius: "4px",
         overflow: "hidden",
         margin: "1em 0",
-        ["--selection-background" as any]: colors.selectionBackground,
-        ["--line-number-color" as any]: colors.lineNumberForeground,
-        ["--tab-border" as any]: colors.tabBorder,
-        ["--tab-background" as any]: colors.activeTabBackground,
-        ["--tab-color" as any]: colors.activeTabForeground,
-        ["--inactive-tab-background" as any]: colors.inactiveTabBackground,
-        ["--inactive-tab-color" as any]: colors.inactiveTabForeground,
-        ["--tab-top-border" as any]: colors.activeTabTopBorder,
-        ["--tab-bottom-border" as any]: colors.activeTabBorder,
+        ["--selection-background" as any]: colors.editor.selectionBackground,
+        ["--line-number-color" as any]: colors.editorLineNumber.foreground,
+
+        ["--tab-border" as any]: colors.tab.border,
+        ["--tab-background" as any]: colors.tab.activeBackground,
+        ["--tab-color" as any]: colors.tab.activeForeground,
+        ["--inactive-tab-background" as any]: colors.tab.inactiveBackground,
+        ["--inactive-tab-color" as any]: colors.tab.inactiveForeground,
+        ["--tab-top-border" as any]: colors.tab.activeBorderTop,
+        ["--tab-bottom-border" as any]: colors.tab.activeBorder,
         colorScheme: colors.colorScheme,
         ...style,
       }}

diff --git a/lib/src/title.tsx b/lib/src/title.tsx
@@ -2,14 +2,13 @@ import React from "react"
 import { BrightProps } from "./types"
 
 export function TitleBar(props: BrightProps) {
-  const { activeTabForeground, editorGroupHeaderBackground, tabsBorder } =
-    props.colors
+  const colors = props.colors
   const { TitleBarContent } = props
   const elementProps = {
     className: props.titleClassName,
     style: {
-      background: editorGroupHeaderBackground,
-      color: activeTabForeground,
+      background: colors.editorGroupHeader.tabsBackground,
+      color: colors.tab.activeForeground,
       position: "relative" as const,
       display: "flex",
     },
@@ -24,7 +23,7 @@ export function TitleBar(props: BrightProps) {
           left: 0,
           width: "100%",
           pointerEvents: "none",
-          background: tabsBorder,
+          background: colors.tab.border,
           height: 1,
           zIndex: 9,
         }}

diff --git a/lib/src/types.ts b/lib/src/types.ts
@@ -4,7 +4,7 @@ import {
   Lines,
   Tokens,
   Annotation,
-  ThemeColors,
+  getThemeColorsSync,
 } from "@code-hike/lighter"
 import brightComponents from "./components"
 import type { ReactNode } from "react"
@@ -105,7 +105,7 @@ export type CodeProps = Prettify<
 // afterHighlight
 export type BrightProps = Prettify<
   Omit<CodeProps, "subProps"> & {
-    colors: Prettify<ThemeColors>
+    colors: Prettify<ReturnType<typeof getThemeColorsSync>>
     lines: Lines
     lineCount: number
 

diff --git a/web/app/test/page.tsx b/web/app/test/page.tsx
@@ -35,3 +35,5 @@ export default function Page() {
     </main>
   )
 }
+
+export const runtime = "edge"
diff --git a/yarn.lock b/yarn.lock
@@ -237,10 +237,10 @@
     human-id "^1.0.2"
     prettier "^2.7.1"
 
-"@code-hike/lighter@0.6.6":
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/@code-hike/lighter/-/lighter-0.6.6.tgz#72f1b93dceacc40022a0c2c0f154363e2595a4ba"
-  integrity sha512-dLkSpowP4NaWDUgay3Mebb8V+wYqVGRD+Tl8wSfWdtIH0z4OUU3UznSsmvvGpCgkdUIF5DhOPRGRowqkNWQsrg==
+"@code-hike/lighter@0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@code-hike/lighter/-/lighter-0.8.1.tgz#3bde8e1eea3900132359e37c05bae5ac96ddd53c"
+  integrity sha512-St4rPmB7C2EWmAK1sAbvD3lZeM7UDInVDMjQDzEDsu4Q3B3AqF25vXedQK51U0UO0MCOASgBBdTiNwvJAfIqMQ==
 
 "@esbuild/[email protected]":
   version "0.15.18"