A debugger for your Hyperapp applications.
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.
If you are debugging Hyperapp V1 applications, check out the legacy debugger.
Install with npm or Yarn.
Then with a module bundler like Rollup or Webpack, use as you would anything else.
import { app, h } from 'hyperapp';
import withDebug from 'hyperapp-debug';
Or with <script type="module">
and unpkg:
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, and it will be globally available through the window['hyperapp-debug'].default object. hyperapp-debug supports all ES5-compliant browsers, including Internet Explorer 10 and above.
<head>
<script src="https://unpkg.com/hyperapp"></script>
<script src="https://unpkg.com/hyperapp-debug"></script>
</head>
<body>
<script>
const { app, h } = window.hyperapp;
const withDebug = window['hyperapp-debug'].default;
// Your code here...
</script>
</body>
Use debug to wrap Hyperapp's app function.
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.
For those coming from the elm community, you may notice much inspiration from Elm's time-travelling debugger ❤️.
Check out the CONTRIBUTING.md guidelines for more information.
Hyperapp Debug is MIT licensed. See LICENSE.md.