React like Hooks for hyperHTML
Clone or download
Andrea Giammarchi
Andrea Giammarchi 0.3.3
Latest commit 7ea86f7 Nov 15, 2018
Permalink
Failed to load latest commit information.
cjs renamed layout to mutation Nov 15, 2018
esm renamed layout to mutation Nov 15, 2018
img Initial commit Nov 5, 2018
test updated hyperhtml to latest Nov 15, 2018
.gitignore Initial commit Nov 5, 2018
.npmignore Initial commit Nov 5, 2018
.travis.yml Initial commit Nov 5, 2018
README.md better README Nov 15, 2018
index.js updated hyperhtml to latest Nov 15, 2018
min.js updated hyperhtml to latest Nov 15, 2018
package.json 0.3.3 Nov 15, 2018
rollup.config.js Initial commit Nov 5, 2018

README.md

Neverland 🌈🦄

Cosmic Timetraveler Photo by Cosmic Timetraveler on Unsplash

Hooks for hyperHTML

import stardust, {html, useState} from 'neverland';

const Counter = stardust(() => {
  const [count, setCount] = useState(0);
  return html`
  <button onclick=${() => setCount(count + 1)}>
    Count: ${count}
  </button>`;
});

document.body.appendChild(Counter());

As React Hooks were born to simplify some framework pattern, Neverland goal is to simplify some hyperHTML pattern, in a virtual component way.

See what I did there? React components' hooks are based on virtual DOM while hyperHTML neverland's DOM hooks are based on virtual components.

Available Renders

Both html and svg renders are exposed via the neverland module.

Available Hooks

  • const [value, setValue] = useState(initialValue), similarly to React useState, will automatically refresh the view whenever setValue(newValue) is invoked, simplifying the manual update() or automatic render() call, usually needed by hyperHTML views, Custom Elements, or components.
  • const [state, dispatch] = useReducer(reducer, initialState), similarly to React useReducer, will automatically refresh the view whenever dispatch({any: 'value'}) would reduce the state.
  • useEffect(callback), similarly to React useEffect, to asynchronously invoke callbacks once all eventual states and reducers have been called. Differently from React, it currently doesn't accept a second parameter.
  • useMutationEffect(callback), similarly to React useMutationEffect, to synchronously invoke callbacks after any state changed.
  • const {current: value} = useRef(initialValue), similarly to React useRef, it will return a mutable object whose .current property is initialized to the passed initialValue argument, persist for the full lifetime of the returned view.

About Missing Hooks

At this experimental point, all hooks that are not really suggested, such useLayoutEffect, or that behave in a quite too magic way, such useMemo, are not part of this tiny hyperHTML wrapper, and also most likely not needed in a component-less hyperHTML world.

How To ...

The neverland module is a tiny wrap based on hyperHTML wire.

If you use a bundler you can simply install neverland via npm, without needing to include hyperhtml dependency.

However, it is also possible to use it via https://unpkg.com/neverland and bring it in via:

// you can import it in any scope
const {neverland, html, useState} = window.neverland;
const VirtualComp = neverland(...);

// or ...
const {default:stardust, html} = neverland;
const VirtualComp = stardust(...);

I let you choose the right export name to whatever you think would suit. As example, I've used MrSmee(...) for the test page, which you can also test it live.