Using mdx as fs routes

[hi-ogawa]

After the recent fs router refactoring, this probably became simpler. Here is an example repo if anyone is interested https://github.com/hi-ogawa/reproductions/tree/main/waku-mdx The same approach should work for other non default js language like ReScript etc.

1. Add @mdx-js/rollup to waku.config.ts.

// waku.config.ts

import { defineConfig } from "waku/config";
import mdx from "@mdx-js/rollup";

export default defineConfig({
  vite: {
    plugins: [mdx()],
  },
});

2. Include mdx in custom server entry's fs router glob.

// src/server-entry.tsx

import { unstable_fsRouter } from "waku/router/server";

export default unstable_fsRouter(
  import.meta.glob("/src/pages/**/*.{mdx,js,jsx,ts,tsx}", {
    base: "/src/pages",
  }),
  {
    apiDir: "api",
    slicesDir: "_slices",
  },
);

3. Write route files in src/pages with mdx. For example,

{/* src/pages/index.mdx */}

import { Link } from "waku";
import { Counter } from "../components/counter";

<title>Waku</title>

# Waku

Hello world!

<Counter />

<Link to="/about">About page</Link>