https://github.com/selfup/hyperapp-moisturize

HOA for Dynamically upgrading Hyperapps (HMR/Dynamic Import/Whatever)
https://github.com/selfup/hyperapp-moisturize

Last synced: 28 days ago
JSON representation

HOA for Dynamically upgrading Hyperapps (HMR/Dynamic Import/Whatever)

• Host: GitHub
• URL: https://github.com/selfup/hyperapp-moisturize
• Owner: selfup
• License: mit
• Created: 2018-01-08T14:34:54.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-07-14T14:41:19.000Z (over 6 years ago)
• Last Synced: 2024-09-26T03:10:20.372Z (about 1 month ago)
• Language: JavaScript
• Homepage: https://codepen.io/selfup/pen/gooojE?editors=0010
• Size: 92.8 KB
• Stars: 14
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• hyperawesome - selfup/hyperapp-moisturize - HOA for Dynamically upgrading Hyperapp applications. (Utilities V1)

README

        
_[Hyperapp](https://github.com/hyperapp/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](https://github.com/hyperapp/hyperapp/issues/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: 

```html

```

```js

console.log(hyperappMoisturize);

console.log(window.hyperappMoisturize);

```

Node:

```bash

npm install --save hyperapp-moisturize

```

### Purpose

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

If you read [this issue](https://github.com/hyperapp/hyperapp/issues/533) you will discover that there is more to this type of HOA than just dynamic actions :pray:

[**Caveats**](https://github.com/hyperapp/hyperapp/issues/533#issuecomment-355764579)

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_

```js

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:

```js

// JUST ONE

main.updateApp({ newActions });

// OR TWO

main.updateApp({ newState, newActions });

// OR THREE

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

```

### Example CodePen

https://codepen.io/selfup/pen/gooojE?editors=0010