Preact State Machine Component

by Jason Miller

HTML

<script src="https://unpkg.com/preact"></script>
<script src="https://unpkg.com/[email protected]/dist/state-machine-component.umd.js"></script>

Babel + JSX

const { h, Component, render } = preact; /** @jsx h */

const Demo = stateMachineComponent(
	(state, action) => {
		switch (action.type) {
			case '@@INIT':return { todos: action.props.todos || [], text: '' };
			case 'ADD': return { todos: state.todos.concat(state.text), text: '' };
			case 'TEXT': return { text: action.data.target.value };
		}
	},
	({ todos, text }, action) => (
		<div>
			<h2>State Machine ToDo's</h2>
			<ul>{todos.map( todo => <li>{todo}</li> )}</ul>
			<form onSubmit={action('ADD')} action="javascript:">
				<input value={text} onInput={action('TEXT')} placeholder="Type+enter" />
			</form>
		</div>
	)
);

render(<Demo />, document.body);