soursop

soursop

A small reactive tool for rich web pages

Instalation

Local

Via NPM:

npm i soursop

Via Yarn:

yarn add soursop

CDN

NPM version

<script src="https://cdn.jsdelivr.net/npm/soursop"></script>

GitHub (dev) version

<script src="https://cdn.jsdelivr.net/gh/natanfeitosa/soursop@HEAD/dist/soursop.iife.js"></script>

Quickstart

We can create minimal app using cdn like this

<div id="app"></div>
<!-- Load Soursop -->
<script src="https://cdn.jsdelivr.net/npm/soursop"></script>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//@jsx soursop.createElement
//@jsxFrag soursop.Fragment

function Counter() {
  const [count, setCount] = soursop.useState(0)
  return (
    <>
      <h1>Counter {count}</h1>
      <button onClick={() => setCount(count + 1)}>Click here</button>
    </>
  )
}

const container = document.querySelector('#app')
soursop.render(<Counter/>, container)
</script>

We can also use lifecycle hooks like onCreated or onUnmounted.

The signature of all lifecycle hooks looks like this:

onLifecycleHook(callback: (() => void)): void

The currently implemented hooks are:

• onCreated and onBeforeMount - Called after soursop acquires the component structure
• onMounted - Called only after first mounting the component to the DOM
• onBeforeUpdate - Called before the component is updated in the DOM
• onUpdated - Called after the component is updated in the DOM
• onBeforeUnmount - Called before the component is removed from the DOM
• onUnmounted - Called after the component is removed from the DOM