@astrojs/mdx 0.18.0 → 0.18.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 61e81c86fa4b4798
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.18.0 build /home/runner/work/astro/astro/packages/integrations/mdx
-@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
-@astrojs/mdx:build: 
+@astrojs/mdx:build: cache hit, replaying output 83b53c3b3706ec68
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.18.2 build /home/runner/work/astro/astro/packages/integrations/mdx
+@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
+@astrojs/mdx:build: 

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @astrojs/mdx
 
+## 0.18.2
+
+### Patch Changes
+
+- [#6552](https://github.com/withastro/astro/pull/6552) [`392ba3e4d`](https://github.com/withastro/astro/commit/392ba3e4d55f73ce9194bd94a2243f1aa62af079) Thanks [@bluwy](https://github.com/bluwy)! - Fix integration return type
+
+- Updated dependencies [[`90e5f87d0`](https://github.com/withastro/astro/commit/90e5f87d03215a833bb6ac91f9548670a25ce659), [`f5fddafc2`](https://github.com/withastro/astro/commit/f5fddafc248bb1ef57b7349bfecc25539ae2b5ea)]:
+  - @astrojs/markdown-remark@2.1.1
+
+## 0.18.1
+
+### Patch Changes
+
+- [#6494](https://github.com/withastro/astro/pull/6494) [`a13e9d7e3`](https://github.com/withastro/astro/commit/a13e9d7e33baccf51e7d4815f99b481ad174bc57) Thanks [@Yan-Thomas](https://github.com/Yan-Thomas)! - Consistency improvements to several package descriptions
+
+- Updated dependencies [[`a13e9d7e3`](https://github.com/withastro/astro/commit/a13e9d7e33baccf51e7d4815f99b481ad174bc57)]:
+  - @astrojs/prism@2.1.1
+
 ## 0.18.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -1,22 +1,12 @@
 import { markdownConfigDefaults } from '@astrojs/markdown-remark';
-import { PluggableList } from '@mdx-js/mdx/lib/core.js';
-import type { AstroIntegration, ContentEntryType, HookParameters } from 'astro';
+import type { PluggableList } from '@mdx-js/mdx/lib/core.js';
+import type { AstroIntegration } from 'astro';
 import type { Options as RemarkRehypeOptions } from 'remark-rehype';
-export declare type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | 'rehypePlugins'> & {
+export type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | 'rehypePlugins'> & {
     extendMarkdownConfig: boolean;
     recmaPlugins: PluggableList;
     remarkPlugins: PluggableList;
     rehypePlugins: PluggableList;
     remarkRehype: RemarkRehypeOptions;
 };
-declare type IntegrationWithPrivateHooks = {
-    name: string;
-    hooks: Omit<AstroIntegration['hooks'], 'astro:config:setup'> & {
-        'astro:config:setup': (params: HookParameters<'astro:config:setup'> & {
-            addPageExtension: (extension: string) => void;
-            addContentEntryType: (contentEntryType: ContentEntryType) => void;
-        }) => void | Promise<void>;
-    };
-};
-export default function mdx(partialMdxOptions?: Partial<MdxOptions>): IntegrationWithPrivateHooks;
-export {};
+export default function mdx(partialMdxOptions?: Partial<MdxOptions>): AstroIntegration;

package/dist/index.js

@@ -12,13 +12,8 @@ function mdx(partialMdxOptions = {}) {
   return {
     name: "@astrojs/mdx",
     hooks: {
-      "astro:config:setup": async ({
-        updateConfig,
-        config,
-        addPageExtension,
-        addContentEntryType,
-        command
-      }) => {
+      "astro:config:setup": async (params) => {
+        const { updateConfig, config, addPageExtension, addContentEntryType, command } = params;
         addPageExtension(".mdx");
         addContentEntryType({
           extensions: [".mdx"],
@@ -50,6 +45,7 @@ function mdx(partialMdxOptions = {}) {
           remarkRehypeOptions: mdxOptions.remarkRehype,
           jsx: true,
           jsxImportSource: "astro",
+          // Note: disable `.md` (and other alternative extensions for markdown files like `.markdown`) support
           format: "mdx",
           mdExtensions: []
         };
@@ -65,6 +61,8 @@ function mdx(partialMdxOptions = {}) {
                 configResolved(resolved) {
                   importMetaEnv = { ...importMetaEnv, ...resolved.env };
                 },
+                // Override transform to alter code before MDX compilation
+                // ex. inject layouts
                 async transform(_, id) {
                   if (!id.endsWith("mdx"))
                     return;
@@ -75,6 +73,7 @@ function mdx(partialMdxOptions = {}) {
                     ...mdxPluginOpts,
                     elementAttributeNameCase: "html",
                     remarkPlugins: [
+                      // Ensure `data.astro` is available to all remark plugins
                       toRemarkInitializeAstroData({ userFrontmatter: frontmatter }),
                       ...mdxPluginOpts.remarkPlugins ?? []
                     ],
@@ -91,6 +90,7 @@ function mdx(partialMdxOptions = {}) {
               },
               {
                 name: "@astrojs/mdx-postprocess",
+                // These transforms must happen *after* JSX runtime transformations
                 transform(code, id) {
                   if (!id.endsWith(".mdx"))
                     return;

package/dist/plugins.d.ts

@@ -1,7 +1,7 @@
 import type { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
 import type { AstroConfig } from 'astro';
 import type { VFile } from 'vfile';
-import { MdxOptions } from './index.js';
+import type { MdxOptions } from './index.js';
 export declare function recmaInjectImportMetaEnvPlugin({ importMetaEnv, }: {
     importMetaEnv: Record<string, any>;
 }): (tree: any) => void;

package/dist/plugins.js

@@ -41,6 +41,8 @@ function rehypeApplyFrontmatterExport() {
     const astroData = safelyGetAstroData(vfile.data);
     if (astroData instanceof InvalidAstroDataError)
       throw new Error(
+        // Copied from Astro core `errors-data`
+        // TODO: find way to import error data from core
         '[MDX] A remark or rehype plugin attempted to inject invalid frontmatter. Ensure "astro.frontmatter" is set to a valid JSON object that is not `null` or `undefined`.'
       );
     const { frontmatter } = astroData;
@@ -50,6 +52,7 @@ function rehypeApplyFrontmatterExport() {
     if (frontmatter.layout) {
       exportNodes.unshift(
         jsToTreeNode(
+          /** @see 'vite-plugin-markdown' for layout props reference */
           `import { jsx as layoutJsx } from 'astro/jsx-runtime';
 
 				export default async function ({ children }) {
@@ -96,13 +99,18 @@ async function getRemarkPlugins(mdxOptions, config) {
 }
 function getRehypePlugins(mdxOptions) {
   let rehypePlugins = [
+    // ensure `data.meta` is preserved in `properties.metastring` for rehype syntax highlighters
     rehypeMetaString,
+    // rehypeRaw allows custom syntax highlighters to work without added config
     [rehypeRaw, { passThrough: nodeTypes }]
   ];
   rehypePlugins = [
     ...rehypePlugins,
     ...mdxOptions.rehypePlugins,
+    // getHeadings() is guaranteed by TS, so this must be included.
+    // We run `rehypeHeadingIds` _last_ to respect any custom IDs set by user plugins.
     ...isPerformanceBenchmark ? [] : [rehypeHeadingIds, rehypeInjectHeadingsExport],
+    // computed from `astro.data.frontmatter` in VFile data
     rehypeApplyFrontmatterExport
   ];
   return rehypePlugins;

package/dist/rehype-collect-headings.d.ts

@@ -1,2 +1,2 @@
-import { MarkdownVFile } from '@astrojs/markdown-remark';
+import type { MarkdownVFile } from '@astrojs/markdown-remark';
 export declare function rehypeInjectHeadingsExport(): (tree: any, file: MarkdownVFile) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
-  "description": "Use MDX within Astro",
-  "version": "0.18.0",
+  "description": "Add support for MDX pages in your Astro site",
+  "version": "0.18.2",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -23,8 +23,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@astrojs/markdown-remark": "^2.1.0",
-    "@astrojs/prism": "^2.1.0",
+    "@astrojs/markdown-remark": "^2.1.1",
+    "@astrojs/prism": "^2.1.1",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/rollup": "^2.3.0",
     "acorn": "^8.8.0",
@@ -48,7 +48,7 @@
     "@types/mdast": "^3.0.10",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "2.1.0",
+    "astro": "2.1.4",
     "astro-scripts": "0.0.14",
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.11",
@@ -57,7 +57,9 @@
     "mdast-util-to-string": "^3.1.0",
     "mocha": "^9.2.2",
     "reading-time": "^1.5.0",
+    "rehype-mathjax": "^4.0.2",
     "rehype-pretty-code": "^0.4.0",
+    "remark-math": "^5.1.1",
     "remark-rehype": "^10.1.0",
     "remark-shiki-twoslash": "^3.1.0",
     "remark-toc": "^8.0.1",

package/src/index.ts

@@ -1,8 +1,8 @@
 import { markdownConfigDefaults } from '@astrojs/markdown-remark';
 import { toRemarkInitializeAstroData } from '@astrojs/markdown-remark/dist/internal.js';
 import { compile as mdxCompile } from '@mdx-js/mdx';
-import { PluggableList } from '@mdx-js/mdx/lib/core.js';
-import mdxPlugin, { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
+import type { PluggableList } from '@mdx-js/mdx/lib/core.js';
+import mdxPlugin, { type Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
 import type { AstroIntegration, ContentEntryType, HookParameters } from 'astro';
 import { parse as parseESM } from 'es-module-lexer';
 import fs from 'node:fs/promises';
@@ -23,33 +23,21 @@ export type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | '
 	remarkRehype: RemarkRehypeOptions;
 };
 
-type IntegrationWithPrivateHooks = {
-	name: string;
-	hooks: Omit<AstroIntegration['hooks'], 'astro:config:setup'> & {
-		'astro:config:setup': (
-			params: HookParameters<'astro:config:setup'> & {
-				// `addPageExtension` and `contentEntryType` are not a public APIs
-				// Add type defs here
-				addPageExtension: (extension: string) => void;
-				addContentEntryType: (contentEntryType: ContentEntryType) => void;
-			}
-		) => void | Promise<void>;
-	};
+type SetupHookParams = HookParameters<'astro:config:setup'> & {
+	// `addPageExtension` and `contentEntryType` are not a public APIs
+	// Add type defs here
+	addPageExtension: (extension: string) => void;
+	addContentEntryType: (contentEntryType: ContentEntryType) => void;
 };
 
-export default function mdx(
-	partialMdxOptions: Partial<MdxOptions> = {}
-): IntegrationWithPrivateHooks {
+export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroIntegration {
 	return {
 		name: '@astrojs/mdx',
 		hooks: {
-			'astro:config:setup': async ({
-				updateConfig,
-				config,
-				addPageExtension,
-				addContentEntryType,
-				command,
-			}) => {
+			'astro:config:setup': async (params) => {
+				const { updateConfig, config, addPageExtension, addContentEntryType, command } =
+					params as SetupHookParams;
+
 				addPageExtension('.mdx');
 				addContentEntryType({
 					extensions: ['.mdx'],

package/src/plugins.ts

@@ -13,7 +13,7 @@ import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import remarkSmartypants from 'remark-smartypants';
 import type { VFile } from 'vfile';
-import { MdxOptions } from './index.js';
+import type { MdxOptions } from './index.js';
 import { rehypeInjectHeadingsExport } from './rehype-collect-headings.js';
 import rehypeMetaString from './rehype-meta-string.js';
 import remarkPrism from './remark-prism.js';

package/src/rehype-collect-headings.ts

@@ -1,4 +1,4 @@
-import { MarkdownHeading, MarkdownVFile } from '@astrojs/markdown-remark';
+import type { MarkdownHeading, MarkdownVFile } from '@astrojs/markdown-remark';
 import { jsToTreeNode } from './utils.js';
 
 export function rehypeInjectHeadingsExport() {

package/test/fixtures/mdx-math/src/pages/mathjax.mdx

@@ -0,0 +1,5 @@
+# Mathjax
+
+$$
+\left(\frac{\sqrt{x+2}}{y^{2}}\right)
+$$

package/test/fixtures/mdx-script-style-raw/src/pages/index.mdx

@@ -0,0 +1,13 @@
+# Script style raw
+
+<script id="test-script">
+{`console.log('raw script')`}
+</script>
+
+<style id="test-style">
+{`
+h1[id="script-style-raw"] {
+  color: red;
+}
+`}
+</style>

package/test/mdx-math.test.js

@@ -0,0 +1,64 @@
+import mdx from '@astrojs/mdx';
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+import remarkMath from 'remark-math';
+import rehypeMathjaxSvg from 'rehype-mathjax';
+import rehypeMathjaxChtml from 'rehype-mathjax/chtml.js';
+
+const FIXTURE_ROOT = new URL('./fixtures/mdx-math/', import.meta.url);
+
+describe('MDX math', () => {
+	describe('mathjax', () => {
+		it('works with svg', async () => {
+			const fixture = await loadFixture({
+				root: FIXTURE_ROOT,
+				markdown: {
+					remarkPlugins: [remarkMath],
+					rehypePlugins: [rehypeMathjaxSvg],
+				},
+				integrations: [mdx()],
+			});
+			await fixture.build();
+
+			const html = await fixture.readFile('/mathjax/index.html');
+			const { document } = parseHTML(html);
+
+			const mjxContainer = document.querySelector('mjx-container[jax="SVG"]');
+			expect(mjxContainer).to.not.be.null;
+
+			const mjxStyle = document.querySelector('style').innerHTML;
+			expect(mjxStyle).to.include('mjx-container[jax="SVG"]', 'style should not be html-escaped');
+		});
+
+		it('works with chtml', async () => {
+			const fixture = await loadFixture({
+				root: FIXTURE_ROOT,
+				markdown: {
+					remarkPlugins: [remarkMath],
+					rehypePlugins: [
+						[
+							rehypeMathjaxChtml,
+							{
+								chtml: {
+									fontURL: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2',
+								},
+							},
+						],
+					],
+				},
+				integrations: [mdx()],
+			});
+			await fixture.build();
+
+			const html = await fixture.readFile('/mathjax/index.html');
+			const { document } = parseHTML(html);
+
+			const mjxContainer = document.querySelector('mjx-container[jax="CHTML"]');
+			expect(mjxContainer).to.not.be.null;
+
+			const mjxStyle = document.querySelector('style').innerHTML;
+			expect(mjxStyle).to.include('mjx-container[jax="CHTML"]', 'style should not be html-escaped');
+		});
+	});
+});

package/test/mdx-script-style-raw.test.js

@@ -0,0 +1,70 @@
+import mdx from '@astrojs/mdx';
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+const FIXTURE_ROOT = new URL('./fixtures/mdx-script-style-raw/', import.meta.url);
+
+describe('MDX script style raw', () => {
+	describe('dev', () => {
+		let fixture;
+		let devServer;
+
+		before(async () => {
+			fixture = await loadFixture({
+				root: FIXTURE_ROOT,
+				integrations: [mdx()],
+			});
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('works with with raw script and style strings', async () => {
+			const res = await fixture.fetch('/index.html');
+			expect(res.status).to.equal(200);
+
+			const html = await res.text();
+			const { document } = parseHTML(html);
+
+			const scriptContent = document.getElementById('test-script').innerHTML;
+			expect(scriptContent).to.include(
+				"console.log('raw script')",
+				'script should not be html-escaped'
+			);
+
+			const styleContent = document.getElementById('test-style').innerHTML;
+			expect(styleContent).to.include(
+				'h1[id="script-style-raw"]',
+				'style should not be html-escaped'
+			);
+		});
+	});
+
+	describe('build', () => {
+		it('works with with raw script and style strings', async () => {
+			const fixture = await loadFixture({
+				root: FIXTURE_ROOT,
+				integrations: [mdx()],
+			});
+			await fixture.build();
+
+			const html = await fixture.readFile('/index.html');
+			const { document } = parseHTML(html);
+
+			const scriptContent = document.getElementById('test-script').innerHTML;
+			expect(scriptContent).to.include(
+				"console.log('raw script')",
+				'script should not be html-escaped'
+			);
+
+			const styleContent = document.getElementById('test-style').innerHTML;
+			expect(styleContent).to.include(
+				'h1[id="script-style-raw"]',
+				'style should not be html-escaped'
+			);
+		});
+	});
+});