phlex-reactive 0.4.2 → 0.4.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8ec8a731ff4ae0e729288d805070e04c8860b7a51591a69b946ed42bd4996d97
-  data.tar.gz: '018dafe55b68a05a46ef52c4e896803a9933beecf50e87f1d428073065fd3205'
+  metadata.gz: 68b6f765fc61e5be0b5c338effc94c2c4b283aa64d54f916e44767b4aecf62b9
+  data.tar.gz: e8c2e1c676b6d40d2d89e6acada741c2712746fd9e1bd5b9f54770c730a679b9
 SHA512:
-  metadata.gz: 949549bc92c39def933aea8d83cf61db41ad686c8184c8a284657bdd99e1178dece129258e0e874ec1dd157748f69fcd11dc77fe140557c20d7dab217500a46b
-  data.tar.gz: ab245aa3bf1a4f65f392ae2c4b3e98cf20a6d45064375a2c2168b2c7214ed4d27bc78c6cd0f069d2ef82cad771ee233376742de6e22636f5b0efb81390f5b8ea
+  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
@@ -72,6 +85,28 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Fixed
 
+- **Client mirror of #44: collections of *reactive* rows were STILL add-once-only in
+  the browser — `#extractToken` read the FIRST token in the response, not this
+  controller's own (#46).** The server fix in 0.4.2 (#44) made the `add` response
+  correct — the container's fresh `reactive:token` stream is present — but the
+  client still broke. After each action the reactive controller stores the
+  response's fresh token for its NEXT dispatch; `#extractToken` did
+  `html.match(/data-reactive-token-value="([^"]+)"/)` — the FIRST match in the whole
+  body. On a collection of reactive rows the response is, in body order: the
+  appended/prepended ROW (carrying its OWN token, since a reactive row is itself a
+  `data-controller="reactive"` root) FIRST, then the container's `reactive:token`
+  refresh LAST. So the list controller stored the ROW's token; its second dispatch
+  sent a row token → failed verification → the second add silently did nothing. The
+  fix reads the token that RE-RENDERS this controller's own element id — preferring
+  the dedicated `reactive:token` stream targeting `this.element.id`, then a self
+  `replace`/`update` of it — and otherwise keeps the existing token (never adopting
+  a child row's or a sibling component's token). This is the exact client analogue
+  of the #44 server rule: a stream "carries the token for C" only when it re-renders
+  C itself, never when it inserts children into C. A request-level test can't catch
+  this (the server response is already correct); covered by a bun unit test on the
+  token selection AND a real two-click browser test (a collection of reactive rows →
+  three rows after three adds) under Puma + Falcon. Refs cosmos#1939, #44, #30.
+
 - **Collections of *reactive* rows were still add-once-only — a prepended/appended
   row's OWN token suppressed the container's token refresh (#44).** When an action
   appended/prepended a *reactive* child row into a container whose `#id` equals the

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

@@ -64,6 +64,13 @@ export function registerReactiveActions() {
   registerReactiveToken()
 }
 
+// Escape a DOM id for safe interpolation into a RegExp (an id can legally contain
+// regex metacharacters like `.`/`:` — e.g. an `escape:`-namespaced or dotted id).
+// Used by #extractToken to match the stream that re-renders THIS element by id.
+export function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+}
+
 if (typeof window !== "undefined") {
   if (window.Turbo) registerReactiveActions()
   else document.addEventListener("turbo:load", registerReactiveActions, { once: true })
@@ -128,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
@@ -286,9 +309,46 @@ export default class extends Controller {
     this.#tokenCache = value
   }
 
+  // Read the next token for THIS controller — the one that re-renders THIS
+  // element's id, never just the first token in the body (issue #46). On a
+  // collection of REACTIVE rows the prepended/appended ROW carries its OWN
+  // data-reactive-token-value and it sorts FIRST in the response; the list's own
+  // fresh token rides a trailing `reactive:token` stream targeting the container.
+  // Grabbing the first match stored the ROW's token, so the list's SECOND
+  // dispatch sent a row token → failed verification → add-once-only. This mirrors
+  // the server's carries_token_for? (#44): a stream carries OUR token only when it
+  // RE-RENDERS our id (reactive:token / replace / update of `this.element.id`) —
+  // append/prepend insert children and never count. Returns undefined when no
+  // stream re-renders our id, so #currentToken keeps its existing value.
   #extractToken(html) {
-    const match = html.match(/data-reactive-token-value="([^"]+)"/)
-    return match?.[1]
+    const id = this.element.id
+    if (!id) {
+      // No id to self-match (shouldn't happen for a reactive root). Fall back to
+      // the legacy first-token behavior so a single-component response still works.
+      return html.match(/data-reactive-token-value="([^"]+)"/)?.[1]
+    }
+
+    // The dedicated token-only refresh for THIS element (partial updates / the
+    // collection container) — an attribute on the <turbo-stream> itself.
+    const tokenStream = html.match(
+      new RegExp(
+        `<turbo-stream\\b[^>]*\\baction="reactive:token"[^>]*\\btarget="${escapeRegExp(id)}"[^>]*\\bdata-reactive-token-value="([^"]+)"`,
+      ),
+    )
+    if (tokenStream) return tokenStream[1]
+
+    // A full self re-render: a replace/update of THIS element whose template root
+    // carries the fresh token. Scope the token search to that one stream so a
+    // sibling/child token elsewhere in the body can't leak in.
+    const selfStream = html.match(
+      new RegExp(
+        `<turbo-stream\\b[^>]*\\baction="(?:replace|update)"[^>]*\\btarget="${escapeRegExp(id)}"[^>]*>([\\s\\S]*?)</turbo-stream>`,
+      ),
+    )
+    if (selfStream) return selfStream[1].match(/data-reactive-token-value="([^"]+)"/)?.[1]
+
+    // Nothing re-rendered our id — keep the current token.
+    return undefined
   }
 
   // True when `el` is collected by THIS reactive root and not by a nested one.

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.2"
+    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.2
+  version: 0.4.4
 platform: ruby
 authors:
 - Mikael Henriksson