Add MDX glob import demo to RSC playground

playground/rsc-vite-framework/app/root.tsx

@@ -1,4 +1,6 @@
-import { Meta, Link, Outlet } from "react-router";
+import type { Route } from "./+types/root";
+
+import { Meta, Link, Outlet, isRouteErrorResponse } from "react-router";
 import "./root.css";
 
 export const meta = () => [{ title: "React Router Vite" }];
@@ -37,6 +39,9 @@ export function Layout({ children }: { children: React.ReactNode }) {
               <li>
                 <Link to="/mdx">MDX</Link>
               </li>
+              <li>
+                <Link to="/mdx-glob">MDX glob</Link>
+              </li>
             </ul>
           </nav>
         </header>
@@ -55,6 +60,14 @@ export function ServerComponent() {
   );
 }
 
-export function ErrorBoundary() {
-  return <h1>Oooops</h1>;
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  return (
+    <h1>
+      {isRouteErrorResponse(error)
+        ? `${error.status} ${error.statusText}`
+        : error instanceof Error
+          ? error.message
+          : "Unknown Error"}
+    </h1>
+  );
 }

playground/rsc-vite-framework/app/routes/mdx-glob.$post/posts/hello/hello-component.module.css

@@ -0,0 +1,3 @@
+.root {
+  color: green;
+}

playground/rsc-vite-framework/app/routes/mdx-glob.$post/posts/hello/hello-component.tsx

@@ -0,0 +1,5 @@
+import styles from "./hello-component.module.css";
+
+export function HelloComponent() {
+  return <p className={styles.root}>Hello Component</p>;
+}

playground/rsc-vite-framework/app/routes/mdx-glob.$post/posts/hello/hello.mdx

@@ -0,0 +1,11 @@
+---
+title: Hello
+---
+
+import { HelloComponent } from "./hello-component";
+
+# Hello
+
+This is a blog post written in MDX.
+
+<HelloComponent />

playground/rsc-vite-framework/app/routes/mdx-glob.$post/posts/posts.ts

@@ -0,0 +1,76 @@
+import nodePath from "node:path";
+
+type BlogPost = {
+  Component: React.ComponentType;
+  path: string;
+  title: string;
+  slug: string;
+};
+
+async function resolvePosts(): Promise<{
+  [slug: string]: () => Promise<BlogPost>;
+}> {
+  const rawPosts = (await import.meta.glob("./*/*.mdx")) as Record<
+    string,
+    () => Promise<{
+      default: React.ComponentType;
+      frontmatter?: unknown;
+    }>
+  >;
+
+  return Object.fromEntries(
+    Object.entries(rawPosts).map(([importPath, loadPost]) => {
+      const slug = importPath.split("/").pop()!.replace(".mdx", "");
+
+      return [
+        slug,
+        async (): Promise<BlogPost> => {
+          const post = await loadPost();
+
+          let title: string;
+          if (
+            post.frontmatter &&
+            typeof post.frontmatter === "object" &&
+            "title" in post.frontmatter &&
+            typeof post.frontmatter.title === "string"
+          ) {
+            title = post.frontmatter.title;
+          } else {
+            const prettyPath = nodePath.relative(
+              process.cwd(),
+              nodePath.resolve(import.meta.dirname, importPath),
+            );
+            console.error(
+              `Invalid frontmatter for ${prettyPath}: Missing title`,
+            );
+            title = "Untitled Post";
+          }
+
+          return {
+            Component: post.default,
+            path: `/mdx-glob/${slug}`,
+            title,
+            slug,
+          };
+        },
+      ];
+    }),
+  );
+}
+
+export async function getPost(slug: string): Promise<BlogPost | null> {
+  const posts = await resolvePosts();
+  const loadPost = posts[slug];
+  return loadPost ? await loadPost() : null;
+}
+
+export async function getPosts(): Promise<Record<string, BlogPost>> {
+  const posts = await resolvePosts();
+  return Object.fromEntries(
+    await Promise.all(
+      Object.entries(posts).map(async ([slug, loadPost]) => {
+        return [slug, await loadPost()];
+      }),
+    ),
+  );
+}

