Permalink
Browse files

fix(Template): Removed Template.node which allows nested templiterals

  • Loading branch information...
calebdwilliams committed Nov 14, 2017
1 parent 3ac2c96 commit 6391fd8c9dc7851e2cd5f96f9830027cc18f2842
@@ -39,12 +39,13 @@ class AttributeNode {

addListeners() {
this.boundEvents.forEach((eventHandler, eventName) => {
const events = eventHandler.split(/\;/);
const events = eventHandler.split(/;/);
const eventsSafe = events.filter(event => event.match(sanitizePattern));
const sanitizedEvents = eventsSafe.join('; ');
if (eventHandler.match(sanitizePattern)) {
const handler = new Function(sanitizedEvents);
this.node.addEventListener(eventName, handler.bind(this.context));
const handler = new Function(sanitizedEvents).bind(this.context);
this.node.addEventListener(eventName, handler);
this.node._boundEvents = handler;
}

if (eventsSafe.length < events.length) {
@@ -63,7 +64,6 @@ class AttributeNode {
const newAttr = newNode.boundAttrs.get(attr.name);
newAttr && attr.value !== newAttr.value ? attr.value = newAttr.value : null;

/* TODO */
if (attr.name.match(propPattern)) {
this.updateAttributes(attr.name, newAttr);
}
@@ -76,7 +76,6 @@ class AttributeNode {
this.node[attributeName] = newAttr.value;
this.node.setAttribute(attributeName, newAttr.value);
} else {
this.node;
this.node.removeAttribute(attributeName);
}
}
@@ -87,16 +86,23 @@ class Template {
const template = document.createElement('template');
const content = base.replace(startSeparator, '').replace(endSeparator, '');
template.innerHTML = content;
this.node = document.importNode(template.content, true);
this.parts = new Map();
this.templiteralParts = new Set();
this.eventHandlers = [];
this.location = location;
this.context = context;
this._init(base);
}

paint() {
this.location.appendChild(this.node);
disconnect() {
this.eventHandlers.forEach((eventName, index) => {
const node = this.eventHandlers[index].currentNode;
node.removeEventListener(eventName, node._boundEvents);
});
}

paint(node) {
this.location.appendChild(node);
}

update(content) {
@@ -108,7 +114,7 @@ class Template {
}

_parseUpdates(walker) {
const updatedParts = this._walk(walker, new Map());
const updatedParts = this._walk(walker, new Map(), false);
this.parts.forEach((part, index) => part.update(updatedParts.get(index)));
}

@@ -117,51 +123,55 @@ class Template {
baseTemplate.innerHTML = base;
const baseNode = document.importNode(baseTemplate.content, true);
const walker = document.createTreeWalker(baseNode, 133, null, false);
this._walk(walker, this.parts);
this.node = baseNode;
this.paint();
this._walk(walker, this.parts, true);
this.paint(baseNode);
}

_walk(walker, parts) {
_walk(walker, parts, setup) {
let index = -1;

while (walker.nextNode()) {
index += 1;
const { currentNode } = walker;
switch (currentNode.nodeType) {
case 1: {
const { attributes } = currentNode;
if (attributes.length) {
const boundAttrs = new Map();
const boundEvents = new Map();
for (let i = 0; i < attributes.length; i += 1) {
const attribute = attributes[i];
if (attribute.value.match(valuePattern) || attribute.name.match(propPattern)) {
boundAttrs.set(attribute.name, attribute);
if (!currentNode.__templiteralCompiler) {
switch (currentNode.nodeType) {
case 1: {
const { attributes } = currentNode;
if (attributes.length) {
const boundAttrs = new Map();
const boundEvents = new Map();
for (let i = 0; i < attributes.length; i += 1) {
const attribute = attributes[i];
if (attribute.value.match(valuePattern) || attribute.name.match(propPattern)) {
boundAttrs.set(attribute.name, attribute);
}
if (setup && attribute.name.match(eventPattern)) {
const eventName = attribute.name.substring(1, attribute.name.length - 1);
boundEvents.set(eventName, attribute.value);
this.eventHandlers.push({ eventName, currentNode });
}
}
if (attribute.name.match(eventPattern)) {
const eventName = attribute.name.substring(1, attribute.name.length - 1);
boundEvents.set(eventName, attribute.value);
this.eventHandlers.push({ eventName, currentNode });
if (boundAttrs.size >= 1 || boundEvents.size >= 1 || this.parts.has(index)) {
const attrNode = new AttributeNode(currentNode, index, boundAttrs, boundEvents, this.context);
parts.set(index, attrNode);
attrNode.cleanUp();
}
}
if (boundAttrs.size >= 1 || boundEvents.size >= 1 || this.parts.has(index)) {
const attrNode = new AttributeNode(currentNode, index, boundAttrs, boundEvents, this.context);
parts.set(index, attrNode);
attrNode.cleanUp();
break;
}
case 3: {
if (currentNode.textContent && currentNode.textContent.match(valuePattern) || this.parts.has(index)) {
const contentNode = new ContentNode(currentNode, index);
parts.set(index, contentNode);
contentNode.cleanUp();
}
break;
}
break;
}
case 3: {
if (currentNode.textContent && currentNode.textContent.match(valuePattern) || this.parts.has(index)) {
const contentNode = new ContentNode(currentNode, index);
parts.set(index, contentNode);
contentNode.cleanUp();
}
break;
}
} else {
this.templiteralParts.add(currentNode);
}

}

return parts;
@@ -184,15 +194,23 @@ function html(location) {
compiler = new Template(output, location, this);
templateCache.set(templateKey, compiler);
}
}
location.__templiteralCompiler = compiler;
return compiler;
};
}

function templiteral(location, context) {
function templiteral(location, context = this) {
function render(...args) {
const renderer = Reflect.apply(html, context, [location]);
return Reflect.apply(renderer, context, args);
}
return render.bind(context);
}

function registerElements(elements) {
elements.forEach(elementClass =>
customElements.define(elementClass.tagName, elementClass));
}

exports.templiteral = templiteral;
exports.registerElements = registerElements;

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 6391fd8

Please sign in to comment.