@ea-lab/reactive-json-docs 0.7.0 → 1.0.0-alpha.0

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

@@ -1,7 +1,5 @@
 # ReactiveJsonSubroot
 
-## Introduction
-
 The `ReactiveJsonSubroot` component allows you to render a new Reactive-JSON root inside an existing application. It is useful for embedding a sub-application, isolating a part of the data tree, or rendering a separate rjbuild with its own options.
 
 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.
@@ -60,15 +58,15 @@ When `sharedUpdates: true` is enabled, the component automatically detects templ
 
 ### Supported vs Unsupported Cases
 
-#### ✅ Supported cases
+#### Supported cases
 
-##### 1. Direct reference
+##### Direct reference
 ```yaml
 dataOverride: ~~.user
 # Modifications in the subroot propagate to "user" in the parent
 ```
 
-##### 2. Object mapping with references
+##### Object mapping with references
 ```yaml
 dataOverride:
   userInfo: ~~.user
@@ -77,19 +75,19 @@ dataOverride:
 # Modifications to "settings" propagate to "config" in the parent
 ```
 
-##### 3. Local references
+##### Local references
 ```yaml
 dataOverride: ~.localData
 # Modifications propagate to the local template context
 ```
 
-##### 4. Hierarchical references
+##### Hierarchical references
 ```yaml
 dataOverride: ~>key.someData
 # Modifications propagate up the template hierarchy
 ```
 
-##### 5. Arrays in dataOverride
+##### Arrays in dataOverride
 ```yaml
 dataOverride:
   - ~~.firstItem
@@ -97,7 +95,7 @@ dataOverride:
 # Array items with template references are properly handled
 ```
 
-#### ❌ Unsupported cases
+#### Unsupported cases
 
 ##### Nested references in data
 ```yaml

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

@@ -145,19 +145,19 @@ renderView:
       1. **Automatic synchronization**: Data remains consistent between parent and subroot
       2. **Simplicity**: No need to manually manage update callbacks
       3. **Performance**: Avoids unnecessary re-renders by propagating directly to the right level
-             4. **Flexibility**: Supports different referencing patterns (~~., ~., ~>) and arrays containing references
+      4. **Flexibility**: Supports different referencing patterns (~~., ~., ~>) and arrays containing references
 
       ### Supported vs Unsupported Cases
 
-      #### ✅ Supported cases
+      #### Supported cases
 
-      ##### 1. Direct reference
+      ##### Direct reference
       ```yaml
       dataOverride: ~~.user
       # Modifications in the subroot propagate to "user" in the parent
       ```
 
-      ##### 2. Object mapping with references
+      ##### Object mapping with references
       ```yaml
       dataOverride:
         userInfo: ~~.user
@@ -166,19 +166,19 @@ renderView:
       # Modifications to "settings" propagate to "config" in the parent
       ```
 
-      ##### 3. Local references
+      ##### Local references
       ```yaml
       dataOverride: ~.localData
       # Modifications propagate to the local template context
       ```
 
-      ##### 4. Hierarchical references
+      ##### Hierarchical references
       ```yaml
       dataOverride: ~>key.someData
       # Modifications propagate up the template hierarchy
       ```
 
-      ##### 5. Arrays in dataOverride
+      ##### Arrays in dataOverride
       ```yaml
       dataOverride:
         - ~~.firstItem
@@ -186,7 +186,7 @@ renderView:
       # Array items with template references are properly handled
       ```
 
-      #### ❌ Unsupported cases
+      #### Unsupported cases
 
       ##### Nested references in data
       ```yaml
@@ -212,7 +212,7 @@ renderView:
       renderView:
         - type: ReactiveJsonSubroot
           rjOptions:
