[email protected]

Minor Changes

• e5b2b81: Renders CodeBlock and CodeInline tokens using CSS now through restyle.

Patch Changes

• a83ed0e: Normalizes createSource import paths to posix for Windows.
• ced3036: Fixes CodeInline overflow breaking from adding display flex.
• d8d5e6e: Adds export for Copyright component from top-level exports.

[email protected]

Minor Changes

• e38535a: Uses posix.sep and normalizes createSource glob patterns.
• 301629b: Fixes scrollbars for CodeInline components that overflow while also moving inline styles to use restyle.
• ac9118e: Adds allowCopy prop to CodeInline for rendering a persistent copy button.
• 3cc2642: Moves @types packages from dependencies to dev dependencies to reduce npm install size. These should be included in the project mdxts is used in now e.g. npm install @types/react.

Patch Changes

• 1ccb33c: Fixes detection of deeply nested package.json exports.
• 35c4b29: Allows setting the fill color for the MdxtsLogo and MdxtsMark components.
• 1ff3252: Fixes trimming CodeBlock source file comments.
• 770c7f5: Sets foreground color for Toolbar icons in CodeBlock.

[email protected]

Patch Changes

• b35373c: Fixes error when trying to find previous version cache that doesn't exist yet.

[email protected]

Major Changes

• 05d31e7: MDXTS v1 is released! 🎉 Check out the announcement post for more details.

Patch Changes

• 15ffbfb: Configure plain markdown files in addition to mdx files for loader.
• 76ede2b: Treat diff as plaintext when attempting to tokenize.
• dfc73a1: Removes code blocks before searching for headings when calculating the data item title to prevent bad heading parsing.

[email protected]

Minor Changes

• 00f6547: Uses a slightly smaller filename font size for the CodeBlock toolbar by default.

• 87ee6c4: Adds Copyright component to render copyright notices.

• 8558c3f: Adds GitProviderLink and GitProviderLogo components to render links and graphics for the configured git provider.

• 999446c: Adds MDXTS assets for linking back to the MDXTS site:

  import { BuiltWithMdxts } from "mdxts/assets";
  
  export function Footer() {
    return (
      <footer>
        <BuiltWithMdxts />
      </footer>
    );
  }

• b7c7f0d: Removes default vertical padding for CodeInline component.

• fcb0a03: Now infers gitSource and siteUrl in mdxts/next using Vercel environment variables if available.

Patch Changes

• 9a9d33a: Fixes using the initial value rather than the possibly transformed value in CodeBlock.
• de7bad8: Fixes line numbers highlight styles.
• 759bb79: Fixes interaction when copy button covers code block text by hiding the copy button on the first pointer down until entering the code block area again.
• 2e384bb: Closes symbol popover on pointer down to allow selecting code block text.
• ef4b03a: Fixes unnecessarily rendering token when it is whitespace.
• 308c709: Normalizes CopyButton sizes across code components.

[email protected]

Minor Changes

• b796c3f: Removes LineHighlights component in favor of simpler CSS approach for highlighting lines.

• cccf278: Renames CodeBlock lineHighlights prop to highlightedLines.

  Breaking Changes

  • CodeBlock lineHighlights prop has been renamed to highlightedLines.

• 044d1ca: Renames CodeBlock toolbar prop to showToolbar.

  Breaking Changes

  • CodeBlock toolbar prop has been renamed to showToolbar.

• dfa9384: Fixes CodeBlock accessibility and markup by swapping divs with spans and using a code element around tokens.

• 564806a: Renames CodeBlock lineNumbers prop to showLineNumbers.

  Breaking Changes

  • CodeBlock lineNumbers prop has been renamed to showLineNumbers.

• bd646c4: Adds focusedLines and unfocusedLinesOpacity props to the CodeBlock component to control focusing a set of lines and dimming the other lines. It uses an image mask to dim out the lines which can be controlled using unfocusedLinesOpacity:

  ```tsx focusedLines="3-4"
  const a = 1;
  const b = 2;
  const result = a + b;
  console.log(result); // 3
  ```

  <CodeBlock
    value={`const a = 1;\nconst b = 2;\n\nconst add = a + b\nconst subtract = a - b`}
    focusedLines="2, 4"
  />

