diff --git a/.changeset/tender-impalas-invite.md b/.changeset/tender-impalas-invite.md deleted file mode 100644 index 0d4e5456959..00000000000 --- a/.changeset/tender-impalas-invite.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"remix": patch -"@remix-run/dev": patch ---- - -Adds support for handle, links, and loader to mdx routes diff --git a/contributors.yml b/contributors.yml index e4f12650499..26d5859dd9e 100644 --- a/contributors.yml +++ b/contributors.yml @@ -394,4 +394,3 @@ - zhe - garand - kiancross -- tagraves diff --git a/docs/guides/mdx.md b/docs/guides/mdx.md index dd9da49525d..4f6c70bad36 100644 --- a/docs/guides/mdx.md +++ b/docs/guides/mdx.md @@ -16,7 +16,7 @@ Remix supports using MDX in two ways: The simplest way to get started with MDX in Remix is to create a route module. Just like `.js` and `.ts` files in your `app/routes` directory, `.mdx` (and `.md`) files will participate in automatic file system based routing. -MDX routes allow you to define `handle`, `headers`, `links`, and `meta` as if they were a code based route: +MDX routes allow you to define both meta and headers as if they were a code based route: ```md --- @@ -25,9 +25,6 @@ meta: description: Isn't this awesome? headers: Cache-Control: no-cache -links: [{ rel: "stylesheet", href: "app.css" }] -handle: - someData: "abc" --- # Hello Content! @@ -50,8 +47,6 @@ import SomeComponent from "~/components/some-component"; ``` -You can also access your frontmatter fields from a parent component via the `data` field in `useMatches`. - ### Example By creating a `app/routes/posts/first-post.mdx` we can start writing a blog post: diff --git a/integration/mdx-test.ts b/integration/mdx-test.ts deleted file mode 100644 index 29124d4252e..00000000000 --- a/integration/mdx-test.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { test, expect } from "@playwright/test"; - -import { - createAppFixture, - createFixture, - js, - mdx, -} from "./helpers/create-fixture"; -import type { Fixture, AppFixture } from "./helpers/create-fixture"; -import { PlaywrightFixture } from "./helpers/playwright-fixture"; - -test.describe("mdx", () => { - let fixture: Fixture; - let appFixture: AppFixture; - - test.beforeAll(async () => { - fixture = await createFixture({ - files: { - "app/root.jsx": js` - import { json } from "@remix-run/node"; - import { Links, Meta, Outlet, Scripts } from "@remix-run/react"; - - export default function Root() { - return ( - - - - - - - - - - - ); - } - `, - - "app/routes/blog.jsx": js` - import { json } from "@remix-run/node"; - import { useMatches, Outlet } from "@remix-run/react"; - - export default function Index() { - const matches = useMatches(); - const mdxMatch = matches[matches.length - 1]; - return ( -
-

{mdxMatch.data.additionalData === 10 && 'Additional Data: 10'}

-

{mdxMatch.handle.someData}

- -
- ); - } - `, - - "app/routes/blog/post.mdx": mdx`--- - meta: - title: My First Post - description: Isn't this awesome? - headers: - Cache-Control: no-cache - links: [ - { rel: "stylesheet", href: "app.css" } - ] - handle: - someData: "abc" - additionalData: 10 ---- - # This is some markdown! - `, - - "app/routes/basic.mdx": mdx` - # This is some basic markdown! - `, - }, - }); - appFixture = await createAppFixture(fixture); - }); - - test.afterAll(async () => { - await appFixture.close(); - }); - - test("can render basic markdown", async ({ page }) => { - let app = new PlaywrightFixture(appFixture, page); - await app.goto("/basic"); - - expect(await app.getHtml()).toMatch("This is some basic markdown!"); - }); - - test("converts the frontmatter to meta, headers, links, handle, and loader", async ({ - page, - }) => { - let app = new PlaywrightFixture(appFixture, page); - await app.goto("/blog/post"); - expect(await app.getHtml('meta[name="description"]')).toMatch( - "Isn't this awesome?" - ); - expect(await app.getHtml("title")).toMatch("My First Post"); - expect(await app.getHtml("#additionalData")).toMatch("Additional Data: 10"); - expect(await app.getHtml("#handle")).toMatch("abc"); - expect(await app.getHtml('link[rel="stylesheet"]')).toMatch("app.css"); - }); -}); diff --git a/packages/remix-dev/compiler/plugins/mdx.ts b/packages/remix-dev/compiler/plugins/mdx.ts index 2cc1d91839b..9ed7d16c5a4 100644 --- a/packages/remix-dev/compiler/plugins/mdx.ts +++ b/packages/remix-dev/compiler/plugins/mdx.ts @@ -71,9 +71,7 @@ export function mdxPlugin(config: RemixConfig): esbuild.Plugin { export const filename = ${JSON.stringify(path.basename(args.path))}; export const headers = typeof attributes !== "undefined" && attributes.headers; export const meta = typeof attributes !== "undefined" && attributes.meta; -export const handle = typeof attributes !== "undefined" && attributes.handle; -export const links = typeof attributes === "undefined" ? undefined : () => attributes.links; -export const loader = typeof attributes === "undefined" ? undefined : () => attributes; +export const links = undefined; `; let compiled = await xdm.compile(fileContents, {