Skip to content

Latest commit

 

History

History
1172 lines (687 loc) · 80.1 KB

CHANGELOG.md

File metadata and controls

1172 lines (687 loc) · 80.1 KB
Raw

@astrojs/mdx

3.0.0

Major Changes

  • #10935 ddd8e49 Thanks @bluwy! - Refactors the MDX transformation to rely only on the unified pipeline. Babel and esbuild transformations are removed, which should result in faster build times. The refactor requires using Astro v4.8.0 but no other changes are necessary.

  • #10935 ddd8e49 Thanks @bluwy! - Allows integrations after the MDX integration to update markdown.remarkPlugins and markdown.rehypePlugins, and have the plugins work in MDX too.

    If your integration relies on Astro's previous behavior that prevents integrations from adding remark/rehype plugins for MDX, you will now need to configure @astrojs/mdx with extendMarkdownConfig: false and explicitly specify any remarkPlugins and rehypePlugins options instead.

  • #10935 ddd8e49 Thanks @bluwy! - Renames the optimize.customComponentNames option to optimize.ignoreElementNames to better reflect its usecase. Its behaviour is not changed and should continue to work as before.

  • #10935 ddd8e49 Thanks @bluwy! - Replaces the internal remark-images-to-component plugin with rehype-images-to-component to let users use additional rehype plugins for images

Patch Changes

  • #10935 ddd8e49 Thanks @bluwy! - Simplifies plain MDX components as hast element nodes to further improve HTML string inlining for the optimize option

  • #10935 ddd8e49 Thanks @bluwy! - Allows Vite plugins to transform .mdx files before the MDX plugin transforms it

  • #10935 ddd8e49 Thanks @bluwy! - Updates the optimize option to group static sibling nodes as a <Fragment />. This reduces the number of AST nodes and simplifies runtime rendering of MDX pages.

  • #10935 ddd8e49 Thanks @bluwy! - Tags the MDX component export for quicker component checks while rendering

  • #10935 ddd8e49 Thanks @bluwy! - Fixes export const components keys detection for the optimize option

  • #10935 ddd8e49 Thanks @bluwy! - Improves optimize handling for MDX components with attributes and inline MDX components

2.3.1

Patch Changes

  • #10754 3e7a12c8532411e580fcfdb8445cad8fc8499291 Thanks @rishi-raj-jain! - Fixes an issue where images in MDX required a relative specifier (e.g. ./)

    Now, you can use the standard ![](img.png) syntax in MDX files for images colocated in the same folder: no relative specifier required!

    There is no need to update your project; your existing images will still continue to work. However, you may wish to remove any relative specifiers from these MDX images as they are no longer necessary:

    - ![A cute dog](./dog.jpg)
+ ![A cute dog](dog.jpg)
<!-- This dog lives in the same folder as my article! -->

  • #10770 88ee63a3ba4488c60348cb821034e6d4a057efd0 Thanks @bluwy! - Removes internal MDX processor on buildEnd to free up memory

2.3.0

Minor Changes

Patch Changes

2.2.4

Patch Changes

2.2.3

Patch Changes

2.2.2

Patch Changes

2.2.1

Patch Changes

2.2.0

Minor Changes

  • #10104 a31bbd7ff8f3ec62ee507f72d1d25140b82ffc18 Thanks @remcohaszing! - Changes Astro's internal syntax highlighting to use rehype plugins instead of remark plugins. This provides better interoperability with other rehype plugins that deal with code blocks, in particular with third party syntax highlighting plugins and rehype-mermaid.

    This may be a breaking change if you are currently using:

    • a remark plugin that relies on nodes of type html
    • a rehype plugin that depends on nodes of type raw.

    Please review your rendered code samples carefully, and if necessary, consider using a rehype plugin that deals with the generated element nodes instead. You can transform the AST of raw HTML strings, or alternatively use hast-util-to-html to get a string from a raw node.

Patch Changes

2.1.1

Patch Changes

2.1.0

Minor Changes

2.0.6

Patch Changes

