Archive

Eve Alpha v0.3 preview 2

Corey Montella - 18 Apr 2017

(Eve is a new programming language, and this is our development blog. If you’re new to Eve, start here)

Now that we’ve got the v0.3 preview out the door, we’re ramping up to a more regular release schedule. In that spirit, today we’re releasing the second preview of Eve v0.3, which largely improves built in watchers, but contains some other goodies as well.

If you want to try out this version, we have two routes:

  • If you’re new to Eve and want to start a new Eve application, you should follow the instructions at eve-starter. This repository contains everything you need to start an Eve project, and some small examples demonstrating the JavaScript DSL.
  • If you’d like to integrate Eve into an existing JavaScript project, download the npm package. You can find instructions here.

If you’re used to running Eve, you may be looking for the editor and Eve syntax. We’re not finished working on those yet, so they are not included in this preview. If you’d like to use those, please stick with the v0.2.3 branch, and we’ll keep you updated as to when those make it into the main branch. There will be breaking changes though, so any code you write now will have to be rewritten to a degree (for instance, some tags will be changing and databases are being removed from the language.)

What’s new?

Let’s take a look at some of the bigger improvements.

Embedding Eve Elements in Your App

You can now embed Eve rendered elements into your non-Eve application. This is accomplished with the addExternalRoot(tag:string, element:HTMLElement) function, which registers an arbitrary root element to serve as parents to Eve-rendered elements. This block creates a record tagged “my-root” in Eve:

import {Program} from "witheve";

let program = new Program("my program");
let htmlWatcher = program.attach("html");

let someElement = document.querySelector("#eve-wrapper");
htmlWatcher.addExternalRoot("my-root", someElement);

Now you can access that element from within Eve, giving you the ability to use it as a parent for child elements rendered by Eve. This block searches for that record, and that adds a div with some text as a child:

program.bind("render into #eve-wrapper", ({find, record}) => {
  let my_root = find("my-root");
  return [
    my_root.add("children", [
      record("html/element", {tagname: "div", text: "hello, world!"})
    ])
  ];
})

This scenario works well if you have an already existing application, and you’d like to use Eve to render certain elements.

Watchers

We’ve added and streamlined various watchers that interact with the browser. We’re now at the point where v0.3 is caught up to v0.2.x in terms of the available watchers. Additionally, we’ve added support for more DOM events and triggers in the HTML watcher:

  • button attribute to all mouse events (values left, right, middle, 4, and 5.
  • double-click, mouse-down, and mouse-up events.
  • html/listener/context-menu tag. If an element with this tag is right clicked, the default context menu will not be shown, allowing you to render your own. You can grab page-relative mouse position off of any of the mouse events as page-x and page-y.
  • key-press event, with support for printable characters and the following control keys: tab, enter, shift, control, alt, escape, left, up, right, down, and meta.
  • focus and blur events.

Standard Library

The first v0.3 preview revamped the function definition interface, but still had some limitations. Now you can create expressions with multiple outputs, so we are in a position to bring v0.3 back to parity with v0.2.