Hyperapp-moisturize NPM

Moisturize your app today!

Don't we all just love the word moist? :joy:

Apprently not, but we also cringe at dynamically upgrading immutable stores.

So I present: hyperapp-moisturize :tada:

After much deliberation on the Hyperapp repo itself (Dynamic actions: How to add new actions at runtime? #533) we decided that a HOA (Higher Order App) was the way to go for Dynamically loading anything (focus on actions) into a Hyperapp.

Polyfills for Production

Please use a polyfill for Object.assign in production when using this package :pray:

The idea is that if you need to dynamically import, or if you are routing, you should already be using webpack or rollup/parcel (no dynamic import) for your app anyways :guitar:

Install

CDN:

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

console.log(hyperappMoisturize);
console.log(window.hyperappMoisturize);

Node:

npm install --save hyperapp-moisturize

Purpose

To dynamically change the state / actions / root view of your app :smile:

If you read this issue you will discover that there is more to this type of HOA than just dynamic actions :pray:

Caveats

This just means that for people building out dev tools like hyperapp-logger or hyperapp-redux-devtools need to know:

we could have the dev tools look for typeof payload.action === 'function' && payload.data and then expand the payload so dynamic actions look normal

Not a big deal :smile:

I also add a property to the updated actions .moisturizedOriginalName for dev tools to look out for.

Eventually we will figure out a convention :joy:

How to use

Assuming you have dynamic imports already set up in your project

import moisturize from 'hyperapp-moisturize';

const main = moisturize(app)(state, actions, view, document.body);

import('./thing.js')
  .then(({ state: newState, actions: newActions, view: newView }) => {
    main.updateApp({ newState, newActions, newView });
  });

That's it. Bam!

You don't have to pass all three options for it to work:

// JUST ONE

main.updateApp({ newActions });

// OR TWO

main.updateApp({ newState, newActions });

// OR THREE

main.updateApp({ newState, newActions, newView })