React - extra route props from component file

[bzbetty]

So i know i can use the extendRoute method to add in extra props to a route, but I was hoping to find a way of doing these extensions in the component file itself.

Essentially trying to get the same behaviour as the SFC tag

<route>
 {
 name: "who-me-override",
 meta: {
 requiresAuth: false
 }
 }
 </route>

Initially I figured it'd make sense to replace a components default export with an object

eg

export default index;

becomes

export default {
  element: index,
  meta: { requiresAuth: true}
}

but maybe there's a way to do this already?

Note: I'm actually doing a PoC to make this work with React-Location (not just react router) which is why i want this support as React-Location supports extra props

const routes = [
   {
     path: '/',
     loader: () => loadHomeData()
     element: () => <div>Home</div>,
     errorElement: () => <div>Error</div>,
     pendingElement: async () => <div>Taking a long time...</div>,
     pendingMs: 1000 * 2, // 2 seconds
   },
 ]

Do i just want a custom Resolver?

[bzbetty]

snippet from the react-location docs

 const routes: Route[] = [
   {
     path: '/',
     element: <Home />,
   },
   {
     path: 'expensive',
     // Code-split Element
     element: () => import('./Expensive').then((mod) => <mod.default />),
     // Code-split Loader
     loader: async (...args) =>
       import('./Expensive').then((mod) => mod.loader(...args)),
   },
 ]

so it seems like the best approach would be a custom resolver that adds the properties i want like above.

[bzbetty]

hmmm, customResolver would let me add the props, but it appears the stringifier is responsible to converting path -> component/lazy so I'd likely have to replace that too. Although it does seem like the resolver calls that.

Seems a little weird that it gets serialized to a string, wonder if that's a vite thing (actually might just be required for the imports)

stringify prop on PageResolver feels a bit off means the stringifier has to know about pageresolvers (circular dependency?) maybe it should be a prop on ResolvedOptions instead and just passed in.

Feels like resolveRoutes and generateClientCode could be separated for a bit more flexibility

Lot of utils that don't appear to be exposed - countSlashes, buildReactRoutePath, buildReactRemixRoutePath, resolveImportMode?

[bzbetty]

Wrote an example custom resolver for React-Location

https://github.com/bzbetty/vite-plugin-pages/tree/main/examples/react-location

used a unicode replacement hack instead of the regex approach the stringify.

certainly felt like i was missing access to a lot of things to write this well.

[bzbetty]

Came across another framework which does something similar using Vite import.meta.glob, thought it was cute.

https://github.com/oedotme/render/blob/main/src/config/routes.tsx