phlex-reactive 0.2.2 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 11c82575cc72017be4f81341c0c2f999d626fe88ed8b81a20cfde246a412fe12
-  data.tar.gz: '0996ececdc33cd2220a7a6517d49d1a59c5c583af891b937f1df32f433189a65'
+  metadata.gz: cd797b375cedb73b2a6f5695bf38a7eddd0a939aca5f8602c661537f6407ad7b
+  data.tar.gz: 994da28bed60c495d87d01fb736e80f19439ca52417f2c70f61a17aa7d15b351
 SHA512:
-  metadata.gz: 24b3704443cd08380e30bb2bd4340d266a75a39beb80247a4ba26327a4c6f6429b0017fc94618b4063dc4f00a7a86f49ab88074c008d9be1c2ead0b266b5c8cd
-  data.tar.gz: 4f858ded4f109ce0350603140572b4d9c694acd981785ac1913c0cf4c48630e6927d223073cd89fbb1f6a72e16bf7cea0603079661fff7b80740a4389ccbe732
+  metadata.gz: 11e13357335ec795cc5d0da9b60da2ce059128fed4f355f3864d037fbf5c0dab692844d3b8dd9d10f0b386e7bccd86ae635b2d2bc17a24e4ed1988bd37ce014e
+  data.tar.gz: 11c0e74b06f6d55818fc65d83336d9ec77eee65422adfe477a5ebc8a83d6dda4ae6f1dad3c6fdf17a9e215cdef5bcc958bcbaa43c3e6d32b02adb15124c372e1

data/CHANGELOG.md

@@ -8,6 +8,49 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Fixed
 
