export const equalsDom = function(actualVdom, expected, message='should be equal dom') {
const isSame = isEqualDom(actualVdom, expected)
this._assert(isSame, {
message,
operator: 'equalsDom',
actual: html(actualVdom),
expected: html(expected)
})
}
var ifDirective = function(key,val,node,model,keydefined,parent){
shimCustomTag();
var showing = val === true;
var isTemplateTag = new RegExp('\^'+template_tag+'\$','i').test(node.tagName);
var needsRender = (showing && isTemplateTag) || (!showing && !isTemplateTag);
// no need to re-render if we're already in the right state
if(needsRender){
// we're changing state, so assemble the correct element for the new state
var newNode;
if(showing){
var template = node.properties.attributes[template_attr];
newNode = virtualize(template);
} else {
var template = stringify(node);
var ifAttr = node.properties.attributes['e-if'];
var attributes = {
'e-if' : ifAttr
};
attributes[template_attr] = template;
newNode = h(template_tag,{
style : { display : 'none' },
attributes : attributes
});
}
// swap out the old node with the new one
var uid = node.properties.attributes.uid = utils.uid();
utils.reverseEnumerate(parent.children,function(child,i){
if(child.properties.attributes.uid === uid){
parent.children[i] = newNode;
return true;
}
});
}
};
function renderFixture(fixtureName, locals) {
const compiled = render(fixture(fixtureName), {
filename: fixtureFilename(fixtureName),
})
const fn = eval(`(${compiled})`)
const root = fn.call({class: 'asdf'}, locals)
const html = toHTML(root)
parse5.parse(html, true)
return html
}
it('should compile if statements', function () {
let js = testCompilation('if')
assert(!~js.indexOf('undefined('))
let root = eval(`(function(){${js}})()`)
let html = toHTML(root)
parse5.parse(html, true)
assert(~html.indexOf('<span></span><span></span>'))
assert(!~html.indexOf('<em>'))
assert(~html.indexOf('a1'))
assert(!~html.indexOf('a2'))
assert(!~html.indexOf('a3'))
})
valprop[mapkey].forEach(function (cvars) {
var mapd
if ( 'string' === typeof cvars ) {
subtmpl.children = [new vText(cvars)]
mapd = toVDOM(vToHTML(subtmpl))
}
else if ( 'object' === typeof cvars ) {
mapd = vDT(subtmpl, cvars)
}
switch ( prop ) {
case '_mapprepend': target.children.unshift(mapd); break
default: target.children.push(mapd); break
}
})
Object.keys(valprop).forEach(function (mapkey) {
var subtmpl = toVDOM(vToHTML(vTSel(mapkey)(target)[0])) // how else to clone?
if ( '_map' === prop ) { target.children = [] }
valprop[mapkey].forEach(function (cvars) {
var mapd
if ( 'string' === typeof cvars ) {
subtmpl.children = [new vText(cvars)]
mapd = toVDOM(vToHTML(subtmpl))
}
else if ( 'object' === typeof cvars ) {
mapd = vDT(subtmpl, cvars)
}
switch ( prop ) {
case '_mapprepend': target.children.unshift(mapd); break
default: target.children.push(mapd); break
}
})
})
function render(state) {
return context.defaultTemplate({
title: 'BEM — Block Element Modifier',
metaTags: {
description: 'BEM — Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.',
tags: 'BEM, HTML, CSS, JS, JavaScript, framework, front-end, frontend, web development, code sharing, components, blocks, react, webpack',
author: 'Vsevolod Strukchinsky, Vladimir Starkov and contributors',
'twitter:card': 'summary',
'twitter:site': '@getbem',
'og:image': 'http://getbem.com/assets/bem_black.png',
'og:url': 'http://getbem.com/',
'og:title': 'BEM — Block Element Modifier',
'og: description': 'BEM — Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.'
},
head: [
'<link rel="icon" type="image/png" href="/assets/favicon.png"/>'
],
html: toHtml(app(state))
});
}
test("Renders expected HTML output for kitchen-sink", function(t) {
var Nexilis = require("../../lib/nexilis");
var builder = require("../../lib/vdomBuilder");
var kitchen = require("../templates/kitchen-sink");
// Set up the builder and the kitchen sink component
var nexilis = new Nexilis(builder);
nexilis.addComponent(kitchen);
// Render out raw output of what the builder made
var result = nexilis.render("kitchen-sink");
// Format the expected result
var expected = formatHTML(kitchen.expected);
var formattedResult = formatHTML(stringify(result));
t.deepEqual(formattedResult, expected, "rendered output looks like what is expected");
t.end();
});
function show (items, e) {
e.preventDefault()
div.style.left = `${e.pageX}px`
div.style.top = `${e.pageY}px`
div.innerHTML = toHTML(h('ul', items.map(i =>
h('li', [
i.multiple
? i.options.length <= 7
? i.options.map(o =>
h('a.box', {
attributes: {'data-tag': i.tag, 'data-value': o.value},
style: o.style
}, 'F')
)
: [h('select', [i.options.map(o => h('option', {value: o.value}, o.value))])]
: h('a', {
className: cx({disabled: i.disabled}),
attributes: {'data-tag': i.tag, 'data-value': i.value}
}, i.title)
])
)))
}
BaseElement.prototype.toString = function BaseElement_toString () {
this.render.apply(this, arguments)
return toHTML(this.vtree)
}
// stored reference of static page objects
const page = {
img : getpageimg(),
nav : getpagenav()
};
// build page objects
const div = hh.div(pagedataarr.map(function (data) {
return page[data.pagetype].getvnode(data);
}));
console.log(
html.prettyPrint(vdomtohtml(div))
);
//<div>
// <nav id="page-topnav" class="nav">
// <ul class="nav-list">
// <li class="nav-list-item big">main</li>
// <li class="nav-list-item big">faq</li>
// </ul>
// </nav>
// <img id="page-img1" class="img big">
// <img id="page-img2" class="img big">
// <img id="page-img3" class="img small">
// <nav id="page-bottomnav" class="nav">
// <ul class="nav-list">
// <li class="nav-list-item small">phone</li>
let hx = transforms(require('bel').createElement, plugins);
let tree = hx`
<div>
<h1>${plugins.join(' ')}</h1>
</div>
`;
assert.ok(tree);
error.define('Virtual DOM');
let stringify = require('vdom-to-html');
let vdom = require('virtual-dom');
let dom = transforms(vdom.h, plugins);
hx = hyperx(dom);
tree = hx`
<div>
<h1>${plugins.join(' ')}</h1>
</div>
`;
let html = stringify(tree);
console.log(html);
assert.ok(typeof html === 'string');
assert.ok(/<div>/.test(html));
assert.ok(/<h1>/.test(html));
assert.ok(/<\/div>/.test(html));
console.log('ok');
module.exports = function vDT (templates, contentvars) {
var vt
// if arguments are contained in a single object, pull them out
if ( 'object' === typeof templates && !Array.isArray(templates)
&& undefined === contentvars
) {
contentvars = templates[Object.keys(templates)[1]]
templates = templates[Object.keys(templates)[0]]
}
contentvars = contentvars || {}
if ( Array.isArray(templates) ) {
if ( 1 < templates.length ) {
var start = templates.reverse().shift()
vt = templates.reduce(function(prev, next) {
var ret = toVDOM(next)
var tar = vTSel('.template')(ret)
if ( tar ) {
tar[0].children = prev.children
}
else { console.log('Template selector not found.') }
return ret
}, toVDOM(start))
vt = toVDOM(vToHTML(vt))
}
else { vt = toVDOM(templates[0]) }
}
else if ( 'object' === typeof templates ) {
vt = toVDOM(vToHTML(templates)) // fixes glitch copying templates
}
else {
vt = toVDOM(templates)
}
Object.keys(contentvars).forEach(function (sel) {
var value = contentvars[sel]
var target = vTSel(sel)(vt)
if ( target ) {
target = target[0]
if ( 'string' === typeof value || 'number' === typeof value ) {
target.children = [new vText(value)]
}
else if ( 'object' === typeof value ) {
Object.keys(value).forEach(function (prop) {
var targetprops = target.properties.attributes
var valprop = value[prop]
if ( '_html' === prop ) {
target.children = [new vText(valprop)]
}
else if ( '_append' === prop ) {
target.children.push(new vText(valprop))
}
else if ( '_prepend' === prop ) {
target.children.unshift(new vText(valprop))
}
else if (/^_map/.test(prop) && 'object' === typeof valprop && null !== valprop ) {
Object.keys(valprop).forEach(function (mapkey) {
var subtmpl = toVDOM(vToHTML(vTSel(mapkey)(target)[0])) // how else to clone?
if ( '_map' === prop ) { target.children = [] }
valprop[mapkey].forEach(function (cvars) {
var mapd
if ( 'string' === typeof cvars ) {
subtmpl.children = [new vText(cvars)]
mapd = toVDOM(vToHTML(subtmpl))
}
else if ( 'object' === typeof cvars ) {
mapd = vDT(subtmpl, cvars)
}
switch ( prop ) {
case '_mapprepend': target.children.unshift(mapd); break
default: target.children.push(mapd); break
}
})
})
}
else {
if ( 'class' === prop || 'id' === prop || (/^on/.test(prop) && 'function' === typeof valprop) ) {
targetprops = target.properties
if ( 'class' === prop ) { prop = 'className' }
}
var cur = targetprops[prop] || ''
if ( valprop && 'object' === typeof valprop && null !== valprop ) {
if ( valprop.append ) { cur += valprop.append }
else if ( valprop.prepend ) { cur = valprop.prepend + cur }
}
else { cur = valprop }
targetprops[prop] = cur
}
})
}
else if ( 'function' === typeof value ) {
target.children[0].text = value(target.children[0].text)
}
} // end if target
else { console.log('Selector not found. ', sel) }
})
return vt
}
it('should compile the boilerplate', function () {
let js = testCompilation('boilerplate')
let root = eval(`(function(){${js}})()`)
let html = toHTML(root)
parse5.parse(html, true)
})
, function*(document, snapshot) {
return vdomToHtml(JSON.parse(snapshot.contents))
})
assets.posts(config._blogroot, function(err, posts) {
var html = '<!doctype html>\n'+toHTML(render(config, vtree, scripts, posts));
file.contents = new Buffer(html)
cb(null, file);
});
var middleware = app.router.serve(function (page, data) {
app.render(page, data)
this.response.writeHead(200, { 'Content-Type': 'text/html' })
this.response.end(toHTML(app.element.vtree))
})
.map(vtree => toHTML(vtree));
function render (state) {
return context.defaultTemplate({html: toHtml(app(state))})
}