How to use the vidom.Component function in vidom

To help you get started, we’ve selected a few vidom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github dfilatov / vidom / benchmarks / renderToString / vidom.js View on Github external
.setAttrs({ className : 'link' })
                    .setChildren(node(Link).setAttrs({ href : '/', value : 'link-' + i })),
                node('i').setChildren('italic' + i++),
                node('div').setChildren(
                    node('div').setChildren(
                        node('div').setChildren(
                            node('div').setChildren('div')))));
        }

        return node('div')
            .setAttrs({ className : 'content' })
            .setChildren(children);
    }
}

class Link extends vidom.Component {
    onRender() {
        return node('a')
            .setAttrs({ href : this.attrs.href })
            .setChildren(this.attrs.value);
    }
}

class Footer extends vidom.Component {
    onRender() {
        const childrenNum = this.attrs.childrenNum,
            children = [];
        let i = 0;

        while(i < childrenNum) {
            children.push(node('div').setAttrs({ id : 'footer-' + i++ }));
        }
github dfilatov / vidom / benchmarks / renderToString / vidom.js View on Github external
class Header extends vidom.Component {
    onRender() {
        const childrenNum = this.attrs.childrenNum,
            children = [];
        let i = 0;

        while(i < childrenNum) {
            children.push(node('div').setAttrs({ id : 'header-' + i++ }));
        }

        return node('div').setAttrs({ className : 'header' }).setChildren(children);
    }
}

class Content extends vidom.Component {
    onRender() {
        const childrenNum = this.attrs.childrenNum,
            children = [];
        let i = 0;

        while(i < childrenNum) {
            children.push(
                node('b').setChildren('bold' + i),
                node('span')
                    .setAttrs({ className : 'link' })
                    .setChildren(node(Link).setAttrs({ href : '/', value : 'link-' + i })),
                node('i').setChildren('italic' + i++),
                node('div').setChildren(
                    node('div').setChildren(
                        node('div').setChildren(
                            node('div').setChildren('div')))));
github dfilatov / vidom / benchmarks / renderToString / vidom.js View on Github external
"use strict";

const vidom = require('vidom'),
    node = vidom.node;

class App extends vidom.Component {
    onRender() {
        const childrenNum = this.attrs.childrenNum;

        return node('div').setAttrs({ className : 'app' }).setChildren([
            node(Header).setAttrs({ childrenNum }),
            node(Content).setAttrs({ childrenNum }),
            node(Footer).setAttrs({ childrenNum })
        ]);
    }
}

class Header extends vidom.Component {
    onRender() {
        const childrenNum = this.attrs.childrenNum,
            children = [];
        let i = 0;
github dfilatov / vidom / benchmarks / renderToString / vidom.js View on Github external
return node('div')
            .setAttrs({ className : 'content' })
            .setChildren(children);
    }
}

class Link extends vidom.Component {
    onRender() {
        return node('a')
            .setAttrs({ href : this.attrs.href })
            .setChildren(this.attrs.value);
    }
}

class Footer extends vidom.Component {
    onRender() {
        const childrenNum = this.attrs.childrenNum,
            children = [];
        let i = 0;

        while(i < childrenNum) {
            children.push(node('div').setAttrs({ id : 'footer-' + i++ }));
        }

        return node('div')
            .setAttrs({ className : 'footer' })
            .setChildren(children);
    }
}

module.exports = childrenNum => () => vidom.renderToString(node(App).setAttrs({ childrenNum }));
github dfilatov / vidom / benchmarks / renderToString / vidom.js View on Github external
const vidom = require('vidom'),
    node = vidom.node;

class App extends vidom.Component {
    onRender() {
        const childrenNum = this.attrs.childrenNum;

        return node('div').setAttrs({ className : 'app' }).setChildren([
            node(Header).setAttrs({ childrenNum }),
            node(Content).setAttrs({ childrenNum }),
            node(Footer).setAttrs({ childrenNum })
        ]);
    }
}

class Header extends vidom.Component {
    onRender() {
        const childrenNum = this.attrs.childrenNum,
            children = [];
        let i = 0;

        while(i < childrenNum) {
            children.push(node('div').setAttrs({ id : 'header-' + i++ }));
        }

        return node('div').setAttrs({ className : 'header' }).setChildren(children);
    }
}

class Content extends vidom.Component {
    onRender() {
        const childrenNum = this.attrs.childrenNum,

vidom

Library to build UI

MIT
Latest version published 3 years ago

Package Health Score

45 / 100
Full package analysis