phlex-reactive 0.16.6 → 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)))
   }
 }
 
@@ -1490,16 +1509,36 @@ function previewFile(input, args, resolveTargets) {
   // `invalid` event fired into the app's own listeners.
   const files = [...(args.valid === true && input.validity?.valid === false ? [] : (input.files ?? []))]
   const accepts = previewAccepts(input, args.accept)
-  const listed = files.filter((f) => typeof f?.type === "string" && accepts(f))
-  // Only an image is painted: a listed PDF clears the preview, unrefused.
-  let file = listed.find((f) => f.type.startsWith("image/"))
-  // A refused file (issue #391) clears like an empty pick and says why. The
-  // input keeps its files and its validity: the page owns the reset. Size is
-  // read BEFORE an object URL exists, so an over-size file never gets one.
-  let reason = files.length > 0 && listed.length === 0 ? "type" : null
-  if (file && Number.isInteger(args.max_bytes) && file.size > args.max_bytes) reason = "size"
-  const refused = reason === "size" ? file : files[0]
-  if (reason) file = null
+  // Size is read BEFORE an object URL exists, so an over-size file never gets one.
+  const oversize = (f) => Number.isInteger(args.max_bytes) && f.size > args.max_bytes
+  const rejected = []
+  let file
+  if (args.per_file === true && input.multiple) {
+    // Several files (issue #439): every file is checked, accept then
+    // max_bytes. The refused ones leave input.files here, synchronously, so an
+    // action bound after the op on the same event posts only the kept ones.
+    const kept = files.filter((f, index) => {
+      const reason = typeof f?.type === "string" && accepts(f) ? oversize(f) && "size" : "type"
+      if (reason) rejected.push({ reason, file: f, index })
+      return !reason
+    })
+    // remaining: the files the input keeps, and so the ones an action posts.
+    const remaining = rejected.length > 0 && !keepFiles(input, kept) ? files.length : kept.length
+    for (const detail of rejected) detail.remaining = remaining
+    file = kept.find((f) => f.type.startsWith("image/"))
+  } else {
+    const listed = files.filter((f) => typeof f?.type === "string" && accepts(f))
+    // Only an image is painted: a listed PDF clears the preview, unrefused.
+    file = listed.find((f) => f.type.startsWith("image/"))
+    // A refused file (issue #391) clears like an empty pick and says why. The
+    // input keeps its files and its validity: the page owns the reset.
+    let reason = files.length > 0 && listed.length === 0 ? "type" : null
+    if (file && oversize(file)) reason = "size"
+    if (reason) {
+      rejected.push({ reason, file: reason === "size" ? file : files[0] })
+      file = null
+    }
+  }
   forgetPreview(img)
   if (file) {
     const url = URL.createObjectURL(file)
@@ -1516,9 +1555,23 @@ function previewFile(input, args, resolveTargets) {
   if (args.name != null) {
     for (const node of resolveTargets({ ...args, to: args.name })) node.textContent = file ? file.name : ""
   }
-  if (reason) {
-    input.dispatchEvent(new CustomEvent("reactive:file-rejected", { bubbles: true, detail: { reason, file: refused } }))
+  for (const detail of rejected) input.dispatchEvent(new CustomEvent("reactive:file-rejected", { bubbles: true, detail }))
+}
+
+// Rebuild input.files from the kept files (issue #439); true once it did. A
+// DataTransfer is the one way to make a FileList; without one the refused
+// files stay in the input (the rejections still fire), and a verbose root is told.
+function keepFiles(input, kept) {
+  if (typeof DataTransfer !== "function") {
+    if (input.closest?.('[data-reactive-verbose="true"], [data-reactive-debug="true"]')) {
+      warnPreview("per_file: has no DataTransfer to drop the refused files from the input")
+    }
+    return false
   }
+  const transfer = new DataTransfer()
+  for (const f of kept) transfer.items.add(f)
+  input.files = transfer.files
+  return true
 }
 
 // Which files the page takes: an image by default. accept: true reads the
@@ -2012,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
@@ -2957,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
@@ -4363,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)
@@ -4376,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/js.rb

@@ -329,8 +329,21 @@ module Phlex
       #   input(type: "file", id: "photo-file", accept: "image/png,image/jpeg",
       #     **on_client(:change, js.preview_file("#photo-file", into: "#photo",
       #       wrap: "#photo-frame", max_bytes: 2_000_000, accept: true)))
-
-      def preview_file(to, into:, name: nil, global: false, valid: false, wrap: nil, max_bytes: nil, accept: nil)
+      #
+      # Several files (issue #439): `per_file: true` on an input with
+      # `multiple` checks EVERY file (accept, then max_bytes), rebuilds
+      # input.files from the accepted ones (synchronously, so an
+      # `on(:action, event: "change")` mixed in AFTER the op posts only those),
+      # dispatches one `reactive:file-rejected` per refused file
+      # (detail.reason, file, index — its place in the pick — and remaining,
+      # how many files the input keeps), and paints the first accepted image.
+      # A single input, or per_file: omitted, keeps the behaviour above.
+      #   input(type: "file", id: "pick", name: "file", multiple: true, accept: "image/png",
+      #     **mix(on_client(:change, js.preview_file("#pick", into: "#shot", max_bytes: 1_000_000,
+      #       accept: true, per_file: true)), on(:upload, event: "change")))
+
+      def preview_file(to, into:, name: nil, global: false, valid: false, wrap: nil, max_bytes: nil, accept: nil,
+                       per_file: false)
         if [:root, ROOT_SENTINEL].include?(to)
           raise ArgumentError,
             "#{self.class}: preview_file reads a file input, not the component root — " \
@@ -344,6 +357,7 @@ module Phlex
         args["wrap"] = preview_selector(:wrap, wrap) unless wrap.nil?
         args["max_bytes"] = preview_max_bytes(max_bytes) unless max_bytes.nil?
         args["accept"] = preview_accept(accept) unless accept.nil? || accept == false
+        args["per_file"] = true if preview_per_file(per_file)
         append("preview_file", args.freeze)
       end
 
@@ -560,6 +574,15 @@ module Phlex
           "#{self.class}: preview_file max_bytes: must be a positive Integer, got #{bytes.inspect}"
       end
 
+      # per_file: is a strict boolean (nil, like the other keywords, means
+      # omitted): a typo'd truthy value must not change which files an upload posts.
+      def preview_per_file(per_file)
+        return per_file == true if [true, false, nil].include?(per_file)
+
+        raise ArgumentError,
+          "#{self.class}: preview_file per_file: must be true, false or nil, got #{per_file.inspect}"
+      end
+
       # true reads the input's accept attribute; a String is the list itself.
       def preview_accept(accept)
         return accept if accept == true || (accept.is_a?(String) && !accept.strip.empty?)

data/lib/phlex/reactive/version.rb

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