Zacharias Enochsson zaceno

A frequently asked question

Just about every new user of hyperapp at some point asks the question: "How can I make components with local state?"

In React, for example, there are object-components with render methods, and .setState(). In Vue.js, every component has its .props. Such components encapsulate state and behavior locally, keeping it out of the rest of the app (because it's only relevant internally to the component).

But Hyperapp's design is clear: there is one single state store, and components are purely functional. So components with local state are off the table ... right?

	import Html exposing (Html)
	import Html.Attributes exposing (style)
	import Svg exposing (Svg, svg, rect)
	import Svg.Attributes exposing (x, y, width, height, fill, viewBox)
	import Array exposing (Array)
	import Keyboard exposing (presses, KeyCode)
	import Random
	import Time exposing (Time, second)

	main = Html.program

	/*

	In the following examples I will show how an app could be written in
	progressively improved potential hyperapp versions

	It may not always look like an improvement. I'd have to use an actually
	complicated app as an example to really prove the benefit. So just use
	your imagination :)

	But first: the basic app I will be successively improving on. This should

	A "component": (state, actions, components, props, children) -> vnode
	Where:
	- state: the state of the app a component belongs to
	- actions: the actions-collection of the app the component belongs to
	- components: the components-collection of the app the component belongs to (will contain the component itself)
	- props: {...}
	- children: [vnodes]

	Instantiate app with:

	function embed (opts) {
	return {
	tag: 'div',
	children: [],
	data: {
	key: opts.key,
	oncreate: el => setTimeout(_ => {
	const fakeRoot = document.createElement('div')
	opts.root = fakeRoot
	app(opts)


	const scopedUpdate = (scope, state, update) => val => update({[scope]: Object.assign(state[scope], val)})

	const scopedAction = function (scope, fn) {
	return function (state, actions, data) {
	return function (update) {
	const retVal = fn(state[scope], actions[scope], data)
	const sup = scopedUpdate(scope, state, update)
	if (typeof retVal === 'function') return retVal(sup)
	else return sup(retVal)

	/*

	This function lets you define components you can use in your views, which are
	stateful, i e, they embed their own hyperapp app.

	The idea is to let you build apps according to what I, for lack of better terms,
	call the "Vue architecture" -- where your app is built up of a tree of stateful
	components. Parent components communicate with children by the props passed in
	the view. Children may communicate back to parents via events the parents listen
	to.

	window.arrayActions = (name, actions) => {
	const mapList = `_al_${name}`
	const mapEach = `_ae_${name}`
	const mapItem = `_ai_${name}`
	const defs = actions({
	list: fn => (_, actions) => {actions[mapList](fn)},
	each: fn => (_, actions) => {actions[mapEach](fn)},
	item: (i,fn) => (_, actions) => {actions[mapItem]([i, fn])},
	})
	defs[mapList] = fn => state => ({[name]: fn(state[name])})