Closed v-moe closed 1 year ago
Currently I can use a config based setup like
const routes = [ { path: '/', component: lazy(() => import('/src/pages/Home')), }, { path: '/test', component: lazy(() => import('/src/pages/Test')), }, { path: '/new', component: lazy(() => import('/src/pages/New')), }, ] satisfies Parameters<typeof useRoutes>[0]
and use it in my App component like
const App: Component = () => { const Routes = useRoutes(routes) return ( <Router> <Routes /> </Router> ) }
I want to get a union type of all the possible paths, i.e. '/' | 'test' | 'new'. This approach obviously does not work:
'/' | 'test' | 'new'
type Path = (typeof routes)[number]['path'] // just string
In order to make the above snippet work I have to add a const assertion to each element in the routes array like this:
const
routes
const routes = [ { path: '/', component: lazy(() => import('/src/pages/Home')), } as const, { path: '/test', component: lazy(() => import('/src/pages/Test')), } as const, { path: '/new', component: lazy(() => import('/src/pages/New')), } as const, ] satisfies Parameters<typeof useRoutes>[0]
While the workaround works just fine it would be desirable to be able to just add the const assertion to the whole array instead like this:
const routes = [ { path: '/', component: lazy(() => import('/src/pages/Home')), }, { path: '/test', component: lazy(() => import('/src/pages/Test')), }, { path: '/new', component: lazy(() => import('/src/pages/New')), }, ] as const satisfies Parameters<typeof useRoutes>[0]
Adding as const will lead to an error since useRoutes is typed like this:
as const
useRoutes
export declare const useRoutes: (routes: RouteDefinition | RouteDefinition[], base?: string) => () => JSX.Element;
Allowing RouteDefinition[] to be readonly will make the const assertion on the whole array work.
RouteDefinition[]
readonly
Sure. Thanks.
Thank you for Solid and its ecosystem! This is my first open source contribution and I am so thrilled it was for Solid!
Allow readonly array as argument to useRoutes
The setup
Currently I can use a config based setup like
and use it in my App component like
The task
I want to get a union type of all the possible paths, i.e.
'/' | 'test' | 'new'
. This approach obviously does not work:The workaround
In order to make the above snippet work I have to add a
const
assertion to each element in theroutes
array like this:The improvement
While the workaround works just fine it would be desirable to be able to just add the
const
assertion to the whole array instead like this:The issue
Adding
as const
will lead to an error sinceuseRoutes
is typed like this:The proposed solution
Allowing
RouteDefinition[]
to bereadonly
will make theconst
assertion on the whole array work.