\n\n\n#### TurboReflex enhances the [reactive programming](https://en.wikipedia.org/wiki/Reactive_programming) model for [Turbo Frames](https://turbo.hotwired.dev/reference/frames).\n\n\n\n## Table of Contents\n\n - [Why TurboReflex?](#why-turboreflex)\n - [Sponsors](#sponsors)\n - [Dependencies](#dependencies)\n - [Setup](#setup)\n - [Usage](#usage)\n - [Reflex Triggers](#reflex-triggers)\n - [Lifecycle Events](#lifecycle-events)\n - [Targeting Frames](#targeting-frames)\n - [Working with Forms](#working-with-forms)\n - [Server Side Reflexes](#server-side-reflexes)\n - [Appending Turbo Streams](#appending-turbo-streams)\n - [Setting Instance Variables](#setting-instance-variables)\n - [Prevent Controller Action](#prevent-controller-action)\n - [Broadcasting Turbo Streams](#broadcasting-turbo-streams)\n - [Putting it All Together](#putting-it-all-together)\n - [Running Locally](#running-locally)\n - [Running in Docker](#running-in-docker)\n - [License](#license)\n - [Todos](#todos)\n - [Releasing](#releasing)\n\n\n\n## Why TurboReflex?\n\n[Turbo Frames](https://turbo.hotwired.dev/reference/frames) are a terrific technology that can help you build modern reactive web applications.\nThey are similar to [iframes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) in that they focus on features like\ndiscrete isolated content, browser history, and scoped navigation... *with the caveat that they share their parent's DOM tree.*\n\n**TurboReflex** extends Turbo Frames and adds support for client triggered reflexes [*(think RPC)*](https://en.wikipedia.org/wiki/Remote_procedure_call).\nReflexes let you *sprinkle* ✨ in functionality and skip the ceremony of typical [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) boilerplate *(routes, controllers, actions, etc...)*.\nReflexes are great for features that ride atop RESTful resources. Things like making selections, toggling switches, adding filters, etc...\n**Basically any feature where you've been tempted to create a non-RESTful action in a controller.**\n\nReflexes improve the developer experience (DX) of creating modern reactive applications.\nThey share the same mental model as React and other client side frameworks.\n\n1. **Trigger an event**\n2. **Change state**\n3. **(Re)render to reflect the new state**\n4. *repeat...*\n\n*The primary distinction being that __state is wholly managed by the server__.*\n\nTurboReflex is a lightweight Turbo Frame extension... which means that reactivity runs over HTTP.\n**Web sockets are NOT used for the reactive critical path!** 🎉\n\n## Sponsors\n\n
\n\n## Dependencies\n\n- [rails](https://rubygems.org/gems/rails) `>=6.1`\n- [turbo-rails](https://rubygems.org/gems/turbo-rails) `>=1.1`\n- [@hotwired/turbo-rails](https://yarnpkg.com/package/@hotwired/turbo-rails) `>=7.1`\n- [ruby](https://github.com/ruby/ruby) `>=2.7`\n\n## Setup\n\n1. Add the TurboReflex dependencies\n\n ```diff\n # Gemfile\n gem \"turbo-rails\", \">= 1.1\", \"< 2\"\n +gem \"turbo_reflex\", \"~> VERSION\"\n ```\n\n ```diff\n # package.json\n \"dependencies\": {\n \"@hotwired/turbo-rails\": \">=7.2\",\n + \"turbo_reflex\": \"^VERSION\"\n ```\n\n *Be sure to install the __same version__ of the Ruby and JavaScript libraries.*\n\n2. Import TurboReflex in your JavaScript app\n\n ```diff\n # app/javascript/application.js\n import '@hotwired/turbo-rails'\n +import 'turbo_reflex'\n ```\n\n2. Add TurboReflex behavior to the Rails app\n\n ```diff\n # app/views/layouts/application.html.erb\n \n \n + <%= turbo_reflex.meta_tag %>\n \n \n \n \n ```\n\n## Usage\n\nThis example illustrates how to use TurboReflex to manage upvotes on a Post.\n\n1. **Trigger an event** - *register an element to listen for events that trigger reflexes*\n\n ```erb\n \n <%= turbo_frame_tag dom_id(@post) do %>\n Upvote\n Upvote Count: <%= @post.votes %>\n <% end %>\n ```\n\n2. **Change state** - *create a server side reflex that modifies state*\n\n ```ruby\n # app/reflexes/posts_reflex.rb\n class PostReflex < TurboReflex::Base\n def upvote\n Post.find(controller.params[:id]).increment! :votes\n end\n end\n ```\n\n3. **(Re)render to reflect the new state** - *normal Rails / Turbo Frame behavior runs and (re)renders the frame*\n\n### Reflex Triggers\n\nTurboReady uses [event delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation) to capture events that can trigger reflexes.\n\nHere is the list of default events and respective elements that TurboReflex monitors.\n\n- **`change`** - ``, `
![](\"https://ik.imagekit.io/hopsoft/turbo-reflex-logo-light_2cG9cdQd1.webp?ik-sdk-version=javascript-1.4.3&updatedAt=1663075749336\"){kind=logo}
\n ![\"Lines](\"https://img.shields.io/badge/loc-1268-47d299.svg\"){kind=icon}
\n \n \n ![\"GEM](\"https://img.shields.io/gem/v/turbo_reflex?color=168AFE&include_prereleases&logo=ruby&logoColor=FE1616\")
![\"GEM](\"https://img.shields.io/gem/dt/turbo_reflex?color=168AFE&logo=ruby&logoColor=FE1616\")
![\"Ruby](\"https://img.shields.io/badge/style-standard-168AFE?logo=ruby&logoColor=FE1616\"){kind=icon}
![\"NPM](\"https://img.shields.io/npm/v/turbo_reflex?color=168AFE&logo=npm\")
![\"NPM](\"https://img.shields.io/npm/dm/turbo_reflex?color=168AFE&logo=npm\")
![\"NPM](\"https://img.shields.io/bundlephobia/minzip/turbo_reflex?label=bundle%20size&logo=npm&color=47d299\")
![\"JavaScript](\"https://img.shields.io/badge/style-prettier--standard-168AFE?logo=javascript&logoColor=f4e137\"){kind=icon}
![\"Tests\"](\"https://github.com/hopsoft/turbo_reflex/actions/workflows/tests.yml/badge.svg\"){kind=icon}
\n \n \n ![\"Twitter](\"https://img.shields.io/twitter/follow/hopsoft?logo=twitter&style=social\")
![](\"https://images.clickfunnel.com/uploads/digital_asset/file/176632/clickfunnels-dark-logo.svg\"){kind=logo}
\n \n