<aside> 💡 New Lasca Documentation that is more sophisticated is here

</aside>

Lasca allows us to configure the following UI logics that are essential to web applications.

• Condition (if statement, v-if in Vue.js)
• Loop (for statement, v-for in Vue.js)
• Variable ( {{ }} statement in Vue.js, {} statement in React)
• Event (e.g. click, hover, etc)

API Key

API key is necessary to set UI logics. API key must be set up as environment variable LASCA_API_TOKEN.

Get API key from API key page (login required)

export LASCA_API_TOKEN=abcd-ef-gh

UI Logic Setting

Create a lasca/components directory directly under the target project and place the UI logic definition files for each Lasca component under it.

└ lasca
  └ components
    ├ component_nameA.json  // The file name must match the Lasca component name.
		├ component_nameB.json
    :

// component_nameA.json

{
  "conditions": [
    "items.length > 0",
    "items.length === 0"
  ],
  "loops": [
    {
      "expression": "items",
      "itemVariable": "item",
      "itemIndex": "index",
      "key": "item.id"
    }
  ],
  "variables": [
    "item.name"
  ],
  "events": [
    "add", 
    "() => remove(index)"
  ]
}

conditions

boolean javascript expression should be configured. The expressions set up in this array will be converted to the contents of v-if in vue.js or if in React.

loops

Loop setting object should be configured. The expressions set up in this array will be converted to the contents of v-for in vue.js or map method in React.

Loop setting object definition: