@hyper-views/dom
v1.5.0
Published
declarative, reactive ui
Downloads
1
Readme
@hyper-views/dom
Hyper Views DOM is a small module to write declarative, reactive UI. It shares some API with React, and is inspired by how Vue works. It is about 1.5kb when minified and compressed with gzip. I wrote it to use with Web Components because I found I needed some way to create and update HTML in shadow DOM. Since JSX is built into Babel and SWC, it is sort of a free API to use. It does not use a virtual DOM, and there is little to no reconciliation. Attributes and child nodes are updated when data changes. That's it.
examples
Here is an example on CodePen. And here is the JS from that same example to give you a small peek.
// @jsx h
import {
compute,
h,
proxy,
render,
} from "https://unpkg.com/@hyper-views/[email protected]/main.js";
const state = proxy({ count: 0 });
const incrementCount = () => state.count++;
render(
<div>
Clicks:
<button onclick={incrementCount}>{compute(() => state.count)}</button>
</div>,
document.querySelector("div")
);
exports
h and fragment
These two are what JSX will need to target. In most cases you should be able to add // @jsx h
to top of all your jsx files. You will also need // @jsxFrag fragment
if you want to use fragments. And of course h and fragment will need to be imported. Also be aware that function components are supported, but classes are not.
proxy and compute
These two are how to use the reactivity system. Used together you can create elements with attributes and children that update when an object's properties change. You call proxy with what ever object you want to be watched, then you will use compute in your jsx anywhere you want an attribute or child to be reactive.
render
You call render just like you would in React, or any other React-like framework.
browser support
This module uses Proxy which can not really be polyfilled, so keep that in mind if you need to support IE11. Also it uses WeakRef which is relatively newer, but well supported at this point.