+- **Reactive save silently dropped rich-text / custom-editor fields.** The
+  client's field auto-collection (`#collectFields`) queried only
+  `input[name], select[name], textarea[name]`, so a named rich-text editor
+  (`lexxy-editor`, `trix-editor`) or any `[contenteditable]` was skipped — a
+  reactive `save` posted an empty value and silently wiped the field, with no
+  error. `#collectFields` now also reads named custom editors and contenteditable
+  elements (by `name` *attribute*, since a plain element has no `name` IDL
+  property), reading the serialized `.value` else the contenteditable text. It
+  only fills a name the standard controls left absent or empty, so a hidden input
+  a rich editor mirrors into (e.g. Trix) still wins when populated. The vendored
+  client copy the system suite runs (`spec/dummy/public/vendor/...`) is now kept
+  byte-identical to source by a guard spec, so the browser tests never validate
+  stale client code again. Closes #8.
+
+## [0.2.3] - 2026-06-24
+
+### Fixed
+
+- **Record-backed components silently lost `reactive_state` every action.** When
+  a component declared BOTH `reactive_record` and `reactive_state`, the state
+  branch was dead: `reactive_token` signed only the record GID and
+  `from_identity` rebuilt with only the record — so the listed instance vars
+  (e.g. `attribute`, `editing`) reset to their `initialize` defaults on every
+  action. This broke the documented `inline_edit` example (clicking "edit"
+  couldn't stay in edit mode; `save` wrote the wrong/blank column) and quietly
+  voided the docs' promise that `@attribute` is signed/tamper-proof.
+  `reactive_token` now signs the record GID AND the declared state into one
+  `MessageVerifier` payload, and `from_identity` restores both — record + state
+  are composable, and the state stays tamper-proof. Record-only (`{c, gid}`) and
+  state-only (`{c, s}`) token shapes are unchanged; a signed `false` survives the
+  round trip (only a genuinely absent value falls back to the `initialize`
+  default). No API changes. Closes #6.
+
+### Documentation
+
+- Documented the combined record + state identity (the `{c, gid, s}` token
+  shape): the README, `docs/architecture.md`, and `docs/security.md` no longer
+  frame `reactive_record` and `reactive_state` as mutually exclusive. (#9)
+
+## [0.2.2] - 2026-06-24
+
+### Fixed
+
 - **Record-backed component built with a different init keyword by the action
   endpoint vs the broadcast path.** The click path (`Component.from_identity`)
   builds with `reactive_record_key` (the `reactive_record :name`), but the
@@ -22,7 +65,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
   an explicit `def self.model_param_name` override still wins. No API changes.
   Closes #4.
 
-## [0.2.1]
+## [0.2.1] - 2026-06-24
 
 ### Fixed
 
@@ -37,7 +80,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
   the gem eager-loads cleanly. Added a regression spec that calls
   `eager_load_all`. No API changes.
 
-## [0.2.0]
+## [0.2.0] - 2026-06-24
 
 ### Added
 
@@ -56,7 +99,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
   helpers. phlex-reactive still works on Action Cable without pgbus; the
   `exclude:` argument is simply ignored there.
 
-## [0.1.0]
+## [0.1.0] - 2026-06-20
 
 ### Added
 
@@ -80,7 +123,9 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
   scaffolds a reactive component (and an RSpec spec when the app uses RSpec),
   state-backed by default or record-backed with `--record`.
 
-[Unreleased]: https://github.com/mhenrixon/phlex-reactive/compare/v0.2.1...HEAD
+[Unreleased]: https://github.com/mhenrixon/phlex-reactive/compare/v0.2.2...HEAD
+[0.2.3]: https://github.com/mhenrixon/phlex-reactive/compare/v0.2.2...v0.2.3
+[0.2.2]: https://github.com/mhenrixon/phlex-reactive/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/mhenrixon/phlex-reactive/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/mhenrixon/phlex-reactive/compare/v0.1.0...v0.2.0
 [0.1.0]: https://github.com/mhenrixon/phlex-reactive/releases/tag/v0.1.0

data/README.md

@@ -211,15 +211,21 @@ class Todos::Item < ApplicationComponent
 end
 ```
 
-### 2. State-backed (record-less widgets)
+### 2. State-backed (signed instance vars)
 
-No database row — e.g. a counter or a wizard step. The listed instance vars are
-signed into the token. Keep state small and JSON-serializable.
+Sign small, JSON-serializable instance vars into the token. Use it **alone** for
+a record-less widget (a counter, a wizard step), or **alongside `reactive_record`**
+to carry transient UI state — which field, what mode — next to the row. Both the
+record's GlobalID and the state are signed into one token and rebuilt on each
+action. Keep state small and JSON-serializable.
 
 ```ruby
 reactive_state :count, :step       # signed; rebuilt on each action
 ```
 
+The [inline edit example](docs/examples/inline_edit.md) combines both: a
+`reactive_record :record` plus `reactive_state :attribute, :editing`.
+
 ---
 
 ## Concrete examples
@@ -257,7 +263,7 @@ Use in controllers: `render turbo_stream: Counter.replace(counter)`.
 | Macro / helper | Use |
 |---|---|
 | `reactive_record :name` | Record-backed identity (GlobalID). State = the DB. |
-| `reactive_state :a, :b` | State-backed identity (signed instance vars). Record-less only. |
+| `reactive_state :a, :b` | Signed instance-var identity. Standalone, or combined with `reactive_record` to sign transient UI state alongside the row. |
 | `action :name, params: { x: :integer }` | Declare a client-invokable action + its param schema. **Default-deny.** |
 | `reactive_attrs` | Spread onto the root element: marks it reactive + carries the signed token. |
 | `on(:action, event: "click", **params)` | Spread onto a trigger element. Adds `type=button` for clicks. |
@@ -314,8 +320,10 @@ phlex-reactive is built so the easy path is the safe path — but the boundary i
 real, so read this once.
 
 - **State is never trusted from the client.** The DOM holds a `MessageVerifier`-
-  signed identity (`{component, gid}` or `{component, state}`), not raw state. A
-  tampered class, record, or state value fails signature verification → 400.
+  signed identity — `{component, gid}` (record-backed), `{component, state}`
+  (state-backed), or `{component, gid, state}` when a component declares both —
+  not raw state. A tampered class, record, or state value fails signature
+  verification → 400.
 - **Actions are default-deny.** Only methods declared with `action :name` are
   invokable. A public method without `action` is unreachable.
 - **You must authorize.** The signature proves the *token is yours*, not that

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

@@ -122,6 +122,7 @@ export default class extends Controller {
 
   #collectFields() {
     const fields = {}
+    // Standard form controls.
     this.element.querySelectorAll("input[name], select[name], textarea[name]").forEach((field) => {
       if (field.type === "checkbox") {
         fields[field.name] = field.checked
@@ -131,6 +132,25 @@ export default class extends Controller {
         fields[field.name] = field.value
       }
     })
+    // Named rich-text / custom editors (lexxy-editor, trix-editor) and bare
+    // [contenteditable]. These aren't input/select/textarea, so the query above
+    // skips them — without this, a reactive save posts an empty value and
+    // silently wipes the field (issue #8). Read whatever the element exposes:
+    // a custom editor's serialized `.value`, else its contenteditable text.
+    // Only fill a name the standard controls left absent or empty, so a synced
+    // hidden input (e.g. Trix mirrors into one) still wins when populated.
+    this.element
+      .querySelectorAll("[name]:is(lexxy-editor, trix-editor, [contenteditable=''], [contenteditable=true], [contenteditable=plaintext-only])")
+      .forEach((el) => {
+        // A plain element (e.g. a <div contenteditable>) has no `name` IDL
+        // property — only the attribute — so read getAttribute, not el.name.
+        const name = el.getAttribute("name")
+        if (!name) return
+        const existing = fields[name]
+        if (existing == null || existing === "") {
+          fields[name] = el.value ?? el.textContent ?? el.innerHTML ?? ""
+        }
+      })
     return fields
   }
 

data/lib/phlex/reactive/component.rb

@@ -20,8 +20,12 @@ module Phlex
     #     can neither forge the component class nor swap the record. State =
     #     the database.
     #   * State-backed (record-less, e.g. a counter): reactive_state :count
-    #     signs the listed instance variables. Use only when there is genuinely
-    #     no record to re-find.
+    #     signs the listed instance variables. Use when there is genuinely no
+    #     record to re-find.
+    #   * Both (the inline_edit pattern): reactive_record :record plus
+    #     reactive_state :attribute, :editing signs the record's GlobalID AND
+    #     the transient mode in one token, so "which field / what mode" survives
+    #     every action round trip and stays tamper-proof.
     #
     # Actions are DEFAULT-DENY: only methods declared with `action :name` may be
     # invoked. The signature proves the token is ours, NOT that this user may
@@ -102,17 +106,35 @@ module Phlex
 
         # Rebuild a component instance from a verified identity payload. Called
         # by the action endpoint after the token signature is verified.
+        #
+        # A component may carry a record (re-found via GlobalID), signed state
+        # (instance vars listed in reactive_state), or BOTH (the inline_edit
+        # pattern: a record plus "which field / what mode"). We assemble the
+        # init kwargs from whichever identity pieces are declared.
         def from_identity(payload)
+          kwargs = {}
+
           if reactive_record_key
             record = GlobalID::Locator.locate(payload.fetch("gid"))
             raise(ActiveRecord::RecordNotFound, "reactive record missing") unless record
 
-            new(reactive_record_key => record)
-          else
+            kwargs[reactive_record_key] = record
+          end
+
+          if reactive_state_keys.any?
             state = payload.fetch("s", {})
-            kwargs = reactive_state_keys.to_h { |k| [k, state[k.to_s]] }.compact
-            new(**kwargs)
+            reactive_state_keys.each do |key|
+              # Use key presence, not the value: a signed `nil` (nullable state)
+              # must round-trip distinctly. Only a genuinely absent key falls
+              # back to the component's initialize default; `false` and `nil`
+              # both survive.
+              next unless state.key?(key.to_s)
+
+              kwargs[key] = state[key.to_s]
+            end
           end
+
+          new(**kwargs)
         end
       end
 
@@ -164,18 +186,25 @@ module Phlex
 
       private
 
-      # Signed { c, gid } (record-backed) or { c, s } (state-backed).
+      # Signed identity payload: the class name plus whichever identity pieces
+      # the component declares — a record GlobalID (`gid`), signed state (`s`),
+      # or both. Keeping them in ONE MessageVerifier payload makes the state
+      # (e.g. which column an inline_edit may write) tamper-proof alongside the
+      # record. Record-only ({c, gid}) and state-only ({c, s}) shapes are
+      # unchanged.
       def reactive_token
-        payload =
-          if self.class.reactive_record_key
-            record = instance_variable_get(:"@#{self.class.reactive_record_key}")
-            {"c" => self.class.name, "gid" => record.to_gid.to_s}
-          else
-            state = self.class.reactive_state_keys.to_h do |k|
-              [k.to_s, instance_variable_get(:"@#{k}").as_json]
-            end
-            {"c" => self.class.name, "s" => state}
+        payload = {"c" => self.class.name}
+
+        if self.class.reactive_record_key
+          record = instance_variable_get(:"@#{self.class.reactive_record_key}")
+          payload["gid"] = record.to_gid.to_s
+        end
+
+        if self.class.reactive_state_keys.any?
+          payload["s"] = self.class.reactive_state_keys.to_h do |k|
+            [k.to_s, instance_variable_get(:"@#{k}").as_json]
           end
+        end
 
         Phlex::Reactive.sign(payload)
       end

data/lib/phlex/reactive/version.rb

@@ -2,6 +2,6 @@
 
 module Phlex
   module Reactive
-    VERSION = "0.2.2"
+    VERSION = "0.2.4"
   end
 end

metadata

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