Napolean Paced Mischeviously

    remix-router-turbo
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.0 • Public • Published

    Remix Router Turbo npm package build

    Why?

    At work we have a 6 years 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 a lot the minimal JavaScript API surface. 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 is a first attempt to replace turbo-drive with remix based router. It does several things:

    • intercepts click and submit events to navigate with client router
    • use morphdom to render pages
    • bypass remix routing if data-turbo="false" is set on links and forms
    • provide stimulus controller to register fetchers (data-controller="fetcher")
    • provide stimulus controller to submit forms on changes (data-controller="submit-on-change")
    • provide stimulus controller to revalidate pages (data-controller="revalidate")
    • in fetcher responses, accepts turbo-stream format and bypass revalidation in those cases
    • if data-turbo-disabled is used on <input> or <button> it will atomatically disable them during submission
    • if data-turbo-method is user on <a> it will submit the link instead of navigating
    • if data-turbo-confirm is user on <a> or <form> it will ask for confirmation before submitting/navigating

    Demo

    remix rails demo

    Install

    With yarn

    yarn add remix-router-turbo

    With npm

    npm install remix-router-turbo

    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: remix. In order for redirects to work properly you must respond with a 204 and a x-remix-redirect: <url> header instead of the usual 30* and a location: <url> header.

    Most of the library is implemented as a collection of stimulus controllers. The main one is data-controller="turbo". You should put it on the <body> element and there should be only one on a single page.

    import { createBrowserTurboRouter, RouteObject } from 'remix-router-turbo';
    
    const routes: RouteObject[] = [
      {
        path: '/',
        id: 'root',
        handle: { method: 'get' }
      },
      {
        path: '/login',
        id: 'login',
        handle: { method: ['get', 'post'] }
      }
    ];
    
    const router = createBrowserTurboRouter({ routes, debug: true });
    <html>
      <body data-controller="turbo">
        <form>
          (...)
        </form>
    
        <div data-turbo="false">
          <form>
            (...)
          </form>
        </div>
    
        <ul>
          <li id="item_1">
            <form data-controller="fetcher">
              (...)
            </form>
          </li>
          <li id="item_2">
            <form data-controller="fetcher">
              (...)
            </form>
          </li>
        </ul>
      </body>
    </html>

    Install

    npm i remix-router-turbo

    DownloadsWeekly Downloads

    2

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    92.4 kB

    Total Files

    25

    Last publish

    Collaborators

    • tchak