From 87630f631918f97b699d01f0ee90037528a16e85 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Fri, 17 Feb 2023 13:47:59 -0500
Subject: [PATCH] fix(dev): mdx browser routes

---
 .../plugins/browserRouteModulesPlugin.ts      | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
index 0ef5531290c..5dd00f5197a 100644
--- a/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
+++ b/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts
@@ -4,10 +4,12 @@ import type esbuild from "esbuild";
 import generate from "@babel/generator";
 
 import type { RemixConfig } from "../../config";
-import { applyHMR } from "./hmrPlugin";
+import invariant from "../../invariant";
+import * as Transform from "../../transform";
 import type { CompileOptions } from "../options";
 import { getLoaderForFile } from "../loaders";
-import * as Transform from "../../transform";
+import { getRouteModuleExports } from "../routeExports";
+import { applyHMR } from "./hmrPlugin";
 
 const serverOnlyExports = new Set(["action", "loader"]);
 
@@ -65,6 +67,8 @@ let removeServerExports = (onLoader: (loader: string) => void) =>
     };
   });
 
+type Route = RemixConfig["routes"][string];
+
 /**
  * This plugin loads route modules for the browser build, using module shims
  * that re-export only the route module exports that are safe for the browser.
@@ -78,6 +82,14 @@ export function browserRouteModulesPlugin(
   return {
     name: "browser-route-modules",
     async setup(build) {
+      let routesByFile: Map<string, Route> = Object.keys(config.routes).reduce(
+        (map, key) => {
+          let route = config.routes[key];
+          map.set(route.file, route);
+          return map;
+        },
+        new Map()
+      );
       build.onResolve({ filter: suffixMatcher }, (args) => {
         return {
           path: args.path,
@@ -89,6 +101,25 @@ export function browserRouteModulesPlugin(
         { filter: suffixMatcher, namespace: "browser-route-module" },
         async (args) => {
           let file = args.path.replace(suffixMatcher, "");
+
+          if (/\.mdx?$/.test(file)) {
+            let route = routesByFile.get(file);
+            invariant(route, `Cannot get route by path: ${args.path}`);
+
+            let theExports = await getRouteModuleExports(config, route.id);
+            let contents = "module.exports = {};";
+            if (theExports.length !== 0) {
+              let spec = `{ ${theExports.join(", ")} }`;
+              contents = `export ${spec} from ${JSON.stringify(`./${file}`)};`;
+            }
+
+            return {
+              contents,
+              resolveDir: config.appDirectory,
+              loader: "js",
+            };
+          }
+
           let routeFile = path.join(config.appDirectory, file);
 
           let sourceCode = fs.readFileSync(routeFile, "utf8");