Neverland 🌈🦄

 

!Cosmic Timetraveler
^{Photo by Cosmic Timetraveler on Unsplash}

- - -

Hooks via lighterhtml

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

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

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 😊

$3

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

$3

* 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.

$3

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:

`js
// 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.