reactive_component 0.8.5 → 0.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5ec78650feb0396bbe85c2adc0994209dc4d1ab91a6cf0ca49d9692b17e0b316
-  data.tar.gz: c2d54ef039a0ea502c593a5eb1e173f509955e3e37b0f6eea1cd78c05ed365d5
+  metadata.gz: b5392838b8ed189cab22600b11b26eaa10215f601dd18294a4070febd9d88fbc
+  data.tar.gz: ed5fc1b4fb9c8e41ca0e717481323655b04b31bd4c94eb7ae011d4e05452b881
 SHA512:
-  metadata.gz: caf86cb2646eea037defb27405b486555e70377351c6fe3a61b7d1b00aa33cf330d6ace77a42936e9c93c2bbb992026d0a5a2138137ac6591ff6efd1a45f6c21
-  data.tar.gz: fc02fd8569b770ff6b6ed6583cdfbc4fb3dfb2630768eaa7d4f095ce755cc7ecf7617721fa542ca5f76a7a149984cbd5549e4f959911e67b739f96a4e2aa3a22
+  metadata.gz: bc1903d993c6504bccd2235175c131287589437461991084dfd93f6124f806de5589a669581bc9e3a34feac4fd5ad5f251131cabe498e5ad4218ade2db225574
+  data.tar.gz: 84a9b85096b7838863837ed0fac03be89394ceef37a24484a1425a9643f707dc120204a8c8b9bf90f2f5645e5d18ce87f04e0d4603a6a6c218f31f16b85d1bc1

data/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## [0.9.1] - 2026-09-17
+
+### Changed
+- The renderer logs every render and update only when `ReactiveComponent.debug`
+  is on, which it reads from the `data-reactive-debug` attribute already on the
+  wrapper. It used to log everywhere, production included, unless a
+  `devToolbar:debug` key in `localStorage` was set to the string `"false"`.
+- A client-state change on a notify component that has no data yet asks the
+  server to render it instead of doing nothing, and an update request carries
+  the state the component is in now rather than the one the page was built
+  with.
+- A notify wrapper with client state no longer embeds its initial data payload.
+  It asks the server to render it, so the attribute was the page a second time,
+  carrying every branch of every extracted expression. A push wrapper keeps it:
+  it renders from that payload until the first broadcast arrives.
+
+## [0.9.0] - 2026-09-17
+
+### Added
+- `subscribes_to ..., strategy: :notify` declares notify mode for every
+  instance. A broadcast then sends the bare signal instead of building a
+  payload no notify client reads, and the wrapper needs no
+  `live_wrapper_options`. An instance cannot switch such a class back to push.
+
+### Changed
+- A broadcast now runs in an Active Job (`ReactiveComponent::BroadcastJob`)
+  instead of inside the request that committed the record, so rendering a
+  payload no longer holds the response. `subscribes_to ..., later: false`
+  keeps it inline. A destroy always broadcasts inline. The request id rides
+  along, so `skip_own_broadcasts` keeps working.
+- A morph leaves `[data-turbo-permanent]` elements alone, as Turbo's own morph
+  does. An open menu marks itself permanent while it is open, and an update
+  underneath it no longer closes it.
+- A `key` entity's dom id joins its parts with `_` instead of `-`
+  (`due_count_1_2`) and its gid with `/`. A page rendered before the deploy
+  routes broadcasts by the old id until it reloads.
+
+### Fixed
+- A `key` entity joined its id on `-`, so a part carrying a dash, a UUID for
+  instance, never split back: every lookup missed and a notify component
+  never re-rendered. The id is now the array of parts, the way Rails exposes
+  a composite primary key, and GlobalID and `dom_id` encode it themselves.
+
 ## [0.8.5] - 2026-09-16
 
 ### Added

data/app/javascript/reactive_component/controllers/reactive_renderer_controller.js

@@ -3,11 +3,6 @@ import { createConsumer } from "@rails/actioncable"
 import { compileTemplate, decompress, morphElement, buildActionBody, routeMessage, duplicateIds, strictData } from "reactive_component/lib/reactive_renderer_utils"
 
 const consumer = createConsumer()
-const log = (...args) => {
-  if (localStorage.getItem("devToolbar:debug") !== "false") {
-    console.log("[reactive-renderer]", ...args)
-  }
-}
 
 function findSubscription(streamValue) {
   const identifier = JSON.stringify({ channel: "ReactiveComponent::Channel", signed_stream_name: streamValue })
@@ -113,6 +108,14 @@ export default class extends Controller {
     this.element.removeAttribute("data-reactive-renderer-connected")
   }
 
+  // ReactiveComponent.debug marks the wrapper, so the gem is quiet unless the
+  // app turns debugging on server-side.
+  log(...args) {
+    if (this.element.hasAttribute("data-reactive-debug")) {
+      console.log("[reactive-renderer]", ...args)
+    }
+  }
+
   resolveTemplate() {
     if (this.hasTemplateValue) return this.templateValue
 
@@ -129,18 +132,18 @@ export default class extends Controller {
 
     switch (route.type) {
       case "render":
-        log("render", this.element.id, route.data)
+        this.log("render", this.element.id, route.data)
         this.lastServerData = route.data
         if (this.renderFn) this.render({ ...route.data, ...this.clientState })
         break
 
       case "request_update":
-        log("update", this.element.id, { action: message.action, strategy: "notify" })
+        this.log("update", this.element.id, { action: message.action, strategy: "notify" })
         this.requestUpdate()
         break
 
       case "update":
-        log("update", this.element.id, route.data)
+        this.log("update", this.element.id, route.data)
         this.lastServerData = route.data
         if (this.renderFn) this.render({ ...route.data, ...this.clientState })
         this.element.dispatchEvent(new CustomEvent("reactive-renderer:updated", {
@@ -168,7 +171,9 @@ export default class extends Controller {
         component: this.componentValue,
         sgid: this.sgidValue,
         dom_id: this.element.id,
-        params: this.paramsValue
+        // The channel reads client state off params, so the server renders the
+        // state the component is in now, not the one the page was built with.
+        params: { ...this.paramsValue, ...this.clientState }
       })
     }, 50)
   }
@@ -262,16 +267,23 @@ export default class extends Controller {
               changed = true
             }
           }
-          if (changed && ctrl.lastServerData && ctrl.renderFn) {
-            requestAnimationFrame(() => ctrl.render({ ...ctrl.lastServerData, ...ctrl.clientState }))
-          }
+          if (changed) ctrl.rerender()
         })
       }
     }
 
     Object.assign(this.clientState, updates)
+    this.rerender()
+  }
+
+  // A push component holds the data it needs. A notify one may not have any
+  // yet, its payload arrives on request, so a state change asks for it rather
+  // than leaving the click with nothing to show.
+  rerender() {
     if (this.lastServerData && this.renderFn) {
       requestAnimationFrame(() => this.render({ ...this.lastServerData, ...this.clientState }))
+    } else if (this.strategyValue === "notify") {
+      this.requestUpdate()
     }
   }
 

data/app/javascript/reactive_component/lib/reactive_renderer_utils.js

@@ -44,9 +44,20 @@ const HOOK_NAMES = [
   'beforeNodeRemoved', 'afterNodeRemoved', 'beforeAttributeUpdated'
 ]
 
+// Turbo's convention: an element marked permanent is left as it is. A menu
+// that is open, or anything else the page is in the middle of, says so with
+// the attribute and the morph steps over it. Like Turbo's, it needs an id, so
+// the morph pairs it with its counterpart instead of adding a second copy.
+const isPermanent = (node) => node.nodeType === Node.ELEMENT_NODE && node.id !== "" && node.hasAttribute("data-turbo-permanent")
+
+const skipPermanent = {
+  beforeNodeMorphed: (currentNode) => !isPermanent(currentNode),
+  beforeNodeRemoved: (node) => !isPermanent(node)
+}
+
 const morphCallbacks = Object.fromEntries(HOOK_NAMES.map(name => [
   name,
-  (...args) => morphHooks.reduce((ok, hook) => (hook[name]?.(...args) === false ? false : ok), true)
+  (...args) => [skipPermanent, ...morphHooks].reduce((ok, hook) => (hook[name]?.(...args) === false ? false : ok), true)
 ]))
 
 export function morphElement(element, newHtml) {

data/app/jobs/reactive_component/broadcast_job.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module ReactiveComponent
+  # Carries a broadcast out of the request that committed the record. The
+  # request id travels with it so a client can still skip its own broadcast.
+  # A record deleted before the job runs has nothing left to render, so the
+  # job is dropped rather than retried.
+  class BroadcastJob < ActiveJob::Base
+    discard_on ActiveJob::DeserializationError
+
+    def perform(component_class_name, record, action, request_id = nil)
+      Turbo.with_request_id(request_id) do
+        ReactiveComponent.broadcast_for(component_class_name.constantize, record, action: action.to_sym)
+      end
+    end
+  end
+end

data/lib/reactive_component/broadcastable.rb

@@ -28,7 +28,7 @@ module ReactiveComponent
     end
 
     def broadcast_reactive(action)
-      reactive_component_classes.each { |klass| ReactiveComponent.broadcast_for(klass, self, action: action) }
+      reactive_component_classes.each { |klass| _broadcast_reactive_for(klass, action) }
     end
 
     def broadcast_reactive_update  = broadcast_reactive(:update)
@@ -44,10 +44,20 @@ module ReactiveComponent
         fields = klass._subscribed_fields
         next if fields && !saved_changes.keys.intersect?(fields)
 
-        ReactiveComponent.broadcast_for(klass, self, action: :update)
+        _broadcast_reactive_for(klass, :update)
       end
     end
 
     def _broadcast_reactive_destroy = broadcast_reactive(:destroy)
+
+    # A destroyed record cannot ride a job: it is gone by the time the job
+    # looks it up. Its signal is cheap, so it goes out inline. So does a
+    # component the job could not find by name, an anonymous class in a test.
+    def _broadcast_reactive_for(klass, action)
+      later = action != :destroy && klass.name && klass.try(:_broadcast_later)
+      return ReactiveComponent.broadcast_for(klass, self, action: action) unless later
+
+      ReactiveComponent::BroadcastJob.perform_later(klass.name, self, action.to_s, Turbo.current_request_id)
+    end
   end
 end

data/lib/reactive_component/engine.rb

@@ -5,6 +5,7 @@
 # Entities and signed stream ids are GlobalIDs. ActiveJob pulls this railtie in
 # for its own arguments; an app without ActiveJob would otherwise have no
 # `GlobalID.app` and could not create one.
+require 'active_job/railtie'
 require 'global_id/railtie'
 
 module ReactiveComponent

data/lib/reactive_component/entity.rb

@@ -36,6 +36,7 @@ module ReactiveComponent
   #   end
   module Entity
     extend ActiveSupport::Concern
+
     include ActiveModel::Model
     include Broadcastable
     include GlobalID::Identification
@@ -49,7 +50,7 @@ module ReactiveComponent
     # Turbo's `stream_name_from` prefers `to_gid_param`, so an entity names its
     # own stream. `to_param` stays as the fallback for when `GlobalID.app`
     # isn't set: a bare id would collide with every other entity sharing it.
-    def to_param = "#{self.class.model_name.param_key}/#{id}"
+    def to_param = "#{self.class.model_name.param_key}/#{to_key.join('/')}"
 
     class_methods do
       # The record the entity is keyed on. Defines `initialize(<name>:)`, the
@@ -67,7 +68,10 @@ module ReactiveComponent
       end
 
       # An entity keyed on plain values instead of a record. Defines an `id`
-      # that joins the values the way Rails joins a composite primary key, the
+      # that is the array of values, the way Rails exposes a composite primary
+      # key: `dom_id` joins them with `_` and GlobalID escapes each on its own,
+      # so a part may carry a dash or a colon. `primary_key` names the parts
+      # for GlobalID's arity check. Also defines the
       # `find` / `find_by(id:)` the channel and actions controller need, and,
       # as defaults you can replace, the readers, `initialize(company_id:,
       # user_id:)` and `from_key`. A key with the wrong arity resolves to nil
@@ -95,11 +99,12 @@ module ReactiveComponent
         attr_reader(*names)
 
         define_method(:initialize) { |**kwargs| names.each { |n| instance_variable_set(:"@#{n}", kwargs.fetch(n)) } }
-        define_method(:id) { names.map { |n| public_send(n) }.join('-') }
+        define_method(:id) { names.map { |n| public_send(n) } }
+        define_singleton_method(:primary_key) { names }
 
         define_singleton_method(:from_key) { |**values| new(**values) }
         define_singleton_method(:find_by) do |id:|
-          values = id.to_s.split('-')
+          values = Array(id)
           from_key(**names.zip(values).to_h) if values.size == names.size
         end
         define_singleton_method(:find) { |id| find_by(id: id) }

data/lib/reactive_component/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ReactiveComponent
-  VERSION = '0.8.5'
+  VERSION = '0.9.1'
 end

data/lib/reactive_component/wrapper.rb

@@ -12,6 +12,12 @@ module ReactiveComponent
              params: nil, template_id: nil, skip_own_broadcasts: ReactiveComponent.skip_own_broadcasts)
       dom_id_val = component_class.dom_id_for(record)
 
+      # A notify class broadcasts no data, so an instance cannot go back to push.
+      if component_class.notify? && strategy.to_s != 'notify'
+        raise ArgumentError, "#{component_class.name} declares strategy: :notify; " \
+                             "the wrapper cannot switch it to #{strategy.inspect}"
+      end
+
       # A notify component asks the server to re-render it, so it carries a
       # signed id of the record it is allowed to ask about. The raw id stays
       # out of it: the client already has one in its data.
@@ -39,8 +45,15 @@ module ReactiveComponent
 
       if client_state
         attrs << %(data-reactive-renderer-state-value="#{ERB::Util.html_escape(client_state.to_json)}")
-        initial_data = component_class.build_data(record, **client_state.symbolize_keys)
-        attrs << %(data-reactive-renderer-data-value="#{ERB::Util.html_escape(initial_data.to_json)}")
+
+        # A push wrapper renders from this payload until the first broadcast
+        # arrives. A notify one asks the server for its data instead, so the
+        # attribute would be the page a second time, both branches of every
+        # extracted expression included.
+        unless strategy.to_s == 'notify'
+          initial_data = component_class.build_data(record, **client_state.symbolize_keys)
+          attrs << %(data-reactive-renderer-data-value="#{ERB::Util.html_escape(initial_data.to_json)}")
+        end
       end
 
       attrs << %(data-reactive-renderer-strategy-value="#{strategy}") if strategy

data/lib/reactive_component.rb

@@ -38,6 +38,8 @@ module ReactiveComponent
     class_attribute :_client_state_fields, instance_writer: false, default: {}
     class_attribute :_subscribed_events, instance_writer: false, default: %i[create update destroy]
     class_attribute :_subscribed_fields, instance_writer: false, default: nil
+    class_attribute :_strategy, instance_writer: false, default: nil
+    class_attribute :_broadcast_later, instance_writer: false, default: true
   end
 
   def render_in(view_context, &)
@@ -60,6 +62,7 @@ module ReactiveComponent
                    end
 
     extra_opts = respond_to?(:live_wrapper_options, true) ? live_wrapper_options : {}
+    extra_opts = { strategy: self.class._strategy }.merge(extra_opts) if self.class._strategy
 
     wrapped = ReactiveComponent::Wrapper.wrap(self.class, record, inner_html, stream: stream, client_state: client_state,
                                                                               **extra_opts)
@@ -116,6 +119,8 @@ module ReactiveComponent
   end
   private_class_method :raise_unsafe!
 
+  def self.signal_for(component_class, record) = { 'id' => record.id, 'dom_id' => component_class.dom_id_for(record) }
+
   def self.broadcast_for(component_class, record, action:)
     return unless component_class._subscribed_events.include?(action)
 
@@ -129,11 +134,11 @@ module ReactiveComponent
 
     case action
     when :update
-      Channel.broadcast_data(stream, action: :update, data: component_class.build_data(record))
+      data = component_class.notify? ? signal_for(component_class, record) : component_class.build_data(record)
+
+      Channel.broadcast_data(stream, action: :update, data: data)
     when :destroy
-      Channel.broadcast_data(stream, action: :destroy, data: {
-                               'id' => record.id, 'dom_id' => component_class.dom_id_for(record)
-                             })
+      Channel.broadcast_data(stream, action: :destroy, data: signal_for(component_class, record))
     when :create
       target = config&.dig(:prepend_target)
       return unless target
@@ -145,11 +150,13 @@ module ReactiveComponent
   end
 
   class_methods do
-    def subscribes_to(attr_name, class_name: nil, only: %i[create update destroy], fields: nil)
+    def subscribes_to(attr_name, class_name: nil, only: %i[create update destroy], fields: nil, strategy: nil, later: true)
       self._live_model_attr = attr_name.to_sym
       self._live_model_class_name = class_name || attr_name.to_s.classify
       self._subscribed_events = Array(only).map(&:to_sym)
       self._subscribed_fields = fields && Array(fields).map(&:to_s)
+      self._strategy = strategy&.to_sym
+      self._broadcast_later = later
 
       component_class = self
 
@@ -174,6 +181,8 @@ module ReactiveComponent
       end
     end
 
+    def notify? = _strategy == :notify
+
     def live_model_class
       _live_model_class_name&.constantize
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: reactive_component
 version: !ruby/object:Gem::Version
-  version: 0.8.5
+  version: 0.9.1
 platform: ruby
 authors:
 - Przemyslaw Lusar
@@ -106,6 +106,7 @@ files:
 - app/controllers/reactive_component/actions_controller.rb
 - app/javascript/reactive_component/controllers/reactive_renderer_controller.js
 - app/javascript/reactive_component/lib/reactive_renderer_utils.js
+- app/jobs/reactive_component/broadcast_job.rb
 - config/importmap.rb
 - config/routes.rb
 - lib/reactive_component.rb