phlex-reactive 0.16.7 → 0.16.8

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

@@ -136,6 +136,20 @@ export function registerReactiveToken() {
 // is emitted AFTER all render streams in the reply (the endpoint appends it
 // last), so focus("[name=next]") sees the freshly morphed DOM — Turbo applies
 // streams in document order.
+//
+// Focus ops wait one frame (issue #446). Turbo renders a stream message inside
+// its focus preservation: it reads document.activeElement, appends the
+// streams, waits one animation frame, reads it again and, when the element
+// focused before has an id and focus moved, focuses that element again. This
+// action runs behind a frame each stream queued before that compare, so a
+// focus, focus_first or blur applied here would be undone, and the old
+// field's focus binding would run again. The ops before the first focus op
+// still run now; that op and the rest of its chain (order kept) run in a frame
+// queued from here, the one after the compare, which then saw nothing move and
+// restored nothing. Plain requestAnimationFrame, never a timeout: in a hidden
+// tab Turbo's compare waits for the first frame too.
+const FOCUS_OPS = ["focus", "focus_first", "blur"]
+
 export function registerReactiveJs() {
   const actions = window.Turbo?.StreamActions
   if (!actions || actions["reactive:js"]) return
@@ -155,16 +169,21 @@ export function registerReactiveJs() {
       }
       return
     }
-    applyOps(
-      list,
-      (args) => streamOpTargets(args, root),
-      verbose
-        ? (name, args) =>
-            __SPLIT__
-              ? withFeature("devtools", (devtools) => devtools.diagnoseStream(name, args, root))
-              : devtoolsFeature.diagnoseStream(name, args, root)
-        : undefined,
-    )
+    const run = (ops) =>
+      applyOps(
+        ops,
+        (args) => streamOpTargets(args, root),
+        verbose
+          ? (name, args) =>
+              __SPLIT__
+                ? withFeature("devtools", (devtools) => devtools.diagnoseStream(name, args, root))
+                : devtoolsFeature.diagnoseStream(name, args, root)
+          : undefined,
+      )
+    const at = list.findIndex((entry) => FOCUS_OPS.includes(entry?.[0]))
+    if (at < 0 || typeof requestAnimationFrame !== "function") return run(list)
+    run(list.slice(0, at))
+    requestAnimationFrame(() => run(list.slice(at)))
   }
 }
 
@@ -2046,6 +2065,10 @@ function streamOpTargets(args, root) {
 //   core.owns(el)                         is this control this root's own, not
 //                                         a nested reactive root's (issue #15)
 //   core.ownership()                      the hoisted per-pass form of owns
+//   core.bindingOwns(el)                  may this root's bindings READ this
+//                                         control: owns, or a shared field
+//                                         just below (issue #440)
+//   core.bindingOwnership()               the hoisted per-pass form of it
 //   core.opTargets(args)                  the elements an op's `to:` names
 //   core.applyOps(list, defaultTo)        run an op list root-scoped
 //   core.diagnose(label, args)            the zero-target warning
@@ -2991,6 +3014,8 @@ export default class extends Controller {
       },
       owns: (el) => this.#ownsField(el),
       ownership: () => this.#ownershipFilter(),
+      bindingOwns: (el) => this.#bindingOwns(el),
+      bindingOwnership: () => this.#bindingOwnership(),
       opTargets: (args) => this.#opTargets(args),
       diagnose: (label, args) => this.#diagnoseZeroTargets(label, args),
       // Apply an op list root-scoped, with the zero-target diagnostics; a
@@ -4397,7 +4422,8 @@ export default class extends Controller {
   // the control's own server root sits directly below this one. One level: a
   // grand-host never sees it. Whatever reads #collectFields sees it too: the
   // request, and the conditional confirm (it judges the fields the action is
-  // about to post). Bindings, computes, listnav, dirty tracking and persist
+  // about to post). The client bindings read such a control too
+  // (#bindingOwnership); listnav, ops, busy_on, dirty tracking and persist
   // keep the strict nearest-root #ownershipFilter / #ownsField.
   #serverFieldFilter() {
     const nested = this.element.querySelectorAll(AWAKE_ROOT)
@@ -4410,6 +4436,30 @@ export default class extends Controller {
     }
   }
 
+  // What this root's client BINDINGS read (issue #440): its own controls, as
+  // #ownsField, plus a control marked data-reactive-shared-field whose own
+  // server root is this one (under client-only roots, issue #410) or sits
+  // directly below it: one level, the #serverFieldFilter rule. Field reads
+  // only: show (every term, after:, clear:, disable: true), enable, show and
+  // group targets, checked_* counts, on_complete, media, css vars, compute
+  // inputs and outputs. Which binding ELEMENTS a root evaluates, and every op, listnav,
+  // busy_on, dirty and persist read, stay on the strict #ownsField. An
+  // unmarked control in a nested root costs one attribute read more.
+  #bindingOwns(el) {
+    if (this.#ownsField(el)) return true
+    if (el.getAttribute?.("data-reactive-shared-field") == null) return false
+    const own = serverRoot(el, AWAKE_ROOT, this.element)
+    return own === this.element || serverRoot(own?.parentElement, AWAKE_ROOT, this.element) === this.element
+  }
+
+  // The hoisted per-pass form of #bindingOwns, with #ownershipFilter's fast
+  // path: no nested root, every control is this root's. Never cached on the
+  // instance (a morph replaces nodes).
+  #bindingOwnership() {
+    if (this.element.querySelectorAll(AWAKE_ROOT).length === 0) return () => true
+    return (el) => this.#bindingOwns(el)
+  }
+
   // One walk over THIS root's named controls (not a nested reactive root's),
   // returning both the scalar `fields` and any chosen `files`. The ownership
   // predicate is hoisted ONCE (issue #117) via #ownershipFilter — in the common

data/lib/phlex/reactive/version.rb

@@ -2,6 +2,6 @@
 
 module Phlex
   module Reactive
-    VERSION = "0.16.7"
+    VERSION = "0.16.8"
   end
 end

metadata

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