How to use vidom - 10 common examples
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.
krausest / js-framework-benchmark / frameworks / keyed / vidom / src / controller.jsx View on Github 
<div>
<button id="swaprows" type="button">Swap Rows</button>
</div>
{rows}<table>
<tbody></tbody>
</table>
<span aria-hidden="true"></span>
);
}
}
mount(document.getElementById('main'), );function update() {
mount(document.body, buildTree(sortUsers()), function() {
updateUsersStates();
setTimeout(update, 3000);
});
}<div>
<button id="swaprows" type="button">Swap Rows</button>
</div>
{rows}<table>
<tbody></tbody>
</table>
<span aria-hidden="true"></span>
);
}
}
mount(document.getElementById('main'), node(Controller));setTimeout(() => {
mount(root, ['b', 'a']);
}, 500)this._errorTimer = null;
this.setState({ error });
}, ERROR_TIMEOUT);
}
}
function transformCode(code) {
return Babel.transform(
code,
{
presets : ['es2015-loose'],
plugins : [['vidom-jsx', { autoRequire : false }]]
}).code;
}
mount(document.body, );.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++ }));
}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')))));"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;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 }));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,
