Top Level API

createComponent

Component createComponent(
    Object props,
    Object staticProps
)

Creates a component class.

import { createComponent } from 'vidom';

const MyComponent = createComponent({
    onRender() {
        return (
            <div class="my-component" onClick={ this.attrs.onClick }>
                click me!
            </div>
        );
    }
});

Component

The base class for vidom components. Required to declare components using ES6 classes.

import { Component } from 'vidom';

class MyComponent extends Component {
    onRender() {
        return (
            <div class="my-component" onClick={ this.attrs.onClick }>
                click me!
            </div>
        );
    }
}

mount

void mount(
    Node domNode,
    VNode node,
    [Object context],
    [Function cb]
)

Mounts the virtual node to the domNode. The cb callback will be invoked once the resulting virtual tree has been mounted to the DOM. There are three possible cases for Vidom:

• If there is no mounted virtual tree and domNode is empty: Vidom will render a new DOM tree.
• If there is another mounted virtual tree already. Vidom will apply corresponding patch to the DOM.
• If there is no mounted virtual tree and domNode isn't empty. Vidom will try to adopt the existing DOM tree to the mounted virtual one. In those cases you need to make sure that your virtual tree fully matches the existing DOM structure.

Also you may specify context which will we available in all inner components.

import { mount } from 'vidom';

mount(
    document.getElementById('app-root'),
    <div class="app">Hello world!</div>);

unmount

void unmount(
    Node domNode,
    [Function cb]
)

Unmounts a virtual tree from the specified domNode. The cb callback will be invoked once the virtual tree has been unmounted from the DOM. If there's no any virtual tree on the domNode then nothing will happen.

import { unmount } from 'vidom';

unmount(document.getElementById('app-root'));

renderToString

String renderToString(
    VNode node
)

Renders the specified virtual node into a plain string. It can be useful in isomorphic applications in order to render markup on the server and then use it on the client to adopt HTML to the virtual tree.

import { renderToString } from 'vidom';

const str = renderToString(<div class="app">Hello world!</div>);

toElem

VElement toElem(
    VNode node
)

Converts the specified virtual node to a virtual element.

toElems

VElement[] toElem(
    VNode node
)

Converts the specified virtual node to an array of virtual elements.