MontoyaTech/ignite-html
MontoyaTech/ignite-html
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added innerText and Text template to help secure apps from code injection or other bad behavior.

Browse Source
This commit is contained in:
Matt Mo 2021-10-06 08:08:02 -07:00
parent 31503e62d1
commit 59bb836bac
1 changed files with 164 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
ignite-template.js
View File

@ -49,6 +49,7 @@ class IgniteTemplate {
this._destructors = []; this._destructors = [];
this._elementValue = null; this._elementValue = null;
this._elementInnerHTML = null; this._elementInnerHTML = null;
this._elementInnerText = null;
this._resizeObserverCallback = []; this._resizeObserverCallback = [];
this._resizeObserver = null; this._resizeObserver = null;
this._intersectObserverCallback = []; this._intersectObserverCallback = [];
@ -352,12 +353,12 @@ class IgniteTemplate {
IgniteRenderingContext.push(); IgniteRenderingContext.push();
if (value instanceof IgniteProperty) { if (value instanceof IgniteProperty) {
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged((converter != null ? converter(oldValue) : oldValue), (converter != null ? converter(newValue) : newValue)))); this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged(converter != null ? converter(newValue) : newValue)));
this._callbacks.push(value.attachOnPush((list, items) => this.onInnerHTMLChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null)))); this._callbacks.push(value.attachOnPush((list, items) => this.onInnerHTMLChanged(converter != null ? converter(list) : null)));
this._callbacks.push(value.attachOnUnshift((list, items) => this.onInnerHTMLChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null)))); this._callbacks.push(value.attachOnUnshift((list, items) => this.onInnerHTMLChanged(converter != null ? converter(list) : null)));
this._callbacks.push(value.attachOnPop((list) => this.onInnerHTMLChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null)))); this._callbacks.push(value.attachOnPop((list) => this.onInnerHTMLChanged(converter != null ? converter(list) : null)));
this._callbacks.push(value.attachOnShift((list) => this.onInnerHTMLChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null)))); this._callbacks.push(value.attachOnShift((list) => this.onInnerHTMLChanged(converter != null ? converter(list) : null)));
this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onInnerHTMLChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null)))); this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onInnerHTMLChanged(converter != null ? converter(list) : null)));
this._elementInnerHTML = (converter != null ? converter(value.value) : value.value); this._elementInnerHTML = (converter != null ? converter(value.value) : value.value);
} else if (Array.isArray(value) && value.length > 0 && value[0] instanceof IgniteProperty) { } else if (Array.isArray(value) && value.length > 0 && value[0] instanceof IgniteProperty) {
@ -369,12 +370,12 @@ class IgniteTemplate {
//Attack a callback for all the properties //Attack a callback for all the properties
value.forEach(prop => { value.forEach(prop => {
if (prop instanceof IgniteProperty) { if (prop instanceof IgniteProperty) {
this._callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged(converter(...value.getOldPropertyValues(prop, oldValue)), converter(...value.getPropertyValues())))); this._callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged(converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnPush((list, items) => this.onInnerHTMLChanged(converter(...value.getOldPropertyValues(prop, list)), converter(...value.getPropertyValues())))); this._callbacks.push(prop.attachOnPush((list, items) => this.onInnerHTMLChanged(converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnUnshift((list, items) => this.onInnerHTMLChanged(converter(...value.getOldPropertyValues(prop, list)), converter(...value.getPropertyValues())))); this._callbacks.push(prop.attachOnUnshift((list, items) => this.onInnerHTMLChanged(converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnPop((list) => this.onInnerHTMLChanged(converter(...value.getOldPropertyValues(prop, list)), converter(...value.getPropertyValues())))); this._callbacks.push(prop.attachOnPop((list) => this.onInnerHTMLChanged(converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnShift((list) => this.onInnerHTMLChanged(converter(...value.getOldPropertyValues(prop, list)), converter(...value.getPropertyValues())))); this._callbacks.push(prop.attachOnShift((list) => this.onInnerHTMLChanged(converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onInnerHTMLChanged(converter(...value.getOldPropertyValues(prop, list)), converter(...value.getPropertyValues())))); this._callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onInnerHTMLChanged(converter(...value.getPropertyValues()))));
} }
}); });
@ -387,6 +388,51 @@ class IgniteTemplate {
return this; return this;
} }
/**
* Sets the inner text of the element to be constructed by this template.
* @param {String|IgniteProperty} value text to be set for this element. If a property is passed the text will auto update.
* @param {Function} converter Optional function that can be used to convert the value if needed.
* @returns This ignite template.
*/
innerText(value, converter = null) {
IgniteRenderingContext.push();
if (value instanceof IgniteProperty) {
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerTextChanged(converter != null ? converter(newValue) : newValue)));
this._callbacks.push(value.attachOnPush((list, items) => this.onInnerTextChanged(converter != null ? converter(list) : null)));
this._callbacks.push(value.attachOnUnshift((list, items) => this.onInnerTextChanged(converter != null ? converter(list) : null)));
this._callbacks.push(value.attachOnPop((list) => this.onInnerTextChanged(converter != null ? converter(list) : null)));
this._callbacks.push(value.attachOnShift((list) => this.onInnerTextChanged(converter != null ? converter(list) : null)));
this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onInnerTextChanged(converter != null ? converter(list) : null)));
this._elementInnerText = (converter != null ? converter(value.value) : value.value);
} else if (Array.isArray(value) && value.length > 0 && value[0] instanceof IgniteProperty) {
//There must be a converter for this to work correctly
if (!converter) {
throw "Cannot pass an array of properties without using a converter!";
}
//Attack a callback for all the properties
value.forEach(prop => {
if (prop instanceof IgniteProperty) {
this._callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onInnerTextChanged(converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnPush((list, items) => this.onInnerTextChanged(converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnUnshift((list, items) => this.onInnerTextChanged(converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnPop((list) => this.onInnerTextChanged(converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnShift((list) => this.onInnerTextChanged(converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onInnerTextChanged(converter(...value.getPropertyValues()))));
}
});
this._elementInnerText = converter(...value.getPropertyValues());
} else {
this._elementInnerText = (converter != null ? converter(value) : value);
}
IgniteRenderingContext.pop();
return this;
}
/** /**
* Adds a single or series of children to be added once this template * Adds a single or series of children to be added once this template
* is constructed. Numbers, Strings, and Properties passed will be added as HTML child elements. * is constructed. Numbers, Strings, and Properties passed will be added as HTML child elements.
@ -503,6 +549,15 @@ class IgniteTemplate {
return this.on("change", eventCallback); return this.on("change", eventCallback);
} }
/**
*
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked once the event fires.
* @returns This ignite template.
*/
onPaste(eventCallback) {
return this.on("paste", eventCallback);
}
/** /**
* Adds a on enter key press event handler to this template. * Adds a on enter key press event handler to this template.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires. * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
@ -982,6 +1037,11 @@ class IgniteTemplate {
this.element.innerHTML = this._elementInnerHTML; this.element.innerHTML = this._elementInnerHTML;
} }
//Set the elements inner text if it was set
if (this._elementInnerText != null) {
this.element.innerText = this._elementInnerText;
}
//Construct the children under this element //Construct the children under this element
for (var i = 0; i < this.children.length; i++) { for (var i = 0; i < this.children.length; i++) {
this.children[i].construct(this.element); this.children[i].construct(this.element);
@ -1218,11 +1278,10 @@ class IgniteTemplate {
/** /**
* Called when the inner html for this template was changed and needs to be updated * Called when the inner html for this template was changed and needs to be updated
* on the template's element. * on the template's element.
* @param {any} oldValue
* @param {any} newValue * @param {any} newValue
* @ignore * @ignore
*/ */
onInnerHTMLChanged(oldValue, newValue) { onInnerHTMLChanged(newValue) {
if (this.element) { if (this.element) {
this.element.innerHTML = newValue; this.element.innerHTML = newValue;
} }
@ -1230,6 +1289,20 @@ class IgniteTemplate {
this._elementInnerHTML = newValue; this._elementInnerHTML = newValue;
} }
/**
* Called when the inner text for this template was changed and needs to be updated
* on the template's element.
* @param {any} newValue
* @ignore
*/
onInnerTextChanged(newValue) {
if (this.element) {
this.element.innerText = newValue;
}
this._elementInnerText = newValue;
}
/** /**
* Called when a ref was changed and we need to update the refs * Called when a ref was changed and we need to update the refs
* value to match this elements reference. * value to match this elements reference.
@ -1780,6 +1853,82 @@ class line extends IgniteTemplate {
} }
} }
/**
* Text is a special template that will construct a text element and automatically update the dom
* if it's content changes.
* @example
* new text(`<script>Will show up as text</script>`)
*/
class text extends IgniteTemplate {
/**
* Constructs a text template with the text to render.
* @param {String|IgniteProperty} text The text to render within this text template.
* @param {Function} converter An optional function that can be used to convert the text.
*/
constructor(text, converter) {
super();
if (text instanceof IgniteProperty) {
this._callbacks.push(text.attachOnChange((oldValue, newValue) => this.onTextChanged(converter != null ? converter(newValue) : newValue)));
this._callbacks.push(text.attachOnPush((list, items) => this.onTextChanged(converter != null ? converter(list) : null)));
this._callbacks.push(text.attachOnUnshift((list, items) => this.onTextChanged(converter != null ? converter(list) : null)));
this._callbacks.push(text.attachOnPop((list) => this.onTextChanged(converter != null ? converter(list) : null)));
this._callbacks.push(text.attachOnShift((list) => this.onTextChanged(converter != null ? converter(list) : null)));
this._callbacks.push(text.attachOnSplice((list, start, deleteCount, items) => this.onTextChanged(converter != null ? converter(list) : null)));
this._text = (converter != null ? converter(text.value) : text.value);
} else if (Array.isArray(text) && text.length > 0 && text[0] instanceof IgniteProperty) {
//There must be a converter for this to work correctly
if (!converter) {
throw "Cannot pass an array of properties without using a converter!";
}
//Attack a callback for all the properties
text.forEach(prop => {
if (prop instanceof IgniteProperty) {
this._callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onTextChanged(converter(...text.getPropertyValues()))));
this._callbacks.push(prop.attachOnPush((list, items) => this.onTextChanged(converter(...text.getPropertyValues()))));
this._callbacks.push(prop.attachOnUnshift((list, items) => this.onTextChanged(converter(...text.getPropertyValues()))));
this._callbacks.push(prop.attachOnPop((list) => this.onTextChanged(converter(...text.getPropertyValues()))));
this._callbacks.push(prop.attachOnShift((list) => this.onTextChanged(converter(...text.getPropertyValues()))));
this._callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onTextChanged(converter(...text.getPropertyValues()))));
}
});
this._text = converter(...text.getPropertyValues());
} else {
this._text = (converter != null ? converter(text) : text);
}
}
construct(parent, sibling) {
//Don't construct if we have no parent, no sibling and no element.
if (!parent && !sibling && !this.element) {
return;
}
if (!this.element) {
this.element = window.document.createTextNode("");
if (sibling) {
sibling.parentElement.insertBefore(this.element, sibling);
} else {
parent.appendChild(this.element);
}
}
this.element.data = this._text;
}
onTextChanged(newValue) {
if (this.element) {
this.element.data = newValue;
}
this._text = newValue;
}
}
/** /**
* Html is a special template that can construct raw html or properties into the dom and automatically * Html is a special template that can construct raw html or properties into the dom and automatically
* update the dom if the property changes. * update the dom if the property changes.
@ -2685,6 +2834,7 @@ class population extends IgniteTemplate {
export { export {
IgniteTemplate, IgniteTemplate,
div, div,
text,
html, html,
list, list,
a, a,