
SIROU(Simple Route)
codeSirou Define routes once. Navigate everywhere. Sirou is a universal type safe routing engine for the modern JS/TS ecosystem. Write your route schema once, get compile time safety, async route guards, data loaders, deep link generation, and a built in DevTools panel all working identically across React, Next.js, Svelte, and React Native. Why Sirou? Problem Sirou Solution Typos in route names crash at runtime TypeScript catches them at compile time Route params are untyped Full param type inference & validation per route Different navigation APIs on every platform One call works everywhere No way to protect routes without boilerplate Async composable guards register once, run everywhere Data fetching is totally separate from routing Integrated Data Loaders pre fetch before render No visibility into navigation state Built in DevTools panel with history, params, and meta Packages Package Version Description Core engine, Radix Trie matcher, type system, guards React adapter, hooks, DevTools, Data Loaders Next.js App Router + Middleware adapter SvelteKit adapter with reactive stores React Navigation v6+ integration Installation Quick Start 1 Define your routes /api/products/${params.productId} 2 Set up the provider 3 Navigate with full type safety Route Guards Guards are async functions that run before navigation. They can allow, block, or redirect. Guards are attached to routes by name and registered on the provider: Guard on Initial Load When the app first loads, Sirou checks guards on the initial route too not just on navigation. This prevents users from deep linking directly to protected pages. Next.js Middleware Guard For server side protection (SSR / RSC), use : Data Loaders Attach a to any route. The data is pre fetched before the route renders and accessible via . /api/products/${params.productId} Features at a Glance Feature API Type safe navigation Type safe URL builder Route param validation in config Route guards + Initial route protection called automatically on mount Data loaders in config Route history Wildcard / 404 routes Deep link generation (React Native) Analytics tracking Auto document title Breadcrumb generation DevTools panel Schema validation React Native Deep Links Sirou automatically generates a React Navigation linking config from your route schema: DevTools Add anywhere in your React app. A floating button appears in the bottom right corner. Click it to open a panel showing the current route, navigation history, params, and metadata in real time. Schema Validation Validate your route config at startup to catch mistakes early: Catches: duplicate paths, params defined but missing from path, and path params without a matching config. Troubleshooting Guards not firing? Always navigate via or . Sirou cannot intercept native clicks (except in Svelte via ). Make sure guards are registered before the first render (pass them to the provider's prop). Initial route not guarded? is called automatically by the React / React Native providers. For Svelte / custom setups, call manually after attaching guards. Redirect loop in Svelte? Make sure you're using it uses the flag to prevent from re running after Sirou calls . Documentation Full docs are available at sirou.vercel.app and in the folder of this repository. Contributing Contributions are welcome! Please read CONTRIBUTING.md and open a pull request. Community Website: sirou.vercel.app Contact: elnatansamuel25@gmail.com Issues: GitHub Issues License MIT © Sirou Contributors
