// CHEATSHEET
import { // rendering
render, // render(thing, targetEl=document.body, {clear:false, relative:false}) Component, // const comp = Component(Fancy, {children:[4,5,6]})
// reactivity
signal, // const [read, write] = signal(initialValue)
root, // root(fn)
effect, // effect(fn)
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)
ready, // ready(fn)
context, // const use = Context({}); let 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
addEventListener, // const off = addEventListener(el, 'click', fn)
removeEventListener, // const on = removeEventListener(el, 'click', fn)
// components
Pota, // class MyC extends Pota { render(props){} ready(){} cleanup(){} } 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) === ()=>props.children
markComponent, // markComponent(()=> <b>this doesnt track</b>)
isComponent, // isComponent(fn) // true for non-tracking components
isReactive, // isReactive(fn) // true for signals
// props
ref, // const button = ref(); <div ref={button}.. /> effect(()=>button()) setAttribute, // setAttribute(node, 'data-active', signal, ns)
setProperty, // setProperty(node, 'hidden', signal)
setBool, // setBool(node, 'disabled', signal)
// css
setStyle, // setStyle(node, 'color', signal)
setClass, // setClass(node, 'selected', signal)
css, // css`button { padding: ${props.padding} }` // CSSStyleSheet propsPlugin, // propsPlugin('red', function(node, propName, propValue, props){node.style.color = 'red'}) <div red/>