# ayvar

> JavaScript framework for building web applications.

Latest version **0.2.1** (published 2018-12-21) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2018-12-21 |
| First published | 2018-07-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Nenad Vujicic |
| Maintainers | nndv |
| Keywords | ayvar, frontend, framework, virtual dom, vdom, events, router |

## Links

- npm: https://www.npmjs.com/package/ayvar
- Repository: https://github.com/nndv/ayvar
- Issues: https://github.com/nndv/ayvar/issues
- npm.io page: https://npm.io/package/ayvar

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 0.2.1 (latest) — 2018-12-21
- 0.2.0 — 2018-09-07
- 0.1.0 — 2018-09-04
- 0.0.1 — 2018-07-22

## README

<p align="center"><img width="250" src="https://user-images.githubusercontent.com/9033390/45083249-96517200-b0fb-11e8-81ef-9c16124b9a13.png" alt="Ayvar" /></p>

<p align="center">Ayvar is a JavaScript library for building web applications.</p>

[![npm version](https://badge.fury.io/js/ayvar.svg)](https://badge.fury.io/js/ayvar)

## Example

```jsx
import Ayvar from 'ayvar';

const App = (props, { state, setState }) => {
  const { count = props.initCount } = state;

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={down}>-</button>
      <button onClick={up}>+</button>
    </div>
  );

  function down() {
    setState({ count: count - 1 });
  }

  function up() {
    setState({ count: count + 1 });
  }
};

Ayvar.render(<App initCount={0} />, document.getElementById('app'));
```

## Stateless Component

```jsx
const Hello = props => <h1>Hello, {props.name}</h1>;
```

- **props**: The props that were defined by the caller of this component.

## Stateful Component

```jsx
const Counter = (props, { state, setState }) => {
  const { count = 0 } = state;

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>+</button>
    </div>
  );

  function increment() {
    setState({ count: count + 1 });
  }
};
```

- **state**: The state contains data specific to this component that may change over time.
- **setState**: Used to update state and user interface.

## Component Lifecycle

```jsx
const Clock = (props, { state, setState, self: clock }) => {
  const { date = new Date() } = state;

  clock.onCreate = () => {
    clock.timerID = setInterval(tick, 1000);
  };

  clock.onDestroy = () => {
    clearInterval(clock.timerID);
  };

  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {date.toLocaleTimeString()}</h2>
    </div>
  );

  function tick() {
    setState({
      date: new Date()
    });
  }
};
```

- **onCreate**: This event is fired after the component is created and attached to the DOM.
- **onUpdate**: This event is fired every time the component is updated. Previous props are being passed to the handler.
- **onDestroy**: This event is fired when the component is removed from the DOM.

## Installation

<pre>
npm i <a href=https://www.npmjs.com/package/ayvar>ayvar</a>
</pre>

## License

Ayvar is MIT licensed. See [LICENCE](LICENCE.md).

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