reactive_component 0.7.1 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6897d1bd7689445185a2a06d80b868778d1dca89fa15bf1cbbc81ac31ce2ccb2
-  data.tar.gz: a285c182b5fea6ab970d8d0f609237f81a98d7724d95c88a8f595dce121b361f
+  metadata.gz: a6b20beff63665f50b6910b02f241982c53bf7112145d2db4158b08738d2b3c4
+  data.tar.gz: 43c738cda0f1d36bb20a42f41a16ba9c55585858487d363cb37cebd4aa26de0d
 SHA512:
-  metadata.gz: d8c1a5eaddc568b0c8aa20e88a18e7631633d46d344892d447ed0bbe6b12513b7637c0b00794d19679ef2f3da13d1ba012a1559540f754f911c5b2f2179230f1
-  data.tar.gz: 1b6ec87280c44844c8b93350d21f255280bce22ed79cf192234c6319f1f30971f5e0947e34433c2ee19a72fde6535f31b3a7ccfe5dac3800a10fdc28e50f72fe
+  metadata.gz: 5b1011b2b0c3d08ad80ecc86586d7c0061c77bc762c0bbafbbf031c2420d711e69c1c63b34ea67ef0f3bfd0824f7f48ce2737e59b26e61a3ad1def298a6b9ed3
+  data.tar.gz: dd3c3c6ad4e6d900bfd37ad95450c20344fda96060e0cb1d8f8695918b9e7a6678c89a2d8f1ff673a129cd850c6f07e8c556249bd4410eeaef549c29c9be49d2

data/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## [0.8.0] - 2026-09-10
+
+### Added
+- `ReactiveComponent::Entity`: subscribe a component to an object built from
+  several models. The entity declares its `root` record and `rebuilds_on`
+  each source model, optionally narrowed to `fields:`. See the Derived
+  Entities guide.
+- `broadcast_reactive(action)` and `broadcast_reactive_destroy` are public on
+  wired models, alongside `broadcast_reactive_update`.
+
+### Fixed
+- Multibyte characters in a template (★, é, emoji) rendered as mojibake after
+  a live re-render. The client now decodes the base64 template as UTF-8.
+
+## [0.7.2] - 2026-09-07
+
+### Security
+- The actions endpoint enforces CSRF itself with `protect_from_forgery`
+  instead of relying on the host's `load_defaults`.
+- `live_action` tokens expire after `ReactiveComponent.action_token_ttl`
+  (default one day). Before, a token stayed valid forever.
+- `request_update` passes only declared `client_state` fields to the
+  component. Any other client key was set as an instance variable and
+  handed to the constructor.
+- `request_update` over the channel only answers for records whose
+  `broadcasts` stream is the one the subscriber verified. Before, any
+  subscriber could pull the rendered data of any record id of the model.
+- The channel resolves the component name with `safe_constantize` and
+  requires a class that includes `ReactiveComponent`.
+
+### Fixed
+- The renderer controller imports its utils by bare specifier again. The
+  0.7.1 relative import resolved to an undigested `/assets/` URL under
+  Propshaft and 404ed, which left Turbo stream sources never connecting and
+  every system test failing. The bare specifier works for both importmap
+  (`pin_all_from`) and npm (`exports`).
+
 ## [0.7.1] - 2026-09-06
 
 ### Added

data/app/channels/reactive_component/channel.rb

@@ -7,9 +7,9 @@ module ReactiveComponent
     class_attribute :filter_callback, default: nil
 
     def subscribed
-      stream_name = verified_stream_name
-      if stream_name
-        stream_from stream_name
+      @stream_name = verified_stream_name
+      if @stream_name
+        stream_from @stream_name
       else
         reject
       end
@@ -20,12 +20,8 @@ module ReactiveComponent
     end
 
     def request_update(data)
-      component_class = data['component'].constantize
       params = data['params'] || {}
-
-      model_class = component_class.live_model_class
-      record_id = data['record_id'] || params.delete('record_id')
-      record = model_class.find_by(id: record_id)
+      component_class, record = subscribed_component_and_record(data, params)
       return unless record
 
       if data['record_id'].present?
@@ -35,13 +31,32 @@ module ReactiveComponent
           transmit({ 'action' => 'remove', 'dom_id' => data['dom_id'] })
         end
       else
-        result = component_class.build_data(record, **params.symbolize_keys)
+        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 })
       end
     end
 
     private
 
