MDX support (#3706)

* feat: first pass at MDX support

* fix: move built-in JSX renderer to come first

* chore: remove jsx example

* chore: update lockfile

* chore: cleanup example

* fix: missing deps

* refactor: move component render logic to `renderPage`

* chore: update HMR script

* chore: update MDX example

* refactor: prefer unshit

* refactor: remove TODO comment

* fix: remove duplicate identifier

* refactor: cleanup mdx entrypoint

* fix: better html handling

* fix: add tsconfig to mdx package

* chore: update lockfile

* fix: do not sort plugins unless mdx is enabled

* chore: update compiler

* fix(hmr): maybe render head for non-Astro pages

* fix: set initial pageExtensions

* refactor: cleanup addPageExtension

* refactor: remove addPageExtensions from types

* refactor: expose HookParameters type

* fix: only default to astro for MDX

* test: pick up jsx support in test fixtures

* refactor: simplify mdx entrypoint

* test: add basic MDX tests

* test(e2e): add mdx + framework tests

* chore: update lockfile

* test(e2e): fix preact mdx e2e test

* fix(mdx): disable .md support

* test(e2e): fix vue-component test missing mdx

* test(e2e): fix solid component needing import

* fix: allow `client:only="solid"` as an alias to `solid-js`

* chore: move to with-mdx example

* chore: update MDX readme

* chore: update example readme

* chore: bump astro version

* chore: update lockfile

* Update mod.d.ts

* feat: support `export const components` in MDX pages

* chore: update mdx example

* fix: update jsx-runtime with better slot support

* refactor: remove object style support

* chore: cleanup package exports

* chore: add todo comment

* refactor: improve isPage function, move to utils

* refactor: dry up manual HMR updates

* chore: add dev tests for MDX

* chore: prefer set to array

* chore: add changesets

* fix(hmr): flip public/private route

Co-authored-by: Nate Moore <nate@astro.build>

.changeset/selfish-beers-dance.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Internal changes needed to support `@astrojs/mdx`

.changeset/shaggy-gifts-admire.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/mdx': patch
+---
+
+Initial release! 🎉

examples/with-mdx/.gitignore

@@ -0,0 +1,19 @@
+# build output
+dist/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

examples/with-mdx/.npmrc

@@ -0,0 +1,2 @@
+# Expose Astro dependencies for `pnpm` users
+shamefully-hoist=true

examples/with-mdx/.stackblitzrc

@@ -0,0 +1,6 @@
+{
+  "startCommand": "npm start",
+  "env": {
+    "ENABLE_CJS_IMPORTS": true
+  }
+}

examples/with-mdx/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

examples/with-mdx/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

examples/with-mdx/README.md

@@ -0,0 +1,9 @@
+# Astro Example: MDX
+
+```
+npm init astro -- --template with-mdx
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-mdx)
+
+This example showcases using [`@astrojs/mdx`](https://www.npmjs.com/package/@astrojs/mdx) to author content using [MDX](https://mdxjs.com/).

examples/with-mdx/astro.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import preact from '@astrojs/preact';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [
+		mdx(),
+		preact()
+	]
+});

examples/with-mdx/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@example/with-mdx",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "devDependencies": {
+    "@astrojs/mdx": "^0.0.1",
+    "@astrojs/preact": "^0.2.0",
+    "astro": "^1.0.0-beta.58",
+    "preact": "^10.6.5"
+  }
+}

examples/with-mdx/sandbox.config.json

@@ -0,0 +1,11 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 3000,
+    "startScript": "start",
+    "node": "14"
+  }
+}

examples/with-mdx/src/components/Counter.jsx

@@ -0,0 +1,18 @@
+import { useState } from 'preact/hooks';
+
+export default function Counter({ children }) {
+	const [count, setCount] = useState(0);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div class="counter">
+				<button onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button onClick={add}>+</button>
+			</div>
+			<div class="counter-message">{children}</div>
+		</>
+	);
+}

examples/with-mdx/src/components/Title.astro

@@ -0,0 +1,7 @@
+<h1><slot /></h1>
+
+<style>
+	h1 {
+		color: red;
+	}
+</style>

examples/with-mdx/src/pages/index.mdx

@@ -0,0 +1,19 @@
+import Counter from '../components/Counter.jsx'
+import Title from '../components/Title.astro'
+export const components = { h1: Title }
+
+# Hello world!
+
+export const authors = [
+  {name: 'Jane', email: 'hi@jane.com'},
+  {name: 'John', twitter: '@john2002'}
+]
+export const published = new Date('2022-02-01')
+
+Written by: {new Intl.ListFormat('en').format(authors.map(d => d.name))}.
+
+Published on: {new Intl.DateTimeFormat('en', {dateStyle: 'long'}).format(published)}.
+
+<Counter client:idle>
+## Counter
+</Counter>

examples/with-mdx/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    // Enable top-level await, and other modern ESM features.
+    "target": "ESNext",
+    "module": "ESNext",
+    // Enable node-style module resolution, for things like npm package imports.
+    "moduleResolution": "node",
+    // Enable JSON imports.
+    "resolveJsonModule": true,
+    // Enable stricter transpilation for better output.
+    "isolatedModules": true,
+    // Add type definitions for our Vite runtime.
+    "types": ["vite/client"]
+  }
+}

package.json

@@ -50,6 +50,7 @@
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [
+        "rollup",
         "@babel/core",
         "@babel/plugin-transform-react-jsx",
         "vite"

packages/astro/e2e/fixtures/preact-component/astro.config.mjs

@@ -1,7 +1,8 @@
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
+import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [preact()],
+	integrations: [preact(), mdx()],
 });

packages/astro/e2e/fixtures/preact-component/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@astrojs/preact": "workspace:*",
+    "@astrojs/mdx": "workspace:*",
     "astro": "workspace:*",
     "preact": "^10.7.3"
   }

packages/astro/e2e/fixtures/preact-component/src/pages/mdx.mdx

@@ -0,0 +1,29 @@
+
+import Counter from '../components/Counter.jsx';
+import PreactComponent from '../components/JSXComponent.jsx';
+
+export const someProps = {
+	count: 0,
+};
+
+<Counter id="server-only" {...someProps}>
+	# Hello, server!
+</Counter>
+
+<Counter id="client-idle" {...someProps} client:idle>
+	# Hello, client:idle!
+</Counter>
+
+<Counter id="client-load" {...someProps} client:load>
+	# Hello, client:load!
+</Counter>
+
+<Counter id="client-visible" {...someProps} client:visible>
+	# Hello, client:visible!
+</Counter>
+
+<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+	# Hello, client:media!
+</Counter>
+
+<PreactComponent id="client-only" client:only="preact" />

packages/astro/e2e/fixtures/react-component/astro.config.mjs

@@ -1,7 +1,8 @@
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
+import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [react()],
+	integrations: [react(), mdx()],
 });

packages/astro/e2e/fixtures/react-component/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@astrojs/react": "workspace:*",
     "astro": "workspace:*",
+    "@astrojs/mdx": "workspace:*",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   }

packages/astro/e2e/fixtures/react-component/src/pages/mdx.mdx

@@ -0,0 +1,28 @@
+import Counter from '../components/Counter.jsx';
+import ReactComponent from '../components/JSXComponent.jsx';
+
+export const someProps = {
+	count: 0,
+};
+
+<Counter id="server-only" {...someProps}>
+	# Hello, server!
+</Counter>
+
+<Counter id="client-idle" {...someProps} client:idle>
+	# Hello, client:idle!
+</Counter>
+
+<Counter id="client-load" {...someProps} client:load>
+	# Hello, client:load!
+</Counter>
+
+<Counter id="client-visible" {...someProps} client:visible>
+	# Hello, client:visible!
+</Counter>
+
+<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+	# Hello, client:media!
+</Counter>
+
+<ReactComponent id="client-only" client:only="react" />

packages/astro/e2e/fixtures/solid-component/astro.config.mjs

@@ -1,7 +1,8 @@
 import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
 import solid from '@astrojs/solid-js';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [solid()],
+	integrations: [solid(), mdx()],
 });

packages/astro/e2e/fixtures/solid-component/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "dependencies": {
     "@astrojs/solid-js": "workspace:*",
-    "astro": "workspace:*"
+    "astro": "workspace:*",
+    "@astrojs/mdx": "workspace:*"
   },
   "devDependencies": {
     "solid-js": "^1.4.3"

packages/astro/e2e/fixtures/solid-component/src/components/SolidComponent.jsx

@@ -1,3 +1,5 @@
+import 'solid-js';
+
 export default function SolidComponent({ id }) {
 	return (
 		<div id={id}>Framework client:only component</div>

packages/astro/e2e/fixtures/solid-component/src/pages/mdx.mdx

@@ -0,0 +1,28 @@
+import Counter from '../components/Counter.jsx';
+import SolidComponent from '../components/SolidComponent.jsx';
+
+export const someProps = {
+	count: 0,
+};
+
+<Counter id="server-only" {...someProps}>
+	# Hello, server!
+</Counter>
+
+<Counter id="client-idle" {...someProps} client:idle>
+	# Hello, client:idle!
+</Counter>
+
+<Counter id="client-load" {...someProps} client:load>
+	# Hello, client:load!
+</Counter>
+
+<Counter id="client-visible" {...someProps} client:visible>
+	# Hello, client:visible!
+</Counter>
+
+<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+	# Hello, client:media!
+</Counter>
+
+<SolidComponent id="client-only" client:only="solid" />

packages/astro/e2e/fixtures/svelte-component/astro.config.mjs

@@ -1,7 +1,8 @@
 import { defineConfig } from 'astro/config';
 import svelte from '@astrojs/svelte';
+import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [svelte()],
+	integrations: [svelte(), mdx()],
 });

packages/astro/e2e/fixtures/svelte-component/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@astrojs/svelte": "workspace:*",
     "astro": "workspace:*",
+    "@astrojs/mdx": "workspace:*",
     "svelte": "^3.48.0"
   }
 }

packages/astro/e2e/fixtures/svelte-component/src/pages/mdx.mdx

@@ -0,0 +1,28 @@
+import Counter from '../components/Counter.svelte';
+import SvelteComponent from '../components/SvelteComponent.svelte';
+
+export const someProps = {
+	count: 0,
+};
+
+<Counter id="server-only" {...someProps}>
+	# Hello, server!
+</Counter>
+
+<Counter id="client-idle" {...someProps} client:idle>
+	# Hello, client:idle!
+</Counter>
+
+<Counter id="client-load" {...someProps} client:load>
+	# Hello, client:load!
+</Counter>
+
+<Counter id="client-visible" {...someProps} client:visible>
+	# Hello, client:visible!
+</Counter>
+
+<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+	# Hello, client:media!
+</Counter>
+
+<SvelteComponent id="client-only" client:only="svelte" />