Hyperapp Freeze

A Hyperapp dispatch initializer that deep freezes the state passed to each of your actions and view, giving you an error during development if you mutate state directly. If you or someone you love comes from an imperative programming background (where you might do things like state++ instead of return state + 1) then this might be useful for you and your development team.

Perhaps you work with backend developers who are perfectly competent engineers, but need some help adjusting to writing functional state updates and stateless components. Take Emily for example: she wants to show a list of items in the view ordered by a property of the user's choosing. Her array of items in the state is in a different order so she calls sort on the array from inside the view. Now there are weird bugs introduced because the array items in the state are in a different order. Emily's friend Sam sees the bug and adds Hyperapp Freeze to their dev build to complain loudly when evil direct state mutations are made. Sam catches the source of the bug, and updates the view to copy the array items before sorting them based on the user's preferences.

You might not need this

If you work on a team of seasoned functionalistas who are disciplined in immutability and don't need training wheels then Hyperapp Freeze is not meant for you. This is intended only for use in dev when you want to enforce no mutations as strictly as using a purely functional language like Elm would. The reasons you would want this vary from functional philosophical dogma to simple/predictable testing/debugging to avoiding real bugs in production caused by reckless mutation. This does come with a performance hit, so please ensure you are not using it in your production builds.

Installation

Node.js

Install with npm / Yarn.

npm i hyperapp-freeze

Then with a module bundler like rollup or webpack use as you would anything else.

import freeze from "hyperapp-freeze";

Or using require.

const freeze = require("hyperapp-freeze");

Browser

Download the minified library from the CDN.

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

You can find the library in window.hyperappFreeze.

Usage

app({
  init,
  view,
  node,
  dispatch: freeze
});

And your state is now frozen! ❄️

License

Hyperapp Freeze is MIT licensed. See LICENSE.