preact-cycle
Minimal functional (-reactive) Virtual DOM rendering using Preact.
Simple Example
View this example on esnextb.in
;/** @jsx h */ const App = <div> <p>Value: value </p> <button onClick= >Increment</button> </div>; ;
To-Do List Example
A simple example, where reducers are just pure functions.
Note that TOGGLE
mutates state in-place, which works fine but is discouraged.
View this example on esnextb.in
;/** @jsx h */ const ADD = todos: todos text: '' ...state; const TOGGLE = { tododone = !tododone; return state;}; const REMOVE = todos: todos ...state; const TodoList = <div> <form onSubmit= action="javascript:"> <input value=text onInput= /> <button action="submit">Add</button> </form> <ul> todos </ul> </div>; ;
Component-Based Example
Normal preact components still work great with preact-cycle. As of v0.4
, mutate()
and mutation()
are conveniently available as context properties, which means they are automatically passed down through the VDOM tree. For pure functional components, context is simply passed as a second argument.
A component-based variant of the previous To-Do List example follows, using pure functions and context.
View this example on Webpackbin
;/** @jsx h */ /** initial data to populate the store */const INITIAL_DATA = todos: text:'Type some text' text:'...then hit [enter]' text:'Now you\'re productive!' ; /** Appends a new todo item */const ADD = todos: todos text: '' ...state; /** Remove the given todo item */const REMOVE = todos: todos ...state; /** Toggles the given todo item as done */const TOGGLE = { tododone = !tododone;}; /** a simple helper to derive a mutated value from an event */let etargetvalue; /** The todo list app */const App = <div id="app"> <Form text=text /> <ul> todos </ul> </div>; /** New todo entry form */const Form = <form onSubmit= action="javascript:"> <input placeholder="New item..." value=text onInput= /> </form>; /** A single todo list item */const Item = <li onClick= class= done: tododone > <input type="checkbox" checked=tododone readonly /> <a onClick=>✕</a> <p> todotext </p> </li>; // Kick off the cycle!;