+    # The component must be a reactive component and the record must broadcast
+    # to the stream this subscriber verified: the same stream the wrapper
+    # signed into the page. Anything else is a guess at a record id the client
+    # was never shown.
+    def subscribed_component_and_record(data, params)
+      component_class = data['component'].to_s.safe_constantize
+      return unless component_class.is_a?(Class) && component_class.include?(ReactiveComponent)
+
+      record = component_class.live_model_class.find_by(id: data['record_id'] || params.delete('record_id'))
+      return unless record
+
+      stream = ReactiveComponent::Wrapper.find_stream_for(component_class, record)
+      signed = Turbo::StreamsChannel.signed_stream_name(stream)
+      return unless Turbo::StreamsChannel.verified_stream_name(signed) == @stream_name
+
+      [component_class, record]
+    end
+
     def record_matches?(record, params)
       return true unless self.class.filter_callback
 

data/app/controllers/reactive_component/actions_controller.rb

@@ -2,6 +2,8 @@
 
 module ReactiveComponent
   class ActionsController < ActionController::Base
+    protect_from_forgery with: :exception
+
     def create
       payload = verify_token!.symbolize_keys
       component_class = payload[:c].constantize

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

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 import { createConsumer } from "@rails/actioncable"
-import { compileTemplate, decompress, morphElement, buildActionBody, routeMessage, duplicateIds, strictData } from "../lib/reactive_renderer_utils.js"
+import { compileTemplate, decompress, morphElement, buildActionBody, routeMessage, duplicateIds, strictData } from "reactive_component/lib/reactive_renderer_utils"
 
 const consumer = createConsumer()
 const log = (...args) => {
@@ -21,6 +21,18 @@ function subscribe(streamValue, controller) {
     sub = consumer.subscriptions.create(
       { channel: "ReactiveComponent::Channel", signed_stream_name: streamValue },
       {
+        connected() {
+          sub._connected = true
+          for (const handler of sub.handlers || []) {
+            handler.subscriptionConnected()
+          }
+        },
+        disconnected() {
+          sub._connected = false
+          for (const handler of sub.handlers || []) {
+            handler.subscriptionDisconnected()
+          }
+        },
         received: async (message) => {
           const decoded = message.z ? await decompress(message.z) : message
           for (const handler of sub.handlers) {
@@ -32,6 +44,7 @@ function subscribe(streamValue, controller) {
     sub.handlers = new Set()
   }
   sub.handlers.add(controller)
+  if (sub._connected) controller.subscriptionConnected()
 }
 
 function unsubscribe(streamValue, controller) {
@@ -90,6 +103,14 @@ export default class extends Controller {
     }
   }
 
+  subscriptionConnected() {
+    this.element.setAttribute("data-reactive-renderer-connected", "")
+  }
+
+  subscriptionDisconnected() {
+    this.element.removeAttribute("data-reactive-renderer-connected")
+  }
+
   resolveTemplate() {
     if (this.hasTemplateValue) return this.templateValue
 

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

@@ -8,7 +8,7 @@ export function compileTemplate(source) {
   if (templateCache.has(source)) return templateCache.get(source)
 
   try {
-    const body = isBase64(source) ? atob(source) : source
+    const body = isBase64(source) ? decodeBase64(source) : source
     const fn = new Function("data", body)
     templateCache.set(source, fn)
     return fn
@@ -18,6 +18,12 @@ export function compileTemplate(source) {
   }
 }
 
+// atob yields one char per byte, so multibyte UTF-8 (★, é, emoji) in a
+// template literal came out as mojibake once the client re-rendered.
+function decodeBase64(base64) {
+  return new TextDecoder().decode(Uint8Array.from(atob(base64), c => c.charCodeAt(0)))
+}
+
 export function clearTemplateCache() {
   templateCache.clear()
 }

data/lib/reactive_component/broadcastable.rb

@@ -16,6 +16,9 @@ module ReactiveComponent
 
         self.reactive_component_classes = reactive_component_classes | [component_class]
 
+        # A derived entity (ReactiveComponent::Entity) is not an ActiveRecord
+        # model: it has no commit callbacks and broadcasts itself.
+        return unless respond_to?(:after_create_commit)
         return if _commit_callbacks.map(&:filter).include?(:_broadcast_reactive_create)
 
         after_create_commit  :_broadcast_reactive_create
@@ -24,18 +27,17 @@ module ReactiveComponent
       end
     end
 
-    def broadcast_reactive_update
-      _broadcast_reactive(:update)
+    def broadcast_reactive(action)
+      reactive_component_classes.each { |klass| ReactiveComponent.broadcast_for(klass, self, action: action) }
     end
 
-    private
+    def broadcast_reactive_update  = broadcast_reactive(:update)
+    def broadcast_reactive_destroy = broadcast_reactive(:destroy)
 
-    def _broadcast_reactive_create  = _broadcast_reactive(:create)
-    def _broadcast_reactive_update  = _broadcast_reactive(:update)
-    def _broadcast_reactive_destroy = _broadcast_reactive(:destroy)
+    private
 
-    def _broadcast_reactive(action)
-      reactive_component_classes.each { |klass| ReactiveComponent.broadcast_for(klass, self, action: action) }
-    end
+    def _broadcast_reactive_create  = broadcast_reactive(:create)
+    def _broadcast_reactive_update  = broadcast_reactive(:update)
+    def _broadcast_reactive_destroy = broadcast_reactive(:destroy)
   end
 end

data/lib/reactive_component/entity.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+require 'active_model'
+
+module ReactiveComponent
+  # A derived entity: a plain object built on top of several ActiveRecord
+  # models that a component can `subscribes_to` like a model. The entity owns
+  # the whole declaration — which record it is keyed on, and which changes to
+  # which models rebuild it:
+  #
+  #   class OrderSummary
+  #     include ReactiveComponent::Entity
+  #
+  #     root :order
+  #     rebuilds_on Order,    fields: %i[status total_cents]
+  #     rebuilds_on Payment,  via: :order_id, fields: %i[amount]
+  #     rebuilds_on Shipment, via: :order_id, fields: %i[delivered_at]
+  #
+  #     def total = order.payments.sum(:amount)
+  #   end
+  #
+  #   class OrderSummaryComponent < ApplicationComponent
+  #     include ReactiveComponent
+  #     subscribes_to :summary, class_name: "OrderSummary"
+  #   end
+  module Entity
+    extend ActiveSupport::Concern
+    include ActiveModel::Model
+    include Broadcastable
+
+    included do
+      class_attribute :root_name, instance_writer: false
+    end
+
+    def persisted? = true
+
+    # Default stream when the component declares no `broadcasts stream:`.
+    # A bare id would collide with every other entity sharing it.
+    def to_param = "#{self.class.model_name.param_key}/#{id}"
+
+    class_methods do
+      # The record the entity is keyed on. Defines `initialize(<name>:)`, the
+      # reader, `id`, and the `find` / `find_by(id:)` the channel and actions
+      # controller need.
+      def root(name, class_name: name.to_s.classify)
+        self.root_name = name.to_sym
+        attr_reader name
+
+        define_method(:initialize) { |**kwargs| instance_variable_set(:"@#{name}", kwargs.fetch(name)) }
+        delegate :id, to: name
+
+        define_singleton_method(:find)    { |id| new(name => class_name.constantize.find(id)) }
+        define_singleton_method(:find_by) { |id:| (record = class_name.constantize.find_by(id: id)) && new(name => record) }
+      end
+
+      # Rebroadcast the entity after `model` commits. `via:` is the foreign key
+      # on `model` pointing at the root; omit it when `model` is the root.
+      # `fields:` narrows updates to the listed columns; create and destroy
+      # always count.
+      def rebuilds_on(model, via: nil, fields: nil)
+        entity = self
+        fields = fields&.map(&:to_s)
+
+        model.after_commit { entity.rebuild_from(self, via: via, fields: fields) }
+      end
+
+      def rebuild_from(record, via:, fields:)
+        action = commit_action(record)
+        return if action == :update && fields && !record.saved_changes.keys.intersect?(fields)
+        return find_by(id: record.public_send(via))&.broadcast_reactive(:update) if via
+
+        new(root_name => record).broadcast_reactive(action)
+      end
+
+      private
+
+      def commit_action(record)
+        return :destroy if record.destroyed?
+        return :create if record.previously_new_record?
+
+        :update
+      end
+    end
+  end
+end

data/lib/reactive_component/version.rb

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

data/lib/reactive_component.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+require 'active_support/core_ext/integer/time'
 require 'active_support/concern'
 
 require_relative 'reactive_component/version'
@@ -7,6 +8,7 @@ require_relative 'reactive_component/compiler'
 require_relative 'reactive_component/data_evaluator'
 require_relative 'reactive_component/wrapper'
 require_relative 'reactive_component/broadcastable'
+require_relative 'reactive_component/entity'
 require_relative 'reactive_component/engine' if defined?(Rails::Engine)
 
 module ReactiveComponent
@@ -14,6 +16,8 @@ module ReactiveComponent
 
   mattr_accessor :debug, default: false
   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
 
   class Error < StandardError; end
 
@@ -204,7 +208,7 @@ module ReactiveComponent
     def live_action_token(record)
       live_action_verifier.generate(
         { c: name, m: record.class.name, r: record.id },
-        purpose: :reactive_component_action
+        purpose: :reactive_component_action, expires_in: ReactiveComponent.action_token_ttl
       )
     end
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: reactive_component
 version: !ruby/object:Gem::Version
-  version: 0.7.1
+  version: 0.8.0
 platform: ruby
 authors:
 - Przemyslaw Lusar
@@ -113,6 +113,7 @@ files:
 - lib/reactive_component/compiler.rb
 - lib/reactive_component/data_evaluator.rb
 - lib/reactive_component/engine.rb
+- lib/reactive_component/entity.rb
 - lib/reactive_component/erubi.rb
 - lib/reactive_component/transpiler.rb
 - lib/reactive_component/version.rb