turbo_reflex 0.0.2 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b69b530a4e88be7ec81b38f0076f6d8181eb4a8e209bb2ecf8d443bbd4ab3b2f
-  data.tar.gz: d71d737c155f19c32170280ccb8bf25c9dc55c4e60698f7f19fbeff19ee80225
+  metadata.gz: c9fe08630cc0c938fc6b2eb4ed55b841bd968d3b1a9e47c4d7831eba6877994f
+  data.tar.gz: 41e2891f690ec5d77c0c3ec537145f4126e750351bcd9b9040fa701374a35afa
 SHA512:
-  metadata.gz: 48a856e206b2cbbb1692829c0157e6c5429f5cef111f64e44ccdff91247cee773b4c91e12219e2df1bccb6fde44eaed6817c3ac1a55beaf64144b303acf26bdf
-  data.tar.gz: b11f7bc4ffe62ea4dc9fd0f79bc1952bf1316973a3e109c0e40aca4e56ee9efc81d5f857f18e2c84fe0e9e7cfdaec519231145d4b65637fbaf92809be13386f6
+  metadata.gz: f2069894ceef06beac578f28a4c4729ab272e089fbe4556f71743ef2d7dfdd328512102ac24d0cf4d8d1f5379fc67e2c356e1ec05b74a207ddf656ac470d7bdf
+  data.tar.gz: f316ed002e6560cd93d4d30c600c51d5181c82a500e75b93baad27195d0934fd5ebf4fb0ea1cdecd72fd7b5d6654f4671c104d9d46c30e446c77df876a7f9911

data/Dockerfile

@@ -0,0 +1,43 @@
+FROM ruby:3.1.2
+
+RUN apt-get -y update && \
+apt-get -y upgrade && \
+apt-get -y --allow-downgrades --allow-remove-essential --allow-change-held-packages install \
+build-essential \
+git \
+nodejs \
+npm \
+sqlite3 \
+tzdata && \
+apt-get clean
+
+# setup ruby gems
+RUN gem update --system && \
+gem install bundler && \
+bundle config set --global --without test
+
+# setup yarn
+RUN npm install -g yarn
+
+# get application code
+RUN rm -rf /opt/turbo_reflex
+RUN git clone --origin github --branch main --depth 1 https://github.com/hopsoft/turbo_reflex.git /opt/turbo_reflex
+
+# install application dependencies 1st time
+WORKDIR /opt/turbo_reflex
+RUN yarn
+RUN bundle
+
+# prepare the environment
+ENV RAILS_ENV=production RAILS_LOG_TO_STDOUT=true RAILS_SERVE_STATIC_FILES=true
+
+# prepare and run the application
+CMD git pull --no-rebase github main && \
+yarn && \
+cd test/dummy && \
+bundle && \
+rm -f tmp/pids/server.pid && \
+bin/rails db:create db:migrate && \
+bin/rails assets:clobber && \
+bin/rails assets:precompile && \
+bin/rails s --binding=0.0.0.0 --port=3000

data/Dockerfile.orig

