simplify theme propagation (#97)

packages/mdxts/src/components/CodeBlock.tsx

@@ -8,7 +8,7 @@ import { format, resolveConfig } from 'prettier'
 import { BUNDLED_LANGUAGES } from 'shiki'
 import 'server-only'
 
-import { getTheme } from '../index'
+import { getTheme } from '../utils/get-theme'
 import { getContext } from '../utils/context'
 import { getSourcePath } from '../utils/get-source-path'
 import { isJsxOnly } from '../utils/is-jsx-only'
@@ -41,9 +41,6 @@ export type BaseCodeBlockProps = {
   /** Lines to highlight. */
   highlight?: string
 
-  /** VS Code-based theme for highlighting. */
-  theme?: Theme
-
   /** Show or hide the copy button. */
   allowCopy?: boolean
 
@@ -107,7 +104,6 @@ export async function CodeBlock({
   language,
   lineNumbers,
   highlight,
-  theme: themeProp,
   className,
   showErrors,
   allowErrors,
@@ -124,14 +120,7 @@ export async function CodeBlock({
   const contextValue = getContext(Context)
   const { isNestedInEditor, sourcePath, sourcePathLine, sourcePathColumn } =
     props as PrivateCodeBlockProps
-  const theme = themeProp ?? contextValue.theme ?? getTheme()
-
-  if (!theme) {
-    throw new Error(
-      'The [theme] prop was not provided to the [CodeBlock] component. Pass an explicit theme or make sure the mdxts/loader package is configured correctly.'
-    )
-  }
-
+  const theme = getTheme()
   let id = 'source' in props ? props.source : filenameProp
 
   if ('value' in props && id === undefined) {
@@ -254,7 +243,6 @@ export async function CodeBlock({
     padding,
     paddingHorizontal,
     paddingVertical,
-    theme,
     isNestedInEditor,
     showErrors,
     allowErrors,

packages/mdxts/src/components/CodeInline.tsx

@@ -2,10 +2,8 @@ import React, { Fragment } from 'react'
 import { BUNDLED_LANGUAGES } from 'shiki'
 import 'server-only'
 
-import { getTheme } from '../index'
-import { getContext } from '../utils/context'
-import { Context } from './Context'
-import { getHighlighter, type Theme } from './highlighter'
+import { getTheme } from '../utils/get-theme'
+import { getHighlighter } from './highlighter'
 
 const languageMap: Record<string, any> = {
   mjs: 'javascript',
@@ -19,9 +17,6 @@ export type CodeInlineProps = {
   /** Language of the code snippet. */
   language?: (typeof BUNDLED_LANGUAGES)[number] | (typeof languageKeys)[number]
 
-  /** VS Code-based theme for highlighting. */
-  theme?: Theme
-
   /** Padding to apply to the wrapping element. */
   padding?: string
 
@@ -41,22 +36,14 @@ export type CodeInlineProps = {
 /** Renders a `code` element with syntax highlighting. */
 export async function CodeInline({
   language,
-  theme: themeProp,
   className,
   padding = '0.25rem',
   paddingHorizontal = padding,
   paddingVertical = padding,
   style,
   ...props
 }: CodeInlineProps) {
-  const contextValue = getContext(Context)
-  const theme = themeProp ?? contextValue.theme ?? getTheme()
-
-  if (!theme) {
-    throw new Error(
-      'The [theme] prop was not provided to the [CodeInline] component. Pass an explicit theme or make sure the mdxts/loader package is configured correctly.'
-    )
-  }
+  const theme = getTheme()
 
   let finalValue: string = props.value
     // Trim extra whitespace from inline code blocks since it's difficult to read.

packages/mdxts/src/components/CodeToolbar.tsx

@@ -1,7 +1,6 @@
-'use client'
 import React from 'react'
+import { getTheme } from '../utils/get-theme'
 import { CopyButton } from './CopyButton'
-import type { Theme } from './highlighter'
 
 type BaseCodeToolbarProps = {
   /** The value of the code block. */
@@ -10,9 +9,6 @@ type BaseCodeToolbarProps = {
   /** The path to the source file on disk in development and the git provider source in production. */
   sourcePath?: string
 
-  /** The theme to use for highlighting. */
-  theme: Theme
-
   /** Whether or not to allow copying the code block. */
   allowCopy?: boolean
 }
@@ -31,10 +27,10 @@ type CodeToolbarProps =
 export function CodeToolbar({
   value,
   sourcePath,
-  theme,
   allowCopy,
   ...props
 }: CodeToolbarProps) {
+  const theme = getTheme()
   return (
     <div
       style={{

packages/mdxts/src/components/CodeView.tsx

@@ -2,7 +2,8 @@ import React, { Fragment } from 'react'
 import type { SourceFile } from 'ts-morph'
 import { Node, SyntaxKind } from 'ts-morph'
 
-import type { Theme, getHighlighter } from './highlighter'
+import { getTheme } from '../utils/get-theme'
+import type { getHighlighter } from './highlighter'
 import { Symbol } from './Symbol'
 import { QuickInfo } from './QuickInfo'
 import { QuickInfoProvider } from './QuickInfoProvider'
@@ -25,9 +26,6 @@ export type CodeProps = {
   /** Lines to highlight. */
   highlight?: string
 
-  /** VS Code-based theme for highlighting. */
-  theme: Theme
-
   /** Show or hide the copy button. */
   allowCopy?: boolean
 
@@ -74,7 +72,6 @@ export function CodeView({
   highlight,
   highlighter,
   language,
-  theme,
   showErrors,
   className,
   isJsxOnly = false,
@@ -107,6 +104,7 @@ export function CodeView({
   baseDirectory?: string
   edit?: any
 }) {
+  const theme = getTheme()
   const shouldRenderToolbar = toolbar
     ? shouldRenderFilename || allowCopy
     : false
@@ -156,7 +154,6 @@ export function CodeView({
           filename={shouldRenderFilename ? filenameLabel : undefined}
           value={value}
           sourcePath={sourcePath}
-          theme={theme}
         />
       ) : null}
 
@@ -270,7 +267,6 @@ export function CodeView({
                             filename={filename}
                             highlighter={highlighter}
                             language={language}
-                            theme={theme}
                             diagnostics={tokenDiagnostics}
                             edit={edit}
                             rootDirectory={rootDirectory}

packages/mdxts/src/components/Context.tsx

@@ -1,9 +1,7 @@
 import { createContext } from '../utils/context'
 
 export const Context = createContext<{
-  theme?: any
   workingDirectory?: string
 }>({
-  theme: undefined,
   workingDirectory: undefined,
 })

packages/mdxts/src/components/ExportedTypes.tsx

@@ -287,24 +287,14 @@ export function ExportedTypes(props: ExportedTypesProps) {
 
   if (typeof props.children === 'function') {
     return (
-      <Context
-        value={{
-          theme: privateProps.theme,
-          workingDirectory: privateProps.workingDirectory,
-        }}
-      >
+      <Context value={{ workingDirectory: privateProps.workingDirectory }}>
         {props.children(exportedTypes)}
       </Context>
     )
   }
 
   return (
-    <Context
-      value={{
-        theme: privateProps.theme,
-        workingDirectory: privateProps.workingDirectory,
-      }}
-    >
+    <Context value={{ workingDirectory: privateProps.workingDirectory }}>
       {exportedTypes.map((declaration, index) => {
         return (
           <div

packages/mdxts/src/components/MDXContent.tsx

@@ -6,7 +6,6 @@ import type { PluggableList } from '@mdx-js/mdx/lib/core'
 import 'server-only'
 
 import type { MDXComponents } from './MDXComponents'
-import { Context } from './Context'
 
 /** Compiles and renders a string of MDX content. */
 export async function MDXContent({
@@ -35,7 +34,6 @@ export async function MDXContent({
   /** Base URL to resolve imports and named exports from (e.g. `import.meta.url`) */
   baseUrl?: string
 }) {
-  const { theme } = arguments[0] // Private props
   const code = await compile(value, {
     baseUrl,
     rehypePlugins,
@@ -48,13 +46,5 @@ export async function MDXContent({
     ...dependencies,
   })
 
-  if (theme) {
-    return (
-      <Context value={{ theme }}>
-        <Content components={components} />
-      </Context>
-    )
-  }
-
   return <Content components={components} />
 }

packages/mdxts/src/components/QuickInfo.tsx

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react'
 import { type ts, type Diagnostic } from 'ts-morph'
 import { getDiagnosticMessageText } from '@tsxmod/utils'
 
+import { getTheme } from '../utils/get-theme'
 import { type getHighlighter } from './highlighter'
 import { languageService } from './project'
 import { MDXContent } from './MDXContent'
@@ -12,7 +13,6 @@ export function QuickInfo({
   filename,
   highlighter,
   language,
-  theme,
   diagnostics,
   edit,
   isQuickInfoOpen,
@@ -23,13 +23,13 @@ export function QuickInfo({
   filename: string
   highlighter: Awaited<ReturnType<typeof getHighlighter>>
   language: string
-  theme: any
   diagnostics: Diagnostic[]
   edit: any
   isQuickInfoOpen?: boolean
   rootDirectory?: string
   baseDirectory?: string
 }) {
+  const theme = getTheme()
   const quickInfo = languageService.getQuickInfoAtPosition(filename, position)
 
   if (!quickInfo) {

packages/mdxts/src/components/highlighter.ts

@@ -3,8 +3,8 @@ import { getHighlighter as shikiGetHighlighter } from 'shiki'
 import type { SourceFile } from 'ts-morph'
 import { Node, SyntaxKind } from 'ts-morph'
 
+import { getTheme } from '../utils/get-theme'
 import { getContext } from '../utils/context'
-import { getTheme } from '../index'
 import { Context } from './Context'
 
 type Color = string
@@ -78,9 +78,7 @@ export const getHighlighter = cache(async function getHighlighter(
 ): Promise<Highlighter> {
   if (highlighter === null) {
     if (!options) {
-      const contextValue = getContext(Context)
-      const theme = contextValue.theme ?? getTheme()
-      options = { theme }
+      options = { theme: getTheme() }
     }
 
     highlighter = await shikiGetHighlighter(options)

packages/mdxts/src/index.ts

@@ -13,6 +13,8 @@ import type { Headings } from './mdx-plugins/remark/add-headings'
 import type { AllModules, ModuleData } from './utils/get-all-data'
 import { getAllData } from './utils/get-all-data'
 
+export { getTheme } from './utils/get-theme'
+
 type FeedOptions = Omit<
   ConstructorParameters<typeof Feed>[0],
   'generator' | 'link' | 'id'
@@ -613,21 +615,3 @@ function generateRssFeed<Type extends { frontMatter: Record<string, any> }>(
 
   return feed.rss2()
 }
-
-let theme: any = null
-
-/**
- * Sets the current theme.
- * @internal
- */
-export function setTheme(newTheme: any) {
-  theme = newTheme
-}
-
-/**
- * Returns the current theme.
- * @internal
- */
-export function getTheme() {
-  return theme
-}