Patch Changes

• a02b1d8: Fixes copy button overlapping CodeBlock content by only showing the button when hovering the code block. The button now also sticks to the top right of the code block when scrolling.

[email protected]

Minor Changes

• e493fbd: Refines paths returned from createSource and mergeSources. Based on the glob pattern provided, either a one-dimensional or two-dimensional array of paths will be returned:

  import { createSource, mergeSources } from "mdxts";
  
  const allPosts = createSource("posts/*.mdx").paths(); // string[]
  const allDocs = createSource("docs/**/*.mdx").paths(); // string[][]
  const allPaths = mergeSources(allDocs, allPosts).paths(); // string[] | string[][]

  Likewise the get method will be narrowed to only accept a single pathname or an array of pathname segments:

  allPosts.get("building-a-button-component-in-react");
  allDocs.get(["examples", "authoring"]);

  Breaking Changes

  • The paths method now returns a one-dimensional array of paths for a single glob pattern and a two-dimensional array of paths for multiple glob patterns.
  • The get method now only accepts a single pathname or an array of pathname segments.

  You may need to update your code to accommodate these changes:

  export function generateStaticParams() {
  --  return allPosts.paths().map((pathname) => ({ slug: pathname.at(-1) }))
  ++  return allPosts.paths().map((pathname) => ({ slug: pathname }))
  }

• 7444586: Now createSource.get attempts to prepend the incoming pathname with basePathname if defined and no data was found.

Patch Changes

• 6d338a6: Handles null values and throws an error for undefined values when formatting front matter for type checking.

[email protected]

Minor Changes

• 469b021: Enables type-checking for the CodeBlock component. To opt-out of type-checking, use the allowErrors prop on the code block:

  const a = 1;
  a + b;

  This will disable type-checking for the code block and prevent erroring. To show the errors, usually for educational purposes, use the showErrors prop:

  const a = 1;
  a + b;

  Breaking Changes

  CodeBlock now throws an error if the code block is not valid TypeScript. This is to ensure that all code blocks are type-checked and work as expected.

• bb372a8: Normalizes passing CodeBlock and CodeInline props to pre and code elements in the rehype plugin.

• 0f49ee9: Adds previous and next examples metadata to data source.

• f05b552: Normalizes the internal getEntrySourceFiles utility that is responsible for determining what TypeScript data sources are public based on package.json exports, index files, and top-level directories.

  To determine what source files should be considered public when dealing with package exports, createSource gets two new options used to remap package.json exports to their original source files:

  import { createSource } from "mdxts";
  
  const allPackages = createSource("../packages/mdxts/src/**/*.{ts,tsx}", {
    sourceDirectory: "src",
    outputDirectory: "dist",
  });

  Using a subset of the mdxts package.json exports as an example:

  "exports": {
    ".": {
      "types": "./dist/src/index.d.ts",
      "import": "./dist/src/index.js",
      "require": "./dist/cjs/index.js"
    },
    "./components": {
      "types": "./dist/src/components/index.d.ts",
      "import": "./dist/src/components/index.js",
      "require": "./dist/cjs/components/index.js"
    },
  },

  These would be remapped to their original source files, filtering out any paths gathered from the createSource pattern not explicitly exported:

  [
    "../packages/mdxts/src/index.ts",
    "../packages/mdxts/src/components/index.ts"
  ]

• 0a4bde2: Moves CodeBlock:sourcePath to a public prop and adds sourcePath to the code meta in the remark plugin.

• 9cf1577: Cleans up type errors to be more understandable and adds a configuration to highlight errors in the terminal:

  import { createMdxtsPlugin } from "mdxts";
  
  const withMdxtsPlugin = createMdxtsPlugin({ highlightErrors: true });
  
  export default withMdxtsPlugin();

• 2af35d0: Converts theme to object syntax and moves colors to top-level:

  theme.colors['panel.border'] -> theme.panel.border

• 7726268: Adds a new sort option to createSource:

  import { createSource } from "mdxts";
  
  const allPosts = createSource<{ frontMatter: { date: Date } }>("**/*.mdx", {
    sort: (a, b) => a.frontMatter.date - b.frontMatter.date,
  });