2.0.5

Patch Changes

2.0.4

Patch Changes

2.0.3

Patch Changes

2.0.2

Patch Changes

2.0.1

Patch Changes

2.0.0

Major Changes

  • #9138 abf601233 Thanks @bluwy! - Updates the unified, remark, and rehype dependencies to latest. Make sure to update your custom remark and rehype plugins as well to be compatible with the latest versions.

    Potentially breaking change: The default value of markdown.remarkRehype.footnoteBackLabel is changed from "Back to content" to "Back to reference 1". See the mdast-util-to-hast commit for more information.

Patch Changes

2.0.0-beta.0

Major Changes

  • #9138 abf601233 Thanks @bluwy! - Updates the unified, remark, and rehype dependencies to latest. Make sure to update your custom remark and rehype plugins as well to be compatible with the latest versions.

    Potentially breaking change: The default value of markdown.remarkRehype.footnoteBackLabel is changed from "Back to content" to "Back to reference 1". See the mdast-util-to-hast commit for more information.

Patch Changes

1.1.5

Patch Changes

1.1.4

Patch Changes

1.1.3

Patch Changes

1.1.2

Patch Changes

1.1.1

Patch Changes

1.1.0

Minor Changes

  • #8468 a8d72ceae Thanks @bholmesdev! - Support the img component export for optimized images. This allows you to customize how optimized images are styled and rendered.

    When rendering an optimized image, Astro will pass the ImageMetadata object to your img component as the src prop. For unoptimized images (i.e. images using URLs or absolute paths), Astro will continue to pass the src as a string.

    This example handles both cases and applies custom styling:

    ---
// src/components/MyImage.astro
import type { ImageMetadata } from 'astro';
import { Image } from 'astro:assets';

type Props = {
  src: string | ImageMetadata;
  alt: string;
};

const { src, alt } = Astro.props;
---

{
  typeof src === 'string' ? (
    <img class="custom-styles" src={src} alt={alt} />
  ) : (
    <Image class="custom-styles" {src} {alt} />
  )
}

<style>
  .custom-styles {
    border: 1px solid red;
  }
</style>

    Now, this components can be applied to the img component props object or file export:

    import MyImage from '../../components/MyImage.astro';

export const components = { img: MyImage };

# My MDX article

Patch Changes

1.0.3

Patch Changes

1.0.2

Patch Changes

1.0.1

Patch Changes

1.0.0

Major Changes

Minor Changes

  • #8188 d0679a666 Thanks @ematipico! - Remove support for Node 16. The lowest supported version by Astro and all integrations is now v18.14.1. As a reminder, Node 16 will be deprecated on the 11th September 2023.

  • #8169 e79e3779d Thanks @bluwy! - Remove pre-shiki v0.14 theme names for compatibility. Please rename to the new theme names to migrate:

    • material-darker -> material-theme-darker
    • material-default -> material-theme
    • material-lighter -> material-theme-lighter
    • material-ocean -> material-theme-ocean
    • material-palenight -> material-theme-palenight

  • #8188 84af8ed9d Thanks @ematipico! - Add astro as peer dependency

Patch Changes

1.0.0-rc.2

Major Changes

Minor Changes

  • #8169 e79e3779d Thanks @bluwy! - Remove pre-shiki v0.14 theme names for compatibility. Please rename to the new theme names to migrate:

    • material-darker -> material-theme-darker
    • material-default -> material-theme
    • material-lighter -> material-theme-lighter
    • material-ocean -> material-theme-ocean
    • material-palenight -> material-theme-palenight

Patch Changes

1.0.0-beta.1

Major Changes

  • #8131 43140b87a Thanks @matthewp! - Support Astro 3 JSX format

    This upgrades the MDX plugin to correctly work with the new JSX render API in Astro 3.

Patch Changes

1.0.0-beta.0

Minor Changes

  • 1eae2e3f7 Thanks @Princesseuh! - Remove support for Node 16. The lowest supported version by Astro and all integrations is now v18.14.1. As a reminder, Node 16 will be deprecated on the 11th September 2023.

  • dfc2d93e3 Thanks @bluwy! - Add astro as peer dependency

