Better typescript support

Author: pomber

.changeset/big-mangos-brush.md

@@ -0,0 +1,5 @@
+---
+"bright": minor
+---
+
+Better typescript support

lib/src/index.tsx

@@ -8,16 +8,18 @@ import {
   BrightComponents,
   BrightProps,
   Extension,
+  CodeText,
 } from "./types"
 import { linesToContent } from "./lines"
 import { tokensToContent, tokensToTokenList } from "./tokens"
-import React from "react"
+import React, { FunctionComponent } from "react"
 import "server-only"
 
 type CodeComponent = ((props: InputCodeProps) => Promise<JSX.Element>) &
-  Partial<InputCodeProps>
+  Partial<InputCodeProps> &
+  FunctionComponent<InputCodeProps> // this is a lie, until we have typescript 5.1
 
-const Code: CodeComponent = async (componentProps) => {
+const Code = (async (componentProps) => {
   // merge props and global props
   const { children, lang, ...rest } = {
     ...Code,
@@ -26,7 +28,7 @@ const Code: CodeComponent = async (componentProps) => {
   }
 
   // parse code, lang, subProps maybe from markdown
-  const propsFromChildren = parseChildren(children, lang, rest.code)
+  const propsFromChildren = parseChildren(children as CodeText, lang, rest.code)
 
   // split code and annotations
   let props = { ...rest, ...propsFromChildren }
@@ -62,7 +64,7 @@ const Code: CodeComponent = async (componentProps) => {
       />
     </>
   )
-}
+}) as CodeComponent
 
 async function AnnotatedCode(props: CodeProps) {
   let newProps = await extractAnnotationsFromCode(props)
@@ -176,8 +178,8 @@ function runExtensionsBeforeHighlight(props: CodeProps): CodeProps {
 }
 
 function parseChildren(
-  children: InputCodeProps["children"],
-  lang: LanguageAlias,
+  children: CodeText,
+  lang?: LanguageAlias,
   code?: string
 ): Partial<BrightProps> {
   if (typeof children === "object" && children?.type === "code") {

lib/src/types.ts

@@ -7,6 +7,7 @@ import {
   ThemeColors,
 } from "@code-hike/lighter"
 import brightComponents from "./components"
+import type { ReactNode } from "react"
 
 type Prettify<T> = {
   [K in keyof T]: T[K]
@@ -36,10 +37,13 @@ export type Extension = Prettify<
   {
     name: string
     beforeRoot?: (props: CodeProps, annotations: Annotation[]) => CodeProps
-    beforeHighlight?: (props: CodeProps, annotations: Annotation[]) => CodeProps
+    beforeHighlight?: (
+      props: CodeProps,
+      annotations: Annotation[]
+    ) => CodeProps | undefined
     InlineAnnotation?: InlineAnnotationComponent
     MultilineAnnotation?: MultilineAnnotationComponent
-  } & BrightComponents
+  } & Partial<BrightComponents>
 >
 
 export type Extensions = Extension[]
@@ -60,12 +64,12 @@ type MdMultiCodeText = {
     children: MdCodeText[]
   }
 }
-type CodeText = string | MdCodeText | MdMultiCodeText
+export type CodeText = string | MdCodeText | MdMultiCodeText
 
 export type InputCodeProps = Prettify<
-  Omit<CodeProps, "mode" | "code" | "theme"> & {
-    theme: Theme | DoubleTheme
-    children: CodeText
+  Omit<Partial<CodeProps>, "mode" | "code" | "theme"> & {
+    theme?: Theme | DoubleTheme
+    children?: ReactNode
     lang?: LanguageAlias
     code?: string
   }

web/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "../node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

web/app/test/page.js web/app/test/page.tsxweb/app/test/page.js renamed to web/app/test/page.tsx

@@ -1,3 +1,4 @@
+import React from "react"
 import { Code } from "bright"
 
 Code.theme = {
@@ -20,12 +21,15 @@ export default function Page() {
   return (
     <main>
       <div className="light">
+        {/* @ts-expect-error */}
         <Code lang="jsx">{code}</Code>
       </div>
       <div>
+        {/* @ts-expect-error */}
         <Code lang="jsx">{code}</Code>
       </div>
       <div data-theme="dark">
+        {/* @ts-expect-error */}
         <Code lang="jsx">{code}</Code>
       </div>
     </main>

web/mdx-components.js web/mdx-components.tsxweb/mdx-components.js renamed to web/mdx-components.tsx

@@ -1,5 +1,7 @@
 import { Code } from "bright"
 import { Fira_Code } from "@next/font/google"
+import type { MDXComponents } from "mdx/types"
+import React from "react"
 
 const font = Fira_Code({ subsets: ["latin"] })
 
@@ -41,6 +43,8 @@ Code.extensions = [
       let newRanges = [{ fromLineNumber: 1, toLineNumber: lineCount }]
 
       for (const range of ranges) {
+        if (!("fromLineNumber" in range)) continue
+
         const { fromLineNumber, toLineNumber } = range
         newRanges = newRanges.flatMap((r) => {
           if (
@@ -81,6 +85,7 @@ Code.extensions = [
                 toLineNumber: r.toLineNumber,
               },
             ]
+          return []
         })
       }
 
@@ -122,6 +127,6 @@ Code.extensions = [
   // },
 ]
 
-export function useMDXComponents(components) {
+export function useMDXComponents(components: MDXComponents): MDXComponents {
   return { ...components, pre: Code }
 }

web/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

web/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}