-            maybeRawAppRjBuild: '{"data":{"userName":"Alice","messageCount":3},"renderView":[{"type":"div","attributes":{"style":{"padding":"1rem","border":"1px solid #ddd","borderRadius":"8px","backgroundColor":"#f9f9f9"}},"content":[{"type":"h3","content":"~~.userName"},{"type":"p","content":["You have ","~~.messageCount"," new messages."]},{"type":"button","content":"Mark as read","attributes":{"style":{"backgroundColor":"#007bff","color":"white","border":"none","padding":"0.5rem 1rem","borderRadius":"4px"}}}]}]}'
+            maybeRawAppRjBuild: '{"data":{"userName":"Alice","messageCount":3},"renderView":[{"type":"div","attributes":{"style":{"padding":"1rem","border":"1px solid #ddd","borderRadius":"8px"}},"content":[{"type":"h3","content":"~~.userName"},{"type":"p","content":["You have ","~~.messageCount"," new messages."]},{"type":"button","content":"Mark as read","attributes":{"style":{"border":"1px solid #007bff","padding":"0.5rem 1rem","borderRadius":"4px"}}}]}]}'
 
         - type: hr
 
@@ -240,7 +240,7 @@ renderView:
               padding: "1rem"
               border: "2px solid #007bff"
               borderRadius: "8px"
-              backgroundColor: "#f8f9fa"
+              
               marginBottom: "1rem"
           content:
             - type: h4
@@ -262,16 +262,34 @@ renderView:
                       padding: "1rem"
                       border: "2px solid #28a745"
                       borderRadius: "8px"
-                      backgroundColor: "#e8f5e9"
+                      
                   content:
                     - type: h4
                       content: "Subroot Editor (with sharedUpdates)"
-                    - type: TextField
-                      label: "Name"
-                      dataLocation: ~.name
-                    - type: TextField
-                      label: "Email"
-                      dataLocation: ~.email
+                    - type: label
+                      content: "Name"
+                    - type: input
+                      attributes:
+                        type: text
+                        value: ~.name
+                        placeholder: "Name"
+                      actions:
+                        - what: setData
+                          on: change
+                          path: ~.name
+                          value: "<reactive-json:event-new-value>"
+                    - type: label
+                      content: "Email"
+                    - type: input
+                      attributes:
+                        type: email
+                        value: ~.email
+                        placeholder: "Email"
+                      actions:
+                        - what: setData
+                          on: change
+                          path: ~.email
+                          value: "<reactive-json:event-new-value>"
                     - type: p
                       attributes:
                         style:
@@ -306,7 +324,7 @@ renderView:
                   padding: "1rem"
                   border: "1px solid #ddd"
                   borderRadius: "4px"
-                  backgroundColor: "#f5f5f5"
+                  
               content:
                 - type: h5
                   content: "Profile Data"
@@ -320,7 +338,7 @@ renderView:
                   padding: "1rem"
                   border: "1px solid #ddd"
                   borderRadius: "4px"
-                  backgroundColor: "#f5f5f5"
+                  
               content:
                 - type: h5
                   content: "Settings Data"
@@ -346,28 +364,64 @@ renderView:
                     padding: "1rem"
                     border: "2px solid #17a2b8"
                     borderRadius: "8px"
-                    backgroundColor: "#e3f2fd"
+                    
                 content:
                   - type: div
                     content:
                       - type: h5
                         content: "Edit Profile"
-                      - type: TextField
-                        label: "Name"
-                        dataLocation: ~.userProfile.name
-                      - type: NumberField
-                        label: "Age"
-                        dataLocation: ~.userProfile.age
+                      - type: label
+                        content: "Name"
+                      - type: input
+                        attributes:
+                          type: text
+                          value: ~.userProfile.name
+                          placeholder: "Name"
+                        actions:
+                          - what: setData
+                            on: change
+                            path: ~.userProfile.name
+                            value: "<reactive-json:event-new-value>"
+                      - type: label
+                        content: "Age"
+                      - type: input
+                        attributes:
+                          type: number
+                          value: ~.userProfile.age
+                          placeholder: "Age"
+                        actions:
+                          - what: setData
+                            on: change
+                            path: ~.userProfile.age
+                            value: "<reactive-json:event-new-value>"
                   - type: div
                     content:
                       - type: h5
                         content: "Edit Settings"
