Permalink
Browse files

feat(model): Added initial support for model

  • Loading branch information...
calebdwilliams committed Jul 13, 2018
1 parent e93e654 commit c3d75beeddf4a5fc723c0ccb145d4c028c7e6737
@@ -8,6 +8,9 @@ const propPattern = /^\[.*\]$/;
const sanitizePattern = /^this\./;
const startSeparator = /---!\{/gi;
const endSeparator = /\}!---/gi;
const modelPattern = /t-model/gi;

const modelSymbol = Symbol('t-model');

class ContentNode {
constructor(node, compiler) {
@@ -64,17 +67,24 @@ class AttributeNode {

addListeners() {
this.boundEvents.forEach((eventHandler, eventName) => {
const events = eventHandler.split(/;/);
const eventsSafe = events.filter(event => event.match(sanitizePattern));
const sanitizedEvents = eventsSafe.join('; ');
if (eventHandler.match(sanitizePattern)) {
const handler = Reflect.construct(Function, ['event', sanitizedEvents]).bind(this.context);
this.node.addEventListener(eventName, handler);
this.node._boundEvents = handler;
}
if (eventName === modelSymbol) {
this.context[eventHandler] = this.context[eventHandler] ? this.context[eventHandler] : undefined;
this.node.value = this.context[eventHandler];
this.node.addEventListener('input', this._modelFunction(eventHandler));
this.node.addEventListener('change', this._modelFunction(eventHandler));
} else {
const events = eventHandler.split(/;/);
const eventsSafe = events.filter(event => event.match(sanitizePattern));
const sanitizedEvents = eventsSafe.join('; ');
if (eventHandler.match(sanitizePattern)) {
const handler = Reflect.construct(Function, ['event', sanitizedEvents]).bind(this.context);
this.node.addEventListener(eventName, handler);
this.node._boundEvents = handler;
}

if (eventsSafe.length < events.length) {
console.warn('Inline functions not allowed inside of event bindings. Unsafe functions have been removed from node', this.node);
if (eventsSafe.length < events.length) {
console.warn('Inline functions not allowed inside of event bindings. Unsafe functions have been removed from node', this.node);
}
}
});
}
@@ -114,6 +124,13 @@ class AttributeNode {
}
});
}

_modelFunction(modelName) {
const { context } = this;
return function() {
context[modelName] = this.value;
};
}
}

class Template {
@@ -156,7 +173,7 @@ class Template {
this._append(baseNode);
}

_walk(walker, parts, setup) {
_walk(walker, parts) {
while (walker.nextNode()) {
const { currentNode } = walker;
if (!currentNode.__templiteralCompiler) {
@@ -171,11 +188,14 @@ class Template {
if (attribute.value.match(valuePattern) || attribute.name.match(propPattern)) {
boundAttrs.set(attribute.name, attribute);
}
if (setup && attribute.name.match(eventPattern)) {
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 (attribute.name.match(modelPattern)) {
boundEvents.set(modelSymbol, attribute.value);
}
}
if (boundAttrs.size >= 1 || boundEvents.size >= 1) {
const attrNode = new AttributeNode(currentNode, boundAttrs, boundEvents, this.context, this);
@@ -204,7 +224,7 @@ class Template {

for (let i = 0; i < values.length; i += 1) {
if (values[i] !== this.oldValues[i]) {
this.partIndicies.get(i).update(values);
this.partIndicies.get(i).update(values);
}
}
}
@@ -234,7 +254,7 @@ class TIf extends HTMLElement {
super();
this.cached = [];
}

connectedCallback() {
this.style.display = 'contents';
}

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

Oops, something went wrong.
@@ -4,6 +4,9 @@ const propPattern = /^\[.*\]$/;
const sanitizePattern = /^this\./;
const startSeparator = /---!\{/gi;
const endSeparator = /\}!---/gi;
const modelPattern = /t-model/gi;

const modelSymbol = Symbol('t-model');

class ContentNode {
constructor(node, compiler) {
@@ -60,17 +63,24 @@ class AttributeNode {

addListeners() {
this.boundEvents.forEach((eventHandler, eventName) => {
const events = eventHandler.split(/;/);
const eventsSafe = events.filter(event => event.match(sanitizePattern));
const sanitizedEvents = eventsSafe.join('; ');
if (eventHandler.match(sanitizePattern)) {
const handler = Reflect.construct(Function, ['event', sanitizedEvents]).bind(this.context);
this.node.addEventListener(eventName, handler);
this.node._boundEvents = handler;
}
if (eventName === modelSymbol) {
this.context[eventHandler] = this.context[eventHandler] ? this.context[eventHandler] : undefined;
this.node.value = this.context[eventHandler];
this.node.addEventListener('input', this._modelFunction(eventHandler));
this.node.addEventListener('change', this._modelFunction(eventHandler));
} else {
const events = eventHandler.split(/;/);
const eventsSafe = events.filter(event => event.match(sanitizePattern));
const sanitizedEvents = eventsSafe.join('; ');
if (eventHandler.match(sanitizePattern)) {
const handler = Reflect.construct(Function, ['event', sanitizedEvents]).bind(this.context);
this.node.addEventListener(eventName, handler);
this.node._boundEvents = handler;
}

if (eventsSafe.length < events.length) {
console.warn('Inline functions not allowed inside of event bindings. Unsafe functions have been removed from node', this.node);
if (eventsSafe.length < events.length) {
console.warn('Inline functions not allowed inside of event bindings. Unsafe functions have been removed from node', this.node);
}
}
});
}
@@ -110,6 +120,13 @@ class AttributeNode {
}
});
}

_modelFunction(modelName) {
const { context } = this;
return function() {
context[modelName] = this.value;
};
}
}

class Template {
@@ -152,7 +169,7 @@ class Template {
this._append(baseNode);
}

_walk(walker, parts, setup) {
_walk(walker, parts) {
while (walker.nextNode()) {
const { currentNode } = walker;
if (!currentNode.__templiteralCompiler) {
@@ -167,11 +184,14 @@ class Template {
if (attribute.value.match(valuePattern) || attribute.name.match(propPattern)) {
boundAttrs.set(attribute.name, attribute);
}
if (setup && attribute.name.match(eventPattern)) {
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 (attribute.name.match(modelPattern)) {
boundEvents.set(modelSymbol, attribute.value);
}
}
if (boundAttrs.size >= 1 || boundEvents.size >= 1) {
const attrNode = new AttributeNode(currentNode, boundAttrs, boundEvents, this.context, this);
@@ -200,7 +220,7 @@ class Template {

for (let i = 0; i < values.length; i += 1) {
if (values[i] !== this.oldValues[i]) {
this.partIndicies.get(i).update(values);
this.partIndicies.get(i).update(values);
}
}
}
@@ -230,7 +250,7 @@ class TIf extends HTMLElement {
super();
this.cached = [];
}

connectedCallback() {
this.style.display = 'contents';
}
Oops, something went wrong.

0 comments on commit c3d75be

Please sign in to comment.