Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

0.8 patching #1462

Merged
merged 26 commits into from
Apr 29, 2015
Merged
Show file tree
Hide file tree
Changes from 25 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
8e21c6e
shady dom: cache composed nodes and simplify array splice handling.
sorvell Apr 14, 2015
d2adde4
Merge branch '0.8-preview' into 0.8-patching
sorvell Apr 15, 2015
dd7ea78
patch childNodes.
sorvell Apr 15, 2015
7033346
patch qs/qsa, parentNode, children, childNodes, appendChild, insertBe…
Apr 16, 2015
333ab2e
tests pass on Safari/FF
Apr 16, 2015
e3c022d
start on innerHTML, textContent
Apr 16, 2015
137f320
factor patching into separate module.
sorvell Apr 16, 2015
cf42801
factor patching into its own module, correct tests, and add getter fo…
sorvell Apr 17, 2015
79a358a
Merge branch '0.8-preview' into 0.8-patching
sorvell Apr 17, 2015
b43de53
Optionally patch via prototype.
sorvell Apr 18, 2015
7fd3fce
Merge branch '0.8-preview' into 0.8-patching
sorvell Apr 18, 2015
d487a32
Merge branch '0.8-preview' into 0.8-patching
sorvell Apr 21, 2015
2811304
patch more accessors; host -> domHost
sorvell Apr 21, 2015
c9e03f9
Merge 0.8 preview
sorvell Apr 21, 2015
d8fea73
slight factoring
sorvell Apr 21, 2015
a9ec59a
add remove method that includes unpatching.
sorvell Apr 22, 2015
a50321d
Merge branch '0.8-preview' into 0.8-patching
sorvell Apr 23, 2015
a136bc8
make patching optional based on setting.
sorvell Apr 23, 2015
5552ef8
experiment with pre-patching.
sorvell Apr 23, 2015
726e1e9
correct textContent, innerHTML for thextnodes.
Apr 23, 2015
1613b15
pre-patching experiments (commented)
Apr 23, 2015
9ee54d0
Patch dom when experimental import `patch-dom.html` is loaded.
sorvell Apr 29, 2015
e27b1dc
update patching prototype check to work with Chrome 42.
sorvell Apr 29, 2015
d42e9e2
add tests for Polymer.dom accessors.
sorvell Apr 29, 2015
c5a216d
Merge branch '0.8-preview' into 0.8-patching
sorvell Apr 29, 2015
964c08f
Fixes based on review feedback.
sorvell Apr 29, 2015
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
363 changes: 320 additions & 43 deletions src/lib/dom-api.html

Large diffs are not rendered by default.

132 changes: 132 additions & 0 deletions src/lib/dom-innerHTML.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<script>

