Leviroutes
A basic routes framework for JS that hooks in to HTML5 history
Install / Use
/learn @PaulKinlan/LeviroutesREADME
LeviRoutes
⚠️ DISCLAIMER: This project has not been updated or maintained for a long time. While I might add more features in the future, please do not rely on this project for production use or active development.
A simple lightweight routes framework for hooking in to HTML5 history. Currently when the system pop's state the route is triggered if matched.
LeviRoutes can also intercept POST requests via forms, the framework will intercept all submits, and naturally let through requests that don't match the path, whilst firing your callback if there is a match
Installation
Install via npm:
npm install leviroutes
Or use it directly from a CDN with ES modules:
<script type="module">
import routes from 'https://esm.sh/leviroutes';
const app = new routes();
// ... use the library
</script>
Usage
ES Modules (Recommended)
import routes from 'leviroutes';
const app = new routes();
app.get("/", function(req) {
alert("State popped for /");
});
Classic Script Tag
<script type="module">
import routes from './node_modules/leviroutes/src/routes.js';
const app = new routes();
// ...
</script>
Features
Basic Routing
const app = new routes();
app.get("/", function(req) {
alert("State popped for /");
});
Named Parameters
It also has named parameters for route syntax.
app.get("/:category", function(req) {
alert("In " + req.params.category);
});
app.get("/:category.:format", function(req) {
alert("format: " + req.params.format);
});
POST Request Handling
LeviRoutes can also intercept POST requests via forms, intercept all submits, and naturally let through requests that don't match the path, whilst firing your callback if there is a match.
app.post("/:category", function(req) {
alert("posting form: In Category " + req.params.category);
});
Middleware Support
LeviRoutes supports middleware functions that execute before route handlers. Middleware functions receive the request object and a next callback.
app.use(function(req, next) {
console.log("Request to: " + req.url);
next(); // Call next to continue to the next middleware or route handler
});
app.use(function(req, next) {
req.timestamp = Date.now();
next();
});
app.get("/", function(req) {
alert("Request timestamp: " + req.timestamp);
});
Middleware functions are executed in the order they are registered, before any route handler is called.
Examples
Check out the examples directory for complete working examples demonstrating:
- GET Routes: Basic routing with HTML5 History API
- POST Routes: Form interception and handling
- Middleware: Multiple middleware functions with request processing
- Named Parameters: Dynamic route parameters (e.g.,
/user/:id) - Complete SPA: A full single-page application showcasing all features
To run the examples, start a local web server in the project root and navigate to the examples directory.
Development
Running Tests
npm test
Building
The build process creates a minified version in dist/routes.min.js:
npm run build
License
Licensed under the Apache License, Version 2.0. See the LICENCE file for details.
Related Skills
node-connect
353.1kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
111.6kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
353.1kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
353.1kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
