hyper is a tiny TypeScript library designed to ease working with the DOM. hyper tries to be as simple as possible whilst maintaining good developer experience and currently features:

• Simple wrapper around native API's (DOM)
• No vDOM, all state is stored within the DOM*
• List caching

Installation

npm i @chronocide/hyper

Usage

import h from '@chronocide/hyper';

const img = h('img')({ src: '/cat.png' })(); // HTMLImageElement

document.body.appendChild(img);

List

List items can be cached using list, only updated if the data is changed; order does not matter. Data does not need to be unique, as duplicate nodes are cloned.

import type { Component } from '@chronocide/hyper';

import h, { list } from '@chronocide/hyper';

type Planet = { id: string; name: string };

const planets: Planet[] = [
  { id: 'jupiter', name: 'Jupiter' },
  { id: 'mars', name: 'Mars' },
  { id: 'pluto', name: 'Pluto' }
];

const ul = h('ul')()(); // <ul></ul>
const component: Component<Planet> = planet => h('li')()(planet.name);

const update = list<Planet>(component)(ul);
update(planets); // <ul><li>Jupiter</li><li>Mars</li><li>Pluto</li></ul>

Testing

hyper relies on the DOM, which may not always be available. In those cases, it's possible to set a custom DOM using env:

import { env } from '@chronocide/hyper';
import { JSDOM } from 'jsdom';

const dom = new JSDOM();
env.document = dom.window.document;

Examples can be found in the test files, such as hyper.spec.ts.

Development

hyper uses puppeteer for browser testing and does not install Chrome by default. To run tests, create an .env file using:

npm run env

Note: If you're running Linux, have Chrome installed in a non-standard location or wish to use a different browser, you can create the .env file yourself:

BROWSER_PATH=<path_to_browser>