Polymer.domInnerHTML = (function() {

// Cribbed from ShadowDOM polyfill
// https://github.com/webcomponents/webcomponentsjs/blob/master/src/ShadowDOM/wrappers/HTMLElement.js#L28
/////////////////////////////////////////////////////////////////////////////
// innerHTML and outerHTML

// http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#escapingString
var escapeAttrRegExp = /[&\u00A0"]/g;
var escapeDataRegExp = /[&\u00A0<>]/g;

function escapeReplace(c) {
switch (c) {
case '&':
return '&amp;';
case '<':
return '&lt;';
case '>':
return '&gt;';
case '"':
return '&quot;'
case '\u00A0':
return '&nbsp;';
}
}

function escapeAttr(s) {
return s.replace(escapeAttrRegExp, escapeReplace);
}

function escapeData(s) {
return s.replace(escapeDataRegExp, escapeReplace);
}

function makeSet(arr) {
var set = {};
for (var i = 0; i < arr.length; i++) {
set[arr[i]] = true;
}
return set;
}

// http://www.whatwg.org/specs/web-apps/current-work/#void-elements
var voidElements = makeSet([
'area',
'base',
'br',
'col',
'command',
'embed',
'hr',
'img',
'input',
'keygen',
'link',
'meta',
'param',
'source',
'track',
'wbr'
]);

var plaintextParents = makeSet([
'style',
'script',
'xmp',
'iframe',
'noembed',
'noframes',
'plaintext',
'noscript'
]);

function getOuterHTML(node, parentNode, composed) {
switch (node.nodeType) {
case Node.ELEMENT_NODE:
//var tagName = node.tagName.toLowerCase();
var tagName = node.localName;
var s = '<' + tagName;
var attrs = node.attributes;
for (var i = 0, attr; attr = attrs[i]; i++) {
s += ' ' + attr.name + '="' + escapeAttr(attr.value) + '"';
}
s += '>';
if (voidElements[tagName]) {
return s;
}
return s + getInnerHTML(node, composed) + '</' + tagName + '>';
case Node.TEXT_NODE:
var data = node.data;
if (parentNode && plaintextParents[parentNode.localName]) {
return data;
}
return escapeData(data);
case Node.COMMENT_NODE:
return '<!--' + node.data + '-->';
default:
console.error(node);
throw new Error('not implemented');
}
}

function getInnerHTML(node, composed) {
if (node instanceof HTMLTemplateElement)
node = node.content;
var s = '';
var c$ = Polymer.dom(node).childNodes;
c$ = composed ? node._composedChildren : c$;
for (var i=0, l=c$.length, child; (i<l) && (child=c$[i]); i++) {
s += getOuterHTML(child, node, composed);
}
return s;
}

return {
getInnerHTML: getInnerHTML
};

})();

</script>
227 changes: 227 additions & 0 deletions src/lib/expr/patch-dom.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<script>

/**
* Experimental import that patches elements that interacts with Shady DOM
* such that tree traversal and mutation apis act like they would under
* Shadow DOM.
*
* This import enables interaction with Shady DOM powered custom elements mostly
* without the need to use `Polymer.dom` and can therefore enable better
* interoperation with 3rd party code, libraries, and frameworks that use DOM
* tree manipulation apis.
*/

(function() {

var baseFinishDistribute = Polymer.Base._finishDistribute;

Polymer.Base._finishDistribute = function() {
baseFinishDistribute.call(this);
if (!this.__patched) {
Polymer.dom(this);
Polymer.dom(this.root);
Array.prototype.forEach.call(this.childNodes, function(c) {
Polymer.dom(c);
});
}
};


var saveLightChildrenIfNeeded = Polymer.DomApi.saveLightChildrenIfNeeded;
var getComposedChildren = Polymer.DomApi.getComposedChildren;

var nativeShadow = Polymer.Settings.useShadow;

var excluded = [document, document.head, document.body];

Polymer.telemetry.patched = 0;

// experimental: support patching selected native api.
Polymer.DomApi.ctor.prototype.patch = function() {
if (nativeShadow || this.node.__patched ||
(excluded.indexOf(this.node) >= 0)) {
return;
}
getComposedChildren(this.node);
saveLightChildrenIfNeeded(this.node);
if (!this.node.lightParent) {
this.node.lightParent = this.node.parentNode;
}
if (!this.node._composedParent) {
this.node._composedParent = this.node.parentNode;
}
// TODO(sorvell): correctly patch text nodes.
if (this.node.nodeType === Node.TEXT_NODE) {
return;
}
patchImpl.patch(this.node);
this.node.__patched = true;
};

Polymer.DomApi.ctor.prototype.unpatch = function() {
this.flush();
patchImpl.unpatch(this.node);
};

Polymer.DomApi.ctor.prototype.remove = function() {
this.parentNode.removeChild(this.node);
this.flush();
this.unpatch();
};

var log = false;

var factory = Polymer.DomApi.factory;

var patchImpl = {

hasPrototypeDescriptors: Boolean(Object.getOwnPropertyDescriptor(
Node.prototype, 'textContent')),

methods: ['appendChild', 'insertBefore', 'removeChild', 'replaceChild',
'querySelector', 'querySelectorAll', 'getDestinationInsertionPoints'],
// <content>: getDistributedNodes

accessors: ['parentNode', 'childNodes',
'firstChild', 'lastChild', 'nextSibling', 'previousSibling',
'parentElement', 'children',
'firstElementChild', 'lastElementChild',
'nextElementSibling', 'previousElementSibling'
],

preAccessors: ['children', 'parentElement',
'firstChild', 'lastChild', 'nextSibling', 'previousSibling',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not used; remove

'firstElementChild', 'lastElementChild',
'nextElementSibling', 'previousElementSibling'
],

writableAccessors: ['textContent', 'innerHTML'],

protoCache: {},

patch: function(node) {
Polymer.telemetry.patched++;
log && console.warn('patch node', node);
if (this.hasPrototypeDescriptors) {
this.patchPrototype(node);
} else {
this.patchObject(node, true);
}
},

patchPrototype: function(node) {
var name = node.is || (node.getAttribute && node.getAttribute('is')) ||
node.localName;
var proto = this.protoCache[name];
if (!proto) {
proto = this.protoCache[name] = this.createPatchedPrototype(node);
}
node.__proto__ = proto;
},

createPatchedPrototype: function(node) {
var sourceProto = node.__proto__;
var newProto = Object.create(sourceProto);
newProto.__sourceProto__ = sourceProto;
this.patchObject(newProto);
return newProto;
},

patchObject: function(obj, cacheAccesors) {
this.methods.forEach(function(m) {
this.patchMethod(obj, m);
}, this);
this.accessors.forEach(function(n) {
this.patchAccessor(obj, n, false, cacheAccesors);
}, this);
this.writableAccessors.forEach(function(n) {
this.patchAccessor(obj, n, true, cacheAccesors);
}, this);
},

prePatchObject: function(obj) {
this.methods.forEach(function(m) {
this.patchMethod(obj, m);
}, this);
this.preAccessors.forEach(function(n) {
this.patchAccessor(obj, n, false);
}, this);
this.writableAccessors.forEach(function(n) {
this.patchAccessor(obj, n, true);
}, this);
},

patchMethod: function(obj, name) {
var orig = obj[name];
obj[name] = function() {
log && console.log(this, name, arguments);
return factory(this)[name].apply(this.__domApi, arguments);
};
},

patchAccessor: function(obj, name, writable, shouldCache) {
if (shouldCache) {
this.cacheAccessor(obj, name);
}
var info = {
get: function() {
log && console.log(this, name);
return factory(this)[name];
},
configurable: true
};
if (writable) {
info.set = function(value) {
factory(this)[name] = value;
};
}
Object.defineProperty(obj, name, info);
},

cacheAccessor: function(obj, name) {
var cache = obj.__descriptorCache = obj.__descriptorCache || {};
cache[name] = Object.getOwnPropertyDescriptor(obj, name);
},

unpatch: function(obj) {
if (obj.__sourceProto__) {
obj.__proto__ = obj.__sourceProto__;
} else {
this.methods.forEach(function(m) {
this.unpatchMethod(obj, m);
}, this);
this.accessors.forEach(function(n) {
this.unpatchAccessor(obj, n);
}, this);
this.writableAccessors.forEach(function(n) {
this.unpatchAccessor(obj, n);
}, this);
}
obj.__patched = false;
},

unpatchMethod: function(obj, name) {
delete obj[name];
},

unpatchAccessor: function(obj, name) {
var info = obj.__descriptorCache[name];
Object.defineProperty(obj, name, info);
}

};

Polymer.DomApi.patchImpl = patchImpl;

})();

</script>
Loading