# soursop

> A small reactive tool for rich web pages

Latest version **0.4.2** (published 2023-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install soursop
pnpm add soursop
yarn add soursop
bun add soursop
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.2 |
| Published | 2023-04-01 |
| First published | 2023-02-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 79.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Natan Feitosa |
| Maintainers | natanfeitosa |
| Keywords | reactive, vue, front-end, vdom, ui, react |

## Links

- npm: https://www.npmjs.com/package/soursop
- Repository: https://github.com/natanfeitosa/soursop
- Homepage: https://github.com/natanfeitosa/soursop/#readme
- Issues: https://github.com/natanfeitosa/soursop/issues
- npm.io page: https://npm.io/package/soursop

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [@types/node](https://npm.io/package/@types/node.md) ^18.0.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.2 (latest) — 2023-04-01
- 0.4.1 — 2023-03-23
- 0.4.0 — 2023-03-15
- 0.3.0 — 2023-02-19
- 0.2.0 — 2023-02-11
- 0.1.0 — 2023-02-08

## README

# soursop

<p align="center">A small reactive tool for rich web pages</p>
<div align="center">
  <img alt="npm" src="https://img.shields.io/npm/v/soursop">
  <img alt="npm" src="https://img.shields.io/npm/dm/soursop">
  <img alt="NPM" src="https://img.shields.io/npm/l/soursop">
  <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/min/soursop">
  <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/natanfeitosa/soursop">
  <img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/soursop">
</div>

## Instalation

### Local

Via NPM:
```bash
npm i soursop
```
Via Yarn:
```bash
yarn add soursop
```

### CDN

NPM version
```html
<script src="https://cdn.jsdelivr.net/npm/soursop"></script>
```

GitHub (dev) version
```html
<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
```html
<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:
```javascript
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

---
_Source: https://npm.io/package/soursop · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._