-                      - type: TextField
-                        label: "Theme"
-                        dataLocation: ~.userSettings.theme
-                      - type: TextField
-                        label: "Language"
-                        dataLocation: ~.userSettings.language
+                      - type: label
+                        content: "Theme"
+                      - type: input
+                        attributes:
+                          type: text
+                          value: ~.userSettings.theme
+                          placeholder: "Theme"
+                        actions:
+                          - what: setData
+                            on: change
+                            path: ~.userSettings.theme
+                            value: "<reactive-json:event-new-value>"
+                      - type: label
+                        content: "Language"
+                      - type: input
+                        attributes:
+                          type: text
+                          value: ~.userSettings.language
+                          placeholder: "Language"
+                        actions:
+                          - what: setData
+                            on: change
+                            path: ~.userSettings.language
+                            value: "<reactive-json:event-new-value>"
 
   - type: RjBuildDescriber
     title: Example with Array References
@@ -386,15 +440,46 @@ renderView:
               padding: "1rem"
               border: "1px solid #ddd"
               borderRadius: "4px"
-              backgroundColor: "#f9f9f9"
               marginBottom: "1rem"
           content:
             - type: h4
               content: "Parent Items Display"
             - type: p
-              content: ["Item 1: ", ~~.items.0.title, " (", ~~.items.0.completed, ")"]
-            - type: p
-              content: ["Item 2: ", ~~.items.1.title, " (", ~~.items.1.completed, ")"]
+              content:
+                - "Item 1: "
+                - ~~.items.0.title
+                - " (completed: "
+                - type: span
+                  content: "Yes"
+                  actions:
+                    - what: hide
+                      when: ~~.items.0.completed
+                      is: false
+                - type: span
+                  content: "No"
+                  actions:
+                    - what: hide
+                      when: ~~.items.0.completed
+                      is: true
+                - ")"
+            - type: p  
+              content:
+                - "Item 2: "
+                - ~~.items.1.title
+                - " (completed: "
+                - type: span
+                  content: "Yes"
+                  actions:
+                    - what: hide
+                      when: ~~.items.1.completed
+                      is: false
+                - type: span
+                  content: "No"
+                  actions:
+                    - what: hide
+                      when: ~~.items.1.completed
+                      is: true
+                - ")"
         
         - type: ReactiveJsonSubroot
           sharedUpdates: true
@@ -410,7 +495,6 @@ renderView:
                       padding: "1rem"
                       border: "2px solid #ffc107"
                       borderRadius: "8px"
-                      backgroundColor: "#fff3cd"
                   content:
                     - type: h4
                       content: "Array Items Editor"
@@ -418,22 +502,56 @@ renderView:
                       content:
                         - type: h5
                           content: "First Item"
-                        - type: TextField
-                          label: "Title"
-                          dataLocation: ~.0.title
-                        - type: CheckBoxField
-                          label: "Completed"
-                          dataLocation: ~.0.completed
+                        - type: label
+                          content: "Title"
+                        - type: input
+                          attributes:
+                            type: text
+                            value: ~.0.title
+                            placeholder: "Title"
+                          actions:
+                            - what: setData
+                              on: change
+                              path: ~.0.title
+                              value: "<reactive-json:event-new-value>"
+                        - type: label
+                          content: "Completed"
+                        - type: input
+                          attributes:
+                            type: checkbox
+                            checked: ~.0.completed
+                          actions:
+                            - what: setData
+                              on: change
+                              path: ~.0.completed
+                              value: "<reactive-json:event-new-value>"
                     - type: div
                       content:
                         - type: h5
                           content: "Second Item"
