Skip to content
🐣 Tiny no-framework component toolkit.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
index.js
package-lock.json
package.json

README.md

picoapp

🐣 Tiny no-framework component toolkit. 800 bytes gzipped.

Install

npm i picoapp --save

Usage

Configure your app with components. State and actions are totally optional.

import picoapp, { component } from 'picoapp'

const components = {
  counter: component(({ node, state }) => {
    node.value = state.count

    return {
      onStateChange (state) {
        node.value = state.count
      }
    }
  }),
  inc: component(({ node, actions }) => {
    node.onclick = actions.inc
  }),
  dec: component(({ node, actions }) => {
    node.onclick = actions.dec
  })
}

const state = {
  count: 0
}

const actions = {
  inc: val => state => ({ count: state.count + 1 }),
  dec: val => state => ({ count: state.count - 1 })
}

const app = picoapp(components, state, actions)

Write HTML. By default, picoapp queries the DOM for data-component attributes, but you can change this.

<input type='number' data-component='counter' />
<button data-component='inc'>Inc</button>
<button data-component='dec'>Dec</button>

Mount all components to application.

app.mount()

Other Stuff

State updates are handled via picostate, so those methods are inherited directly.

app.hydrate({ count: 5 })

app.hydrate({ count: 3 })()

app.state // { count: 3 }

You can fire actions from the app instance as well.

app.actions.inc()

If you need to add additional components, maybe asynchronously, you can use add.

app.add({
  lazyImage: component(context => {})
})

You can garbage collect old components between page transitions using unmount.

app.unmount()

If you define onUnmount methods on components, you can perform clean up the DOM or perform leave animations by returning Promises and resolving when the animation is complete.

app.add({
  slideshow: component(({ node }) => {
    const slider = new Slider(node)

    return {
      onUnmount () {
        slider.destroy()
      }
    }
  })
})

app.unmount() // slider destroyed

License

MIT License © Eric Bailey

You can’t perform that action at this time.