tighten/ziggy
Ziggy
Ziggy is a frontend routing bridge that exports server route definitions to JavaScript or JSON for use in browser-based applications. It acts as a named route resolver, synchronizing server-defined routes with the client to generate full URLs from named routes without hardcoding paths.
The project includes a TypeScript route generator that creates type definitions for backend routes, providing static type checking and autocompletion. It also provides dedicated integration hooks and plugins for React and Vue to make routing capabilities available within component-based frameworks.
Beyond URL generation, the tool covers frontend route inspection to identify active routes and extract parameters from the URL. It handles model binding resolution to map objects to route parameters and supports Content Security Policy configurations through nonces or JSON output.
Route definitions can be limited using inclusion or exclusion lists to reduce the client-side payload.
Features
- Server-to-Client Route Synchronization - Synchronizes server-defined routes with the client to generate full URLs without hardcoding paths in the browser.
- URL Generators - Programmatically constructs full application URLs using server-defined named routes and parameters.
- Frameworks and Integration - Integrates server-side routing capabilities into React and Vue through specialized hooks and plugins.
- Vue Integrations - Offers dedicated Vue plugins to make routing available across components via provide and inject.
- Type Definition Generators - Automatically generates TypeScript type definitions for backend route names and parameters to enable autocompletion.
- Route Type Generators - Generates type definitions for backend routes to provide static type checking and autocompletion in the frontend.
- Framework-Specific Integrations - Provides dedicated integration layers to inject routing capabilities into React and Vue components.
- Backend-Frontend Bridges - Acts as a bridge that exports server route definitions to JavaScript or JSON for use in browser applications.
- React Hooks - Provides a dedicated React hook to access routing capabilities within functional components.
- Route Definition Exporting - Converts backend routing configurations into JSON or JavaScript files for use by frontend frameworks.
- Route Manifest Generators - Generates a static JavaScript or JSON manifest of server-defined routes for client-side consumption.
- Route Definition Strategies - Exports server-side route definitions into formats usable by frontend frameworks to synchronize routing logic.
- Route Naming Systems - Resolves predefined backend route names into full URLs on the client side to avoid hardcoding paths.
- Server Route Synchronization - Synchronizes server-defined route definitions with client-side scripts to ensure consistent URL generation.
- Manifest-Based Route Matching - Matches the browser's current URL against an exported route list to identify the active named route.
- Route Name Validations - Uses static type definitions and branded types to ensure that only valid route names are passed to routing functions.
- Query Parameter Binding - Maps JavaScript objects to URL parameters using registered binding keys or fallback identifiers.
- Route Validation - Ensures that route names and parameters are valid during development using static type checking.
- Route Parameter Extraction - Retrieves current route parameters and query string values from the URL as strings.
- Route Model Bindings - Maps objects to route parameters by resolving identifiers through registered binding keys.
- Route Inspection Utilities - Provides utilities to identify the currently active route and extract parameters from the URL in the browser.
