Do some local style modifications and profile.
1. Do some temporary style modifications to help make the code more readable for profiling (with help from ESLint). 2. Profile the code, and optimize accordingly.
This commit is contained in:
impinball
parent
83a30a4d3c
commit
9ae592ee4d
12 changed files with 4426 additions and 2695 deletions
|
|
@ -1,90 +1,128 @@
|
|||
var templateConverter = {};
|
||||
/* globals m */
|
||||
|
||||
var templateConverter = {}
|
||||
|
||||
templateConverter.DOMFragment = function(markup) {
|
||||
if (markup.indexOf("<!doctype") > -1) return [new DOMParser().parseFromString(markup, "text/html").childNodes[1]]
|
||||
var container = document.createElement("div");
|
||||
container.insertAdjacentHTML("beforeend", markup);
|
||||
return container.childNodes;
|
||||
"use strict"
|
||||
if (markup.indexOf("<!doctype") > -1) {
|
||||
return [
|
||||
new DOMParser().parseFromString(markup, "text/html").childNodes[1]
|
||||
]
|
||||
}
|
||||
var container = document.createElement("div")
|
||||
container.insertAdjacentHTML("beforeend", markup)
|
||||
return container.childNodes
|
||||
}
|
||||
templateConverter.VirtualFragment = function recurse(domFragment) {
|
||||
var virtualFragment = [];
|
||||
for (var i = 0, el; el = domFragment[i]; i++) {
|
||||
if (el.nodeType == 3) {
|
||||
virtualFragment.push(el.nodeValue);
|
||||
}
|
||||
else if (el.nodeType == 1) {
|
||||
var attrs = {};
|
||||
for (var j = 0, attr; attr = el.attributes[j]; j++) {
|
||||
attrs[attr.name] = attr.value;
|
||||
"use strict"
|
||||
var virtualFragment = []
|
||||
for (var i = 0; i < domFragment.length; i++) {
|
||||
var el = domFragment[i]
|
||||
if (el.nodeType === 3) {
|
||||
virtualFragment.push(el.nodeValue)
|
||||
} else if (el.nodeType === 1) {
|
||||
var attrs = {}
|
||||
for (var j = 0; el.attributes.length; j++) {
|
||||
var attr = el.attributes[j]
|
||||
attrs[attr.name] = attr.value
|
||||
}
|
||||
|
||||
virtualFragment.push({tag: el.nodeName.toLowerCase(), attrs: attrs, children: recurse(el.childNodes)});
|
||||
|
||||
virtualFragment.push({
|
||||
tag: el.nodeName.toLowerCase(),
|
||||
attrs: attrs,
|
||||
children: recurse(el.childNodes)
|
||||
})
|
||||
}
|
||||
}
|
||||
return virtualFragment;
|
||||
return virtualFragment
|
||||
}
|
||||
templateConverter.Template = function recurse() {
|
||||
if (Object.prototype.toString.call(arguments[0]) == "[object String]") {
|
||||
return new recurse(new templateConverter.VirtualFragment(new templateConverter.DOMFragment(arguments[0])));
|
||||
"use strict"
|
||||
if (Object.prototype.toString.call(arguments[0]) === "[object String]") {
|
||||
return new recurse(new templateConverter.VirtualFragment(
|
||||
new templateConverter.DOMFragment(arguments[0])))
|
||||
}
|
||||
|
||||
var virtualFragment = arguments[0], level = arguments[1]
|
||||
if (!level) level = 1;
|
||||
|
||||
var tab = "\n" + new Array(level + 1).join("\t");
|
||||
var virtuals = [];
|
||||
for (var i = 0, el; el = virtualFragment[i]; i++) {
|
||||
if (typeof el == "string") {
|
||||
if (el.match(/\t| {2,}/g) && el.trim().length == 0) virtuals.indented = true;
|
||||
else virtuals.push('"' + el.replace(/"/g, '\\"').replace(/\r/g, "\\r").replace(/\n/g, "\\n") + '"');
|
||||
}
|
||||
else {
|
||||
var virtual = "";
|
||||
if (el.tag != "div") virtual += el.tag;
|
||||
if (el.attrs["class"]) {
|
||||
virtual += "." + el.attrs["class"].replace(/\t+/g, " ").split(" ").join(".");
|
||||
delete el.attrs["class"];
|
||||
|
||||
var virtualFragment = arguments[0]
|
||||
var level = arguments[1]
|
||||
if (!level) level = 1
|
||||
|
||||
var tab = "\n" + new Array(level + 1).join("\t")
|
||||
var virtuals = []
|
||||
for (var i = 0; i < virtualFragment.length; i++) {
|
||||
var el = virtualFragment[i]
|
||||
if (typeof el === "string") {
|
||||
if (el.match(/\t| {2,}/g) && el.trim().length === 0) {
|
||||
virtuals.indented = true
|
||||
} else {
|
||||
virtuals.push('"' + el
|
||||
.replace(/"/g, '\\"')
|
||||
.replace(/\r/g, "\\r")
|
||||
.replace(/\n/g, "\\n") + '"')
|
||||
}
|
||||
} else {
|
||||
var virtual = ""
|
||||
if (el.tag !== "div") virtual += el.tag
|
||||
if (el.attrs.class) {
|
||||
virtual += "." + el.attrs.class
|
||||
.replace(/\t+/g, " ")
|
||||
.split(" ")
|
||||
.join(".")
|
||||
delete el.attrs.class
|
||||
}
|
||||
var attrNames = Object.keys(el.attrs).sort()
|
||||
for (var j = 0, attrName; attrName = attrNames[j]; j++) {
|
||||
if (attrName != "style") virtual += "[" + attrName + "='" + el.attrs[attrName].replace(/'/g, "\\'") + "']";
|
||||
for (var j = 0; j < attrNames.length; j++) {
|
||||
var attrName = attrNames[j]
|
||||
if (attrName !== "style") {
|
||||
virtual += "[" + attrName + "='" +
|
||||
el.attrs[attrName].replace(/'/g, "\\'") + "']"
|
||||
}
|
||||
}
|
||||
if (virtual == "") virtual = "div"
|
||||
virtual = '"' + virtual + '"';
|
||||
|
||||
var style = ""
|
||||
if (virtual === "") virtual = "div"
|
||||
virtual = '"' + virtual + '"'
|
||||
|
||||
if (el.attrs.style) {
|
||||
virtual += ", {style: " + ("{\"" + el.attrs.style.replace(/:/g, "\": \"").replace(/;/g, "\", \"") + "}").replace(/, "}|"}/, "}") + "}"
|
||||
virtual += ", {style: " + ("{\"" + el.attrs.style
|
||||
.replace(/:/g, "\": \"")
|
||||
.replace(/;/g, "\", \"") + "}")
|
||||
.replace(/, "}|"}/, "}") + "}"
|
||||
}
|
||||
|
||||
|
||||
if (el.children.length > 0) {
|
||||
virtual += ", " + recurse(el.children, level + 1);
|
||||
virtual += ", " + recurse(el.children, level + 1)
|
||||
}
|
||||
virtual = "m(" + virtual + ")";
|
||||
virtuals.push(virtual);
|
||||
virtual = "m(" + virtual + ")"
|
||||
virtuals.push(virtual)
|
||||
}
|
||||
}
|
||||
if (!virtuals.indented) tab = "";
|
||||
|
||||
var isInline = virtuals.length == 1 && virtuals[0].charAt(0) == '"';
|
||||
var template = isInline ? virtuals.join(", ") : "[" + tab + virtuals.join("," + tab) + tab.slice(0, -1) + "]";
|
||||
return new String(template);
|
||||
if (!virtuals.indented) tab = ""
|
||||
|
||||
var isInline = virtuals.length === 1 && virtuals[0].charAt(0) === '"'
|
||||
var template = isInline ?
|
||||
virtuals.join(", ") :
|
||||
"[" + tab + virtuals.join("," + tab) + tab.slice(0, -1) + "]"
|
||||
return new String(template) // eslint-disable-line no-new-wrappers
|
||||
}
|
||||
|
||||
templateConverter.controller = function() {
|
||||
this.source = m.prop("");
|
||||
this.output = m.prop("");
|
||||
|
||||
"use strict"
|
||||
this.source = m.prop("")
|
||||
this.output = m.prop("")
|
||||
|
||||
this.convert = function() {
|
||||
return this.output(new templateConverter.Template(this.source()));
|
||||
};
|
||||
|
||||
};
|
||||
return this.output(new templateConverter.Template(this.source()))
|
||||
}
|
||||
}
|
||||
|
||||
templateConverter.view = function(ctrl) {
|
||||
"use strict"
|
||||
return m("div", [
|
||||
m("textarea", {autofocus: true, style: {width:"100%", height: "40%"}, onchange: m.withAttr("value", ctrl.source)}, ctrl.source()),
|
||||
m("textarea", {
|
||||
autofocus: true,
|
||||
style: {width: "100%", height: "40%"},
|
||||
onchange: m.withAttr("value", ctrl.source)
|
||||
}, ctrl.source()),
|
||||
m("button", {onclick: ctrl.convert.bind(ctrl)}, "Convert"),
|
||||
m("textarea", {style: {width:"100%", height: "40%"}}, ctrl.output())
|
||||
]);
|
||||
};
|
||||
m("textarea", {style: {width: "100%", height: "40%"}}, ctrl.output())
|
||||
])
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue