https://github.com/springtype-org/st-route
~400 byte nano library for client-side DOM routing
https://github.com/springtype-org/st-route
Last synced: about 1 year ago
JSON representation
~400 byte nano library for client-side DOM routing
- Host: GitHub
- URL: https://github.com/springtype-org/st-route
- Owner: springtype-org
- License: mit
- Created: 2021-02-01T23:34:11.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-02-04T01:02:23.000Z (about 5 years ago)
- Last Synced: 2025-01-05T06:29:48.997Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 223 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
SpringType: st-route
> Nano library for client-side DOM routing
[](https://gitter.im/springtype-official/springtype?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
Purpose
This is an exremely tiny, yet powerful library for HTML5 history API based DOM routing. `st-route` makes client-side page navigation dead simple.
Features
- ✅ Abstracts the HTML5 history API
- ✅ Tiny: `374 bytes` (best, brotli) - `535 bytes` (worst, umd, gz)
- ✅ Zero dependencies
- ✅ First class TypeScript support
- ✅ 100% Unit Test coverage
- ✅ TestCafé smoke tests
How to
This is how using `st-route` looks like:
```tsx
import { tsx, render, Ref } from 'springtype';
import { $ } from 'st-query';
import { route, RouteRequest } from 'st-route';
const nav = route();
const HomePage = () => (
);
const BlogPage = () => BlogPage;
const BlogArticlePage = ({ request }: { request: RouteRequest }) => (
Blog / show article:
{request.params.slug}
);
const RouteList = () => {
const containerRef: Ref = {};
nav.get('/', () => {
$(containerRef.current).html();
});
nav.get('/blog', () => {
$(containerRef.current).html();
});
nav.get('/blog/article/:slug', (request: RouteRequest) => {
$(containerRef.current).html();
});
return
Loading...;
};
render();
// initial match after initial render
nav.match();
```
API
The following contract is made between the webapp and `st-router`:
```typescript
export interface API {
get(path: string, handler: RouteHandler): API;
match(path?: string): RouteRequest | false;
getRouteRegistrations(): Array;
tokenizePath(path: string): TokenizedPath;
}
// calling route() returns the API object like:
// const nav = route();
// nav.get('/foo')
export route = () => API;
```
Troubleshooting
⚠️ Please make sure that you have a http server in place that can handle `pushState` well (re-routes all `HTTP GET` requests back to the `index.html` file serving the JavaScript). Please read about "SPA / Single Page Application routing" if you have any further questions about this.
Backers
Thank you so much for supporting us financially! 🙏🏻😎🥳👍
Maintainers
`st-route` is brought to you by:
Original implementation of the routing logic is based on ideas of LeviRoutes developed by Paul Kinlan about 10 years ago -- however, this is a TypeScript-based clean room re-implementation which improves the original code in a few aspects.
Contributing
Please help out to make this project even better and see your name added to the list of our
[CONTRIBUTORS.md](./CONTRIBUTORS.md) :tada:
