reactive_component 0.8.1 → 0.8.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7340ef31f70f617e46d0793d44813938ffe8ed4d59b7f5c43f1623248266f57b
-  data.tar.gz: 2b653233060ad294e0f5cd472c95d48fecb4d7ccc869a49f7fcb255dffe38ce2
+  metadata.gz: c0a2f38ec2a6ac3161f8f5e0f9592aaa5241dfcecfb7992ca0c65f29e7f6ea84
+  data.tar.gz: 4a02ca05478a0675b8de4dde77336dab391fe397931ba7e952912455456b6915
 SHA512:
-  metadata.gz: 0b4bada796415fca513b5826e53d6942b20f5dc1e87c5b9bd243ff6fe80bfa6b6d018e1a2cfefd4692d24ec8cb02f61ff23cc360cf4d83098a6142936d59885e
-  data.tar.gz: d07195fc8256d20daa9d658ee184ebcb99ce3243e38936bc27ed9b63a0139b50a058a91d3dbed9d0d1ffa5fa2c40f51919b2ec24ddce1f475a934d1e2db94ba5
+  metadata.gz: 5029099159c30a18cbb2b354d913df8aeaa2003481d5a70864503e6f9cbc50638ccb9a7d7bf5258a3b2a6e879806be9c02ed1f86bf7f972781cc51b1cb846413
+  data.tar.gz: 87e761fb987f437b48787f5aa8e3b13009ef3025ba0ef9c080be39ce4b3e06a1b7d4ae63113729b98cd9c79391d34c91e8770b9623ba2998a3c73f3bea2ade83

data/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## [0.8.3] - 2026-09-15
+
+### Added
+- Notify mode guide. A notify component re-renders from the server instead of
+  the broadcast payload, and `filter_callback` can remove it from a filtered
+  list. See Notify Mode.
+- Notify wrappers fill in the component name and record id, so
+  `live_wrapper_options` only needs `strategy: :notify`.
+- `ReactiveComponent.skip_own_broadcasts`: the component that ran a
+  `live_action` ignores the broadcast it caused and keeps its optimistic
+  update. Off by default; override per component with `live_wrapper_options`.
+- `subscribes_to ..., fields:` limits a component's update broadcasts to
+  changes in the listed columns, like `rebuilds_on ..., fields:` on entities.
+
+### Fixed
+- Notify components only react to changes to their own record. Before, every
+  notify component on a shared stream requested a re-render on any change.
+- A destroyed record's notify component is removed instead of staying on the
+  page.
+- `filter_callback` runs on every notify request, not only for components
+  that declare client state.
+- The configuration docs set `Channel` options inside `to_prepare`; the
+  previous initializer example raised `NameError`.
+
+## [0.8.2] - 2026-09-15
+
+### Added
+- The Stimulus controller is published to npm as
+  `@lluzak/reactive_component` for apps using esbuild, Vite, Rspack, or
+  another bundler. Install it under the `reactive_component` alias. See
+  Other bundlers in the Installation guide.
+- Pushing a `vX.Y.Z` tag builds the gem, publishes the JS package, and
+  creates the GitHub release.
+
 ## [0.8.1] - 2026-09-11
 
 ### Added

data/app/channels/reactive_component/channel.rb

@@ -24,16 +24,11 @@ module ReactiveComponent
       component_class, record = subscribed_component_and_record(data, params)
       return unless record
 
-      if data['record_id'].present?
-        if record_matches?(record, params)
-          transmit({ 'action' => 'render', 'data' => component_class.build_data(record) })
-        else
-          transmit({ 'action' => 'remove', 'dom_id' => data['dom_id'] })
-        end
-      else
+      if record_matches?(record, params)
         client_state = params.slice(*component_class._client_state_fields.keys.map(&:to_s))
-        result = component_class.build_data(record, **client_state.symbolize_keys)
-        transmit({ 'action' => 'render', 'data' => result })
+        transmit({ 'action' => 'render', 'data' => component_class.build_data(record, **client_state.symbolize_keys) })
+      else
+        transmit({ 'action' => 'remove', 'dom_id' => data['dom_id'] })
       end
     end
 
@@ -75,6 +70,7 @@ module ReactiveComponent
         stream_name = Turbo::StreamsChannel.verified_stream_name(signed)
 
         payload = { action: action, data: data }
+        payload[:request_id] = Turbo.current_request_id if Turbo.current_request_id
 
         if compress
           json = ActiveSupport::JSON.encode(payload)

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