@@ -0,0 +1,49 @@
+FROM ruby:3.1.2
+
+RUN apt-get -y update && \
+apt-get -y upgrade && \
+apt-get -y --allow-downgrades --allow-remove-essential --allow-change-held-packages install \
+build-essential \
+git \
+nodejs \
+npm \
+sqlite3 \
+tzdata && \
+apt-get clean
+
+<<<<<<< HEAD
+# prepare the environment
+ENV RAILS_ENV=production RAILS_LOG_TO_STDOUT=true RAILS_SERVE_STATIC_FILES=true
+
+=======
+>>>>>>> main
+# setup ruby gems
+RUN gem update --system && \
+gem install bundler && \
+bundle config set --global --without test
+
+# setup yarn
+RUN npm install -g yarn
+
+# get application code
+RUN git clone --origin github --branch main --depth 1 https://github.com/hopsoft/turbo_reflex.git /opt/turbo_reflex
+
+# install application dependencies 1st time
+WORKDIR /opt/turbo_reflex
+RUN yarn
+WORKDIR /opt/turbo_reflex/test/dummy
+RUN bundle
+
+# prepare the environment
+ENV RAILS_ENV=production RAILS_LOG_TO_STDOUT=true RAILS_SERVE_STATIC_FILES=true
+
+# prepare and run the application
+CMD git pull --no-rebase github && \
+git checkout hopsoft/hijack && \
+cd /opt/turbo_reflex && yarn && \
+cd /opt/turbo_reflex/test/dummy && bundle && \
+rm -f tmp/pids/server.pid && \
+bin/rails db:create db:migrate && \
+bin/rails assets:clobber && \
+bin/rails assets:precompile && \
+bin/rails s --binding=0.0.0.0 --port=3000

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    turbo_reflex (0.0.2)
+    turbo_reflex (0.0.4)
       rails (>= 6.1)
       turbo-rails (>= 1.1)
 
@@ -77,6 +77,7 @@ GEM
       public_suffix (>= 2.0.2, < 6.0)
     ansi (1.5.0)
     ast (2.4.2)
+    bindex (0.8.1)
     builder (3.2.4)
     byebug (11.1.3)
     capybara (3.37.1)
@@ -103,6 +104,7 @@ GEM
       cliver (~> 0.3)
       concurrent-ruby (~> 1.1)
       websocket-driver (>= 0.6, < 0.8)
+    foreman (0.87.2)
     globalid (1.0.0)
       activesupport (>= 5.0)
     i18n (1.12.0)
@@ -111,7 +113,7 @@ GEM
       actionpack (>= 6.0.0)
       railties (>= 6.0.0)
     json (2.6.2)
