Pico-web NPM | npm.io

pico-web

reactive

Holds a reactive reference to a value.

const [num, setNum] = value(0)
num() // 0
setNum(1) // num() === 1
setNum(num => num + 1) // num() === 2

Computations, such as effect will only rerun inside a scope.

const [num, setNum] = value(0)
effect(() => {
  console.log("num updated to", num())
})
// first run: num updated to 0
setNum(1) // num updated to 1
setNum(1337) // num updated to 1337

const [props, setProps] = value({ likes: 0 })
effect((prevProps) => {
  let curProps = props()
  console.log(
    "likes changed from", 
    prevProps.likes, 
    "to",
    curProps.likes
  )
  return curProps
}, props())

setProps((props) => {
  props.likes++;
  return props;
})
// likes changed from 0 to 1

Updates the Computations value when a value is updated. computeds are also observable by other Computations.

const [num, setNum] = value(1)
const double = computed(() => num() * 2)

double() // 2

setNum(2)
num() // 2
double() // 4

interface Action {
  type: "ADD" | "SUB"
  amount: number;
}

const [amount, reduce] = reducer((current, action: Action) => {
  switch (action.type) {
    case "ADD":
      current += action.amount
      break
    case "SUB":
      current -= action.amount
      break;
  }
  return current
}, 0)

reduce({ type: "ADD", amount: 1 })
amount() // 1
reduce({ type: "SUB", amount: 2 })
amount() // -1

Holds all Computations, effects and other reactive variations, stops them as the scope gets disposed.

const el = scope(() => {
  const [text, setText] = value("Hello World"),
        el = document.createElement("div")

  // update elements content on every update
  effect(() => {
    el.textContent = text()
  })

  // update value every second
  setInterval(() => {
    setText((text) => {
      text += "!"
      return text
    })
  }, 1000)

  return el
})

document.body.appendChild(el)

Adds an error-handler function to the current scope, which will run when an Error occurs.

Adds a cleanup function to the current scope which will run when the scopes disposed.

Can be used to not trigger a Computation.

const [num, setNum] = value(0)
effect(() => {
  skip(num) // or skip(() => { num() ... })
  console.log("I will run only once :(")
})

setNum(1) // updates only value but does not trigger the effect

hooks

Runs a function once when a component (via scope) is connected.

Alias for onCleanup, to be used for Components.

Runs a function on every requested frame. Will be stopped when the scope is disposed. (Uses onConnect and onDisconnect internally)

Runs a function every timeout millisecond, interval will be cleared automatically when the scope is disposed.

Runs a function after timeout milliseconds, timeout will be cleared automatically when the scope is disposed.

expressions

Replaces targets content with the fns content. fn will run inside a scope.

Returns a function that can be used for dynamic attributes.

let [attr, setAttr] = value()
let wholeAttr = tokens("static", attr)
wholeAttr() // "static"
setAttr("dynamic")
wholeAttr() // "static dynamic"

element

Creates an Element based on the input.

element("div") // HTMLDivElement
element("svg") // SVGSVGElement

let Com = (props, ...children) => 
  element("span", { 
    ...props, 
    id: "com"
  }, ...children)

element(Com, { class: "app" }, "Hello") // HTMLSpanElement

let div = <div id="app" /> // element("div", { id: "app" })

// Example from above
let el = (
  <Com class="app">
    Hello World
  </Com>
) // element(Com, { class: "app" }, "Hello World")

Returns an Array of appendable nodelike Elements.

pico-web

reactive

value(initial)

effect(fn, initial)

computed(fn, initial)

reducer(fn, initial)

scope(fn)

onError(fn)

onCleanup(fn)

skip(fn)

hooks

onConnect(fn)

onDisconnect(fn)

useAnimationFrame(fn)

useInterval(fn, timeout)

useTimeout(fn, timeout)

expressions

connect(target, fn)

tokens(...tokens)

element

element(htmlTag | svgTag | fn, props, ...children)

toChildArray(...nodes)