Internal refactoring: V prefix for VDOM nodes

This commit is contained in:
Patrick Steele-Idem 2017-01-20 13:40:21 -07:00
parent 4d24c8bdfa
commit 694421470b
12 changed files with 94 additions and 94 deletions

View File

@ -1,9 +1,9 @@
var EventEmitter = require('events-light'); var EventEmitter = require('events-light');
var vdom = require('./vdom'); var vdom = require('./vdom');
var HTMLElement = vdom.$__HTMLElement; var VElement = vdom.$__VElement;
var DocumentFragment = vdom.$__DocumentFragment; var VDocumentFragment = vdom.$__VDocumentFragment;
var Comment = vdom.$__Comment; var VComment = vdom.$__VComment;
var Text = vdom.$__Text; var VText = vdom.$__VText;
var virtualizeHTML = vdom.$__virtualizeHTML; var virtualizeHTML = vdom.$__virtualizeHTML;
var RenderResult = require('../RenderResult'); var RenderResult = require('../RenderResult');
var defaultDocument = vdom.$__defaultDocument; var defaultDocument = vdom.$__defaultDocument;
@ -25,7 +25,7 @@ function State(tree) {
function AsyncVDOMBuilder(globalData, parentNode, state) { function AsyncVDOMBuilder(globalData, parentNode, state) {
if (!parentNode) { if (!parentNode) {
parentNode = new DocumentFragment(); parentNode = new VDocumentFragment();
} }
if (state) { if (state) {
@ -47,7 +47,7 @@ var proto = AsyncVDOMBuilder.prototype = {
$__document: defaultDocument, $__document: defaultDocument,
element: function(name, attrs, childCount) { element: function(name, attrs, childCount) {
var element = new HTMLElement(name, attrs, childCount); var element = new VElement(name, attrs, childCount);
var parent = this.$__parent; var parent = this.$__parent;
@ -93,14 +93,14 @@ var proto = AsyncVDOMBuilder.prototype = {
if (lastChild && lastChild.$__Text) { if (lastChild && lastChild.$__Text) {
lastChild.nodeValue += text; lastChild.nodeValue += text;
} else { } else {
parent.$__appendChild(new Text(text)); parent.$__appendChild(new VText(text));
} }
} }
return this; return this;
}, },
comment: function(comment) { comment: function(comment) {
return this.node(new Comment(comment)); return this.node(new VComment(comment));
}, },
html: function(html) { html: function(html) {
@ -113,7 +113,7 @@ var proto = AsyncVDOMBuilder.prototype = {
}, },
beginElement: function(name, attrs) { beginElement: function(name, attrs) {
var element = new HTMLElement(name, attrs); var element = new VElement(name, attrs);
var parent = this.$__parent; var parent = this.$__parent;
if (parent) { if (parent) {
parent.$__appendChild(element); parent.$__appendChild(element);
@ -274,7 +274,7 @@ var proto = AsyncVDOMBuilder.prototype = {
}, },
$__getNode: function(doc) { $__getNode: function(doc) {
var node = this.$__node; var node = this.$__VNode;
if (!node) { if (!node) {
var vdomTree = this.$__getOutput(); var vdomTree = this.$__getOutput();
@ -282,7 +282,7 @@ var proto = AsyncVDOMBuilder.prototype = {
doc = this.$__document; doc = this.$__document;
} }
node = this.$__node = vdomTree.actualize(doc); node = this.$__VNode = vdomTree.actualize(doc);
} }
return node; return node;
}, },

View File

@ -1,12 +1,12 @@
var Node = require('./Node'); var VNode = require('./VNode');
var inherit = require('raptor-util/inherit'); var inherit = require('raptor-util/inherit');
function Comment(value) { function VComment(value) {
this.$__Node(-1 /* no children */); this.$__VNode(-1 /* no children */);
this.nodeValue = value; this.nodeValue = value;
} }
Comment.prototype = { VComment.prototype = {
nodeType: 8, nodeType: 8,
actualize: function(doc) { actualize: function(doc) {
@ -14,10 +14,10 @@ Comment.prototype = {
}, },
$__cloneNode: function() { $__cloneNode: function() {
return new Comment(this.nodeValue); return new VComment(this.nodeValue);
} }
}; };
inherit(Comment, Node); inherit(VComment, VNode);
module.exports = Comment; module.exports = VComment;

View File

@ -1,19 +1,19 @@
var Node = require('./Node'); var VNode = require('./VNode');
var inherit = require('raptor-util/inherit'); var inherit = require('raptor-util/inherit');
var extend = require('raptor-util/extend'); var extend = require('raptor-util/extend');
function DocumentFragmentClone(other) { function VDocumentFragmentClone(other) {
extend(this, other); extend(this, other);
this.$__parentNode = undefined; this.$__parentNode = undefined;
this.$__nextSibling = undefined; this.$__nextSibling = undefined;
} }
function DocumentFragment(documentFragment) { function VDocumentFragment(documentFragment) {
this.$__Node(null /* childCount */); this.$__VNode(null /* childCount */);
this.namespaceURI = undefined; this.namespaceURI = undefined;
} }
DocumentFragment.prototype = { VDocumentFragment.prototype = {
nodeType: 11, nodeType: 11,
$__DocumentFragment: true, $__DocumentFragment: true,
@ -21,7 +21,7 @@ DocumentFragment.prototype = {
$__nsAware: true, $__nsAware: true,
$__cloneNode: function() { $__cloneNode: function() {
return new DocumentFragmentClone(this); return new VDocumentFragmentClone(this);
}, },
actualize: function(doc) { actualize: function(doc) {
@ -38,8 +38,8 @@ DocumentFragment.prototype = {
} }
}; };
inherit(DocumentFragment, Node); inherit(VDocumentFragment, VNode);
DocumentFragmentClone.prototype = DocumentFragment.prototype; VDocumentFragmentClone.prototype = VDocumentFragment.prototype;
module.exports = DocumentFragment; module.exports = VDocumentFragment;

View File

@ -1,4 +1,4 @@
var Node = require('./Node'); var VNode = require('./VNode');
var inherit = require('raptor-util/inherit'); var inherit = require('raptor-util/inherit');
var extend = require('raptor-util/extend'); var extend = require('raptor-util/extend');
var defineProperty = Object.defineProperty; var defineProperty = Object.defineProperty;
@ -32,13 +32,13 @@ function convertAttrValue(type, value) {
} }
} }
function HTMLElementClone(other) { function VVElementClone(other) {
extend(this, other); extend(this, other);
this.$__parentNode = undefined; this.$__parentNode = undefined;
this.$__nextSibling = undefined; this.$__nextSibling = undefined;
} }
function HTMLElement(tagName, attrs, childCount, constId) { function VElement(tagName, attrs, childCount, constId) {
var namespaceURI; var namespaceURI;
var isTextArea; var isTextArea;
@ -55,7 +55,7 @@ function HTMLElement(tagName, attrs, childCount, constId) {
break; break;
} }
this.$__Node(childCount); this.$__VNode(childCount);
if (constId) { if (constId) {
if (!attrs) { if (!attrs) {
@ -72,15 +72,15 @@ function HTMLElement(tagName, attrs, childCount, constId) {
this.$__constId = constId; this.$__constId = constId;
} }
HTMLElement.prototype = { VElement.prototype = {
$__HTMLElement: true, $__VElement: true,
nodeType: 1, nodeType: 1,
$__nsAware: true, $__nsAware: true,
$__cloneNode: function() { $__cloneNode: function() {
return new HTMLElementClone(this); return new VVElementClone(this);
}, },
/** /**
@ -91,7 +91,7 @@ HTMLElement.prototype = {
* @param {int|null} childCount The number of child nodes (or `null` if not known) * @param {int|null} childCount The number of child nodes (or `null` if not known)
*/ */
e: function(tagName, attrs, childCount, constId) { e: function(tagName, attrs, childCount, constId) {
var child = this.$__appendChild(new HTMLElement(tagName, attrs, childCount, constId)); var child = this.$__appendChild(new VElement(tagName, attrs, childCount, constId));
if (childCount === 0) { if (childCount === 0) {
return this.$__finishChild(); return this.$__finishChild();
@ -180,7 +180,7 @@ HTMLElement.prototype = {
if (otherNode.nodeType == 1) { if (otherNode.nodeType == 1) {
var constId = this.$__constId; var constId = this.$__constId;
if (constId) { if (constId) {
var otherSameId = otherNode.$__Node ? otherNode.$__constId : otherNode.getAttribute(ATTR_MARKO_CONST); var otherSameId = otherNode.$__VNode ? otherNode.$__constId : otherNode.getAttribute(ATTR_MARKO_CONST);
return constId === otherSameId; return constId === otherSameId;
} }
} }
@ -189,9 +189,9 @@ HTMLElement.prototype = {
} }
}; };
inherit(HTMLElement, Node); inherit(VElement, VNode);
var proto = HTMLElementClone.prototype = HTMLElement.prototype; var proto = VVElementClone.prototype = VElement.prototype;
['checked', 'selected', 'disabled'].forEach(function(name) { ['checked', 'selected', 'disabled'].forEach(function(name) {
defineProperty(proto, name, { defineProperty(proto, name, {
@ -218,17 +218,17 @@ defineProperty(proto, 'value', {
} }
}); });
HTMLElement.$__morphAttrs = function(fromEl, toEl) { VElement.$__morphAttrs = function(fromEl, toEl) {
var attrs = toEl.$__attributes || toEl._vattrs; var attrs = toEl.$__attributes || toEl._vattrs;
var attrName; var attrName;
var i; var i;
// We use expando properties to associate the previous HTML // We use expando properties to associate the previous HTML
// attributes provided as part of the VDOM node with the // attributes provided as part of the VDOM node with the
// real HTMLElement DOM node. When diffing attributes, // real VElement DOM node. When diffing attributes,
// we only use our internal representation of the attributes. // we only use our internal representation of the attributes.
// When diffing for the first time it's possible that the // When diffing for the first time it's possible that the
// real HTMLElement node will not have the expando property // real VElement node will not have the expando property
// so we build the attribute map from the expando property // so we build the attribute map from the expando property
var oldAttrs = fromEl._vattrs; var oldAttrs = fromEl._vattrs;
@ -321,4 +321,4 @@ HTMLElement.$__morphAttrs = function(fromEl, toEl) {
fromEl._vattrs = attrs; fromEl._vattrs = attrs;
}; };
module.exports = HTMLElement; module.exports = VElement;

View File

@ -12,10 +12,10 @@ function assignNamespace(node, namespaceURI) {
} }
} }
function Node() {} function VNode() {}
Node.prototype = { VNode.prototype = {
$__Node: function(finalChildCount) { $__VNode: function(finalChildCount) {
this.$__finalChildCount = finalChildCount; this.$__finalChildCount = finalChildCount;
this.$__childCount = 0; this.$__childCount = 0;
this.$__firstChild = undefined; this.$__firstChild = undefined;
@ -64,7 +64,7 @@ Node.prototype = {
$__appendChild: function(child) { $__appendChild: function(child) {
this.$__childCount++; this.$__childCount++;
if (this.$__isTextArea) { if (this.$__isTextArea) {
if (child.$__Text) { if (child.$__Text) {
var childValue = child.nodeValue; var childValue = child.nodeValue;
@ -120,4 +120,4 @@ Node.prototype = {
// } // }
}; };
module.exports = Node; module.exports = VNode;

View File

@ -1,12 +1,12 @@
var Node = require('./Node'); var VNode = require('./VNode');
var inherit = require('raptor-util/inherit'); var inherit = require('raptor-util/inherit');
function Text(value) { function VText(value) {
this.$__Node(-1 /* no children */); this.$__VNode(-1 /* no children */);
this.nodeValue = value; this.nodeValue = value;
} }
Text.prototype = { VText.prototype = {
$__Text: true, $__Text: true,
nodeType: 3, nodeType: 3,
@ -16,10 +16,10 @@ Text.prototype = {
}, },
$__cloneNode: function() { $__cloneNode: function() {
return new Text(this.nodeValue); return new VText(this.nodeValue);
} }
}; };
inherit(Text, Node); inherit(VText, VNode);
module.exports = Text; module.exports = VText;

View File

@ -1,8 +1,8 @@
'use strict'; 'use strict';
var vdom = require('./vdom'); var vdom = require('./vdom');
var HTMLElement = vdom.$__HTMLElement; var VElement = vdom.$__VElement;
var Text = vdom.$__Text; var VText = vdom.$__VText;
var commonHelpers = require('../helpers'); var commonHelpers = require('../helpers');
var extend = require('raptor-util/extend'); var extend = require('raptor-util/extend');
@ -10,11 +10,11 @@ var extend = require('raptor-util/extend');
var classList = commonHelpers.cl; var classList = commonHelpers.cl;
exports.e = function(tagName, attrs, childCount, constId) { exports.e = function(tagName, attrs, childCount, constId) {
return new HTMLElement(tagName, attrs, childCount, constId); return new VElement(tagName, attrs, childCount, constId);
}; };
exports.t = function(value) { exports.t = function(value) {
return new Text(value); return new VText(value);
}; };
exports.const = function(id) { exports.const = function(id) {
@ -44,4 +44,4 @@ exports.ca = function(classNames) {
} }
}; };
extend(exports, commonHelpers); extend(exports, commonHelpers);

View File

@ -1,8 +1,8 @@
var Node = require('./Node'); var VNode = require('./VNode');
var Comment = require('./Comment'); var VComment = require('./VComment');
var DocumentFragment = require('./DocumentFragment'); var VDocumentFragment = require('./VDocumentFragment');
var HTMLElement = require('./HTMLElement'); var VElement = require('./VElement');
var Text = require('./Text'); var VText = require('./VText');
var defaultDocument = typeof document != 'undefined' && document; var defaultDocument = typeof document != 'undefined' && document;
var specialHtmlRegexp = /[&<]/; var specialHtmlRegexp = /[&<]/;
@ -41,7 +41,7 @@ function virtualize(node) {
} }
} }
var vdomEL = new HTMLElement(node.nodeName, attrs); var vdomEL = new VElement(node.nodeName, attrs);
if (vdomEL.$__isTextArea) { if (vdomEL.$__isTextArea) {
vdomEL.$__value = node.value; vdomEL.$__value = node.value;
@ -51,11 +51,11 @@ function virtualize(node) {
return vdomEL; return vdomEL;
case 3: case 3:
return new Text(node.nodeValue); return new VText(node.nodeValue);
case 8: case 8:
return new Comment(node.nodeValue); return new VComment(node.nodeValue);
case 11: case 11:
var vdomDocFragment = new DocumentFragment(); var vdomDocFragment = new VDocumentFragment();
virtualizeChildNodes(node, vdomDocFragment); virtualizeChildNodes(node, vdomDocFragment);
return vdomDocFragment; return vdomDocFragment;
} }
@ -63,7 +63,7 @@ function virtualize(node) {
function virtualizeHTML(html, doc) { function virtualizeHTML(html, doc) {
if (!specialHtmlRegexp.test(html)) { if (!specialHtmlRegexp.test(html)) {
return new Text(html); return new VText(html);
} }
if (!range && doc.createRange) { if (!range && doc.createRange) {
@ -80,7 +80,7 @@ function virtualizeHTML(html, doc) {
} else { } else {
var container = doc.createElement('body'); var container = doc.createElement('body');
container.innerHTML = html; container.innerHTML = html;
vdomFragment = new DocumentFragment(); vdomFragment = new VDocumentFragment();
var curChild = container.firstChild; var curChild = container.firstChild;
while(curChild) { while(curChild) {
@ -92,7 +92,7 @@ function virtualizeHTML(html, doc) {
return vdomFragment; return vdomFragment;
} }
var Node_prototype = Node.prototype; var Node_prototype = VNode.prototype;
/** /**
* Shorthand method for creating and appending a Text node with a given value * Shorthand method for creating and appending a Text node with a given value
@ -112,7 +112,7 @@ Node_prototype.t = function(value) {
} }
} }
this.$__appendChild(vdomNode || new Text(value.toString())); this.$__appendChild(vdomNode || new VText(value.toString()));
return this.$__finishChild(); return this.$__finishChild();
}; };
@ -121,18 +121,18 @@ Node_prototype.t = function(value) {
* @param {String} value The value for the new Comment node * @param {String} value The value for the new Comment node
*/ */
Node_prototype.c = function(value) { Node_prototype.c = function(value) {
this.$__appendChild(new Comment(value)); this.$__appendChild(new VComment(value));
return this.$__finishChild(); return this.$__finishChild();
}; };
Node_prototype.$__appendDocumentFragment = function() { Node_prototype.$__appendDocumentFragment = function() {
return this.$__appendChild(new DocumentFragment()); return this.$__appendChild(new VDocumentFragment());
}; };
exports.$__Comment = Comment; exports.$__VComment = VComment;
exports.$__DocumentFragment = DocumentFragment; exports.$__VDocumentFragment = VDocumentFragment;
exports.$__HTMLElement = HTMLElement; exports.$__VElement = VElement;
exports.$__Text = Text; exports.$__VText = VText;
exports.$__virtualize = virtualize; exports.$__virtualize = virtualize;
exports.$__virtualizeHTML = virtualizeHTML; exports.$__virtualizeHTML = virtualizeHTML;
exports.$__defaultDocument = defaultDocument; exports.$__defaultDocument = defaultDocument;

View File

@ -1,5 +1,5 @@
var AsyncVDOMBuilder = require('../runtime/vdom/AsyncVDOMBuilder'); var AsyncVDOMBuilder = require('../runtime/vdom/AsyncVDOMBuilder');
var HTMLElement = require('../runtime/vdom/HTMLElement'); var VElement = require('../runtime/vdom/VElement');
var expect = require('chai').expect; var expect = require('chai').expect;
function getChildNodes(parentNode) { function getChildNodes(parentNode) {
@ -117,7 +117,7 @@ describe('AsyncVDOMBuilder', function() {
}); });
it('staticNode, text, comment', function(done) { it('staticNode, text, comment', function(done) {
var staticNode = new HTMLElement('div', {}, 0, 'f891ea3'); var staticNode = new VElement('div', {}, 0, 'f891ea3');
var out = new AsyncVDOMBuilder(); var out = new AsyncVDOMBuilder();
out.node(staticNode); out.node(staticNode);
@ -144,4 +144,4 @@ describe('AsyncVDOMBuilder', function() {
// it('should avoid writes after end'); // it('should avoid writes after end');
// //
// it('globals'); // it('globals');
}); });

View File

@ -1,9 +1,9 @@
module.exports = function(helpers) { module.exports = function(helpers) {
var morphAttrs = helpers.vdom.HTMLElement.$__morphAttrs; var morphAttrs = helpers.vdom.VElement.$__morphAttrs;
var fromEl = helpers.document.createElement('div'); var fromEl = helpers.document.createElement('div');
var toEl = helpers.vdom.createElement('div', { class: 'foo', 'xlink:href': 'bar.com' }); var toEl = helpers.vdom.createElement('div', { class: 'foo', 'xlink:href': 'bar.com' });
morphAttrs(fromEl, toEl); morphAttrs(fromEl, toEl);
return fromEl; return fromEl;
}; };

View File

@ -6,25 +6,25 @@ var toHTML = require('./util/toHTML');
var jsdom = require("jsdom").jsdom; var jsdom = require("jsdom").jsdom;
var document = jsdom('<html><body></body></html>'); var document = jsdom('<html><body></body></html>');
var HTMLElement = require('../runtime/vdom/HTMLElement'); var VElement = require('../runtime/vdom/VElement');
var Text = require('../runtime/vdom/Text'); var VText = require('../runtime/vdom/VText');
var Comment = require('../runtime/vdom/Comment'); var VComment = require('../runtime/vdom/VComment');
var DocumentFragment = require('../runtime/vdom/DocumentFragment'); var VDocumentFragment = require('../runtime/vdom/VDocumentFragment');
var vdomHelpers = { var vdomHelpers = {
createElement: function(tagName, attrs, childCount, constId) { createElement: function(tagName, attrs, childCount, constId) {
return new HTMLElement(tagName, attrs, childCount, constId); return new VElement(tagName, attrs, childCount, constId);
}, },
createText: function(value) { createText: function(value) {
return new Text(value); return new VText(value);
}, },
createComment: function(value) { createComment: function(value) {
return new Comment(value); return new VComment(value);
}, },
createDocumentFragment: function() { createDocumentFragment: function() {
return new DocumentFragment(); return new VDocumentFragment();
}, },
HTMLElement: HTMLElement VElement: VElement
}; };
describe('marko-vdom', () => { describe('marko-vdom', () => {
@ -45,4 +45,4 @@ describe('marko-vdom', () => {
done(); done();
} }
); );
}); });

View File

@ -15,7 +15,7 @@ var RenderResult = require('../runtime/RenderResult');
var SubscriptionTracker = require('listener-tracker'); var SubscriptionTracker = require('listener-tracker');
var inherit = require('raptor-util/inherit'); var inherit = require('raptor-util/inherit');
var updateManager = require('./update-manager'); var updateManager = require('./update-manager');
var morphAttrs = require('../runtime/vdom/HTMLElement').$__morphAttrs; var morphAttrs = require('../runtime/vdom/VElement').$__morphAttrs;
var morphdomFactory = require('morphdom/factory'); var morphdomFactory = require('morphdom/factory');
var morphdom = morphdomFactory(morphAttrs); var morphdom = morphdomFactory(morphAttrs);