phlex-reactive 0.15.2 → 0.15.3

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

@@ -419,6 +419,135 @@ export function __resetReactiveKeepForTest() {
   keepRegistered = false
 }
 
+// --- An image fallback that recovers (issue #383) ---------------------------
+// data-reactive-image-fallback='{"hide":true,"alt":"#name"}' on an <img>. On
+// `error` it gets data-reactive-image-state="error" (plus `hidden` with hide,
+// and its alt shown in the `alt` node of its own reactive root); on `load`,
+// "loaded". A later src clears the error: copy_media and preview_file reset
+// it as they write (resetImage), any src that loads clears it on `load`, and
+// 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.
+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
+// the element, not in a WeakSet: a Turbo snapshot restores a NEW node.
+const IMAGE_HIDDEN = "data-reactive-image-hidden"
+let imageFallbackListeners = null
+
+function imageFallback(img) {
+  if (img?.localName !== "img") return null
+  const raw = img.getAttribute(IMAGE_FALLBACK)
+  if (raw == null) return null
+  try {
+    return JSON.parse(raw) || {}
+  } catch {
+    return {}
+  }
+}
+
+const hasImageSrc = (img) => img.getAttribute("src") || img.getAttribute("srcset")
+
+// The node that shows the alt text: a selector resolved inside the img's own
+// root only (a document listener has no op scope).
+function imageAltNode(img, wire) {
+  if (typeof wire.alt !== "string" || !wire.alt) return null
+  try {
+    const node = img.closest('[data-controller~="reactive"]')?.querySelector(wire.alt)
+    // Never a node that holds the img: its textContent would wipe the img.
+    return node && !node.contains(img) ? node : null
+  } catch {
+    return null
+  }
+}
+
+function setImageState(img, wire, value) {
+  if (value === "error") {
+    if (wire.hide && !img.hasAttribute("hidden")) {
+      img.setAttribute("hidden", "")
+      img.setAttribute(IMAGE_HIDDEN, "")
+    }
+    const node = imageAltNode(img, wire)
+    if (node) {
+      node.textContent = img.getAttribute("alt") ?? ""
+      node.hidden = false
+    }
+  } else resetImage(img, wire)
+  img.setAttribute(IMAGE_STATE, value)
+}
+
+// Undo what an error did — only what it did: `hidden` stays when the author
+// set it. Called by copy_media and preview_file when they change the src.
+function resetImage(img, wire = imageFallback(img)) {
+  if (!wire || img.getAttribute(IMAGE_STATE) == null) return
+  if (img.getAttribute(IMAGE_STATE) === "error") {
+    if (img.hasAttribute(IMAGE_HIDDEN)) img.removeAttribute("hidden")
+    const node = imageAltNode(img, wire)
+    if (node) node.hidden = true
+  }
+  img.removeAttribute(IMAGE_STATE)
+  img.removeAttribute(IMAGE_HIDDEN)
+}
+
+function onImageEvent(event) {
+  const img = event.target
+  const wire = imageFallback(img)
+  if (!wire) return
+  if (event.type === "load") setImageState(img, wire, "loaded")
+  else if (hasImageSrc(img)) setImageState(img, wire, "error")
+  else resetImage(img, wire)
+}
+
+export function registerReactiveImageFallback() {
+  if (imageFallbackListeners) return
+  if (typeof document === "undefined" || typeof document.addEventListener !== "function") return
+  // A morph that keeps the src keeps the state: the render carries none, and
+  // the browser loads nothing new to tell us again. Put it back once the
+  // whole morph is done, so a later-morphed alt node is shown again too.
+  const kept = new WeakMap()
+  imageFallbackListeners = {
+    error: onImageEvent,
+    load: onImageEvent,
+    "turbo:before-morph-element": (event) => {
+      const img = event.target
+      const next = event.detail?.newElement
+      const value = img?.getAttribute?.(IMAGE_STATE)
+      if (value == null || !next || !imageFallback(img)) return
+      const same = (name) => img.getAttribute(name) === next.getAttribute?.(name)
+      if (same("src") && same("srcset")) kept.set(img, value)
+    },
+    "turbo:morph-element": (event) => {
+      const img = event.target
+      const value = kept.get(img)
+      if (value === undefined) return
+      kept.delete(img)
+      queueMicrotask(() => {
+        const wire = imageFallback(img)
+        if (wire) setImageState(img, wire, value)
+      })
+    },
+  }
+  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
+    // 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)
+    if (img.naturalWidth > 0) mark("loaded")
+    else if (typeof img.decode === "function") img.decode().then(() => mark("loaded"), () => mark("error"))
+    else mark("error")
+  }
+}
+
+export function __resetReactiveImageFallbackForTest() {
+  for (const [name, fn] of Object.entries(imageFallbackListeners ?? {})) document.removeEventListener(name, fn, true)
+  imageFallbackListeners = null
+}
+
 // For the opt-in entry: what to do with a stream before its render — hold it
 // for a module the incoming content needs. `handle(event, effects)` gets the
 // loaded effects module (or undefined) and wraps the stream with it itself.
