phlex-reactive 0.16.9 → 0.16.11

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

@@ -449,7 +449,9 @@ export function __resetReactiveKeepForTest() {
 // a morph that changes the src lets the browser try again. A morph that keeps
 // the src puts the state back. An error with no src is not an error (a
 // removed or emptied src). One document listener, capture phase (neither
-// event bubbles); nothing per root at connect.
+// event bubbles); nothing per root at connect. An img that finished before it
+// was in the document (before registration, or while Turbo held it imported
+// but not yet inserted, issue #452) is read off the element instead.
 const IMAGE_FALLBACK = "data-reactive-image-fallback"
 const IMAGE_STATE = "data-reactive-image-state"
 // Marks the `hidden` the fallback set, so a reset removes only that one. On
@@ -580,13 +582,36 @@ export function registerReactiveImageFallback() {
         if (wire) setImageState(img, wire, value)
       })
     },
+    // Content Turbo inserts was imported into the document first, a few awaits
+    // earlier (issue #452): an img loads from then on, so one whose request
+    // ended in between fired its event detached, unheard. Read it off the
+    // element once the content is in: the frame, the page, a stream's render.
+    "turbo:frame-render": (event) => scanImageFallbacks(event.target),
+    "turbo:render": () => scanImageFallbacks(document),
+    "turbo:before-stream-render": (event) => {
+      const detail = event.detail
+      const render = detail?.render
+      const stream = detail?.newStream ?? event.target
+      if (typeof render !== "function" || !stream?.querySelector?.("template")?.content?.querySelector?.(`img[${IMAGE_FALLBACK}]`)) return
+      // The whole document: a replace's target is gone by then.
+      detail.render = async (el) => {
+        await render(el)
+        scanImageFallbacks(document)
+      }
+    },
   }
   for (const [name, fn] of Object.entries(imageFallbackListeners)) document.addEventListener(name, fn, true)