Patch Changes

0.19.7

Patch Changes

0.19.6

Patch Changes

  • #7185 339529fc8 Thanks @bholmesdev! - Bring back improved style and script handling across content collection files. This addresses bugs found in a previous release to @astrojs/markdoc.

0.19.5

Patch Changes

0.19.4

Patch Changes

  • #7178 57e65d247 Thanks @bholmesdev! - Fix: revert Markdoc asset bleed changes. Production build issues were discovered that deserve a different fix.

0.19.3

Patch Changes

  • #6758 f558a9e20 Thanks @bholmesdev! - Improve style and script handling across content collection files. This addresses style bleed present in @astrojs/markdoc v0.1.0

0.19.2

Patch Changes

0.19.1

Patch Changes

  • #6932 49514e4ce Thanks @bluwy! - Upgrade shiki to v0.14.1. This updates the shiki theme colors and adds the theme name to the pre tag, e.g. <pre class="astro-code github-dark">.

  • Updated dependencies [49514e4ce]:

0.19.0

Minor Changes

  • #6824 2511d58d5 Thanks @Princesseuh! - Add support for using optimized and relative images in MDX files with experimental.assets

Patch Changes

0.18.4

Patch Changes

  • #6817 f882bc163 Thanks @bholmesdev! - Fix sourcemap warnings when using Content Collections and MDX with the vite.build.sourcemap option

0.18.3

Patch Changes

0.18.2

Patch Changes

0.18.1

Patch Changes

0.18.0

Minor Changes

  • #6344 694918a56 Thanks @Princesseuh! - Add a new experimental flag (experimental.assets) to enable our new core Assets story.

    This unlocks a few features:

    • A new built-in image component and JavaScript API to transform and optimize images.
    • Relative images with automatic optimization in Markdown.
    • Support for validating assets using content collections.
    • and more!

    See Assets (Experimental) on our docs site for more information on how to use this feature!

  • #6213 afbbc4d5b Thanks @Princesseuh! - Updated compilation settings to disable downlevelling for Node 14

Patch Changes

0.17.2

Patch Changes

0.17.1

0.17.0

Minor Changes

  • #6253 0049fda62 Thanks @bluwy! - Support rehype plugins that inject namespaced attributes. This introduces a breaking change if you use custom components for HTML elements, where the prop passed to the component will be normal HTML casing, e.g. class instead of className, and xlink:href instead of xlinkHref.

0.16.2

Patch Changes

0.16.1

Patch Changes

0.16.0

Minor Changes

  • #6050 2ab32b59e Thanks @bholmesdev! - Fix: load syntax highlighters after MDX remark plugins. This keeps MDX consistent with Astro's markdown behavior.

Patch Changes

0.15.2

Patch Changes

0.15.1

Patch Changes

0.15.0

Minor Changes

  • #5684 a9c292026 Thanks @bholmesdev! - Refine Markdown and MDX configuration options for ease-of-use. & #5769 93e633922 Thanks @bholmesdev! - Introduce a smartypants flag to opt-out of Astro's default SmartyPants plugin.

    • Markdown

      • Replace the extendDefaultPlugins option with a gfm boolean and a smartypants boolean. These are enabled by default, and can be disabled to remove GitHub-Flavored Markdown and SmartyPants.

      • Ensure GitHub-Flavored Markdown and SmartyPants are applied whether or not custom remarkPlugins or rehypePlugins are configured. If you want to apply custom plugins and remove Astro's default plugins, manually set gfm: false and smartypants: false in your config.

    • Migrate extendDefaultPlugins to gfm and smartypants

      You may have disabled Astro's built-in plugins (GitHub-Flavored Markdown and Smartypants) with the extendDefaultPlugins option. This has now been split into 2 flags to disable each plugin individually:

      • markdown.gfm to disable GitHub-Flavored Markdown
      • markdown.smartypants to disable SmartyPants
      // astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  markdown: {
