| name | description | example |
|---|---|---|
| behavior | Define cross-cutting behaviors that are applied to many HTML elements | |
| def | Defines a function | see details... |
| eventsource | Subscribe to Server Sent Events (SSE) | |
| js | Embed JavaScript code at the top level | see details... |
| set | Defines a new element-scoped variable | |
| init | Initialization logic to be run when the code is first loaded | |
| on | Creates an event listener | on click log "clicked!" |
| socket | Create a Web Socket | |
| worker | Create a Web Worker for asynchronous work |
See also pseudo-commands.
| name | description | example |
|---|---|---|
| add | Adds content to a given target | add .myClass to me |
| append | Appends a value to a string, array or HTML Element | append "value" to myString |
| async | Runs commands asynchronously | async fetch /example |
| beep | Debug printing | beep! <.foo/> |
| break | Breaks out of the current loop | repeat 3 times break end |
| call/get | Evaluates an expression (e.g. a Javascript Function) | call alert('yep, you can call javascript!') get prompt('Enter your name') |
| continue | Skips the remainder of a loop and continues at the top of the next iteration. | repeat 3 times continue end |
| decrement | Subtracts a value to a variable, property, or attribute | decrement counter |
| fetch | Send a fetch request | fetch /demo then put it into my.innerHTML |
| go | Navigate to a new page or within a page | go to the top of the body smoothly |
| halt | Halts the current event (stopping propagate, etc.) | halt |
| hide | Hide an element in the DOM | hide me |
| if | A conditional control flow command | if I match .selected then call alert('I\'m selected!') |
| increment | Adds a value to a variable, property, or attribute | increment counter |
| js | Embeds javascript | js alert('this is javascript'); end |
| log | Logs a given expression to the console, if possible | log me |
| make | Creates a class instance or DOM element | make a Set from a, b. c, make a <p/> called para |
| measure | Gets the measurements for a given element | measure me then log it |
| pick | Selects items from arrays, strings and regex match results | pick match of "(\w+)" from str |
| put | Puts a value into a given variable or property | put "cool!" into me |
| remove | Removes content | log "bye, bye" then remove me |
| repeat | Iterates | repeat for x in [1, 2, 3] log x end |
| return | Returns a value | return 42 |
| send/trigger | Sends an event | send customEvent to #a-div |
| set | Sets a variable or property to a given value | set x to 0 |
| settle | Waits for a transition to end on an element, if any | add .fade-out then settle |
| show | Show an element in the DOM | show #anotherDiv |
| take | Takes a class from a set of elements | take .active from .tabs |
| tell | Temporarily sets a new implicit target value | tell <p/> add .highlight |
| throw | Throws an exception | throw "Bad Value" |
| toggle | Toggles content on a target | toggle .clicked on me |
| transition | Transitions properties on an element | transition opacity to 0 |
| wait | Waits for an event or a given amount of time before resuming the command list | wait 2s then remove me |
See expressions for an overview.
| name | description | example |
|---|---|---|
| as expressions | Converts an expression to a new value | "10" as Int |
| async expressions | Evaluate an expression asynchronously | set x to async getPromise() |
| attribute reference | An attribute reference | [selected=true] |
| block literal | Anonymous functions with an expression body | \ x -> x * x |
| class reference | A class reference | .active |
| closest expression | Find closest element | closest <div/> |
| comparison operator | Comparison operators | x == "foo" I match <:active/> |
| id reference | An id reference | #main-div |
| logical operator | Logical operators | x and yz or false |
| no operator | No operator | no element.children |
| of expression | Get a property of an object | the location of window |
| query reference | A query reference | <button/> <:focused/> |
| relative positional expressions | Get a positional value out of an array-like object | next <div/> from me |
| positional expressions | Get a positional value out of an array-like object | first from <div/> |
| possessive expressions | Get a property or attribute from an element | the window's location |
| time expression | A time expression | 200ms |
| cookies symbol | A symbol for accessing cookies | cookies['My-Cookie'] |
| name | description | example |
|---|---|---|
| it | The result of a previous command | fetch /people as json then put it into people |
| me | Reference to the current element | put 'clicked' into me |
| you | Reference to a target element | tell <p/> remove yourself |
Define other values just like you do in Javascript
| name | description | example |
|---|---|---|
| arrays | Javascript-style array literals | [1, 2, 3] |
| booleans | Javascript-style booleans | true false |
| math operators | Javascript-style mathematical operators (mod is a keyword in place of %) |
1 + 2 |
| null | Javascript-style null | null |
| numbers | Javascript-style numbers | 1 3.14 |
| objects | Javascript-style object literals | {foo:"bar", doh:42} |
| strings | Javascript-style strings | "a string", 'another string' |