4 | 5 | -------------------------------------------------------------------------------- /test/autotests-virtualize/textarea/virtualized-expected.html: -------------------------------------------------------------------------------- 1 | 2 | VALUE: " Hello World!\n" 3 | -------------------------------------------------------------------------------- /test/autotests-create/attributes-attr-collection/expected.html: -------------------------------------------------------------------------------- 1 | <div> 2 | <span> 3 | <p class="foo" id="bar"> 4 | <a> 5 | -------------------------------------------------------------------------------- /test/autotests-virtualize/comment/input.html: -------------------------------------------------------------------------------- 1 | <div> 2 | <h1>Hello World</h1> 3 | <!-- This is a comment --> 4 | </div> -------------------------------------------------------------------------------- /test/autotests-create/attributes-null-false/expected.html: -------------------------------------------------------------------------------- 1 | <div> 2 | <span> 3 | <p checked="" class="foo" id="bar"> 4 | <a> 5 | -------------------------------------------------------------------------------- /test/autotests-create/doc-fragment-deeply-nested/expected.html: -------------------------------------------------------------------------------- 1 | <div class="aa1"> 2 | <div class="aa2"> 3 | <div class="b1"> 4 | <div class="b2"> 5 | -------------------------------------------------------------------------------- /test/autotests-create/createAttributes/expected.html: -------------------------------------------------------------------------------- 1 | <div> 2 | <span> 3 | <a href="http://ebay.com" id="link"> 4 | "eBay" 5 | <footer> 6 | -------------------------------------------------------------------------------- /test/autotests-create/doc-fragment-child/expected.html: -------------------------------------------------------------------------------- 1 | <div class="root"> 2 | <div class="foo1" onclick="doSomething()"> 3 | <div class="foo2"> 4 | -------------------------------------------------------------------------------- /test/autotests-create/appendDocumentFragment-no-children/expected.html: -------------------------------------------------------------------------------- 1 | <div class="root"> 2 | <div class="first-child"> 3 | <div class="last-child"> 4 | -------------------------------------------------------------------------------- /test/autotests-create/static-tree/expected.html: -------------------------------------------------------------------------------- 1 | <div class="foo" onclick="doSomething()"> 2 | <a href="http://ebay.com"> 3 | "eBay" 4 | <span> 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | node_js: 3 | - "4" 4 | - "5" 5 | - "6" 6 | language: node_js 7 | script: "npm run test-coverage" 8 | after_success: "npm run coveralls" -------------------------------------------------------------------------------- /test/autotests-create/comment/expected.html: -------------------------------------------------------------------------------- 1 | <div class="foo" onclick="doSomething()"> 2 | <span class="bar"> 3 | <!--"This is a comment"--> 4 | <p> 5 | -------------------------------------------------------------------------------- /benchmark/run.js: -------------------------------------------------------------------------------- 1 | var open = require('open'); 2 | var path = require('path'); 3 | 4 | require('./codegen-create/run'); 5 | open(path.join(__dirname, 'index.html')); 6 | -------------------------------------------------------------------------------- /test/autotests-create/attributes-attr-collection-child/expected.html: -------------------------------------------------------------------------------- 1 | <div> 2 | <span> 3 | <p class="foo" id="bar"> 4 | <span class="leaf"> 5 | <a> 6 | -------------------------------------------------------------------------------- /test/autotests-virtualize/comment/virtualized-expected.html: -------------------------------------------------------------------------------- 1 | <DIV> 2 | "\n " 3 | <H1> 4 | "Hello World" 5 | "\n " 6 | <!--" This is a comment "--> 7 | "\n" 8 | -------------------------------------------------------------------------------- /test/autotests-create/appendDocumentFragment-children/expected.html: -------------------------------------------------------------------------------- 1 | <div class="root"> 2 | <div class="first-child"> 3 | <div class="middle-child"> 4 | <div class="last-child"> 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /work 2 | /build 3 | /.idea/ 4 | /npm-debug.log 5 | /node_modules 6 | /*.sublime-workspace 7 | *.orig 8 | .DS_Store 9 | .vscode 10 | coverage 11 | .nvmrc 12 | ~* 13 | /dist -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /work 2 | /build 3 | /.idea/ 4 | /npm-debug.log 5 | /node_modules 6 | /*.sublime-workspace 7 | *.orig 8 | .DS_Store 9 | .vscode 10 | coverage 11 | .nvmrc 12 | ~* 13 | /test -------------------------------------------------------------------------------- /test/autotests-create/doc-fragment-child-with-sibling/expected.html: -------------------------------------------------------------------------------- 1 | <div class="root"> 2 | <div class="foo1" onclick="doSomething()"> 3 | <div class="foo2"> 4 | <div class="sibling"> 5 | -------------------------------------------------------------------------------- /test/autotests-virtualize/attr-value-empty-string/input.html: -------------------------------------------------------------------------------- 1 | <input class="toggle" type="checkbox" checked="" aria-label="Toggle todo completed" data-w-onchange="handleCheckboxChange|main-todo-1"> -------------------------------------------------------------------------------- /test/autotests-create/no-children/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | return helpers.vdom.createElement('div', { class: 'foo', onclick: 'doSomething()' }, 0 /* childCount */); 3 | }; -------------------------------------------------------------------------------- /test/autotests-virtualize/svg/input.html: -------------------------------------------------------------------------------- 1 | <div> 2 | <svg width="100" height="100"> 3 | <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 4 | </svg> 5 | </div> -------------------------------------------------------------------------------- /test/autotests-create/one-child-text/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | return helpers.vdom.createElement('div', { class: 'foo' }, 1 /* childCount */) 3 | .t('Hello World!') 4 | }; -------------------------------------------------------------------------------- /test/autotests-virtualize/attr-value-empty-string/virtualized-expected.html: -------------------------------------------------------------------------------- 1 | <INPUT aria-label="Toggle todo completed" checked="" class="toggle" data-w-onchange="handleCheckboxChange|main-todo-1" type="checkbox"> 2 | -------------------------------------------------------------------------------- /test/autotests-create/one-child-element/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | return helpers.vdom.createElement('div', { class: 'foo' }, 1 /* childCount */) 3 | .e('span', { class: 'bar' }, 0); 4 | }; -------------------------------------------------------------------------------- /test/autotests-virtualize/svg-xlink/input.html: -------------------------------------------------------------------------------- 1 | <div> 2 | <svg width="100" height="100"> 3 | <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" xlink:href="http:/ebay.com/" /> 4 | </svg> 5 | </div> -------------------------------------------------------------------------------- /test/autotests-virtualize/svg/virtualized-expected.html: -------------------------------------------------------------------------------- 1 | <DIV> 2 | "\n " 3 | <svg:svg height="100" width="100"> 4 | "\n " 5 | <svg:circle cx="50" cy="50" fill="yellow" r="40" stroke-width="4" stroke="green"> 6 | "\n " 7 | "\n" 8 | -------------------------------------------------------------------------------- /test/autotests-create/id/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | 3 | module.exports = function(helpers) { 4 | var el = helpers.vdom.createElement('input', { id: 'foo' }, 0 /* childCount */); 5 | expect(el.id).to.equal('foo'); 6 | return el; 7 | }; -------------------------------------------------------------------------------- /test/autotests-create/svg/expected.html: -------------------------------------------------------------------------------- 1 | <div class="foo" onclick="doSomething()"> 2 | <svg:svg height="100" width="100"> 3 | <svg:circle cx="50" cy="50" fill="yellow" http://www.w3.org/1999/xlink:href="http://ebay.com/" r="40" stroke-width="4" stroke="green"> 4 | -------------------------------------------------------------------------------- /test/autotests-create/deeply-nested-element/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | return helpers.vdom.createElement('div', 0 /* attrCount */, 2 /* childCount */) 3 | .e('span', null, 1) 4 | .e('p', null, 0) 5 | .e('a', null, 0); 6 | }; -------------------------------------------------------------------------------- /test/autotests-create/attributes-object/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | return helpers.vdom.createElement('div', null, 2 /* childCount */) 3 | .e('span', null, 1) 4 | .e('p', { class: 'foo', id: 'bar' }, 0) 5 | .e('a', null, 0); 6 | }; -------------------------------------------------------------------------------- /test/autotests-create/attributes-true/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | var virtualEl = helpers.vdom.createElement('select', null, 1 /* childCount */) 3 | .e('option', { selected: true }, 0); 4 | 5 | return virtualEl.actualize(helpers.document); 6 | }; -------------------------------------------------------------------------------- /test/autotests-create/deeply-nested-element-2/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | return helpers.vdom.createElement('div', 0 /* attrCount */, 2 /* childCount */) 3 | .e('span', null, 1) 4 | .e('p', null, 1) 5 | .e('a', null, 0); 6 | }; -------------------------------------------------------------------------------- /test/autotests-create/input-value/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | 3 | module.exports = function(helpers) { 4 | var el = helpers.vdom.createElement('input', { value: 'foo' }, 0 /* childCount */); 5 | 6 | expect(el.value).to.equal('foo'); 7 | return el; 8 | }; -------------------------------------------------------------------------------- /test/autotests-create/option-selected/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | 3 | module.exports = function(helpers) { 4 | var el = helpers.vdom.createElement('option', { 'selected': '' }, 0 /* childCount */); 5 | expect(el.selected).to.equal(true); 6 | return el; 7 | }; -------------------------------------------------------------------------------- /test/autotests-create/input-disabled/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | 3 | module.exports = function(helpers) { 4 | var el = helpers.vdom.createElement('input', { disabled: 'disabled' }, 0 /* childCount */); 5 | 6 | expect(el.disabled).to.equal(true); 7 | return el; 8 | }; -------------------------------------------------------------------------------- /test/autotests-create/cloneNode/expected.html: -------------------------------------------------------------------------------- 1 | <div class="root"> 2 | <div class="foo" onclick="doSomething()"> 3 | <svg:svg height="100" width="100"> 4 | <svg:circle cx="50" cy="50" fill="yellow" http://www.w3.org/1999/xlink:href="http://ebay.com/" r="40" stroke-width="4" stroke="green"> 5 | -------------------------------------------------------------------------------- /test/autotests-create/input-checked/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | 3 | module.exports = function(helpers) { 4 | var el = helpers.vdom.createElement('input', { type: 'checkbox', checked: true }, 0 /* childCount */); 5 | 6 | expect(el.checked).to.equal(true); 7 | return el; 8 | }; -------------------------------------------------------------------------------- /test/autotests-create/static-tree-svg/expected.html: -------------------------------------------------------------------------------- 1 | <svg:svg height="150" width="400"> 2 | <svg:linearGradient x1="0%" x2="100%" y1="0%" y2="0%"> 3 | <svg:stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"> 4 | <svg:stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"> 5 | -------------------------------------------------------------------------------- /test/autotests-virtualize/svg-xlink/virtualized-expected.html: -------------------------------------------------------------------------------- 1 | <DIV> 2 | "\n " 3 | <svg:svg height="100" width="100"> 4 | "\n " 5 | <svg:circle cx="50" cy="50" fill="yellow" http://www.w3.org/1999/xlink:href="http:/ebay.com/" r="40" stroke-width="4" stroke="green"> 6 | "\n " 7 | "\n" 8 | -------------------------------------------------------------------------------- /test/autotests-create/assignAttributes/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | var targetEl = helpers.document.createElement('div'); 3 | var virtualEl = helpers.vdom.createElement('div', { class: 'foo', 'xlink:href': 'bar.com' }); 4 | virtualEl.assignAttributes(targetEl); 5 | return targetEl; 6 | }; -------------------------------------------------------------------------------- /test/autotests-create/attributes-attr-collection/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | var attributes = { class: 'foo', id: 'bar' }; 3 | 4 | return helpers.vdom.createElement('div', null, 2 /* childCount */) 5 | .e('span', null, 1) 6 | .e('p', attributes, 0) 7 | .e('a', null, 0); 8 | }; -------------------------------------------------------------------------------- /test/autotests-create/attributes-null-false/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | return helpers.vdom.createElement('div', null, 2 /* childCount */) 3 | .e('span', null, 1) 4 | .e('p', { class: 'foo', id: 'bar', title: null, 'data-bar': false, 'checked': true }, 0) 5 | .e('a', null, 0); 6 | }; -------------------------------------------------------------------------------- /test/autotests-create/comment/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | return helpers.vdom.createElement('div', { 3 | class: 'foo', 4 | onclick: 'doSomething()' 5 | }, 1 /* childCount */) 6 | .e('span', { class: 'bar' }, 1) 7 | .c('This is a comment') 8 | .e('p', 0, 0); 9 | }; -------------------------------------------------------------------------------- /test/autotests-create/textarea/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | 3 | module.exports = function(helpers) { 4 | var textarea = helpers.vdom.createElement('textarea', null, 2 /* childCount */) 5 | .t('foo') 6 | .t('bar'); 7 | 8 | expect(textarea.value).to.equal('foobar'); 9 | 10 | return textarea; 11 | }; -------------------------------------------------------------------------------- /test/autotests-create/appendDocumentFragment-no-children/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | var root = helpers.vdom.createElement('div', { class: 'root' }); 3 | 4 | root.e('div', { class: 'first-child' }); 5 | 6 | root.appendDocumentFragment(); 7 | 8 | root.e('div', { class: 'last-child' }); 9 | 10 | return root; 11 | }; -------------------------------------------------------------------------------- /test/autotests-create/attributes-attr-collection-child/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | var attributes = { class: 'foo', id: 'bar' }; 3 | 4 | return helpers.vdom.createElement('div', null, 2 /* childCount */) 5 | .e('span', null, 1) 6 | .e('p', attributes, 1) 7 | .e('span', { 'class': 'leaf' }, 0) 8 | .e('a', null, 0); 9 | }; -------------------------------------------------------------------------------- /test/autotests-create/textarea-invalid-child/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | 3 | module.exports = function(helpers) { 4 | expect(function() { 5 | helpers.vdom.createElement('textarea', 0 /* attrCount */, 2 /* childCount */) 6 | .e('div', 0, 0) 7 | .t('bar'); 8 | }).to.throw('Invalid child'); 9 | 10 | return null; 11 | }; -------------------------------------------------------------------------------- /test/autotests-virtualize/math/input.html: -------------------------------------------------------------------------------- 1 | <math xmlns="http://www.w3.org/1998/Math/MathML"> 2 | <matrix> 3 | <matrixrow> 4 | <cn> 0 </cn> <cn> 1 </cn> <cn> 0 </cn> 5 | </matrixrow> 6 | <matrixrow> 7 | <cn> 0 </cn> <cn> 0 </cn> <cn> 1 </cn> 8 | </matrixrow> 9 | <matrixrow> 10 | <cn> 1 </cn> <cn> 0 </cn> <cn> 0 </cn> 11 | </matrixrow> 12 | </matrix> 13 | </math> -------------------------------------------------------------------------------- /test/autotests-create/cloneNode-text/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | 3 | module.exports = function(helpers) { 4 | var text = helpers.vdom.createText('Hello World'); 5 | var textClone = text.cloneNode(); 6 | expect(textClone).to.not.equal(text); 7 | expect(text.nodeValue).to.equal('Hello World'); 8 | expect(textClone.nodeValue).to.equal('Hello World'); 9 | return text; 10 | }; -------------------------------------------------------------------------------- /benchmark/codegen-create/codegen-dom-innerHTML.js: -------------------------------------------------------------------------------- 1 | module.exports = function(node, html) { 2 | return ` 3 | var fragment = range.createContextualFragment(html); 4 | return fragment.childNodes[0];`; 5 | }; 6 | 7 | module.exports.generateInitCode = function(node, html) { 8 | return ` 9 | var range = document.createRange(); 10 | range.selectNode(document.body); 11 | var html = ${JSON.stringify(html)}; 12 | `; 13 | }; -------------------------------------------------------------------------------- /test/autotests-create/cloneNode-comment/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | 3 | module.exports = function(helpers) { 4 | var comment = helpers.vdom.createComment('This is a comment'); 5 | var commentClone = comment.cloneNode(); 6 | expect(commentClone).to.not.equal(comment); 7 | expect(comment.nodeValue).to.equal('This is a comment'); 8 | expect(commentClone.nodeValue).to.equal('This is a comment'); 9 | return comment; 10 | }; -------------------------------------------------------------------------------- /test/autotests-create/appendDocumentFragment-children/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | var root = helpers.vdom.createElement('div', { class: 'root' }); 3 | 4 | root.e('div', { class: 'first-child' }); 5 | 6 | var docFragment = root.appendDocumentFragment(); 7 | docFragment.appendChild(helpers.vdom.createElement('div', { class: 'middle-child' })); 8 | 9 | root.e('div', { class: 'last-child' }); 10 | 11 | return root; 12 | }; -------------------------------------------------------------------------------- /src/Text.js: -------------------------------------------------------------------------------- 1 | var Node = require('./Node'); 2 | var inherit = require('raptor-util/inherit'); 3 | 4 | function Text(value) { 5 | Node.call(this, -1 /* no children */); 6 | this.nodeValue = value; 7 | } 8 | 9 | Text.prototype = { 10 | nodeType: 3, 11 | 12 | actualize: function(document) { 13 | return document.createTextNode(this.nodeValue); 14 | }, 15 | 16 | cloneNode: function() { 17 | return new Text(this.nodeValue); 18 | } 19 | }; 20 | 21 | inherit(Text, Node); 22 | 23 | module.exports = Text; -------------------------------------------------------------------------------- /test/autotests-create/createAttributes/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | 3 | module.exports = function(helpers) { 4 | var attributes = { 5 | id: 'link', 6 | href: 'http://ebay.com' 7 | }; 8 | 9 | var el = helpers.vdom.createElement('div', null, 2 /* childCount */) 10 | .e('span', null, 1) 11 | .e('a', attributes, 1) 12 | .t('eBay') 13 | .e('footer', null, 0); 14 | 15 | expect(el.firstChild.firstChild.id).to.equal('link'); 16 | 17 | return el; 18 | }; -------------------------------------------------------------------------------- /src/Comment.js: -------------------------------------------------------------------------------- 1 | var Node = require('./Node'); 2 | var inherit = require('raptor-util/inherit'); 3 | 4 | function Comment(value) { 5 | Node.call(this, -1 /* no children */); 6 | this.nodeValue = value; 7 | } 8 | 9 | Comment.prototype = { 10 | nodeType: 8, 11 | 12 | actualize: function(document) { 13 | return document.createComment(this.nodeValue); 14 | }, 15 | 16 | cloneNode: function() { 17 | return new Comment(this.nodeValue); 18 | } 19 | }; 20 | 21 | inherit(Comment, Node); 22 | 23 | module.exports = Comment; -------------------------------------------------------------------------------- /test/autotests-create/svg/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | return helpers.vdom.createElement('div', { class: 'foo', onclick: 'doSomething()' }, 1 /* childCount */) 3 | .e('svg', { width: '100', height: '100'}, 1) 4 | .e('circle', { 5 | 'cx': '50', 6 | 'cy': '50', 7 | 'r': '40', 8 | 'stroke': 'green', 9 | 'stroke-width': '4', 10 | 'fill': 'yellow', 11 | 'xlink:href': 'http://ebay.com/' 12 | }, 0); 13 | }; -------------------------------------------------------------------------------- /test/autotests-create/doc-fragment-child/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | var root = helpers.vdom.createElement('div', { class: 'root' }); 3 | 4 | var docFragment = helpers.vdom.createDocumentFragment(); 5 | 6 | var div1 = helpers.vdom.createElement('div', { 7 | class: 'foo1', 8 | onclick: 'doSomething()' 9 | }); 10 | 11 | var div2 = helpers.vdom.createElement('div', { 12 | class: 'foo2' 13 | }); 14 | 15 | docFragment.appendChild(div1); 16 | docFragment.appendChild(div2); 17 | 18 | root.appendChild(docFragment); 19 | 20 | return root; 21 | }; -------------------------------------------------------------------------------- /test/autotests-create/static-tree-svg/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | var linearGradient = helpers.vdom.createElement('linearGradient', { x1: "0%", y1: "0%", x2: "100%", y2: "0%" }); 3 | 4 | linearGradient.appendChild(helpers.vdom.createElement('stop', { offset: "0%", style: "stop-color:rgb(255,255,0);stop-opacity:1" })); 5 | 6 | linearGradient.appendChild(helpers.vdom.createElement('stop', { offset: "100%", style: "stop-color:rgb(255,0,0);stop-opacity:1" })); 7 | 8 | var svg = helpers.vdom.createElement('svg', { height: "150", width: "400" }); 9 | 10 | svg.appendChild(linearGradient); 11 | 12 | return svg; 13 | }; -------------------------------------------------------------------------------- /test/autotests-create/cloneNode-documentFragment/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | 3 | module.exports = function(helpers) { 4 | var svg = helpers.vdom.createElement('svg'); 5 | 6 | var docFragment = helpers.vdom.createDocumentFragment(); 7 | svg.appendChild(docFragment); 8 | 9 | expect(docFragment.namespaceURI).to.equal('http://www.w3.org/2000/svg'); 10 | var docFragmentClone = docFragment.cloneNode(); 11 | expect(docFragmentClone.namespaceURI).to.equal('http://www.w3.org/2000/svg'); 12 | expect(docFragmentClone.nextSibling).to.equal(undefined); 13 | expect(docFragmentClone.parentNode).to.equal(undefined); 14 | 15 | return svg; 16 | }; -------------------------------------------------------------------------------- /test/autotests-create/doc-fragment-child-with-sibling/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | var root = helpers.vdom.createElement('div', {class: 'root'}); 3 | 4 | var docFragment = helpers.vdom.createDocumentFragment(); 5 | 6 | var div1 = helpers.vdom.createElement('div', { 7 | class: 'foo1', 8 | onclick: 'doSomething()' 9 | }); 10 | 11 | var div2 = helpers.vdom.createElement('div', { class: 'foo2' }); 12 | 13 | docFragment.appendChild(div1); 14 | docFragment.appendChild(div2); 15 | 16 | root.appendChild(docFragment); 17 | root.appendChild(helpers.vdom.createElement('div', { class: 'sibling' })); 18 | 19 | return root; 20 | }; -------------------------------------------------------------------------------- /test/autotests-create/removeChildren/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | module.exports = function(helpers) { 3 | var div = helpers.vdom.createElement('div', null, 1 /* childCount */) 4 | .e('span', { class: 'bar' }, 0); 5 | 6 | expect(div.firstChild.nodeName).to.equal('span'); 7 | 8 | div.removeChildren(); 9 | expect(div.firstChild).to.equal(undefined); 10 | expect(div.childNodes.length).to.equal(0); 11 | 12 | var newChild = helpers.vdom.createElement('h1', null, 1) 13 | .t('New child'); 14 | 15 | div.appendChild(newChild); 16 | 17 | expect(div.firstChild).to.equal(newChild); 18 | expect(div.childNodes.length).to.equal(1); 19 | 20 | return div; 21 | }; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var HTMLElement = require('./HTMLElement'); 4 | var Text = require('./Text'); 5 | var Comment = require('./Comment'); 6 | var DocumentFragment = require('./DocumentFragment'); 7 | 8 | function createElement(tagName, attrs, childCount, key) { 9 | return new HTMLElement(tagName, attrs, childCount, key); 10 | } 11 | 12 | function createText(value) { 13 | return new Text(value); 14 | } 15 | 16 | function createComment(value) { 17 | return new Comment(value); 18 | } 19 | 20 | function createDocumentFragment() { 21 | return new DocumentFragment(); 22 | } 23 | 24 | exports.createElement = createElement; 25 | exports.createText = createText; 26 | exports.createComment = createComment; 27 | exports.createDocumentFragment = createDocumentFragment; -------------------------------------------------------------------------------- /test/autotests-create/isSameNode-createElement/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | 3 | module.exports = function(helpers) { 4 | var div = helpers.vdom.createElement('div', null, 0 /* childCount */, 'abc123' /* key */); 5 | var span = helpers.vdom.createElement('span', null, 0 /* childCount */); 6 | 7 | var divClone = div.cloneNode(); 8 | expect(div.isSameNode(divClone)).to.equal(true); 9 | expect(divClone.isSameNode(div)).to.equal(true); 10 | 11 | expect(div.isSameNode(span)).to.equal(false); 12 | expect(span.isSameNode(div)).to.equal(false); 13 | 14 | var realDiv = divClone.actualize(helpers.document); 15 | expect(div.isSameNode(realDiv)).to.equal(true); 16 | expect(divClone.isSameNode(realDiv)).to.equal(true); 17 | 18 | return div; 19 | }; -------------------------------------------------------------------------------- /test/autotests-create/static-tree/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | 3 | module.exports = function(helpers) { 4 | var link = helpers.vdom.createElement('a', { 'href': 'http://ebay.com' }, 1 /* childCount */) 5 | .t('eBay'); 6 | 7 | var el = helpers.vdom.createElement('div', { 'class': 'foo', 'onclick': 'doSomething()' }, 2 /* childCount */) 8 | .n(link) 9 | .e('span', null, 0); 10 | 11 | var linkClone = el.firstChild; 12 | 13 | 14 | expect(linkClone).to.not.equal(link); 15 | expect(link.parentNode).to.equal(undefined); 16 | expect(link.nextSibling).to.equal(undefined); 17 | 18 | expect(linkClone.nextSibling.nodeName).to.equal('span'); 19 | expect(linkClone.parentNode.nodeName).to.equal('div'); 20 | 21 | 22 | return el; 23 | }; -------------------------------------------------------------------------------- /test/autotests-create/doc-fragment-deeply-nested-empty/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | var root = helpers.vdom.createDocumentFragment(); 3 | 4 | var docFragmentA = helpers.vdom.createDocumentFragment(); 5 | 6 | var docFragmentAA = helpers.vdom.createDocumentFragment(); 7 | docFragmentA.appendChild(docFragmentAA); 8 | 9 | var docFragmentB = helpers.vdom.createDocumentFragment(); 10 | 11 | var docFragmentBB = helpers.vdom.createDocumentFragment(); 12 | docFragmentB.appendChild(docFragmentBB); 13 | 14 | docFragmentBB.appendChild(helpers.vdom.createText('bb1')); 15 | docFragmentBB.appendChild(helpers.vdom.createText('bb2')); 16 | 17 | root.appendChild(docFragmentA); 18 | root.appendChild(docFragmentB); 19 | 20 | return root.actualize(helpers.document); 21 | }; -------------------------------------------------------------------------------- /test/autotests-virtualize/math/virtualized-expected.html: -------------------------------------------------------------------------------- 1 | <math:math xmlns="http://www.w3.org/1998/Math/MathML"> 2 | "\n" 3 | <math:matrix> 4 | "\n " 5 | <math:matrixrow> 6 | "\n " 7 | <math:cn> 8 | " 0 " 9 | " " 10 | <math:cn> 11 | " 1 " 12 | " " 13 | <math:cn> 14 | " 0 " 15 | "\n " 16 | "\n " 17 | <math:matrixrow> 18 | "\n " 19 | <math:cn> 20 | " 0 " 21 | " " 22 | <math:cn> 23 | " 0 " 24 | " " 25 | <math:cn> 26 | " 1 " 27 | "\n " 28 | "\n " 29 | <math:matrixrow> 30 | "\n " 31 | <math:cn> 32 | " 1 " 33 | " " 34 | <math:cn> 35 | " 0 " 36 | " " 37 | <math:cn> 38 | " 0 " 39 | "\n " 40 | "\n" 41 | "\n" 42 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": [ 3 | 4 | ], 5 | 6 | "globals": { 7 | "define": true, 8 | "require": true 9 | }, 10 | 11 | "node" : true, 12 | "esnext" : true, 13 | "browser" : false, 14 | "boss" : false, 15 | "curly": false, 16 | "debug": false, 17 | "devel": false, 18 | "eqeqeq": true, 19 | "evil": true, 20 | "forin": false, 21 | "immed": true, 22 | "laxbreak": false, 23 | "newcap": true, 24 | "noarg": true, 25 | "noempty": false, 26 | "nonew": true, 27 | "nomen": false, 28 | "onevar": false, 29 | "plusplus": false, 30 | "regexp": false, 31 | "undef": true, 32 | "sub": false, 33 | "white": false, 34 | "eqeqeq": false, 35 | "latedef": false, 36 | "unused": "vars", 37 | "jquery": true, 38 | "strict": false, 39 | "eqnull": true 40 | } -------------------------------------------------------------------------------- /benchmark/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": [ 3 | 4 | ], 5 | 6 | "globals": { 7 | "define": true, 8 | "require": true 9 | }, 10 | 11 | "node" : true, 12 | "esnext" : true, 13 | "browser" : true, 14 | "boss" : false, 15 | "curly": false, 16 | "debug": false, 17 | "devel": false, 18 | "eqeqeq": true, 19 | "evil": true, 20 | "forin": false, 21 | "immed": true, 22 | "laxbreak": false, 23 | "newcap": true, 24 | "noarg": true, 25 | "noempty": false, 26 | "nonew": true, 27 | "nomen": false, 28 | "onevar": false, 29 | "plusplus": false, 30 | "regexp": false, 31 | "undef": true, 32 | "sub": false, 33 | "white": false, 34 | "eqeqeq": false, 35 | "latedef": false, 36 | "unused": "vars", 37 | "jquery": true, 38 | "strict": false, 39 | "eqnull": true 40 | } -------------------------------------------------------------------------------- /test/autotests-create/doc-fragment-deeply-nested/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | var root = helpers.vdom.createDocumentFragment(); 3 | 4 | var docFragmentA = helpers.vdom.createDocumentFragment(); 5 | 6 | var docFragmentAA = helpers.vdom.createDocumentFragment(); 7 | docFragmentA.appendChild(docFragmentAA); 8 | 9 | docFragmentAA.appendChild(helpers.vdom.createElement('div', { class: 'aa1' })); 10 | docFragmentAA.appendChild(helpers.vdom.createElement('div', { class: 'aa2' })); 11 | 12 | var docFragmentB = helpers.vdom.createDocumentFragment(); 13 | docFragmentB.appendChild(helpers.vdom.createElement('div', { class: 'b1' })); 14 | docFragmentB.appendChild(helpers.vdom.createElement('div', { class: 'b2' })); 15 | 16 | root.appendChild(docFragmentA); 17 | root.appendChild(docFragmentB); 18 | 19 | return root; 20 | }; -------------------------------------------------------------------------------- /test/autotests-create/doc-fragment-deeply-nested-text/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(helpers) { 2 | var root = helpers.vdom.createDocumentFragment(); 3 | 4 | var docFragmentA = helpers.vdom.createDocumentFragment(); 5 | 6 | var docFragmentAA = helpers.vdom.createDocumentFragment(); 7 | docFragmentA.appendChild(docFragmentAA); 8 | 9 | docFragmentAA.appendChild(helpers.vdom.createText('aa1')); 10 | docFragmentAA.appendChild(helpers.vdom.createText('aa2')); 11 | 12 | var docFragmentB = helpers.vdom.createDocumentFragment(); 13 | 14 | var docFragmentBB = helpers.vdom.createDocumentFragment(); 15 | docFragmentB.appendChild(docFragmentBB); 16 | 17 | docFragmentBB.appendChild(helpers.vdom.createText('bb1')); 18 | docFragmentBB.appendChild(helpers.vdom.createText('bb2')); 19 | 20 | root.appendChild(docFragmentA); 21 | root.appendChild(docFragmentB); 22 | 23 | return root.actualize(helpers.document); 24 | }; -------------------------------------------------------------------------------- /test/create-test.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var markoVDOM = require('../'); 3 | var fs = require('fs'); 4 | var toHTML = require('./util/toHTML'); 5 | 6 | var jsdom = require("jsdom").jsdom; 7 | var document = jsdom('<html><body></body></html>'); 8 | 9 | describe('marko-vdom', () => { 10 | require('./util/autotest').scanDir( 11 | path.join(__dirname, 'autotests-create'), 12 | function(dir, helpers, done) { 13 | helpers.vdom = markoVDOM; 14 | helpers.document = document; 15 | 16 | var mainPath = path.join(dir, 'index.js'); 17 | if (fs.existsSync(mainPath)) { 18 | var main = require(mainPath); 19 | var rootNode = main(helpers); 20 | 21 | var rootNodeHTML = rootNode != null ? toHTML(rootNode) : '(null)'; 22 | helpers.compare(rootNodeHTML, '.html'); 23 | } 24 | done(); 25 | } 26 | ); 27 | }); -------------------------------------------------------------------------------- /benchmark/codegen-create/html-tabs.html: -------------------------------------------------------------------------------- 1 | <div> 2 | 3 | <!-- Nav tabs --> 4 | <ul class="nav nav-tabs" role="tablist"> 5 | <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 6 | <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 7 | <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 8 | <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> 9 | </ul> 10 | 11 | <!-- Tab panes --> 12 | <div class="tab-content"> 13 | <div role="tabpanel" class="tab-pane active" id="home">...</div> 14 | <div role="tabpanel" class="tab-pane" id="profile">...</div> 15 | <div role="tabpanel" class="tab-pane" id="messages">...</div> 16 | <div role="tabpanel" class="tab-pane" id="settings">...</div> 17 | </div> 18 | 19 | </div> -------------------------------------------------------------------------------- /test/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": [ 3 | "it", 4 | "xit", 5 | "console", 6 | "describe", 7 | "xdescribe", 8 | "beforeEach", 9 | "before", 10 | "after", 11 | "waits", 12 | "waitsFor", 13 | "runs" 14 | ], 15 | "node" : true, 16 | "es5" : false, 17 | "esnext": true, 18 | "browser" : true, 19 | "boss" : false, 20 | "curly": false, 21 | "debug": false, 22 | "devel": false, 23 | "eqeqeq": true, 24 | "evil": true, 25 | "forin": false, 26 | "immed": true, 27 | "laxbreak": false, 28 | "newcap": true, 29 | "noarg": true, 30 | "noempty": false, 31 | "nonew": true, 32 | "nomen": false, 33 | "onevar": false, 34 | "plusplus": false, 35 | "regexp": false, 36 | "undef": true, 37 | "sub": false, 38 | "white": false, 39 | "eqeqeq": false, 40 | "latedef": false, 41 | "unused": "vars", 42 | "eqnull": true 43 | } 44 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Patrick Steele-Idem <pnidem@gmail.com> (psteeleidem.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /src/DocumentFragment.js: -------------------------------------------------------------------------------- 1 | var Node = require('./Node'); 2 | var inherit = require('raptor-util/inherit'); 3 | var extend = require('raptor-util/extend'); 4 | 5 | function DocumentFragmentClone(other) { 6 | extend(this, other); 7 | this.parentNode = undefined; 8 | this._nextSibling = undefined; 9 | } 10 | 11 | function DocumentFragment(documentFragment) { 12 | Node.call(this, null /* childCount */); 13 | this.namespaceURI = undefined; 14 | } 15 | 16 | DocumentFragment.prototype = { 17 | nodeType: 11, 18 | 19 | _nsAware: true, 20 | 21 | cloneNode: function() { 22 | return new DocumentFragmentClone(this); 23 | }, 24 | 25 | actualize: function(document) { 26 | var docFragment = document.createDocumentFragment(); 27 | 28 | var curChild = this.firstChild; 29 | 30 | while(curChild) { 31 | docFragment.appendChild(curChild.actualize(document)); 32 | curChild = curChild.nextSibling; 33 | } 34 | 35 | return docFragment; 36 | } 37 | }; 38 | 39 | inherit(DocumentFragment, Node); 40 | 41 | DocumentFragmentClone.prototype = DocumentFragment.prototype; 42 | 43 | module.exports = DocumentFragment; -------------------------------------------------------------------------------- /test/autotests-create/cloneNode/index.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect; 2 | 3 | module.exports = function(helpers) { 4 | var el = helpers.vdom.createElement('div', { 5 | 'class': 'foo', 6 | 'onclick': 'doSomething()' 7 | }, 1 /* childCount */) 8 | .e('svg', { 9 | width: '100', 10 | height: '100' 11 | }, 1) 12 | .e('circle', { 13 | 'cx': '50', 14 | 'cy': '50', 15 | 'r': '40', 16 | 'stroke': 'green', 17 | 'stroke-width': '4', 18 | 'fill': 'yellow', 19 | 'xlink:href': 'http://ebay.com/' 20 | }, 0); 21 | 22 | var clone = el.cloneNode(); 23 | expect(clone).to.not.equal(el); 24 | expect(clone.nodeName).to.equal('div'); 25 | expect(clone.hasAttributeNS(null, 'class')).to.equal(true); 26 | expect(clone.firstChild).to.equal(el.firstChild); 27 | 28 | var root = helpers.vdom.createElement('div', { class: 'root' }); 29 | 30 | root.appendChild(clone); 31 | 32 | expect(el.parentNode).to.equal(undefined); 33 | expect(clone.parentNode).to.equal(root); 34 | 35 | return root; 36 | }; -------------------------------------------------------------------------------- /benchmark/codegen-create/codegen-dom.js: -------------------------------------------------------------------------------- 1 | module.exports = function(node) { 2 | 3 | var nextId = 0; 4 | 5 | var code = ''; 6 | 7 | function codegenEl(node, level) { 8 | var varName = level === 0 ? 'root' : `node${nextId++}`; 9 | 10 | code += `var ${varName} = document.createElement(${JSON.stringify(node.nodeName)})\n`; 11 | 12 | var attributes = node.attributes; 13 | 14 | for (var i=0; i<attributes.length; i++) { 15 | var attr = attributes[i]; 16 | code += `${varName}.setAttribute(${JSON.stringify(attr.name)}, ${JSON.stringify(attr.value)})\n`; 17 | } 18 | 19 | var curChild = node.firstChild; 20 | while(curChild) { 21 | 22 | if (curChild.nodeType === 1) { 23 | var childVarName = codegenEl(curChild, level + 1); 24 | code += `${varName}.appendChild(${childVarName})\n`; 25 | } else if (curChild.nodeType === 3) { 26 | code += `${varName}.appendChild(document.createTextNode(${JSON.stringify(curChild.nodeValue)}))\n`; 27 | } 28 | 29 | curChild = curChild.nextSibling; 30 | } 31 | 32 | return varName; 33 | } 34 | 35 | codegenEl(node, 0); 36 | 37 | code += '\nreturn root;\n'; 38 | 39 | return code; 40 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "marko-vdom", 3 | "version": "1.0.1", 4 | "description": "Virtual DOM implementation for use with Marko and/or morphdom", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "test": "npm run mocha && npm run jshint", 8 | "mocha": "mocha --ui bdd --reporter spec ./test/", 9 | "mocha-debug": "node-debug _mocha ./test/", 10 | "jshint": "jshint src/", 11 | "benchmark": "node benchmark/run.js", 12 | "test-coverage": "istanbul cover _mocha -- --ui bdd --reporter spec ./test/ && npm run jshint", 13 | "coveralls": "cat ./coverage/lcov.info | coveralls", 14 | "dist": "mkdir -p dist && browserify src/all.js > dist/marko-vdom-umd.js --standalone MarkoVDOM" 15 | }, 16 | "keywords": [ 17 | "vdom", 18 | "dom", 19 | "marko", 20 | "morphdom", 21 | "virtual", 22 | "virtual-dom" 23 | ], 24 | "author": "Patrick Steele-Idem <pnidem@gmail.com>", 25 | "license": "MIT", 26 | "devDependencies": { 27 | "benchmark": "^2.1.1", 28 | "chai": "^4.0.0", 29 | "coveralls": "^2.11.12", 30 | "istanbul": "^0.4.5", 31 | "jsdom": "^9.4.2", 32 | "jshint": "^2.9.3", 33 | "lodash": "^4.15.0", 34 | "mocha": "^3.0.2", 35 | "open": "0.0.5" 36 | }, 37 | "dependencies": { 38 | "raptor-util": "^3.1.0" 39 | }, 40 | "greenkeeper": { 41 | "ignore": [ 42 | "jsdom" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /test/virtualize-test.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var virtualize = require('../virtualize'); 3 | var fs = require('fs'); 4 | var toHTML = require('./util/toHTML'); 5 | var jsdom = require("jsdom").jsdom; 6 | 7 | describe('marko-vdom/virtualize', () => { 8 | require('./util/autotest').scanDir( 9 | path.join(__dirname, 'autotests-virtualize'), 10 | function(dir, helpers, done) { 11 | helpers.virtualize = virtualize; 12 | 13 | var inputPath = path.join(dir, 'input.html'); 14 | if (fs.existsSync(inputPath)) { 15 | var inputHtml = fs.readFileSync(inputPath, { encoding: 'utf8' }); 16 | var document = jsdom('<html><body>' + inputHtml + '</body></html>'); 17 | var domNode = document.body.firstChild; 18 | var vdomNode = virtualize(domNode); 19 | var vdomHTML = toHTML(vdomNode); 20 | helpers.compare(vdomHTML, { suffix: '.html', prefix: 'virtualized-' }); 21 | 22 | var actualDOM = vdomNode.actualize(document); 23 | 24 | fs.writeFileSync(path.join(dir, 'actualized-expected.html'), vdomHTML, { encoding: 'utf8' }); 25 | var actualDOMHTML = toHTML(actualDOM); 26 | helpers.compare(actualDOMHTML, { suffix: '.html', prefix: 'actualized-' }); 27 | } 28 | done(); 29 | } 30 | ); 31 | }); -------------------------------------------------------------------------------- /benchmark/codegen-create/run.js: -------------------------------------------------------------------------------- 1 | var jsdom = require("jsdom").jsdom; 2 | var fs = require('fs'); 3 | var path = require('path'); 4 | 5 | function generateCode(name, htmlFile, rootNode, html) { 6 | var generator = require('./codegen-' + name); 7 | 8 | 9 | var code = generator(rootNode, html); 10 | var wrappedCode = `window.createBenchmarks[${JSON.stringify(htmlFile+'-'+name)}]=function() {\n${code}\n}`; 11 | 12 | var generateInitCode = generator.generateInitCode; 13 | 14 | if (generateInitCode) { 15 | wrappedCode = ` 16 | (function() { 17 | ${generateInitCode(rootNode, html)} 18 | ${wrappedCode} 19 | }())`; 20 | } 21 | fs.writeFileSync(path.join(__dirname, `benchmark-${htmlFile}-${name}.js`), wrappedCode, { encoding: 'utf8' }); 22 | } 23 | 24 | var methods = [ 25 | 'dom', 26 | 'dom-innerHTML', 27 | 'marko-vdom', 28 | 'react' 29 | ]; 30 | 31 | var htmlFiles = fs.readdirSync(__dirname) 32 | .filter(function(name) { 33 | return name.startsWith('html-'); 34 | }); 35 | 36 | htmlFiles.forEach(function(htmlFile) { 37 | var name = htmlFile.substring('html-'.length).slice(0, 0-'.html'.length); 38 | var html = fs.readFileSync(path.join(__dirname, htmlFile), { encoding: 'utf8' }); 39 | 40 | var doc = jsdom(html); 41 | 42 | var rootNode = doc.body.firstChild; 43 | 44 | methods.forEach(function(methodName) { 45 | generateCode(methodName, name, rootNode, html); 46 | }); 47 | }); 48 | -------------------------------------------------------------------------------- /benchmark/benchmark-create.js: -------------------------------------------------------------------------------- 1 | window.registerBenchmark('create', function(app) { 2 | var Suite = window.Benchmark.Suite; 3 | 4 | var names = [ 5 | 'dom', 6 | 'dom-innerHTML', 7 | 'marko-vdom', 8 | 'react' 9 | ]; 10 | 11 | var htmlFiles = ['todomvc', 'marko-docs', 'tabs']; 12 | 13 | function loadScripts() { 14 | 15 | window.createBenchmarks = {}; 16 | 17 | var scripts = []; 18 | 19 | names.forEach(function(name) { 20 | htmlFiles.forEach(function(htmlFile) { 21 | scripts.push('./codegen-create/benchmark-' + htmlFile + '-' + name + '.js'); 22 | }); 23 | }); 24 | 25 | return app.loadScripts(scripts); 26 | } 27 | 28 | function runForHtmlFile(htmlFile) { 29 | return loadScripts(htmlFile) 30 | .then(function() { 31 | var suite = new Suite('create-' + htmlFile); 32 | 33 | names.forEach(function(name) { 34 | suite.add(name, function() { 35 | return window.createBenchmarks[htmlFile + '-' + name](); 36 | }); 37 | }); 38 | 39 | return app.runSuite(suite); 40 | }); 41 | } 42 | 43 | var loadScriptsPromise = loadScripts(); 44 | 45 | return function() { 46 | var promiseChain = loadScriptsPromise; 47 | 48 | htmlFiles.forEach(function(htmlFile) { 49 | promiseChain = promiseChain.then(function() { 50 | return runForHtmlFile(htmlFile); 51 | }); 52 | }); 53 | 54 | return promiseChain; 55 | }; 56 | }); -------------------------------------------------------------------------------- /benchmark/codegen-create/codegen-marko-vdom.js: -------------------------------------------------------------------------------- 1 | function indentStr(level) { 2 | var str = ''; 3 | for (var i=0; i<level; i++) { 4 | str += ' '; 5 | } 6 | 7 | return str; 8 | } 9 | module.exports = function(node) { 10 | var code = ''; 11 | 12 | function codegenEl(node, level) { 13 | if (level === 0) { 14 | code += 'createElement'; 15 | } else { 16 | code += '.e'; 17 | } 18 | 19 | var attrsMap = {}; 20 | 21 | var attributes = node.attributes; 22 | for (var i=0; i<attributes.length; i++) { 23 | var attr = attributes[i]; 24 | attrsMap[attr.name] = attr.value; 25 | } 26 | 27 | code += `(${JSON.stringify(node.nodeName)}, ${JSON.stringify(attrsMap)}, ${node.childNodes.length})\n`; 28 | // codegenAttrs(node.attributes, level + 1); 29 | 30 | var curChild = node.firstChild; 31 | while(curChild) { 32 | codegen(curChild, level + 1); 33 | curChild = curChild.nextSibling; 34 | } 35 | } 36 | 37 | function codegenText(node, level) { 38 | code += `.t(${JSON.stringify(node.nodeValue)})\n`; 39 | } 40 | 41 | function codegen(node, level) { 42 | code += indentStr(level); 43 | 44 | if (node.nodeType === 1) { 45 | codegenEl(node, level); 46 | } else if (node.nodeType === 3) { 47 | codegenText(node, level); 48 | } 49 | } 50 | 51 | codegen(node, 0); 52 | 53 | return 'return ' + code + '\n'; 54 | }; 55 | 56 | module.exports.generateInitCode = function(node, html) { 57 | return ` 58 | var MarkoVDOM = window.MarkoVDOM; 59 | var createElement = MarkoVDOM.createElement; 60 | `; 61 | 62 | }; 63 | 64 | -------------------------------------------------------------------------------- /benchmark/codegen-create/codegen-react.js: -------------------------------------------------------------------------------- 1 | function indentStr(level) { 2 | var str = ''; 3 | for (var i=0; i<level; i++) { 4 | str += ' '; 5 | } 6 | 7 | return str; 8 | } 9 | 10 | module.exports = function(node) { 11 | function codegenChildNodes(node, level) { 12 | 13 | var curChild = node.firstChild; 14 | if (!curChild) { 15 | return 'null'; 16 | } 17 | 18 | var code = '[\n'; 19 | 20 | 21 | var childLevel = level + 2; 22 | while(curChild) { 23 | code += indentStr(childLevel) + codegen(curChild, childLevel); 24 | curChild = curChild.nextSibling; 25 | 26 | if (curChild) { 27 | code += ',\n'; 28 | } else { 29 | code += '\n'; 30 | } 31 | } 32 | 33 | code += indentStr(level + 1) + ']'; 34 | 35 | return code; 36 | } 37 | 38 | function codegenEl(node, level) { 39 | 40 | var attributesMap = null; 41 | 42 | var attributes = node.attributes; 43 | if (attributes.length) { 44 | attributesMap = {}; 45 | 46 | for (var i=0; i<attributes.length; i++) { 47 | var attr = attributes[i]; 48 | var attrName = attr.name; 49 | var attrValue = attr.value; 50 | 51 | if (attrName === 'class') { 52 | attrName = 'className'; 53 | } 54 | attributesMap[attrName] = attrValue; 55 | } 56 | } 57 | 58 | 59 | return `React.createElement(${JSON.stringify(node.nodeName)}, ${JSON.stringify(attributesMap)}, ${codegenChildNodes(node, level)})`; 60 | } 61 | 62 | function codegen(node, level) { 63 | if (node.nodeType === 1) { 64 | return codegenEl(node, level); 65 | } else if (node.nodeType === 3) { 66 | return JSON.stringify(node.nodeValue); 67 | } 68 | } 69 | 70 | return 'return ' + codegen(node, 0) + '\n'; 71 | }; -------------------------------------------------------------------------------- /src/virtualize.js: -------------------------------------------------------------------------------- 1 | var markoVDOM = require('./'); 2 | 3 | var createElement = markoVDOM.createElement; 4 | var createText = markoVDOM.createText; 5 | var createComment = markoVDOM.createComment; 6 | var createDocumentFragment = markoVDOM.createDocumentFragment; 7 | 8 | function virtualizeChildNodes(node, vdomParent) { 9 | var curChild = node.firstChild; 10 | while(curChild) { 11 | vdomParent.appendChild(virtualize(curChild)); 12 | curChild = curChild.nextSibling; 13 | } 14 | } 15 | 16 | function virtualize(node) { 17 | if (node.nodeType === 1) { // HtmlElement node 18 | var attributes = node.attributes; 19 | var attrCount = attributes.length; 20 | 21 | var childNodes = node.childNodes; 22 | var childCount = childNodes.length; 23 | 24 | var attrs; 25 | 26 | if (attrCount) { 27 | attrs = {}; 28 | 29 | for (var i=0; i<attrCount; i++) { 30 | var attr = attributes[i]; 31 | var attrName; 32 | 33 | if (attr.namespaceURI === 'http://www.w3.org/1999/xlink' && attr.localName === 'href') { 34 | attrName = 'xlink:href'; 35 | } else { 36 | attrName = attr.name; 37 | } 38 | 39 | attrs[attrName] = attr.value; 40 | } 41 | } 42 | 43 | var vdomEL = createElement(node.nodeName, attrs, childCount); 44 | 45 | if (vdomEL._isTextArea) { 46 | vdomEL.value = node.value; 47 | } else { 48 | virtualizeChildNodes(node, vdomEL); 49 | } 50 | 51 | return vdomEL; 52 | } else if (node.nodeType === 3) { // Text node 53 | return createText(node.nodeValue); 54 | } else if (node.nodeType === 8) { // Text node 55 | return createComment(node.nodeValue); 56 | } else if (node.nodeType === 11) { // DocumentFragment node 57 | var vdomDocFragment = createDocumentFragment(); 58 | virtualizeChildNodes(node, vdomDocFragment); 59 | } 60 | } 61 | 62 | module.exports = virtualize; -------------------------------------------------------------------------------- /test/util/autotest.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var enabledTest = process.env.TEST; 3 | var path = require('path'); 4 | var assert = require('assert'); 5 | 6 | 7 | function compareHelper(dir, actual, prefix, suffix) { 8 | var actualPath = path.join(dir, prefix + 'actual' + suffix); 9 | var expectedPath = path.join(dir, prefix + 'expected' + suffix); 10 | 11 | var isObject = typeof actual === 'string' ? false : true; 12 | var actualString = isObject ? JSON.stringify(actual, null, 4) : actual; 13 | fs.writeFileSync(actualPath, actualString, { encoding: 'utf8' }); 14 | 15 | var expectedString; 16 | 17 | try { 18 | expectedString = fs.readFileSync(expectedPath, { encoding: 'utf8' }); 19 | } catch(e) { 20 | expectedString = isObject ? '"TBD"' : 'TBD'; 21 | fs.writeFileSync(expectedPath, expectedString, {encoding: 'utf8'}); 22 | } 23 | 24 | var expected = isObject ? JSON.parse(expectedString) : expectedString; 25 | assert.deepEqual(actual, expected); 26 | } 27 | 28 | function autoTest(name, dir, run, options, done) { 29 | options = options || {}; 30 | 31 | var helpers = { 32 | compare(actual, prefix, suffix) { 33 | if (typeof prefix === 'object') { 34 | var options = prefix; 35 | suffix = options.suffix; 36 | prefix = options.prefix; 37 | } else if (arguments.length === 2) { 38 | suffix = prefix; 39 | prefix = null; 40 | } 41 | 42 | compareHelper(dir, actual, prefix || '', suffix || ''); 43 | }, 44 | 45 | readFileSync(relPath) { 46 | var fullPath = path.resolve(dir, relPath); 47 | return fs.readFileSync(fullPath, { encoding: 'utf8' }); 48 | } 49 | }; 50 | 51 | run(dir, helpers, done); 52 | } 53 | 54 | exports.scanDir = function(autoTestDir, run, options) { 55 | describe('autotest', function() { 56 | fs.readdirSync(autoTestDir) 57 | .forEach(function(name) { 58 | if (name.charAt(0) === '.') { 59 | return; 60 | } 61 | 62 | var itFunc = it; 63 | 64 | if (enabledTest && name === enabledTest) { 65 | itFunc = it.only; 66 | } 67 | 68 | var dir = path.join(autoTestDir, name); 69 | 70 | itFunc(`[${name}] `, function(done) { 71 | autoTest(name, dir, run, options, done); 72 | }); 73 | }); 74 | }); 75 | }; -------------------------------------------------------------------------------- /benchmark/app.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var resultsEl = document.getElementById('results'); 3 | var running = false; 4 | var benchmarks = {}; 5 | 6 | function loadScript(path) { 7 | return new Promise(function(resolve, reject) { 8 | var script = document.createElement('script'); 9 | script.src = path; 10 | script.onload = function () { 11 | resolve(); 12 | }; 13 | 14 | script.onerror = function(e) { 15 | reject(e); 16 | }; 17 | 18 | document.head.appendChild(script); //or something of the likes 19 | }); 20 | } 21 | 22 | function loadScripts(paths) { 23 | return Promise.all(paths.map(function(path) { 24 | return loadScript(path); 25 | })); 26 | } 27 | 28 | function runSuite(suite) { 29 | return new Promise(function(resolve, reject) { 30 | if (running) { 31 | return; 32 | } 33 | 34 | running = true; 35 | 36 | suite 37 | .on('start', function(event) { 38 | resultsEl.innerHTML += 'Running "' + suite.name + '"...\n'; 39 | }) 40 | .on('cycle', function(event) { 41 | resultsEl.innerHTML += String(event.target) + '\n'; 42 | }) 43 | .on('complete', function() { 44 | resultsEl.innerHTML += 'Fastest is ' + this.filter('fastest').map('name') + '\n\n--------------\n\n'; 45 | 46 | running = false; 47 | 48 | suite.off('start cycle complete'); 49 | resolve(); 50 | }) 51 | .on('error', function(e) { 52 | running = false; 53 | 54 | suite.off('start cycle complete error'); 55 | reject(e.target.error); 56 | }) 57 | // run async 58 | .run({ 'async': true }); 59 | }); 60 | } 61 | 62 | var app = { 63 | loadScript, 64 | loadScripts, 65 | runSuite 66 | }; 67 | 68 | window.registerBenchmark = function(name, func) { 69 | benchmarks[name] = func(app); 70 | }; 71 | 72 | document.body.addEventListener('click', function(event) { 73 | if (running) { 74 | return; 75 | } 76 | var target = event.target; 77 | var benchmarkName = target.getAttribute('data-benchmark'); 78 | if (benchmarkName) { 79 | var oldButtonLabel = target.innerHTML; 80 | target.innerHTML = oldButtonLabel + ' - running...'; 81 | resultsEl.innerHTML = ''; 82 | 83 | var benchmarkFunc = benchmarks[benchmarkName]; 84 | 85 | benchmarkFunc() 86 | .then(function() { 87 | target.innerHTML = oldButtonLabel; 88 | 89 | resultsEl.innerHTML += '\nDONE!'; 90 | }) 91 | .catch(function(e) { 92 | target.innerHTML = oldButtonLabel; 93 | console.error(e); 94 | resultsEl.innerHTML = e.toString(); 95 | }); 96 | } 97 | }); 98 | }()); 99 | -------------------------------------------------------------------------------- /benchmark/benchmark-walk.js: -------------------------------------------------------------------------------- 1 | window.registerBenchmark('walk', function(app) { 2 | var Suite = window.Benchmark.Suite; 3 | var MarkoVDOM = window.MarkoVDOM; 4 | 5 | var suite = new Suite('walk'); 6 | 7 | var todomvcDOM = document.getElementById('todoapp'); 8 | var todomvcDOMVirtual = MarkoVDOM.virtualize(todomvcDOM); 9 | 10 | function toHTML(node) { 11 | 12 | // NOTE: We don't use XMLSerializer because we need to sort the attributes to correctly compare output HTML strings 13 | // BAD: return (new XMLSerializer()).serializeToString(node); 14 | var html = ''; 15 | function serializeHelper(node, indent) { 16 | if (node.nodeType === 1) { 17 | serializeElHelper(node, indent); 18 | } else if (node.nodeType === 3) { 19 | serializeTextHelper(node, indent); 20 | } else if (node.nodeType === 8) { 21 | serializeCommentHelper(node, indent); 22 | } else { 23 | console.log('Invalid node:', node); 24 | html += indent + `INVALID NODE TYPE ${node.nodeType}\n`; 25 | // throw new Error('Unexpected node type'); 26 | } 27 | } 28 | 29 | function serializeElHelper(el, indent) { 30 | var tagName = el.nodeName; 31 | 32 | if (el.namespaceURI === 'http://www.w3.org/2000/svg') { 33 | tagName = 'svg:' + tagName; 34 | } else if (el.namespaceURI === 'http://www.w3.org/1998/Math/MathML') { 35 | tagName = 'math:' + tagName; 36 | } 37 | 38 | html += indent + '<' + tagName; 39 | 40 | var attributes = el.attributes; 41 | var attributesArray = []; 42 | 43 | for (var i=0; i<attributes.length; i++) { 44 | var attr = attributes[i]; 45 | var attrName = attr.name; 46 | if (attr.namespaceURI) { 47 | attrName = attr.namespaceURI + ':' + attrName; 48 | } 49 | attributesArray.push(' ' + attrName + '="' + attr.value + '"'); 50 | } 51 | 52 | attributesArray.sort(); 53 | 54 | html += attributesArray.join(''); 55 | 56 | html += '>\n'; 57 | 58 | if (tagName.toUpperCase() === 'TEXTAREA') { 59 | html += indent + ' VALUE: ' + JSON.stringify(el.value) + '\n'; 60 | } else { 61 | var curChild = el.firstChild; 62 | while(curChild) { 63 | serializeHelper(curChild, indent + ' '); 64 | curChild = curChild.nextSibling; 65 | } 66 | } 67 | } 68 | 69 | function serializeTextHelper(node, indent) { 70 | html += indent + JSON.stringify(node.nodeValue) + '\n'; 71 | } 72 | 73 | function serializeCommentHelper(node, indent) { 74 | html += indent + '<!--' + JSON.stringify(node.nodeValue) + '-->\n'; 75 | } 76 | 77 | serializeHelper(node, ''); 78 | 79 | return html; 80 | } 81 | 82 | // add tests 83 | suite.add('real DOM', function() { 84 | return toHTML(todomvcDOM); 85 | }); 86 | 87 | suite.add('marko-vdom', function() { 88 | return toHTML(todomvcDOMVirtual); 89 | }); 90 | 91 | return function() { 92 | return app.runSuite(suite); 93 | }; 94 | }); -------------------------------------------------------------------------------- /test/util/toHTML.js: -------------------------------------------------------------------------------- 1 | function toHTML(node) { 2 | 3 | // NOTE: We don't use XMLSerializer because we need to sort the attributes to correctly compare output HTML strings 4 | // BAD: return (new XMLSerializer()).serializeToString(node); 5 | var html = ''; 6 | function serializeHelper(node, indent) { 7 | if (node.nodeType === 1) { 8 | serializeElHelper(node, indent); 9 | } else if (node.nodeType === 3) { 10 | serializeTextHelper(node, indent); 11 | } else if (node.nodeType === 8) { 12 | serializeCommentHelper(node, indent); 13 | } else { 14 | console.log('Invalid node:', node); 15 | html += indent + `INVALID NODE TYPE ${node.nodeType}\n`; 16 | // throw new Error('Unexpected node type'); 17 | } 18 | } 19 | 20 | function serializeElHelper(el, indent) { 21 | var tagName = el.nodeName; 22 | 23 | if (el.namespaceURI === 'http://www.w3.org/2000/svg') { 24 | tagName = 'svg:' + tagName; 25 | } else if (el.namespaceURI === 'http://www.w3.org/1998/Math/MathML') { 26 | tagName = 'math:' + tagName; 27 | } 28 | 29 | html += indent + '<' + tagName; 30 | 31 | var attributes = el.attributes; 32 | var attributesArray = []; 33 | var attrName; 34 | 35 | if (typeof attributes.length === 'number') { 36 | for (var i=0; i<attributes.length; i++) { 37 | var attr = attributes[i]; 38 | if (attr.namespaceURI) { 39 | attrName = attr.namespaceURI + ':' + attr.localName; 40 | } else { 41 | attrName = attr.name; 42 | } 43 | attributesArray.push(' ' + attrName + '="' + attr.value + '"'); 44 | } 45 | } else { 46 | for (attrName in attributes) { 47 | var attrValue = attributes[attrName]; 48 | if (typeof attrValue !== 'string') { 49 | if (attrValue === true) { 50 | attrValue = ''; 51 | } else if (!attrValue) { 52 | continue; 53 | } 54 | } 55 | 56 | if (attrName === 'xlink:href') { 57 | attrName = 'http://www.w3.org/1999/xlink:href'; 58 | } 59 | attributesArray.push(' ' + attrName + '="' + attrValue + '"'); 60 | } 61 | } 62 | 63 | attributesArray.sort(); 64 | 65 | html += attributesArray.join(''); 66 | 67 | html += '>\n'; 68 | 69 | if (tagName.toUpperCase() === 'TEXTAREA') { 70 | html += indent + ' VALUE: ' + JSON.stringify(el.value) + '\n'; 71 | } else { 72 | var curChild = el.firstChild; 73 | while(curChild) { 74 | serializeHelper(curChild, indent + ' '); 75 | curChild = curChild.nextSibling; 76 | } 77 | } 78 | 79 | 80 | 81 | // var childNodes = el.childNodes; 82 | // 83 | // if (childNodes && childNodes.length) { 84 | // for (i=0; i<childNodes.length; i++) { 85 | // serializeHelper(childNodes[i], indent + ' '); 86 | // } 87 | // } 88 | } 89 | 90 | function serializeTextHelper(node, indent) { 91 | html += indent + JSON.stringify(node.nodeValue) + '\n'; 92 | } 93 | 94 | function serializeCommentHelper(node, indent) { 95 | html += indent + '<!--' + JSON.stringify(node.nodeValue) + '-->\n'; 96 | } 97 | 98 | if (node.nodeType === 11 /* DocumentFragment */) { 99 | var curChild = node.firstChild; 100 | while(curChild) { 101 | serializeHelper(curChild, ''); 102 | curChild = curChild.nextSibling; 103 | } 104 | } else { 105 | serializeHelper(node, ''); 106 | } 107 | 108 | return html; 109 | } 110 | 111 | module.exports = toHTML; -------------------------------------------------------------------------------- /docs/benchmark-results.md: -------------------------------------------------------------------------------- 1 | Benchmark Results 2 | ================= 3 | 4 | Setup: 5 | 6 | - MacBook Pro (Retina, 15-inch, Mid 2014) 7 | - OS X 10.11.6 8 | - 2.8 GHz Intel Core i7 9 | - 16 GB 1600 MHz DDR3 10 | - Google Chrome - version 53.0.2785.101 (64-bit) 11 | - Firefox - version 48.0.2 12 | - Safari - version 9.1.3 (11601.7.8) 13 | - Safari Mobile on iPhone 6 - iOS version 10.0.1 14 | 15 | # DOM creation 16 | 17 | ## Google Chrome 18 | 19 | ```text 20 | Running "create-todomvc"... 21 | dom x 911 ops/sec ±8.12% (9 runs sampled) 22 | dom-innerHTML x 4,310 ops/sec ±19.58% (53 runs sampled) 23 | marko-vdom x 120,911 ops/sec ±1.77% (63 runs sampled) 24 | react x 77,839 ops/sec ±1.00% (63 runs sampled) 25 | Fastest is marko-vdom 26 | 27 | -------------- 28 | 29 | Running "create-marko-docs"... 30 | dom x 760 ops/sec ±16.98% (50 runs sampled) 31 | dom-innerHTML x 682 ops/sec ±9.05% (54 runs sampled) 32 | marko-vdom x 7,316 ops/sec ±4.68% (63 runs sampled) 33 | react x 7,495 ops/sec ±2.40% (63 runs sampled) 34 | Fastest is react,marko-vdom 35 | 36 | -------------- 37 | 38 | Running "create-tabs"... 39 | dom x 42,319 ops/sec ±3.97% (56 runs sampled) 40 | dom-innerHTML x 26,290 ops/sec ±7.77% (51 runs sampled) 41 | marko-vdom x 441,297 ops/sec ±1.79% (64 runs sampled) 42 | react x 270,895 ops/sec ±1.35% (61 runs sampled) 43 | Fastest is marko-vdom 44 | ``` 45 | 46 | ## Firefox 47 | 48 | ```text 49 | Running "create-todomvc"... 50 | dom x 2,749 ops/sec ±5.61% (18 runs sampled) 51 | dom-innerHTML x 4,539 ops/sec ±1.55% (27 runs sampled) 52 | marko-vdom x 32,360 ops/sec ±8.96% (36 runs sampled) 53 | react x 15,530 ops/sec ±6.16% (55 runs sampled) 54 | Fastest is marko-vdom 55 | 56 | -------------- 57 | 58 | Running "create-marko-docs"... 59 | dom x 268 ops/sec ±1.18% (59 runs sampled) 60 | dom-innerHTML x 573 ops/sec ±0.88% (59 runs sampled) 61 | marko-vdom x 3,545 ops/sec ±3.73% (57 runs sampled) 62 | react x 604 ops/sec ±4.64% (41 runs sampled) 63 | Fastest is marko-vdom 64 | 65 | -------------- 66 | 67 | Running "create-tabs"... 68 | dom x 23,940 ops/sec ±9.70% (53 runs sampled) 69 | dom-innerHTML x 22,090 ops/sec ±1.50% (60 runs sampled) 70 | marko-vdom x 261,119 ops/sec ±1.51% (60 runs sampled) 71 | react x 90,979 ops/sec ±0.72% (61 runs sampled) 72 | Fastest is marko-vdom 73 | ``` 74 | 75 | ## Safari 76 | 77 | ```text 78 | Running "create-todomvc"... 79 | dom x 6,040 ops/sec ±5.42% (34 runs sampled) 80 | dom-innerHTML x 5,715 ops/sec ±1.87% (33 runs sampled) 81 | marko-vdom x 12,032 ops/sec ±19.74% (43 runs sampled) 82 | react x 20,242 ops/sec ±3.02% (47 runs sampled) 83 | Fastest is react 84 | 85 | -------------- 86 | 87 | Running "create-marko-docs"... 88 | dom x 472 ops/sec ±37.90% (48 runs sampled) 89 | dom-innerHTML x 719 ops/sec ±3.57% (49 runs sampled) 90 | marko-vdom x 389 ops/sec ±145.42% (20 runs sampled) 91 | react x 1,324 ops/sec ±29.80% (50 runs sampled) 92 | Fastest is react 93 | 94 | -------------- 95 | 96 | Running "create-tabs"... 97 | dom x 30,399 ops/sec ±53.42% (47 runs sampled) 98 | dom-innerHTML x 29,246 ops/sec ±1.71% (59 runs sampled) 99 | marko-vdom x 51,313 ops/sec ±0.80% (62 runs sampled) 100 | react x 84,233 ops/sec ±1.53% (61 runs sampled) 101 | Fastest is react 102 | ``` 103 | 104 | ## Safari (mobile) 105 | 106 | ```text 107 | Running "create-todomvc"... 108 | dom x 2,040 ops/sec ±10.62% (52 runs sampled) 109 | dom-innerHTML x 1,510 ops/sec ±0.89% (59 runs sampled) 110 | marko-vdom x 7,684 ops/sec ±85.15% (27 runs sampled) 111 | react x 10,823 ops/sec ±2.52% (48 runs sampled) 112 | Fastest is react 113 | 114 | -------------- 115 | 116 | Running "create-marko-docs"... 117 | dom x 322 ops/sec ±13.83% (45 runs sampled) 118 | dom-innerHTML x 183 ops/sec ±0.92% (55 runs sampled) 119 | marko-vdom x 382 ops/sec ±113.12% (23 runs sampled) 120 | react x 435 ops/sec ±73.52% (35 runs sampled) 121 | Fastest is react 122 | 123 | -------------- 124 | 125 | Running "create-tabs"... 126 | dom x 14,919 ops/sec ±15.37% (48 runs sampled) 127 | dom-innerHTML x 7,738 ops/sec ±0.78% (60 runs sampled) 128 | marko-vdom x 70,597 ops/sec ±7.10% (33 runs sampled) 129 | react x 50,685 ops/sec ±1.82% (55 runs sampled) 130 | Fastest is marko-vdom 131 | ``` 132 | 133 | # DOM Tree Walking 134 | 135 | ## Google Chrome 136 | 137 | ```text 138 | real DOM x 5,060 ops/sec ±1.95% (58 runs sampled) 139 | marko-vdom x 15,145 ops/sec ±1.66% (57 runs sampled) 140 | Fastest is marko-vdom 141 | ``` 142 | 143 | ## Firefox 144 | 145 | ```text 146 | real DOM x 2,775 ops/sec ±5.48% (48 runs sampled) 147 | marko-vdom x 8,027 ops/sec ±3.93% (41 runs sampled) 148 | Fastest is marko-vdom 149 | ``` 150 | 151 | ## Safari 152 | 153 | ```text 154 | real DOM x 3,005 ops/sec ±2.25% (52 runs sampled) 155 | marko-vdom x 5,509 ops/sec ±2.32% (32 runs sampled) 156 | Fastest is marko-vdom 157 | ``` 158 | 159 | ## Safari (mobile) 160 | 161 | ```text 162 | real DOM x 1,295 ops/sec ±3.18% (53 runs sampled) 163 | marko-vdom x 3,010 ops/sec ±5.57% (43 runs sampled) 164 | Fastest is marko-vdom 165 | ``` -------------------------------------------------------------------------------- /src/Node.js: -------------------------------------------------------------------------------- 1 | var EMPTY_ARRAY = require('./util').EMPTY_ARRAY; 2 | 3 | var DocumentFragment; 4 | 5 | function assignNamespace(node, namespaceURI) { 6 | node.namespaceURI = namespaceURI; 7 | var childNodes = node.childNodes; 8 | var childCount = node._childCount; 9 | 10 | for (var i=0; i<childCount; i++) { 11 | var child = childNodes[i]; 12 | if (child._nsAware) { 13 | assignNamespace(childNodes[i], namespaceURI); 14 | } 15 | } 16 | } 17 | 18 | function Node(finalChildCount) { 19 | if (finalChildCount !== -1) { 20 | var childNodes; 21 | var firstChild; 22 | var lastChild; 23 | 24 | if (finalChildCount === 0) { 25 | childNodes = EMPTY_ARRAY; 26 | } else if (finalChildCount > 0) { 27 | childNodes = new Array(finalChildCount); 28 | } else { 29 | childNodes = []; 30 | } 31 | 32 | this.childNodes = childNodes; 33 | this._finalChildCount = finalChildCount; 34 | this._childCount = 0; 35 | this._firstChild = firstChild; 36 | this._lastChild = lastChild; 37 | } 38 | 39 | this.parentNode = undefined; 40 | this._nextSibling = undefined; 41 | } 42 | 43 | Node.prototype = { 44 | removeChildren: function() { 45 | this.childNodes.length = 0; 46 | this._firstChild = undefined; 47 | this._childCount = 0; 48 | this._lastChild = undefined; 49 | }, 50 | 51 | get firstChild() { 52 | var firstChild = this._firstChild; 53 | 54 | if (firstChild && firstChild.nodeType === 11 /* DocumentFragment */) { 55 | var nestedFirstChild = firstChild.firstChild; 56 | // The first child is a DocumentFragment node. 57 | // If the DocumentFragment node has a first child then we will return that. 58 | // Otherwise, the DocumentFragment node is not *really* the first child and 59 | // we need to skip to its next sibling 60 | return nestedFirstChild || firstChild.nextSibling; 61 | } 62 | 63 | return firstChild; 64 | }, 65 | 66 | get lastChild() { 67 | var lastChild = this._lastChild; 68 | 69 | if (lastChild && lastChild.nodeType === 11 /* DocumentFragment */) { 70 | return lastChild.lastChild; 71 | } 72 | 73 | return lastChild; 74 | }, 75 | 76 | get nextSibling() { 77 | var nextSibling = this._nextSibling; 78 | 79 | if (nextSibling) { 80 | if (nextSibling.nodeType === 11 /* DocumentFragment */) { 81 | var firstChild = nextSibling.firstChild; 82 | return firstChild || nextSibling.nextSibling; 83 | } 84 | } else { 85 | var parentNode = this.parentNode; 86 | if (parentNode && parentNode.nodeType === 11) { 87 | return parentNode.nextSibling; 88 | } 89 | } 90 | 91 | return nextSibling; 92 | }, 93 | 94 | appendDocumentFragment: function() { 95 | return this.appendChild(new DocumentFragment()); 96 | }, 97 | 98 | appendChild: function(child) { 99 | if (this._isTextArea) { 100 | if (child.nodeType === 3) { 101 | var currentValue = this.value; 102 | this.value = currentValue ? currentValue + child.nodeValue : child.nodeValue; 103 | } else { 104 | throw new Error('Invalid child'); 105 | } 106 | } else { 107 | var namespaceURI; 108 | 109 | if (child._nsAware && (namespaceURI = this.namespaceURI) && !child.namespaceURI) { 110 | assignNamespace(child, namespaceURI); 111 | } 112 | 113 | var index = this._childCount++; 114 | this.childNodes[index] = child; 115 | 116 | child.parentNode = this; 117 | 118 | if (index === 0) { 119 | this._firstChild = child; 120 | } else { 121 | this._lastChild._nextSibling = child; 122 | } 123 | 124 | this._lastChild = child; 125 | } 126 | 127 | return child; 128 | }, 129 | 130 | _finishChild: function() { 131 | if (this._childCount === this._finalChildCount && this.parentNode) { 132 | return this.parentNode._finishChild(); 133 | } else { 134 | return this; 135 | } 136 | } 137 | 138 | // ,toJSON: function() { 139 | // var clone = Object.assign({ 140 | // nodeType: this.nodeType 141 | // }, this); 142 | // 143 | // for (var k in clone) { 144 | // if (k.startsWith('_')) { 145 | // delete clone[k]; 146 | // } 147 | // } 148 | // delete clone._nextSibling; 149 | // delete clone._lastChild; 150 | // delete clone.parentNode; 151 | // return clone; 152 | // } 153 | }; 154 | 155 | module.exports = Node; 156 | 157 | DocumentFragment = require('./DocumentFragment'); -------------------------------------------------------------------------------- /benchmark/codegen-create/html-todomvc.html: -------------------------------------------------------------------------------- 1 | <section id="todoapp"> 2 | <div id="w0"> 3 | <header id="header"> 4 | <h1>todos</h1> 5 | <form data-w-onsubmit="handleFormSubmit|header"> 6 | <input id="new-todo" placeholder="What needs to be done?"> 7 | </form> 8 | </header> 9 | <section id="main"> 10 | <input id="toggle-all" type="checkbox" data-w-onchange="handleToggleAllOnChange|main"> 11 | <label for="toggle-all">Mark all as complete</label> 12 | <ul id="todo-list"> 13 | <li id="main-todo-0" class="completed"> 14 | <div class="view"> 15 | <input class="toggle" type="checkbox" aria-label="Toggle todo completed" data-w-onchange="handleCheckboxChange|main-todo-0" checked=""> 16 | <label data-w-ondblclick="handleLabelDblClick|main-todo-0">Go to the grocery store FOO</label> 17 | <button class="destroy" aria-label="Delete todo" data-w-onclick="handleDestroyClick|main-todo-0"></button> 18 | </div> 19 | <input title="Enter the new todo title" type="text" class="edit" id="main-todo-0-titleInput" data-w-onchange="handleInputChange|main-todo-0" data-w-onkeydown="handleInputKeyDown|main-todo-0"> 20 | </li> 21 | <li id="main-todo-1"> 22 | <div class="view"> 23 | <input class="toggle" type="checkbox" aria-label="Toggle todo completed" data-w-onchange="handleCheckboxChange|main-todo-1"> 24 | <label data-w-ondblclick="handleLabelDblClick|main-todo-1">Ship item</label> 25 | <button class="destroy" aria-label="Delete todo" data-w-onclick="handleDestroyClick|main-todo-1"></button> 26 | </div> 27 | <input title="Enter the new todo title" type="text" class="edit" id="main-todo-1-titleInput" data-w-onchange="handleInputChange|main-todo-1" data-w-onkeydown="handleInputKeyDown|main-todo-1"> 28 | </li> 29 | <li id="main-todo-2"> 30 | <div class="view"> 31 | <input class="toggle" type="checkbox" aria-label="Toggle todo completed" data-w-onchange="handleCheckboxChange|main-todo-2"> 32 | <label data-w-ondblclick="handleLabelDblClick|main-todo-2">Respond to email</label> 33 | <button class="destroy" aria-label="Delete todo" data-w-onclick="handleDestroyClick|main-todo-2"></button> 34 | </div> 35 | <input title="Enter the new todo title" type="text" class="edit" id="main-todo-2-titleInput" data-w-onchange="handleInputChange|main-todo-2" data-w-onkeydown="handleInputKeyDown|main-todo-2"> 36 | </li> 37 | <li id="main-todo-3"> 38 | <div class="view"> 39 | <input class="toggle" type="checkbox" aria-label="Toggle todo completed" data-w-onchange="handleCheckboxChange|main-todo-3"> 40 | <label data-w-ondblclick="handleLabelDblClick|main-todo-3">Foo</label> 41 | <button class="destroy" aria-label="Delete todo" data-w-onclick="handleDestroyClick|main-todo-3"></button> 42 | </div> 43 | <input title="Enter the new todo title" type="text" class="edit" id="main-todo-3-titleInput" data-w-onchange="handleInputChange|main-todo-3" data-w-onkeydown="handleInputKeyDown|main-todo-3"> 44 | </li> 45 | <li id="main-todo-4" class="completed"> 46 | <div class="view"> 47 | <input class="toggle" type="checkbox" aria-label="Toggle todo completed" data-w-onchange="handleCheckboxChange|main-todo-4" checked=""> 48 | <label data-w-ondblclick="handleLabelDblClick|main-todo-4">Bar</label> 49 | <button class="destroy" aria-label="Delete todo" data-w-onclick="handleDestroyClick|main-todo-4"></button> 50 | </div> 51 | <input title="Enter the new todo title" type="text" class="edit" id="main-todo-4-titleInput" data-w-onchange="handleInputChange|main-todo-4" data-w-onkeydown="handleInputKeyDown|main-todo-4"> 52 | </li> 53 | <li id="main-todo-5"> 54 | <div class="view"> 55 | <input class="toggle" type="checkbox" aria-label="Toggle todo completed" data-w-onchange="handleCheckboxChange|main-todo-5"> 56 | <label data-w-ondblclick="handleLabelDblClick|main-todo-5">Baz</label> 57 | <button class="destroy" aria-label="Delete todo" data-w-onclick="handleDestroyClick|main-todo-5"></button> 58 | </div> 59 | <input title="Enter the new todo title" type="text" class="edit" id="main-todo-5-titleInput" data-w-onchange="handleInputChange|main-todo-5" data-w-onkeydown="handleInputKeyDown|main-todo-5"> 60 | </li> 61 | <li id="main-todo-6"> 62 | <div class="view"> 63 | <input class="toggle" type="checkbox" aria-label="Toggle todo completed" data-w-onchange="handleCheckboxChange|main-todo-6"> 64 | <label data-w-ondblclick="handleLabelDblClick|main-todo-6">Test</label> 65 | <button class="destroy" aria-label="Delete todo" data-w-onclick="handleDestroyClick|main-todo-6"></button> 66 | </div> 67 | <input title="Enter the new todo title" type="text" class="edit" id="main-todo-6-titleInput" data-w-onchange="handleInputChange|main-todo-6" data-w-onkeydown="handleInputKeyDown|main-todo-6"> 68 | </li> 69 | </ul> 70 | </section> 71 | <footer id="footer"> 72 | <span id="todo-count"> 73 | <strong>5</strong> items left</span> 74 | <ul id="filters"> 75 | <li><a href="#/" class="selected" data-w-onclick="handleAllFilterClick|footer">All</a></li> 76 | <li><a href="#/active" data-w-onclick="handleActiveFilterClick|footer">Active</a></li> 77 | <li><a href="#/completed" data-w-onclick="handleCompletedFilterClick|footer">Completed</a></li> 78 | </ul> 79 | <button id="clear-completed" data-w-onclick="handleClearCompletedClick|footer">Clear completed (2)</button> 80 | </footer> 81 | </div> 82 | </section> -------------------------------------------------------------------------------- /benchmark/index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html lang="en"> 3 | <head> 4 | <meta charset="UTF-8"> 5 | <title>marko-vdom benchmarks</title> 6 | </head> 7 | <body> 8 | <button type="button" data-benchmark="walk"> 9 | Run benchmark: walk 10 | </button> 11 | 12 | <button type="button" data-benchmark="create"> 13 | Run benchmark: create 14 | </button> 15 | 16 | <pre id="results" style="width: 100%; border: 1px solid black;"> 17 | </pre> 18 | 19 | <section id="todoapp" style="display: none"> 20 | <div id="w0"> 21 | <header id="header"> 22 | <h1>todos</h1> 23 | <form data-w-onsubmit="handleFormSubmit|header"> 24 | <input id="new-todo" placeholder="What needs to be done?"> 25 | </form> 26 | </header> 27 | <section id="main"> 28 | <input id="toggle-all" type="checkbox" data-w-onchange="handleToggleAllOnChange|main"> 29 | <label for="toggle-all">Mark all as complete</label> 30 | <ul id="todo-list"> 31 | <li id="main-todo-0"> 32 | <div class="view"> 33 | <input class="toggle" type="checkbox" aria-label="Toggle todo completed" data-w-onchange="handleCheckboxChange|main-todo-0"> 34 | <label data-w-ondblclick="handleLabelDblClick|main-todo-0">Go to the grocery store</label> 35 | <button class="destroy" aria-label="Delete todo" data-w-onclick="handleDestroyClick|main-todo-0"></button> 36 | </div> 37 | <input title="Enter the new todo title" type="text" class="edit" id="main-todo-0-titleInput" data-w-onchange="handleInputChange|main-todo-0" data-w-onkeydown="handleInputKeyDown|main-todo-0"> 38 | </li> 39 | <li class="completed" id="main-todo-1"> 40 | <div class="view"> 41 | <input class="toggle" type="checkbox" checked="" aria-label="Toggle todo completed" data-w-onchange="handleCheckboxChange|main-todo-1"> 42 | <label data-w-ondblclick="handleLabelDblClick|main-todo-1">Ship item</label> 43 | <button class="destroy" aria-label="Delete todo" data-w-onclick="handleDestroyClick|main-todo-1"></button> 44 | </div> 45 | <input title="Enter the new todo title" type="text" class="edit" id="main-todo-1-titleInput" data-w-onchange="handleInputChange|main-todo-1" data-w-onkeydown="handleInputKeyDown|main-todo-1"> 46 | </li> 47 | <li id="main-todo-2"> 48 | <div class="view"> 49 | <input class="toggle" type="checkbox" aria-label="Toggle todo completed" data-w-onchange="handleCheckboxChange|main-todo-2"> 50 | <label data-w-ondblclick="handleLabelDblClick|main-todo-2">Respond to email</label> 51 | <button class="destroy" aria-label="Delete todo" data-w-onclick="handleDestroyClick|main-todo-2"></button> 52 | </div> 53 | <input title="Enter the new todo title" type="text" class="edit" id="main-todo-2-titleInput" data-w-onchange="handleInputChange|main-todo-2" data-w-onkeydown="handleInputKeyDown|main-todo-2"> 54 | </li> 55 | <li id="main-todo-3"> 56 | <div class="view"> 57 | <input class="toggle" type="checkbox" aria-label="Toggle todo completed" data-w-onchange="handleCheckboxChange|main-todo-3"> 58 | <label data-w-ondblclick="handleLabelDblClick|main-todo-3">Foo</label> 59 | <button class="destroy" aria-label="Delete todo" data-w-onclick="handleDestroyClick|main-todo-3"></button> 60 | </div> 61 | <input title="Enter the new todo title" type="text" class="edit" id="main-todo-3-titleInput" data-w-onchange="handleInputChange|main-todo-3" data-w-onkeydown="handleInputKeyDown|main-todo-3"> 62 | </li> 63 | <li id="main-todo-4"> 64 | <div class="view"> 65 | <input class="toggle" type="checkbox" aria-label="Toggle todo completed" data-w-onchange="handleCheckboxChange|main-todo-4"> 66 | <label data-w-ondblclick="handleLabelDblClick|main-todo-4">Bar</label> 67 | <button class="destroy" aria-label="Delete todo" data-w-onclick="handleDestroyClick|main-todo-4"></button> 68 | </div> 69 | <input title="Enter the new todo title" type="text" class="edit" id="main-todo-4-titleInput" data-w-onchange="handleInputChange|main-todo-4" data-w-onkeydown="handleInputKeyDown|main-todo-4"> 70 | </li> 71 | <li id="main-todo-5"> 72 | <div class="view"> 73 | <input class="toggle" type="checkbox" aria-label="Toggle todo completed" data-w-onchange="handleCheckboxChange|main-todo-5"> 74 | <label data-w-ondblclick="handleLabelDblClick|main-todo-5">Baz</label> 75 | <button class="destroy" aria-label="Delete todo" data-w-onclick="handleDestroyClick|main-todo-5"></button> 76 | </div> 77 | <input title="Enter the new todo title" type="text" class="edit" id="main-todo-5-titleInput" data-w-onchange="handleInputChange|main-todo-5" data-w-onkeydown="handleInputKeyDown|main-todo-5"> 78 | </li> 79 | </ul> 80 | </section> 81 | <footer id="footer"> 82 | <span id="todo-count"> 83 | <strong>5</strong> items left</span> 84 | <ul id="filters"> 85 | <li><a href="#/" class="selected" data-w-onclick="handleAllFilterClick|footer">All</a></li> 86 | <li><a href="#/active" data-w-onclick="handleActiveFilterClick|footer">Active</a></li> 87 | <li><a href="#/completed" data-w-onclick="handleCompletedFilterClick|footer">Completed</a></li> 88 | </ul> 89 | <button id="clear-completed" data-w-onclick="handleClearCompletedClick|footer">Clear completed (1)</button> 90 | </footer> 91 | </div> 92 | </section> 93 | <script src="https://unpkg.com/react@15.3.1/dist/react.min.js"></script> 94 | <script src="../dist/marko-vdom-umd.js"></script> 95 | <script src="../node_modules/lodash/lodash.js"></script> 96 | <script src="../node_modules/benchmark/benchmark.js"></script> 97 | <script src="./app.js"></script> 98 | <script src="./benchmark-walk.js"></script> 99 | <script src="./benchmark-create.js"></script> 100 | </body> 101 | </html> -------------------------------------------------------------------------------- /src/HTMLElement.js: -------------------------------------------------------------------------------- 1 | var inherit = require('raptor-util/inherit'); 2 | var extend = require('raptor-util/extend'); 3 | var Text = require('./Text'); 4 | var Comment = require('./Comment'); 5 | var Node = require('./Node'); 6 | 7 | var NS_XLINK = 'http://www.w3.org/1999/xlink'; 8 | var ATTR_HREF = 'href'; 9 | var EMPTY_OBJECT = require('./util').EMPTY_OBJECT; 10 | var ATTR_MARKO_CONST = 'data-marko-const'; 11 | 12 | function removePreservedAttributes(attrs) { 13 | var preservedAttrs = attrs['data-preserve-attrs']; 14 | if (preservedAttrs) { 15 | for (var i=0, len=preservedAttrs.length; i<len; i++) { 16 | var preservedAttrName = preservedAttrs[i]; 17 | delete attrs[preservedAttrName]; 18 | } 19 | } 20 | return attrs; 21 | } 22 | 23 | function HTMLElementClone(other) { 24 | extend(this, other); 25 | this.parentNode = undefined; 26 | this._nextSibling = undefined; 27 | } 28 | 29 | function HTMLElement(tagName, attrs, childCount, constId) { 30 | var namespaceURI; 31 | var isTextArea; 32 | 33 | switch(tagName) { 34 | case 'svg': 35 | namespaceURI = 'http://www.w3.org/2000/svg'; 36 | break; 37 | case 'math': 38 | namespaceURI = 'http://www.w3.org/1998/Math/MathML'; 39 | break; 40 | case 'textarea': 41 | case 'TEXTAREA': 42 | isTextArea = true; 43 | break; 44 | } 45 | 46 | Node.call(this, childCount); 47 | 48 | if (constId) { 49 | if (!attrs) { 50 | attrs = {}; 51 | } 52 | attrs[ATTR_MARKO_CONST] = constId; 53 | } 54 | 55 | this.attributes = attrs || EMPTY_OBJECT; 56 | this._isTextArea = isTextArea; 57 | this.namespaceURI = namespaceURI; 58 | this.nodeName = tagName; 59 | this._value = undefined; 60 | this._constId = constId; 61 | } 62 | 63 | HTMLElement.prototype = { 64 | nodeType: 1, 65 | 66 | _nsAware: true, 67 | 68 | assignAttributes: function(targetNode) { 69 | var attrs = this.attributes; 70 | var attrName; 71 | var i; 72 | 73 | // We use expando properties to associate the previous HTML 74 | // attributes provided as part of the VDOM node with the 75 | // real HTMLElement DOM node. When diffing attributes, 76 | // we only use our internal representation of the attributes. 77 | // When diffing for the first time it's possible that the 78 | // real HTMLElement node will not have the expando property 79 | // so we build the attribute map from the expando property 80 | 81 | var oldAttrs = targetNode._vattrs; 82 | if (oldAttrs) { 83 | if (oldAttrs === attrs) { 84 | // For constant attributes the same object will be provided 85 | // every render and we can use that to our advantage to 86 | // not waste time diffing a constant, immutable attribute 87 | // map. 88 | return; 89 | } 90 | } else { 91 | // We need to build the attribute map from the real attributes 92 | oldAttrs = {}; 93 | 94 | var oldAttributesList = targetNode.attributes; 95 | for (i = oldAttributesList.length - 1; i >= 0; --i) { 96 | var attr = oldAttributesList[i]; 97 | 98 | if (attr.specified !== false) { 99 | attrName = attr.name; 100 | var attrNamespaceURI = attr.namespaceURI; 101 | if (attrNamespaceURI === NS_XLINK) { 102 | oldAttrs['xlink:href'] = attr.value; 103 | } else { 104 | oldAttrs[attrName] = attr.value; 105 | } 106 | } 107 | } 108 | 109 | // We don't want preserved attributes to show up in either the old 110 | // or new attribute map. 111 | removePreservedAttributes(oldAttrs); 112 | } 113 | 114 | // In some cases we only want to set an attribute value for the first 115 | // render or we don't want certain attributes to be touched. To support 116 | // that use case we delete out all of the preserved attributes 117 | // so it's as if they never existed. 118 | var preservedAttrs = attrs['data-preserve-attrs']; 119 | if (preservedAttrs) { 120 | attrs = removePreservedAttributes(extend({}, attrs)); 121 | } 122 | 123 | // Loop over all of the attributes in the attribute map and compare 124 | // them to the value in the old map. However, if the value is 125 | // null/undefined/false then we want to remove the attribute 126 | for (attrName in attrs) { 127 | var attrValue = attrs[attrName]; 128 | 129 | if (attrName === 'xlink:href') { 130 | if (attrValue == null || attrValue === false) { 131 | targetNode.removeAttributeNS(NS_XLINK, ATTR_HREF); 132 | } else if (oldAttrs[attrName] !== attrValue) { 133 | targetNode.setAttributeNS(NS_XLINK, ATTR_HREF, attrValue); 134 | } 135 | } else { 136 | if (attrValue == null || attrValue === false) { 137 | targetNode.removeAttribute(attrName); 138 | } else if (oldAttrs[attrName] !== attrValue) { 139 | targetNode.setAttribute(attrName, attrValue); 140 | } 141 | } 142 | } 143 | 144 | // If there are any old attributes that are not in the new set of attributes 145 | // then we need to remove those attributes from the target node 146 | for (attrName in oldAttrs) { 147 | if (attrs.hasOwnProperty(attrName) === false) { 148 | if (attrName === 'xlink:href') { 149 | targetNode.removeAttributeNS(NS_XLINK, ATTR_HREF); 150 | } else { 151 | targetNode.removeAttribute(attrName); 152 | } 153 | } 154 | } 155 | 156 | targetNode._vattrs = attrs; 157 | }, 158 | 159 | cloneNode: function() { 160 | return new HTMLElementClone(this); 161 | }, 162 | 163 | /** 164 | * Shorthand method for creating and appending an HTML element 165 | * 166 | * @param {String} tagName The tag name (e.g. "div") 167 | * @param {int|null} attrCount The number of attributes (or `null` if not known) 168 | * @param {int|null} childCount The number of child nodes (or `null` if not known) 169 | */ 170 | e: function(tagName, attrs, childCount, constId) { 171 | var child = this.appendChild(new HTMLElement(tagName, attrs, childCount, constId)); 172 | 173 | if (childCount === 0) { 174 | return this._finishChild(); 175 | } else { 176 | return child; 177 | } 178 | }, 179 | 180 | /** 181 | * Shorthand method for creating and appending a Text node with a given value 182 | * @param {String} value The text value for the new Text node 183 | */ 184 | t: function(value) { 185 | this.appendChild(new Text(value)); 186 | return this._finishChild(); 187 | }, 188 | 189 | /** 190 | * Shorthand method for creating and appending a Comment node with a given value 191 | * @param {String} value The value for the new Comment node 192 | */ 193 | c: function(value) { 194 | this.appendChild(new Comment(value)); 195 | return this._finishChild(); 196 | }, 197 | 198 | /** 199 | * Shorthand method for creating and appending a static node. The provided node is automatically cloned 200 | * using a shallow clone since it will be mutated as a result of setting `nextSibling` and `parentNode`. 201 | * 202 | * @param {String} value The value for the new Comment node 203 | */ 204 | n: function(node) { 205 | this.appendChild(node.cloneNode()); 206 | return this._finishChild(); 207 | }, 208 | 209 | actualize: function(document) { 210 | var el; 211 | var namespaceURI = this.namespaceURI; 212 | var tagName = this.nodeName; 213 | 214 | if (namespaceURI) { 215 | el = document.createElementNS(namespaceURI, tagName); 216 | } else { 217 | el = document.createElement(tagName); 218 | } 219 | 220 | var attributes = this.attributes; 221 | for (var attrName in attributes) { 222 | var attrValue = attributes[attrName]; 223 | 224 | if (attrValue !== false && attrValue != null) { 225 | if (attrValue === true) { 226 | attrValue = ''; 227 | } 228 | 229 | if (attrName === 'xlink:href') { 230 | el.setAttributeNS(NS_XLINK, ATTR_HREF, attrValue); 231 | } else { 232 | el.setAttribute(attrName, attrValue); 233 | } 234 | } 235 | } 236 | 237 | if (this._isTextArea) { 238 | el.value = this.value; 239 | } else { 240 | var curChild = this.firstChild; 241 | 242 | while(curChild) { 243 | el.appendChild(curChild.actualize(document)); 244 | curChild = curChild.nextSibling; 245 | } 246 | } 247 | 248 | return el; 249 | }, 250 | 251 | hasAttributeNS: function(namespaceURI, name) { 252 | // We don't care about the namespaces since the there 253 | // is no chance that attributes with the same name will have 254 | // different namespaces 255 | return this.attributes[name] !== undefined; 256 | }, 257 | 258 | getAttribute: function(name) { 259 | return this.attributes[name]; 260 | }, 261 | 262 | isSameNode: function(otherNode) { 263 | if (otherNode.nodeType !== 1) { 264 | return false; 265 | } 266 | 267 | var constId = this._constId; 268 | if (constId) { 269 | var otherSameId = otherNode.actualize ? otherNode._constId : otherNode.getAttribute(ATTR_MARKO_CONST); 270 | return constId === otherSameId; 271 | } else { 272 | return false; 273 | } 274 | } 275 | }; 276 | 277 | inherit(HTMLElement, Node); 278 | 279 | var proto = HTMLElementClone.prototype = HTMLElement.prototype; 280 | 281 | Object.defineProperty(proto, 'checked', { 282 | get: function () { 283 | return this.attributes.checked !== undefined; 284 | } 285 | }); 286 | 287 | Object.defineProperty(proto, 'selected', { 288 | get: function () { 289 | return this.attributes.selected !== undefined; 290 | } 291 | }); 292 | 293 | Object.defineProperty(proto, 'id', { 294 | get: function () { 295 | return this.attributes.id; 296 | } 297 | }); 298 | 299 | Object.defineProperty(proto, 'value', { 300 | get: function () { 301 | return this._value || this.attributes.value; 302 | }, 303 | set: function (value) { 304 | this._value = value; 305 | } 306 | }); 307 | 308 | Object.defineProperty(proto, 'disabled', { 309 | get: function () { 310 | return this.attributes.disabled !== undefined; 311 | } 312 | }); 313 | 314 | module.exports = HTMLElement; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ___NOTE: THIS REPO IS NO LONGER MAINTAINED OR USED. The VDOM implementation that Marko uses now lives in the main Marko repo. Please see: [marko-js/marko/src/runtime/vdom](https://github.com/marko-js/marko/tree/036e7530c4504209d8b82835aaa89945737f1471/src/runtime/vdom)___ 3 | 4 | marko-vdom 5 | ========== 6 | 7 | This module provides an optimized virtual DOM implementation where each virtual DOM node is API compatible with real DOM nodes for the minimal subset that is required to support DOM diffing/patching using [morphdom](https://github.com/patrick-steele-idem/morphdom). 8 | 9 | [](https://travis-ci.org/marko-js/marko-vdom) 10 | [](https://coveralls.io/github/marko-js/marko-vdom?branch=master) 11 | [](https://www.npmjs.com/package/marko-vdom) 12 | 13 | # Overview 14 | 15 | Each virtual DOM node supports the following properties and methods required by [morphdom](https://github.com/patrick-steele-idem/morphdom): 16 | 17 | - `node.firstChild` 18 | - `node.nextSibling` 19 | - `node.nodeType` 20 | - `node.nodeName` 21 | - `node.namespaceURI` 22 | - `node.nodeValue` 23 | - `node.attributes` <sup><a href="#attributes">[1]</a><sup> 24 | - `node.value` 25 | - `node.selected` 26 | - `node.disabled` 27 | - `node.actualize(document)` <sup><a href="#actualize">[2]</a><sup> 28 | - `node.hasAttributeNS(namespaceURI, name)` 29 | - `node.isSameNode(anotherNode)` <sup><a href="#isSameNode">[3]</a><sup> 30 | - `node.assignAttributes(targetNode)` <sup><a href="#assignAttributes">[4]</a><sup> 31 | 32 | NOTES: 33 | 34 | 1. <a name="attributes"></a>Unlike with real DOM nodes, `node.attributes` can either be an `Array` of [Attr](https://developer.mozilla.org/en-US/docs/Web/API/Attr) objects or an `Object` (where each property represents an attribute. e.g., `{ "class": "foo", "id": "bar" }`) 35 | 2. <a name="actualize"></a>In addition to the standard DOM node methods and properties, a virtual DOM node must also provide a `node.actualize(document)` method. The `node.actualize(document)` will be called when the virtual DOM node needs to be upgraded to a real DOM node so that it can be moved into the real DOM. 36 | 3. <a name="isSameNode"></a>A virtual DOM node may choose to implement `isSameNode(anotherNode)` to short-circuit diffing/patching a particular DOM subtree by treating two nodes as the "same" 37 | 4. <a name="assignAttributes"></a>A virtual DOM node may choose to implement the non-standard `assignAttributes(targetNode)` to optimize copying the attributes from the virtual DOM node to the target DOM node 38 | 39 | `marko-vdom` is namespace aware and will work correctly with SVG and MathML elements. 40 | 41 | While `marko-vdom` exposes an API that can be used directly, the terse API is designed to be used with a compiler that generates JavaScript code. 42 | 43 | # Usage 44 | 45 | ## Create an element with a fixed number of attributes and a fixed number of children 46 | 47 | ```javascript 48 | var createElement = require('marko-vdom').createElement; 49 | 50 | createElement('div', { class: 'foo', onclick: 'doSomething()' }, 2 /* childCount */) 51 | .e('span', null, 1) 52 | .e('b', null, 1) 53 | .t('Hello World!') 54 | .e('a', { href: 'http://ebay.com' }, 1) 55 | .t('eBay') 56 | ``` 57 | 58 | The above code will generate a virtual DOM tree that mirrors the following: 59 | 60 | ```html 61 | <div class="foo" onclick="doSomething()"> 62 | <span> 63 | <b>Hello World!</b> 64 | </span> 65 | <a href="http://ebay.com">eBay</a> 66 | </div> 67 | ``` 68 | 69 | ## Dynamic HTML with a unknown number of children 70 | 71 | ```javascript 72 | var createElement = require('marko-vdom').createElement; 73 | 74 | var el = createElement('div', { class: 'foo' }); 75 | el.appendChild(createElement('span', { class: 'bar' })); 76 | ``` 77 | 78 | The above code will generate a virtual DOM tree that mirrors the following: 79 | 80 | ```html 81 | <div class="foo"> 82 | <span class="bar"></span> 83 | </div> 84 | ``` 85 | 86 | ## Static subtree 87 | 88 | ```javascript 89 | var createElement = require('marko-vdom').createElement; 90 | 91 | var staticLink = createElement('a', { href: 'http://ebay.com' }, 1 /* childCount */, 'abc123' /* key */) 92 | .t('eBay') 93 | 94 | function render() { 95 | createElement('div', null, 1 /* childCount */) 96 | .n(staticLink); 97 | } 98 | ``` 99 | 100 | The above code will generate a virtual DOM tree that, when converted to a real DOM, will be the following: 101 | 102 | ```html 103 | <div> 104 | <a href="http://ebay.com" data-marko-same-id="abc123"> 105 | eBay 106 | </a> 107 | </div> 108 | ``` 109 | 110 | For the static link, both the virtual DOM node and the real DOM node will be marked with an "id" that identifies the two nodes as the "same" node in order to short-circuit DOM/diffing patching. That is: 111 | 112 | ```javascript 113 | var realStaticLink = staticLink.actualize(document); 114 | console.log(staticLink.isSameNode(realStaticLink)); //Output: true 115 | ``` 116 | 117 | ## Document fragments 118 | 119 | Document fragments are containers for child nodes that can be appended as children nodes, but the actual `DocumentFragment` node is never directly visited when walking the DOM using `node.firstChild` and `node.nextSibling`. Instead, the children (if any) of a `DocumentFragment` node are treated as direct children of the parent of the `DocumentFragment` node. A `DocumentFragment` node can be modified with new children even after it has been inserted into the DOM. 120 | 121 | ```javascript 122 | var createElement = require('marko-vdom').createElement; 123 | 124 | var div = createElement('div'); 125 | documentFragment.appendChild(createElement('div')); 126 | 127 | var documentFragment = div.appendDocumentFragment(); 128 | documentFragment.appendChild(createElement('span', { class: 'foo' })); 129 | documentFragment.appendChild(createElement('span', { class: 'bar' })); 130 | 131 | /* 132 | 133 | Output DOM: 134 | 135 | <div> 136 | <span class="foo"></span> 137 | <span class="bar"></span> 138 | </div> 139 | */ 140 | 141 | ``` 142 | 143 | <a name="benchmarks"></a> 144 | 145 | # Benchmarks 146 | 147 | This library includes some benchmarks to compare performance with the real DOM (and React). To run the benchmarks: 148 | 149 | ``` 150 | npm run benchmark 151 | ``` 152 | 153 | This will open a web page in your browser that you can use to run a variety of benchmarks. 154 | 155 | We are interested in the following performance characteristics: 156 | 157 | - <b>Creation time</b> - the time it takes to construct a [virtual] DOM tree 158 | - <b>Walk time</b> - the time it takes to walk a [virtual] DOM tree using `firstChild` and `nextSibilng` 159 | 160 | We encourage you to run the benchmarks on your machine and in various browsers. If you see any problems with the benchmarks, or if you would like clarifying information please open a Github issue. 161 | 162 | Please see [Benchmark Results](./docs/benchmark-results.md) for more detailed numbers. 163 | 164 | # API 165 | 166 | ## `marko-vdom` 167 | 168 | ### Methods 169 | 170 | #### `createElement(tagName, attrCount, childCount, key)` 171 | 172 | Returns a new [HTMLElement](#HTMLElement). 173 | 174 | #### `createText(value)` 175 | 176 | Returns a new [Text](#Text). 177 | 178 | #### `createComment(value)` 179 | 180 | Returns a new [Comment](#Comment). 181 | 182 | #### `createAttributes(attrCount)` 183 | 184 | Returns a new [AttributeCollection](#AttributeCollection). 185 | 186 | #### `createDocumentFragment()` 187 | 188 | Returns a new [DocumentFragment](#DocumentFragment) 189 | 190 | --------------- 191 | 192 | <a name="AttributeCollection"></a> 193 | 194 | ## `AttributeCollection` 195 | 196 | ### Methods 197 | 198 | <a name="AttributeCollection-a"></a> 199 | 200 | #### `a(name, value)` 201 | 202 | <a name="AttributeCollection-as"></a> 203 | 204 | #### `as(attributes)` 205 | 206 | --------------- 207 | 208 | <a name="Comment"></a> 209 | 210 | ## `Comment` 211 | 212 | --------------- 213 | 214 | <a name="DocumentFragment"></a> 215 | 216 | ## `DocumentFragment` 217 | 218 | --------------- 219 | 220 | <a name="HTMLElement"></a> 221 | 222 | ## `HTMLElement` 223 | 224 | ### Constructors 225 | 226 | #### `HTMLElement(tagName, attrCount, childCount, key)` 227 | 228 | Parameters: 229 | 230 | - __tagName__ - The tag name for the new HTML element (`String`) 231 | - __attrCount__ - The number of attributes (if known) (an integer, `null` or `undefined`) 232 | - __childCount__ - The number of child nodes (if known) (an integer, `null` or `undefined`) 233 | - __key__ - A key for static nodes to use for `isSameNode()` checks 234 | 235 | #### `HTMLElement(htmlElement)` 236 | 237 | Used to do a shallow clone of another `HTMLElement` 238 | 239 | ### Properties 240 | 241 | #### `nodeType` 242 | 243 | Always set to `1` 244 | 245 | ### Methods 246 | 247 | #### `a(name, value)` : [`Node`](#Node) 248 | 249 | See [AttributeCollection#a](#AttributeCollection-a) 250 | 251 | #### `actualize(document)` : `HTMLElement` 252 | 253 | Converts the virtual `HTMLElement` tree to a real `HTMLElement` tree using the provided `document`. 254 | 255 | #### `as(name, value)` : [`Node`](#Node) 256 | 257 | See [AttributeCollection#a](#AttributeCollection-as) 258 | 259 | #### `appendDocumentFragment()` : [`DocumentFragment`](#DocumentFragment) 260 | 261 | See [Node#appendDocumentFragment](#Node-appendDocumentFragment) 262 | 263 | #### `c(value)` : [`Node`](#Node) 264 | 265 | Shorthand method for creating a [Comment](#Comment) node and appending it as a child. 266 | 267 | #### `cloneNode()` : [`HTMLElement`](#HTMLElement) 268 | 269 | Performs a shallow clone of the node (`nextSibling` and `parentNode` will be `undefined` since a cloned node will always start out as detached) 270 | 271 | #### `e(tagName, attrCount, childCount, key)` : [`Node`](#Node) 272 | 273 | Shorthand method for creating an [HTMLElement](#HTMLElement) node and appending it as a child. 274 | 275 | #### `hasAttributeNS(namespaceURI, name)` : `boolean` 276 | 277 | #### `isSameNode(otherNode)` : `boolean` 278 | 279 | Called by `morphdom` to determine if the target `HTMLElement` (either virtual or real) node is the same as the current node. The `key` passed in to the constructor is used to do determine if the other node is the "same" node. If the other node is a real DOM node then the key is pulled from the `data-markokey` attribute. 280 | 281 | #### `n(node)` : [`Node`](#Node) 282 | 283 | Shorthand method for appending a node as a child. The provided is automatically cloned (using a shallow clone) since it is assumed that this method will be called to append a static/memoized DOM node and the original DOM node should not be modified. 284 | 285 | #### `t(value)` : [`Node`](#Node) 286 | 287 | Shorthand method for creating a [Text](#Text) node and appending it as a child. 288 | 289 | --------------- 290 | 291 | <a name="Node"></a> 292 | 293 | ## `Node` 294 | 295 | ### Properties 296 | 297 | #### `firstChild` : [`Node`](#Node) 298 | 299 | Returns the first child node 300 | 301 | #### `nextSibling` : [`Node`](#Node) 302 | 303 | Returns the next sibling node 304 | 305 | ### Methods 306 | 307 | <a name="Node-appendDocumentFragment"></a> 308 | 309 | #### `appendDocumentFragment()` : [`DocumentFragment`](#DocumentFragment) 310 | 311 | Creates and appends a new [DocumentFragment](#DocumentFragment) node and appends it as a child and the newly created [DocumentFragment](#DocumentFragment) node is returned. 312 | 313 | #### `removeChildren()` 314 | 315 | Clears out all child nodes 316 | 317 | 318 | 319 | --------------- 320 | 321 | <a name="Text"></a> 322 | 323 | ## `Text` 324 | -------------------------------------------------------------------------------- /benchmark/codegen-create/html-marko-docs.html: -------------------------------------------------------------------------------- 1 | <main><h1 class="page-title">Get Started<span class="subtitle"> // Marko</span><a href="https://github.com/marko-js/marko/blob/master/docs/get-started.md" class="improve-link">Improve this page</a></h1><p class="toc"><strong>Table of Contents</strong></p><ul class="toc-level0"><li><a href="#installation">Installation</a></li><li><a href="#template-loading">Template Loading</a></li><li><a href="#template-rendering">Template Rendering</a><ul class="toc-level1"><li><a href="#callback-api">Callback API</a></li><li><a href="#streaming-api">Streaming API</a></li><li><a href="#synchronous-api">Synchronous API</a></li><li><a href="#asynchronous-rendering-api">Asynchronous Rendering API</a></li></ul></li><li><a href="#hot-reloading-templates">Hot Reloading Templates</a></li></ul><p></p> 2 | <h2 id="installation"><a name="installation" class="anchor" href="#installation"><span class="header-link"></span></a>Installation</h2><p>To install the <code>marko</code> module into your project you should use the following command:</p> 3 | <pre class="editor editor-colors"><div class="line"><span class="text plain null-grammar"><span>npm install marko --save</span></span></div></pre><p>To install the optional <code>markoc</code> command line interface to compile templates you can use the following command:</p> 4 | <pre class="editor editor-colors"><div class="line"><span class="text plain null-grammar"><span>npm install marko --global</span></span></div></pre><h2 id="template-loading"><a name="template-loading" class="anchor" href="#template-loading"><span class="header-link"></span></a>Template Loading</h2><p>Marko provides a <a href="https://github.com/marko-js/marko/blob/master/node-require.js">custom Node.js require extension</a> that allows Marko templates to be <code>require</code>'d just like a standard JavaScript module. For example:</p> 5 | <pre class="editor editor-colors"><div class="line"><span class="source js"><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> The following line installs the Node.js require extension</span><span> </span></span></span></div><div class="line"><span class="source js"><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> for `.marko` files. Once installed, `*.marko` files can be</span><span> </span></span></span></div><div class="line"><span class="source js"><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> required just like any other JavaScript modules.</span><span> </span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="support function js"><span>require</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>marko/node-require</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>install</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> ...</span><span> </span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> Load a Marko template by requiring a .marko file:</span><span> </span></span></span></div><div class="line"><span class="source js"><span class="storage type var js"><span>var</span></span><span> template </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="meta function-call js"><span class="support function js"><span>require</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>./template.marko</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre><p><em>NOTE: The Node.js require extension for Marko templates simply hooks into the Node.js module loading system to automatically compile <code>.marko</code> template files to CommonJS JavaScript modules when they are first required and the loaded <code>Template</code> instance is exported by the compiled template module. Internally, the implementation for <code>require('marko/node-require').install()</code> will use <code>require.extensions[extension] = function markoExtension(module, filename) { ... }</code> to register the Node.js require extension.</em></p> 6 | <p><em>NOTE 2: The require extension only needs to be installed once, but it does not hurt if it is installed multiple times. For example, it is okay if the main app registers the require extension and an installed module also registers the require extension. The require extension will always resolve the proper <code>marko</code> module relative to the template being required so that there can still be multiple versions of marko in use for a single app.</em></p> 7 | <p>If you prefer to not rely on the require extension for Marko templates, the following code will work as well:</p> 8 | <pre class="editor editor-colors"><div class="line"><span class="source js"><span class="storage type var js"><span>var</span></span><span> template </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="meta function-call js"><span class="support function js"><span>require</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>marko</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="support function js"><span>load</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="variable other object js"><span>require</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>resolve</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>./template.marko</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre><p>A loaded Marko template has multiple methods for rendering the template as described in the next section.</p> 9 | <h2 id="template-rendering"><a name="template-rendering" class="anchor" href="#template-rendering"><span class="header-link"></span></a>Template Rendering</h2><h3 id="callback-api"><a name="callback-api" class="anchor" href="#callback-api"><span class="header-link"></span></a>Callback API</h3><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="storage type var js"><span>var</span></span><span> template </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="meta function-call js"><span class="support function js"><span>require</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>./template.marko</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="variable other object js"><span>template</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>render</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> name</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>Frank</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> count</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="constant numeric decimal js"><span>30</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span><span class="meta function js"><span class="storage type function js"><span>function</span></span><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>err</span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="variable parameter function js"><span>output</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span></span><span> </span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span><span class="keyword control js"><span>if</span></span><span> </span><span class="meta brace round js"><span>(</span></span><span>err</span><span class="meta brace round js"><span>)</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span><span class="entity name type object console js"><span>console</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="support function console js"><span>error</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>Rendering failed</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span><span class="keyword control js"><span>return</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span><span class="meta brace curly js"><span>}</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span><span class="entity name type object console js"><span>console</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="support function console js"><span>log</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>Output HTML: </span><span class="punctuation definition string end js"><span>'</span></span></span><span> </span><span class="keyword operator js"><span>+</span></span><span> output</span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre><h3 id="streaming-api"><a name="streaming-api" class="anchor" href="#streaming-api"><span class="header-link"></span></a>Streaming API</h3><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="storage type var js"><span>var</span></span><span> template </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="meta function-call js"><span class="support function js"><span>require</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>./template.marko</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span class="storage type var js"><span>var</span></span><span> out </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="meta function-call js"><span class="support function js"><span>require</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>fs</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>createWriteStream</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>index.html</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="meta brace curly js"><span>{</span></span><span>encoding</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>utf8</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> Render the template to 'index.html'</span><span> </span></span></span></div><div class="line"><span class="source js"><span class="variable other object js"><span>template</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>stream</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> name</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>Frank</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> count</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="constant numeric decimal js"><span>30</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span> </span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>pipe</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span>out</span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre><p>Alternatively, you can render directly to an existing stream to avoid creating an intermediate stream:</p> 10 | <pre class="editor editor-colors"><div class="line"><span class="source js"><span class="storage type var js"><span>var</span></span><span> template </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="meta function-call js"><span class="support function js"><span>require</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>./template.marko</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span class="storage type var js"><span>var</span></span><span> out </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="meta function-call js"><span class="support function js"><span>require</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>fs</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>createWriteStream</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>index.html</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="meta brace curly js"><span>{</span></span><span>encoding</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>utf8</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> Render the template to 'index.html'</span><span> </span></span></span></div><div class="line"><span class="source js"><span class="variable other object js"><span>template</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>render</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> name</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>Frank</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> count</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="constant numeric decimal js"><span>30</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span><span> out</span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre><p><em>NOTE:</em> This will end the target output stream.</p> 11 | <h3 id="synchronous-api"><a name="synchronous-api" class="anchor" href="#synchronous-api"><span class="header-link"></span></a>Synchronous API</h3><p>If you know that your template rendering requires no asynchronous rendering then you can use the synchronous API to render a template to a String:</p> 12 | <pre class="editor editor-colors"><div class="line"><span class="source js"><span class="storage type var js"><span>var</span></span><span> template </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="meta function-call js"><span class="support function js"><span>require</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>./template.marko</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="storage type var js"><span>var</span></span><span> output </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="variable other object js"><span>template</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>renderSync</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> name</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>Frank</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> count</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="constant numeric decimal js"><span>30</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="entity name type object console js"><span>console</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="support function console js"><span>log</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>Output HTML: </span><span class="punctuation definition string end js"><span>'</span></span></span><span> </span><span class="keyword operator js"><span>+</span></span><span> output</span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre><h3 id="asynchronous-rendering-api"><a name="asynchronous-rendering-api" class="anchor" href="#asynchronous-rendering-api"><span class="header-link"></span></a>Asynchronous Rendering API</h3><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="storage type var js"><span>var</span></span><span> fs </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="meta function-call js"><span class="support function js"><span>require</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>fs</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span class="storage type var js"><span>var</span></span><span> template </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="meta function-call js"><span class="support function js"><span>require</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>./template.marko</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="storage type var js"><span>var</span></span><span> out </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="variable other object js"><span>marko</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>createWriter</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="variable other object js"><span>fs</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>createWriteStream</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>index.html</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="meta brace curly js"><span>{</span></span><span>encoding</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>utf8</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> Render the first chunk asynchronously (after 1s delay):</span><span> </span></span></span></div><div class="line"><span class="source js"><span class="storage type var js"><span>var</span></span><span> asyncOut </span><span class="keyword operator assignment js"><span>=</span></span><span> </span><span class="variable other object js"><span>out</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>beginAsync</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="support function js"><span>setTimeout</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function js"><span class="storage type function js"><span>function</span></span><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span></span><span> </span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span> </span><span class="variable other object js"><span>asyncOut</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="support function dom js"><span>write</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>BEGIN </span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span> </span><span class="variable other object js"><span>asyncOut</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>end</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="constant numeric decimal js"><span>1000</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> Render the template to the original writer:</span><span> </span></span></span></div><div class="line"><span class="source js"><span class="variable other object js"><span>template</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>render</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> name</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>World</span><span class="punctuation definition string end js"><span>'</span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> </span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span> out</span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> Write the last chunk synchronously:</span><span> </span></span></span></div><div class="line"><span class="source js"><span class="variable other object js"><span>out</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="support function dom js"><span>write</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span> END</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> End the rendering out</span><span> </span></span></span></div><div class="line"><span class="source js"><span class="variable other object js"><span>out</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>end</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre><p>Despite rendering the first chunk asynchronously, the above program will stream out the output in the correct order to <code>index.html</code>:</p> 13 | <pre class="editor editor-colors"><div class="line"><span class="text html basic"><span>BEGIN Hello World! END</span></span></div></pre><p>For more details, please see the documentation for the <a href="https://github.com/marko-js/async-writer">async-writer</a> module.</p> 14 | <h2 id="hot-reloading-templates"><a name="hot-reloading-templates" class="anchor" href="#hot-reloading-templates"><span class="header-link"></span></a>Hot Reloading Templates</h2><p>During development it is very beneficial to not have to restart the server in order for changes to already loaded templates to be reflected. Marko supports hot reloading of templates on the server, but this feature must be explicitly enabled. Enabling hot reloading is documented as part of the following sample app: <a href="https://github.com/marko-js-samples/marko-hot-reload">marko-js-samples/marko-hot-reload</a></p> 15 | </main> --------------------------------------------------------------------------------