-  // An image that finished before this ran (a cached 404) fired its event
-  // unheard: read it off the element once. naturalWidth 0 is also a loaded
-  // SVG with only a viewBox, so decode() decides (it rejects a broken image).
-  for (const img of document.querySelectorAll?.(`img[${IMAGE_FALLBACK}]`) ?? []) {
-    if (!img.complete || !hasImageSrc(img)) continue
+  // An image that finished before this ran (a cached 404) fired its event unheard.
+  scanImageFallbacks(document)
+}
+
+// Read the result of every marked img in `root` that has no state yet and has
+// finished; one still loading fires its own event, connected. naturalWidth 0
+// is also a loaded SVG with only a viewBox, so decode() decides (it rejects a
+// broken image, and fetches nothing).
+function scanImageFallbacks(root) {
+  for (const img of root?.querySelectorAll?.(`img[${IMAGE_FALLBACK}]`) ?? []) {
+    if (img.getAttribute(IMAGE_STATE) != null || !img.complete || !hasImageSrc(img)) continue
     // A decode() that settles after the src changed decoded the OLD one: ignore it.
     const was = `${img.getAttribute("src")} ${img.getAttribute("srcset")}`
     const mark = (value) => `${img.getAttribute("src")} ${img.getAttribute("srcset")}` === was && setImageState(img, imageFallback(img) ?? {}, value)
@@ -1060,6 +1085,7 @@ export function registerReactiveActions() {
   registerReactiveMorphFocus()
   registerReactiveModals()
   registerReactiveKeep()
+  registerReactiveRejectedFiles()
   registerReactiveImageFallback()
   registerReactivePlaintext()
   registerReactiveOffline()
@@ -1555,17 +1581,80 @@ function previewFile(input, args, resolveTargets) {
   if (args.name != null) {
     for (const node of resolveTargets({ ...args, to: args.name })) node.textContent = file ? file.name : ""
   }
+  // Written before any rejection is dispatched: a handler sees the list filled.
+  if (args.rejected != null) listRejected(input, resolveTargets({ ...args, to: args.rejected }), rejected, args.rejected)
   for (const detail of rejected) input.dispatchEvent(new CustomEvent("reactive:file-rejected", { bubbles: true, detail }))
 }
 
+// --- Name each refused file (issue #445) ---
+// rejected: is a container holding an app-authored <template>. Per refused
+// file, in pick order: a pure deep clone of it, the file's name written as
+// textContent into every [data-reactive-file="name"] (a file name is user
+// input: never HTML, never an attribute), and only the
+// [data-reactive-file-reason] parts for that file's reason kept. Each
+// top-level element of a clone is marked and appended (top-level text is
+// dropped). Every run removes the marked entries first, and only those, so
+// a heading and the <template> stay. The entries are always the container's
+// last children, which is what the morph listener below checks.
+const REJECTED_ENTRY = "data-reactive-file-rejected"
+
+function listRejected(input, lists, rejected, selector) {
+  if (lists.length === 0) return warnPreviewVerbose(input, `rejected: ${JSON.stringify(selector)} is not on the page`)
+  for (const list of lists) {
+    for (const entry of [...list.children]) if (entry.hasAttribute(REJECTED_ENTRY)) entry.remove()
+    const template = [...list.children].find((child) => child.localName === "template")
+    if (!template) {
+      warnPreviewVerbose(input, `rejected: ${JSON.stringify(selector)} has no <template> child`)
+      continue
+    }
+    for (const { reason, file } of rejected) {
+      const entry = template.content.cloneNode(true)
+      for (const part of entry.querySelectorAll("[data-reactive-file-reason]")) {
+        if (part.getAttribute("data-reactive-file-reason") !== reason) part.remove()
+      }
+      for (const slot of entry.querySelectorAll('[data-reactive-file="name"]')) slot.textContent = file.name
+      for (const node of [...entry.childNodes]) {
+        if (node.nodeType !== 1) continue
+        node.setAttribute(REJECTED_ENTRY, "")
+        list.append(node)
+      }
+    }
+  }
+}
+
+// A morph keeps the list (issue #445). The action that follows the pick on
+// the same change replies with a morph whose render of the container has no
+// entries, and Idiomorph would remove them. Before it syncs the container's
+// children, copies of the entries go into the new render, so the sync keeps
+// them; the next pick still replaces them. A plain replace is a new element,
+// and the server's render of it stands. The check reads the DOM (the last
+// child is an entry), not a record of what the op listed, so a container
+// Turbo restored from its cache (new nodes, same entries) keeps them too: one
+// lastElementChild per morphed element.
+let rejectedFilesRegistered = false
+
+export function registerReactiveRejectedFiles() {
+  if (rejectedFilesRegistered) return
+  if (typeof document === "undefined" || typeof document.addEventListener !== "function") return
+  rejectedFilesRegistered = true
+  document.addEventListener("turbo:before-morph-element", (event) => {
+    const list = event.target
+    const next = event.detail?.newElement // absent when Turbo asks before a removal
+    if (!next || event.defaultPrevented || !list.lastElementChild?.hasAttribute(REJECTED_ENTRY)) return
+    for (const entry of list.children) if (entry.hasAttribute(REJECTED_ENTRY)) next.append(entry.cloneNode(true))
+  })
+}
+
+export function __resetReactiveRejectedFilesForTest() {
+  rejectedFilesRegistered = false
+}
+
 // 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")
-    }
+    warnPreviewVerbose(input, "per_file: has no DataTransfer to drop the refused files from the input")
     return false
   }
   const transfer = new DataTransfer()
@@ -1601,6 +1690,11 @@ function warnPreview(why) {
   console.warn(`[phlex-reactive] preview_file ${why} — skipped`)
 }
 
+// Only a verbose (or debug) root is told: the op still did all it could.
+function warnPreviewVerbose(input, why) {
+  if (input.closest?.('[data-reactive-verbose="true"], [data-reactive-debug="true"]')) warnPreview(why)
+}
+
 // Revoke the URL preview_file made for `img`, if it made one.
 function forgetPreview(img) {
   const url = previews.get(img)
@@ -2002,7 +2096,13 @@ const READ_OPS = new Set(["set_value", "text", "set_attr"])
 function readArgs(name, args, resolveTargets, onZeroTargets) {
   const detail = name === "dispatch"
   const reads = detail ? args.detail_from : READ_OPS.has(name) && args.from != null && { value: args.attr }
-  if (!reads) return args
+  // An empty detail_from reads nothing (the builder never writes one).
+  if (!reads || (detail && !Object.keys(reads).length)) return args
+  // The reads merge over detail as an object: a String or an Array would be
+  // spread key by key (the builder refuses one; a hand-built one is warned).
+  const base = detail ? (args.detail ?? {}) : {}
+  if (typeof base != "object" || Array.isArray(base))
+    return console.warn(`[phlex-reactive] refused client read over detail ${JSON.stringify(base)} — skipped`), null
   const from = detail ? "@trigger" : args.from
   let source
   // A from that does not parse is a miss like one that matches nothing (the
@@ -2011,7 +2111,7 @@ function readArgs(name, args, resolveTargets, onZeroTargets) {
     source = resolveTargets({ ...args, to: from })[0]
   } catch {}
   if (!source) return onZeroTargets?.(name, { ...args, to: from }), null
-  const values = detail ? { ...args.detail } : {}
+  const values = { ...base }
   for (const [key, attr] of Object.entries(reads)) {
     const value = readValue(source, attr)
     if (value == null) return null

data/lib/phlex/reactive/component/helpers.rb

@@ -1656,6 +1656,12 @@ module Phlex
               "#{label} within: delegates from the bound element's own subtree — it cannot be " \
               "window-bound; drop #{name}"
           end
+          if CLIENT_WITHIN_NON_BUBBLING.include?(event)
+            raise ArgumentError,
+              "#{label} within: #{event} does not bubble, so the bound element never hears it from a " \
+              "row — bind it on the rows, or use a bubbling twin where there is one (focusin/focusout, " \
+              "mouseover/mouseout, pointerover/pointerout)"
+          end
           return unless once
 
           raise ArgumentError,
@@ -1663,6 +1669,15 @@ module Phlex
             "first event, so a first event outside every match would leave the binding dead"
         end
 
+        # Issue #442: the common events that do not bubble — a within: binding
+        # on the container would never fire for them. Not exhaustive (media
+        # has more); the ones a list's rows plausibly fire.
+        CLIENT_WITHIN_NON_BUBBLING = %w[
+          focus blur mouseenter mouseleave pointerenter pointerleave load error scroll toggle beforetoggle
+          invalid close cancel play pause ended
+        ].freeze
+        private_constant :CLIENT_WITHIN_NON_BUBBLING
+
         # Issue #393: the one message on() and on_client() raise when given both
         # waits. Built only on that error path (on() is a hot path).
         def both_waits_message(label)

data/lib/phlex/reactive/js.rb

@@ -62,6 +62,9 @@ module Phlex
       # an element (where a server-pushed op has no @trigger to put).
       READ_OPS = %w[set_value text set_attr].freeze
       TARGET_KEYS = %w[to from expanded submitter].freeze
+      # preview_file's into:/name:/wrap: name elements too (its name is no
+      # attribute or event name there).
+      PREVIEW_TARGET_KEYS = (TARGET_KEYS + %w[into name wrap]).freeze
 
       # The field-writing ops write a field the author names: never the root
       # (a container) nor the trigger (the element clicked).
@@ -159,11 +162,17 @@ module Phlex
       end
 
       # The name of the first op that names @trigger, or nil. A raw list, or a
-      # hand-built JS.new([...]), may carry Symbol keys or no args Hash.
+      # hand-built JS.new([...]), may carry Symbol keys or no args Hash. An
+      # empty detail_from reads nothing (the client skips it too).
       def self.trigger_op(list)
         Array(list).each do |op, args|
           next unless args.is_a?(::Hash)
-          return op.to_s if arg(args, "detail_from") || TARGET_KEYS.any? { arg(args, it) == TRIGGER_SENTINEL }
+
+          reads = arg(args, "detail_from")
+          return op.to_s if reads.respond_to?(:empty?) ? !reads.empty? : reads
+
+          keys = op.to_s == "preview_file" ? PREVIEW_TARGET_KEYS : TARGET_KEYS
+          return op.to_s if keys.any? { arg(args, it) == TRIGGER_SENTINEL }
         end
         nil
       end
@@ -442,9 +451,30 @@ module Phlex
       #   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")))
+      #
+      # Name each refused file (issue #445): `rejected:` is a CSS selector (like
+      # `into:`) for a container whose first <template> child the client clones
+      # once per refused file, in pick order, before any reactive:file-rejected
+      # fires. In each clone every [data-reactive-file="name"] gets file.name as
+      # textContent (never HTML), and every [data-reactive-file-reason] part
+      # whose value is not that file's reason is removed (a reason with no part
+      # keeps only the unmarked parts; a reason part at the top level lists only
+      # the reasons it names). Each top-level element
+      # of a clone is marked data-reactive-file-rejected and appended; the next
+      # run of the op removes the marked ones first (a pick with no refusal
+      # empties the list), and a morph of the container keeps them.
+      #   ul(id: "refused") do
+      #     template do
+      #       li do
+      #         span(data: { reactive_file_reason: "size" }) { b(data: { reactive_file: "name" }); plain " is too large." }
+      #         span(data: { reactive_file_reason: "type" }) { b(data: { reactive_file: "name" }); plain " is not a PNG." }
+      #       end
+      #     end
+      #   end
+      #   js.preview_file("#pick", into: "#shot", max_bytes: 1_000_000, accept: true, per_file: true, rejected: "#refused")
 
       def preview_file(to, into:, name: nil, global: false, valid: false, wrap: nil, max_bytes: nil, accept: nil,
-                       per_file: false)
+                       per_file: false, rejected: nil)
         refuse_field_target!(to, "preview_file reads a file input, not %s — pass the input's CSS selector " \
                                  "(e.g. js.preview_file(\"#photo-file\", into: \"#photo\"))")
         args = { "to" => normalize_target(to), "into" => preview_selector(:into, into) }
@@ -455,6 +485,7 @@ module Phlex
         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)
+        args["rejected"] = preview_selector(:rejected, rejected) unless rejected.nil?
         append("preview_file", args.freeze)
       end
 
@@ -672,11 +703,15 @@ module Phlex
         args.freeze
       end
 
-      # preview_file's into:/name: — a non-empty CSS selector String, never
-      # :root or its "@root" sentinel (the root is a container, not the img —
-      # and a name: on it would replace the whole component with a file name).
+      # preview_file's into:/name:/wrap:/rejected: — a non-empty CSS selector
+      # String, never :root or its "@root" sentinel (the root is a container,
+      # not the img — and a name: on it would replace the whole component with a
+      # file name), nor "@trigger" (issue #442; the Symbol :trigger is no
+      # String): the preview goes into elements the author names.
       def preview_selector(key, selector)
-        return selector if selector.is_a?(String) && !selector.strip.empty? && selector != ROOT_SENTINEL
+        if selector.is_a?(String) && !selector.strip.empty? && ![ROOT_SENTINEL, TRIGGER_SENTINEL].include?(selector)
+          return selector
+        end
 
         raise ArgumentError,
           "#{self.class}: preview_file #{key}: must be a CSS selector string, got #{selector.inspect}"
@@ -758,15 +793,19 @@ module Phlex
       end
 
       # dispatch's detail_from: — detail key → read attr, the keys Strings.
-      # A key also in detail: would silently override it, so it raises.
+      # A key also in detail: would silently override it, so it raises; so does
+      # a detail: that is no Hash (the browser merges the reads over it).
       def detail_reads(detail, reads)
         unless reads.is_a?(Hash)
           raise ArgumentError,
             "#{self.class}: dispatch detail_from: takes a Hash of detail keys to data-* attributes " \
             "(or :text), got #{reads.inspect}"
         end
+        unless detail.nil? || detail.is_a?(Hash)
+          raise ArgumentError, "#{self.class}: dispatch detail_from: merges over a Hash detail:, got #{detail.inspect}"
+        end
 
-        literal = detail.is_a?(Hash) ? detail.keys.map(&:to_s) : []
+        literal = detail.nil? ? [] : detail.keys.map(&:to_s)
         normalized = reads.to_h do |key, attr|
           key = key.to_s
           if literal.include?(key)

data/lib/phlex/reactive/version.rb

@@ -2,6 +2,6 @@
 
 module Phlex
   module Reactive
-    VERSION = "0.16.9"
+    VERSION = "0.16.11"
   end
 end

metadata

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