https://github.com/moigagoo/kraut
Router for Karax frontend framework.
https://github.com/moigagoo/kraut
frontend karax nim router spa
Last synced: 25 days ago
JSON representation
Router for Karax frontend framework.
- Host: GitHub
- URL: https://github.com/moigagoo/kraut
- Owner: moigagoo
- License: mit
- Created: 2023-02-23T20:45:46.000Z (about 2 years ago)
- Default Branch: develop
- Last Pushed: 2024-07-21T18:48:51.000Z (9 months ago)
- Last Synced: 2025-03-29T09:43:23.625Z (26 days ago)
- Topics: frontend, karax, nim, router, spa
- Language: Nim
- Homepage:
- Size: 129 KB
- Stars: 31
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# Kraut
**Kraut** is a router for [Karax](https://github.com/karaxnim/karax) frontend framework.
Kraut is best served with [Sauer](https://github.com/moigagoo/sauer) 👨🍳
## Installation
Install Kraut with nimble:
```
$ nimble install kraut
```
Add it to your .nimble file:
```nim
require "kraut >= 1.0.0"
```
Kraut doesn't have any dependencies outside stdlib except for Karax (duh).
## Usage
First, define your routes as an array or sequence of pattern-renderer pairs.
**Pattern** is a string that Kraut uses to match against the hash part of the URI.
**Renderer** is proc that takes a single argument of type `Context` and returns a `VNode`.
**Context** is an object that holds the URL params extracted from the hash part in its `urlParams` field and the query params in `qryParams`.
Nim offers nice syntax to define Kraut routes:
```nim
# app.nim
const routes = {
"/": index.render,
"/users/": users.render,
"/users/{userId}/": user.render
}
```
In this example, `"/users/{userId}"` is a pattern and `user.render` us a renderer.
You can split your routes into groups for maintainability and even store the groups in different modules:
```nim
const
indexRoute = @{"/": index.render}
userRoutes = @{"/users/": users.render, "/users/{userId}/": user.render}
routes = indexRoute & userRoutes
```
Next, define your renderers:
```nim
# user.nim
import kraut
proc render*(context: Context): VNode =
buildHtml(tdiv):
text "User id: " & context.urlParams["userId"]
```
Finally, generate the route renderer proc. It's a proc that accepts a single `RouterData` argument and returns a `VNode`. It can be passed directly to Karax's `setRenderer` proc or used inside another proc:
```nim
# app.nim
import kraut
let renderer = routerRenderer(routes)
proc render(routerData: RouterData): VNode =
buildHtml(tdiv):
h1: text "Header"
renderer(routerData)
setRenderer(render)
```
See the complete example in the `demo` folder.
# Why you should use Kraut
1. Route definition is dead simple.
2. You can split your definitions and store them in separate modules.
3. Renderer proc doesn't have to be anything special, it's just a regular proc you would use in Karax without Kraut, sans the `Context` argument.
4. Kraut is efficient. No heavy regexes or hash maps, just iteration and string comparison that stops with the first match.