@ea-lab/reactive-json-docs 0.3.0 → 0.5.0

package/public/rjbuild/docs/core/element/special/ReactiveJsonSubroot.yaml

@@ -8,13 +8,121 @@ renderView:
       With the `sharedUpdates` feature, the component can also propagate data changes back to the parent, enabling seamless communication between parent and subroot when working with shared data references.
 
       ## Properties
-      - `rjOptions` (object, required): Options to pass to the subroot - accepts **all** `ReactiveJsonRoot` properties.
-        - Direct properties: `rjBuildUrl`, `dataOverride`, `headersForRjBuild`, `debugMode`, etc.
-        - For inline content: use `maybeRawAppRjBuild` containing `renderView`, `templates`, `data`.
-      - `sharedUpdates` (boolean, optional): Enable upstream data propagation to parent (default: false).
-      - `dataOverrideEvaluationDepth` (number, optional): Special evaluation depth for dataOverride property.
-      - Other properties are passed to the underlying `ActionDependant` wrapper.
 
+  - type: TabbedSerializer
+    yamlSerializedContent: |
+      # Complete rjOptions structure.
+      - type: ReactiveJsonSubroot
+        # Component-specific properties.
+        sharedUpdates: true
+        dataOverrideEvaluationDepth: 10
+        
+        # Subroot configuration.
+        rjOptions:
+          # Loading from URL.
+          rjBuildUrl: "/path/to/rjbuild.yaml"
+          rjBuildFetchMethod: "GET"  # or "POST".
+          headersForRjBuild:
+            Authorization: "Bearer token"
+            Content-Type: "application/json"
+          
+          # OR inline definition.
+          maybeRawAppRjBuild:
+            renderView:
+              - type: div
+                content: "Subroot content."
+            templates:
+              myTemplate:
+                type: span
+                content: ~.value
+            data:
+              initialValue: "Hello World"
+          
+          # Data replacement.
+          dataOverride: ~~.userData
+          
+          # Debug mode.
+          debugMode: true
+        
+        # Standard actions.
+        actions:
+          - what: hide
+            when: ~.condition
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: rjOptions
+          after: " (object, required)"
+        details:
+          - type: Markdown
+            content: "Options to pass to the subroot - accepts **all** `ReactiveJsonRoot` properties including:"
+          
+          - type: DefinitionList
+            content:
+              - term:
+                  code: rjOptions.rjBuildUrl
+                details: "URL to load the RjBuild from."
+              
+              - term:
+                  code: rjOptions.rjBuildFetchMethod
+                details: "HTTP method (\"GET\" or \"POST\")."
+              
+              - term:
+                  code: rjOptions.headersForRjBuild
+                details: "Headers for the request."
+              
+              - term:
+                  code: rjOptions.dataOverride
+                details: "Override data for the loaded/defined RjBuild."
+              
+              - term:
+                  code: rjOptions.maybeRawAppRjBuild
+                details:
+                  - type: Markdown
+                    content: "Inline RjBuild content (string or object) containing:"
+                  
+                  - type: DefinitionList
+                    content:
+                      - term:
+                          code: rjOptions.maybeRawAppRjBuild.renderView
+                        details: "View definition."
+                      
+                      - term:
+                          code: rjOptions.maybeRawAppRjBuild.templates
+                        details: "Template definitions."
+                      
+                      - term:
+                          code: rjOptions.maybeRawAppRjBuild.data
+                        details: "Initial data."
+              
+              - term:
+                  code: rjOptions.debugMode
+                details: "Enable debug mode and related wrapper components."
+      
+      - term:
+          code: sharedUpdates
+          after: " (boolean, optional)"
+        details: "Enable upstream data propagation to parent (default: false)."
+      
+      - term:
+          code: dataOverrideEvaluationDepth
+          after: " (number, optional)"
+        details: "Special evaluation depth for dataOverride property (default: 10)."
+
+  - type: Markdown
+    content: |
+      ### Standard properties
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: actions
+          after: " (array, optional)"
+        details: "Actions to attach to the subroot."
+
+  - type: Markdown
+    content: |
       ## Behavior
       - Renders a new `ReactiveJsonRoot` with the provided options.
       - The subroot is typically isolated from the parent for data, templates, and rendering¹.

package/public/rjbuild/docs/core/example/website.yaml

@@ -1252,11 +1252,11 @@ renderView:
                         - what: hide
                           andConditions:
                             - when: ~.contact_form.nom
-                              isEmpty: "not"
+                              isNotEmpty:
                             - when: ~.contact_form.email
-                              isEmpty: "not"
+                              isNotEmpty:
                             - when: ~.contact_form.sujet
-                              isEmpty: "not"
+                              isNotEmpty:
                       content: "Complétez tous les champs"
 
                     # Bouton Suivant actif
@@ -1289,11 +1289,11 @@ renderView:
                           value: 2
                           andConditions:
                             - when: ~.contact_form.nom
-                              isEmpty: "not"
+                              isNotEmpty:
                             - when: ~.contact_form.email
