@ea-lab/reactive-json-docs 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ea-lab/reactive-json-docs",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides",
   "main": "public/rjbuild/docs/index.yaml",
   "files": [
@@ -26,7 +26,7 @@
   "private": false,
   "devDependencies": {
     "@craco/craco": "^7.1.0",
-    "@ea-lab/reactive-json": "^1.0.1",
+    "@ea-lab/reactive-json": "^1.1.0",
     "@ea-lab/reactive-json-chartjs": "^1.0.0",
     "@npmcli/fs": "^4.0.0",
     "@reduxjs/toolkit": "^2.6.1",

package/public/rjbuild/docs/advanced-concepts/forward-update.md

@@ -1,7 +1,5 @@
 # Forward update
 
-Added in **reactive-json@0.0.43**.
-
 > Use the special placeholder `<reactive-json:event>` to reference values coming directly from the DOM or the custom event that triggered a reaction.
 
 The **Forward update** pattern lets you use the special placeholder `<reactive-json:event>` inside any reaction arguments. It is primarily useful with `setData`, but can be applied to any reaction. Instead of reading a value *after* the global data has been updated, you can forward the fresh value carried by the event itself.
@@ -19,10 +17,29 @@ value: "<reactive-json:event>.target.checked" # For checkboxes
 
 ### The `<reactive-json:event-new-value>` shortcut
 
-`<reactive-json:event-new-value>` returns, in order of priority:  
-1. `event.target.checked` (checkboxes / toggle inputs)  
-2. `event.target.value` (text inputs, selects, etc.)  
-3. `undefined` if none of the above exists.
+`<reactive-json:event-new-value>` automatically detects and returns the most relevant value from different types of events. The extraction logic varies based on the event type and the target element.
+
+#### Extraction Rules Reference
+
+| Event Type | Target Element | Logic | Return Value | Example |
+|------------|----------------|-------|--------------|---------|
+| **CustomEvent** | Any | Returns `event.detail.value` | Any value from custom event payload | `<reactive-json:event-new-value>.preferences.theme` |
+| **DOM Event** | `input[type="checkbox"]` | Returns `event.target.checked` | `true` or `false` | `<reactive-json:event-new-value>` → `true` |
+| **DOM Event** | `input[type="radio"]` | Returns `event.target.value` if checked, otherwise `undefined` | String value or `undefined` | `<reactive-json:event-new-value>` → `"option1"` |
+| **DOM Event** | `input[type="text"]`, `textarea`, `select` | Returns `event.target.value` | String value | `<reactive-json:event-new-value>` → `"user input"` |
+| **DOM Event** | Element with `value` property | Returns `event.target.value` | Any value | `<reactive-json:event-new-value>` → `"42"` |
+| **DOM Event** | Element with `checked` property (fallback) | Returns `event.target.checked` | `true` or `false` | `<reactive-json:event-new-value>` → `false` |
+| **Any Event** | No applicable property | Returns `undefined` | `undefined` | `<reactive-json:event-new-value>` → `undefined` |
+
+#### Processing Priority
+For DOM events, the extraction follows this priority order:
+1. **Checkbox**: `event.target.checked` (boolean)
+2. **Radio button**: `event.target.value` only if checked, otherwise `undefined`
+3. **General case**: `event.target.value` (if property exists)
+4. **Fallback**: `event.target.checked` (if property exists)
+5. **Default**: `undefined`
+
+For CustomEvent objects (like `response` events from `fetchData`), it directly accesses `event.detail.value` and allows further property access with dot notation.
 
 ## Good Practice
 
@@ -36,11 +53,31 @@ If no property path is provided (`<reactive-json:event>` alone), nothing is forw
 
 You can access any nested property (`detail`, `key`, etc.).
 
+## Event Types
+
+### Standard DOM Events
+The forward update system works with standard DOM events (`change`, `input`, `click`, etc.) from form elements and other HTML components.
+
+### Response Event
+You can also use the special `response` event with reactions like `fetchData`. This event is triggered when an HTTP request completes successfully, allowing you to access the response data directly.
+
+```yaml
+actions:
+  - what: fetchData
+    url: "/api/user-profile.json"
+    on: click
+  - what: setData
+    on: response  # Triggered when fetchData completes
+    path: ~~.userTheme
+    value: <reactive-json:event-new-value>.preferences.theme
+```
+
 ## Typical Use-cases
 
 - Real-time mirroring of form fields
-- “Select all” checkboxes
+- "Select all" checkboxes
 - Forward arbitrary values coming from events
+- Process HTTP response data immediately after fetch operations
 
 ## Examples
 
@@ -90,4 +127,40 @@ renderView:
 data:
   primary_text: ""
   secondary_text: ""
+```
+
+### Response Event Processing
+
+```yaml
+renderView:
+  - type: button
+    content: "Load User Profile"
+    actions:
+      - what: fetchData
+        on: click
+        url: "/api/user-profile.json"
+        updateOnlyData: true
+        updateDataAtLocation: ~~.userProfile
+      - what: setData
+        on: response  # Triggered when fetchData completes
+        path: ~~.userTheme
+        value: <reactive-json:event-new-value>.preferences.theme
+      - what: setData
+        on: response
+        path: ~~.userName
+        value: <reactive-json:event-new-value>.name
+  - type: div
+    content:
+      - "User theme: "
+      - type: code
+        content: ~~.userTheme
+  - type: div
+    content:
+      - "User name: "
+      - type: strong
+        content: ~~.userName
+
+data:
+  userTheme: "not-loaded"
+  userName: "not-loaded"
 ``` 

package/public/rjbuild/docs/advanced-concepts/forward-update.yaml

@@ -1,10 +1,4 @@
 renderView:
-  # Version badge reusable component
-  - type: span
-    attributes:
-      class: "badge bg-secondary px-2 py-1"
-    content: "reactive-json@0.0.43"
-
   - type: Markdown
     content: |
       # Forward update
@@ -27,10 +21,31 @@ renderView:
 
   - type: Markdown
     content: |
-      `<reactive-json:event-new-value>` returns, in order of priority:
-      1. `event.target.checked` (checkboxes / toggle inputs)  
-      2. `event.target.value` (text inputs, selects, etc.)  
-      3. `undefined` if none of the above exists.
+      ## The `<reactive-json:event-new-value>` shortcut
+
+      `<reactive-json:event-new-value>` automatically detects and returns the most relevant value from different types of events. The extraction logic varies based on the event type and the target element.
+
+      ### Extraction Rules Reference
+
+      | Event Type | Target Element | Logic | Return Value | Example |
+      |------------|----------------|-------|--------------|---------|
+      | **CustomEvent** | Any | Returns `event.detail.value` | Any value from custom event payload | `<reactive-json:event-new-value>.preferences.theme` |
+      | **DOM Event** | `input[type="checkbox"]` | Returns `event.target.checked` | `true` or `false` | `<reactive-json:event-new-value>` → `true` |
+      | **DOM Event** | `input[type="radio"]` | Returns `event.target.value` if checked, otherwise `undefined` | String value or `undefined` | `<reactive-json:event-new-value>` → `"option1"` |
+      | **DOM Event** | `input[type="text"]`, `textarea`, `select` | Returns `event.target.value` | String value | `<reactive-json:event-new-value>` → `"user input"` |
+      | **DOM Event** | Element with `value` property | Returns `event.target.value` | Any value | `<reactive-json:event-new-value>` → `"42"` |
+      | **DOM Event** | Element with `checked` property (fallback) | Returns `event.target.checked` | `true` or `false` | `<reactive-json:event-new-value>` → `false` |
+      | **Any Event** | No applicable property | Returns `undefined` | `undefined` | `<reactive-json:event-new-value>` → `undefined` |
+
+      ### Processing Priority
+      For DOM events, the extraction follows this priority order:
+      1. **Checkbox**: `event.target.checked` (boolean)
+      2. **Radio button**: `event.target.value` only if checked, otherwise `undefined`
+      3. **General case**: `event.target.value` (if property exists)
+      4. **Fallback**: `event.target.checked` (if property exists)
+      5. **Default**: `undefined`
+
+      For CustomEvent objects (like `response` events from `fetchData`), it directly accesses `event.detail.value` and allows further property access with dot notation.
 
       **Good practice**
       - For standard form events (`change`, `input`, etc.), prefer the shortcut `<reactive-json:event-new-value>`.
@@ -43,10 +58,23 @@ renderView:
       
       You can access any nested property (`detail`, `key`, etc.).
 
+      ## Event Types
+
+      ### Standard DOM Events
+      The forward update system works with standard DOM events (`change`, `input`, `click`, etc.) from form elements and other HTML components.
+
+      ### Response Event
+      You can also use the special `response` event with reactions like `fetchData`. This event is triggered when an HTTP request completes successfully, allowing you to access the response data directly.
+
       Typical use-cases:
       - Real-time mirroring of form fields
       - "Select all" checkboxes
-      - Forward arbitrary values coming from events.
+      - Forward arbitrary values coming from events
+      - Process HTTP response data immediately after fetch operations
+
+  - type: Markdown
+    content: |
+      ## Examples
 
   # --- Interactive example: Synchronized CheckBoxes (use-case "Select all")
   - type: RjBuildDescriber
@@ -104,6 +132,48 @@ renderView:
         primary_text: ""
         secondary_text: ""
 
+  - type: Markdown
+    content: |
+      ### Response Event Processing
+
+      This example shows how to use the `response` event to process data returned by an HTTP request. When `fetchData` completes successfully, you can extract specific values from the response and store them in different locations using `<reactive-json:event-new-value>`.
+
+  - type: SyntaxHighlighter
+    language: yaml
+    title: "Response Event Processing"
+    content: |
+      renderView:
+        - type: button
+          content: "Load User Profile"
+          actions:
+            - what: fetchData
+              on: click
+              url: "/api/user-profile.json"
+              updateOnlyData: true
+              updateDataAtLocation: ~~.userProfile
+            - what: setData
+              on: response  # Triggered when fetchData completes
+              path: ~~.userTheme
+              value: <reactive-json:event-new-value>.preferences.theme
+            - what: setData
+              on: response
+              path: ~~.userName
+              value: <reactive-json:event-new-value>.name
+        - type: div
+          content:
+            - "User theme: "
+            - type: code
+              content: ~~.userTheme
+        - type: div
+          content:
+            - "User name: "
+            - type: strong
+              content: ~~.userName
+
+      data:
+        userTheme: "not-loaded"
+        userName: "not-loaded"
+
 templates:
 
 data: {} 

package/public/rjbuild/docs/core/action/CustomEventListener.md

@@ -0,0 +1,150 @@
+# CustomEventListener
+
+Executes a reaction when receiving custom events dispatched on DOM elements. This is an internal action component that is automatically used when you specify custom event names (like `on: "response"`) in your actions.
+
+## Usage
+
+CustomEventListener should **not** be used directly in the RjBuild. The Reactive-JSON engine will use it automatically when you specify custom event names (not standard DOM events) in any action. The system automatically adds this component to listen for custom events on the specific element that triggered the action.
+
+> **Technical requirement**: The element component must provide an `attributesHolderRef` for the listener to attach its event handler to the DOM element.
+
+## Properties
+
+When using custom event names in actions, you can specify:
+
+- `what` (required): Name of the reaction function to execute (e.g., `setData`, `fetchData`, `submitData`, etc.).
+- `on` (required): Name of the custom event to listen for (e.g., `"response"`, `"customUpdate"`, etc.).
+- All other properties are passed as arguments to the reaction function and support [forward update placeholders](../../../advanced-concepts/forward-update.md).
+
+## Behavior
+
+When you use a custom event name in an action (like `on: "response"`):
+
+1. The system automatically adds a CustomEventListener component
+2. It attaches an event listener directly on the element that triggered the action
+3. When the custom event is dispatched on that element:
+   - Receives the event object with its custom data
+   - Processes any [event placeholders](../../../advanced-concepts/forward-update.md) in the action properties
+   - Executes the reaction function specified in `what`
+
+## How Custom Events Are Triggered
+
+Custom events are typically triggered by reactions like `fetchData` or `submitData`:
+
+```yaml
+# fetchData automatically dispatches a "response" event when the request completes
+actions:
+  - what: fetchData
+    on: click
+    url: "/api/data.json"
+    # When this completes, it dispatches a "response" event on the same element
+```
+
+## Examples
+
+### Process HTTP response data
+```yaml
+renderView:
+  - type: button
+    content: "Load Data"
+    actions:
+      - what: fetchData
+        on: click
+        url: "/api/user-profile.json"
+        updateOnlyData: true
+        updateDataAtLocation: ~~.userProfile
+      - what: setData
+        on: response  # CustomEventListener handles this automatically
+        path: ~~.userTheme
+        value: <reactive-json:event-new-value>.preferences.theme
+      - what: setData
+        on: response
+        path: ~~.lastUpdateTime
+        value: <reactive-json:event-new-value>.metadata.timestamp
+```
+
+### React to submission completion
+```yaml
+renderView:
+  - type: button
+    content: "Save Profile"
+    actions:
+      - what: submitData
+        on: click
+        url: "/api/save-profile"
+        data:
+          name: ~~.form.name
+          email: ~~.form.email
+      - what: setData
+        on: response  # Triggered when submitData completes
+        path: ~~.saveStatus
+        value: <reactive-json:event-new-value>.status
+```
+
+### Custom event handling
+```yaml
+renderView:
+  - type: div
+    content: "Custom event handler"
+    actions:
+      - what: setData
+        on: customUpdate  # Any custom event name works
+        path: ~~.customData
+        value: <reactive-json:event-new-value>
+```
+
+## Event Data Access
+
+CustomEventListener provides full access to the custom event data through the [forward update system](../../../advanced-concepts/forward-update.md):
+
+- `<reactive-json:event-new-value>` - Accesses `event.detail.value` for CustomEvent objects
+- `<reactive-json:event>.detail.someProperty` - Direct access to event details
+- `<reactive-json:event>.data.someValue` - For events with data property
+
+## System Integration
+
+- **Forward Update System**: Supports all event placeholder patterns for accessing event data
+- **Reaction System**: Executes any available reaction function when events are received
+- **Element-Specific**: Listens on the exact element that triggered the original action
+- **Actions.jsx**: Automatically instantiated when custom event names are detected
+
+## Differences from Standard Events
+
+| Aspect | Standard DOM Events | Custom Events |
+|--------|-------------------|---------------|
+| **Handler** | ReactOnEvent | CustomEventListener |
+| **Event Names** | `click`, `change`, `submit`, etc. | `response`, `customUpdate`, etc. |
+| **Target** | Element (via React event system) | Element (via DOM addEventListener) |
+| **Event Data** | Standard DOM event properties | Custom data in `event.detail` |
+| **Triggering** | User interactions | Programmatic dispatch |
+
+## Built-in Custom Events
+
+Some reactions automatically dispatch custom events:
+
+- **`response`**: Dispatched by `fetchData` and `submitData` when HTTP requests complete successfully
+- **Custom events**: Can be triggered by `triggerEvent` reaction or external JavaScript
+
+## Limitations
+
+- Only works with custom event names in actions (not as a standalone element)
+- Requires the element component to provide an `attributesHolderRef` for DOM attachment
+- Listens only on the specific element that triggered the original action
+- Custom events must be dispatched on the correct element to be received
+- Event data structure depends on how the custom event was created
+- Automatic cleanup when the component unmounts
+
+## Technical Details
+
+- Automatically instantiated by the Actions system when custom event names are used
+- Uses `addEventListener` directly on DOM elements (not React's event system)
+- Supports the full [forward update system](../../../advanced-concepts/forward-update.md) for event data access
+- Properly cleans up event listeners when component unmounts
+- Integrates with the plugin system to execute available reaction functions
+
+## Related Components
+
+- **[ReactOnEvent](ReactOnEvent.md)**: Handles standard DOM events (`click`, `change`, etc.)
+- **[MessageListener](MessageListener.md)**: Handles `on: "message"` events
+- **[Forward Update System](../../../advanced-concepts/forward-update.md)**: Event data access patterns
+- **[Reactions System](../../getting-started/reactions.md)**: The actual reaction functions that CustomEventListener executes

package/public/rjbuild/docs/core/action/CustomEventListener.yaml

@@ -0,0 +1,158 @@
+renderView:
+  - type: Markdown
+    content: |
+      # CustomEventListener
+
+      Executes a reaction when receiving custom events dispatched on DOM elements. This is an internal action component that is automatically used when you specify custom event names (like `on: "response"`) in your actions.
+
+      ## Usage
+
+      CustomEventListener should **not** be used directly in the RjBuild. The Reactive-JSON engine will use it automatically when you specify custom event names (not standard DOM events) in any action. The system automatically adds this component to listen for custom events on the specific element that triggered the action.
+
+      > **Technical requirement**: The element component must provide an `attributesHolderRef` for the listener to attach its event handler to the DOM element.
+
+      ## Properties
+
+      When using custom event names in actions, you can specify:
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: what
+          after: "(required)"
+        details: "Name of the reaction function to execute (e.g., `setData`, `fetchData`, `submitData`, etc.)."
+      - term:
+          code: on
+          after: "(required)"
+        details: 'Name of the custom event to listen for (e.g., `"response"`, `"customUpdate"`, etc.).'
+      - term: "All other properties"
+        details:
+          type: Markdown
+          content: "Are passed as arguments to the reaction function and support [forward update placeholders](../../../advanced-concepts/forward-update)."
+
+  - type: Markdown
+    content: |
+      ## Behavior
+
+      When you use a custom event name in an action (like `on: "response"`):
+
+      1. The system automatically adds a CustomEventListener component
+      2. It attaches an event listener directly on the element that triggered the action
+      3. When the custom event is dispatched on that element:
+         - Receives the event object with its custom data
+         - Processes any [event placeholders](../../../advanced-concepts/forward-update) in the action properties
+         - Executes the reaction function specified in `what`
+
+      ## How Custom Events Are Triggered
+
+      Custom events are typically triggered by reactions like `fetchData` or `submitData`:
+
+  - type: SyntaxHighlighter
+    language: yaml
+    content: |
+      # fetchData automatically dispatches a "response" event when the request completes
+      actions:
+        - what: fetchData
+          on: click
+          url: "/api/data.json"
+          # When this completes, it dispatches a "response" event on the same element
+
+  - type: Markdown
+    content: |
+      ## Event Data Access
+
+      CustomEventListener provides full access to the custom event data through the [forward update system](../../../advanced-concepts/forward-update):
+
+      - `<reactive-json:event-new-value>` - Accesses `event.detail.value` for CustomEvent objects
+      - `<reactive-json:event>.detail.someProperty` - Direct access to event details
+      - `<reactive-json:event>.data.someValue` - For events with data property
+
+  - type: RjBuildDescriber
+    title: "Process HTTP Response Data"
+    description:
+      type: Markdown
+      content: |
+        This example shows how CustomEventListener automatically handles the `response` event from `fetchData`. The response data can be extracted and stored in different locations using event placeholders.
+    toDescribe:
+      renderView:
+        - type: button
+          content: "Load User Profile"
+          actions:
+            - what: fetchData
+              on: click
+              url: "/mockup-api/fetchData/example.json"
+              updateOnlyData: true
+              updateDataAtLocation: ~~.userProfile
+            - what: setData
+              on: response  # CustomEventListener handles this automatically
+              path: ~~.userTheme
+              value: <reactive-json:event-new-value>.preferences.theme
+            - what: setData
+              on: response
+              path: ~~.lastUpdateTime
+              value: <reactive-json:event-new-value>.metadata.timestamp
+        - type: div
+          content:
+            - "User Theme: "
+            - type: code
+              content: ~~.userTheme
+        - type: div
+          content:
+            - "Last Update: "
+            - type: code
+              content: ~~.lastUpdateTime
+      data:
+        userTheme: "not-loaded"
+        lastUpdateTime: "not-loaded"
+
+  - type: SyntaxHighlighter
+    language: yaml
+    title: "Custom Event Handling"
+    content: |
+      renderView:
+        - type: div
+          content: "Custom event handler"
+          actions:
+            - what: setData
+              on: customUpdate  # Any custom event name works
+              path: ~~.customData
+              value: <reactive-json:event-new-value>
+
+  - type: Markdown
+    content: |
+      ## Differences from Standard Events
+
+      | Aspect | Standard DOM Events | Custom Events |
+      |--------|-------------------|---------------|
+      | **Handler** | ReactOnEvent | CustomEventListener |
+      | **Event Names** | `click`, `change`, `submit`, etc. | `response`, `customUpdate`, etc. |
+      | **Target** | Element (via React event system) | Element (via DOM addEventListener) |
+      | **Event Data** | Standard DOM event properties | Custom data in `event.detail` |
+      | **Triggering** | User interactions | Programmatic dispatch |
+
+      ## Built-in Custom Events
+
+      Some reactions automatically dispatch custom events:
+
+      - **`response`**: Dispatched by `fetchData` and `submitData` when HTTP requests complete successfully
+      - **Custom events**: Can be triggered by `triggerEvent` reaction or external JavaScript
+
+      ## Limitations
+
+      - Only works with custom event names in actions (not as a standalone element)
+      - Requires the element component to provide an `attributesHolderRef` for DOM attachment
+      - Listens only on the specific element that triggered the original action
+      - Custom events must be dispatched on the correct element to be received
+      - Event data structure depends on how the custom event was created
+      - Automatic cleanup when the component unmounts
+
+      ## Related Components
+
+      - **[ReactOnEvent](ReactOnEvent)**: Handles standard DOM events (`click`, `change`, etc.)
+      - **[MessageListener](MessageListener)**: Handles `on: "message"` events
+      - **[Forward Update System](../../../advanced-concepts/forward-update)**: Event data access patterns
+      - **[Reactions System](../../getting-started/reactions)**: The actual reaction functions that CustomEventListener executes
+
+templates:
+
+data: {}

package/public/rjbuild/docs/core/action/HashChangeListener.md

@@ -4,7 +4,7 @@ Listens to hash changes (URL fragment) in the window and executes a reaction fun
 
 ## Usage
 
-HashChangeListener is **not** used directly as an element type. Instead, it is automatically triggered when you use `on: "hashchange"` in any action. The system automatically adds this component to listen for hash changes globally.
+HashChangeListener should **not** be used directly in the RjBuild. The Reactive-JSON engine will use it automatically when you use `on: "hashchange"` in any action. The system automatically adds this component to listen for hash changes globally.
 
 ## Properties
 

package/public/rjbuild/docs/core/action/HashChangeListener.yaml

@@ -7,7 +7,7 @@ renderView:
 
       ## Usage
 
-      HashChangeListener is **not** used directly as an element type. Instead, it is automatically triggered when you use `on: "hashchange"` in any action. The system automatically adds this component to listen for hash changes globally.
+      HashChangeListener should **not** be used directly in the RjBuild. The Reactive-JSON engine will use it automatically when you use `on: "hashchange"` in any action. The system automatically adds this component to listen for hash changes globally.
 
       ## Properties
 

package/public/rjbuild/docs/core/action/MessageListener.md

@@ -4,7 +4,7 @@ Executes a reaction when receiving a message via `window.postMessage`. This is a
 
 ## Usage
 
-MessageListener is **not** used directly as an element type. Instead, it is automatically triggered when you use `on: "message"` in any action. The system automatically adds this component to listen for messages globally on the window object.
+MessageListener should **not** be used directly in the RjBuild. The Reactive-JSON engine will use it automatically when you use `on: "message"` in any action. The system automatically adds this component to listen for messages globally on the window object.
 
 ## Properties
 

package/public/rjbuild/docs/core/action/MessageListener.yaml

@@ -7,7 +7,7 @@ renderView:
 
       ## Usage
 
-      MessageListener is **not** used directly as an element type. Instead, it is automatically triggered when you use `on: "message"` in any action. The system automatically adds this component to listen for messages globally on the window object.
+      MessageListener should **not** be used directly in the RjBuild. The Reactive-JSON engine will use it automatically when you use `on: "message"` in any action. The system automatically adds this component to listen for messages globally on the window object.
 
       ## Properties
 

package/public/rjbuild/docs/core/action/ReactOnEvent.md

@@ -1,6 +1,6 @@
 # ReactOnEvent
 
-ReactOnEvent is an internal action component that is automatically instantiated by the Actions system when reactions with event handlers (`on: "eventName"`) are detected. It should **not** be used directly as an element type.
+ReactOnEvent is an internal action component that is automatically instantiated by the Actions system when reactions with event handlers (`on: "eventName"`) are detected. It should **not** be used directly in the RjBuild.
 
 > **Important**: It should **not** be used directly as an element type. The Reactive-JSON engine will automatically instantiate it when needed.
 
@@ -69,9 +69,9 @@ actions:
 
 ## Important Notes
 
-- **Never use `type: ReactOnEvent`** in your renderView - it's an internal component
+- **Never use `type: ReactOnEvent`** in your RjBuild - it's an internal component
 - **Use `actions` with `on: "eventName"`** - this is the correct way to handle events
-- **ReactOnEvent is automatically instantiated** by the Actions system when needed
+- **The Reactive-JSON engine will use ReactOnEvent automatically** when needed
 - **Event propagation is stopped by default** - use `stopPropagation: false` to change this
 
 ## Related Components

package/public/rjbuild/docs/core/action/ReactOnEvent.yaml

@@ -5,7 +5,7 @@ renderView:
 
       ReactOnEvent is an internal action component that is automatically instantiated by the Actions system when reactions with event handlers (`on: "eventName"`) are detected.
       
-      > **Important**: It should **not** be used directly as an element type. The Reactive-JSON engine will automatically instantiate it when needed.
+      > **Important**: It should **not** be used directly in the RjBuild. The Reactive-JSON engine will automatically instantiate it when needed.
 
       ## How it Works
 
@@ -81,9 +81,9 @@ renderView:
     content: |
       ## Important Notes
       
-      - **Never use `type: ReactOnEvent`** in your renderView - it's an internal component
+      - **Never use `type: ReactOnEvent`** in your RjBuild - it's an internal component
       - **Use `actions` with `on: "eventName"`** - this is the correct way to handle events
-      - **ReactOnEvent is automatically instantiated** by the Actions system when needed
+      - **The Reactive-JSON engine will use ReactOnEvent automatically** when needed
       - **Event propagation is stopped by default** - use `stopPropagation: false` to change this
       
       ## Related Components

package/public/rjbuild/docs/core/action/index.md

@@ -30,6 +30,7 @@ when the user requests a [reaction](../../getting-started/reactions.md) on a giv
 
 As a user, you won't need to work with them directly.
 
+- **[CustomEventListener](./CustomEventListener.md)**: Reacts to custom events
 - **[HashChangeListener](./HashChangeListener.md)**: Listens for URL hash changes
 - **[MessageListener](./MessageListener.md)**: Listens for window messages
-- **[ReactOnEvent](./ReactOnEvent.md)**: Reacts to custom events
+- **[ReactOnEvent](./ReactOnEvent.md)**: Reacts to DOM events

package/public/rjbuild/docs/core/action/index.yaml

@@ -33,7 +33,8 @@ renderView:
 
       As a user, you won't need to work with them directly.
 
+      - **[CustomEventListener](./CustomEventListener)**: Reacts to custom events
       - **[HashChangeListener](./HashChangeListener)**: Listens for URL hash changes
       - **[MessageListener](./MessageListener)**: Listens for window messages
-      - **[ReactOnEvent](./ReactOnEvent)**: Reacts to custom events
+      - **[ReactOnEvent](./ReactOnEvent)**: Reacts to DOM events
 

package/public/rjbuild/docs/core/reaction/fetchData.md

@@ -27,6 +27,31 @@
   - Without `updateDataAtLocation`: **completely replaces** the entire data object
   - With `updateDataAtLocation`: updates only the specified path in the data
 
+## Response Event
+
+`fetchData` triggers a special `response` event when the HTTP request completes successfully. This allows you to process the response data immediately using other reactions.
+
+You can use the `on: response` trigger with any reaction (like `setData`) to access the response data through the [forward update system](../../../advanced-concepts/forward-update.md):
+
+```yaml
+actions:
+  - what: fetchData
+    on: click
+    url: "/api/user-profile.json"
+    updateOnlyData: true
+    updateDataAtLocation: ~~.userProfile
+  - what: setData
+    on: response  # Triggered when fetchData completes
+    path: ~~.userTheme
+    value: <reactive-json:event-new-value>.preferences.theme
+  - what: setData
+    on: response
+    path: ~~.lastFetchTime
+    value: <reactive-json:event-new-value>.metadata.timestamp
+```
+
+The response event provides access to the complete server response through `<reactive-json:event-new-value>`, allowing you to extract specific values and store them in different data locations.
+
 > **⚠️ Important:** When using `updateOnlyData: true`, the server response must contain **data only**, not a complete RjBuild structure. The response should be the raw data object, not wrapped in `{data: {...}, renderView: [...], templates: {...}}`.
 
 ## Examples

package/public/rjbuild/docs/core/reaction/fetchData.yaml

@@ -56,6 +56,34 @@ renderView:
       - Errors are only logged to the console
       - The triggering element is visually disabled during the request
 
+      ## Response Event
+
+      `fetchData` triggers a special `response` event when the HTTP request completes successfully. This allows you to process the response data immediately using other reactions.
+
+      You can use the `on: response` trigger with any reaction (like `setData`) to access the response data through the [forward update system](../../../advanced-concepts/forward-update):
+
+  - type: SyntaxHighlighter
+    language: yaml
+    content: |
+      actions:
+        - what: fetchData
+          on: click
+          url: "/api/user-profile.json"
+          updateOnlyData: true
+          updateDataAtLocation: ~~.userProfile
+        - what: setData
+          on: response  # Triggered when fetchData completes
+          path: ~~.userTheme
+          value: <reactive-json:event-new-value>.preferences.theme
+        - what: setData
+          on: response
+          path: ~~.lastFetchTime
+          value: <reactive-json:event-new-value>.metadata.timestamp
+
+  - type: Markdown
+    content: |
+      The response event provides access to the complete server response through `<reactive-json:event-new-value>`, allowing you to extract specific values and store them in different data locations.
+
   - type: RjBuildDescriber
     title: Basic Structure (GET - Default)
     description:
@@ -184,11 +212,11 @@ renderView:
     title:
       type: Markdown
       content: |
-        Data-Only Update Examples `@ea-lab/reactive-json@0.2.0`
+        Data-Only Update Examples
     description:
       - type: Markdown
         content: |
-          Properties `updateOnlyData` and `updateDataAtLocation` (added in @ea-lab/reactive-json@0.2.0) allow for more precise data management:
+          Properties `updateOnlyData` and `updateDataAtLocation` allow for more precise data management:
           
           - `updateOnlyData: true`: Only updates the data section, preserving templates and renderView
           - `updateDataAtLocation`: Specifies exactly where to place the response data

package/public/rjbuild/docs/core/reaction/submitData.md

@@ -29,6 +29,34 @@
   - Without `updateDataAtLocation`: **completely replaces** the entire data object
   - With `updateDataAtLocation`: updates only the specified path in the data
 
+## Response Event
+
+`submitData` triggers a special `response` event when the HTTP submission completes successfully. This allows you to process the response data immediately using other reactions.
+
+You can use the `on: response` trigger with any reaction (like `setData`) to access the response data through the [forward update system](../../../advanced-concepts/forward-update.md):
+
+```yaml
+actions:
+  - what: submitData
+    on: click
+    url: "/api/user/save"
+    data:
+      name: ~.form.name
+      email: ~.form.email
+    updateOnlyData: true
+    updateDataAtLocation: ~~.userProfile
+  - what: setData
+    on: response  # Triggered when submitData completes
+    path: ~~.lastSaveStatus
+    value: <reactive-json:event-new-value>.status
+  - what: setData
+    on: response
+    path: ~~.saveTimestamp
+    value: <reactive-json:event-new-value>.metadata.savedAt
+```
+
+The response event provides access to the complete server response through `<reactive-json:event-new-value>`, allowing you to extract specific values and store them in different data locations independently of the main data update process.
+
 > **⚠️ Important:** When using `updateOnlyData: true`, the server response must contain **data only**, not a complete RjBuild structure. The response should be the raw data object, not wrapped in `{data: {...}, renderView: [...], templates: {...}}`.
 
 ## Submission States & Styling

package/public/rjbuild/docs/core/reaction/submitData.yaml

@@ -64,6 +64,37 @@ renderView:
       - In case of an error, the submission is cancelled and logged to the console
       - Interface elements are visually disabled during submission (unless `submitSilently` is enabled)
 
+      ## Response Event
+
+      `submitData` triggers a special `response` event when the HTTP submission completes successfully. This allows you to process the response data immediately using other reactions.
+
+      You can use the `on: response` trigger with any reaction (like `setData`) to access the response data through the [forward update system](../../../advanced-concepts/forward-update):
+
+  - type: SyntaxHighlighter
+    language: yaml
+    content: |
+      actions:
+        - what: submitData
+          on: click
+          url: "/api/user/save"
+          data:
+            name: ~.form.name
+            email: ~.form.email
+          updateOnlyData: true
+          updateDataAtLocation: ~~.userProfile
+        - what: setData
+          on: response  # Triggered when submitData completes
+          path: ~~.lastSaveStatus
+          value: <reactive-json:event-new-value>.status
+        - what: setData
+          on: response
+          path: ~~.saveTimestamp
+          value: <reactive-json:event-new-value>.metadata.savedAt
+
+  - type: Markdown
+    content: |
+      The response event provides access to the complete server response through `<reactive-json:event-new-value>`, allowing you to extract specific values and store them in different data locations independently of the main data update process.
+
       ## Submission States & Styling
       The system uses a global locking mechanism to handle submissions:
       - Only one submission can be active at a time for all application roots
@@ -165,7 +196,7 @@ renderView:
       - Save progression state
       - Maintain consistency between client and server
 
-      ## Data-Only Update Examples (@ea-lab/reactive-json@0.2.0)
+      ## Data-Only Update Examples
       
       The properties `updateOnlyData` and `updateDataAtLocation` work identically for `submitData` and `fetchData`.