Configuration based routing

[natew]

Hey all, we're launching tomorrow so not much time to write something out here properly yet, but wanted to create a discussion to map out what would be desired (and if we even want) an option to opt out of FS routing.

[natew]

I really like the new RR7 screen I saw today on X:

The nice thing is it maps very closely to how we do routing, I don't think this is actually too hard of a lift. Probably the first step would be to internally create this API and get it working powering the FS routes, and then export it once that feels stable.

[mutasim77]

Hey)
I used to prefer a config-based approach over a component-based one, before switching to the FS (or function-based) approach. I used to play with RRD v6 (also vue-router, which uses a similar approach). Just liked how everything was clear and centralized in one place (IMHO). If you also like a config-based approach, you might want to try something like this, though I’d call it a context-aware-config approach:

// ./routes.ts
import { RouteConfig, contextRoute, route } from "one/router";

type AppContext = "desktop" | "mobile" | "authenticated" | "anonymous";

const routes: RouteConfig<AppContext> = {
  "/": contextRoute({
    component: "./layouts/main.tsx",
    contexts: { mobile: "./layouts/mobile-main.tsx" },
    children: {
      "index": contextRoute({
        component: "./pages/home.tsx",
        contexts: { authenticated: "./pages/dashboard.tsx" }
      }),
      "products/:id": route({
        component: "./pages/products/detail.tsx",
        contexts: { mobile: "./pages/products/mobile-detail.tsx" },
      }),
      "account": contextRoute({
        component: "./layouts/account-layout.tsx",
        authenticate: true,
        fallback: "./pages/login.tsx",
        children: {
          "orders/:year": route({
            component: "./pages/account/orders.tsx",
          })
        }
      })
    }
  })
};

export default routes;

So and you can use it like this:

// ./_layout.tsx
import { SchemeProvider } from '@vxrn/color-scheme'
import { createRouter, RouterProvider } from "one/router";
import routes from "./routes";

const router = createRouter(routes, {
  getContext: () => ({
    device: window.innerWidth < 768 ? "mobile" : "desktop",
    auth: localStorage.getItem("token") ? "authenticated" : "anonymous"
  })
});

export default function Layout() {
  return (
    <>
      <LoadProgressBar />
      <SchemeProvider>
         <RouterProvider router={router}>
            <Slot />
         </RouterProvider> 
      </SchemeProvider>
    </>
  )
}

Hope this helps in some way!

By the way, great framework. I've been playing around with it since yesterday, and I'm really enjoying it! ❶