[email protected]

Patch Changes

• d964f0f: Fixes getRootDirectory not accounting for non-monorepos and returns the first directory where a package.json file was found.
• d50ff0d: Reverts fixMissingImports as it is causing incorrect imports to be added.

[email protected]

Major Changes

• eb8d77e: Renames the package from mdxts to omnidoc.

[email protected]

Patch Changes

• 39be366: Fixes MDXContent component causing _jsx is not a function during development.
• 5504a76: Replaces @manypkg/find-root with simplified utility for getting the root directory.
• b7b664c: Adds allowErrors prop to CodeInline.
• 31e00c5: Trims empty export from copy value.
• 08d47ec: Fix imports in CodeBlock to capture correct types.

[email protected]

Major Changes

• 98c68a3: Removes mdxts/next package export. This is an effort to simplify the core package and reduce the number of dependencies. This functionality will be available in a separate package in the future.

  Breaking Changes

  If using Next.js, this is a breaking change for users who are importing mdxts/next directly. The following configuration can be used to enable MDX support and silence warnings from the ts-morph dependency:

  import createMDXPlugin from '@next/mdx'
  import remarkFrontmatter from 'remark-frontmatter'
  import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
  import webpack from 'webpack'
  
  const withMDX = createMDXPlugin({
    extension: /\.mdx?$/,
    options: {
      remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
    },
  })
  
  export default withMDX({
    pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
    webpack(config) {
      config.plugins.push(
        new webpack.ContextReplacementPlugin(
          /\/(@ts-morph\/common)\//,
          (data) => {
            for (const dependency of data.dependencies) {
              delete dependency.critical
            }
            return data
          }
        )
      )
  
      return config
    },
  })

  Then add or update the mdx-components.tsx file in the root of the project to set up the code components:

  import { MDXComponents } from 'mdx/types'
  import { CodeBlock, CodeInline } from 'mdxts/components'
  
  export function useMDXComponents() {
    return {
      code: (props) => {
        return (
          <CodeInline value={props.children as string} language="typescript" />
        )
      },
      pre: (props) => {
        const { value, language } = CodeBlock.parsePreProps(props)
        return <CodeBlock allowErrors value={value} language={language} />
      },
    } satisfies MDXComponents
  }

• 98c68a3: Removes createSource in favor of using createCollection from mdxts/collections.

  Breaking Changes

  Use createCollection to generate sources:

  import { createCollection, type FileSystemSource } from 'mdxts/collections'
  
  type ComponentSchema = Record<string, React.ComponentType>
  
  export type ComponentSource = FileSystemSource<ComponentSchema>
  
  export const ComponentsCollection = createCollection<ComponentSchema>(
    'src/components/**/*.{ts,tsx}',
    {
      baseDirectory: 'components',
      basePath: 'components',
      tsConfigFilePath: '../../packages/mdxts/tsconfig.json',
    }
  )

• 98c68a3: Removes Navigation component in favor of using createCollection directly.

  Breaking Changes

  Use createCollection to generate navigations:

  List Navigation

  Use getSources to render a list of the immediate sources in the collection:

  export default async function Page() {
    return (
      <>
        <h1>All Posts</h1>
        <ul>
          {PostsCollection.getSources().map((source) => (
            <Post key={source.getPath()} source={source} />
          ))}
        </ul>
      </>
    )
  }

  Tree Navigation

  Similar to list navigation, we can use getSources recursively to render a tree of links:

  import { PostsCollection } from '@/collections'
  
  export default async function Layout() {
    return (
      <nav>
        <ul>
          <TreeNavigation Source={PostsCollection} />
        </ul>
      </nav>
    )
  }
  
  async function TreeNavigation({ source }: { source: PostSource }) {
    const sources = source.getSources({ depth: 1 })
    const path = source.getPath()
    const depth = source.getDepth()
    const frontmatter = await source.getNamedExport('frontmatter').getValue()
  
    if (sources.length === 0) {
      return (
        <li style={{ paddingLeft: `${depth}rem` }}>
          <Link href={path} style={{ color: 'white' }}>
            {frontmatter.title}
          </Link>
        </li>
      )
    }
  
    const childrenSources = sources.map((childSource) => (
      <TreeNavigation key={childSource.getPath()} source={childSource} />
    ))
  
    if (depth > 0) {
      return (
        <li style={{ paddingLeft: `${depth}rem` }}>
          <Link href={path} style={{ color: 'white' }}>
            {frontmatter.title}
          </Link>
          <ul>{childrenSources}</ul>
        </li>
      )
    }
  
    return <ul>{childrenSources}</ul>
  }

  Sibling Navigation

  Use getSiblings to get the previous and next sources in the collection:

  export default async function Page({ params }) {
    const postSource = Posts.getSource(params.slug)
  
    if (!postSource) notFound()
  
    const Post = await postSource.getDefaultExport().getValue()
    const frontmatter = await postSource
      .getNamedExport('frontmatter')
      .getValue()
    const [previous, next] = postSource.getSiblings()
  
    return (
      <>
        <h1>{frontmatter.title}</h1>
        <p>{frontmatter.description}</p>
        <Post />
        {previous ? <Sibling source={previous} direction="previous" /> : null}
        {next ? <Sibling source={next} direction="next" /> : null}
      </>
    )
  }
  
  function Sibling({
    source,
    direction,
  }: {
    source: ReturnType<typeof Posts.getSource>
    direction: 'previous' | 'next'
  }) {
    const frontmatter = await source.getNamedExport('frontmatter').getValue()
    return (
      <a href={source.getPath()}>
        <span>{direction === 'previous' ? 'Previous' : 'Next'}</span>
        {frontmatter.title}
      </a>
    )
  }