-                        - type: TextField
-                          label: "Title"
-                          dataLocation: ~.1.title
-                        - type: CheckBoxField
-                          label: "Completed"
-                          dataLocation: ~.1.completed
+                        - type: label
+                          content: "Title"
+                        - type: input
+                          attributes:
+                            type: text
+                            value: ~.1.title
+                            placeholder: "Title"
+                          actions:
+                            - what: setData
+                              on: change
+                              path: ~.1.title
+                              value: "<reactive-json:event-new-value>"
+                        - type: label
+                          content: "Completed"
+                        - type: input
+                          attributes:
+                            type: checkbox
+                            checked: ~.1.completed
+                          actions:
+                            - what: setData
+                              on: change
+                              path: ~.1.completed
+                              value: "<reactive-json:event-new-value>"
 
   - type: Markdown
     content: |

package/public/rjbuild/docs/core/element/special/Switch.md

@@ -1,32 +1,30 @@
 # Switch
 
-## Introduction
-
 The `Switch` component allows you to render a list or collection of items using a template, with support for dynamic data, options, and pagination. It is useful for displaying arrays, lists, or collections where each item can be rendered with a specific template or configuration.
 
 ## Properties
-- `content` (array/object, required): The data or path to the data to iterate over
-- `options` (object, optional): Mapping of keys to templates for rendering each item (referenced by `load`)
-- `singleOption` (object, optional): Template to use for each item when all items share the same structure (referenced by `load`)
-- `cardinality` (number, optional): Maximum number of items to render (default: unlimited)
-- `paginated` (boolean, optional): Whether to enable pagination (default: false)
-- `paginationProps` (object, optional): Pagination configuration (page size, etc.)
-- `before` (object, optional): Content to render before the list
-- `after` (object, optional): Content to render after the list
-- `contentWrapper` (object, optional): HTML element configuration to wrap the main content (items only, not before/after)
-  - `tag` (string, optional): HTML tag name (default: "div")
-  - `attributes` (object, optional): HTML attributes to apply to the wrapper element (supports template evaluation)
-- `templates` (object, optional): Named templates referenced by `load` in `singleOption` or `options`
+- `content` (array/object, required): The data or path to the data to iterate over.
+- `options` (object, optional): Mapping of keys to templates for rendering each item (referenced by `load`).
+- `singleOption` (object, optional): Template to use for each item when all items share the same structure (referenced by `load`).
+- `cardinality` (number, optional): Maximum number of items to render (default: unlimited).
+- `paginated` (boolean, optional): Whether to enable pagination (default: false).
+- `paginationProps` (object, optional): Pagination configuration (page size, etc.).
+- `before` (object, optional): Content to render before the list.
+- `after` (object, optional): Content to render after the list.
+- `contentWrapper` (object, optional): HTML element configuration to wrap the main content (items only, not before/after).
+  - `tag` (string, optional): HTML tag name (default: "div").
+  - `attributes` (object, optional): HTML attributes to apply to the wrapper element (supports template evaluation).
+- `templates` (object, optional): Named templates referenced by `load` in `singleOption` or `options`.
 
 ## Behavior
-- Iterates over the provided data and renders each item using the specified template(s)
-- If `options` is provided, uses the corresponding template for each key (with `load`)
-- If `singleOption` is provided, uses the template referenced by `load` for all items
-- Supports limiting the number of items with `cardinality`
-- Supports pagination if `paginated` is true
-- Renders optional `before` and `after` content
-- Can wrap the main content (items) with a custom HTML element using `contentWrapper`
-- Templates are defined in the `templates` object and referenced by name
+- Iterates over the provided data and renders each item using the specified template(s).
+- If `options` is provided, uses the corresponding template for each key (with `load`).
+- If `singleOption` is provided, uses the template referenced by `load` for all items.
+- Supports limiting the number of items with `cardinality`.
+- Supports pagination if `paginated` is true.
+- Renders optional `before` and `after` content.
+- Can wrap the main content (items) with a custom HTML element using `contentWrapper`.
+- Templates are defined in the `templates` object and referenced by name.
 
 ## Content Wrapper Feature
 
