@ea-lab/reactive-json-docs/public/rjbuild/docs/core/reaction/addData.yaml

Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides

renderView:
  - type: Markdown
    content: |
      # addData

      `addData` is a reaction that allows adding data at a specified path in the application's data context. It's particularly useful for appending new items to arrays or adding new properties to objects.

      ## Properties

  - type: DefinitionList
    content:
      - term:
          code: path
          after: "(string, required)"
        details:
          type: Markdown
          content: "The location where the data should be added (using template path syntax with `~` or `~~`). If the path does not exist, it will be created automatically"
      - term:
          code: value
          after: "(any, optional)"
        details:
          type: Markdown
          content: "The data to add. Can be any valid JSON value (string, number, object, array)"

  - type: Markdown
    content: |
      ## Behavior
      - If the path doesn't exist, it will be created automatically
      - For arrays, the value is appended to the end
      - For objects, the value must be an object with a single key
      - The operation is atomic and synchronous

      ## Data Management
      The value is evaluated using the template system before being added.

      ### Adding to Arrays
      If the target path is an array, the value is appended to the end of the array. The value can be a string, number, object, or array.

      ### Adding to Objects
      If the target path is an object, the value must be an object with a single key. The key will be used as the new property name, and the value as its value.

      Example:
      ```yaml
      actions:
        - what: addData
          on: click
          path: ~.user
          value:
            role: "admin"  # Adds a new property 'role' to the user object
      ```

      ## Complete Examples

      ### Adding to an Array
      ```yaml
      renderView:
        - type: button
          content: Add Item
          actions:
            - what: addData
              on: click
              path: ~.items
              value: "New Item"

      data:
        items: ["Item 1", "Item 2"]
      ```

      ### Adding to an Object
      ```yaml
      renderView:
        - type: button
          content: Add Property
          actions:
            - what: addData
              on: click
              path: ~.user
              value:
                role: "admin"

      data:
        user:
          name: "John"
          email: "john@example.com"
      ```

      ### Adding with Dynamic Values
      ```yaml
      renderView:
        - type: label
          content: "New Item:"
        - type: input
          attributes:
            type: "text"
            value: ~.new_item
            style:
              padding: "8px"
              margin: "8px 0"
              border: "1px solid #ccc"
              borderRadius: "4px"
              width: "200px"
          actions:
            - what: setData
              on: input
              path: ~.new_item
              value: "<reactive-json:event-new-value>"
        - type: button
          content: Add
          actions:
            - what: addData
              on: click
              path: ~.items
              value: ~.new_item
              when: ~.new_item
              isEmpty: not

      data:
        items: []
        new_item: ""
      ```

  - type: RjBuildDescriber
    title: "Interactive Example: Add User to Array"
    description:
      - type: Markdown
        content: |
          The button below adds a new user (with empty name and email) to the `users` array. Each user is displayed with a form using the `Switch` component and the `user_form` template.
    toDescribe:
      renderView:
        - type: button
          content: Add user
          actions:
            - what: addData
              on: click
              path: ~.users
              value:
                name: ""
                email: ""
        - type: Switch
          content: ~.users
          singleOption:
            load: user_form
      templates:
        user_form:
          type: div
          content:
            - type: label
              content: "Name:"
            - type: input
              attributes:
                type: "text"
                value: ~.name
                style:
                  padding: "8px"
                  margin: "8px 0"
                  border: "1px solid #ccc"
                  borderRadius: "4px"
                  width: "200px"
              actions:
                - what: setData
                  on: input
                  path: ~.name
                  value: "<reactive-json:event-new-value>"
            - type: label
              content: "Email:"
            - type: input
              attributes:
                type: "email"
                value: ~.email
                style:
                  padding: "8px"
                  margin: "8px 0"
                  border: "1px solid #ccc"
                  borderRadius: "4px"
                  width: "200px"
              actions:
                - what: setData
                  on: input
                  path: ~.email
                  value: "<reactive-json:event-new-value>"
      data:
        users:
          - name: "John"
            email: "john@example.com"
  - type: Markdown
    content: |
      ## Limitations

      - Cannot add data to non-object/non-array paths
      - The path must be valid according to the template system rules
      - The value must be serializable
      - For objects, the value must be an object with a single key