-                              isEmpty: "not"
+                              isNotEmpty:
                             - when: ~.contact_form.sujet
-                              isEmpty: "not"
+                              isNotEmpty:
                       content: "Suivant →"
 
                 # Boutons de navigation - ÉTAPE 2
@@ -1345,7 +1345,7 @@ renderView:
                       actions:
                         - what: hide
                           when: ~.contact_form.message
-                          isEmpty: "not"
+                          isNotEmpty:
                       content: "Veuillez saisir votre message"
 
                     # Bouton Envoyer actif
@@ -1371,19 +1371,19 @@ renderView:
                           path: ~.show_contact_modal
                           value: false
                           when: ~.contact_form.message
-                          isEmpty: "not"
+                          isNotEmpty:
                         - what: setData
                           on: click
                           path: ~.message_sent
                           value: true
                           when: ~.contact_form.message
-                          isEmpty: "not"
+                          isNotEmpty:
                         - what: setData
                           on: click
                           path: ~.contact_form_step
                           value: 1
                           when: ~.contact_form.message
-                          isEmpty: "not"
+                          isNotEmpty:
                       content: "Envoyer la Missive"
 
 templates:

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

@@ -1,236 +1,24 @@
-# Reactive-JSON Reactions System Documentation
+# Reactions
 
-## Introduction
+> For an introduction to the reactions system and detailed examples, see [Getting Started: Reactions](../../getting-started/reactions.md).
 
-Reactions are a fundamental part of Reactive-JSON's interactivity system. They allow you to respond to user events and perform operations like data updates, network requests, and browser interactions. In the RjBuild, reactions are defined under the `actions` key, just like regular actions, but are distinguished by the presence of the `on` property.
+Reactions in Reactive-JSON allow you to respond to user events and perform operations like data updates, network requests, and browser interactions. They execute in response to user events to modify application state and trigger behaviors.
 
-### Basic Structure
-```yaml
-renderView:
-  - type: button
-    content: Click me
-    actions:
-      - what: setData    # Reaction type
-        on: click        # Event that triggers the reaction
-        path: ~.my_state # Where to store the data
-        value: "on"      # Value to set
-```
+## Available Reaction Components
 
-## 1. Basic Reactions
+### Data Management
+- **[setData](./setData.md)**: Sets data at the specified path
+- **[addData](./addData.md)**: Adds new data to the specified path
+- **[removeData](./removeData.md)**: Removes data from the specified path
+- **[moveData](./moveData.md)**: Moves data from one path to another
 
-### 1.1 Data Management
-- `addData` : Adds new data to the specified path
-- `setData` : Sets data at the specified path
-- `removeData` : Removes data from the specified path
-- `moveData` : Moves data from one path to another
+### Network Operations
+- **[fetchData](./fetchData.md)**: Fetches data from a URL using GET requests
+- **[submitData](./submitData.md)**: Submits data to a server endpoint using POST/PUT/DELETE
 
-### 1.2 Network Operations
-- `fetchData` : Fetches data from a URL
-- `submitData` : Submits data to a server endpoint
+### Browser Operations
+- **[setClipboardData](./setClipboardData.md)**: Copies data to the clipboard
+- **[redirectNow](./redirectNow.md)**: Performs an immediate redirect
+- **[triggerEvent](./triggerEvent.md)**: Triggers a custom event
+- **[postMessage](./postMessage.md)**: Sends a message to another window/frame
 
