// CHEATSHEET
import { // rendering
render, // render(thing, target=document.body, {clear:false, relative:false}) Component, // const comp = Component(Fancy, {children:[4,5,6]})
// reactivity
signal, // const [read, write, update] = signal(initialValue)
root, // root(fn)
effect, // effect(fn)
on, // on(fnThatTracks, fnThatDoesntTrack)
syncEffect, // syncEffect(fn)
asyncEffect, // asyncEffect((previousEffect) => await previousEffect)
memo, // memo(fn)
writable, // const m = writable(fn); m(true) // now "m" is "true" till memo reruns
batch, // batch(fn)
untrack, // untrack(fn)
cleanup, // cleanup(fn)
cancelCleanup, // cancelCleanup(fn)
ready, // ready(fn)
context, // const use = Context({}); const value = use(); use({newValue}, fn) map, // map([1, 2, 3], (item, index) => [item, index])
owned, // const ownedFn = owned(fn); ownedFn({foo:"bar"}) withValue, // withValue(signal, value => console.log(value))
// events
addEvent, // const off = addEvent(el, 'click', fn)
removeEvent, // const on = removeEvent(el, 'click', fn)
// components
Pota, // class MyC extends Pota { constructor(props){} ready(){} cleanup(){} render(){} } lazy, // const Com = lazy(()=>import('yey.jsx'), fallback) <Comp some={true} fallback="oops"/> resolve, // const cache = resolve(() => props.children)
toHTML, // const nodes = toHTML(props.children) // node|node[]
// components utilitites
makeCallback, // makeCallback(props.children) === (...args)=>props.children
markComponent, // markComponent(()=> <b>this doesnt track</b>)
isComponent, // isComponent(fn) // true for non-tracking components
// props
ref, // const button = ref(); <div use:ref={button}.. /> effect(()=>button()) setAttribute, // setAttribute(node, 'data-active', signal, ns)
setProperty, // setProperty(node, 'hidden', signal)
// css
setStyle, // setStyle(node, 'color', signal)
setClass, // setClass(node, 'selected', signal)
propsPlugin, // propsPlugin('red', function(node, propName, propValue, props){node.style.color = 'red'}) <div red/> propsPluginNS, // propsPluginNS('color', function(node, propName, propValue, props){node.style.color = propValue}) <div color:red/>