playground/rsc-vite-framework/app/routes/mdx-glob.$post/posts/world/world-component.module.css

@@ -0,0 +1,3 @@
+.root {
+  color: rebeccapurple;
+}

playground/rsc-vite-framework/app/routes/mdx-glob.$post/posts/world/world-component.tsx

@@ -0,0 +1,5 @@
+import styles from "./world-component.module.css";
+
+export function WorldComponent() {
+  return <p className={styles.root}>World Component</p>;
+}

playground/rsc-vite-framework/app/routes/mdx-glob.$post/posts/world/world.mdx

@@ -0,0 +1,11 @@
+---
+title: World
+---
+
+import { WorldComponent } from "./world-component";
+
+# World
+
+This is another blog post written in MDX.
+
+<WorldComponent />

playground/rsc-vite-framework/app/routes/mdx-glob.$post/route.tsx

@@ -0,0 +1,23 @@
+import type { Route } from "./+types/route";
+import { getPost } from "./posts/posts";
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const post = await getPost(params.post);
+
+  if (!post) {
+    throw new Response("Not Found", { status: 404, statusText: "Not Found" });
+  }
+
+  return {
+    title: post.title,
+    element: <post.Component />,
+  };
+}
+
+export function meta({ loaderData }: Route.MetaArgs) {
+  return [{ title: loaderData.title }];
+}
+
+export function ServerComponent({ loaderData }: Route.ComponentProps) {
+  return loaderData.element;
+}

playground/rsc-vite-framework/app/routes/mdx-glob._index/route.tsx

@@ -0,0 +1,19 @@
+import { Link } from "react-router";
+import { getPosts } from "../mdx-glob.$post/posts/posts";
+
+export async function ServerComponent() {
+  const posts = await getPosts();
+
+  return (
+    <>
+      <h1>MDX glob</h1>
+      <ul>
+        {Object.values(posts).map(({ path, title }) => (
+          <li key={path}>
+            <Link to={path}>{title}</Link>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

playground/rsc-vite-framework/app/routes/mdx/message.tsx

@@ -0,0 +1,6 @@
+import { useLoaderData } from "react-router";
+
+export function Message() {
+  const { message } = useLoaderData();
+  return <div>Loader data: {message}</div>;
+}

playground/rsc-vite-framework/app/routes/mdx/route.mdx

@@ -1,14 +1,9 @@
-import { useLoaderData } from "react-router";
+import { Message } from "./message";
 
 export const meta = () => [{ title: "MDX Route" }];
 
 export const loader = () => ({ message: "Loader data" });
 
-export function Message() {
-  const { message } = useLoaderData();
-  return <div>Loader data: {message}</div>;
-}
-
 # This is an MDX route
 
 Hello from an MDX route!

playground/rsc-vite-framework/package.json

@@ -20,6 +20,8 @@
     "@vitejs/plugin-react": "^4.5.2",
     "@vitejs/plugin-rsc": "0.4.11",
     "cross-env": "^7.0.3",
+    "remark-frontmatter": "^5.0.0",
+    "remark-mdx-frontmatter": "^5.2.0",
     "typescript": "^5.1.6",
     "vite": "^6.2.0"
   },

playground/rsc-vite-framework/vite.config.ts

@@ -1,10 +1,17 @@
 import { defineConfig } from "vite";
 import { __INTERNAL_DO_NOT_USE_OR_YOU_WILL_GET_A_STRONGLY_WORDED_LETTER__ } from "@react-router/dev/internal";
 import mdx from "@mdx-js/rollup";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 
 const { unstable_reactRouterRSC: reactRouterRSC } =
   __INTERNAL_DO_NOT_USE_OR_YOU_WILL_GET_A_STRONGLY_WORDED_LETTER__;
 
 export default defineConfig({
-  plugins: [mdx(), reactRouterRSC()],
+  plugins: [
+    mdx({
+      remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
+    }),
+    reactRouterRSC(),
+  ],
 });