@coldwired/router
Advanced tools
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.
This project is an almost "drop in" replacement of turbo-drive with remix based router. It does several things:
click and submit events to navigate with client routerdata-turbo="false" is set on links and formsdata-turbo-fetcher)data-turbo-submit-on-change)data-turbo-revalidate)data-turbo-method is used on <a> it will submit the link instead of navigatingdata-turbo-disabled is used on <input>, <select> or <button> it will atomatically disable them during submissiondata-turbo-confirm is used on <a> or <form> it will ask for confirmation before submitting/navigatingclass attribute changes between renders unless data-turbo-force directive is usedaria- and related attributes changes between renders unless data-turbo-force directive is usedvalue on touched <input> and <select> between renders unless data-turbo-force directive is usedIn 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.
import { Application, type RouteObject } from '@coldwired/router';
const routes: RouteObject[] = [
{
path: '/',
id: 'root',
handle: { method: 'get' }
},
{
path: '/login',
id: 'login',
handle: { method: ['get', 'post'] }
}
];
const application = await Application.start({ routes });
<html>
<body data-turbo>
<form>
(...)
</form>
<div data-turbo="false">
<form>
(...)
</form>
</div>
<ul>
<li id="item_1">
<form data-turbo-fetcher>
(...)
</form>
</li>
<li id="item_2">
<form data-turbo-fetcher>
(...)
</form>
</li>
</ul>
</body>
</html>
FAQs
A router based on @remix-run/router and @coldwired/actions
The npm package @coldwired/router receives a total of 1 weekly downloads. As such, @coldwired/router popularity was classified as not popular.
We found that @coldwired/router demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.