Standard Library

Aggregates

gather/sort - generates an ordering for a set
Input
  • for - the set to sort
  • per - (optional) - one or more attributes by which to group `for`
  • direction - (optional) - direction in which to sort `for`. Possible values are:
    • 'up' - smallest to largest; default option
    • 'down' - largest to smallest
Sorts the students by GPA ~~~ search [#student name GPA] index = gather/sort[for: GPA] bind [#ui/text sort: index, text: "{{name}} {{GPA}}"] ~~~ Add some students ~~~ commit [#student name: "Ashley" GPA: 3.10] [#student name: "Jerome" GPA: 2.37] [#student name: "Iggy" GPA: 3.97] ~~~
gather/count - returns the number of elements in a set
Input
  • for - the set to count over
  • per - (optional) - one or more attributes by which to group `for`
Count the number of citizens in each state ~~~ search residents = [#citizen state] population = gather/count[given: residents, per: state] bind [#ui/text text: "{{population}} people live in {{state}}"] ~~~ Add some citizens ~~~ commit [#citizen name: "Regina" state: "CA"] [#citizen name: "Travis" state: "WA"] [#citizen name: "Sally" state: "CA"] ~~~
gather/sum - returns the sum of values in a set of attributes
Input
  • for - the set to gather
  • value - the specific variable to be summed
  • per - (optional) - one or more attributes by which to group `for`
Sum of salaries for each department ~~~ search employees = [#employee salary department] payroll = gather/sum[for: employees, value: salary, per: department] bind [#ui/text text: "{{department}} - ${{payroll}}.00"] ~~~ Add some employees ~~~ commit [#employee name:"Cooper" salary:2 department:"engineering"] [#employee name:"Adrienne" salary:5 department:"engineering"] [#employee name:"Najib" salary:10 department:"marketing"] ~~~

Math

math/floor - rounds a number down
Input
  • value - the number to be rounded down
x rounded down to 34 ~~~ search x = math/floor[value: 34.2] bind [#ui/text text: x] ~~~
math/ceiling - rounds a number up
Input
  • value - the number to be rounded up
x rounded up to 35 ~~~ search x = math/ceiling[value: 34.2] bind [#ui/text text: x] ~~~
math/round - rounds a number to the nearest integer
Input
  • value - the number to be rounded to the nearest integer
x rounded to 34 ~~~ search x = math/round[value: 34.2] bind [#ui/text text: x] ~~~
math/sin - sine of an angle
Input
  • degrees - the angle in degrees
r calculated to 1 ~~~ search r = math/sin[degrees: 90] bind [#ui/text text: r] ~~~
math/cos - cosine of an angle
Input
  • degrees - the angle in degrees
r calculated to 0 ~~~ search r = math/cos[degrees: 90] bind [#ui/text text: r] ~~~
math/tan - tangent of an angle
Input
  • degrees - the angle in degrees
r calculated to 1 ~~~ search r = math/tan[degrees: 45] bind [#ui/text text: r] ~~~
math/max - the greater of two values
Input
  • a - a value to compare
  • b - another value to compare
takes the higher score ~~~ search pac-man = 10 donkey-kong = 13 best-score = math/max[a: pac-man, b: donkey-kong] bind [#ui/text text: "The winning score is {{best-score}}"] ~~~
math/min - the lesser of two values
Input
  • a - a value to compare
  • b - another value to compare
takes the lower score ~~~ search pac-man = 10 donkey-kong = 13 worst-score = math/min[a: pac-man, b: donkey-kong] bind [#ui/text text: "The losing score is {{worst-score}}"] ~~~
math/mod - modulo division
Input
  • value - the number to be divided (dividend)
  • by - the number by which to divide (divisor)
m is the remainder, 1 ~~~ search m = math/mod[value: 5, by: 2] bind [#ui/text text: "5 mod 2 is {{m}}"] ~~~
math/absolute - absolute value of a number
Input
  • value - the number whose absolute value is found
number of hours from the Prime Meridian ~~~ search [#city name longitude] hours-from-gmt = math/absolute[value: longitude] * 24 / 360 bind [#ui/text text: "{{name}} is {{hours-from-gmt}} hours from the Prime Meridian"] ~~~ Add some cities ~~~ commit [#city name: "Paris" longitude: 2.33] [#city name: "New York" longitude: -75.61] [#city name: "Los Angeles" longitude: -118.24] ~~~
math/pow - raise a value to an exponent
  • value - the vale to exponentiate
  • exponent - the exponent
Calculate 2 ^ 3 ``` search x = math/pow[value: 2 exponent: 3] bind [#ui/text text: "2 ^ 3 = {{x}}"] ```
math/ln - calculate the natural log of a value
  • value - the value to take the natural log of
calculate the natural log of 17 ``` search x = math/ln[value: 17] bind [#ui/text text: "ln(17) = {{x}}"] ```
math/to-fixed - formats a number as a string to a certain number of decimal places
Input
  • value - the number to be formatted
  • to - the number of decimal places to which `a` will be formatted
pi represented as the string "3.14" ~~~ search circumference = 6 diameter = 1.910 pi = math/to-fixed[value: (circumference / diameter), to: 2] bind [#ui/text text: pi] ~~~
math/range - generates a range of numbers
Input
  • start - the start of the range
  • stop - the end of the range
generates integers 1 through 10 ~~~ search y = math/range[start: 1, stop: 10] bind [#ui/text text: y] ~~~
random/number - generates a random number between 1 and 0
Input
  • seed - a number used to initialize the random number generator
generates a random number every second ~~~ search [#time second] x = random/number[seed: second] bind [#ui/text text: x] ~~~ Start a timer ~~~ commit [#system/timer #time resolution: 1000] ~~~

Strings

string/replace - replaces a string of text with another
Input
  • text - the text in which to search for strings and replace them
  • replace - the string to be replaced
  • with - the string that will replace `replace`
Americanized version of British spelling ~~~ search string = "I love the flavour." american-version = string/replace[text: string, replace: "flavour", with: "flavor"] bind [#ui/text text: american-version] ~~~
string/get - gets a character from a specific location in a string
Input
  • text - the text to be searched
  • at - the location to be searched
finds the 17th letter of the alphabet ~~~ search alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" letter = string/get[text: alphabet, at: 17] bind [#ui/text text: "The 17th letter of the alphabet is {{letter}}"] ~~~
string/uppercase - converts a string to uppercase
Input
  • text - the text to be converted
~~~ search funny = "lol" really-funny = string/uppercase[text: funny] bind [#ui/text text: really-funny] ~~~
string/lowercase - converts a string to lowercase
Input
  • text - the text to be converted
~~~ search really-funny = "LOL" down-a-notch = string/lowercase[text: really-funny] bind [#ui/text text: down-a-notch] ~~~
string/index-of - returns the position of the first occurrence of a specified value in a string
Input
  • text - the text to be searched
  • substring - the string to be found in `text`
"eve" is in "developers" at index 2. ~~~ search index = string/index-of[text: "developers", substring: "eve"] bind [#ui/text text: "String found at index {{index}}"] ~~~
string/codepoint-length - returns the length of a string in Unicode code points.
Input
  • text - the string whose length is found
the code point length of the word "unicode" ~~~ search string = "unicode" length-in-js = string/codepoint-length[text: string] bind [#ui/text text: length-in-js] ~~~

HTML

The HTML library is a low level interface for creating HTML elements and responding to events in the browser.

#html/element - renders a record in the browser as an html element of your choosing
Input
  • tagname - determines the type of html element rendered in the browser; can be any html element given as a string
  • style - (optional) - specific CSS styles can be defined, but must be entered as a subrecord
  • text - (optional) - defines text within the html element
  • # - (optional) - any other tags on the record will be applied to the element as classes
  • class - (optional) defines one or more classes for the element
  • Other attributes - (optional) - other attribute-value pairs will be applied directly to the element for integration with existing JS libraries or debugging
commits a div in the browser with the text "Hello world!" and the class "hello" ~~~ commit [#html/element #hello tagname: "div" text: "Hello world!"] ~~~
Dynamic class record - uses boolean logic to determine whether an element has a certain class
  • Requires an `if` statement in the search block that returns true or false
if the text "Hello world!" is in a record tagged #html/element with the tagname "div", apply the class "header" to that element ~~~ search hello = [#html/element tagname text: "Hello world!"] header = if tagname = "div" then "true" else "false" bind hello <- [class: [header]] ~~~ Commit an element with a greeting ~~~ commit [#html/element tagname: "div" text: "Hello world!"] ~~~
#html/listener/hover - adds a listener to an html element to make it responsive when it is being hovered over in browser; required to use the #html/hovered, #html/event/hover-in, and #html/event/hover-out tags
  • Apply the tag to an element to make it responsive to hovering
commit a div to the browser with the text "Hover over me!" that will change its record if it is hovered over ~~~ commit [#ui/div #html/listener/hover text: "Hover over me!"] ~~~
#html/hovered - a tag given by Eve to an html element being currently hovered over; requires #html/listener/hover
  • Tag applied by Eve
commit a div to the browser with the text "Hover over me!" that will change its record if it is hovered over ~~~ commit [#ui/div #html/listener/hover text: "Hover over me!"] ~~~ Display a message when an element with the #html/listener/hover` ~~~ search [#html/hovered] bind [#ui/text text: "an element is being hovered"] ~~~
#html/event/(hover-in, hover-out) - monitors when the mouse enters or leaves a particular element in the browser; requires #html/listener/hover
Output
  • element - the element that the mouse is entering or leaving
Do something on hover-in ~~~ search direction = if [#html/event/hover-in] then "in" else if [#html/event/hover-out] then "out" commit [#ui/text text: "Hovered {{direction}}"] ~~~ Monitor hover on an element ~~~ commit [#ui/text #html/listener/hover text: "Hover over me" style: [width: "100px" height: "100px" background-color: "rgb(226, 79, 94)" display: "block" color: "white" padding: "10px"]] ~~~
#html/event/change - monitors specific changes in text input or form elements in the browser
Output
  • element - the changed element
  • value - the current value of a form element in the browser
looks for any element tagged #question that has the magic word and adds the tag #magic-word to it ~~~ search [#html/event/change value: "please" element: question] question = [#question] bind question <- [#magic-word] ~~~
#html/event/(click, double-click, mouse-down, mouse-up) - monitors mouse events in the browser; #html/event/click and #html/event/double-click currently work for the left mouse button only
Output
  • element - the element that was clicked; includes clicks on any children within the element
  • target - the direct element that was clicked (the topmost target in the DOM tree)
  • page-x - the x-coordinate of the mouse pointer relative to the page
  • page-y - the y-coordinate of the mouse pointer relative to the page
  • window-x - the x-coordinate of the mouse pointer relative to the window
  • window-y - the y-coordinate of the mouse pointer relative to the page
  • button - the mouse button that performed the click; options are:
    • "left" - left mouse button; if no button argument is provided, this is the default
    • "right" - right mouse button
    • "middle" - middle mouse button
    • 3, 4, 5, ... - additional numbered mouse buttons
looks for a right click in any h1 element and posts the message "Right clicked!" ~~~ search event = if [#html/event/mouse-up] then "up" else if [#html/event/mouse-down] then "down" else if [#html/event/click] then "click" else if [#html/event/double-click] then "double-click" commit [#ui/text text: "{{event}}"] ~~~ Monitor clicks on an element ~~~ commit [#ui/text text: "Click me" style: [width: "100px" height: "100px" background-color: "rgb(226, 79, 94)" display: "block" color: "white" padding: "10px"]] ~~~
#html/listener/context-menu - prevents the context menu from opening when an element is right clicked in the browser; useful in cases where you want to use right clicks on the element for your own purposes
  • Apply the tag to the element whose context menu you want to prevent
commits an h1 element whose context menu won’t open if right clicked ~~~ commit [#ui/h1 #html/listener/context-menu text: "Don’t inspect me"] [#ui/h1 text: "Inspect me"] ~~~
#html/event/(key-up, key-down) - monitors when a key has been pressed or released
Output
  • element - the element which has focus during key-up or key-down
  • key-code - the key code of the key that was pressed
  • key - the key that was pressed; an alternative to key-code for a premade list of keys:
    • "tab
    • "enter"
    • "shift"
    • "control"
    • "alt"
    • "escape"
    • "left"
    • "up"
    • "right"
    • "down"
    • "meta"
Prints a message with the code of the key pressed ~~~ search [#html/event/key-down key-code] commit [#ui/div #key-msg key-code text: "Pressed {{key-code}}"] ~~~ Remove messages for keys that are released ~~~ search [#html/event/key-up key-code] message = [#key-msg key-code] commit message := none ~~~
#html/event/(focus, blur) - monitors when a form element in the browser either gains or loses focus
Output
  • element - the element that was focused or blurred
  • value - the value of the form element when it was focused or blurred
Display a message on focus ~~~ search [#html/event/focus element] commit [#ui/text text: "{{element.placeholder}} was focused"] ~~~ Monitor clicks on an element ~~~ commit [#ui/input placeholder: "First Name"] [#ui/input placeholder: "Last Name"] ~~~
#html/trigger/(focus, blur) - focuses or blurs a specific form element in the browser; must be used only with commit, not bind
  • Apply the tag to the element to gain or lose focus
Commit some buttons and form elements ~~~ commit [#ui/input field: "first-name" placeholder: "First Name"] [#ui/input field: "last-name" placeholder: "Last Name"] [#ui/button text: "Focus first name" target: "first-name"] [#ui/button text: "Focus last name" target: "last-name"] ~~~ when a form element is found in the browser with the name "first-name", focuses on that element ~~~ search [#html/event/click element: [#ui/button target]] input = [#ui/input field: target] commit input.tag <- [#html/trigger/focus] ~~~
Note: Despite being a one-time trigger, Eve does not currently remove the tag once focus or blur has occurred, resulting in a state desynced from the real world. This bug is currently being fixed.

Canvas

The canvas library is an interface for drawing graphics in the browser using the HTML canvas.

#canvas/root - creates an HTML canvas for drawing rich graphics
Input
  • width - the width of the canvas in pixels
  • height - the height of the canvas in pixels
  • children - (optional) - paths are written as child records; while optional, without any children, the canvas will be blank
creates a canvas tagged #my-canvas that is 160 pixels wide by 90 pixel tall ~~~ commit [#canvas/root #my-canvas width: 160 height: 90] ~~~
#canvas/path - defines the paths that are drawn as well as their style and appearance
Input
  • fillStyle - (optional) - sets the color, gradient, or pattern used to fill the drawing; if undefined, the default is black
  • strokeStyle - (optional) - sets the color, gradient, or pattern used for the strokes; if undefined, the path will default to a black fill style
  • lineWidth - (optional) - sets the width of strokes in pixels; if undefined, the default is 1px
  • lineCap - (optional) - sets the style of end caps on lines; options are:
    • "butt" - a flat edge; if undefined, butt is default
    • "round" - a rounded end cap
    • "square" - ends are squared off by a box with an equal width and half the height of the line's thickness
  • lineJoin - (optional) - sets the style of corners where two lines meet; options are:
    • "miter" - a sharp corner; if undefined, miter is default
    • "round" - a rounded corner
    • "bevel" - a beveled corner
  • children - (optional) - each individual operation in the path is written as a child record; while optional, without any children, the canvas will be blank
adds a #canvas/path to #my-canvas with a black stroke, a line width of 2 pixels and beveled corners ~~~ search canvas = [#canvas/root #my-canvas] commit canvas.children := [#canvas/path strokeStyle: "#000000" lineWidth: 2 lineJoin: bevel] ~~~
Note about operations: Each individual path is written as a child record of #canvas/path with a type attribute whose value defines the path. No tags are necessary. Paths are drawn by default in the order they are given as children, such that the last child will appear on top of all the others, and the first child will be at the bottom. Adding a sort attribute to a child path allows you to manually define the order in which they are drawn. Paths originate in the upper left corner, so x coordinates originate at the left edge of the canvas and move to the right, and y coordinates originate at the top edge of the canvas and move to the bottom. Eve canvas operations follow the same rules as those outlined by Mozilla Developer Network for canvas rendering, making it an excellent source of further documentation.
moveTo - moves the path to a specified location without drawing a line; the default starting coordinates are (0,0)
Input
  • x - the horizontal coordinate to move to, in pixels
  • y - the vertical coordinate to move to, in pixels
creates a 100x100 canvas and moves the path 20 pixels right and 15 pixels down from the top left corner of the canvas without drawing a line ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path children: [type: "moveTo" x: 20 y: 15]]] ~~~
lineTo - moves the path to a specified location and draws a line; the default starting coordinates are (0,0)
Input
  • x - the horizontal coordinate to move to, in pixels
  • y - the vertical coordinate to move to, in pixels
draws a black line from the top left corner of a 100x100 canvas to the center ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path strokeStyle: "#000000" children: [type: "lineTo" x: 50 y: 50]]] ~~~
bezierQuadraticCurveTo - draws a Bézier curve
Input
  • cp1x - the x coordinate of the first control point
  • cp1y - the y coordinate of the first control point
  • cp2x - the x coordinate of the second control point
  • cp2y - the y coordinate of the second control point
  • x - the x coordinate of the end point
  • y - the y coordinate of the end point
draws a red Bézier curve starting at (20, 25) and ending at (40, 50) ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path strokeStyle: "rgb(255, 0, 0)" children: [type: "moveTo" x: 20 y: 25] [type: "bezierQuadraticCurveTo" cp1x: 20 cp1y: 0 cp2x: 30 cp2y: 30 x: 40 y: 50]]] ~~~
quadraticCurveTo - draws a quadratic curve
Input
  • cpx - the x coordinate of the control point
  • cpy - the y coordinate of the control point
  • x - the x coordinate of the end point
  • y - the y coordinate of the end point
draws a red quadratic curve starting at (20, 0) and ending at (40, 50) ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path strokeStyle: "rgb(255, 0, 0)" children: [type: "moveTo" x: 20 y: 25] [type: "quadraticCurveTo" cpx: 20 cpy: 0 x: 40 y: 50]]] ~~~
arc - draws an arc curve
Input
  • x - the x coordinate of the center of the curve
  • y - the y coordinate of the center of the curve
  • radius - the radius of the curve in pixels
  • startAngle - the starting angle of the curve in radians
  • endAngle - the ending angle of the curve in radians
  • anticlockwise - (optional) - values can be true or false; true draws the arc counterclockwise, false draws the arc clockwise
draws an arc that circumscribes ¾ of a 40 pixel-wide circle in the middle of the canvas ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path children: [type: "arc" x: 50 y: 50 radius: 20 startAngle: 0 endAngle: 1.5 * 3.14]]] ~~~
arcTo - draws an arc curve; particularly useful for creating an arc between two tangents
Input
  • x1 - the x coordinate of the starting point of the curve
  • y1 - the y coordinate of the starting point of the curve
  • x2 - the x coordinate of the ending point of the curve
  • y2 - the y coordinate of the ending point of the curve
  • radius - the radius of the curve in pixels
draws an arc that connects two perpendicular lines with a circular curve ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path children: [type: "lineTo" x: 50 y: 0] [type: "arcTo" x1: 50 y1: 0 x2: 55 y2: 5 radius: 5] [type: "lineTo" x: 55 y: 55]]] ~~~
ellipse - draws an elliptical curve
Input
  • x - the x coordinate of the center of the curve
  • y - the y coordinate of the center of the curve
  • radiusX - the horizontal radius of the curve
  • radiusY - the vertical radius of the curve
  • rotation - the rotation of the ellipse in radians
  • startAngle - the starting angle of the curve in radians
  • endAngle - the ending angle of the curve in radians
  • anticlockwise - (optional) - values can be true or false; true draws the arc counterclockwise, false draws the arc clockwise
draws a green oval in the center of the canvas that is 20 pixels wide and 30 pixels high ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path fillStyle: "#00ff00" children: [type: "ellipse" x: 50 y: 50 radiusX: 10 radiusY: 15 rotation: 0 startAngle: 0 endAngle: 2 * 3.14]]] ~~~
rect - draws a rectangle
Input
  • x - the x coordinate of the upper left corner of the rectangle
  • y - the y coordinate of the upper left corner of the rectangle
  • width - the width of the rectangle in pixels
  • height - the height of the rectangle in pixels
draws a blue square with black borders in the middle of the canvas ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path fillStyle: "#0000ff" strokeStyle: "#000000" children: [type: "rect" x: 40 y: 40 width: 20 height: 20]]] ~~~
closePath - draws a line from the position of the path back to the beginning of the path
  • No arguments
returns the path to (10, 10) from (20, 40) to create a triangle ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path children: [type: "moveTo" x: 10 y: 10] [type: "lineTo" x: 20 y: 10] [type: "lineTo" x: 20 y: 40] [type: "closePath"]]] ~~~

UI

The UI library provides a shorthand for adding standard HTML elements, as well as some ready-made components for interactive apps, to the browser. The ready-made UI components - #ui/button, #ui/column, #ui/row, and #ui/autocomplete - come with a set of default styles to make them quicker and easier to get started with.

Note: In the future we are considering moving all of the HTML shortcuts from #ui to #html, so that #ui will have only the pre-styled components for building apps. If and when this change happens, it will be announced and the documentation will change to reflect it.

#ui/... - renders a record in the browser as an html element of your choosing
Input
  • the #ui tag supports the following html elements:
    • #ui/row
    • #ui/column
    • #ui/spacer
    • #ui/input
    • #ui/text
    • #ui/a
    • #ui/style
    • #ui/link
    • #ui/div
    • #ui/span
    • #ui/img
    • #ui/h1
    • #ui/h2
    • #ui/h3
    • #ui/ul
    • #ui/ol
    • #ui/li
  • style - (optional) - specific CSS styles can be defined, but must be entered as a subrecord
  • text - (optional) - defines text within the html element
  • # - (optional) - any other tags on the record will be applied to the element as classes
  • class - (optional) defines one or more classes for the element
  • Other attributes - (optional) - other attribute-value pairs will be applied directly to the element for integration with existing JS libraries or debugging
commits a div in the browser with the text "Hello world!" ~~~ commit [#ui/div text: "Hello world!"] ~~~
#ui/(column, row) - renders a column or row in the browser whose children are drawn vertically for #ui/column and horizontally for #ui/row
Input
  • children - (optional) - the children contained within the column or row
  • style - (optional) - specific CSS styles can be defined, but must be entered as a subrecord
  • text - (optional) - defines text within the column or row
  • # - (optional) - any other tags on the record will be applied to the column or row as classes
  • class - (optional) defines one or more classes for the element
  • Other attributes - (optional) - other attribute-value pairs will be applied directly to the column or row for integration with existing JS libraries or debugging
creates 3 very wise divs in the browser stacked on top of one another ~~~ commit [#ui/column children: [#ui/div text: "See no evil."] [#ui/div text: "Hear no evil."] [#ui/div text: "Speak no evil."]] ~~~
#ui/button - renders a button in the browser
Input
  • - (optional) - preset options for class are:
    • "inset" - an inset button style
    • "flat" - a flat button style
    • If class is not specified, there is a plain default style that will be used
  • icon - (optional) - adds an icon to the button; utilizes Ionicons, omitting the "ion-" before icon names
  • style - (optional) - specific CSS styles can be defined, but must be entered as a subrecord
  • text - (optional) - defines text in the button
  • # - (optional) - any other tags on the record will be applied to the button as classes
  • Other attributes - (optional) - other attribute-value pairs will be applied directly to the button for integration with existing JS libraries or debugging
~~~ commit [#ui/button class: "flat" icon: "search" text: "Search"] ~~~
#ui/autocomplete - renders as its child a #ui/autocomplete/input form in the browser that offers autocomplete options based on a list of possible responses
Input
  • completion - the list of possible responses, given as a subrecord with the attribute "text" whose value is the list; requires the use of a pipe in the #ui record if matching against multiple search records for one autocomplete field
  • Note: Once an autocomplete option has been selected, #ui/autocomplete automatically gains a selected attribute whose value is the completion record; in the case of the example shown here, the selected attribute would be whichever #state record was chosen
  • placeholder - (optional) - the placeholder text for the input field
  • style - (optional) - specific CSS styles can be defined, but must be entered as a subrecord
  • # - (optional) - any other tags on the record will be applied to the autocomplete as classes
  • class - (optional) defines one or more classes for the autocomplete
  • Other attributes - (optional) - other attribute-value pairs will be applied directly to the autocomplete for integration with existing JS libraries or debugging
creates an autocomplete form with the class "birth-state" and the placeholder "Which state were you born in?", where the autocomplete options are the names of any #state records found ~~~ search [#state name] commit [#ui/autocomplete #birth-state placeholder: "What state were you born in?" | completion: [text: name]] ~~~ Add some states ~~~ commit [#state name: "PA"] [#state name: "CA"] [#state name: "OH"] [#state name: "SC"] ~~~
Note about autocomplete: #ui/autocomplete has a set of events that it emits and responds to. Other components may end up implementing these same events in the future, but they are currently exclusive to #ui/autocomplete.
#ui/event/clear - clears the specified autocomplete input field
Input
  • autocomplete - the autocomplete element to clear
clears an autocomplete field if it loses focus ~~~ search autocomplete = [#ui/autocomplete] [#html/event/blur element: [#ui/autocomplete/input autocomplete]] commit [#ui/event/clear autocomplete] ~~~
#ui/event/open - monitors for the autocomplete dropdown list opening; must be used only with commit if searching with this tag
Input
  • autocomplete - the autocomplete being opened
changes the font color of the autocomplete input to red when the list is opened; the color will not revert once the menu is closed unless another block is specifically written to do so ~~~ search autocomplete = [#ui/autocomplete] input = [#ui/autocomplete/input autocomplete] [#ui/event/open autocomplete] commit input.style <- [color: #ff0000] ~~~
#ui/event/close - monitors for the autocomplete dropdown list closing; must be used only with commit if searching with this tag
Input
  • autocomplete - the autocomplete being closed
changes the font color of the autocomplete input to black when the list is closed; reverts the change in the example for #ui/event/open ~~~ search autocomplete = [#ui/autocomplete] input = [#ui/autocomplete/input autocomplete] [#ui/event/close autocomplete] commit input.style <- [color: #000000] ~~~
#ui/event/select - monitors for an autocomplete option being selected; must be used only with commit if searching with this tag
Input
  • autocomplete - the autocomplete being closed
as a follow-up to the #ui/autocomplete example, this waits for the user to pick a birth state, then creates a new autocomplete tagged #birth-county to ask which county within that particular state the user was born in ~~~ search birth-state = [#ui/autocomplete #birth-state selected] selected = [#state name counties] [#ui/event/select autocomplete: birth-state] commit [#ui/autocomplete #birth-county placeholder: "Which county?" | completion: [text: counties]] ~~~
#ui/event/change - monitors for a change in the value of the autocomplete input field
Input
  • autocomplete - the autocomplete whose input field changed
when an autocomplete asking what the magic word is changes to the correct answer, adds the tag `#magic-word` to the autocomplete ~~~ search [#ui/event/change autocomplete] autocomplete = [#ui/autocomplete placeholder: "What’s the magic word?" value: "please"] bind autocomplete <- [#magic-word] ~~~

System

The system library provides various system-level utilities for Eve.

#system/timer - starts a timer at the specified resolution
Input
  • resolution - the frequency in milliseconds of the timer.
Output
  • year - the current year
  • month - the current month (1 - 12)
  • day - the current day of the month (1 - 31)
  • weekday - the current day of the week (1 - 7, where 1 is Sunday)
  • hour - the current hour (0 - 23)
  • minute - the current minute (0 - 59)
  • second - the current second (0 - 59)
  • millisecond - the current millisecond (0 - 999)
  • timestamp - the current time represented as the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC
  • tick - the number of ticks of the timer since it was created
Commits a timer that ticks every 1000 milliseconds ~~~ commit [#system/timer resolution: 1000] ~~~ Displays the current time ~~~ search [#system/timer hour minute second] bind [#ui/text text: "{{hour}}:{{minute}}:{{second}}"] ~~~

File

A library for accessing the filesystem. This library only works when Eve is run in headless mode.

#file/read - read the specified file
Input
  • path - The path of the file to be read.
  • encoding - (optional) - The encoding of the file. The default is utf-8.
Output
  • contents - The contents of the file. This attribute will have a value once the entire contents of the file are read.
  • error - If an error is encountered when attempting to read the file, it will be stored here as a #file/error.
Read a file ~~~ commit [#file/read #my-file path: "test-file.txt"] ~~~ Display the contents of the file ~~~ search [#my-file contents] commit [#console/log text: contents] ~~~
#file/write - write the specified file
Input
  • path - The path of the file to be written.
  • encoding - (optional) - The encoding of the file. The default is utf-8.
Output
  • contents - The string that will be written to the file
  • error - If an error is encountered when attempting to read the file, it will be stored here as a #file/error.
  • #file/complete - When the contents are written successfully, the record will be tagged #file/complete.
~~~ commit [#file/write path: "test-file.txt" contents: "This will be in the file"] ~~~
#file/error - stores information relating to file access errors
Output
  • code - The error code
  • message - The error message
~~~ search [#file/read path error: [code: "ENOENT"]] commit [#console/error text: "Could not file file {{path}}"] ~~~

Console

Write text to the console

#console/log - write info to the console
Input
  • text - The text to write to the console. Text will also be written to stdout.
~~~ commit [#console/log text: "Hello world!"] ~~~
#console/warn - write a warning to the console
Input
  • text - The text to write to the console.
~~~ commit [#console/warn text: "Memory is running low."] ~~~
#console/error - write an error to the console.
Input
  • text - The text to write to the console. Text will also be written to stderr.
~~~ commit [#console/error text: "Access is Denied"] ~~~