Releases: oedotme/generouted
Releases · oedotme/generouted
v1.7.0
Changes
Initial support for react-router-dom via code generation for type-safety features, inspired by @tanstack/react-router.
Getting started with React Router with Type-safe component/hooks
Installation
pnpm add @generouted/react-router react-router-domSetup
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import generouted from '@generouted/react-router'
export default defineConfig({ plugins: [react(), generouted()] })Usage
// src/main.tsx
import { createRoot } from 'react-dom/client'
import { Routes } from './routes.gen'
const container = document.getElementById('app')!
createRoot(container).render(<Routes />)Adding pages
Add the home page by creating a new file src/pages/index.tsx → /, then export a default component:
// src/pages/index.tsx
export default function Home() {
return <h1>Home</h1>
}Type-safe navigation
Autocompletion for Link, useNavigate and useParams exported from src/route.gen.tsx
// src/pages/index.tsx
import { Link, useNavigate, useParams } from '../routes.gen'
export default function Home() {
const navigate = useNavigate()
// typeof params -> { id: string; pid?: string }
const params = useParams('/posts/:id/:pid?')
// typeof params to be passed -> { id: string; pid?: string }
const handler = () => navigate('/posts/:id/:pid?', { params: { id: '1', pid: '0' } })
return (
<div>
{/** ✅ Passes */}
<Link to="/" />
<Link to="/posts/:id" params={{ id: '1' }} />
<Link to="/posts/:id/:pid?" params={{ id: '1' }} />
<Link to="/posts/:id/:pid?" params={{ id: '1', pid: 0 }} />
{/** 🔴 Error: not defined route */}
<Link to="/not-defined-route" />
{/** 🔴 Error: missing required params */}
<Link to="/posts/:id" />
<h1>Home</h1>
</div>
)
}Commits
- docs: update react-router plugin readme usage 7baa58c by @oedotme
- chore: remove unused _module prop 47dddd8 by @oedotme
- chore: update packages 3c9453d by @oedotme
- feat: initial support for react router plugin fb6496a by @oedotme
- feat: add optional id param to build route function a2eb2e7 by @oedotme
- feat: update plugins/core optional segment pattern c20eaeb by @oedotme
Changelog: v1.6.14...v1.7.0
Contributors
oedotme
Assets 2
v1.6.14
Changes
New convention for pathless layout groups and optional route segments #36
Pathless layout groups
By wrapping a directory name with (): src/pages/(app)/...
src/pages/
├── (app)/
│ ├── _layout.tsx
│ ├── dashboard.tsx → /dashboard wrapped by (app)/_layout.tsx
│ └── item.tsx → /item wrapped by (app)/_layout.tsx
├── (marketing)/
│ ├── _layout.tsx
│ ├── about.tsx → /about wrapped by (marketing)/_layout.tsx
│ └── testimonials.tsx → /testimonials wrapped by (marketing)/_layout.tsx
└── admin/
├── _layout.tsx
└── index.tsx → /admin wrapped by admin/_layout.tsxOptional route segments
By prefixing a minus sign - to a segment; meaning this segment can be subtracted/removed from route url:
src/pages/-some/thing.tsx→/some?/thingsrc/pages/-[param]/another.tsx→/:param?/another
React Router v6.5.0+ supports regular and dynamic optional route segments:
src/pages/-en/about.tsx → /en?/about /en/about and /about
src/pages/-[lang]/about.tsx → /:lang?/about /en/about, /fr/about, /aboutHowever other integration might only support optional dynamic segments:
src/pages/-[lang]/about.tsx → /:lang?/about /en/about, /fr/about, /aboutCommits
- chore: update examples 066d0fc by @oedotme
- feat: move template module declaration to the bottom 26a343c by @oedotme
- feat!: rename PendingComponent → Pending, ErrorComponent → Catch 5e9b51d by @oedotme
- feat: support pathless layout groups → (name)/ b80a5fb by @oedotme closes #36
- feat: support optional routes → -en.tsx or -[lang].tsx df66142 by @oedotme closes #36
- fix: splat pattern multiple matching 6df1384 by @oedotme
- feat: allow dynamic routes in pages root 142f732 by @oedotme
Changelog: v1.6.13...v1.6.14
Contributors
oedotme
Assets 2
v1.6.13
v1.6.12
v1.6.11
v1.6.10
Changes
Initial support for @tanstack/react-router via code generation
Getting started with TanStack React Router
Installation
pnpm add @generouted/tanstack-react-router @tanstack/react-router@betaSetup
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import generouted from '@generouted/tanstack-react-router'
export default defineConfig({ plugins: [react(), generouted()] })Usage
// src/main.tsx
import { createRoot } from 'react-dom/client'
import { Routes } from './routes.gen'
const container = document.getElementById('app')!
createRoot(container).render(<Routes />)Commits
- chore: move plugins/core to shared/core 0fb9a6e by @oedotme
- feat(plugins): update generation + support pending, error, loader, action a2c4e52 by @oedotme closes #34
- chore: prettier no longer needed as tsup external bd5c8eb by @oedotme
- feat: add plugins core for config generation 9f2fa68 by @oedotme
- chore: remove release-it dependency from workspaces bc6f41e by @oedotme
- chore: include committer name in changelog for contributors 23b9c23 by @oedotme
- chore: add newline before tags compare link a44d2c2 by @oedotme
Changelog: v1.6.9...v1.6.10
Contributors
oedotme
Assets 2
v1.6.4
Changes
generouted/corecan now used for integration customization- Importing
react-locationintegration only viagenerouted/react-location, using it viageneroutedis now removed
Commits
v1.6.3
Changes
Align react-location pending and error elements naming with the route object properties pendingElement and errorElement also to match a recent update to the react-router integration:
Pendingis renamed toPendingElementFailureis renamed toErrorElement.
Commits
generouted@1.6.2
v1.6.1
New
- Export routes array besides routes component a705b0f, closes #27
- Support react-router route-based error element 5856340, #18