opentui-markdown-render 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opentui-markdown-render",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "OpenTUI Markdown renderer with optional native LaTeX math",
   "type": "module",
   "license": "MIT",
@@ -56,12 +56,12 @@
     "string-width": "7.2.0"
   },
   "devDependencies": {
-    "@opentui/core": "0.5.12",
-    "@opentui/solid": "0.5.12",
+    "@opentui/core": "0.8.2",
+    "@opentui/solid": "0.8.2",
     "@tsconfig/bun": "1.0.9",
     "@types/bun": "1.4.0",
     "@typescript/native-preview": "7.0.0-dev.20251207.1",
-    "solid-js": "1.9.15"
+    "solid-js": "1.9.18"
   },
   "engines": {
     "bun": ">=1.4.0"

package/src/app.tsx

@@ -1,5 +1,5 @@
-import type { CliRenderer } from "@opentui/core"
-import { createMemo, createSignal } from "solid-js"
+import type { CliRenderer, SyntaxStyle } from "@opentui/core"
+import { createMemo, createSignal, onCleanup } from "solid-js"
 import { useCanvasGraphics } from "./graphics"
 import { resolveHeadingStyles } from "./headings"
 import { rgbaToHex } from "./math"
@@ -9,6 +9,7 @@ import { parseDocument, type Document, type FrameConfig, type TablesConfig } fro
 import { MarkdownFrame } from "./view/frame"
 import { DocumentView, type RenderUnit } from "./view/document"
 import type { Theme } from "./theme/types"
+import { generateSyntax } from "./theme/syntax"
 
 export type { ThemeModeSetting } from "./config"
 export { loadRendererConfig } from "./config"
@@ -154,6 +155,14 @@ export function MarkdownRenderer(props: MarkdownRendererProps) {
   // The look of the heading levels is a configuration of its own: the colours
   // come from the theme, the attributes and the spacing from the config file.
   const headings = createMemo(() => resolveHeadingStyles(config().headings))
+  let currentSyntax: SyntaxStyle | undefined
+  const syntaxStyle = createMemo(() => {
+    currentSyntax?.destroy()
+    const nativeScene = (renderer as CliRenderer & { readonly nativeScene?: object }).nativeScene
+    currentSyntax = generateSyntax(theme(), headings(), theme().markdown.codeBlock, nativeScene)
+    return currentSyntax
+  })
+  onCleanup(() => currentSyntax?.destroy())
   return (
         <box
           width="100%"
@@ -178,6 +187,7 @@ export function MarkdownRenderer(props: MarkdownRendererProps) {
               tableOptions={tableOptions()}
               mermaidOptions={config().mermaid}
               mathScale={mathScale()}
+              syntaxStyle={syntaxStyle()}
               onDiagnostic={props.onDiagnostic}
               renderUnit={props.renderUnit}
             />

package/src/index.ts

@@ -89,6 +89,7 @@ export {
   bundledThemeNames,
   themeFileNames,
   generateSyntax,
+  type SyntaxResourceOwner,
   resolveTheme,
   mergeTheme,
   deriveStatusLineTheme,

package/src/theme/index.ts

@@ -1,7 +1,7 @@
 export { defaultTheme } from "./defaults"
 export { loadTheme, bundledThemeNames, themeFileNames } from "./load"
 export type { ThemeEnvironment } from "./load"
-export { generateSyntax } from "./syntax"
+export { generateSyntax, type SyntaxResourceOwner } from "./syntax"
 export { resolveTheme, mergeTheme, deriveStatusLineTheme } from "./resolve"
 export { mixColors } from "./colors"
 export type { Theme, ThemeMode, ThemePreset, ThemeOverride, StatusLineTheme, StatusLineThemeOverride, FrameTheme, FrameThemeOverride, MarkdownThemeOverride, HeadingLevel } from "./types"

package/src/theme/syntax.ts

@@ -2,7 +2,14 @@ import { SyntaxStyle, type RGBA, type ThemeTokenStyle } from "@opentui/core"
 import { defaultHeadingStyles, headingColor, headingLevels, type HeadingStyles } from "../headings"
 import type { HeadingLevel, Theme } from "./types"
 
-export function generateSyntax(theme: Theme, headings: HeadingStyles = defaultHeadingStyles, defaultColor: RGBA = theme.text.base) {
+export type SyntaxResourceOwner = object
+
+export function generateSyntax(
+  theme: Theme,
+  headings: HeadingStyles = defaultHeadingStyles,
+  defaultColor: RGBA = theme.text.base,
+  owner?: SyntaxResourceOwner,
+) {
   const { markdown, syntax, text } = theme
   const feedback = text.feedback
 
@@ -22,7 +29,7 @@ export function generateSyntax(theme: Theme, headings: HeadingStyles = defaultHe
     rule([`markup.heading.${level}`], headingColor(theme, level), headingStyle(level)),
   )
 
-  return SyntaxStyle.fromTheme([
+  const rules = [
     rule(["default"], defaultColor),
     rule(["prompt"], theme.accent),
     rule(["comment", "comment.documentation"], syntax.comment, { italic: true }),
@@ -84,7 +91,11 @@ export function generateSyntax(theme: Theme, headings: HeadingStyles = defaultHe
     rule(["error"], feedback.error, { bold: true }),
     rule(["warning"], feedback.warning, { bold: true }),
     rule(["info"], feedback.info),
-  ])
+  ]
+  // OpenTUI 0.8 makes native resource ownership explicit. Passing the owner is
+  // harmless on older supported releases, whose factory ignores extra args.
+  const fromTheme = SyntaxStyle.fromTheme as (rules: ThemeTokenStyle[], owner?: SyntaxResourceOwner) => SyntaxStyle
+  return fromTheme(rules, owner)
 }
 
 function rule(

package/src/view/code.tsx

@@ -1,4 +1,6 @@
-import { infoStringToFiletype } from "@opentui/core"
+import { infoStringToFiletype, type SyntaxStyle } from "@opentui/core"
+import { useRenderer } from "@opentui/solid"
+import { onCleanup } from "solid-js"
 import { generateSyntax } from "../theme/syntax"
 import type { Theme } from "../theme/types"
 import type { HeadingStyles } from "../headings"
@@ -8,14 +10,19 @@ export type CodeBlockProps = {
   language: string | null
   theme: Theme
   headings: HeadingStyles
+  syntaxStyle?: SyntaxStyle
 }
 
 export function CodeBlock(props: CodeBlockProps) {
+  const renderer = useRenderer()
+  const nativeScene = (renderer as typeof renderer & { readonly nativeScene?: object }).nativeScene
+  const owned = props.syntaxStyle ? undefined : generateSyntax(props.theme, props.headings, props.theme.markdown.codeBlock, nativeScene)
+  onCleanup(() => owned?.destroy())
   return (
     <code
       content={props.content}
       filetype={infoStringToFiletype(props.language ?? "")}
-      syntaxStyle={generateSyntax(props.theme, props.headings, props.theme.markdown.codeBlock)}
+      syntaxStyle={props.syntaxStyle ?? owned!}
       fg={props.theme.markdown.codeBlock}
       bg={props.theme.background.base}
       conceal={false}

package/src/view/document.tsx

@@ -1,6 +1,6 @@
 import { createMemo, For, type Accessor, type JSX } from "solid-js"
 import stringWidth from "string-width"
-import { type TextChunk } from "@opentui/core"
+import { type SyntaxStyle, type TextChunk } from "@opentui/core"
 import { assertNever, type Block, type Document, type ListItem, type UnitInfo } from "../core/document"
 import type { ResolvedTableOptions } from "../core/tables"
 import type { ImagesConfig, MermaidConfig } from "../config/types"
@@ -31,6 +31,7 @@ export type DocumentViewProps = {
   tableOptions: ResolvedTableOptions
   mermaidOptions?: MermaidConfig
   mathScale?: number
+  syntaxStyle?: SyntaxStyle
   onDiagnostic?: (diagnostic: { level: "warning" | "error"; message: string }) => void
   renderUnit?: RenderUnit
 }
@@ -97,9 +98,11 @@ export function DocumentView(props: DocumentViewProps) {
             columns={columns > 2 ? columns - 2 : columns} quote />}</For>
         </box>
         case "list": return <ListBlockView block={() => block} columns={columns} quote={input.quote} wrapItems={false} />
-        case "code": return <CodeBlock content={block.content} language={block.language} theme={props.theme} headings={props.headings} />
+        case "code": return <CodeBlock content={block.content} language={block.language} theme={props.theme}
+          headings={props.headings} syntaxStyle={props.syntaxStyle} />
         case "mermaid": return <MermaidDiagramView source={block.content} theme={props.theme} columns={columns}
-          mermaidOptions={props.mermaidOptions} headings={props.headings} onDiagnostic={props.onDiagnostic} />
+          mermaidOptions={props.mermaidOptions} headings={props.headings} syntaxStyle={props.syntaxStyle}
+          onDiagnostic={props.onDiagnostic} />
         case "table": return <TableBlock block={block} options={props.tableOptions} theme={props.theme} headings={props.headings}
           hyperlinks={props.graphics.hyperlinks?.() ?? true} />
         case "literal": return <text fg={props.theme.markdown.text} wrapMode="word" content={block.text} />

package/src/view/mermaid.tsx

@@ -1,5 +1,5 @@
 import { createEffect, createMemo, Show, type Accessor } from "solid-js"
-import { type MouseEvent, type TextRenderable } from "@opentui/core"
+import { type MouseEvent, type SyntaxStyle, type TextRenderable } from "@opentui/core"
 import { measureMermaidDiagram, type PreparedDiagram } from "../merman/diagram"
 import { detectMermaidDiagram } from "../merman/detect"
 import { MermaidSyntaxError } from "../merman/diagnostics"
@@ -16,6 +16,7 @@ export type MermaidDiagramViewProps = {
   columns: number
   mermaidOptions?: MermaidConfig
   headings?: HeadingStyles
+  syntaxStyle?: SyntaxStyle
   onDiagnostic?: (diagnostic: { level: "error"; message: string }) => void
 }
 
@@ -121,7 +122,7 @@ export function MermaidDiagramView(props: MermaidDiagramViewProps) {
   })
   return <box width="100%" flexDirection="column" flexShrink={0}>
     <Show when={prepared()} fallback={<CodeBlock content={props.source} language="mermaid"
-      theme={props.theme} headings={props.headings ?? defaultHeadingStyles} />}>
+      theme={props.theme} headings={props.headings ?? defaultHeadingStyles} syntaxStyle={props.syntaxStyle} />}>
       {(value) => <DiagramText prepared={value} />}
     </Show>
   </box>