How to use a component built with hyperapp-nestabel as Lazy Components?

It is possible to make components have non global state and actions by using hyperapp-nestable.

import nestable from 'hyperapp-nestable'
import { h, app } from 'hyperapp'

const state = {value: 0}
const actions = {
  up: () => ({value}) => ({value: value + 1}),
  down: () => ({value}) => ({value: value - 1})
}
const view = (state, actions) => (props, children) =>
  <div>
    <h1>{props.name}</h1>
    <p>{children}</p>
    <button onclick={actions.up}>+</button>
    <p>state.value</p>
    <button onclick={actions.down}>-</button>
  </div>
const Counter = nestable(state, actions, view)

app({}, {}, () =>
  <div>
    <Counter name='sosukesuzuki'>こんにちは</Counter>
  </div>)

We can use Counter as a component.

We cannot use it as Lazy Components...

However, we can not use Counter as Lazy Components.(please look at this to understand Lazy Components.) I pondered to use it... But, I implemented it frankly, so please let me know if you know a better way.

const state = {value: 0}
const actions = {
  up: () => ({value}) => ({value: value + 1}),
  down: () => ({value}) => ({value: value - 1})
}
const view = (props, children) => (globalState, globalActions) => (state, actions) =>
  <div>
    <h1>{props.name}</h1>
    <p>{children}</p>
    <button onclick={actions.up}>+</button>
    <p>state.value</p>
    <button onclick={actions.down}>-</button>
  </div>

const LazyConuter =
  (props, children) =>
    (globalState, globalActions) =>
      nestable(state, actions, () => view(props, children))

This makes it possible to treat Counter as Lazy Components.

AUTHOR

READ NEXT

Boostlog is an online community for developers
who want to share ideas and grow each other.

Delete an article

Deleted articles are gone forever. Are you sure?