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.
npm i hyperapp-debug
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.