-   extendDefaultPlugins: false,
+   smartypants: false,
+   gfm: false,
  }
});

      Additionally, applying remark and rehype plugins no longer disables gfm and smartypants. You will need to opt-out manually by setting gfm and smartypants to false.

    • MDX

      • Support all Markdown configuration options (except drafts) from your MDX integration config. This includes syntaxHighlighting and shikiConfig options to further customize the MDX renderer.

      • Simplify extendPlugins to an extendMarkdownConfig option. MDX options will default to their equivalent in your Markdown config. By setting extendMarkdownConfig to false, you can "eject" to set your own syntax highlighting, plugins, and more.

    • Migrate MDX's extendPlugins to extendMarkdownConfig

      You may have used the extendPlugins option to manage plugin defaults in MDX. This has been replaced by 3 flags:

      • extendMarkdownConfig (true by default) to toggle Markdown config inheritance. This replaces the extendPlugins: 'markdown' option.
      • gfm (true by default) and smartypants (true by default) to toggle GitHub-Flavored Markdown and SmartyPants in MDX. This replaces the extendPlugins: 'defaults' option.

  • #5687 e2019be6f Thanks @bholmesdev! - Give remark and rehype plugins access to user frontmatter via frontmatter injection. This means data.astro.frontmatter is now the complete Markdown or MDX document's frontmatter, rather than an empty object.

    This allows plugin authors to modify existing frontmatter, or compute new properties based on other properties. For example, say you want to compute a full image URL based on an imageSrc slug in your document frontmatter:

    export function remarkInjectSocialImagePlugin() {
  return function (tree, file) {
    const { frontmatter } = file.data.astro;
    frontmatter.socialImageSrc = new URL(frontmatter.imageSrc, 'https://my-blog.com/').pathname;
  };
}

    When using Content Collections, you can access this modified frontmatter using the remarkPluginFrontmatter property returned when rendering an entry.

    Migration instructions

    Plugin authors should now check for user frontmatter when applying defaults.

    For example, say a remark plugin wants to apply a default title if none is present. Add a conditional to check if the property is present, and update if none exists:

    export function remarkInjectTitlePlugin() {
  return function (tree, file) {
    const { frontmatter } = file.data.astro;
+    if (!frontmatter.title) {
      frontmatter.title = 'Default title';
+    }
  }
}

    This differs from previous behavior, where a Markdown file's frontmatter would always override frontmatter injected via remark or reype.

  • #5891 05caf445d Thanks @bholmesdev! - Remove deprecated Markdown APIs from Astro v0.X. This includes getHeaders(), the .astro property for layouts, and the rawContent() and compiledContent() error messages for MDX.

  • #5782 1f92d64ea Thanks @Princesseuh! - Remove support for Node 14. Minimum supported Node version is now >=16.12.0

  • #5825 52209ca2a Thanks @bholmesdev! - Baseline the experimental contentCollections flag. You're free to remove this from your astro config!

    import { defineConfig } from 'astro/config';

export default defineConfig({
- experimental: { contentCollections: true }
})

Patch Changes

1.0.0-beta.2

See changes in 1.0.0-beta.2

Major Changes

  • #5825 52209ca2a Thanks @bholmesdev! - Baseline the experimental contentCollections flag. You're free to remove this from your astro config!

    import { defineConfig } from 'astro/config';

export default defineConfig({
- experimental: { contentCollections: true }
})

Minor Changes

Patch Changes

0.15.0-beta.1

See changes in 0.15.0-beta.1

Minor Changes

  • #5769 93e633922 Thanks @bholmesdev! - Introduce a smartypants flag to opt-out of Astro's default SmartyPants plugin.

    {
  markdown: {
    smartypants: false,
  }
}

    Migration

    You may have disabled Astro's built-in plugins (GitHub-Flavored Markdown and Smartypants) with the extendDefaultPlugins option. This has now been split into 2 flags to disable each plugin individually:

    • markdown.gfm to disable GitHub-Flavored Markdown
    • markdown.smartypants to disable SmartyPants
    // astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  markdown: {
