turbo_reflex 0.0.1 → 0.0.2

data/README.md

@@ -1,28 +1,483 @@
-# TurboReflex
-Short description and motivation.
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://ik.imagekit.io/hopsoft/turbo-reflex-logo-light_2cG9cdQd1.webp?ik-sdk-version=javascript-1.4.3&updatedAt=1663075749336">
+    <img width="320" src="https://ik.imagekit.io/hopsoft/turbo-reflex-logo-dark_kSmo1eDLm.webp?ik-sdk-version=javascript-1.4.3&updatedAt=1663075749241" />
+  </picture>
+  <h1 align="center">
+    Welcome to TurboReflex 👋<br />
+  </h1>
+  <p align="center">
+    <a href="http://blog.codinghorror.com/the-best-code-is-no-code-at-all/">
+      <img alt="Lines of Code" src="https://img.shields.io/badge/loc-400-47d299.svg" />
+    </a>
+    <a href="https://codeclimate.com/github/hopsoft/turbo_reflex/maintainability">
+      <img src="https://api.codeclimate.com/v1/badges/fe1162a742fe83a4fdfd/maintainability" />
+    </a>
+    <a href="https://rubygems.org/gems/turbo_reflex">
+      <img alt="GEM Version" src="https://img.shields.io/gem/v/turbo_reflex?color=168AFE&include_prereleases&logo=ruby&logoColor=FE1616">
+    </a>
+    <a href="https://rubygems.org/gems/turbo_reflex">
+      <img alt="GEM Downloads" src="https://img.shields.io/gem/dt/turbo_reflex?color=168AFE&logo=ruby&logoColor=FE1616">
+    </a>
+    <a href="https://github.com/testdouble/standard">
+      <img alt="Ruby Style" src="https://img.shields.io/badge/style-standard-168AFE?logo=ruby&logoColor=FE1616" />
+    </a>
+    <a href="https://www.npmjs.com/package/turbo_reflex">
+      <img alt="NPM Version" src="https://img.shields.io/npm/v/turbo_reflex?color=168AFE&logo=npm">
+    </a>
+    <a href="https://www.npmjs.com/package/turbo_reflex">
+      <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/turbo_reflex?color=168AFE&logo=npm">
+    </a>
+    <a href="https://bundlephobia.com/package/turbo_reflex@">
+      <img alt="NPM Bundle Size" src="https://img.shields.io/bundlephobia/minzip/turbo_reflex?label=bundle%20size&logo=npm&color=47d299">
+    </a>
+    <a href="https://github.com/sheerun/prettier-standard">
+      <img alt="JavaScript Style" src="https://img.shields.io/badge/style-prettier--standard-168AFE?logo=javascript&logoColor=f4e137" />
+    </a>
+    <a href="https://github.com/hopsoft/turbo_reflex/actions/workflows/tests.yml">
+      <img alt="Tests" src="https://github.com/hopsoft/turbo_reflex/actions/workflows/tests.yml/badge.svg" />
+    </a>
+    <a href="https://twitter.com/hopsoft">
+      <img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/hopsoft?logo=twitter&style=social">
+    </a>
+  </p>
+</p>
+
+#### TurboReflex enhances the [reactive programming](https://en.wikipedia.org/wiki/Reactive_programming) model for [Turbo Frames](https://turbo.hotwired.dev/reference/frames).
+
+<!-- Tocer[start]: Auto-generated, don't remove. -->
+
+## Table of Contents
+
+  - [Why TurboReflex?](#why-turboreflex)
+  - [Sponsors](#sponsors)
+  - [Dependencies](#dependencies)
+  - [Setup](#setup)
+  - [Usage](#usage)
+    - [Reflex Triggers](#reflex-triggers)
+    - [Lifecycle Events](#lifecycle-events)
+    - [Targeting Frames](#targeting-frames)
+    - [Working with Forms](#working-with-forms)
+    - [Server Side Reflexes](#server-side-reflexes)
+    - [Appending Turbo Streams](#appending-turbo-streams)
+    - [Setting Instance Variables](#setting-instance-variables)
+    - [Hijacking the Response](#hijacking-the-response)
+    - [Broadcasting Turbo Streams](#broadcasting-turbo-streams)
+    - [Putting it All Together](#putting-it-all-together)
+  - [License](#license)
+  - [Todos](#todos)
+  - [Releasing](#releasing)
+
+<!-- Tocer[finish]: Auto-generated, don't remove. -->
+
+## Why TurboReflex?
+
+[Turbo Frames](https://turbo.hotwired.dev/reference/frames) are a terrific technology that can help you build modern reactive web applications.
+They are similar to [iframes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) in that they focus on features like
+discrete isolated content, browser history, and scoped navigation... *with the caveat that they share their parent's DOM tree.*
+
+**TurboReflex** extends Turbo Frames and adds support for client triggered reflexes [*(think RPC)*](https://en.wikipedia.org/wiki/Remote_procedure_call).
+Reflexes 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...)*.
+Reflexes are great for features that ride atop RESTful resources. Things like making selections, toggling switches, adding filters, etc...
+**Basically any feature where you've been tempted to create a non-RESTful action in a controller.**
+
+Reflexes improve the developer experience (DX) of creating modern reactive applications.
+They share the same mental model as React and other client side frameworks.
+
+1. **Trigger an event**
+2. **Change state**
+3. **(Re)render to reflect the new state**
+4. *repeat...*
+
+*The primary distinction being that __state is wholly managed by the server__.*
+
+TurboReflex is a lightweight Turbo Frame extension... which means that reactivity runs over HTTP.
+**Web sockets are NOT used for the reactive critical path!** 🎉
+
+## Sponsors
+
+<p align="center">
+  <em>Proudly sponsored by</em>
+</p>
+<p align="center">
+  <a href="https://www.clickfunnels.com?utm_source=hopsoft&utm_medium=open-source&utm_campaign=turbo_reflex">
+    <img src="https://images.clickfunnel.com/uploads/digital_asset/file/176632/clickfunnels-dark-logo.svg" width="575" />
+  </a>
+</p>
+
+## Dependencies
+
+- [rails](https://rubygems.org/gems/rails) `>=6.1`
+- [turbo-rails](https://rubygems.org/gems/turbo-rails) `>=1.1`
+- [@hotwired/turbo-rails](https://yarnpkg.com/package/@hotwired/turbo-rails) `>=7.1`
+
+## Setup
+
+1. Add the TurboReflex dependencies
+
+    ```diff
+    # Gemfile
+    +gem "turbo_reflex", "~> 0.0.2"
+    ```
+
+    ```diff
+    # package.json
+    "dependencies": {
+      "@hotwired/turbo-rails": ">=7.1",
+    +  "turbo_reflex": "^0.0.2"
+    ```
+
+   *Be sure to install the __same version__ of the Ruby and JavaScript libraries.*
+
+2. Import TurboReflex in your JavaScript app
+
+    ```diff
+    # app/javascript/application.js
+    +import 'turbo_reflex'
+    ```
+
+2. Add TurboReflex behavior to the Rails app
+
+    ```diff
+    # app/views/layouts/application.html.erb
+    <html>
+      <head>
+        ...
+    +    <%= turbo_reflex_meta_tag %>
+        ...
+    ```
+
+    ```diff
+    # /app/controllers/application_controller.rb
+    class ApplicationController < ActionController::Base
+    +  include TurboReflex::Controller
+    end
+    ```
 
 ## Usage
-How to use my plugin.
 
-## Installation
-Add this line to your application's Gemfile:
+This example illustrates how to use TurboReflex to manage upvotes on a Post.
+
+1. **Trigger an event** - *register an element to listen for events that trigger reflexes*
+
+    ```erb
+    <!-- app/views/posts/show.html.erb -->
+    <%= turbo_frame_tag dom_id(@post) do %>
+      <a href="#" data-turbo-reflex="VotesReflex#upvote">Upvote</a>
+      Upvote Count: <%= @post.votes >
+    <% end %>
+    ```
+
+2. **Change state** - *create a server side reflex that modifies state*
+
+    ```ruby
+    # app/reflexes/posts_reflex.rb
+    class PostsReflex < TurboReflex::Base
+      def upvote
+        Post.find(controller.params[:id]).increment! :votes
+      end
+    end
+    ```
+
+3. **(Re)render to reflect the new state** - *normal Rails / Turbo Frame behavior runs and (re)renders the frame*
+
+### Reflex Triggers
+
+TurboReady uses [event delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation) to capture events that can trigger reflexes.
+
+Here is the list of default events and respective elements that TurboReflex monitors.
+
+- **`change`** - `<input>`, `<select>`, `<textarea>`
+- **`submit`** - `<form>`
+- **`click`** - `*` *all other elements*
+
+It's possible to override these defaults like so.
+
+```js
+import TurboReflex from 'turbo_reflex'
+
+// restrict `click` monitoring to <a> and <button> elements
+TurboReflex.registerEvent('click', ['a', 'button'])
+```
+
+You can also register custom events and elements.
+Here's an example that sets up monitoring for the `sl-change` event on the `sl-switch` element from the [Shoelace web component library](https://shoelace.style/).
+
+```js
+TurboReflex.registerEvent('sl-change', ['sl-switch'])
+```
+
+### Lifecycle Events
+
+TurboReflex supports the following lifecycle events.
+
+- `turbo-reflex:before-start` - fires before reflex processing starts
+- `turbo-reflex:start` - fires before the reflex is sent to the server
+- `turbo-reflex:finish` - fires after the server has processed the reflex and responded
+- `turbo-reflex:missing-frame-id` - fires if the reflex cannot determine the target frame id
+- `turbo-reflex:missing-frame` - fires if the the reflex cannot locate the frame element
+- `turbo-reflex:missing-frame-src` - fires if the reflex cannot determine the frame's `src`
+- `turbo-reflex:error` - fires if an unexpected error occurs
+
+### Targeting Frames
+
+By default TurboReflex targets the [`closest`](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest) `<turbo-frame>` element,
+but you can also explicitly target other frames.
+
+1. Look for `data-turbo-reflex-frame` on the reflex elemnt
+
+    ```erb
+    <input type="checkbox"
+      data-turbo-reflex="ExampleReflex#work"
+      data-turbo-reflex-frame="some-frame-id">
+    ```
+
+2. Look for `data-turbo-frame` on the reflex element
+
+    ```erb
+    <input type="checkbox"
+      data-turbo-reflex="ExampleReflex#work"
+      data-turbo-frame="some-frame-id">
+    ```
+
+3. Find the closest `<turbo-frame>` to the reflex element
+
+    ```erb
+    <turbo-frame id="example-frame">
+      <input type="checkbox" data-turbo-reflex="ExampleReflex#work">
+    </turbo-frame>
+    ```
+
+### Working with Forms
+
+TurboReflex works great with Rails forms.
+Just specify the `data-turbo-reflex` attribute on the form.
+
+```erb
+# app/views/posts/post.html.erb
+<%= turbo_frame_tag dom_id(@post) do %>
+  <%= form_with model: @post, html: { turbo_reflex: "ExampleReflex#work" } do |form| %>
+    ...
+  <% end %>
+<% end %>
+
+<%= turbo_frame_tag dom_id(@post) do %>
+  <%= form_for @post, remote: true, html: { turbo_reflex: "ExampleReflex#work" } do |form| %>
+    ...
+  <% end %>
+<% end %>
+
+<%= form_with model: @post,
+  html: { turbo_frame: dom_id(@post), turbo_reflex: "ExampleReflex#work" } do |form| %>
+  ...
+<% end %>
+```
+
+### Server Side Reflexes
+
+The client side DOM attribute `data-turbo-reflex` is indicates what reflex *(Ruby class and method)* to invoke.
+The attribute value is specified with RDoc notation. i.e. `ClassName#method_name`
+
+Here's an example.
+
+```erb
+<a data-turbo-reflex="DemoReflex#example">
+```
+
+Server side reflexes can live anywhere in your app; however, we recommend you keep them in the `app` directory.
+
+```diff
+ |- app
+ |  |...
+ |  |- models
++|  |- reflexes
+ |  |- views
+```
+
+Reflexes are simple Ruby classes that inherit from `TurboReflex::Base`.
+They expose the following instance methods and properties.
+
+- `element` - a struct that represents the DOM element that triggered the reflex
+- `controller` - the Rails controller processing the HTTP request
+- `turbo_stream` - a Turbo Stream [`TagBuilder`](https://github.com/hotwired/turbo-rails/blob/main/app/models/turbo/streams/tag_builder.rb)
+- `turbo_streams` - a list of Turbo Streams to append to the response
 
 ```ruby
-gem "turbo_reflex"
+# app/reflexes/demo_reflex.rb
+class DemoReflex < TurboReflex::Base
+  # The reflex method is invoked by an ActionController before filter.
+  # Standard Rails behavior takes over after the reflex method completes.
+  def example
+    # - execute business logic
+    # - update state
+    # - append additional Turbo Streams
+  end
+end
 ```
 
-And then execute:
-```bash
-$ bundle
+### Appending Turbo Streams
+
+It's possible to append additional Turbo Streams to the response in a reflex.
+Appended streams are added to the response body **after** the Rails controller action has completed and rendered the view template.
+
+```ruby
+# app/reflexes/demo_reflex.rb
+class DemoReflex < TurboReflex::Base
+  def example
+    # logic...
+    turbo_streams << turbo_stream.append("dom_id", "CONTENT")
+    turbo_streams << turbo_stream.prepend("dom_id", "CONTENT")
+    turbo_streams << turbo_stream.replace("dom_id", "CONTENT")
+    turbo_streams << turbo_stream.update("dom_id", "CONTENT")
+    turbo_streams << turbo_stream.remove("dom_id")
+    turbo_streams << turbo_stream.before("dom_id", "CONTENT")
+    turbo_streams << turbo_stream.after("dom_id", "CONTENT")
+    turbo_streams << turbo_stream.invoke("console.log", args: ["Whoa! 🤯"])
+  end
+end
 ```
 
-Or install it yourself as:
-```bash
-$ gem install turbo_reflex
+*This proves especially powerful when paired with [TurboReady](https://github.com/hopsoft/turbo_ready).*
+
+> 📘 **NOTE:** `turbo_stream.invoke` is a [TurboReady](https://github.com/hopsoft/turbo_ready#usage) feature.
+
+### Setting Instance Variables
+
+It can be useful to set instance variables on the Rails controller from the reflex.
+
+Here's an example that shows how to do this.
+
+```erb
+<!-- app/views/posts/index.html.erb -->
+<%= turbo_frame_tag dom_id(@posts) do %>
+  <%= check_box_tag :all, :all, @all, data: { turbo_reflex: "PostsReflex#toggle_all" } %>
+  View All
+
+  <% @posts.each do |post| %>
+    ...
+  <% end %>
+<% end %>
+```
+
+```ruby
+# app/reflexes/posts_reflex.rb
+class PostsReflex < TurboReflex::Reflex
+  def toggle_all
+    posts = element.checked ? Post.all : Post.unread
+    controller.instance_variable_set(:@all, element.checked)
+    controller.instance_variable_set(:@posts, posts)
+  end
+end
 ```
 
-## Contributing
-Contribution directions go here.
+```ruby
+# app/controllers/posts_controller.rb
+class PostsController < ApplicationController
+  def index
+    @posts ||= Post.unread
+  end
+end
+```
+
+### Hijacking the Response
+
+Sometimes you may want to hijack the normal Rails response from within a reflex.
+
+For example, consider the need for a related but separate form that updates a subset of user attributes.
+We'd like to avoid creating a non RESTful route,
+but aren't thrilled at the prospect of adding REST boilerplate for a new route, controller, action, etc...
+
+In that scenario we can reuse an existing route and hijack the response handling with a reflex.
+
+Here's how to do it.
+
+```erb
+<!-- app/views/users/show.html.erb -->
+<%= turbo_frame_tag "user-alt" do %>
+  <%= form_with model: @user, data: { turbo_reflex: "UserReflex#example" } do |form| %>
+    ...
+  <% end %>
+<% end %>
+```
+
+The form above will send a `PATCH` request to `users#update`,
+but we'll hijack the handling in the reflex so we never hit `users#update`.
+
+```ruby
+# app/reflexes/user_reflex.html.erb
+class UserReflex < TurboReflex::Base
+  def example
+    # business logic, save record, etc...
+    controller.render html: "<turbo-frame id='user-alt'>We Hijacked the response!</turbo-frame>".html_safe
+  end
+end
+```
+
+Remember that reflexes are invoked by a controller [before filter](https://guides.rubyonrails.org/action_controller_overview.html#filters).
+That means rendering from inside a reflex halts the standard request cycle.
+
+### Broadcasting Turbo Streams
+
+You can also broadcast Turbo Streams to subscribed users from a reflex.
+
+```ruby
+# app/reflexes/demo_reflex.rb
+class DemoReflex < TurboReflex::Base
+  def example
+    # logic...
+    Turbo::StreamsChannel
+      .broadcast_invoke_later_to "some-subscription", "console.log", args: ["Whoa! 🤯"]
+  end
+end
+```
+
+*Learn more about Turbo Stream broadcasting by reading through the
+[hotwired/turbo-rails](https://github.com/hotwired/turbo-rails/blob/main/app/models/concerns/turbo/broadcastable.rb) source code.*
+
+> 📘 **NOTE:** `broadcast_invoke_later_to` is a [TurboReady](https://github.com/hopsoft/turbo_ready#broadcasting) feature.
+
+### Putting it All Together
+
+The best way to learn this stuff is from working examples.
+Be sure to clone the library and run the test application.
+Then dig into the internals.
+
+```sh
+git clone https://github.com/hopsoft/turbo_reflex.git
+cd turbo_reflex
+bundle
+cd test/dummy
+bin/rails s
+# View the app in a browser at http://localhost:3000
+```
+
+You can review the implementation in [`test/dummy/app`](https://github.com/hopsoft/turbo_reflex/tree/main/test/dummy).
+*Feel free to add some demos and submit a pull request while you're in there.*
+
+![TurboReflex Demos](https://ik.imagekit.io/hopsoft/turbo-reflex-demos_EP54JuWt5.webp?ik-sdk-version=javascript-1.4.3&updatedAt=1663083040904)
 
 ## License
+
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Todos
+
+- [ ] Add tests for lifecycle events
+- [ ] Add tests for select elements
+- [ ] Add tests for checkbox elements
+- [ ] Add controller tests
+- [ ] Add tests for all variants of frame targeting
+
+
+## Releasing
+
+1. Run `yarn upgrade` and `bundle update` to pick up the latest
+1. Bump version number at `lib/turbo_reflex/version.rb`. Pre-release versions use `.preN`
+1. Run `bin/standardize`
+1. Run `rake build` and `yarn build`
+1. Commit and push changes to GitHub
+1. Run `rake release`
+1. Run `yarn publish --no-git-tag-version`
+1. Yarn will prompt you for the new version. Pre-release versions use `-preN`
+1. Commit and push any changes to GitHub
+1. Create a new release on GitHub ([here](https://github.com/hopsoft/turbo_reflex/releases)) and generate the changelog for the stable release for it

data/Rakefile

@@ -1,3 +1,17 @@
-require "bundler/setup"
+# frozen_string_literal: true
 
+require "bundler/setup"
 require "bundler/gem_tasks"
+require "rake/testtask"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+load "rails/tasks/statistics.rake"
+
+Rake::TestTask.new do |test|
+  test.libs << "test"
+  test.test_files = FileList["test/**/*_test.rb"]
+  test.warning = false
+end
+
+task default: :test

data/app/assets/builds/turbo_reflex.min.js

@@ -0,0 +1,2 @@
+var l={beforeStart:"turbo-reflex:before-start",start:"turbo-reflex:start",finish:"turbo-reflex:finish",error:"turbo-reflex:error",missingFrameId:"turbo-reflex:missing-frame-id",missingFrame:"turbo-reflex:missing-frame",missingFrameSrc:"turbo-reflex:missing-frame-src"};function y(t,e=document,r={}){let n=new CustomEvent(t,{detail:r,cancelable:!0,bubbles:!0});e.dispatchEvent(n)}function F(){Object.values(l).forEach(t=>console.log(t))}var o={...l,dispatch:y,logEventNames:F};var u={};addEventListener("turbo:before-fetch-response",t=>{let e=t.target;u[e.id]=e.src;let{turboReflexActive:r,turboReflexElementId:n}=e.dataset;if(!r)return;let s=document.getElementById(n);delete e.dataset.turboReflexActive,delete e.dataset.turboReflexElementId,o.dispatch(o.finish,s||document,{frame:e,element:s||"Unknown! Missing id attribute."})});addEventListener("turbo:frame-load",t=>{let e=t.target;e.dataset.turboReflexSrc=u[e.id]||e.src||e.dataset.turboReflexSrc,delete u[e.id]});var L={get token(){return document.getElementById("turbo-reflex-token").getAttribute("content")}},c=L;function m(t){return t.closest("[data-turbo-reflex]")}function S(t){return t.closest("turbo-frame")}function b(t){let e=t.dataset.turboReflexFrame||t.dataset.turboFrame;if(!e){let r=S(t);r&&(e=r.id)}return e||(console.error("The reflex element does not specify a frame!","Please move the reflex element inside a <turbo-frame> or set the 'data-turbo-reflex-frame' or 'data-turbo-frame' attribute.",t),o.dispatch(o.missingFrameId,t,{element:t})),e}function g(t){let e=document.getElementById(t);return e||(console.error(`The frame '${t}' does not exist!`),o.dispatch(o.missingFrame,document,{id:t})),e}function x(t){let e=t.dataset.turboReflexSrc||t.src;return e||(console.error(`The the 'src' for <turbo-frame id='${t.id}'> is unknown!`,"TurboReflex uses 'src' to (re)render frame content after the reflex is invoked.","Please set the 'src' or 'data-turbo-reflex-src' attribute on the <turbo-frame> element.",t),o.dispatch(o.missingFrameSrc,t,{frame:t})),e}function k(t,e={}){if(t.tagName.toLowerCase()!=="select")return e.value=t.value;if(!t.multiple)return e.value=t.options[t.selectedIndex].value;e.values=Array.from(t.options).reduce((r,n)=>(n.selected&&r.push(n.value),r),[])}function v(t){let e=Array.from(t.attributes).reduce((r,n)=>(r[n.name]=n.value,r),{});return e.tag=t.tagName,e.checked=t.checked,e.disabled=t.disabled,k(t,e),e}var a={},h;function p(t){h=t}function f(t,e){a[t]=e,document.addEventListener(t,h,!0)}function E(t,e){return e=e.toLowerCase(),a[t].includes(e)||!Object.values(a).flat().includes(e)&&a[t].includes("*")}function R(){console.log(a)}addEventListener("turbo:before-fetch-request",t=>{let e=t.target,{turboReflexActive:r}=e.dataset;if(!r)return;let{fetchOptions:n}=t.detail;n.headers["Turbo-Reflex"]=c.token});function I(t){let e=document.createElement("a");return e.href=t,new URL(e)}function A(t,e={}){e.token=c.token;let r=document.createElement("input");r.type="hidden",r.name="turbo_reflex",r.value=JSON.stringify(e),t.appendChild(r)}function C(t){let e,r,n,s;try{if(e=m(t.target),!e||!E(t.type,e.tagName)||(o.dispatch(o.beforeStart,e,{element:e}),r=b(e),!r)||(n=g(r),!n)||(s=x(n),!s))return;let i={frameId:r,element:v(e)};if(o.dispatch(o.start,e,{element:e,frameId:r,frame:n,frameSrc:s,payload:i}),n.dataset.turboReflexActive=!0,n.dataset.turboReflexElementId=e.id,e.tagName.toLowerCase()==="form")return A(e,i);t.preventDefault();let d=I(s);d.searchParams.set("turbo_reflex",JSON.stringify(i)),n.src=d.toString()}catch(i){console.error("TurboReflex encountered an unexpected error!",{element:e,frameId:r,frame:n,frameSrc:s,target:t.target},i),o.dispatch(o.error,e||document,{element:e,frameId:r,frame:n,frameSrc:s,error:i})}}p(C);f("change",["input","select","textarea"]);f("submit",["form"]);f("click",["*"]);var M={registerEvent:f,logRegisteredEvents:R,logLifecycleEventNames:o.logEventNames};export{M as default};
+//# sourceMappingURL=turbo_reflex.min.js.map

data/app/assets/builds/turbo_reflex.min.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../javascript/lifecycle_events.js", "../../javascript/frame_sources.js", "../../javascript/security.js", "../../javascript/elements.js", "../../javascript/event_registry.js", "../../javascript/turbo_reflex.js"],
+  "sourcesContent": ["const events = {\n  beforeStart: 'turbo-reflex:before-start',\n  start: 'turbo-reflex:start',\n  finish: 'turbo-reflex:finish',\n  error: 'turbo-reflex:error',\n  missingFrameId: 'turbo-reflex:missing-frame-id',\n  missingFrame: 'turbo-reflex:missing-frame',\n  missingFrameSrc: 'turbo-reflex:missing-frame-src'\n}\n\nfunction dispatch (name, target = document, detail = {}) {\n  const event = new CustomEvent(name, {\n    detail,\n    cancelable: true,\n    bubbles: true\n  })\n  target.dispatchEvent(event)\n}\n\nfunction logEventNames () {\n  Object.values(events).forEach(name => console.log(name))\n}\n\nexport default { ...events, dispatch, logEventNames }\n", "import LifecycleEvents from './lifecycle_events'\nconst frameSources = {}\n\n// fires after receiving a turbo HTTP response\naddEventListener('turbo:before-fetch-response', event => {\n  const frame = event.target\n  frameSources[frame.id] = frame.src\n\n  const { turboReflexActive, turboReflexElementId } = frame.dataset\n  if (!turboReflexActive) return\n\n  const element = document.getElementById(turboReflexElementId)\n  delete frame.dataset.turboReflexActive\n  delete frame.dataset.turboReflexElementId\n\n  LifecycleEvents.dispatch(LifecycleEvents.finish, element || document, {\n    frame,\n    element: element || 'Unknown! Missing id attribute.'\n  })\n})\n\n// fires when a frame element is navigated and finishes loading\naddEventListener('turbo:frame-load', event => {\n  const frame = event.target\n  frame.dataset.turboReflexSrc =\n    frameSources[frame.id] || frame.src || frame.dataset.turboReflexSrc\n  delete frameSources[frame.id]\n})\n", "const Security = {\n  get token () {\n    return document.getElementById('turbo-reflex-token').getAttribute('content')\n  }\n}\n\nexport default Security\n", "import LifecycleEvents from './lifecycle_events'\n\nfunction findClosestReflex (element) {\n  return element.closest('[data-turbo-reflex]')\n}\n\nfunction findClosestFrame (element) {\n  return element.closest('turbo-frame')\n}\n\nfunction findFrameId (element) {\n  let id = element.dataset.turboReflexFrame || element.dataset.turboFrame\n  if (!id) {\n    const frame = findClosestFrame(element)\n    if (frame) id = frame.id\n  }\n  if (!id) {\n    console.error(\n      `The reflex element does not specify a frame!`,\n      `Please move the reflex element inside a <turbo-frame> or set the 'data-turbo-reflex-frame' or 'data-turbo-frame' attribute.`,\n      element\n    )\n    LifecycleEvents.dispatch(LifecycleEvents.missingFrameId, element, {\n      element\n    })\n  }\n  return id\n}\n\nfunction findFrame (id) {\n  const frame = document.getElementById(id)\n  if (!frame) {\n    console.error(`The frame '${id}' does not exist!`)\n    LifecycleEvents.dispatch(LifecycleEvents.missingFrame, document, { id })\n  }\n  return frame\n}\n\nfunction findFrameSrc (frame) {\n  const frameSrc = frame.dataset.turboReflexSrc || frame.src\n  if (!frameSrc) {\n    console.error(\n      `The the 'src' for <turbo-frame id='${frame.id}'> is unknown!`,\n      `TurboReflex uses 'src' to (re)render frame content after the reflex is invoked.`,\n      `Please set the 'src' or 'data-turbo-reflex-src' attribute on the <turbo-frame> element.`,\n      frame\n    )\n    LifecycleEvents.dispatch(LifecycleEvents.missingFrameSrc, frame, { frame })\n  }\n  return frameSrc\n}\n\nfunction assignElementValueToPayload (element, payload = {}) {\n  if (element.tagName.toLowerCase() !== 'select')\n    return (payload.value = element.value)\n\n  if (!element.multiple)\n    return (payload.value = element.options[element.selectedIndex].value)\n\n  payload.values = Array.from(element.options).reduce((memo, option) => {\n    if (option.selected) memo.push(option.value)\n    return memo\n  }, [])\n}\n\nfunction buildAttributePayload (element) {\n  const payload = Array.from(element.attributes).reduce((memo, attr) => {\n    memo[attr.name] = attr.value\n    return memo\n  }, {})\n\n  payload.tag = element.tagName\n  payload.checked = element.checked\n  payload.disabled = element.disabled\n  assignElementValueToPayload(element, payload)\n\n  return payload\n}\n\nexport {\n  findClosestReflex,\n  findClosestFrame,\n  findFrameId,\n  findFrame,\n  findFrameSrc,\n  buildAttributePayload\n}\n", "const registeredEvents = {}\nlet eventListener\n\nfunction registerEventListener (fn) {\n  eventListener = fn\n}\n\nfunction registerEvent (eventName, tagNames) {\n  registeredEvents[eventName] = tagNames\n  document.addEventListener(eventName, eventListener, true)\n}\n\nfunction isRegisteredEvent (eventName, tagName) {\n  tagName = tagName.toLowerCase()\n  return (\n    registeredEvents[eventName].includes(tagName) ||\n    (!Object.values(registeredEvents)\n      .flat()\n      .includes(tagName) &&\n      registeredEvents[eventName].includes('*'))\n  )\n}\n\nfunction logRegisteredEvents () {\n  console.log(registeredEvents)\n}\n\nexport {\n  registerEventListener,\n  registerEvent,\n  registeredEvents,\n  isRegisteredEvent,\n  logRegisteredEvents\n}\n", "import './frame_sources'\nimport Security from './security'\nimport LifecycleEvents from './lifecycle_events'\nimport {\n  findClosestReflex,\n  findClosestFrame,\n  findFrameId,\n  findFrame,\n  findFrameSrc,\n  buildAttributePayload\n} from './elements'\nimport {\n  registerEventListener,\n  registerEvent,\n  registeredEvents,\n  isRegisteredEvent,\n  logRegisteredEvents\n} from './event_registry'\n\n// fires before making a turbo HTTP request\naddEventListener('turbo:before-fetch-request', event => {\n  const frame = event.target\n  const { turboReflexActive } = frame.dataset\n  if (!turboReflexActive) return\n  const { fetchOptions } = event.detail\n  fetchOptions.headers['Turbo-Reflex'] = Security.token\n})\n\nfunction buildURL (urlString) {\n  const a = document.createElement('a')\n  a.href = urlString\n  return new URL(a)\n}\n\nfunction invokeFormReflex (form, payload = {}) {\n  payload.token = Security.token\n  const input = document.createElement('input')\n  input.type = 'hidden'\n  input.name = 'turbo_reflex'\n  input.value = JSON.stringify(payload)\n  form.appendChild(input)\n}\n\nfunction invokeReflex (event) {\n  let element, frameId, frame, frameSrc\n  try {\n    element = findClosestReflex(event.target)\n    if (!element) return\n\n    if (!isRegisteredEvent(event.type, element.tagName)) return\n\n    LifecycleEvents.dispatch(LifecycleEvents.beforeStart, element, { element })\n\n    frameId = findFrameId(element)\n    if (!frameId) return\n\n    frame = findFrame(frameId)\n    if (!frame) return\n\n    frameSrc = findFrameSrc(frame)\n    if (!frameSrc) return\n\n    const payload = {\n      frameId: frameId,\n      element: buildAttributePayload(element)\n    }\n\n    LifecycleEvents.dispatch(LifecycleEvents.start, element, {\n      element,\n      frameId,\n      frame,\n      frameSrc,\n      payload\n    })\n    frame.dataset.turboReflexActive = true\n    frame.dataset.turboReflexElementId = element.id\n\n    if (element.tagName.toLowerCase() === 'form')\n      return invokeFormReflex(element, payload)\n\n    event.preventDefault()\n    const frameURL = buildURL(frameSrc)\n    frameURL.searchParams.set('turbo_reflex', JSON.stringify(payload))\n    frame.src = frameURL.toString()\n  } catch (error) {\n    console.error(\n      `TurboReflex encountered an unexpected error!`,\n      { element, frameId, frame, frameSrc, target: event.target },\n      error\n    )\n    LifecycleEvents.dispatch(LifecycleEvents.error, element || document, {\n      element,\n      frameId,\n      frame,\n      frameSrc,\n      error\n    })\n  }\n}\n\n// wire things up and setup default events\nregisterEventListener(invokeReflex)\nregisterEvent('change', ['input', 'select', 'textarea'])\nregisterEvent('submit', ['form'])\nregisterEvent('click', ['*'])\n\nexport default {\n  registerEvent,\n  logRegisteredEvents,\n  logLifecycleEventNames: LifecycleEvents.logEventNames\n}\n"],
+  "mappings": "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",
+  "names": ["events", "dispatch", "name", "target", "detail", "event", "logEventNames", "lifecycle_events_default", "frameSources", "event", "frame", "turboReflexActive", "turboReflexElementId", "element", "lifecycle_events_default", "Security", "security_default", "findClosestReflex", "element", "findClosestFrame", "findFrameId", "id", "frame", "lifecycle_events_default", "findFrame", "findFrameSrc", "frameSrc", "assignElementValueToPayload", "payload", "memo", "option", "buildAttributePayload", "attr", "registeredEvents", "eventListener", "registerEventListener", "fn", "registerEvent", "eventName", "tagNames", "isRegisteredEvent", "tagName", "logRegisteredEvents", "event", "frame", "turboReflexActive", "fetchOptions", "security_default", "buildURL", "urlString", "a", "invokeFormReflex", "form", "payload", "input", "invokeReflex", "element", "frameId", "frameSrc", "findClosestReflex", "isRegisteredEvent", "lifecycle_events_default", "findFrameId", "findFrame", "findFrameSrc", "buildAttributePayload", "frameURL", "error", "registerEventListener", "registerEvent", "turbo_reflex_default", "logRegisteredEvents"]
+}