generouted

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-dom

Setup

// 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: https://github.com/oedotme/generouted/compare/v1.6.14...v1.7.0

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.tsx

Optional 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?/thing
• src/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, /about

However other integration might only support optional dynamic segments:

src/pages/-[lang]/about.tsx  →  /:lang?/about     /en/about, /fr/about, /about

Commits

• 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: https://github.com/oedotme/generouted/compare/v1.6.13...v1.6.14

Commits

• feat: replace index by / with exact index match only 1af5bf9 by @oedotme closes #23, #24

Changelog: https://github.com/oedotme/generouted/compare/v1.6.12...v1.6.13

Commits

• chore: update packages 1160319 by @oedotme
• fix: expose react-router route error as default error 0d375d8 by @oedotme closes #35

Changelog: https://github.com/oedotme/generouted/compare/v1.6.11...v1.6.12

Commits

• docs: add getting started guide for tanstack-react-router c06b323 by @oedotme

Changelog: https://github.com/oedotme/generouted/compare/v1.6.10...v1.6.11

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@beta

Setup

// 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: https://github.com/oedotme/generouted/compare/v1.6.9...v1.6.10

Changes

• generouted/core can now used for integration customization
• Importing react-location integration only via generouted/react-location, using it via generouted is now removed

Commits

• feat: export generouted core for custom integration use 73d1158
• feat!: import react-location via generouted/react-location only 034923d

https://github.com/oedotme/generouted/compare/v1.6.3...v1.6.4

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:

• Pending is renamed to PendingElement
• Failure is renamed to ErrorElement.

Commits

• feat: rename react-location pending and error elements 43c9ea7
• feat: add null fallback for integrations elements/loaders/actions b397776
• feat: exclude index prop from pages/index.tsx 878d33e

https://github.com/oedotme/generouted/compare/v1.6.2...v1.6.3

New

• feat: support both src/pages and pages for routes definition 45b84c8

Commits

• feat: support both src/pages and pages for routes definition 45b84c8

https://github.com/oedotme/generouted/compare/v1.6.1...v1.6.2

New

• Export routes array besides routes component a705b0f, closes #27
• Support react-router route-based error element 5856340, #18

Commits

• chore: include release in commitlint type enum fdb0b31
• feat: export routes array besides routes component a705b0f
• feat: support react-router route-based error element (#18) 5856340
• chore: update package keywords 88a9290
• chore: prefix release commits 943519c

https://github.com/oedotme/generouted/compare/v1.6.0...v1.6.1

New

• Add React Router support (5f99521, 201a421), closes #11
• Add Solid Router support (b9ec72b), closes #12
• Support nested layouts with _layout (3e0ae76), closes #13
• Support non-pages co-location inside pages directory (87ed454), closes #9

Deprecated

Usage with React Location should be now imported/accessed via generouted/react-location instead of only generouted

Commits

• chore: skip np tests 1c5809f
• chore: re-export react-location as the root entry w/ deprecation ad70ee6
• chore: disable typescript declaration emit 3663760
• chore: setup np for releases 0bdbec8
• chore: setup husky with lint-staged and commitlint 147c7d6
• chore: update packages 1cc4bfb
• docs: updates for the newly added integrations 6e5b277
• chore: update package description and keywords 95b9be8
• docs: add solid-router basic example ec47881
• docs: add react-router basic and nested layouts examples 43ddea4
• docs: update react-location examples ff28735
• feat: add solid-router integration b9ec72b
• feat: support ignored files/directories at pages/ 87ed454
• chore: rename index pattern to slash 9c04331
• chore: rename arguments 5ab638b
• feat: support nested _layout 3e0ae76
• feat: move index to react-router route builder dfe26fc
• chore: rename utils to core 0fa3991
• chore: update base route pattern name 2dd4bd9
• chore: rename catch all pattern to splat cdda0ea
• feat: handle react-router index routes 201a421
• feat: add react-router integration 5f99521
• chore: update react-location entry to support other integrations 9512c66
• chore: move current examples into react-location b3e7e80
• refactor: add generate regular routes utility 3e2e718
• refactor: add generate preserved routes utility 017fb73
• feat: exclude preserved routes from regular routes glob a672669
• chore: add path patterns utility 6a1be5d
• chore: update packages 0cb7f7d
• chore: update logo file path 4ddde8d
• docs: add modal routes example ab24f0e
• chore: update packages c6114ad
• chore(examples): update packages 0f4dd6a

https://github.com/oedotme/generouted/compare/v1.5.1...v1.6.0

• Support digits (thanks @lokhmakov!), uppercase letters and underscores in src/pages/** file names (@oedotme)
• Support .jsx extension for _app|404 and src/pages/** files (@oedotme)