https://github.com/chromakode/diablo

yo-yo.js, with added components
https://github.com/chromakode/diablo

Last synced: 23 days ago
JSON representation

yo-yo.js, with added components

• Host: GitHub
• URL: https://github.com/chromakode/diablo
• Owner: chromakode
• Created: 2016-03-13T02:54:05.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-03-31T05:54:57.000Z (over 8 years ago)
• Last Synced: 2024-06-09T17:14:57.812Z (5 months ago)
• Language: JavaScript
• Size: 22.5 KB
• Stars: 15
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Diablo

[![Build Status](https://img.shields.io/travis/chromakode/diablo/master.svg?style=flat-square)](https://travis-ci.org/chromakode/diablo)

[![Coverage Status](https://img.shields.io/coveralls/chromakode/diablo/master.svg?style=flat-square)](https://coveralls.io/github/chromakode/diablo?branch=master)

[![npm](https://img.shields.io/npm/v/diablo.svg?style=flat-square)](https://www.npmjs.com/package/diablo)

[![license](https://img.shields.io/npm/l/diablo.svg?style=flat-square)](https://github.com/chromakode/diablo/blob/master/LICENSE)

An experimental fork of [yo-yo.js](https://github.com/maxogden/yo-yo) adding

composable custom components.

## Components

Components in Diablo are very similar to React.

Register a named component using `x.component`:

```js

x.component('MyButton', {

  handleClick: function () {

    this.props.onClick()

  },

  render: function () {

    return x`

      

        Cool Button: ${this.children}

      

    `

  },

})

```

You can then create `MyButton` components by rendering ```x`template````

literals:

```js

function sup() { alert('yo, sup?') }

x.render(x``, document.body)

```

When DOM is generated using template literals, placeholders for components are

created which are not instantiated yet. For instance,

```x`` ```

will return a `` DOM node which records the props you specified

which has not been instantiated or rendered.

Component instances persist between re-renders. In the future, it should be

possible to implement local component state and lifecycle methods similar to

React.

### setState

Components support a setState method, which behaves similar to React. The

current state of a component is available as `this.state` within `render()`

methods.

### componentDidMount / componentWillUnmount

These methods, if defined on a component, will be called after a component is

added to the DOM, and before it is removed from the DOM. Within these

functions, `component.getDOMNode()` can be used to obtain a reference to the

component's current top-level DOM element.

### shouldComponentUpdate

Components support an optional `shouldComponentUpdate(nextProps, nextState)`

method which they can use to skip rendering their subtree if their data hasn't

changed.

## Rendering

In Diablo, `x.render(element, container)` functions similar to React. It will

render an element into a container. If the element was previously rendered in

the container, the container will be efficiently updated via a DOM diff.