Pyrolistical/index.html

## index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hyperapp Views</title>

  </head>
  <body>
    <div id="app-entry"></div>
    <script src="https://unpkg.com/hyperapp@0.15.1/dist/hyperapp.js"></script>
    <script>
      const { h, app } = hyperapp

      function Counter({count, down, up}) {
        return h("div", {}, [
          h("h2", {}, count),
          h("button", {
            onclick: down,
            disabled: count <= 0
          }, "–"),
          h("button", {
            onclick: up
          }, "+")
        ])
      }

      const counter = {
        state: {
          count: 0
        },
        actions: {
          down(state) {
            return {
              count: state.count - 1
            }
          },
          up(state) {
            // we never get the new state
            return {
              count: state.count + 1
            }
          }
        }
      }

      app({
        view(state, actions) {
          return h("main", {}, [
            h(Counter, {
              ...state.counter,
              ...actions.counter
            }),
            h("button", {
              onclick: actions.doubleUsingGlobal
            }, "Double using global action"),

            // this doesn't work
            h("button", {
              onclick: actions.counter.doubleUsingFragment
            }, "Double using fragment action")
          ])
        },
        actions: {
          doubleUsingGlobal(state, actions) {
            return {
              counter: {
                count: 2 * state.counter.count
              }
            }
          },
          // this doesn't work due to module vs fragment conflict
          counter: {
            doubleUsingFragment(state, actions) {
              return {
                count: 2 * state.count
              }
            }
          }
        },
        modules: {
          counter
        }
      }, document.getElementById('app-entry'))
    </script>
  </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Hyperapp Views</title>

	</head>
	<body>
	<div id="app-entry"></div>
	<script src="https://unpkg.com/hyperapp@0.15.1/dist/hyperapp.js"></script>
	<script>
	const { h, app } = hyperapp

	function Counter({count, down, up}) {
	return h("div", {}, [
	h("h2", {}, count),
	h("button", {
	onclick: down,
	disabled: count <= 0
	}, "–"),
	h("button", {
	onclick: up
	}, "+")
	])
	}

	const counter = {
	state: {
	count: 0
	},
	actions: {
	down(state) {
	return {
	count: state.count - 1
	}
	},
	up(state) {
	// we never get the new state
	return {
	count: state.count + 1
	}
	}
	}
	}

	app({
	view(state, actions) {
	return h("main", {}, [
	h(Counter, {
	...state.counter,
	...actions.counter
	}),
	h("button", {
	onclick: actions.doubleUsingGlobal
	}, "Double using global action"),

	// this doesn't work
	h("button", {
	onclick: actions.counter.doubleUsingFragment
	}, "Double using fragment action")
	])
	},
	actions: {
	doubleUsingGlobal(state, actions) {
	return {
	counter: {
	count: 2 * state.counter.count
	}
	}
	},
	// this doesn't work due to module vs fragment conflict
	counter: {
	doubleUsingFragment(state, actions) {
	return {
	count: 2 * state.count
	}
	}
	}
	},
	modules: {
	counter
	}
	}, document.getElementById('app-entry'))
	</script>
	</body>
	</html>