Awesome
Hyperapp 1.0.1
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:
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.dataand 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 })