phlex-reactive 0.4.3 → 0.4.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 63629dadef998637b9b65f885a00d54297821f405599a64c103e3b482e991fdc
-  data.tar.gz: 4826a5cf276f46cdf99575cb624169bacbbc3bf85115ca1256542e4c7aeb6f6b
+  metadata.gz: 781352f05403f22ccf974061e325f0066b9809c20de36a881279fcea424c55a5
+  data.tar.gz: dfd1747be189e0c451f390f396d535aa5c36f7e0fd8d95f31a331a584537976c
 SHA512:
-  metadata.gz: 7561f6119d33b19334078c64570bb2fc7e6e9064b0ee90c4bcbac21dbbe2e07d5ccdb0854d146848efee66bb084c895eb89a853c3931de4c7fd115a0594163d9
-  data.tar.gz: 5220bfda32b47381507fed0d3a9a9d6620f06e9a10dbd8eb877fc07a0f420a8a1e3ff2dd06805059b0b0b7f550bb76cac81a7899f258bb85508643ef61dc8e35
+  metadata.gz: 14e5f543ebb18929407b21a90f6851fcbc685954d23c2ef9aa6a37ed770c85bdf7d477bb430799f81837d04a31154ea85343406e6767f128862fecec82aca401
+  data.tar.gz: 55d32359caa8bb5aa7be4b8db1c55cdf58651b08361dd4bd5e87e4b7bf50dd4cdb32d3aaede40be35966e28cf994ff8047006c085f17fc9002bc26f9cc3cf4d7

data/CHANGELOG.md

@@ -8,6 +8,19 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Added
 
+- **`reactive_root` helper — the whole reactive root in one spread (#48).**
+  `reactive_attrs` doesn't emit `id:`, so an app could put `id:` on a *child*
+  element and leave the controller root's `id` empty — which silently re-opened
+  the #46 add-once-only bug (the client falls back to the first token in the
+  response, the next action POSTs a foreign token, and the endpoint 403s).
+  `div(**reactive_root)` emits the component `id` **and** `reactive_attrs` on one
+  element, so the id can't land on the wrong node; `reactive_root(class:, data:)`
+  deep-merges via `mix`, and an explicit `id:` override still wins. `reactive_attrs`
+  is unchanged — existing `div(id:, **reactive_attrs)` components keep working. The
+  generic Stimulus controller now also `console.warn`s on `connect()` when a
+  reactive root has an empty `id`, so the failure surfaces on page load (a one-line
+  hint) instead of on the second click. README/docs promote `div(**reactive_root)`.
+
 - **File / multipart params in a reactive action (#34).** An action can now accept
   an uploaded file: declare `params: { file: :file }` (or `[:file]` for multiple).
   When the reactive root holds a populated `<input type="file">`, the client sends

data/README.md

@@ -26,7 +26,7 @@ class Counter < ApplicationComponent
   def decrement = @count -= 1
 
   def view_template
-    div(id:, **reactive_attrs) do
+    div(**reactive_root) do
       button(**on(:decrement)) { "−" }
       span { @count }
       button(**on(:increment)) { "+" }
@@ -245,7 +245,7 @@ class Todos::Item < ApplicationComponent
   end
 
   def view_template
-    li(id:, **reactive_attrs, class: ("done" if @todo.done?)) do
+    li(**reactive_root(class: ("done" if @todo.done?))) do
       button(**on(:toggle)) { @todo.done? ? "✓" : "○" }
       span { @todo.title }
     end
@@ -307,7 +307,8 @@ Use in controllers: `render turbo_stream: Counter.replace(counter)`.
 | `reactive_record :name` | Record-backed identity (GlobalID). State = the DB. |
 | `reactive_state :a, :b` | Signed instance-var identity. Standalone, or combined with `reactive_record` to sign transient UI state alongside the row. |
 | `action :name, params: { x: :integer }` | Declare a client-invokable action + its param schema. **Default-deny.** |
-| `reactive_attrs` | Spread onto the root element: marks it reactive + carries the signed token. |
+| `reactive_root(**overrides)` | Spread onto the root element: emits the component `id` **and** `reactive_attrs` together, so the controller root always carries `#id`. Preferred over `id:` + `reactive_attrs`. `**overrides` (`class:`/`data:`) deep-merge. |
+| `reactive_attrs` | Marks an element reactive + carries the signed token (no `id`). Spread alongside `id:` on the **same** element: `div(id:, **reactive_attrs)`. Prefer `reactive_root`, which can't split them. |
 | `on(:action, event: "click", **params)` | Spread onto a trigger element. Adds `type=button` for clicks. |
 | `on(:action, event: "input", debounce: 300)` | Coalesce rapid events into one round trip after a quiet period (live-as-you-type). |
 | `reactive_input(:param, **attrs)` / `reactive_select(:param, **attrs)` | Render a control already bound to an action param (no magic `name:`). |
@@ -413,17 +414,29 @@ input(**mix(on(:update, event: "input", debounce: 300), name: "quantity", value:
 
 **Combining `on(...)` / `reactive_attrs` with your own attributes.** Both return
 a hash that includes a `data:` key. Spreading them *and* passing another `data:`
-(or `class:`, `id:`) would clobber it — use Phlex's `mix` to deep-merge:
+(or `class:`, `id:`) would clobber it — use Phlex's `mix` to deep-merge. For the
+**root**, prefer `reactive_root`, which already `mix`es id + token for you:
 
 ```ruby
 # ✅ merges cleanly (data-action survives, your data-testid/class are added)
 button(**mix(on(:increment), class: "btn", data: { testid: "inc" })) { "+" }
-div(**mix(reactive_attrs, id:, class: "card")) { ... }
+div(**reactive_root(class: "card", data: { testid: "root" })) { ... }   # id + token + your attrs
 
 # ❌ the extra data: overwrites on()'s data:, so the action never binds
 button(**on(:increment), data: { testid: "inc" }) { "+" }
 ```
 
+> **The reactive root must carry `#id` (issue #48).** The server targets your
+> component's `#id` and the client self-matches its next signed token by the root
+> element's `id`. `reactive_attrs` does **not** emit the id — so if you put `id:`
+> on a **child** instead of the `**reactive_attrs` element, the root's id is empty,
+> token threading falls back to the first token in the response, and the *next*
+> action silently fails with **HTTP 403**. Use `div(**reactive_root)` (it emits id
+> + token on one element) so the id can't land on the wrong node; if you spread
+> `reactive_attrs` directly, keep `id:` on the **same** element
+> (`div(id:, **reactive_attrs)`). The controller `console.warn`s on connect when a
+> reactive root has no id.
+
 **Binding inputs to action params (drop the magic `name:`).** A field's value
 travels with an action only if its `name` equals the param. Hand-writing
 `name: "value"` on every input is easy to forget — the action then silently gets
@@ -435,7 +448,7 @@ mode):
 action :save, params: { value: :string, status: :string }
 
 def view_template
-  span(id:, **reactive_attrs) do
+  span(**reactive_root) do
     reactive_input(:value, value: @record.name)            # <input name="value" …>
     reactive_select(:status) do                            # <select name="status">…</select>
       %w[open closed].each { |s| option(value: s, selected: s == @record.status) { s } }
@@ -719,7 +732,7 @@ class Counter < ApplicationComponent
   def decrement = @counter.decrement!(:value)
 
   def view_template
-    div(id:, **reactive_attrs) do
+    div(**reactive_root) do
       button(**on(:decrement)) { "−" }
       span { @counter.value }
       button(**on(:increment)) { "+" }

data/app/javascript/phlex/reactive/reactive_controller.js

@@ -135,6 +135,22 @@ export default class extends Controller {
   // guard above knows the controller was registered (issue #26 part 2).
   connect() {
     reactiveConnected = true
+
+    // Root-id guard (issue #48). The token round trip assumes the reactive root
+    // element's id == component.id: the server targets component.id and the client
+    // self-matches its NEXT token by this.element.id (#extractToken, issue #46).
+    // If `id:` landed on a CHILD instead of the `**reactive_attrs` root, this id is
+    // "" — #extractToken falls back to the FIRST token in the response (a child's),
+    // so the next action POSTs a foreign token → endpoint default-deny → silent 403.
+    // Warn NOW (on connect) so the failure surfaces on page load, not on click 2.
+    if (this.element.id === "") {
+      console.warn(
+        "[phlex-reactive] a reactive root has no id; its next-action token can't self-match " +
+          "and may fall back to the first token in the response → a silent HTTP 403 on the NEXT action. " +
+          "Put id: on the SAME element as reactive_attrs — use div(**reactive_root) (emits id + token together), " +
+          "or div(id:, **reactive_attrs). The id: must NOT be on a child. See the README."
+      )
+    }
   }
 
   // Tear down any pending debounce timers when the controller leaves the DOM
@@ -152,9 +168,22 @@ export default class extends Controller {
   // a per-controller promise makes each dispatch wait for the previous one, so
   // it always uses the freshest token.
   dispatch(event) {
-    const { action, params, debounce } = event.params
+    const { action, params, debounce, confirm } = event.params
     if (!action) return
 
+    // Confirmation gate (issue #52). A destructive reactive trigger can't use
+    // Hotwire's data-turbo-confirm — this controller preempts the event — so a
+    // `confirm:` message threads a data-reactive-confirm-param and we prompt
+    // HERE, BEFORE any preventDefault/enqueue/debounce. On decline we still
+    // preventDefault (so a `submit`/click can't natively navigate on cancel)
+    // and bail — nothing is enqueued, no timer is scheduled. window.confirm is
+    // synchronous + screen-reader friendly and keeps the no-dependency default;
+    // a richer/async dialog can be layered on additively later.
+    if (confirm && !window.confirm(confirm)) {
+      event.preventDefault()
+      return
+    }
+
     // Stop native behavior (button submit / FORM NAVIGATION) HERE, synchronously
     // within the event dispatch. preventDefault() only works while the event is
     // still being handled — deferring it into the request-queue microtask (below)

data/lib/generators/phlex/reactive/component/templates/component.rb.erb

@@ -24,7 +24,7 @@ class <%= class_name %> < ApplicationComponent
 <% end -%>
 
   def view_template
-    div(id:, **reactive_attrs) do
+    div(**reactive_root) do
 <% action_names.each do |a| -%>
       button(**on(:<%= a %>)) { "<%= a.to_s.humanize %>" }
 <% end -%>
@@ -51,7 +51,7 @@ class <%= class_name %> < ApplicationComponent
 <% end -%>
 
   def view_template
-    div(id:, **reactive_attrs) do
+    div(**reactive_root) do
 <% state_keys.each do |k| -%>
       span(data: { <%= file_name %>_<%= k %>: true }) { @<%= k %>.to_s }
 <% end -%>

data/lib/phlex/reactive/component.rb

@@ -270,6 +270,26 @@ module Phlex
         }
       end
 
+      # The WHOLE reactive root in one spread (issue #48). reactive_attrs alone
+      # doesn't emit `id:`, so `id:` and `data-controller="reactive"` can land on
+      # DIFFERENT elements — putting `id:` on a child leaves the controller root's
+      # `id` empty, which silently breaks token threading (the client self-matches
+      # its next token by `this.element.id`) and 403s on the next action.
+      #
+      # reactive_root binds the id to the SAME element as reactive_attrs, so the
+      # footgun is unbuildable:
+      #   div(**reactive_root) { ... }                       # id + controller + token
+      #   div(**reactive_root(class: "card")) { ... }        # add your own attrs
+      #
+      # mix deep-merges, so overrides add `class:`/`data:` without clobbering the
+      # controller/token data: (a bare data: would). The id is resolved separately
+      # (an explicit override wins as a clean replace, not a `mix` string-concat —
+      # mix would join two String ids into "default override").
+      def reactive_root(**overrides)
+        root_id = overrides.delete(:id) || id
+        mix({ **reactive_attrs }, overrides, { id: root_id })
+      end
+
       # Attributes for an element that triggers an action.
       #   button(**on(:toggle)) { "○" }
       #   form(**on(:save, event: "submit")) { ... }
@@ -284,13 +304,22 @@ module Phlex
       # live-update-as-you-type doesn't POST per keystroke. A blur flushes a
       # pending dispatch so the last edit is never dropped. Omit it for the
       # immediate-dispatch default.
+      #
+      # `confirm:` (a message string) gates the action behind a confirmation
+      # prompt (issue #52). Destructive reactive triggers can't use Hotwire's
+      # `data-turbo-confirm` — the reactive controller calls preventDefault and
+      # enqueues the POST itself, so Turbo's confirm handling never runs. The
+      # client shows window.confirm(message) FIRST and bails before any
+      # enqueue/debounce if the user declines (and prevents the native default so
+      # a `submit` trigger can't navigate on cancel). Omit it for no prompt.
+      #   button(**on(:destroy, confirm: "Really delete this item?")) { "Delete" }
       # The verbatim JSON for an empty explicit-params payload. The common
       # trigger (on(:increment), no params) hits this on EVERY render — skipping
       # params.to_json (which re-serializes {} to the same "{}" each time) avoids
       # a per-render allocation while keeping the wire format byte-identical.
       EMPTY_PARAMS_JSON = "{}"
 
-      def on(action_name, event: "click", debounce: nil, **params)
+      def on(action_name, event: "click", debounce: nil, confirm: nil, **params)
         attrs = {
           data: {
             action: "#{event}->reactive#dispatch",
@@ -299,6 +328,7 @@ module Phlex
           }
         }
         attrs[:data][:reactive_debounce_param] = debounce if debounce
+        attrs[:data][:reactive_confirm_param] = confirm if confirm
         attrs[:type] = "button" if event == "click"
         attrs
       end

data/lib/phlex/reactive/version.rb

@@ -2,6 +2,6 @@
 
 module Phlex
   module Reactive
-    VERSION = "0.4.3"
+    VERSION = "0.4.5"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex-reactive
 version: !ruby/object:Gem::Version
-  version: 0.4.3
+  version: 0.4.5
 platform: ruby
 authors:
 - Mikael Henriksson