Gathering detailed insights and metrics for @coldwired/router
Gathering detailed insights and metrics for @coldwired/router
Installations
npm install @coldwired/routerDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Min. Node Version
>=16
Node Version
18.16.0
NPM Version
9.5.1
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
0.11.4
Package Id
@coldwired/router@0.11.4
Unpacked Size
76.19 kB
Size
16.70 kB
File Count
22
NPM Version
9.5.1
Node Version
18.16.0
Published on
Oct 26, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
@coldwired/router 
Why?
At work we have a six-year-old reasonably big rails app. It powers quite a successful service while being run by a small team. It's an old school, server rendered rails app. The team is not interested at all in migrating to a JavaScript framework. But we do have some pieces of the app that requires dynamic components. Recently we introduced hotwired/turbo into our code base and it is quite a success. The team likes the minimal JavaScript API surface a lot. But turbo has problems. Those problems are very similar to the ones solved by @remix-run/router. The main one is coordinating multiple submitting forms on one page without full reloads.
How?
This project is an almost "drop in" replacement of turbo-drive with remix based router. It does several things:
- intercepts
clickandsubmitevents to navigate with client router - use morphdom to render pages
- bypass in browser routing if
data-turbo="false"is set on links and forms - provide a directive to register fetchers (
data-turbo-fetcher) - provide a directive to submit forms on changes (
data-turbo-submit-on-change) - provide a directive to revalidate pages (
data-turbo-revalidate) - in fetcher responses, accepts turbo-stream format and bypass revalidation in those cases
- if
data-turbo-methodis used on<a>it will submit the link instead of navigating - if
data-turbo-disabledis used on<input>,<select>or<button>it will atomatically disable them during submission - if
data-turbo-confirmis used on<a>or<form>it will ask for confirmation before submitting/navigating - preserve
classattribute changes between renders unlessdata-turbo-forcedirective is used - preserve
aria-and related attributes changes between renders unlessdata-turbo-forcedirective is used - preserve
valueon touched<input>and<select>between renders unlessdata-turbo-forcedirective is used - extends turbo-stream with ability to delay actions
- extends turbo-stream with ability to pin actions between renders
Demo
Usage
In order to use this router you need to generate (or write) a JSON array of all the routes exposed by your server. You must add method to route handles in order for router to register loaders and actions. No nested routing for now – we might explore the possibility later but it will require a much more involved server. All the requests to your server will have a header x-requested-with: coldwire. In order for redirects to work properly you must respond with a 204 and a x-coldwire-redirect: <url> header instead of the usual 30* and a location: <url> header.
1import { Application, type RouteObject } from '@coldwired/router'; 2 3const routes: RouteObject[] = [ 4 { 5 path: '/', 6 id: 'root', 7 handle: { method: 'get' } 8 }, 9 { 10 path: '/login', 11 id: 'login', 12 handle: { method: ['get', 'post'] } 13 } 14]; 15 16const application = await Application.start({ routes }); 17
1<html> 2 <body data-turbo> 3 <form> 4 (...) 5 </form> 6 7 <div data-turbo="false"> 8 <form> 9 (...) 10 </form> 11 </div> 12 13 <ul> 14 <li id="item_1"> 15 <form data-turbo-fetcher> 16 (...) 17 </form> 18 </li> 19 <li id="item_2"> 20 <form data-turbo-fetcher> 21 (...) 22 </form> 23 </li> 24 </ul> 25 </body> 26</html>
No vulnerabilities found.
No security vulnerabilities found.