opencode-ide-plugin/packages/web/src/components/CodeBlock.tsx

import { type JSX, splitProps, createResource } from "solid-js"
import { codeToHtml } from "shiki"
import styles from "./codeblock.module.css"
import { transformerNotationDiff } from "@shikijs/transformers"

interface CodeBlockProps extends JSX.HTMLAttributes<HTMLDivElement> {
  code: string
  lang?: string
}
function CodeBlock(props: CodeBlockProps) {
  const [local, rest] = splitProps(props, ["code", "lang"])

  const [html] = createResource(
    () => [local.code, local.lang],
    async ([code, lang]) => {
      // TODO: For testing delays
      // await new Promise((resolve) => setTimeout(resolve, 3000))
      return (await codeToHtml(code || "", {
        lang: lang || "text",
        themes: {
          light: "github-light",
          dark: "github-dark",
        },
        transformers: [transformerNotationDiff()],
      })) as string
    },
  )

  return <div innerHTML={html()} class={styles.codeblock} {...rest}></div>
}

export default CodeBlock