https://github.com/seanchas116/decompose

A simple component system built on top of virtual-dom
https://github.com/seanchas116/decompose

Last synced: 4 days ago
JSON representation

A simple component system built on top of virtual-dom

• Host: GitHub
• URL: https://github.com/seanchas116/decompose
• Owner: seanchas116
• License: mit
• Created: 2014-11-21T14:45:14.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2014-12-07T09:10:05.000Z (almost 10 years ago)
• Last Synced: 2024-04-14T03:13:56.471Z (7 months ago)
• Language: CoffeeScript
• Homepage:
• Size: 336 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
decompose

=========

[![Build Status](https://travis-ci.org/seanchas116/decompose.svg)](https://travis-ci.org/seanchas116/decompose)

decompose is a library that provides a simple component system on [virtual-dom](https://github.com/Matt-Esch/virtual-dom/)

### Features

* Class-based component system like React

  * Override `#render` to define view

* Creates and diffs virtual DOM tree and apply patches to a real DOM locally in each component

  * Using virtual-dom's "Widget" node

* Supports mixing real DOM based components

Example

--------

```coffeescript

class TodoCollection extends EventEmitter

  constructor: (@todos) ->

  add: (todo) ->

    @todos.push(todo)

    @emit 'update'

class TodoView extends Component

  render: ->

    h 'li', [

      h 'h2', @todo.title

    ]

class TodoListView extends Component

  render: ->

    h 'ul', @todos.map (todo) =>

      TodoView.render todo: todo

todoCollection = new TodoCollection [

  { title: 'Go to town' }

  { title: 'Buy some food' }

]

todoListView = new TodoListView(todos: todoCollection.todos)

todoCollection.on 'update', ->

  todoListView.update()

window.addEventListener 'load', ->

  new Mount(todoListView).mount(document.getElementById('main'))

  setInterval (-> todoCollection.add {title: 'New task'}), 1000

```

Todo

--------

* More tests

* Better support for ES5

* Release