Minor Changes

• 98c68a3: Adds remaining configuration options from next/plugin to JSON config.

• 98c68a3: Adds getSiblings method to collection export source.

• 98c68a3: Adds getType method to collection export source for retrieving type metadata for an export.

• 98c68a3: Adds APIReference component. This replaces the previous ExportedTypes component and is used to document the API of module exports using collections:

  import { APIReference } from 'mdxts/components'
  import { createCollection } from 'mdxts/collections'
  
  const ComponentsCollection = createCollection('components/**/*.{ts,tsx}', {
    baseDirectory: 'components',
    basePath: 'components',
  })
  
  export default function Component({ params }) {
    return ComponentsCollection.getSource(params.slug)
      .getExports()
      .map((exportSource) => (
        <APIReference key={exportSource.name} source={exportSource} />
      ))
  }

• 98c68a3: CodeBlock now tries to parse workingDirectory as a URL and gets the pathname directory. This allows using import.meta.url directly in the workingDirectory prop:

  <CodeBlock
    source="./counter/useCounter.ts"
    workingDirectory={import.meta.url}
  />

• 98c68a3: Adds getMainExport for file system source and isMainExport for export source.

Patch Changes

• 98c68a3: Fixes collection file system source name parsing not accounting for filename segments.
• 98c68a3: Fixes missing bottom padding in CodeInline.
• 98c68a3: Fixes syncing project files during development.
• 98c68a3: Fixes import map generation race condition causing imports to not be found during production builds.
• 98c68a3: Fixes export source getPath to construct the url path from the file system.
• 98c68a3: Defaults collection getSource to return index source if it exists.
• 98c68a3: Fixes file patterns based on relative tsconfig directory.
• 98c68a3: Fixes duplicate sources returned from collection getSources and file system source getSiblings.

[email protected]

Minor Changes

• 3378b26: Adds support for defining schemas for collections:

  import { createCollection, type MDXContent } from 'mdxts/collections'
  import { z } from 'zod'
  
  const frontmatterSchema = z.object({
    title: z.string(),
    date: z.coerce.date(),
    summary: z.string().optional(),
    tags: z.array(z.string()).optional(),
  })
  
  export const PostsCollection = createCollection<{
    default: MDXContent
    frontmatter: z.infer<typeof frontmatterSchema>
  }>('posts/*.mdx', {
    baseDirectory: 'posts',
    schema: {
      frontmatter: frontmatterSchema.parse,
    },
  })

• 53bfeb8: Moves all CodeBlock components to use restyle and exposes a css prop for each component to allow overriding styles.

Patch Changes

• 361b420: Improves error messaging when working with collection utilities.
• 3207ce0: Adds export for frontmatter from MDX files when using mdx-plugins.
• 598bd9c: Fixes getEditPath for export source in local development.
• 38b7b4b: Fixes caching implementation for shiki highlighter.
• e401fe0: Updates collection import map during development when adding, removing, or editing collections.
• 400384a: Inherit background color in code element in CodeBlock to prevent global styles leaking in.

[email protected]

Patch Changes

• f7c488d: Fix fast refresh for all component exports.
• b7e68af: Fixes relative collection file patterns and ts config paths causing incorrect import map path generation.
• 0dad0d3: Fixes error when trying to refresh file that hasn't been loaded into the project yet.
• 4db37c9: Generates ts file instead of js file for aliased collection import map.

[email protected]

Minor Changes

• abe2d84: Add deprecated tag to createSource in favor of createCollection.
• 71384b3: Generates import map in .mdxts directory when initially running Next.js plugin.
• 9dca168: Remove CodeBlock syntax formatting until a better solution can be implemented that doesn't throw console warnings.

Patch Changes

• c545243: Updates shiki from deprecated getHighlighter to createHighlighter.
• b76908a: Fixes missing directory error when removing directory and regenerating the import map.
• 5628c89: Retry connecting to the WebSocket server from the client if it gets disconnected.
• ac4006a: Keeps project files for code blocks in sync with changes to the file system.
• d0a285f: Throw more helpful error if both the cli and Next.js plugin are being used together.

[email protected]

Patch Changes

• b350e9f: Remove unused dependencies and fix rehype types.
• d0ab9a3: Update dependencies.

[email protected]

Patch Changes

• 732799f: Upgrade restyle to 2.0.2.
• 4ecd7b5: Adds getDescription method to export source.
• e5fc9bf: Adds isFile and isDirectory helper methods to collection source.
• 7e461f0: Removes getPathSegments from collection in favor of using source getPathSegments.

[email protected]

Patch Changes

• d0ab9a3: Update dependencies.