feat!: upgrade to solid-router v0.10.1

examples/solid-router/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@generouted/solid-router": "^1.16.1",
-    "@solidjs/router": "^0.9.1",
+    "@solidjs/router": "^0.10.1",
     "solid-js": "^1.8.7"
   },
   "devDependencies": {

examples/solid-router/src/main.tsx

@@ -1,4 +1,4 @@
 import { render } from 'solid-js/web'
-import { Routes } from '@generouted/solid-router'
+import { Routes } from '@generouted/solid-router/lazy'
 
 render(Routes, document.getElementById('app') as HTMLElement)

examples/solid-router/src/pages/(auth)/_layout.tsx

@@ -1,10 +1,10 @@
-import { Outlet } from '@solidjs/router'
+import { ParentProps } from 'solid-js'
 
-export default function Layout() {
+export default function Layout(props: ParentProps) {
   return (
     <div>
       <h1>Auth Layout</h1>
-      <Outlet />
+      {props.children}
     </div>
   )
 }

examples/solid-router/src/pages/_app.tsx

@@ -1,5 +1,5 @@
-import { Outlet } from '@solidjs/router'
-import { Modals } from '@generouted/solid-router'
+import { ParentProps } from 'solid-js'
+import { Modals } from '@generouted/solid-router/lazy'
 
 import { A, useModals, useNavigate } from '@/router'
 
@@ -15,7 +15,7 @@ export const Catch = (props: { error: Error; reset: () => void }) => {
 
 export const Pending = () => <div>Loading from _app...</div>
 
-export default function App() {
+export default function App(props: ParentProps) {
   const navigate = useNavigate()
   const modals = useModals()
 
@@ -33,9 +33,7 @@ export default function App() {
         <button onClick={() => modals.open('/modal', { at: '/posts' })}>Open global modal</button>
       </header>
 
-      <main>
-        <Outlet />
-      </main>
+      <main>{props.children}</main>
 
       <Modals />
     </section>

examples/solid-router/src/pages/posts/_layout.tsx

@@ -1,10 +1,12 @@
-import { Outlet } from '@solidjs/router'
+import { ParentProps } from 'solid-js'
 
-export default function About() {
+export const Catch = () => 'Error'
+
+export default function Posts(props: ParentProps) {
   return (
     <div>
       <h1>Posts Layout</h1>
-      <Outlet />
+      {props.children}
     </div>
   )
 }

packages/generouted/package.json

@@ -88,7 +88,7 @@
     "type-check": "tsc --noEmit"
   },
   "devDependencies": {
-    "@solidjs/router": "^0.9.1",
+    "@solidjs/router": "^0.10.1",
     "@tanstack/react-location": "^3.7.4",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",

packages/generouted/src/solid-router-lazy.tsx

@@ -1,12 +1,11 @@
 /** @jsxImportSource solid-js */
 import { Component, createMemo, ErrorBoundary, lazy, ParentProps, Suspense } from 'solid-js'
-import { Outlet, Router, useLocation, useRoutes } from '@solidjs/router'
-import type { RouteDataFunc, RouteDataFuncArgs, RouteDefinition } from '@solidjs/router'
+import { RouteDefinition, RouteLoadFunc, RouteLoadFuncArgs, Router, useLocation } from '@solidjs/router'
 
 import { generateModalRoutes, generatePreservedRoutes, generateRegularRoutes } from './core'
 
 type CatchProps = { error: any; reset: () => void }
-type Module = { default: Component; Loader?: RouteDataFunc; Catch?: Component<CatchProps>; Pending?: Component }
+type Module = { default: Component; Loader?: RouteLoadFunc; Catch?: Component<CatchProps>; Pending?: Component }
 type Route = { path?: string; component?: Component; children?: Route[] }
 
 const PRESERVED = import.meta.glob<Module>('/src/pages/(_app|404).{jsx,tsx}', { eager: true })
@@ -20,12 +19,14 @@ const regularRoutes = generateRegularRoutes<Route, () => Promise<Module>>(ROUTES
   const Element = lazy(module)
   const Pending = lazy(() => module().then((module) => ({ default: module?.Pending || Fragment })))
   const Catch = lazy(() => module().then((module) => ({ default: module?.Catch || Fragment })))
-  const Page = () => <Suspense fallback={<Pending />} children={<Element />} />
-  const Component = () => <ErrorBoundary fallback={(error, reset) => Catch({ error, reset })} children={<Page />} />
+  const Page = (props: any) => <Suspense fallback={<Pending />} children={<Element {...props} />} />
+  const Component = (props: any) => (
+    <ErrorBoundary fallback={(error, reset) => Catch({ error, reset })} children={<Page {...props} />} />
+  )
 
   return {
     component: Component,
-    data: (args: RouteDataFuncArgs) => module().then((mod) => mod?.Loader?.(args) || null),
+    load: (args: RouteLoadFuncArgs) => module().then((mod) => mod?.Loader?.(args) || undefined),
   }
 })
 const _app = preservedRoutes?.['_app']
@@ -36,15 +37,15 @@ const Element = _app?.default || Fragment
 const Pending = _app?.Pending || Fragment
 const Catch = preservedRoutes?.['_app']?.Catch
 
-const App = () => (
+const App = (props: any) => (
   <ErrorBoundary fallback={(error, reset) => Catch?.({ error, reset })}>
-    {_app?.Pending ? <Suspense fallback={<Pending />} children={<Element />} /> : <Element />}
+    {_app?.Pending ? <Suspense fallback={<Pending />} children={<Element {...props} />} /> : <Element {...props} />}
   </ErrorBoundary>
 )
 
-const app = { path: '', component: _app?.default ? App : Outlet, data: _app?.Loader || null }
-const fallback = { path: '*', component: _404?.default || Fragment }
+const app: RouteDefinition = { path: '', component: _app?.default ? App : Fragment, load: _app?.Loader || undefined }
+const fallback: RouteDefinition = { path: '*', component: _404?.default || Fragment }
 
-export const routes = [{ ...app, children: [...regularRoutes, fallback] }] as RouteDefinition[]
-export const Routes = () => <Router children={useRoutes(routes)()} />
+export const routes = [{ ...app, children: [...regularRoutes, fallback] }] as RouteDefinition[] // @ts-expect-error
+export const Routes = () => <Router children={routes} />
 export const Modals = () => createMemo(() => modalRoutes[useLocation<any>().state?.modal || ''] || Fragment) as any

packages/generouted/src/solid-router.tsx

@@ -1,11 +1,11 @@
 /** @jsxImportSource solid-js */
 import { Component, createMemo, ErrorBoundary, ParentProps, Suspense } from 'solid-js'
-import { Outlet, RouteDataFunc, RouteDefinition, Router, useLocation, useRoutes } from '@solidjs/router'
+import { RouteDefinition, RouteLoadFunc, Router, useLocation } from '@solidjs/router'
 
 import { generateModalRoutes, generatePreservedRoutes, generateRegularRoutes } from './core'
 
 type CatchProps = { error: any; reset: () => void }
-type Module = { default: Component; Loader?: RouteDataFunc; Catch?: Component<CatchProps>; Pending?: Component }
+type Module = { default: Component; Loader?: RouteLoadFunc; Catch?: Component<CatchProps>; Pending?: Component }
 type RouteDef = { path?: string; component?: Component; children?: RouteDef[] }
 
 const PRESERVED = import.meta.glob<Module>('/src/pages/(_app|404).{jsx,tsx}', { eager: true })
@@ -15,13 +15,17 @@ const ROUTES = import.meta.glob<Module>(['/src/pages/**/[\\w[-]*.{jsx,tsx}', '!*
 const preservedRoutes = generatePreservedRoutes<Module>(PRESERVED)
 const modalRoutes = generateModalRoutes<Element>(MODALS)
 
-const regularRoutes = generateRegularRoutes<RouteDef, Module>(ROUTES, (module) => {
-  const Element = module?.default || Fragment
-  const Page = () => (module?.Pending ? <Suspense fallback={<module.Pending />} children={<Element />} /> : <Element />)
-  const Component = module?.Catch
-    ? () => <ErrorBoundary fallback={(error, reset) => module.Catch?.({ error, reset })} children={<Page />} />
-    : Page
-  return { component: Component, data: module?.Loader || null }
+const regularRoutes = generateRegularRoutes<RouteDef, Module>(ROUTES, (mod) => {
+  const Element = mod?.default || Fragment
+  const Page = (props: any) =>
+    mod?.Pending ? <Suspense fallback={<mod.Pending />} children={<Element {...props} />} /> : <Element {...props} />
+  const Component = (props: any) =>
+    mod?.Catch ? (
+      <ErrorBoundary fallback={(error, reset) => mod.Catch?.({ error, reset })} children={<Page {...props} />} />
+    ) : (
+      <Page {...props} />
+    )
+  return { component: Component, load: mod?.Loader || undefined }
 })
 
 const _app = preservedRoutes?.['_app']
@@ -32,15 +36,15 @@ const Element = _app?.default || Fragment
 const Pending = _app?.Pending || Fragment
 const Catch = preservedRoutes?.['_app']?.Catch
 
-const App = () => (
+const App = (props: any) => (
   <ErrorBoundary fallback={(error, reset) => Catch?.({ error, reset })}>
-    {_app?.Pending ? <Suspense fallback={<Pending />} children={<Element />} /> : <Element />}
+    {_app?.Pending ? <Suspense fallback={<Pending />} children={<Element {...props} />} /> : <Element {...props} />}
   </ErrorBoundary>
 )
 
-const app = { path: '', component: _app?.default ? App : Outlet, data: _app?.Loader || null }
-const fallback = { path: '*', component: _404?.default || Fragment }
+const app: RouteDefinition = { path: '', component: _app?.default ? App : Fragment, load: _app?.Loader || undefined }
+const fallback: RouteDefinition = { path: '*', component: _404?.default || Fragment }
 
-export const routes = [{ ...app, children: [...regularRoutes, fallback] }] as RouteDefinition[]
-export const Routes = () => <Router children={useRoutes(routes)()} />
+export const routes: RouteDefinition[] = [{ ...app, children: [...regularRoutes, fallback] }] // @ts-expect-error
+export const Routes = () => <Router>{routes}</Router>
 export const Modals = () => createMemo(() => modalRoutes[useLocation<any>().state?.modal || ''] || Fragment) as any

packages/solid-router/package.json

@@ -86,7 +86,7 @@
   },
   "devDependencies": {
     "@generouted/core": "workspace:*",
-    "@solidjs/router": "^0.9.1",
+    "@solidjs/router": "^0.10.1",
     "esbuild-plugin-solid": "^0.5.0",
     "solid-js": "^1.8.7",
     "tsup": "^8.0.1",

packages/solid-router/readme.md

@@ -59,18 +59,16 @@ export default function Home() {
 ```tsx
 // src/pages/_app.tsx
 
-import { Outlet } from '@solidjs/router'
+import { ParentProps } from 'solid-js'
 
-export default function App() {
+export default function App(props: ParentProps) {
   return (
     <section>
       <header>
         <nav>...</nav>
       </header>
 
-      <main>
-        <Outlet />
-      </main>
+      <main>{props.children}</main>
     </section>
   )
 }
@@ -134,7 +132,7 @@ To navigate to a modal use `useModals` hook exported from `src/router.ts`:
 ```tsx
 // src/pages/_app.tsx
 
-import { Outlet } from '@solidjs/router'
+import { ParentProps } from 'solid-js'
 import { Modals } from '@generouted/solid-router'
 
 import { useModals } from '../router'
@@ -149,9 +147,7 @@ export default function App(props: ParentProps) {
         <button onClick={() => modals.open('/login')}>Open modal</button>
       </header>
 
-      <main>
-        <Outlet />
-      </main>
+      <main>{props.children}</main>
 
       <Modals />
     </section>