@astrojs/mdx 0.16.0 → 0.16.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 2e9264d0ca51149a
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.16.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 14d153814201eafa
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.16.1 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,11 @@
 # @astrojs/mdx
 
+## 0.16.1
+
+### Patch Changes
+
+- [#6243](https://github.com/withastro/astro/pull/6243) [`4f6ecba4c`](https://github.com/withastro/astro/commit/4f6ecba4c1b35bacbbc0097854ee2b7b8c878e71) Thanks [@bluwy](https://github.com/bluwy)! - Support rehype plugins that inject namespaced attributes
+
 ## 0.16.0
 
 ### Minor Changes

package/dist/index.js

@@ -48,6 +48,7 @@ function mdx(partialMdxOptions = {}) {
                   const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
                   const compiled = await mdxCompile(new VFile({ value: pageContent, path: id }), {
                     ...mdxPluginOpts,
+                    elementAttributeNameCase: "html",
                     remarkPlugins: [
                       toRemarkInitializeAstroData({ userFrontmatter: frontmatter }),
                       ...mdxPluginOpts.remarkPlugins ?? []

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -25,8 +25,8 @@
   "dependencies": {
     "@astrojs/markdown-remark": "^2.0.1",
     "@astrojs/prism": "^2.0.0",
-    "@mdx-js/mdx": "^2.1.2",
-    "@mdx-js/rollup": "^2.1.1",
+    "@mdx-js/mdx": "^2.3.0",
+    "@mdx-js/rollup": "^2.3.0",
     "acorn": "^8.8.0",
     "es-module-lexer": "^0.10.5",
     "estree-util-visit": "^1.2.0",
@@ -48,7 +48,7 @@
     "@types/mdast": "^3.0.10",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "2.0.5",
+    "astro": "2.0.12",
     "astro-scripts": "0.0.10",
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.11",

package/src/index.ts

@@ -74,6 +74,7 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI
 									const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
 									const compiled = await mdxCompile(new VFile({ value: pageContent, path: id }), {
 										...mdxPluginOpts,
+										elementAttributeNameCase: 'html',
 										remarkPlugins: [
 											// Ensure `data.astro` is available to all remark plugins
 											toRemarkInitializeAstroData({ userFrontmatter: frontmatter }),

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

@@ -3,6 +3,7 @@ import mdx from '@astrojs/mdx';
 import { expect } from 'chai';
 import { parseHTML } from 'linkedom';
 import { loadFixture } from '../../../astro/test/test-utils.js';
+import * as cheerio from 'cheerio';
 
 describe('Head injection w/ MDX', () => {
 	let fixture;
@@ -23,11 +24,62 @@ describe('Head injection w/ MDX', () => {
 			const html = await fixture.readFile('/indexThree/index.html');
 			const { document } = parseHTML(html);
 
-			const links = document.querySelectorAll('link[rel=stylesheet]');
+			const links = document.querySelectorAll('head link[rel=stylesheet]');
 			expect(links).to.have.a.lengthOf(1);
 
-			const scripts = document.querySelectorAll('script[type=module]');
+			const scripts = document.querySelectorAll('head script[type=module]');
 			expect(scripts).to.have.a.lengthOf(1);
 		});
+
+		it('injects into the head for content collections', async () => {
+			const html = await fixture.readFile('/posts/test/index.html');
+			const { document } = parseHTML(html);
+
+			const links = document.querySelectorAll('head link[rel=stylesheet]');
+			expect(links).to.have.a.lengthOf(1);
+		});
+
+		it('injects content from a component using Content#render()', async () => {
+			const html = await fixture.readFile('/DirectContentUsage/index.html');
+			const { document } = parseHTML(html);
+
+			const links = document.querySelectorAll('head link[rel=stylesheet]');
+			expect(links).to.have.a.lengthOf(1);
+
+			const scripts = document.querySelectorAll('head script[type=module]');
+			expect(scripts).to.have.a.lengthOf(2);
+		});
+
+		it('Using component using slots.render() API', async () => {
+			const html = await fixture.readFile('/remote/index.html');
+			const { document } = parseHTML(html);
+
+			const links = document.querySelectorAll('head link[rel=stylesheet]');
+			expect(links).to.have.a.lengthOf(1);
+		});
+
+		it('Using component but no layout', async () => {
+			const html = await fixture.readFile('/noLayoutWithComponent/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);
+		});
+
+		it('JSX component rendering Astro children within head buffering phase', async () => {
+			const html = await fixture.readFile('/posts/using-component/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/node_modules/.bin/astro

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"
+else
+  exec node  "$basedir/../../../../../../../astro/astro.js" "$@"
+fi

package/test/fixtures/css-head-mdx/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@test/mdx-css-head-mdx",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/mdx": "workspace:*",
+    "astro-remote": "0.2.3"
+  }
+}

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

@@ -0,0 +1,11 @@
+---
+const { title } = Astro.props;
+---
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<meta name="generator" content={Astro.generator} />
+<title>{title}</title>
+<style is:global>
+	@import "../styles/global.css";
+</style>

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

@@ -0,0 +1 @@
+<span>just a generic component</span>

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

@@ -0,0 +1,9 @@
+---
+import Component from "./GenericComponent.astro";
+---
+
+<div>
+	<slot name="title" />
+	<slot name="intro" class="inline" />
+  <Component />
+</div>

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

@@ -0,0 +1,3 @@
+<p>
+  <slot />
+</p>

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

@@ -0,0 +1,3 @@
+---
+---
+<span style={{fontVariant: "small-caps"}}><slot /></span>

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

@@ -0,0 +1,8 @@
+---
+import { getEntryBySlug } from 'astro:content';
+
+const launchWeek = await getEntryBySlug('blog', 'using-mdx');
+const { Content } = await launchWeek.render();
+---
+
+<Content />

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

@@ -0,0 +1,6 @@
+---
+---
+
+<script>
+	console.log('hoisted')
+	</script>

package/test/fixtures/css-head-mdx/src/content/blog/_styles.css

@@ -0,0 +1,3 @@
+body {
+  color: red !important;
+}

package/test/fixtures/css-head-mdx/src/content/blog/using-mdx.mdx

@@ -0,0 +1,6 @@
+import './_styles.css';
+import WithHoistedScripts from '../../components/WithHoistedScripts.astro';
+
+# Using mdx
+
+<WithHoistedScripts />

package/test/fixtures/css-head-mdx/src/content/posts/test.mdx

@@ -0,0 +1,5 @@
+---
+title: Testing
+---
+
+<SmallCaps>A test file</SmallCaps>

package/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx

@@ -0,0 +1,13 @@
+---
+title: testing
+---
+import MDXWrapper from "../../components/MDXWrapper.astro";
+
+<MDXWrapper>
+  <h1 slot="title">
+    testing
+  </h1>
+  <div slot="intro">
+    Intro
+  </div>
+</MDXWrapper>

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

@@ -0,0 +1,18 @@
+---
+import BaseHead from "../components/BaseHead.astro";
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<BaseHead title={title} />
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>

package/test/fixtures/css-head-mdx/src/pages/DirectContentUsage.astro

@@ -0,0 +1,17 @@
+---
+import UsingMdx from '../components/UsingMdx.astro'
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+		<h1>Astro</h1>
+		<UsingMdx />
+	</body>
+</html>

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

@@ -0,0 +1,22 @@
+---
+title: 'Lorem'
+description: 'Lorem ipsum dolor sit amet'
+pubDate: 'Jul 02 2022'
+---
+
+import MyComponent from '../components/HelloWorld.astro';
+
+
+## Lorem
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+## Lorem 2
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+<MyComponent />
+
+## Lorem 3
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

package/test/fixtures/css-head-mdx/src/pages/posts/[post].astro

@@ -0,0 +1,18 @@
+---
+import { getCollection } from 'astro:content';
+import Layout from '../../layouts/ContentLayout.astro';
+import SmallCaps from '../../components/SmallCaps.astro';
+
+export async function getStaticPaths() {
+  const entries = await getCollection('posts');
+  return entries.map(entry => {
+    return {params: { post: entry.slug }, props: { entry },
+  }});
+}
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+---
+<Layout title="">
+  <Content components={{ SmallCaps }} />
+</Layout>

package/test/fixtures/css-head-mdx/src/pages/remote.astro

@@ -0,0 +1,17 @@
+---
+import '../styles/global.css'
+import Layout from '../layouts/One.astro';
+import Paragraph from '../components/P.astro';
+import { Markdown } from 'astro-remote'
+---
+
+<Layout title="Welcome to Astro.">
+	<main>
+		<Markdown
+      components={{
+				p: Paragraph,
+      }}>
+			**Removing p component fixes the problem**
+			</Markdown>
+	</main>
+</Layout>

package/test/fixtures/css-head-mdx/src/styles/global.css

@@ -0,0 +1,3 @@
+html {
+	font-weight: bolder;
+}

package/test/mdx-plugins.test.js

@@ -63,6 +63,20 @@ describe('MDX plugins', () => {
 		expect(selectRehypeExample(document)).to.not.be.null;
 	});
 
+	it('supports custom rehype plugins with namespaced attributes', async () => {
+		const fixture = await buildFixture({
+			integrations: [
+				mdx({
+					rehypePlugins: [rehypeSvgPlugin],
+				}),
+			],
+		});
+		const html = await fixture.readFile(FILE);
+		const { document } = parseHTML(html);
+
+		expect(selectRehypeSvg(document)).to.not.be.null;
+	});
+
 	it('extends markdown config by default', async () => {
 		const fixture = await buildFixture({
 			markdown: {
@@ -207,6 +221,23 @@ function rehypeExamplePlugin() {
 	};
 }
 
+function rehypeSvgPlugin() {
+	return (tree) => {
+		tree.children.push({
+			type: 'element',
+			tagName: 'svg',
+			properties: { xmlns: 'http://www.w3.org/2000/svg' },
+			children: [
+				{
+					type: 'element',
+					tagName: 'use',
+					properties: { xLinkHref: '#icon' },
+				},
+			],
+		});
+	};
+}
+
 function recmaExamplePlugin() {
 	return (tree) => {
 		estreeVisit(tree, (node) => {
@@ -245,6 +276,10 @@ function selectRehypeExample(document) {
 	return document.querySelector('div[data-rehype-plugin-works]');
 }
 
+function selectRehypeSvg(document) {
+	return document.querySelector('svg > use[xlink\\:href]');
+}
+
 function selectRecmaExample(document) {
 	return document.querySelector('div[data-recma-plugin-works]');
 }