Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 6 days ago
JSON representation

:recycle: Minimal functional Virtual DOM rendering using Preact :bike:

Awesome Lists containing this project

README

        

# preact-cycle

[![NPM](https://img.shields.io/npm/v/preact-cycle.svg)](https://www.npmjs.com/package/preact-cycle)
[![travis-ci](https://travis-ci.org/developit/preact-cycle.svg?branch=master)](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 }) => (



mutate('text', e.target.value)} />
Add


    { todos.map( todo => (


  • { todo.text }




  • ))}


);

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/