phlex-reactive 0.2.3 → 0.2.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5644272b11bc8ff62496e05c81f01a92b1925ffe2b471ab123c05df573ee1343
-  data.tar.gz: 56d13ad853e1b6da4e40e8e239838514171b9e908a59ad6db60f6f4a4b199b0e
+  metadata.gz: 83d418e64d127a079e74679e4920d85803fedff629e8d8b135c2896a79b5bbdd
+  data.tar.gz: 16c68638d96348ea94c0fa25d411486e49c0b2dab01f07fe9e67fefba630a537
 SHA512:
-  metadata.gz: a489e7a7cdce253735c59c4b5196c52d2051e83f7fb783e7c892cbbd8b9be98934141392d7a84b58b938e80bfd5aba6e4bfe1995888b2b322d232a3fdc207a4a
-  data.tar.gz: b9126364a92d1be370e6db639969803c25936e61910967fe05cac00ce908216dd5fa6f6f2f42f16d3c3c23c813d4e2e1c54614babb96f162f77bd71b6e3a5f6b
+  metadata.gz: cc16a212daaeb236631702db89fe846dabf936d532e18919c0a371d408f29ce94ae94028eff8cc82e3ff66f1ee25a8acb75f2df29f0b1e2ceb819e49ee3b7217
+  data.tar.gz: 0b9721189cb032d6a91ae163b15742cb1cb163ef93da4b5ced1d4382811b43da5b5ba3ea25041b5919b20fb58d2dd4d582d8c1ba1345b6d8accf7ac94cdeb978

data/CHANGELOG.md

@@ -8,6 +8,40 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Fixed
 
+- **Form submit navigated instead of running the reactive action.** A component
+  wired with `on(:save, event: "submit")` on a real `<form>` let the browser
+  submit natively (full POST to the form's `action`), because
+  `dispatch()` deferred `event.preventDefault()` into the request-queue microtask
+  — too late, since `preventDefault()` only works synchronously within the event
+  dispatch. For `click` triggers there's no default to miss, so it was invisible;
+  for `submit` the form navigated (e.g. `POST /` → routing error). `dispatch()`
+  now calls `preventDefault()` synchronously (and captures the action/params up
+  front, so the deferred work never re-reads a reset event object). Guarded by a
+  bun unit test (`spec/javascript/reactive_controller.test.js`) that asserts the
+  synchronous call and fails on the pre-fix deferred code. Closes #11.
+
+## [0.2.4] - 2026-06-24
+
+### 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
@@ -23,6 +57,16 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
   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
@@ -37,7 +81,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
 
@@ -52,7 +96,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
 
@@ -71,7 +115,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
 
@@ -95,7 +139,10 @@ 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.3...HEAD
+[0.2.4]: https://github.com/mhenrixon/phlex-reactive/compare/v0.2.3...v0.2.4
+[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

@@ -34,18 +34,24 @@ export default class extends Controller {
   // a per-controller promise makes each dispatch wait for the previous one, so
   // it always uses the freshest token.
   dispatch(event) {
-    this.queue = (this.queue ?? Promise.resolve()).then(() => this.#perform(event))
-    return this.queue
-  }
-
-  async #perform(event) {
     const { action, params } = event.params
     if (!action) return
 
-    // Stop native behavior (button submit / form navigation): the reactive
-    // round trip replaces it.
+    // Stop native behavior (button submit / FORM NAVIGATION) HERE, synchronously
+    // within the event dispatch. preventDefault() only works while the event is
+    // still being handled — deferring it into the request-queue microtask (below)
+    // is too late: a `submit` trigger would natively POST the form and navigate
+    // before the reactive round trip runs (issue #11). For a `click` trigger
+    // there's no default to miss, so this was previously invisible.
     event.preventDefault()
 
+    // Capture action/params now; the queued work runs in a later microtask, by
+    // which point the event object may have been reset by the browser.
+    this.queue = (this.queue ?? Promise.resolve()).then(() => this.#perform(action, params))
+    return this.queue
+  }
+
+  async #perform(action, params) {
     // Auto-collect named field values inside this component so a button-
     // triggered action still receives sibling inputs (Livewire-style).
     // Explicit params (data-reactive-params-param) win over collected fields.
@@ -122,6 +128,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 +138,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/version.rb

@@ -2,6 +2,6 @@
 
 module Phlex
   module Reactive
-    VERSION = "0.2.3"
+    VERSION = "0.2.5"
   end
 end

metadata

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