chore(remix-dev): replace xdm with @mdx-js/mdx v2

contributors.yml

@@ -220,6 +220,7 @@
 - jacargentina
 - jacob-ebey
 - JacobParis
+- jacobwgillespie
 - jack-r-warren
 - jakeginnivan
 - jakewtaylor

packages/remix-dev/compiler/plugins/mdx.ts

@@ -11,8 +11,8 @@ export function mdxPlugin({ config }: Pick<Context, "config">): esbuild.Plugin {
   return {
     name: "remix-mdx",
     async setup(build) {
-      let [xdm, { default: remarkFrontmatter }] = await Promise.all([
-        import("xdm"),
+      let [mdx, { default: remarkFrontmatter }] = await Promise.all([
+        import("@mdx-js/mdx"),
         import("remark-frontmatter") as any,
       ]);
 
@@ -48,7 +48,7 @@ export function mdxPlugin({ config }: Pick<Context, "config">): esbuild.Plugin {
         let absolutePath = path.join(config.appDirectory, args.path);
 
         return processMDX(
-          xdm,
+          mdx,
           remarkFrontmatter,
           config,
           args.path,
@@ -61,7 +61,7 @@ export function mdxPlugin({ config }: Pick<Context, "config">): esbuild.Plugin {
 
 export async function processMDX(
   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
-  xdm: typeof import("xdm"),
+  mdx: typeof import("@mdx-js/mdx"),
   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   remarkFrontmatter: typeof import("remark-frontmatter")["default"],
   config: Pick<Context, "config">["config"],
@@ -97,7 +97,7 @@ export const meta = typeof attributes !== "undefined" && attributes.meta;
 export const handle = typeof attributes !== "undefined" && attributes.handle;
     `;
 
-    let compiled = await xdm.compile(fileContents, {
+    let compiled = await mdx.compile(fileContents, {
       jsx: true,
       jsxRuntime: "automatic",
       rehypePlugins,

packages/remix-dev/compiler/utils/loaders.ts

@@ -21,7 +21,7 @@ export const loaders: { [ext: string]: esbuild.Loader } = {
   ".js": "jsx",
   ".jsx": "jsx",
   ".json": "json",
-  // We preprocess md and mdx files using XDM and send through
+  // We preprocess md and mdx files using @mdx-js/mdx and send through
   // the JSX for esbuild to handle
   ".md": "jsx",
   ".mdx": "jsx",

packages/remix-dev/modules.ts

@@ -67,34 +67,14 @@ declare module "*.jpg" {
   export default asset;
 }
 declare module "*.md" {
-  import type { ComponentType, ReactHTML } from "react";
+  import "mdx/types";
   export let attributes: any;
   export let filename: string;
-  let Component: ComponentType<
-    Readonly<Record<string, unknown>> & {
-      components?: Readonly<
-        Partial<
-          Record<keyof ReactHTML | "wrapper", keyof ReactHTML | ComponentType>
-        >
-      >;
-    }
-  >;
-  export default Component;
 }
 declare module "*.mdx" {
-  import type { ComponentType, ReactHTML } from "react";
+  import "mdx/types";
   export let attributes: any;
   export let filename: string;
-  let Component: ComponentType<
-    Readonly<Record<string, unknown>> & {
-      components?: Readonly<
-        Partial<
-          Record<keyof ReactHTML | "wrapper", keyof ReactHTML | ComponentType>
-        >
-      >;
-    }
-  >;
-  export default Component;
 }
 declare module "*.mp3" {
   let asset: string;

packages/remix-dev/package.json

@@ -27,8 +27,10 @@
     "@babel/preset-typescript": "^7.21.5",
     "@babel/traverse": "^7.21.5",
     "@babel/types": "^7.21.5",
+    "@mdx-js/mdx": "^2.3.0",
     "@npmcli/package-json": "^2.0.0",
     "@remix-run/server-runtime": "1.19.2",
+    "@types/mdx": "^2.0.5",
     "@vanilla-extract/integration": "^6.2.0",
     "arg": "^5.0.1",
     "cacache": "^17.1.3",
@@ -68,8 +70,7 @@
     "sort-package-json": "^1.55.0",
     "tar-fs": "^2.1.1",
     "tsconfig-paths": "^4.0.0",
-    "ws": "^7.4.5",
-    "xdm": "^2.0.0"
+    "ws": "^7.4.5"
   },
   "devDependencies": {
     "@remix-run/serve": "1.19.2",