phlex-reactive 0.4.2 → 0.4.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8ec8a731ff4ae0e729288d805070e04c8860b7a51591a69b946ed42bd4996d97
-  data.tar.gz: '018dafe55b68a05a46ef52c4e896803a9933beecf50e87f1d428073065fd3205'
+  metadata.gz: 63629dadef998637b9b65f885a00d54297821f405599a64c103e3b482e991fdc
+  data.tar.gz: 4826a5cf276f46cdf99575cb624169bacbbc3bf85115ca1256542e4c7aeb6f6b
 SHA512:
-  metadata.gz: 949549bc92c39def933aea8d83cf61db41ad686c8184c8a284657bdd99e1178dece129258e0e874ec1dd157748f69fcd11dc77fe140557c20d7dab217500a46b
-  data.tar.gz: ab245aa3bf1a4f65f392ae2c4b3e98cf20a6d45064375a2c2168b2c7214ed4d27bc78c6cd0f069d2ef82cad771ee233376742de6e22636f5b0efb81390f5b8ea
+  metadata.gz: 7561f6119d33b19334078c64570bb2fc7e6e9064b0ee90c4bcbac21dbbe2e07d5ccdb0854d146848efee66bb084c895eb89a853c3931de4c7fd115a0594163d9
+  data.tar.gz: 5220bfda32b47381507fed0d3a9a9d6620f06e9a10dbd8eb877fc07a0f420a8a1e3ff2dd06805059b0b0b7f550bb76cac81a7899f258bb85508643ef61dc8e35

data/CHANGELOG.md

@@ -72,6 +72,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/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 })
@@ -286,9 +293,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/phlex/reactive/version.rb

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