@@ -860,6 +989,7 @@ export function registerReactiveActions() {
   registerReactiveMorphFocus()
   registerReactiveModals()
   registerReactiveKeep()
+  registerReactiveImageFallback()
   registerReactivePlaintext()
   registerReactiveOffline()
   registerReactiveDev()
@@ -1296,7 +1426,11 @@ function previewFile(input, args, resolveTargets) {
   if (img?.tagName !== "IMG") {
     return warnPreview(`paints an <img>, and ${JSON.stringify(args.into)} is ${img ? `a <${img.localName}>` : "not on the page"}`)
   }
-  const file = [...(input.files ?? [])].find((f) => typeof f?.type === "string" && f.type.startsWith("image/"))
+  // valid: true (issue #382): an input the app marked invalid (setCustomValidity,
+  // required) previews as empty. validity.valid, not checkValidity(): no
+  // `invalid` event fired into the app's own listeners.
+  const files = args.valid === true && input.validity?.valid === false ? [] : (input.files ?? [])
+  const file = [...files].find((f) => typeof f?.type === "string" && f.type.startsWith("image/"))
   forgetPreview(img)
   if (file) {
     const url = URL.createObjectURL(file)
@@ -1304,6 +1438,7 @@ function previewFile(input, args, resolveTargets) {
     img.setAttribute("src", url)
     watchPreviews()
   } else img.removeAttribute("src")
+  resetImage(img)
   if (args.name == null) return
   for (const node of resolveTargets({ ...args, to: args.name })) node.textContent = file ? file.name : ""
 }
@@ -1404,7 +1539,9 @@ function guardAttr(name) {
 // copy_media op and the reactive_media binding (the bindings feature reaches it
 // through the core handle). Only an <img> target is written, so an iframe,
 // script, object, embed or frame never receives a src from here. A source that
-// is missing, not an <img> or has no src clears the target. Each attribute is
+// is missing or not an <img> clears the target. An <img> source without src is
+// a hit with no image (issue #381): the target loses src and srcset but takes
+// the alt, so a known entry without a logo keeps its name. Each attribute is
 // written only when it changes, so the same URL twice does not reload. Returns
 // the alt copied, false when it cleared, or null when the target was skipped.
 function copyMedia(target, source) {
@@ -1412,17 +1549,19 @@ function copyMedia(target, source) {
     console.warn(`[phlex-reactive] copy_media targets an <img>, not <${target?.localName}> — skipped`)
     return null
   }
-  const src = source?.localName === "img" ? source.getAttribute("src") : null
-  const pick = (name) => (src ? source.getAttribute(name) : null)
+  const img = source?.localName === "img" ? source : null
+  const src = img?.getAttribute("src")
+  let changed = false
   for (const name of ["srcset", "src"]) {
-    const value = pick(name)
+    const value = src ? img.getAttribute(name) : null
     if (value == null) {
-      if (target.hasAttribute(name)) target.removeAttribute(name)
-    } else if (target.getAttribute(name) !== value) target.setAttribute(name, value)
+      if (target.hasAttribute(name)) changed = target.removeAttribute(name) ?? true
+    } else if (target.getAttribute(name) !== value) changed = target.setAttribute(name, value) ?? true
   }
-  const alt = pick("alt") ?? ""
+  if (changed) resetImage(target)
+  const alt = img?.getAttribute("alt") ?? ""
   if (target.getAttribute("alt") !== alt) target.setAttribute("alt", alt)
-  return src ? alt : false
+  return img ? alt : false
 }
 
 // The first focusable descendant of `el`, in document order — the natural

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

@@ -16,6 +16,7 @@ module Phlex
         include Sortable
         include Editable
         include MediaBinding
+        include ImageFallbackBinding
 
         # The acting client's SSE connection id during the current action (nil
         # outside an action, or when the client isn't subscribed to a stream).
@@ -1766,13 +1767,16 @@ module Phlex
 
         private_constant :REMOVED_ON_KWARGS, :PENDING_CLASS_OPS
 
+        # Runs on every on() (a hot path): a key lookup per removed name, no arrays.
         def reject_removed_on_kwargs!(action_name, params)
-          removed = params.keys & REMOVED_ON_KWARGS.keys
-          return if removed.empty?
+          return if params.empty?
 
-          key = removed.first
-          raise ArgumentError,
-            "on(#{action_name.inspect}) #{key}: was removed in issue #181 — use #{REMOVED_ON_KWARGS[key]}"
+          REMOVED_ON_KWARGS.each_key do
+            next unless params.key?(it)
+
+            raise ArgumentError,
+              "on(#{action_name.inspect}) #{it}: was removed in issue #181 — use #{REMOVED_ON_KWARGS[it]}"
+          end
         end
 
         # Issue #357: parse on()'s shortcut: (nil when absent). A shortcut

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

@@ -18,6 +18,16 @@ module Phlex
       module Identity
         extend ActiveSupport::Concern
 
+        # Whether the installed GlobalID gives a class its own app
+        # (global_id_app, then GlobalID.app — rails/globalid after 1.4).
+        # Read once: it is a fact about the loaded gem.
+        def self.per_class_gid_app?
+          return @per_class_gid_app if defined?(@per_class_gid_app)
+
+          @per_class_gid_app = ::GlobalID::Identification.const_defined?(:ClassMethods, false) &&
+                               ::GlobalID::Identification::ClassMethods.method_defined?(:global_id_app)
+        end
+
         class_methods do
           # The record's instance-variable symbol (e.g. :@todo), computed once.
           # reactive_token reads it on every render; interpolating :"@#{key}" each
@@ -74,7 +84,7 @@ module Phlex
           # before to_gid (nil.to_gid would raise).
           if (record_ivar = klass.reactive_record_ivar) &&
              (record = instance_variable_get(record_ivar)) && signable_gid?(record)
-            payload["gid"] = record.to_gid.to_s
+            payload["gid"] = reactive_gid(record)
           end
 
           state_ivars = klass.reactive_state_ivars
@@ -95,6 +105,29 @@ module Phlex
         def signable_gid?(record)
           !(record.respond_to?(:persisted?) && !record.persisted?)
         end
+
+        # record.to_gid.to_s, without the URI. For a record whose to_gid is
+        # GlobalID's own (not overridden on its class or on itself) and whose
+        # id is an Integer, GlobalID's string is exactly
+        # "gid://<GlobalID.app>/<class name>/<id>": an Integer needs no
+        # escaping and there are no params. Building it directly skips a
+        # validated URI::GID (~37 objects, about half a record token's cost),
+        # once per record-backed row per render. Anything else goes through
+        # to_gid unchanged, its errors included.
+        def reactive_gid(record)
+          if record.is_a?(::GlobalID::Identification) &&
+             record.method(:to_gid).owner.equal?(::GlobalID::Identification) &&
+             (id = record.id).is_a?(Integer) && (app = reactive_gid_app(record.class)) && (name = record.class.name)
+            "gid://#{app}/#{name}/#{id}"
+          else
+            record.to_gid.to_s
+          end
+        end
+
+        # The app to_gid would use: the class's own where GlobalID has one.
+        def reactive_gid_app(klass)
+          (Identity.per_class_gid_app? && klass.global_id_app) || ::GlobalID.app
+        end
       end
     end
   end

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

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Phlex
+  module Reactive
+    module Component
+      # An <img> that falls back when its src fails and recovers when the src
+      # changes (issue #383).
+      #
+      #   img(id: "logo", alt: "", **reactive_image_fallback(hide: true))
+      #   img(id: "logo", alt: "Bank", **reactive_image_fallback(show_alt: "#bank-name"))
+      #   span(id: "bank-name", hidden: true)
+      #
+      # On `error` the client sets data-reactive-image-state="error", adds
+      # `hidden` (hide: true, the default) and, with show_alt:, writes the
+      # img's alt into that node (a CSS selector inside the root) and shows it.
+      # On `load` the state is "loaded". A later src — copy_media,
+      # reactive_media, preview_file, a morph, or any src that loads — clears
+      # the error and shows the img again; an img with no src is never an
+      # error. hide: false leaves visibility alone: style the state with CSS.
+      # Composes with reactive_media (its **attrs mix the data attribute in):
+      #
+      #   img(**reactive_media(from: :rib, pool: POOL, **reactive_image_fallback))
+      #
+      # Named ImageFallbackBinding for the reason MediaBinding is (issue #233).
+      module ImageFallbackBinding
+        def reactive_image_fallback(hide: true, show_alt: nil, **attrs)
+          wire = { "hide" => image_fallback_hide!(hide) }
+          wire["alt"] = image_fallback_alt!(show_alt) unless show_alt.nil?
+          mix({ data: { reactive_image_fallback: wire.to_json } }, attrs)
+        end
+
+        private
+
+        def image_fallback_hide!(hide)
+          return hide if [true, false].include?(hide)
+
+          raise ArgumentError, "reactive_image_fallback hide: must be true or false, got #{hide.inspect}"
+        end
+
+        # A selector the client passes to querySelector, never a URL.
+        def image_fallback_alt!(selector)
+          if selector == JS::ROOT_SENTINEL
+            raise ArgumentError,
+              "reactive_image_fallback show_alt: #{selector} names the whole root — pass the selector of a node inside it"
+          end
+          return selector if selector.is_a?(String) && !selector.strip.empty?
+
+          raise ArgumentError,
+            "reactive_image_fallback show_alt: must be a CSS selector (e.g. \"#bank-name\"), got #{selector.inspect}"
+        end
+      end
+    end
+  end
+end

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

@@ -20,18 +20,29 @@ module Phlex
       # first n characters as the key; omit it to use the whole value. A pool
       # value is a CSS SELECTOR for an <img> inside the root, never a URL: the
       # client copies that element's src, srcset and alt the way
-      # js.copy_media does. A key, selector or element that misses clears the
-      # preview. `label:` names a node whose textContent becomes the chosen
-      # image's alt (`blank_label`, or "", on a miss). Client-only: no token,
+      # js.copy_media does. A key, selector or element that misses (or is not
+      # an <img>) clears the preview. A pool <img> with an alt and no src is a
+      # hit without an image: the preview drops its src and takes the alt
+      # (issue #381). `label:` names a node whose textContent becomes the
+      # chosen image's alt (`blank_label`, or "", on a miss). Client-only: no token,
       # no round trip.
       #
+      # Until the field has `take` characters, or while `match:` (a Regexp,
+      # anchored to the whole key) rejects the key, the binding is PENDING
+      # (issue #380): never `blank_label`. `pending: :clear` (the default)
+      # clears the preview and empties the label; `pending: :keep` leaves both
+      # alone. The preview's data-reactive-media-state reads pending, hit or
+      # miss, so a row can hide itself with CSS until there is an answer.
+      #
       # Named MediaBinding, not Media: this module sits in every reactive
       # component's ancestry, and a bare `Media` would shadow a host app's kit
       # component of that name (issue #233).
       module MediaBinding
-        def reactive_media(from:, pool: nil, take: nil, label: nil, blank_label: nil, **attrs)
+        def reactive_media(from:, pool: nil, take: nil, match: nil, pending: :clear, label: nil, blank_label: nil, **attrs)
           wire = { "field" => media_field!(from) }
           wire["take"] = media_take!(take) unless take.nil?
+          wire["match"] = MediaPattern.to_js(match) unless match.nil?
+          wire["pending"] = "keep" if media_pending!(pending) == "keep"
           wire["pool"] = media_pool!(pool)
           wire["label"] = media_selector!(:label, label) unless label.nil?
           wire["blank"] = blank_label.to_s unless blank_label.nil?
@@ -54,6 +65,13 @@ module Phlex
                                "got #{take.inspect}"
         end
 
+        def media_pending!(pending)
+          mode = pending.to_s if pending.is_a?(Symbol) || pending.is_a?(String)
+          return mode if %w[clear keep].include?(mode)
+
+          raise ArgumentError, "reactive_media pending: must be :clear or :keep, got #{pending.inspect}"
+        end
+
         def media_pool!(pool)
           if pool.nil?
             raise ArgumentError, "reactive_media needs pool: — a Hash of key => selector of a server-rendered <img> " \

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

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module Phlex
+  module Reactive
+    module Component
+      # reactive_media's match: (issue #380) — a Ruby Regexp as the JavaScript
+      # source the client anchors as ^(?:…)$ and compiles without flags. The
+      # source is tokenized (an escape is one token, so an escaped backslash is
+      # never mistaken for one): a leading \A and a trailing \z/\Z are dropped,
+      # and anything JavaScript would read differently raises at render rather
+      # than matching silently wrong in the browser.
+      module MediaPattern
+        # Escapes Ruby reads as an anchor or a class and JS reads as a letter,
+        # plus \s/\S, whose JS class also holds Unicode spaces Ruby's does not.
+        RUBY_ONLY_ESCAPES = %w[\A \z \Z \G \h \H \R \X \K \p \P \s \S].freeze
+        # The group openers both engines read alike: (?: (?= (?! (?<= (?<! (?<name>
+        SHARED_GROUPS = [":", "=", "!", "<"].freeze
+        OPTIONS = Regexp::IGNORECASE | Regexp::EXTENDED | Regexp::MULTILINE
+
+        module_function
+
+        def to_js(match)
+          unless match.is_a?(Regexp)
+            raise ArgumentError,
+              "reactive_media match: must be a Regexp (e.g. /\\A\\d{3}\\z/), got #{match.inspect}"
+          end
+
+          unless match.options.nobits?(OPTIONS)
+            refuse!(match,
+              "has options (i, m, x) the client would read differently — drop them")
+          end
+
+          tokens = match.source.scan(/\\.|./m)
+          tokens.shift if tokens.first == "\\A"
+          final = tokens.pop if %w[\z \Z].include?(tokens.last)
+          check!(tokens, match)
+          # Ruby's \Z also matches before one final newline.
+          final == "\\Z" ? "#{tokens.join}\\n?" : tokens.join
+        end
+
+        def check!(tokens, match)
+          in_class = false
+          tokens.each_with_index do |token, i|
+            if RUBY_ONLY_ESCAPES.include?(token)
+              refuse!(match,
+                "uses #{token}, which is Ruby-only (JavaScript reads it differently)")
+            end
+            refuse!(match, "has a character above U+FFFF (the client pattern has no u flag)") if token.ord > 0xFFFF
+            if token == "\\u" && tokens[i + 1] == "{"
+              refuse!(match,
+                "uses \\u{…}, which JavaScript without the u flag reads as a repeated u")
+            end
+            if in_class
+              in_class = false if token == "]"
+              class_syntax!(tokens, i, match)
+            elsif token == "["
+              in_class = true
+            elsif token == "(" && tokens[i + 1] == "?" && !SHARED_GROUPS.include?(tokens[i + 2])
+              refuse!(match, "uses (?#{tokens[i + 2]}…), a group JavaScript does not read the same way")
+            end
+          end
+        end
+
+        # A [ inside a class (a nested class or a POSIX [:digit:]) and && (an
+        # intersection) are Ruby-only: JavaScript reads them as literals.
+        def class_syntax!(tokens, index, match)
+          token = tokens[index]
+          return unless token == "[" || (token == "&" && tokens[index + 1] == "&")
+
+          refuse!(match, "has a nested character class, a POSIX [:class:] or && — JavaScript reads them literally")
+        end
+
+        def refuse!(match, why)
+          raise ArgumentError, "reactive_media match: #{match.inspect} #{why}"
+        end
+      end
+    end
+  end
+end

data/lib/phlex/reactive/doctor.rb

@@ -248,7 +248,15 @@ module Phlex
       # authorization / mark_authorized! call. It is :unknown, NEVER a hard fail:
       # a helper may authorize indirectly, so this is a hint, not a verdict.
       def authorization_check(components)
-        suspects = components.flat_map { unauthorized_action_labels(it) }
+        infos = nil
+        suspects = components.flat_map do
+          next [] if component_defines_authorization_method?(it)
+
+          # Read once, and only when needed: Inspector.components Prism-scans
+          # every component's actions.
+          infos ||= inspector_infos
+          unauthorized_action_labels(it, infos)
+        end
         return Check.new(:ok, "every mutating action appears to authorize", name: :authorization) if suspects.empty?
 
         Check.new(:unknown, "actions with no detected authorization call: #{suspects.join(", ")}",
@@ -394,13 +402,11 @@ module Phlex
       end
 
       # "Klass#action" for every declared action on `klass` that (advisory)
-      # appears unauthorized: the component defines no authorization method in its
-      # ancestry, the action isn't skipped, and the Prism scan (via the shared
-      # Inspector) finds no authorization / mark_authorized! call in its body.
-      def unauthorized_action_labels(klass)
-        return [] if component_defines_authorization_method?(klass)
-
-        info = Phlex::Reactive::Inspector.components.find { it.klass == klass }
+      # appears unauthorized (the caller has already ruled out an authorization
+      # method in its ancestry): the action isn't skipped, and the Prism scan (via
+      # the shared Inspector) finds no authorization / mark_authorized! call in its body.
+      def unauthorized_action_labels(klass, infos)
+        info = infos[klass]
         return [] unless info
 
         info.actions
@@ -417,6 +423,12 @@ module Phlex
       # Phlex::Reactive.authorization_methods and NOT the Inspector's set, which
       # folds in mark_authorized! — every component inherits that instance helper,
       # so including it would silence the check for everything.
+      def inspector_infos
+        Phlex::Reactive::Inspector.components.to_h { [it.klass, it] }
+      rescue StandardError
+        {}
+      end
+
       def component_defines_authorization_method?(klass)
         Phlex::Reactive.authorization_methods.any? do
           klass.method_defined?(it) || klass.private_method_defined?(it)

data/lib/phlex/reactive/js.rb

@@ -297,8 +297,17 @@ module Phlex
       # that read every subscriber's file input would be hostile.
       #   input(type: "file", id: "photo-file", accept: "image/*",
       #     **on_client(:change, js.preview_file("#photo-file", into: "#photo", name: "#photo-name")))
-
-      def preview_file(to, into:, name: nil, global: false)
+      #
+      # Upload validation (issue #382): `valid: true` treats an input whose
+      # validity is false (setCustomValidity, required) as empty, so a rejected
+      # file never gets a preview. An app that clears the input without a
+      # change event dispatches `reactive:file-changed` on it; bind the same op
+      # to that event too and the preview clears:
+      #   op = js.preview_file("#photo-file", into: "#photo", valid: true)
+      #   input(type: "file", id: "photo-file",
+      #     **mix(on_client(:change, op), on_client("reactive:file-changed", op)))
+
+      def preview_file(to, into:, name: nil, global: false, valid: false)
         if [:root, ROOT_SENTINEL].include?(to)
           raise ArgumentError,
             "#{self.class}: preview_file reads a file input, not the component root — " \
@@ -308,6 +317,7 @@ module Phlex
         args = { "to" => normalize_target(to), "into" => preview_selector(:into, into) }
         args["name"] = preview_selector(:name, name) unless name.nil?
         args["global"] = true if global
+        args["valid"] = true if valid
         append("preview_file", args.freeze)
       end
 
@@ -331,9 +341,10 @@ module Phlex
       # onto the `to` <img>. Both are ELEMENTS (:root or a CSS selector,
       # resolved with the op's own scoping, global: included): the URL is read
       # off the live source element in the browser and is never an argument,
-      # so the set_attr refusal of src (issue #96) stays. A missing source, a
-      # non-<img> source or one without src clears the target's src, srcset
-      # and alt; a target that is not an <img> is skipped. The same URL twice
+      # so the set_attr refusal of src (issue #96) stays. A missing or
+      # non-<img> source clears the target's src, srcset and alt; an <img>
+      # source without src removes the target's src and srcset and copies its
+      # alt (issue #381); a target that is not an <img> is skipped. The same URL twice
       # is not written again (no reload). Broadcast-safe: it only reads
       # elements already in the subscriber's document.
       #   button(**on_client(:click, js.copy_media("#logo", from: "#logo-007"))) { "North" }

data/lib/phlex/reactive/version.rb

@@ -2,6 +2,6 @@
 
 module Phlex
   module Reactive
-    VERSION = "0.15.2"
+    VERSION = "0.15.3"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex-reactive
 version: !ruby/object:Gem::Version
-  version: 0.15.2
+  version: 0.15.3
 platform: ruby
 authors:
 - Mikael Henriksson
@@ -197,8 +197,10 @@ files:
 - lib/phlex/reactive/component/editable.rb
 - lib/phlex/reactive/component/helpers.rb
 - lib/phlex/reactive/component/identity.rb
+- lib/phlex/reactive/component/image_fallback_binding.rb
 - lib/phlex/reactive/component/lazy.rb
 - lib/phlex/reactive/component/media_binding.rb
+- lib/phlex/reactive/component/media_pattern.rb
 - lib/phlex/reactive/component/presence_declaration.rb
 - lib/phlex/reactive/component/registry.rb
 - lib/phlex/reactive/component/selection.rb