Superglue 2.0 beta: React ❤️ Rails even more

We’re a few months shy from a 2.0 release of Superglue. Its been exciting designing what will be the BEST approach to developing Rails and React applications.

For folks who are new, Superglue is a Rails first approach to building Rails and React applications that we released a year ago. There are no APIs. No client-side routing. And you can use the concepts you already know: turbo streams, controllers, server-side routing, views, form helpers, and more. You get rich, interactive React UIs driven by The Rails Way. Check out our previous alpha announcement or our opensummit talk

Today we’re announcing our 2.0 beta, and there’s a lot to like:

Easier to get started

We’ve now made it really easy to get started. Just use createApp to build a Superglue app. Our rails generators rails g superglue:install will take care of this for you.

const { Provider, Outlet, ujs } = createApp({
  // The base url prefixed to all calls made by `visit` and `remote`.
  baseUrl: location.origin,
  // The global var SUPERGLUE_INITIAL_PAGE_STATE is set by your erb
  // template, e.g., index.html.erb
  initialPage: window.SUPERGLUE_INITIAL_PAGE_STATE,
  // The initial path of the page, e.g., /foobar
  path: location.pathname + location.search + location.hash,
  // Callback used to setup visit and remote
  buildVisitAndRemote,
  // Mapping between the page identifier to page component
  mapping: pageIdentifierToPageComponent,
});

const root = createRoot(appEl);
root.render(
  <div onClick={ujs.onClick} onSubmit={ujs.onSubmit}>
    <Provider>
      <MyLayout>
        <Outlet />
      </MyLayout>
    </Provider>
  </div>,
);

Support for esbuild, bun, webpack, and rollup

The install generator now supports all the major JavaScript bundlers that jsbundling-rails supports. When you run rails g superglue:install, it will detect your existing bundler configuration or prompt you to choose one. You can also skip the prompt entirely with the --bundler flag:

rails g superglue:install --bundler=bun

Each bundler gets its own tailored configuration — including glob imports for bun and rollup, so your page_to_page_mapping stays in sync with your views automatically.

Finalizing Super Turbo Streams

We’ve settled on the right amount of stream actions based on our experience working on production applications: append, prepend, and update. These three cover the vast majority of real-time UI patterns — adding items to lists, updating existing records — without the complexity of a larger action vocabulary.

The API mirrors what Rails developers already know from Turbo Streams:

@message.broadcast_append_to "messages"
@message.broadcast_prepend_to "notifications"
@message.broadcast_update_to "messages"

And on the client side, subscribing is a one-liner with useStreamSource:

const { connected } = useStreamSource(streamFromMessages)

You can also now use ActionCable or AnyCable. Just pass a cable consumer to createApp:

+ import { createConsumer } from '@rails/actioncable'

  const { Provider, Outlet, ujs } = createApp({
    baseUrl: location.origin,
    initialPage: window.SUPERGLUE_INITIAL_PAGE_STATE,
    path: location.pathname + location.search + location.hash,
    buildVisitAndRemote,
    mapping: pageIdentifierToPageComponent,
+   cable: createConsumer()
  });

Or if you’re using AnyCable, just swap the import:

- import { createConsumer } from '@rails/actioncable'
+ import { createConsumer } from '@anycable/web'

  const { Provider, Outlet, ujs } = createApp({
    baseUrl: location.origin,
    initialPage: window.SUPERGLUE_INITIAL_PAGE_STATE,
    path: location.pathname + location.search + location.hash,
    buildVisitAndRemote,
    mapping: pageIdentifierToPageComponent,
    cable: createConsumer()
  });

Give it a try!

gem install superglue --pre

And much more

We’re just getting started. Stay tuned for upcoming posts diving deeper into fragments, types, stream responses and more.