Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/developit/preact-cycle
:recycle: Minimal functional Virtual DOM rendering using Preact :bike:
https://github.com/developit/preact-cycle
preact preact-components
Last synced: about 1 month ago
JSON representation
:recycle: Minimal functional Virtual DOM rendering using Preact :bike:
- Host: GitHub
- URL: https://github.com/developit/preact-cycle
- Owner: developit
- License: mit
- Created: 2016-02-08T22:24:14.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-08T20:18:53.000Z (about 6 years ago)
- Last Synced: 2024-07-08T06:24:01.496Z (2 months ago)
- Topics: preact, preact-components
- Language: JavaScript
- Homepage: https://developit.github.io/preact-cycle/
- Size: 63.5 KB
- Stars: 134
- Watchers: 5
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-preact - Preact Cycle - Functional-reactive paradigm for Preact. (Uncategorized / Uncategorized)
README
# preact-cycle
[](https://www.npmjs.com/package/preact-cycle)
[](https://travis-ci.org/developit/preact-cycle)
> Minimal functional _(-reactive)_ Virtual DOM rendering using [Preact].
---
### Simple Example
[**View this example on esnextb.in**](http://esnextb.in/?gist=d804796c481218488309)
```js
import { render, h } from 'preact-cycle';
/** @jsx h */
const App = ({ value, mutation }) => (
Value: { value }
v+1) }>Increment
);
render(App, { value: 0 });
```
---
### 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 CodePen**](https://codepen.io/developit/pen/XYvQjr?editors=0110)
```js
import { render, h } from 'preact-cycle';
/** @jsx h */
const ADD = ({ text, todos, ...state }) => ({
todos: todos.concat({ text }),
text: '',
...state
});
const TOGGLE = (state, todo) => {
todo.done = !todo.done;
return state;
};
const REMOVE = ({ todos, ...state }, todo) => ({
todos: todos.filter( t => t!==todo ),
...state
});
const TodoList = ({ text, todos, mutate, mutation }) => (
);
render(TodoList, { todos: [] }, document.body);
```
---
### 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.
```js
import { h, render } from 'preact-cycle';
/** @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, text, ...state }) => ({
todos: todos.concat({ text }),
text: '',
...state
});
/** Remove the given todo item */
const REMOVE = ({ todos, ...state }, todo) => ({
todos: todos.filter(t => t!==todo),
...state
});
/** Toggles the given todo item as done */
const TOGGLE = (state, todo) => {
todo.done = !todo.done;
};
/** a simple helper to derive a mutated value from an event */
let fromEvent = (prev, e) => e.target.value;
/** The todo list app */
const App = ({ text, todos }) => (
{ todos.map( todo => (
)) }
);
/** New todo entry form */
const Form = ({ text }, { mutation }) => (
);
/** A single todo list item */
const Item = ({ todo }, { mutation }) => (
✕
{ todo.text }
);
// Kick off the cycle!
render(App, INITIAL_DATA, document.body);
```
---
### License
[MIT]
[Preact]: https://github.com/developit/preact
[context]: https://facebook.github.io/react/docs/context.html
[MIT]: http://choosealicense.com/licenses/mit/