# hyperapp-snapshot

> Take and reproduce a snapshot of a hyperapp as a JSON.

Latest version **0.1.0** (published 2022-01-13) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install hyperapp-snapshot
pnpm add hyperapp-snapshot
yarn add hyperapp-snapshot
bun add hyperapp-snapshot
```

## 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.1.0 |
| Published | 2022-01-13 |
| First published | 2022-01-13 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 15.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | YAMAMOTO Yuji |
| Maintainers | igrep |
| Keywords | hyperapp, debug |

## Links

- npm: https://www.npmjs.com/package/hyperapp-snapshot
- Repository: https://github.com/igrep/hyperapp-snapshot
- Homepage: https://github.com/igrep/hyperapp-snapshot#readme
- Issues: https://github.com/igrep/hyperapp-snapshot/issues
- npm.io page: https://npm.io/package/hyperapp-snapshot

## Dependencies (1)

- [hyperapp](https://npm.io/package/hyperapp.md) ^2.0.20

## Alternatives

- [cli-color](https://npm.io/package/cli-color.md) — 3.4M weekly downloads
- [log](https://npm.io/package/log.md) — 1.3M weekly downloads
- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [logstash-client](https://npm.io/package/logstash-client.md) — 4.5K weekly downloads
- [@nocobase/plugin-logger](https://npm.io/package/@nocobase/plugin-logger.md) — 2.0K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2022-01-13

## README

# hyperapp-snapshot

Take and reproduce a snapshot of a hyperapp state as a JSON. Provides `wrapView` function to wrap your hyperapp application's `view` function to append two buttons to the view: save and load the state of the application as a JSON file.

## Example

[Run on Stackblitz](https://stackblitz.com/edit/typescript-rmfwbs?file=index.ts)

```ts
import { h, text, app } from 'hyperapp';
import * as Snapshot from './hyperapp-snapshot';

const AddTodo = (state) => ({
  ...state,
  value: '',
  todos: state.todos.concat(state.value),
});

const NewValue = (state, event) => ({
  ...state,
  value: event.target.value,
});

const view = ({ todos, value }) =>
  h('main', {}, [
    h('h1', {}, text('To do list')),
    h('input', { type: 'text', oninput: NewValue, value }),
    h(
      'ul',
      {},
      todos.map((todo) => h('li', {}, text(todo)))
    ),
    h('button', { onclick: AddTodo }, text('New!')),
  ]);

app({
  init: { todos: [], value: '' },
  view: Snapshot.wrapView(view),
  /* Or else:
  view: Snapshot.wrapView(view, JSON.parse)
  // You can optionally pass a JSON decoder function to convert the loaded
  // JSON string into the application's state type.
  */
  node: document.getElementById('app'),
});
```

NOTE: Modified from the example in [the README of hyperapp](https://github.com/jorgebucaran/hyperapp/blob/f9518be1ada51ae993b062eac264efa25a8cd16c/README.md).

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