Gathering detailed insights and metrics for @generouted/solid-router
Installations
npm install @generouted/solid-routerDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
23.7.0
NPM Version
10.9.2
Score
59.7
Supply Chain
90.1
Quality
90.5
Maintenance
50
Vulnerability
98.6
License
Releases
98
Contributors
23
Languages
4
TypeScript
JavaScript
HTML
CSS
TypeScript (97.56%)
JavaScript (1.69%)
HTML (0.66%)
CSS (0.09%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
13,757
Last Day
6
Last Week
115
Last Month
501
Last Year
7,394
GitHub Statistics
MIT License
1,120 Stars
435 Commits
60 Forks
8 Watchers
10 Branches
23 Contributors
Updated on Feb 13, 2025
Maintainers
1
Package Meta Information
Latest Version
1.20.0
Package Id
@generouted/solid-router@1.20.0
Unpacked Size
40.15 kB
Size
8.95 kB
File Count
32
NPM Version
10.9.2
Node Version
23.7.0
Published on
Feb 07, 2025
Total Downloads
Cumulative downloads
Total Downloads
13,757
Last Day
-62.5%
6
Compared to previous day
Last Week
12.7%
115
Compared to previous week
Last Month
30.8%
501
Compared to previous month
Last Year
16.2%
7,394
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
3
Generouted + Solid Router + Type-safety
Docs
Check out generouted's main docs for the features, conventions and more.
How
This integration is based on a Vite plugin to generate routes types for Solid Router with generouted conventions. The output is saved by default at src/router.ts and gets updated by the add/change/delete at src/pages/*.
Getting started
In case you don't have a Vite project with Solid and TypeScript, check Vite documentation to start a new project.
Installation
1pnpm add @generouted/solid-router @solidjs/router
Setup
1// vite.config.ts 2 3import { defineConfig } from 'vite' 4import solid from 'vite-plugin-solid' 5import generouted from '@generouted/solid-router/plugin' 6 7export default defineConfig({ plugins: [solid(), generouted()] })
Usage
1// src/main.tsx 2 3import { render } from 'solid-js/web' 4import { Routes } from '@generouted/solid-router' 5// import { Routes } from '@generouted/solid-router/lazy' // route-based code-splitting 6 7render(Routes, document.getElementById('root')!)
Adding pages
Add the home page by creating a new file src/pages/index.tsx → /, then export a default component:
1// src/pages/index.tsx 2 3export default function Home() { 4 return <h1>Home</h1> 5}
Optional root layout at pages/_app.tsx
1// src/pages/_app.tsx 2 3import { ParentProps } from 'solid-js' 4 5export default function App(props: ParentProps) { 6 return ( 7 <section> 8 <header> 9 <nav>...</nav> 10 </header> 11 12 <main>{props.children}</main> 13 </section> 14 ) 15}
Type-safe navigation
Auto-completion for A, useNavigate, useParams and more exported from src/router.ts
1// src/pages/index.tsx 2import { A, useNavigate, useParams } from '../router' 3 4export default function Home() { 5 const navigate = useNavigate() 6 7 // typeof params -> { id: string; pid?: string } 8 const params = useParams('/posts/:id/:pid?') 9 10 // typeof params to be passed -> { id: string; pid?: string } 11 const handler = () => navigate('/posts/:id/:pid?', { params: { id: '1', pid: '0' } }) 12 13 return ( 14 <div> 15 {/** ✅ Passes */} 16 <A href="/" /> 17 <A href="/posts/:id" params={{ id: '1' }} /> 18 <A href="/posts/:id/:pid?" params={{ id: '1' }} /> 19 <A href="/posts/:id/:pid?" params={{ id: '1', pid: 0 }} /> 20 21 {/** 🔴 Error: not defined route */} 22 <A href="/not-defined-route" /> 23 24 {/** 🔴 Error: missing required params */} 25 <A href="/posts/:id" /> 26 27 <h1>Home</h1> 28 </div> 29 ) 30}
Type-safe global modals
Although all modals are global, it's nice to co-locate modals with relevant routes.
Create modal routes by prefixing a valid route file name with a plus sign +. Why +? You can think of it as an extra route, as the modal overlays the current route:
1// src/pages/+login.tsx 2 3import { Modal } from '@/ui' 4 5export default function Login() { 6 return <Modal>Content</Modal> 7}
To navigate to a modal use useModals hook exported from src/router.ts:
1// src/pages/_app.tsx 2 3import { ParentProps } from 'solid-js' 4 5import { useModals } from '../router' 6 7export default function App(props: ParentProps) { 8 const modals = useModals() 9 10 return ( 11 <section> 12 <header> 13 <nav>...</nav> 14 <button onClick={() => modals.open('/login')}>Open modal</button> 15 </header> 16 17 <main>{props.children}</main> 18 </section> 19 ) 20}
With useModals you can use modals.open('/modal-path') and modals.close(), and by default it opens/closes the modal on the current active route.
Both methods come with Solid Router's navigate() options with one prop added at, for optionally navigating to a route while opening/closing a modal, and it's also type-safe!
modals.open(path, options)modals.close(options)
at should be also a valid route path, here are some usage examples:
modals.open('/login', { at: '/auth', replace: true })modals.open('/info', { at: '/invoice/:id', params: { id: 'xyz' } })modals.close({ at: '/', replace: false })
Examples
License
MIT
No vulnerabilities found.
No security vulnerabilities found.