@@ -69,7 +69,8 @@ export default class extends Controller {
     strategy: { type: String, default: "push" },
     component: { type: String, default: "" },
     params: { type: Object, default: {} },
-    fieldMap: { type: Object, default: {} }
+    fieldMap: { type: Object, default: {} },
+    skipOwnBroadcasts: { type: Boolean, default: false }
   }
 
   connect() {
@@ -123,7 +124,7 @@ export default class extends Controller {
   }
 
   handleMessage(message) {
-    const route = routeMessage(message, this.element.id, this.strategyValue)
+    const route = routeMessage(message, this.element.id, this.strategyValue, this.ownRequestIds)
 
     switch (route.type) {
       case "render":
@@ -205,9 +206,7 @@ export default class extends Controller {
 
     fetch(this.actionUrlValue, {
       method: "POST",
-      headers: {
-        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content,
-      },
+      headers: this.actionHeaders(),
       body
     }).then(response => {
       if (!response.ok && rollbackData) {
@@ -229,6 +228,20 @@ export default class extends Controller {
     })
   }
 
+  // With skipOwnBroadcasts, tags the request so the broadcast it causes can be
+  // recognised and ignored. Turbo's header name, so turbo-rails tracks the id.
+  actionHeaders() {
+    const headers = { "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content }
+    if (!this.skipOwnBroadcastsValue) return headers
+
+    const requestId = crypto.randomUUID?.() ?? Math.random().toString(36).slice(2)
+    this.ownRequestIds ??= new Set()
+    this.ownRequestIds.add(requestId)
+    if (this.ownRequestIds.size > 20) this.ownRequestIds.delete(this.ownRequestIds.values().next().value)
+    headers["X-Turbo-Request-Id"] = requestId
+    return headers
+  }
+
   setState(event) {
     const updates = { ...event.params }
     delete updates.action

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

@@ -78,29 +78,29 @@ export function buildActionBody(actionName, actionToken, stimulusParams, formDat
   return { body, redirect }
 }
 
-export function routeMessage(message, elementId, strategy) {
+export function routeMessage(message, elementId, strategy, ownRequestIds) {
   const { action, data } = message
 
+  if (action === "update" && ownRequestIds?.has(message.request_id)) {
+    return { type: "ignore" }
+  }
+
   if (action === "render" && data?.dom_id === elementId) {
     return { type: "render", data }
   }
 
-  if (strategy === "notify" && (action === "update" || action === "destroy")) {
-    return { type: "request_update" }
+  if (action === "destroy" && data?.dom_id === elementId) {
+    return { type: "destroy" }
   }
 
   if (action === "update" && data?.dom_id === elementId) {
-    return { type: "update", data }
+    return strategy === "notify" ? { type: "request_update" } : { type: "update", data }
   }
 
   if (action === "remove" && (message.dom_id || data?.dom_id) === elementId) {
     return { type: "remove" }
   }
 
-  if (action === "destroy" && data?.dom_id === elementId) {
-    return { type: "destroy" }
-  }
-
   return { type: "ignore" }
 }
 

data/lib/reactive_component/broadcastable.rb

@@ -36,8 +36,18 @@ module ReactiveComponent
 
     private
 
-    def _broadcast_reactive_create  = broadcast_reactive(:create)
-    def _broadcast_reactive_update  = broadcast_reactive(:update)
+    def _broadcast_reactive_create = broadcast_reactive(:create)
+
+    # Skips components subscribed to `fields:` when none of them changed.
+    def _broadcast_reactive_update
+      reactive_component_classes.each do |klass|
+        fields = klass._subscribed_fields
+        next if fields && !saved_changes.keys.intersect?(fields)
+
+        ReactiveComponent.broadcast_for(klass, self, action: :update)
+      end
+    end
+
     def _broadcast_reactive_destroy = broadcast_reactive(:destroy)
   end
 end

data/lib/reactive_component/version.rb

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

data/lib/reactive_component/wrapper.rb

@@ -5,9 +5,14 @@ module ReactiveComponent
     module_function
 
     def wrap(component_class, record, inner_html, stream: nil, client_state: nil, strategy: nil, component_name: nil,
-             params: nil, template_id: nil)
+             params: nil, template_id: nil, skip_own_broadcasts: ReactiveComponent.skip_own_broadcasts)
       dom_id_val = component_class.dom_id_for(record)
 
+      if strategy.to_s == 'notify'
+        component_name ||= component_class.name
+        params = { record_id: record.id }.merge(params || {})
+      end
+
       attrs = [
         %(id="#{dom_id_val}"),
         %(data-controller="reactive-renderer"),
@@ -33,6 +38,8 @@ module ReactiveComponent
 
       attrs << %(data-reactive-renderer-strategy-value="#{strategy}") if strategy
 
+      attrs << %(data-reactive-renderer-skip-own-broadcasts-value="true") if skip_own_broadcasts
+
       attrs << %(data-reactive-renderer-component-value="#{component_name}") if component_name
 
       attrs << %(data-reactive-renderer-params-value="#{ERB::Util.html_escape(params.to_json)}") if params

data/lib/reactive_component.rb

@@ -18,6 +18,8 @@ module ReactiveComponent
   mattr_accessor :renderer, default: nil
   # How long a live_action token minted into a page stays valid.
   mattr_accessor :action_token_ttl, default: 1.day
+  # Whether a component ignores the broadcast caused by its own live_action.
+  mattr_accessor :skip_own_broadcasts, default: false
 
   class Error < StandardError; end
 
@@ -34,6 +36,7 @@ module ReactiveComponent
     class_attribute :_broadcast_config, instance_writer: false
     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
   end
 
   def render_in(view_context, &)
@@ -141,10 +144,11 @@ module ReactiveComponent
   end
 
   class_methods do
-    def subscribes_to(attr_name, class_name: nil, only: %i[create update destroy])
+    def subscribes_to(attr_name, class_name: nil, only: %i[create update destroy], fields: nil)
       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)
 
       component_class = self
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: reactive_component
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.8.3
 platform: ruby
 authors:
 - Przemyslaw Lusar