-   extendDefaultPlugins: false,
+   smartypants: false,
+   gfm: false,
  }
});

Patch Changes

0.15.0-beta.0

See changes in 0.15.0-beta.0

Minor Changes

  • #5687 e2019be6f Thanks @bholmesdev! - Give remark and rehype plugins access to user frontmatter via frontmatter injection. This means data.astro.frontmatter is now the complete Markdown or MDX document's frontmatter, rather than an empty object.

    This allows plugin authors to modify existing frontmatter, or compute new properties based on other properties. For example, say you want to compute a full image URL based on an imageSrc slug in your document frontmatter:

    export function remarkInjectSocialImagePlugin() {
  return function (tree, file) {
    const { frontmatter } = file.data.astro;
    frontmatter.socialImageSrc = new URL(frontmatter.imageSrc, 'https://my-blog.com/').pathname;
  };
}

    Content Collections - new remarkPluginFrontmatter property

    We have changed inject frontmatter to modify frontmatter in our docs to improve discoverability. This is based on support forum feedback, where "injection" is rarely the term used.

    To reflect this, the injectedFrontmatter property has been renamed to remarkPluginFrontmatter. This should clarify this plugin is still separate from the data export Content Collections expose today.

    Migration instructions

    Plugin authors should now check for user frontmatter when applying defaults.

    For example, say a remark plugin wants to apply a default title if none is present. Add a conditional to check if the property is present, and update if none exists:

    export function remarkInjectTitlePlugin() {
  return function (tree, file) {
    const { frontmatter } = file.data.astro;
+    if (!frontmatter.title) {
      frontmatter.title = 'Default title';
+    }
  }
}

    This differs from previous behavior, where a Markdown file's frontmatter would always override frontmatter injected via remark or reype.

  • #5684 a9c292026 Thanks @bholmesdev! - Refine Markdown and MDX configuration options for ease-of-use.

    Markdown

    • Remove remark-smartypants from Astro's default Markdown plugins.
    • Replace the extendDefaultPlugins option with a simplified gfm boolean. This is enabled by default, and can be disabled to remove GitHub-Flavored Markdown.
    • Ensure GitHub-Flavored Markdown is applied whether or not custom remarkPlugins or rehypePlugins are configured. If you want to apply custom plugins and remove GFM, manually set gfm: false in your config.

    MDX

    • Support all Markdown configuration options (except drafts) from your MDX integration config. This includes syntaxHighlighting and shikiConfig options to further customize the MDX renderer.
    • Simplify extendDefaults to an extendMarkdownConfig option. MDX options will default to their equivalent in your Markdown config. By setting extendMarkdownConfig to false, you can "eject" to set your own syntax highlighting, plugins, and more.

    Migration

    To preserve your existing Markdown and MDX setup, you may need some configuration changes:

    Smartypants manual installation

    Smartypants has been removed from Astro's default setup. If you rely on this plugin, install remark-smartypants and apply to your astro.config.*:

    // astro.config.mjs
import { defineConfig } from 'astro/config';
+ import smartypants from 'remark-smartypants';

export default defineConfig({
  markdown: {
+   remarkPlugins: [smartypants],
  }
});
    Migrate extendDefaultPlugins to gfm

    You may have disabled Astro's built-in plugins (GitHub-Flavored Markdown and Smartypants) with the extendDefaultPlugins option. Since Smartypants has been removed, this has been renamed to gfm.

    // astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  markdown: {
-   extendDefaultPlugins: false,
+   gfm: false,
  }
});

    Additionally, applying remark and rehype plugins no longer disables gfm. You will need to opt-out manually by setting gfm to false.

    Migrate MDX's extendPlugins to extendMarkdownConfig

    You may have used the extendPlugins option to manage plugin defaults in MDX. This has been replaced by 2 flags:

    • extendMarkdownConfig (true by default) to toggle Markdown config inheritance. This replaces the extendPlugins: 'markdown' option.
    • gfm (true by default) to toggle GitHub-Flavored Markdown in MDX. This replaces the extendPlugins: 'defaults' option.

