Neverland 🌈🦄

Photo by Cosmic Timetraveler on Unsplash

Hooks via lighterhtml

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

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

render(document.body, Counter);
// alternatively
// document.body.appendChild(Counter());

As React Hooks were born to simplify some framework pattern, Neverland goal is to simplify lighterhtml usage, in a virtual component way, through the mighty dom-augmentor.

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

V2 Breaking Changes

• there is no default exported, but neverland named export
• there are still more DOM trashes than desired, but it works, and the DX is awesome, as well as performance anyway 😊

Available Renders

Both html and svg renders are exposed via the neverland module, and you must use the render utility

Available Hooks

• Basic Hooks
  • useState
  • useEffect
  • useContext, which can be defined via createContext(value)
• Additional Hooks
  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useLayoutEffect

About useImperativeMethods

This hook is strictly React oriented with no meaning in current dom-augmentor world.

How To ...

Common ways via bundlers or CDNs:

• globally, as const {default: neverland, html, useState} = window.neverland through script with source https://unpkg.com/neverland
• CJS via const {default: neverland, html, useState} = require('neverland')
• ESM with bundlers via import neverland, {html, useState} from 'neverland'
• pure ESM via import neverland, {html, useState} from 'https://unpkg.com/neverland?module'

If you use a bundler you can simply install neverland via npm or yarn.

It is also possible to use it in browsers via https://unpkg.com/neverland:

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

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

You can, of course, 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.