jetstart

Small, simple, functional JavaScript library for building web interfaces.

Jetstart integrates lit-html, page.js, and statezero.

See the jetstart-boilerplate project to get started.

Getting Started

Install from npm.

npm install jetstart --save

Jetstart is packaged using the Universal Module Definition pattern, so it can be loaded in various environments:

Browser Global

<script src="./node_modules/jetstart/dist/jetstart.js"></script>
<script>
  const { action, router, view } = window.jetstart;
</script> 

ES6 Module

import { action, router, view } from 'jetstart';

Node

const { action, router, view } = require('jetstart');

Concepts

Views

Views are invoked with a context argument, which can be destructured like so:

view(({ render, state }) => render`${state}`);

The context object contains all of the names exported by lit-html, including all of its directives, as well as a few Jetstart-specific properties:

Name	Type	Description
html	Function	Wraps lit-html's html() to add support for Jetstart views
render	Function	Views in jetstart typically return the result of calling render on a tagged template literal
repeatView	Function	Like repeat, but called with a function that returns a view instead of a template
state	Object	The result of calling statezero's getState() function

Views can also accept arbitrary parameters, such as the text parameter of the span view below:

import { renderView, view } from 'jetstart';
 
const span = view(({ render }, text) => render`<span>${text}</span>`);
 
const header = view(({ render }, left, right) => render`<h1>${span(left)} ${span(right)}</h1>`);
 
renderView(header('hello', 'world'), document.body);

See lit-html for more information.

State

Jetstart uses statezero to manage a single, global, immutable state graph. Changes to state can be applied by calling commit(newState), which causes all views to be (efficiently) re-rendered.

import { action, renderView, view } from 'jetstart';
 
const time = view(({ render, state }, placeholder) => render`<time>${state.time || placeholder}</time>`);
 
const updateTime = action(({ commit, state }) => {
  state.time = new Date();
  commit(state);
});
 
renderView(time('Loading...'), document.body);
 
setInterval(updateTime);

See statezero for more information.

Routing

import { router, view } from 'jetstart';
 
const foo = view(({ render }) => render`<h1>foo</h1><a href="/bar">bar</a>`);
 
const bar = view(({ render }) => render`<h1>bar</h1><a href="/foo">foo</a>`);
 
router(document.body, ['/', '/foo'], ['/foo', foo], ['/bar', bar]).start();

See page.js for more information.

Developing

npm install
npm run build