phlex-reactive 0.4.3 → 0.4.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 63629dadef998637b9b65f885a00d54297821f405599a64c103e3b482e991fdc
-  data.tar.gz: 4826a5cf276f46cdf99575cb624169bacbbc3bf85115ca1256542e4c7aeb6f6b
+  metadata.gz: 68b6f765fc61e5be0b5c338effc94c2c4b283aa64d54f916e44767b4aecf62b9
+  data.tar.gz: e8c2e1c676b6d40d2d89e6acada741c2712746fd9e1bd5b9f54770c730a679b9
 SHA512:
-  metadata.gz: 7561f6119d33b19334078c64570bb2fc7e6e9064b0ee90c4bcbac21dbbe2e07d5ccdb0854d146848efee66bb084c895eb89a853c3931de4c7fd115a0594163d9
-  data.tar.gz: 5220bfda32b47381507fed0d3a9a9d6620f06e9a10dbd8eb877fc07a0f420a8a1e3ff2dd06805059b0b0b7f550bb76cac81a7899f258bb85508643ef61dc8e35
+  metadata.gz: 23c24dcacc6defa4d9479c82aa4cd01778e7a7e02cbe2893ef18539becab491de69195d7da50a5876001633e8f3bfe73a582298a7b4161f2d3f4d5c882caef76
+  data.tar.gz: a2373220f92ad0a9b84ef2ab555b0d6453e889792a334cb89a46d221acd4d6bce64864aa0b7b32e493461613d7fce076f46eb1fe3565a6eb91a7b19b47f01b36

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

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")) { ... }

data/lib/phlex/reactive/version.rb

@@ -2,6 +2,6 @@
 
 module Phlex
   module Reactive
-    VERSION = "0.4.3"
+    VERSION = "0.4.4"
   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.4
 platform: ruby
 authors:
 - Mikael Henriksson