-    loofah (2.18.0)
+    loofah (2.19.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     magic_frozen_string_literal (1.2.0)
@@ -142,6 +144,8 @@ GEM
       net-protocol
       timeout
     nio4r (2.5.8)
+    nokogiri (1.13.8-aarch64-linux)
+      racc (~> 1.4)
     nokogiri (1.13.8-arm64-darwin)
       racc (~> 1.4)
     parallel (1.22.1)
@@ -190,6 +194,7 @@ GEM
     rake (13.0.6)
     regexp_parser (2.5.0)
     rexml (3.2.5)
+    rouge (4.0.0)
     rubocop (1.35.1)
       json (~> 2.3)
       parallel (~> 1.10)
@@ -219,6 +224,7 @@ GEM
       actionpack (>= 5.2)
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
+    sqlite3 (1.5.0-aarch64-linux)
     sqlite3 (1.5.0-arm64-darwin)
     standard (1.16.1)
       rubocop (= 1.35.1)
@@ -226,19 +232,28 @@ GEM
     standardrb (1.0.1)
       standard
     strscan (3.0.4)
+    tailwindcss-rails (2.0.14-aarch64-linux)
+      railties (>= 6.0.0)
+    tailwindcss-rails (2.0.14-arm64-darwin)
+      railties (>= 6.0.0)
     thor (1.2.1)
     timeout (0.3.0)
     turbo-rails (1.1.1)
       actionpack (>= 6.0.0)
       activejob (>= 6.0.0)
       railties (>= 6.0.0)
-    turbo_ready (0.0.7)
+    turbo_ready (0.1.0)
       rails (>= 6.1)
       turbo-rails (>= 1.1)
     tzinfo (2.0.5)
       concurrent-ruby (~> 1.0)
-    unicode-display_width (2.2.0)
-    webdrivers (5.0.0)
+    unicode-display_width (2.3.0)
+    web-console (4.2.0)
+      actionview (>= 6.0.0)
+      activemodel (>= 6.0.0)
+      bindex (>= 0.4.0)
+      railties (>= 6.0.0)
+    webdrivers (5.1.0)
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (~> 4.0)
@@ -251,11 +266,13 @@ GEM
     zeitwerk (2.6.0)
 
 PLATFORMS
+  aarch64-linux
   arm64-darwin-21
 
 DEPENDENCIES
   capybara
   cuprite
+  foreman
   importmap-rails
   magic_frozen_string_literal
   minitest-reporters
@@ -264,11 +281,14 @@ DEPENDENCIES
   puma
   rake
   rexml
+  rouge
   sprockets-rails
   sqlite3
   standardrb
+  tailwindcss-rails
   turbo_ready
   turbo_reflex!
+  web-console
   webdrivers
 
 BUNDLED WITH

data/README.md

@@ -117,14 +117,14 @@ TurboReflex is a lightweight Turbo Frame extension... which means that reactivit
 
     ```diff
     # Gemfile
-    +gem "turbo_reflex", "~> 0.0.2"
+    +gem "turbo_reflex", "~> 0.0.3"
     ```
 
     ```diff
     # package.json
     "dependencies": {
       "@hotwired/turbo-rails": ">=7.1",
-    +  "turbo_reflex": "^0.0.2"
+    +  "turbo_reflex": "^0.0.3"
     ```
 
    *Be sure to install the __same version__ of the Ruby and JavaScript libraries.*
@@ -142,16 +142,12 @@ TurboReflex is a lightweight Turbo Frame extension... which means that reactivit
     # 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
+    +  <%= turbo_reflex_meta_tag %>
+      </head>
+      <body>
+    +  <%= turbo_reflex_frame_tag %>
+      </body>
+    </html>
     ```
 
 ## Usage
@@ -163,7 +159,7 @@ This example illustrates how to use TurboReflex to manage upvotes on a Post.
     ```erb
     <!-- app/views/posts/show.html.erb -->
     <%= turbo_frame_tag dom_id(@post) do %>
-      <a href="#" data-turbo-reflex="VotesReflex#upvote">Upvote</a>
+      <a href="#" data-turbo-reflex="PostReflex#upvote">Upvote</a>
       Upvote Count: <%= @post.votes >
     <% end %>
     ```
@@ -172,7 +168,7 @@ This example illustrates how to use TurboReflex to manage upvotes on a Post.
 
     ```ruby
     # app/reflexes/posts_reflex.rb
-    class PostsReflex < TurboReflex::Base
+    class PostReflex < TurboReflex::Base
       def upvote
         Post.find(controller.params[:id]).increment! :votes
       end
@@ -221,18 +217,10 @@ TurboReflex supports the following lifecycle events.
 
 ### 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">
-    ```
+TurboReflex targets the [`closest`](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest) `<turbo-frame>` element by default,
+but you can also explicitly target other frames just like you normally would with Turbo Frames.
 
-2. Look for `data-turbo-frame` on the reflex element
+1. Look for `data-turbo-frame` on the reflex element
 
     ```erb
     <input type="checkbox"
@@ -240,7 +228,7 @@ but you can also explicitly target other frames.
       data-turbo-frame="some-frame-id">
     ```
 
-3. Find the closest `<turbo-frame>` to the reflex element
+1. Find the closest `<turbo-frame>` to the reflex element
 
     ```erb
     <turbo-frame id="example-frame">
@@ -442,6 +430,8 @@ 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.
 
+#### Running Locally
+
 ```sh
 git clone https://github.com/hopsoft/turbo_reflex.git
 cd turbo_reflex
@@ -451,6 +441,17 @@ bin/rails s
 # View the app in a browser at http://localhost:3000
 ```
 
+#### Running in Docker
+
+Docker users can get up and running even faster.
+
+```sh
+git clone https://github.com/hopsoft/turbo_reflex.git
+cd turbo_reflex
+docker compose up -d
+# 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.*
 
@@ -462,13 +463,14 @@ The gem is available as open source under the terms of the [MIT License](https:/
 
 ## Todos
 
+- [ ] Consider falling back to the turbo-reflex-frame when a frame can't be identified
+- [ ] Consider how to best support `link_to` with methods other than GET
+- [ ] Update system tests for new demos
 - [ ] 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

data/app/assets/builds/turbo_reflex.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 L(){Object.values(l).forEach(t=>console.log(t))}var o={...l,dispatch:y,logEventNames:L};var c={};addEventListener("turbo:before-fetch-response",t=>{let e=t.target;c[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=c[e.id]||e.src||e.dataset.turboReflexSrc,delete c[e.id]});var S={get token(){return document.getElementById("turbo-reflex-token").getAttribute("content")}},f=S;function m(t){return t.closest("[data-turbo-reflex]")}function F(t){return t.closest("turbo-frame")}function b(t){let e=t.dataset.turboFrame;if(!e){let r=F(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-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 u(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"]=f.token});function I(t){let e=document.createElement("a");return e.href=t,new URL(e)}function A(t,e={}){e.token=f.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);u("change",["input","select","textarea"]);u("submit",["form"]);u("click",["*"]);var M={registerEvent:u,logRegisteredEvents:R,logLifecycleEventNames:o.logEventNames};export{M as default};
+//# sourceMappingURL=turbo_reflex.js.map

data/app/assets/builds/turbo_reflex.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.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-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": "AAAA,IAAMA,EAAS,CACb,YAAa,4BACb,MAAO,qBACP,OAAQ,sBACR,MAAO,qBACP,eAAgB,gCAChB,aAAc,6BACd,gBAAiB,gCACnB,EAEA,SAASC,EAAUC,EAAMC,EAAS,SAAUC,EAAS,CAAC,EAAG,CACvD,IAAMC,EAAQ,IAAI,YAAYH,EAAM,CAClC,OAAAE,EACA,WAAY,GACZ,QAAS,EACX,CAAC,EACDD,EAAO,cAAcE,CAAK,CAC5B,CAEA,SAASC,GAAiB,CACxB,OAAO,OAAON,CAAM,EAAE,QAAQE,GAAQ,QAAQ,IAAIA,CAAI,CAAC,CACzD,CAEA,IAAOK,EAAQ,CAAE,GAAGP,EAAQ,SAAAC,EAAU,cAAAK,CAAc,ECtBpD,IAAME,EAAe,CAAC,EAGtB,iBAAiB,8BAA+BC,GAAS,CACvD,IAAMC,EAAQD,EAAM,OACpBD,EAAaE,EAAM,IAAMA,EAAM,IAE/B,GAAM,CAAE,kBAAAC,EAAmB,qBAAAC,CAAqB,EAAIF,EAAM,QAC1D,GAAI,CAACC,EAAmB,OAExB,IAAME,EAAU,SAAS,eAAeD,CAAoB,EAC5D,OAAOF,EAAM,QAAQ,kBACrB,OAAOA,EAAM,QAAQ,qBAErBI,EAAgB,SAASA,EAAgB,OAAQD,GAAW,SAAU,CACpE,MAAAH,EACA,QAASG,GAAW,gCACtB,CAAC,CACH,CAAC,EAGD,iBAAiB,mBAAoBJ,GAAS,CAC5C,IAAMC,EAAQD,EAAM,OACpBC,EAAM,QAAQ,eACZF,EAAaE,EAAM,KAAOA,EAAM,KAAOA,EAAM,QAAQ,eACvD,OAAOF,EAAaE,EAAM,GAC5B,CAAC,EC3BD,IAAMK,EAAW,CACf,IAAI,OAAS,CACX,OAAO,SAAS,eAAe,oBAAoB,EAAE,aAAa,SAAS,CAC7E,CACF,EAEOC,EAAQD,ECJf,SAASE,EAAmBC,EAAS,CACnC,OAAOA,EAAQ,QAAQ,qBAAqB,CAC9C,CAEA,SAASC,EAAkBD,EAAS,CAClC,OAAOA,EAAQ,QAAQ,aAAa,CACtC,CAEA,SAASE,EAAaF,EAAS,CAC7B,IAAIG,EAAKH,EAAQ,QAAQ,WACzB,GAAI,CAACG,EAAI,CACP,IAAMC,EAAQH,EAAiBD,CAAO,EAClCI,IAAOD,EAAKC,EAAM,GACxB,CACA,OAAKD,IACH,QAAQ,MACN,+CACA,iGACAH,CACF,EACAK,EAAgB,SAASA,EAAgB,eAAgBL,EAAS,CAChE,QAAAA,CACF,CAAC,GAEIG,CACT,CAEA,SAASG,EAAWH,EAAI,CACtB,IAAMC,EAAQ,SAAS,eAAeD,CAAE,EACxC,OAAKC,IACH,QAAQ,MAAM,cAAcD,oBAAqB,EACjDE,EAAgB,SAASA,EAAgB,aAAc,SAAU,CAAE,GAAAF,CAAG,CAAC,GAElEC,CACT,CAEA,SAASG,EAAcH,EAAO,CAC5B,IAAMI,EAAWJ,EAAM,QAAQ,gBAAkBA,EAAM,IACvD,OAAKI,IACH,QAAQ,MACN,sCAAsCJ,EAAM,mBAC5C,kFACA,0FACAA,CACF,EACAC,EAAgB,SAASA,EAAgB,gBAAiBD,EAAO,CAAE,MAAAA,CAAM,CAAC,GAErEI,CACT,CAEA,SAASC,EAA6BT,EAASU,EAAU,CAAC,EAAG,CAC3D,GAAIV,EAAQ,QAAQ,YAAY,IAAM,SACpC,OAAQU,EAAQ,MAAQV,EAAQ,MAElC,GAAI,CAACA,EAAQ,SACX,OAAQU,EAAQ,MAAQV,EAAQ,QAAQA,EAAQ,eAAe,MAEjEU,EAAQ,OAAS,MAAM,KAAKV,EAAQ,OAAO,EAAE,OAAO,CAACW,EAAMC,KACrDA,EAAO,UAAUD,EAAK,KAAKC,EAAO,KAAK,EACpCD,GACN,CAAC,CAAC,CACP,CAEA,SAASE,EAAuBb,EAAS,CACvC,IAAMU,EAAU,MAAM,KAAKV,EAAQ,UAAU,EAAE,OAAO,CAACW,EAAMG,KAC3DH,EAAKG,EAAK,MAAQA,EAAK,MAChBH,GACN,CAAC,CAAC,EAEL,OAAAD,EAAQ,IAAMV,EAAQ,QACtBU,EAAQ,QAAUV,EAAQ,QAC1BU,EAAQ,SAAWV,EAAQ,SAC3BS,EAA4BT,EAASU,CAAO,EAErCA,CACT,CC7EA,IAAMK,EAAmB,CAAC,EACtBC,EAEJ,SAASC,EAAuBC,EAAI,CAClCF,EAAgBE,CAClB,CAEA,SAASC,EAAeC,EAAWC,EAAU,CAC3CN,EAAiBK,GAAaC,EAC9B,SAAS,iBAAiBD,EAAWJ,EAAe,EAAI,CAC1D,CAEA,SAASM,EAAmBF,EAAWG,EAAS,CAC9C,OAAAA,EAAUA,EAAQ,YAAY,EAE5BR,EAAiBK,GAAW,SAASG,CAAO,GAC3C,CAAC,OAAO,OAAOR,CAAgB,EAC7B,KAAK,EACL,SAASQ,CAAO,GACjBR,EAAiBK,GAAW,SAAS,GAAG,CAE9C,CAEA,SAASI,GAAuB,CAC9B,QAAQ,IAAIT,CAAgB,CAC9B,CCLA,iBAAiB,6BAA8BU,GAAS,CACtD,IAAMC,EAAQD,EAAM,OACd,CAAE,kBAAAE,CAAkB,EAAID,EAAM,QACpC,GAAI,CAACC,EAAmB,OACxB,GAAM,CAAE,aAAAC,CAAa,EAAIH,EAAM,OAC/BG,EAAa,QAAQ,gBAAkBC,EAAS,KAClD,CAAC,EAED,SAASC,EAAUC,EAAW,CAC5B,IAAMC,EAAI,SAAS,cAAc,GAAG,EACpC,OAAAA,EAAE,KAAOD,EACF,IAAI,IAAIC,CAAC,CAClB,CAEA,SAASC,EAAkBC,EAAMC,EAAU,CAAC,EAAG,CAC7CA,EAAQ,MAAQN,EAAS,MACzB,IAAMO,EAAQ,SAAS,cAAc,OAAO,EAC5CA,EAAM,KAAO,SACbA,EAAM,KAAO,eACbA,EAAM,MAAQ,KAAK,UAAUD,CAAO,EACpCD,EAAK,YAAYE,CAAK,CACxB,CAEA,SAASC,EAAcZ,EAAO,CAC5B,IAAIa,EAASC,EAASb,EAAOc,EAC7B,GAAI,CAeF,GAdAF,EAAUG,EAAkBhB,EAAM,MAAM,EACpC,CAACa,GAED,CAACI,EAAkBjB,EAAM,KAAMa,EAAQ,OAAO,IAElDK,EAAgB,SAASA,EAAgB,YAAaL,EAAS,CAAE,QAAAA,CAAQ,CAAC,EAE1EC,EAAUK,EAAYN,CAAO,EACzB,CAACC,KAELb,EAAQmB,EAAUN,CAAO,EACrB,CAACb,KAELc,EAAWM,EAAapB,CAAK,EACzB,CAACc,GAAU,OAEf,IAAML,EAAU,CACd,QAASI,EACT,QAASQ,EAAsBT,CAAO,CACxC,EAYA,GAVAK,EAAgB,SAASA,EAAgB,MAAOL,EAAS,CACvD,QAAAA,EACA,QAAAC,EACA,MAAAb,EACA,SAAAc,EACA,QAAAL,CACF,CAAC,EACDT,EAAM,QAAQ,kBAAoB,GAClCA,EAAM,QAAQ,qBAAuBY,EAAQ,GAEzCA,EAAQ,QAAQ,YAAY,IAAM,OACpC,OAAOL,EAAiBK,EAASH,CAAO,EAE1CV,EAAM,eAAe,EACrB,IAAMuB,EAAWlB,EAASU,CAAQ,EAClCQ,EAAS,aAAa,IAAI,eAAgB,KAAK,UAAUb,CAAO,CAAC,EACjET,EAAM,IAAMsB,EAAS,SAAS,CAChC,OAASC,EAAP,CACA,QAAQ,MACN,+CACA,CAAE,QAAAX,EAAS,QAAAC,EAAS,MAAAb,EAAO,SAAAc,EAAU,OAAQf,EAAM,MAAO,EAC1DwB,CACF,EACAN,EAAgB,SAASA,EAAgB,MAAOL,GAAW,SAAU,CACnE,QAAAA,EACA,QAAAC,EACA,MAAAb,EACA,SAAAc,EACA,MAAAS,CACF,CAAC,CACH,CACF,CAGAC,EAAsBb,CAAY,EAClCc,EAAc,SAAU,CAAC,QAAS,SAAU,UAAU,CAAC,EACvDA,EAAc,SAAU,CAAC,MAAM,CAAC,EAChCA,EAAc,QAAS,CAAC,GAAG,CAAC,EAE5B,IAAOC,EAAQ,CACb,cAAAD,EACA,oBAAAE,EACA,uBAAwBV,EAAgB,aAC1C",
+  "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"]
+}

data/app/controllers/concerns/turbo_reflex/controller.rb

@@ -8,6 +8,7 @@ module TurboReflex::Controller
     after_action :append_turbo_reflex_turbo_streams, if: :turbo_reflex_performed?
     after_action :assign_turbo_reflex_token
     helper_method :turbo_reflex_meta_tag, :turbo_reflex_performed?, :turbo_reflex_requested?
+    # helper TurboReflex::TurboReflexHelper # only required if we isolate_namespace
   end
 
   def turbo_reflex_meta_tag

data/app/controllers/turbo_reflex/application_controller.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class TurboReflex::ApplicationController < ActionController::Base
+  include TurboReflex::Controller
+end

data/app/controllers/turbo_reflex/turbo_reflexes_controller.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class TurboReflex::TurboReflexesController < TurboReflex::ApplicationController
+  def show
+    return head(:ok) unless turbo_reflex_instance&.turbo_streams.present?
+    render html: view_context.turbo_reflex_frame_tag do
+      turbo_reflex_instance.turbo_streams.map(&:to_s).join
+    end
+  end
+end

data/app/helpers/turbo_reflex/turbo_reflex_helper.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module TurboReflex::TurboReflexHelper
+  include Turbo::FramesHelper
+
+  def turbo_reflex_frame_tag(&block)
+    turbo_frame_tag("turbo-reflex-frame", data: {turbo_reflex_src: turbo_reflex_path}, &block)
+  end
+end

data/app/javascript/elements.js

@@ -9,7 +9,7 @@ function findClosestFrame (element) {
 }
 
 function findFrameId (element) {
-  let id = element.dataset.turboReflexFrame || element.dataset.turboFrame
+  let id = element.dataset.turboFrame
   if (!id) {
     const frame = findClosestFrame(element)
     if (frame) id = frame.id
@@ -17,7 +17,7 @@ function findFrameId (element) {
   if (!id) {
     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.`,
+      `Please move the reflex element inside a <turbo-frame> or set the 'data-turbo-frame' attribute.`,
       element
     )
     LifecycleEvents.dispatch(LifecycleEvents.missingFrameId, element, {

data/bin/standardize

@@ -3,3 +3,5 @@
 bundle exec magic_frozen_string_literal
 bundle exec standardrb --fix
 yarn run prettier-standard "app/javascript/**/*.js"
+yarn run rustywind --write test/dummy/app
+yarn run rustywind --write --custom-regex "(:\s[\"'])(.+)[\"']" test/dummy/app/views/_tailwind.yml.erb

data/config/routes.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+Rails.application.routes.draw do
+  match "turbo_reflex", to: "turbo_reflex/turbo_reflexes#show", via: :all, as: :turbo_reflex
+end

data/docker-compose.yml

@@ -0,0 +1,46 @@
+version: "3.9"
+
+x-default-app: &default_app
+  build: .
+  image: turbo_reflex
+  tty: true
+  stdin_open: true
+  working_dir: /opt/turbo_reflex/test/dummy
+  environment:
+    RAILS_ENV: development
+  volumes:
+    - bundle:/usr/local/bundle:delegated
+    - node_modules:/opt/turbo_reflex/node_modules
+
+volumes:
+  bundle:
+  node_modules:
+
+services:
+  # ----------------------------------------------------------------------------
+  # Shell - Intended for tinkering and running misc commands
+  # ----------------------------------------------------------------------------
+  shell:
+    <<: *default_app
+    container_name: turbo_reflex-shell
+    command: /bin/bash -c "tail -f /dev/null"
+
+  # ----------------------------------------------------------------------------
+  # Web - Runs the test/dummy Rails app
+  # ----------------------------------------------------------------------------
+  web:
+    <<: *default_app
+    container_name: turbo_reflex-web
+    ports:
+      - 3000:3000
+    command: >
+      /bin/bash -c "git pull --no-rebase github main &&
+                    cd /opt/turbo_reflex &&
+                    bundle &&
+                    yarn &&
+                    cd /opt/turbo_reflex/test/dummy &&
+                    rm -f tmp/pids/server.pid &&
+                    bin/rails db:create db:migrate &&
+                    bin/rails assets:clobber &&
+                    bin/rails assets:precompile &&
+                    bin/rails s --binding=0.0.0.0 --port=3000"

data/fly.toml

@@ -0,0 +1,38 @@
+# fly.toml file generated for turbo-reflex on 2022-09-19T05:16:01-06:00
+
+app = "turbo-reflex"
+kill_signal = "SIGINT"
+kill_timeout = 5
+processes = []
+
+[env]
+
+[experimental]
+  allowed_public_ports = []
+  auto_rollback = true
+
+[[services]]
+  http_checks = []
+  internal_port = 3000
+  processes = ["app"]
+  protocol = "tcp"
+  script_checks = []
+  [services.concurrency]
+    hard_limit = 25
+    soft_limit = 20
+    type = "connections"
+
+  [[services.ports]]
+    force_https = true
+    handlers = ["http"]
+    port = 80
+
+  [[services.ports]]
+    handlers = ["tls", "http"]
+    port = 443
+
+  [[services.tcp_checks]]
+    grace_period = "1s"
+    interval = "15s"
+    restart_limit = 0
+    timeout = "2s"

data/lib/turbo_reflex/base.rb

@@ -3,6 +3,8 @@
 class TurboReflex::Base
   attr_reader :controller, :turbo_streams
 
+  delegate :render, to: :renderer
+
   def initialize(controller)
     @controller = controller
     @turbo_streams = Set.new
@@ -29,4 +31,8 @@ class TurboReflex::Base
   def turbo_stream
     @turbo_stream ||= Turbo::Streams::TagBuilder.new(controller.view_context)
   end
+
+  def renderer
+    ActionController::Renderer.for controller.class, controller.request.env
+  end
 end

data/lib/turbo_reflex/engine.rb

@@ -2,8 +2,23 @@
 
 require "turbo-rails"
 require_relative "version"
+require_relative "errors"
 require_relative "sanitizer"
 require_relative "base"
 
 class TurboReflex::Engine < ::Rails::Engine
+  # isolate_namespace TurboReflex
+
+  config.turbo_reflex = ActiveSupport::OrderedOptions.new
+  initializer "turbo_reflex.configuration" do
+    config.to_prepare do |app|
+      ::ApplicationController.send :include, TurboReflex::Controller
+    end
+
+    config.after_initialize do |app|
+      app.routes.draw do
+        mount TurboReflex::Engine => "/turbo_reflex"
+      end
+    end
+  end
 end

data/lib/turbo_reflex/errors.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module TurboReflex
+  class ResponseNotRenderedError < StandardError
+  end
+end

data/lib/turbo_reflex/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TurboReflex
-  VERSION = "0.0.2"
+  VERSION = "0.0.4"
 end

data/package.json

@@ -1,8 +1,8 @@
 {
   "name": "turbo_reflex",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Reflexes for Turbo Frames that help you build robust reactive applications",
-  "main": "app/assets/builds/turbo_reflex.js",
+  "main": "app/javascript/turbo_reflex.js",
   "repository": "https://github.com/hopsoft/turbo_reflex",
   "author": "Nate Hopkins (hopsoft) <natehop@gmail.com>",
   "license": "MIT",
@@ -12,9 +12,11 @@
   "devDependencies": {
     "esbuild": "^0.15.7",
     "eslint": "^8.19.0",
-    "prettier-standard": "^16.4.1"
+    "flowbite": "^1.5.3",
+    "prettier-standard": "^16.4.1",
+    "rustywind": "^0.15.1"
   },
   "scripts": {
-    "build": "esbuild app/javascript/turbo_reflex.js --bundle --minify --sourcemap --format=esm --outfile=app/assets/builds/turbo_reflex.min.js"
+    "build": "esbuild app/javascript/turbo_reflex.js --bundle --minify --sourcemap --format=esm --outfile=app/assets/builds/turbo_reflex.js"
   }
 }