Add MDX glob import demo to RSC playground

Author: markdalgleish

packages/react-router/index-react-server.ts

@@ -47,6 +47,7 @@ export { createStaticHandler } from "./lib/router/router";
 export {
   data,
   matchRoutes,
+  isRouteErrorResponse,
   unstable_createContext,
   unstable_RouterContextProvider,
 } from "./lib/router/utils";

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,79 @@
+type BlogPost = {
+  Component: React.ComponentType;
+  title: string;
+  slug: string;
+  path: string;
+};
+
+async function resolvePosts(): Promise<
+  Record<string, () => Promise<BlogPost>>
+> {
+  const rawPosts = (await import.meta.glob("./*/*.mdx")) as Record<
+    string,
+    () => Promise<{
+      default: React.ComponentType;
+      frontmatter: { title: string };
+    }>
+  >;
+
+  return Object.fromEntries(
+    Object.entries(rawPosts).map(([path, loadPost]) => {
+      const slug = path.split("/").pop()!.replace(".mdx", "");
+
+      return [
+        slug,
+        async (): Promise<BlogPost> => {
+          const pathParts = path.split("/");
+          const directoryName = pathParts[pathParts.length - 2];
+
+          if (directoryName !== slug) {
+            throw new Error(
+              `Invalid post structure: directory name "${directoryName}" does not match slug "${slug}" in path "${path}"`,
+            );
+          }
+
+          const post = await loadPost();
+
+          if (
+            !post?.frontmatter ||
+            typeof post.frontmatter !== "object" ||
+            !("title" in post.frontmatter) ||
+            typeof post.frontmatter.title !== "string"
+          ) {
+            throw new Error(`Invalid frontmatter for ${path}`);
+          }
+
+          return {
+            Component: post.default,
+            title: post.frontmatter.title,
+            slug,
+            path: `/mdx-glob/${slug}`,
+          };
+        },
+      ];
+    }),
+  );
+}
+
+export async function getPost(slug: string): Promise<BlogPost | undefined> {
+  const posts = await resolvePosts();
+  const loadPost = posts[slug];
+
+  if (!loadPost) {
+    return undefined;
+  }
+
+  return await loadPost();
+}
+
+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,16 @@
+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 { postElement: <post.Component /> };
+}
+
+export function ServerComponent({ loaderData }: Route.ComponentProps) {
+  return loaderData.postElement;
+}