Array Expression

Demonstrates dynamic array construction using the array expression feature.

Features Used

Array expression
Call/lambda expressions
setPath action
Dynamic array building

How to Run

npm install @constela/core @constela/runtime

npx constela run array-expression.json

Source Code

json

{
  "version": "1.0",
  "state": {
    "features": {
      "type": "list",
      "initial": [
        {
          "id": "dark-mode",
          "name": "Dark Mode",
          "enabled": false
        },
        {
          "id": "notifications",
          "name": "Notifications",
          "enabled": true
        },
        {
          "id": "auto-save",
          "name": "Auto Save",
          "enabled": false
        }
      ]
    }
  },
  "actions": [
    {
      "name": "toggleFeature",
      "steps": [
        {
          "do": "setPath",
          "target": "features",
          "path": {
            "expr": "array",
            "elements": [
              {
                "expr": "var",
                "name": "payload",
                "path": "index"
              },
              {
                "expr": "lit",
                "value": "enabled"
              }
            ]
          },
          "value": {
            "expr": "not",
            "operand": {
              "expr": "var",
              "name": "payload",
              "path": "currentEnabled"
            }
          }
        }
      ]
    }
  ],
  "view": {
    "kind": "element",
    "tag": "div",
    "props": {
      "style": {
        "expr": "lit",
        "value": "font-family: system-ui, sans-serif; padding: 16px;"
      }
    },
    "children": [
      {
        "kind": "element",
        "tag": "h1",
        "props": {
          "style": {
            "expr": "lit",
            "value": "margin: 0 0 8px 0; font-size: 24px;"
          }
        },
        "children": [
          {
            "kind": "text",
            "value": {
              "expr": "lit",
              "value": "Feature Selector"
            }
          }
        ]
      },
      {
        "kind": "element",
        "tag": "p",
        "props": {
          "style": {
            "expr": "lit",
            "value": "color: #666; margin: 0 0 16px 0;"
          }
        },
        "children": [
          {
            "kind": "text",
            "value": {
              "expr": "lit",
              "value": "Toggle features and see the selected items displayed using array expression."
            }
          }
        ]
      },
      {
        "kind": "element",
        "tag": "div",
        "props": {
          "style": {
            "expr": "lit",
            "value": "margin-bottom: 16px;"
          }
        },
        "children": [
          {
            "kind": "each",
            "items": {
              "expr": "state",
              "name": "features"
            },
            "as": "feature",
            "index": "i",
            "key": {
              "expr": "var",
              "name": "feature",
              "path": "id"
            },
            "body": {
              "kind": "element",
              "tag": "label",
              "props": {
                "style": {
                  "expr": "lit",
                  "value": "display: flex; align-items: center; gap: 8px; padding: 8px; cursor: pointer;"
                }
              },
              "children": [
                {
                  "kind": "element",
                  "tag": "input",
                  "props": {
                    "type": {
                      "expr": "lit",
                      "value": "checkbox"
                    },
                    "checked": {
                      "expr": "var",
                      "name": "feature",
                      "path": "enabled"
                    },
                    "onChange": {
                      "event": "change",
                      "action": "toggleFeature",
                      "payload": {
                        "index": {
                          "expr": "var",
                          "name": "i"
                        },
                        "currentEnabled": {
                          "expr": "var",
                          "name": "feature",
                          "path": "enabled"
                        }
                      }
                    }
                  }
                },
                {
                  "kind": "element",
                  "tag": "span",
                  "props": {
                    "style": {
                      "expr": "lit",
                      "value": "color: #333;"
                    }
                  },
                  "children": [
                    {
                      "kind": "text",
                      "value": {
                        "expr": "var",
                        "name": "feature",
                        "path": "name"
                      }
                    }
                  ]
                }
              ]
            }
          }
        ]
      },
      {
        "kind": "element",
        "tag": "div",
        "props": {
          "style": {
            "expr": "lit",
            "value": "padding: 16px; background: #f5f5f5; border-radius: 8px;"
          }
        },
        "children": [
          {
            "kind": "element",
            "tag": "h3",
            "props": {
              "style": {
                "expr": "lit",
                "value": "margin: 0 0 12px 0; font-size: 16px; color: #333;"
              }
            },
            "children": [
              {
                "kind": "text",
                "value": {
                  "expr": "lit",
                  "value": "Selected Features (using array expression):"
                }
              }
            ]
          },
          {
            "kind": "element",
            "tag": "div",
            "props": {
              "style": {
                "expr": "lit",
                "value": "display: flex; flex-wrap: wrap; gap: 8px;"
              }
            },
            "children": [
              {
                "kind": "each",
                "items": {
                  "expr": "call",
                  "target": {
                    "expr": "state",
                    "name": "features"
                  },
                  "method": "filter",
                  "args": [
                    {
                      "expr": "lambda",
                      "param": "f",
                      "body": {
                        "expr": "get",
                        "base": {
                          "expr": "var",
                          "name": "f"
                        },
                        "path": "enabled"
                      }
                    }
                  ]
                },
                "as": "selected",
                "key": {
                  "expr": "var",
                  "name": "selected",
                  "path": "id"
                },
                "body": {
                  "kind": "element",
                  "tag": "span",
                  "props": {
                    "style": {
                      "expr": "lit",
                      "value": "display: inline-block; padding: 4px 12px; background: #0070f3; color: white; border-radius: 16px; font-size: 14px;"
                    }
                  },
                  "children": [
                    {
                      "kind": "text",
                      "value": {
                        "expr": "var",
                        "name": "selected",
                        "path": "name"
                      }
                    }
                  ]
                }
              }
            ]
          },
          {
            "kind": "element",
            "tag": "div",
            "props": {
              "style": {
                "expr": "lit",
                "value": "margin-top: 16px; padding: 12px; background: #e0f2fe; border-radius: 4px;"
              }
            },
            "children": [
              {
                "kind": "element",
                "tag": "code",
                "props": {
                  "style": {
                    "expr": "lit",
                    "value": "font-size: 12px; color: #0369a1;"
                  }
                },
                "children": [
                  {
                    "kind": "text",
                    "value": {
                      "expr": "lit",
                      "value": "Array built: ["
                    }
                  },
                  {
                    "kind": "text",
                    "value": {
                      "expr": "call",
                      "target": {
                        "expr": "call",
                        "target": {
                          "expr": "call",
                          "target": {
                            "expr": "state",
                            "name": "features"
                          },
                          "method": "filter",
                          "args": [
                            {
                              "expr": "lambda",
                              "param": "f",
                              "body": {
                                "expr": "get",
                                "base": {
                                  "expr": "var",
                                  "name": "f"
                                },
                                "path": "enabled"
                              }
                            }
                          ]
                        },
                        "method": "map",
                        "args": [
                          {
                            "expr": "lambda",
                            "param": "f",
                            "body": {
                              "expr": "get",
                              "base": {
                                "expr": "var",
                                "name": "f"
                              },
                              "path": "name"
                            }
                          }
                        ]
                      },
                      "method": "join",
                      "args": [
                        {
                          "expr": "lit",
                          "value": ", "
                        }
                      ]
                    }
                  },
                  {
                    "kind": "text",
                    "value": {
                      "expr": "lit",
                      "value": "]"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}