Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paranatural/turntable
Framework-agnostic flexible SPA router
https://github.com/paranatural/turntable
paranatural react router routing spa turntable vanilla-javascript
Last synced: about 2 months ago
JSON representation
Framework-agnostic flexible SPA router
- Host: GitHub
- URL: https://github.com/paranatural/turntable
- Owner: paranatural
- License: mit
- Created: 2020-02-03T15:26:22.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-11-05T03:13:44.000Z (about 1 year ago)
- Last Synced: 2024-11-09T08:04:45.826Z (2 months ago)
- Topics: paranatural, react, router, routing, spa, turntable, vanilla-javascript
- Language: TypeScript
- Homepage:
- Size: 884 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- Contributing: contributing.md
- License: license.md
- Code of conduct: code_of_conduct.md
- Roadmap: roadmap.md
Awesome Lists containing this project
README
# ⬡ Turntable
Framework-agnostic flexible SPA router
# ⬡ Motivation/Promise
There are plenty of client-side routing libraries, but all of them aren't really lightweight and do not support middlewares or guards out-of-the-box
# ⬡ Features
- Expandable with [middlewares](./docs/middleware.md)
- Written in [TypeScript](https://github.com/microsoft/TypeScript)
- Batteries included (in a separate [package](./packages/stdlib), but it's officially supported)
- Really lightweight [(<3kb min+gzip)](https://bundlephobia.com/result?p=@paranatural/turntable)
# ⬡ Installation
```shell
npm i @paranatural/turntable @paranatural/turntable-stdlib @paranatural/turntable-react
```
```shell
yarn add @paranatural/turntable @paranatural/turntable-stdlib @paranatural/turntable-react
```
```shell
pnpm add @paranatural/turntable @paranatural/turntable-stdlib @paranatural/turntable-react
```
# ⬡ Usage/Utilizing/Enjoyment
```typescript jsx
import React from 'react'
import ReactDom from 'react-dom'
import { Ghostship } from '@ghostship/core'
import { GhostshipComponent } from '@ghostship/react'
import { HomePage, PostPage, NotFoundPage } from './components/pages'
const ghostship = new Ghostship(
// routes tree
[{
path: '/',
component: HomePage,
}, {
path: '/post/:slug',
components: PostPage,
}],
// options
{
trailingSlash: true,
notFound: NotFoundPage
}
)
ReactDom.render(
,
document.getElementById('react')
)
```
# ⬡ API
# ⬡ Contribution
Feel free to open an issue/discussion with request/report, but ensure you read/follow [Contributor Covenant Code of Conduct](docs/5-development/code-of-conduct.md)
# ⬡ Development/History
[Changelog/Past/Versions](./docs/changelog.md)
[Roadmap/Future](roadmap.md)
# ⬡ Legal info
Project licensed under [MIT License](license.md). [What it means](https://choosealicense.com/licenses/mit/)
# ⬡ Brand/Look
Project name, logo, visual design and writing style heavily inspired by [Control game](https://www.remedygames.com/games/control/) (made by [Remedy Entertainment](https://www.remedygames.com/))