@@ -46,7 +44,7 @@ The wrapper only affects the main content items and does not interfere with pagi
 
 ## Examples
 
-### 1. Simple usage with `singleOption` (no pagination)
+### Simple usage with `singleOption` (no pagination)
 ```yaml
 renderView:
   - type: Switch
@@ -65,7 +63,7 @@ data:
     - name: "Charlie"
 ```
 
-### 2. Usage with `options` (different templates per key)
+### Usage with `options` (different templates per key)
 ```yaml
 renderView:
   - type: Switch
@@ -94,7 +92,7 @@ data:
         value: 25
 ```
 
-### 3. Usage with `singleOption`, pagination, before/after, and PageControls
+### Usage with `singleOption`, pagination, before/after, and PageControls
 ```yaml
 renderView:
   - type: Switch
@@ -127,7 +125,7 @@ data:
     - value: 10
 ```
 
-### 4. Usage with `contentWrapper` for CSS Grid Layout
+### Usage with `contentWrapper` for CSS Grid Layout
 ```yaml
 renderView:
   - type: Switch
@@ -150,7 +148,7 @@ renderView:
         type: div
         attributes:
           style:
-            border: "1px solid #ccc"
+            border: "1px solid currentColor"
             borderRadius: 8px
             padding: 1rem
         content:
@@ -168,7 +166,7 @@ data:
       description: "Description of product C"
 ```
 
-### 5. Usage with `contentWrapper` for Flexbox Layout
+### Usage with `contentWrapper` for Flexbox Layout
 ```yaml
 renderView:
   - type: Switch
@@ -192,7 +190,7 @@ renderView:
             flex: "1 1 200px"
             margin: 0.5rem
             padding: 1rem
-            backgroundColor: "#f0f0f0"
+            border: "1px solid currentColor"
         content: ~.text
 data:
   items:
@@ -201,7 +199,7 @@ data:
     - text: "Item 3"
 ```
 
-### 6. Dynamic `contentWrapper` with Template Evaluation
+### Dynamic `contentWrapper` with Template Evaluation
 ```yaml
 renderView:
   - type: Switch
@@ -216,21 +214,21 @@ renderView:
           display: grid
           gridTemplateColumns: ~.gridColumns
           gap: ~.spacing
-          backgroundColor: ~.theme.backgroundColor
+          border: ~.theme.border
     templates:
       imageItem:
         type: div
         attributes:
           style:
             padding: 1rem
-            border: "1px solid #ddd"
+            border: "1px solid currentColor"
         content: ~.title
 data:
   layoutClass: "photo-gallery"
   gridColumns: "repeat(3, 1fr)"
   spacing: "2rem"
   theme:
-    backgroundColor: "#f5f5f5"
+    border: "1px solid currentColor"
   galleries:
     - title: "Photo 1"
     - title: "Photo 2"
@@ -238,11 +236,11 @@ data:
 ```
 
 ## Limitations
-- The data must be an array or object; strings and numbers are not supported
-- If both `options` and `singleOption` are provided, `singleOption` takes precedence
-- No built-in support for filtering or sorting (use DataFilter or custom logic)
-- Pagination requires the `paginated` property to be set to true
-- Templates must be defined in the `templates` object and referenced by `load`
+- The data must be an array or object; strings and numbers are not supported.
+- If both `options` and `singleOption` are provided, `singleOption` takes precedence.
+- No built-in support for filtering or sorting (use DataFilter or custom logic).
+- Pagination requires the `paginated` property to be set to true.
+- Templates must be defined in the `templates` object and referenced by `load`.
 
 ### Data Structure Requirements
 Switch requires each item in the data to be an object, not a primitive value: