import { defineRoutes } from "std-router";
import { renderToReadableStream } from "react-dom/server.edge";

export const routes = defineRoutes((router) =>
  router
    .renderer(reactRenderer)
    .use(reactLayout(Shell))
    .route("/", (c) => c.render(<Home />))
    .route("*", (c) => c.render(<NotFound />, { status: 404 }))
);

function Shell({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <title>Hello, World</title>
      </head>
      <body>{children}</body>
    </html>
  );
}

function Home() {
  return <h1>Hello, World</h1>;
}

function NotFound() {
  return <h1>Not Found</h1>;
}

type LayoutComponent = (props: {
  children?: React.ReactNode;
}) => React.ReactNode;

const rendererContext = defineContext<LayoutComponent[]>(() => []);

const reactLayout =
  (Layout: LayoutComponent): Middleware<any> =>
  (c, next) => {
    c.set(rendererContext, [...c.get(rendererContext), Layout]);
    return next();
  };

const reactRenderer: Renderer<React.ReactNode> = (c, node, init) => {
  const body = await renderToReadableStream(node, {
    onError: console.error,
  });

  const headers = new Headers(init?.headers);
  headers.set("Content-Type", "text/html; charset=utf8");

  return new Response(body, { ...init, headers });
};

Matching and running routes

Here we use our defined routes and match against them. If we find a match, we run it against the request and return the response.

import { matchRoutes, runMatch } from "std-router";

import { routes } from "./routes.js";

export function handleRequest(request: Request) {
  const match = matchRoutes(routes, new URL(request.url));
  if (!match) {
    return new Response("Not Found", { status: 404 });
  }

  return runMatch(match, request);
}

FAQs

What is std-router?

Is std-router well maintained?

Package last updated on 29 Oct 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install