Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mrozbarry/hyperapp-debug

A debug HOA for hyperapp
https://github.com/mrozbarry/hyperapp-debug

debug hyperapp

Last synced: 10 days ago
JSON representation

A debug HOA for hyperapp

Host: GitHub
URL: https://github.com/mrozbarry/hyperapp-debug
Owner: mrozbarry
License: mit
Created: 2018-02-20T02:36:10.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2024-04-05T03:18:18.000Z (7 months ago)
Last Synced: 2024-10-12T23:26:38.027Z (26 days ago)
Topics: debug, hyperapp
Language: JavaScript
Size: 57 MB
Stars: 12
Watchers: 4
Forks: 0
Open Issues: 25
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md

Awesome Lists containing this project

README

        #  Hyperapp Debug

[![Mozilla Add-on](https://img.shields.io/amo/dw/hyperapp-debug-dev-tools)](https://addons.mozilla.org/en-US/firefox/addon/hyperapp-debug-dev-tools/)

[![Travis CI](https://img.shields.io/travis/mrozbarry/hyperapp-debug.svg)](https://travis-ci.org/mrozbarry/hyperapp-debug)

[![npm](https://img.shields.io/npm/v/hyperapp-debug.svg)](https://www.npmjs.com/package/hyperapp-debug)

[![Slack](https://hyperappjs.herokuapp.com/badge.svg)](https://hyperappjs.herokuapp.com "Join us")

![](./docs/firefox-screenshot.png)

A debugger for your [Hyperapp](https://github.com/hyperapp/hyperapp) applications.

## What is it

[hyperapp-debug](https://github.com/mrozbarry/hyperapp-debug) is a browser extension and higher-order app wrapper for your hyperapp applications.

It is a tool similar to redux-dev-tools or vue-dev-tools, with tighter integration to the Hyperapp paradigm.

To debug your application, you must install the browser extension. Don't worry, I don't collect any information at all, and the addon will always be free.

## Hyperapp V1

If you are debugging Hyperapp V1 applications, check out [the legacy debugger](https://github.com/mrozbarry/hyperapp-debug/tree/hyperapp-v1-debugger).

## Installation

Install with npm or Yarn.


npm i hyperapp-debug



Then with a module bundler like [Rollup](https://rollupjs.org) or [Webpack](https://webpack.js.org), use as you would anything else.

```js

import { app, h } from 'hyperapp';

import withDebug from 'hyperapp-debug';

```

Or with `` and unpkg:

```js

import { app, h } from 'https://unpkg.com/hyperapp?module=1';

import withDebug from 'https://unpkg.com/hyperapp-debug?module=1';

```

If you don't want to set up a build environment, you can download Hyperapp Debug from a CDN like [unpkg.com](https://unpkg.com/hyperapp-debug), and it will be globally available through the <samp>window['hyperapp-debug'].default</samp> object.

hyperapp-debug supports all ES5-compliant browsers, including Internet Explorer 10 and above.

```html

<head>

  <script src="https://unpkg.com/hyperapp">

  

  

    const { app, h } = window.hyperapp;

    const withDebug = window['hyperapp-debug'].default;

    // Your code here...

  

```

## Usage

Use debug to wrap Hyperapp's app function.

```js

import { app } from 'hyperapp';

import withDebug from 'hyperapp-debug';

withDebug(app)({

  init: {},

  view: () => null,

  subscriptions: () => [],

  node: document.getElementById('your-app'),

});

```

The debugger will only work if you also install the Firefox/Chrome Extension.

## History

For those coming from the elm community, you may notice much inspiration from Elm's time-travelling debugger :heart:.

## Contributing

Check out the [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines for more information.

## License

Hyperapp Debug is MIT licensed. See [LICENSE.md](LICENSE.md).

## Other similar tools

 - [hyperapp-redux-devtools](https://github.com/andyrj/hyperapp-redux-devtools)

 - [hyperapp-devtools](https://github.com/hyperstart/hyperapp-devtools)