Repository files navigation

Use classic Rails to build rich React Redux applications withNO APIs andNO client-side routing.

Superglue makes React and Redux as productive as Hotwire, Turbo and Stimulus.Its inspired by Turbolinks and designed to feel like a natural extension ofRails. Enjoy the benefits of Redux state management and React componentswithout giving up the productivity of Rails form helpers, UJS, tag helpers,flash, cookie auth, and more.

Instead of APIs, Superglue leans on Rails' ability to respond to differentmime typeson the same route. In a Superglue application, if you direct your browser to/dashboard.html, you would see the HTML version of the content, and if youwent to/dashboard.json you would see the JSON version of the exact samecontent down to the footer.

The end result would be something like this:

Superglue leans on Rails. Features like the flash, cookie auth, and URLhelpers continue to be useful. Here's a look at the directory structure of atypical Rails application with Superglue.

app/|-- controllers/|-- views/|   |-- dashboard/|   |   |-- index.jsx # The React page component|   |   |-- index.json.props # The json for the page component|   |   |-- index.html.erb

Powering the JSON responses is PropsTemplate, a diggable JSON templating DSLinspired by JBuilder. With PropsTemplate you can specify a path of the node youwant, and PropsTemplate will walk the tree to it, skipping the execution of nodesthat don't match the keypath.

Superglue comes with batteries that bring all the above concepts together to makebuilding popular SPA features easy, painless, and productive.

A popular ask of SPAs is page-to-page navigation without reloading. This iseasily done with Superglue's own UJS attributes inspired by Turbolinks:

<ahref='/posts'data-sg-visit/>

The above will request for/posts with anaccept ofapplication/json, andwhen the client receives the response, swap out the current component for thecomponent the response asks for, andpushState on history.

Some features rely on updating some parts of the existing page. Imagineimplementing type-ahead search. In traditional applications, you may need a newcontroller, routes, a discussion over versioning, JSON serializer, plenty ofnew JS code, etc.

With Superglue, this can be done with a simpleonChange

import{NavigationContext}from'@thoughtbot/superglue'const{remote}=useContext(NavigationContext)constonChange=(e)=>(remote(`/dashboard?qry=${e.target.value}&props_at=data.header.search`)})

Withprops_at, the above will make a request to/dashboard?qry=haircut,dig your template for thedata.header.search node, return it in the response,and immutably graft it in the exact same path on the redux store before finallyletting React re-render.

For more on what you can do, check out our documentation.

Server-Side Rendering is supported viaHumid.See thedocumentation for server-side rendering.

Documentation is hosted onGitHub pages.

Please seeCONTRIBUTING.md.

Thank you,contributors!

Thanks tojbuilder,scour,turbolinks3,turbograft,turbostreamer