-### 1.3 Browser Operations
-- `setClipboardData` : Copies data to the clipboard
-- `redirectNow` : Performs an immediate redirect
-- `triggerEvent` : Triggers a custom event
-- `postMessage` : Sends a message to another window/frame
-
-## 2. Reaction Structure
-Each reaction is defined by:
-- `what` : The name of the reaction to execute
-- `on` : The event that triggers the reaction
-- Reaction-specific options (vary by reaction type)
-- **Optional conditions** : Reactions support the same conditional system as actions
-
-### 2.1 Conditional Reactions
-Just like actions, reactions can be made conditional using various comparison operators:
-
-- `when` + `is` / `isNot` : Value equality checks
-- `when` + `isEmpty` : Empty value tests
-- `when` + `contains` / `containsNot` : Content search
-- `when` + `>`, `<`, `>=`, `<=` : Numeric/date comparisons
-- `andConditions` / `orConditions` : Complex condition logic
-
-For example:
-```yaml
-actions:
-  - what: setData              # Reaction name
-    on: click                  # Triggering event
-    path: ~.user.profile       # Reaction-specific option
-    value: ~.form_data         # Reaction-specific option
-    when: ~.is_editing         # Condition - only execute if editing
-    is: true                   # Condition value
-  - what: submitData           # Reaction name
-    on: submit                 # Triggering event
-    url: "/api/endpoint"       # Reaction-specific option
-    method: "POST"             # Reaction-specific option
-    data: ~.form_data          # Reaction-specific option
-    when: ~.form_data          # Condition - only submit if form has data
-    isEmpty: "not"             # Condition check
-  - what: setData              # Multiple conditions example
-    on: click
-    path: ~.result
-    value: "success"
-    andConditions:             # All conditions must be true
-      - when: ~.user.role
-        is: "admin"
-      - when: ~.feature_enabled
-        is: true
-```
-
-## 3. Event Types
-The `on` property accepts standard browser events. These events are the same as those used in standard web development, and their availability depends on the HTML element type. For example, a `change` event will only work on form elements like `input`, `select`, or `textarea`, while a `click` event works on any element.
-
-Common event types:
-- `click` : Mouse click (works on any element)
-- `change` : Form input change (works on form elements only)
-- `submit` : Form submission (works on form elements only)
-- `keydown` : Keyboard key press (works on elements that can receive focus)
-- `keyup` : Keyboard key release (works on elements that can receive focus)
-
-## 4. Event Control
-The `stopPropagation` property can be used to control event bubbling and subsequent actions:
-```yaml
-actions:
-  - what: setData
-    on: click
-    path: ~.state
-    value: "on"
-    stopPropagation: true  # Prevents event bubbling AND stops execution of subsequent actions
-```
-
-When `stopPropagation` is set to `true`, it:
-1. Prevents the event from bubbling up to parent elements
-2. Stops the execution of any subsequent actions defined for the same event
-
-This is particularly useful when you want to ensure that only the first matching action is executed, even if multiple actions are defined for the same event.
-
-## 5. Technical Details
-- Reactions are triggered by events
-- Multiple reactions can be defined for the same event
-- Reactions are executed in order
-- Reactions can be chained together
-- **Reactions support all the same conditional operators as actions**: `when`, `is`, `isNot`, `isEmpty`, `contains`, `>`, `<`, `>=`, `<=`, `andConditions`, `orConditions`
-- Conditional reactions only execute when their conditions evaluate to true
-- The execution order of multiple reactions on the same event is guaranteed to match their order in the YAML
-- If a reaction's conditions are not met, it is skipped and the next reaction is evaluated
-
-## 6. Limitations
-- Reactions cannot modify external state
-- Network operations must be properly configured
-- Browser operations require appropriate permissions
-
-## 7. Complete Examples
-
-### 7.1 Data Input and Submission
-```yaml
-renderView:
-  - type: TextField
-    label: "Username"
-    placeholder: "Enter your username"
-    dataLocation: ~.form_data.username
-  - type: TextField
-    label: "Email"
-    placeholder: "Enter your email"
-    inputType: "email"
-    dataLocation: ~.form_data.email
-  - type: button
-    content: Submit
-    actions:
-      - what: submitData
-        on: click
-        url: "/api/submit"
-        data:
-          username: ~.form_data.username
-          email: ~.form_data.email
-        when: ~.form_data.username
-        isEmpty: not
-
-data:
-  form_data:
-    username: ""
-    email: ""
-```
-
-### 7.2 Conditional Reactions Example
-```yaml
-renderView:
-  - type: button
-    content: "Toggle State"
-    actions:
-      - what: setData
-        on: click
-        path: ~.button_state
-        value: "on"
-        when: ~.button_state
-        is: "off"
-        stopPropagation: true
-      - what: setData
-        on: click
-        path: ~.button_state
-        value: "off"
-        when: ~.button_state
-        is: "on"
-        stopPropagation: true
-  - type: div
-    content: ["Button state: ", ~.button_state]
-  - type: div
-    content: "Button has been clicked!"
-    actions:
-      - what: hide
-        when: ~.button_state
-        is: "off"
-
-data:
-  button_state: "off"
-```
-
-### 7.3 Complex Conditional Logic
-```yaml
-renderView:
-  - type: TextField
-    label: "Enter a number:"
-    dataLocation: ~.user_input
-    inputType: "number"
-  - type: button
-    content: "Process Number"
-    actions:
-      - what: setData
-        on: click
-        path: ~.result
-        value: "Number is valid and positive!"
-        andConditions:
-          - when: ~.user_input
-            isEmpty: "not"
-          - when: ~.user_input
-            ">": 0
-      - what: setData
-        on: click
-        path: ~.result
-        value: "Number must be positive!"
-        when: ~.user_input
-        "<=": 0
-      - what: setData
-        on: click
-        path: ~.result
-        value: "Please enter a number!"
-        when: ~.user_input
-        isEmpty: true
-  - type: div
-    content: ["Result: ", ~.result]
-    actions:
-      - what: hide
-        when: ~.result
-        isEmpty: true
-
-data:
-  user_input: null
-  result: null
-```
-
-## Conclusion
-
-You now have a good understanding of reactions in Reactive-JSON. We've seen how they allow you to respond to user events and perform various operations like data updates and network requests.
-
-To create complete interactive interfaces, you should combine reactions with actions. Actions handle the conditional behavior of elements, while reactions handle user interactions and data updates.
-
-For more information about actions and conditional behavior, check out the [Actions Documentation](../action/index.md).