Patch Changes

0.14.0

Minor Changes

  • #5654 2c65b433b Thanks @delucis! - Run heading ID injection after user plugins

    ⚠️ BREAKING CHANGE ⚠️

    If you are using a rehype plugin that depends on heading IDs injected by Astro, the IDs will no longer be available when your plugin runs by default.

    To inject IDs before your plugins run, import and add the rehypeHeadingIds plugin to your rehypePlugins config:

    // astro.config.mjs
+ import { rehypeHeadingIds } from '@astrojs/markdown-remark';
import mdx from '@astrojs/mdx';

export default {
  integrations: [mdx()],
  markdown: {
    rehypePlugins: [
+     rehypeHeadingIds,
      otherPluginThatReliesOnHeadingIDs,
    ],
  },
}

Patch Changes

0.13.0

Minor Changes

  • #5291 5ec0f6ed5 Thanks @bholmesdev! - Introduce Content Collections experimental API
    • Organize your Markdown and MDX content into easy-to-manage collections.
    • Add type safety to your frontmatter with schemas.
    • Generate landing pages, static routes, and SSR endpoints from your content using the collection query APIs.

0.12.2

Patch Changes

0.12.1

Patch Changes

  • #5522 efc4363e0 Thanks @delucis! - Support use of <Fragment> in MDX files rendered with <Content /> component

0.12.0

Minor Changes

Patch Changes

0.11.6

Patch Changes

  • #5335 dca762cf7 Thanks @bluwy! - Preserve code element node data.meta in properties.metastring for rehype syntax highlighters, like `rehype-pretty-code``

0.11.5

Patch Changes

0.11.4

Patch Changes

0.11.3

Patch Changes

  • #4842 812658ad2 Thanks @bluwy! - Add missing dependencies, support strict dependency installation (e.g. pnpm)

0.11.2

Patch Changes

0.11.1

Patch Changes

0.11.0

Minor Changes

  • #4504 8f8dff4d3 Thanks @bholmesdev! - Introduce new extendPlugins configuration option. This defaults to inheriting all remark and rehype plugins from your markdown config, with options to use either Astro's defaults or no inheritance at all.

0.10.3

Patch Changes

0.10.2

Patch Changes

  • #4423 d4cd7a59f Thanks @bholmesdev! - Update Markdown type signature to match new markdown plugin,and update top-level layout props for better alignment

0.10.2-next.0

Patch Changes

  • #4423 d4cd7a59f Thanks @bholmesdev! - Update Markdown type signature to match new markdown plugin,and update top-level layout props for better alignment

0.10.1

Patch Changes

0.10.0

Minor Changes

0.9.0

Minor Changes

  • #4268 f7afdb889 Thanks @bholmesdev! - Align MD with MDX on layout props and "glob" import results:
    • Add Content to MDX
    • Add file and url to MDX frontmatter (layout import only)
    • Update glob types to reflect differences (lack of rawContent and compiledContent)

Patch Changes

0.8.3

Patch Changes

0.8.2

Patch Changes

0.8.1

Patch Changes

0.8.0

Minor Changes

Patch Changes

0.7.0

Minor Changes

Patch Changes

0.6.0

Minor Changes

0.5.0

Minor Changes

  • #4114 64432bcb8 Thanks @Princesseuh! - Refactor @astrojs/mdx and @astrojs/markdown-remark to use @astrojs/prism instead of duplicating the code

Patch Changes

0.4.0

Minor Changes

0.3.1

Patch Changes

0.3.0

Minor Changes

  • #3977 19433eb4a Thanks @bholmesdev! - Add remarkPlugins and rehypePlugins to config, with the same default plugins as our standard Markdown parser

Patch Changes

0.2.1

Patch Changes

0.2.0

Minor Changes

0.1.1

Patch Changes

0.1.0

Minor Changes

0.0.3

Patch Changes

0.0.2

Patch Changes