• c42eb88: Removes panel border modifications which decreased the alpha channel of the panel.border theme color. This should now be modified in a custom theme.

• 2af35d0: Rewrites the CodeBlock component to use the latest version of shiki as well as allows for better composition using newly exposed Tokens, Toolbar, LineNumbers, and LineHighlights components:

  import { getTheme } from "mdxts";
  import { CodeBlock, Toolbar, Tokens } from "mdxts/components";
  
  function CodeBlockWithToolbar() {
    const theme = getTheme();
  
    return (
      <CodeBlock source="./counter/Counter.tsx">
        <div
          style={{
            backgroundColor: theme.background,
            color: theme.foreground,
          }}
        >
          <Toolbar allowCopy style={{ padding: "0.5rem 1rem" }} />
          <pre
            style={{
              whiteSpace: "pre",
              wordWrap: "break-word",
              overflow: "auto",
            }}
          >
            <Tokens />
          </pre>
        </div>
      </CodeBlock>
    );
  }

  Individual CodeBlock elements can be styled now for simple overriding:

  <CodeBlock
    className={{
      container: GeistMono.className,
    }}
    style={{
      container: {
        fontSize: "var(--font-size-body-2)",
        lineHeight: "var(--line-height-body-2)",
        padding: "1rem",
      },
      toolbar: {
        padding: "0.5rem 1rem",
      },
    }}
    language="tsx"
    value="..."
  />

  Breaking Changes

  CodeBlock now uses a keyed className and style object to allow for more granular control over the styling of the CodeBlock components. To upgrade, move the className and style definitions to target the container:

  <CodeBlock
  --  className={GeistMono.className}
  ++  className={{ container: GeistMono.className }}
  style={{
  ++    container: {
             padding: '1rem'
  ++    },
    }}

• 0b80bf5: Adds a fixImports prop to CodeBlock to allow fixing imports when the source code references files outside the project and can't resolve correctly:

  import { CodeBlock } from "mdxts/components";
  
  const source = `
  import { Button } from './Button'
  
  export function BasicUsage() {
    return <Button>Click Me</Button>
  }
  `;
  
  export default function Page() {
    return <CodeBlock fixImports value={source} />;
  }

  An example of this is when rendering a source file that imports a module from a package that is not in the immediate project. The fixImports prop will attempt to fix these broken imports using installed packages if a match is found:

  --import { Button } from './Button'
  ++import { Button } from 'design-system'
  
  export function BasicUsage() {
    return <Button>Click Me</Button>
  }

• 2af35d0: Rewrites relative import specifiers pointing outside of the project to use the package name if possible:

  import { getTheme } from '../../mdxts/src/components' -> import { getTheme } from 'mdxts/components'

• 0e2cc45: Adds a renumberFilenames option to the next plugin for configuring whether or not to renumber filenames when adding/removing/modifying ordered content.

• ad8b17f: ### Breaking Changes

  The CodeBlock highlight prop has been renamed to lineHighlights to better match the LineHighlights component nomenclature.

• 7c5df2f: Fixes data source ordering to use strings instead of parseInt to ensure that the items are always ordered correctly.

  Breaking Changes

  The order property for a data source item is now a padded string instead of a number.

Patch Changes

• 8802a57: Fixes hardcoded CSS properties in Toolbar copy button by using em values and currentColor.
• 91e87c4: Renames getTheme utility to getThemeColors.
• 85722e3: Fixes MDX code block meta values with an equals sign from being parsed incorrectly.
• f21cf8d: Allows omitting CodeBlock filename extension and uses language if provided.
• 2af35d0: Fixes splitting tokens when multiple symbols exist in a single token.
• 58b9bd3: Fixes source links to direct line and column in GitHub.
• 885a6cc: Fixes polluting CodeBlock globals by always adding a export { } declaration to the AST and only removing it from the rendered tokens.
• c57b51f: Speeds up build by lazily executing dynamic imports.

[email protected]

Patch Changes

• 31c1dbc: Handle monorepos when checking if git repository in getGitMetadata.

[email protected]

Patch Changes

• d3520da: Prevent fatal git error in console by checking for .git directory in getGitMetadata.