Introducing Live Elements: Rails TurboStream applications. Without WebSockets or long polling. Or you needing to write even a single line of JavaScript code.
@samruby This looks a lot like what we've been doing with StimulusReflex and Turbo Boost!
@marcoroth I mention StimulusReflex in my post.... that's more heavyweight and if you go that way you don't need my library. I was not aware of Turbo boost, but that looks like something that can immediately be used with this library. I'll investigate further and likely update the post.
@samruby Yeah fair enough, this wasn't meant as an attack! StimulusReflex is definitely more heavyweight and currently still requires WebSockets.
This is also why we started Turbo Boost, which should be a more lightweight and WS-free alternative with the same concept, but built with the new Turbo-tech in mind.
@samruby But if I may add, StimulusReflex/CableReady are not just built for Webpacker. All asset bundling solutions for both Rails 6 and Rails 7 are supported, including Import maps.
You also don't need to write JavaScript/Stimulus controllers, that's just for the more advanced use-cases if you want to control certain things in the flow or want to use lifecycle-callbacks.
The upcoming CableReady 5.0 release doesn't require web sockets anymore, it also works over HTTP.
@samruby We also experimented with the things you mentioned in your last paragraph, we built a custom `<cable-ready>` element that can execute the operations. But decided to put it into a separate repo as we think it's not the path-forward: https://github.com/cableready/element
That's also why Turbo Power exists, it's meant to port over all the CableReady operations to Turbo Streams so you have the same action diversity as CableReady: https://github.com/marcoroth/turbo_power
@samruby But I agree, it's still rough around the edges and hard to oversee. But I'd love to streamline all of this. Ideally including upstream Turbo/Hotwire.
@marcoroth Still not seeing any import maps in the instructions. To give context to my "lightweight" comment, here is my whole module minified: https://ga.jspm.io/npm:@flydotio/stimulus-live-elements@0.1.0/live_elements_controller.js and here's the full source: https://raw.githubusercontent.com/superfly/stimulus-live-elements/main/live_elements_controller.js
@samruby Yeah, yours is definitely super lightweight and probably also serves a different purpose/use-case.
As for the import maps instructions, which project are you talking about now? I'm happy to add any missing instructions.
@marcoroth Here's what I tried:
bundle add turbo_boost-streams --version 0.0.8
bin/importmap add @turbo-boost/streams@0.0.8
stream << turbo_stream.invoke("console.log", args: ["Hello World!"])
The last line I added here: https://github.com/fly-apps/live-elements-demo/blob/8cafa9fc34d2723a99053783070b118cb89c6a95/app/controllers/search_controller.rb#L22
I'd like to see a world where "no JS, no yarn, no node_modules" is possible. I don't see that as a different purpose/use-case, just something stimulusReflex and family don't yet support.
@samruby @marcoroth Happy to help here. Your line with the Turbo Boost invoke stream looks correct.
I'm unclear on what problems you hit outside of the general confusion around the various related libs (which we're currently working to clarify).
Let me know how I can help out.
@hopsoft @marcoroth what I was missing is the import statement, now added: https://fly.io/ruby-dispatch/introducing-live-elements/#update-turbo-boost what I'm missing is similar instructions for cable-ready/elements
@samruby @marcoroth Ah ok. Sounds like you're mostly sorted.
Our core team will be working toward a more cohesive narrative and brand around all our libraries after we ship final releases of CableReady 5.0 and StimulusReflex 3.5
Happy to help clarify things if you bump into any confusion or issues in the mean time.
@marcoroth Wasn't taken as an attack. But can Turbo Boost work with import maps? I tried to "pin" it and I'm getting "Error: <turbo-stream action="invoke" target="DOM">: unknown action"
@samruby It should, but you might also need to pin it's sub-dependencies. The `invoke` action is provided by the `@turbo-boost/streams` package.
@marcoroth Here's the result of the pin which did not work for me:
pin "@turbo-boost/streams", to: "https://ga.jspm.io/npm:@turbo-boost/streams@0.0.8/app/assets/builds/@turbo-boost/streams.js"
@samruby Just to be clear, you've got both `@turbo-boost/commands` and `@turbo-boost/streams` pinned?
@marcoroth Even with adding
bin/importmap pin @turbo-boost/commands@0.0.8
I'm still seeing:
Error: <turbo-stream action="invoke" target="DOM">: unknown action
@samruby If you are just using `@turbo-boost/streams` then you wouldn't need the `commands` package pinned.
Do you have the `import '@turbo-boost/streams'` in your `application.js`?
@marcoroth Hello World!
I'm now going to update my post.
@samruby I'm glad you figured it out!
And I'm going to prepare a PR to improve this to make it easier for folks