@astrojs/mdx 0.18.1 → 0.18.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 6863c2b0a0d736f6
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.18.1 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 603ca93f0d424089
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.18.3 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,20 @@
 # @astrojs/mdx
 
+## 0.18.3
+
+### Patch Changes
+
+- [#6779](https://github.com/withastro/astro/pull/6779) [`a98f6f418`](https://github.com/withastro/astro/commit/a98f6f418c92261a06ef79624a8c86e288c21eab) Thanks [@matthewp](https://github.com/matthewp)! - Prevent body head content injection in MDX when using layout
+
+## 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

package/dist/index.d.ts

@@ -1,22 +1,12 @@
 import { markdownConfigDefaults } from '@astrojs/markdown-remark';
 import type { PluggableList } from '@mdx-js/mdx/lib/core.js';
-import type { AstroIntegration, ContentEntryType, HookParameters } from 'astro';
+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;
@@ -122,6 +122,8 @@ export const Content = (props = {}) => MDXContent({
                   }
                   code += `
 Content[Symbol.for('astro.needsHeadRendering')] = !Boolean(frontmatter.layout);`;
+                  code += `
+Content.moduleId = ${JSON.stringify(id)};`;
                   if (command === "dev") {
                     code += `
 if (import.meta.hot) {

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Add support for MDX pages in your Astro site",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -23,7 +23,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@astrojs/markdown-remark": "^2.1.0",
+    "@astrojs/markdown-remark": "^2.1.3",
     "@astrojs/prism": "^2.1.1",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/rollup": "^2.3.0",
@@ -48,7 +48,7 @@
     "@types/mdast": "^3.0.10",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "2.1.3",
+    "astro": "2.2.1",
     "astro-scripts": "0.0.14",
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.11",
@@ -63,7 +63,7 @@
     "remark-rehype": "^10.1.0",
     "remark-shiki-twoslash": "^3.1.0",
     "remark-toc": "^8.0.1",
-    "vite": "^4.1.2"
+    "vite": "^4.2.1"
   },
   "engines": {
     "node": ">=16.12.0"

package/src/index.ts

@@ -2,7 +2,7 @@ import { markdownConfigDefaults } from '@astrojs/markdown-remark';
 import { toRemarkInitializeAstroData } from '@astrojs/markdown-remark/dist/internal.js';
 import { compile as mdxCompile } from '@mdx-js/mdx';
 import type { PluggableList } from '@mdx-js/mdx/lib/core.js';
-import mdxPlugin, { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
+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'],
@@ -172,6 +160,7 @@ export default function mdx(
 									// Ensures styles and scripts are injected into a `<head>`
 									// When a layout is not applied
 									code += `\nContent[Symbol.for('astro.needsHeadRendering')] = !Boolean(frontmatter.layout);`;
+									code += `\nContent.moduleId = ${JSON.stringify(id)};`;
 
 									if (command === 'dev') {
 										// TODO: decline HMR updates until we have a stable approach

package/test/css-head-mdx.test.js

@@ -81,5 +81,18 @@ describe('Head injection w/ MDX', () => {
 			const bodyLinks = $('body link[rel=stylesheet]');
 			expect(bodyLinks).to.have.a.lengthOf(0);
 		});
+
+		it('Injection caused by delayed slots', async () => {
+			const html = await fixture.readFile('/componentwithtext/index.html');
+
+			// Using cheerio here because linkedom doesn't support head tag injection
+			const $ = cheerio.load(html);
+
+			const headLinks = $('head link[rel=stylesheet]');
+			expect(headLinks).to.have.a.lengthOf(1);
+
+			const bodyLinks = $('body link[rel=stylesheet]');
+			expect(bodyLinks).to.have.a.lengthOf(0);
+		});
 	});
 });

package/test/fixtures/css-head-mdx/src/components/BasicBlock.astro

@@ -0,0 +1,14 @@
+---
+const { inlineStyle, title, display = 'horizontal' } = Astro.props;
+const lineEnding = display === 'horizontal' ? ', ' : '<br>';
+---
+
+{title && <h2 set:html={title} />}
+<address style={inlineStyle}>
+	<span class="name">some name</span><Fragment set:html={lineEnding} />
+	line 1<Fragment set:html={lineEnding} />
+	line 2<Fragment set:html={lineEnding} />
+	line 3<Fragment set:html={lineEnding} />
+	line 4<Fragment set:html={lineEnding} />
+	line 5
+</address>

package/test/fixtures/css-head-mdx/src/layouts/DocumentLayout.astro

@@ -0,0 +1,15 @@
+---
+// Extend the BaseLayout, adding space for a banner at the top of the page
+// after the main heading, then the detail for the actual page
+import ContentLayout from './ContentLayout.astro';
+const { frontmatter } = Astro.props;
+---
+
+<ContentLayout>
+	<div class="content-container">
+		<article id="main-content" class="pad-z5 flow">
+			<h1 set:html={frontmatter.pageHeading ? frontmatter.pageHeading : frontmatter.title} />
+			<slot />
+		</article>
+	</div>
+</ContentLayout>

package/test/fixtures/css-head-mdx/src/pages/componentwithtext.mdx

@@ -0,0 +1,12 @@
+---
+layout: ../layouts/DocumentLayout.astro
+title: blah blah
+---
+
+import BasicBlock from '../components/BasicBlock.astro';
+
+Some text for a paragraph.
+
+<BasicBlock title="This causes css in wrong place." />
+
+Some other text.