MSX Transformer

': '{tag: "div", attrs: {}}' 10 | , '

': '{tag: "div", attrs: {}}' 11 | , '

': '{tag: "div", attrs: {}, children: ["X"]}' 12 | , '

{X}

': '{tag: "div", attrs: {}, children: [X]}' 13 | , '

': '{tag: "div", attrs: {id:"test"}}' 14 | , '

': '{tag: "div", attrs: {id:"test", className:"test"}, children: ["X"]}' 15 | , '

X{X} X {X}

': '{tag: "div", attrs: {}, children: ["X", X, " X ", X]}' 16 | , '

': '{tag: "div", attrs: {}, children: [{tag: "p", attrs: {}}]}' 17 | , '

': '{tag: "div", attrs: {}, children: [{tag: "p", attrs: {id:"test"}, children: ["X"]}]}' 18 | , 'X': '{tag: "unknowntag", attrs: {}, children: ["X"]}' 19 | , 'X': '{tag: "unknowntag", attrs: {id:"test"}, children: ["X"]}' 20 | , 'X': '{tag: "unknown-tag", attrs: {}, children: ["X"]}' 21 | , 'X': '{tag: "unknown-tag", attrs: {id:"test"}, children: ["X"]}' 22 | , '': 'Component' 23 | , '': 'Component' 24 | , 'X': 'm.component(Component, {}, ["X"])' 25 | , '': 'm.component(Component, {id:"test"})' 26 | , 'X': 'm.component(Component, {id:"test"}, ["X"])' 27 | , 'X{X} X {X}': 'm.component(Component, {id:"test"}, ["X", X, " X ", X])' 28 | } 29 | var tags = Object.keys(tagTests) 30 | tags.forEach(function(tag) { 31 | var result = transform(tag).split('\n').pop() 32 | t.equal(result, tagTests[tag], tag + ' -> ' + tagTests[tag]) 33 | }) 34 | }) 35 | 36 | test('tag variations (precompile: false)', function(t) { 37 | t.plan(14) 38 | var tagTests = { 39 | '
': 'm("br")' 40 | , '

': 'm("div")' 41 | , '

': 'm("div")' 42 | , '

': 'm("div", ["X"])' 43 | , '

{X}

': 'm("div", [X])' 44 | , '

': 'm("div", {id:"test"})' 45 | , '

': 'm("div", {id:"test", className:"test"}, ["X"])' 46 | , '

X{X} X {X}

': 'm("div", ["X", X, " X ", X])' 47 | , '

': 'm("div", [m("p")])' 48 | , '

': 'm("div", [m("p", {id:"test"}, ["X"])])' 49 | , 'X': 'm("unknown", ["X"])' 50 | , 'X': 'm("unknown", {id:"test"}, ["X"])' 51 | , 'X': 'm("unknown-tag", ["X"])' 52 | , 'X': 'm("unknown-tag", {id:"test"}, ["X"])' 53 | } 54 | var tags = Object.keys(tagTests) 55 | tags.forEach(function(tag) { 56 | var result = transform(tag, {precompile: false}).split('\n').pop() 57 | t.equal(result, tagTests[tag], tag + ' -> ' + tagTests[tag]) 58 | }) 59 | }) 60 | -------------------------------------------------------------------------------- /test/vendor/mithril-0.2.0.js: -------------------------------------------------------------------------------- 1 | var m = (function app(window, undefined) { 2 | var OBJECT = "[object Object]", ARRAY = "[object Array]", STRING = "[object String]", FUNCTION = "function"; 3 | var type = {}.toString; 4 | var parser = /(?:(^|#|\.)([^#\.\[\]]+))|(\[.+?\])/g, attrParser = /\[(.+?)(?:=("|'|)(.*?)\2)?\]/; 5 | var voidElements = /^(AREA|BASE|BR|COL|COMMAND|EMBED|HR|IMG|INPUT|KEYGEN|LINK|META|PARAM|SOURCE|TRACK|WBR)$/; 6 | var noop = function() {} 7 | 8 | // caching commonly used variables 9 | var $document, $location, $requestAnimationFrame, $cancelAnimationFrame; 10 | 11 | // self invoking function needed because of the way mocks work 12 | function initialize(window){ 13 | $document = window.document; 14 | $location = window.location; 15 | $cancelAnimationFrame = window.cancelAnimationFrame || window.clearTimeout; 16 | $requestAnimationFrame = window.requestAnimationFrame || window.setTimeout; 17 | } 18 | 19 | initialize(window); 20 | 21 | 22 | /** 23 | * @typedef {String} Tag 24 | * A string that looks like -> div.classname#id[param=one][param2=two] 25 | * Which describes a DOM node 26 | */ 27 | 28 | /** 29 | * 30 | * @param {Tag} The DOM node tag 31 | * @param {Object=[]} optional key-value pairs to be mapped to DOM attrs 32 | * @param {...mNode=[]} Zero or more Mithril child nodes. Can be an array, or splat (optional) 33 | * 34 | */ 35 | function m() { 36 | var args = [].slice.call(arguments); 37 | var hasAttrs = args[1] != null && type.call(args[1]) === OBJECT && !("tag" in args[1] || "view" in args[1]) && !("subtree" in args[1]); 38 | var attrs = hasAttrs ? args[1] : {}; 39 | var classAttrName = "class" in attrs ? "class" : "className"; 40 | var cell = {tag: "div", attrs: {}}; 41 | var match, classes = []; 42 | if (type.call(args[0]) != STRING) throw new Error("selector in m(selector, attrs, children) should be a string") 43 | while (match = parser.exec(args[0])) { 44 | if (match[1] === "" && match[2]) cell.tag = match[2]; 45 | else if (match[1] === "#") cell.attrs.id = match[2]; 46 | else if (match[1] === ".") classes.push(match[2]); 47 | else if (match[3][0] === "[") { 48 | var pair = attrParser.exec(match[3]); 49 | cell.attrs[pair[1]] = pair[3] || (pair[2] ? "" :true) 50 | } 51 | } 52 | 53 | var children = hasAttrs ? args.slice(2) : args.slice(1); 54 | if (children.length === 1 && type.call(children[0]) === ARRAY) { 55 | cell.children = children[0] 56 | } 57 | else { 58 | cell.children = children 59 | } 60 | 61 | for (var attrName in attrs) { 62 | if (attrs.hasOwnProperty(attrName)) { 63 | if (attrName === classAttrName && attrs[attrName] != null && attrs[attrName] !== "") { 64 | classes.push(attrs[attrName]) 65 | cell.attrs[attrName] = "" //create key in correct iteration order 66 | } 67 | else cell.attrs[attrName] = attrs[attrName] 68 | } 69 | } 70 | if (classes.length > 0) cell.attrs[classAttrName] = classes.join(" "); 71 | 72 | return cell 73 | } 74 | function build(parentElement, parentTag, parentCache, parentIndex, data, cached, shouldReattach, index, editable, namespace, configs) { 75 | //`build` is a recursive function that manages creation/diffing/removal of DOM elements based on comparison between `data` and `cached` 76 | //the diff algorithm can be summarized as this: 77 | //1 - compare `data` and `cached` 78 | //2 - if they are different, copy `data` to `cached` and update the DOM based on what the difference is 79 | //3 - recursively apply this algorithm for every array and for the children of every virtual element 80 | 81 | //the `cached` data structure is essentially the same as the previous redraw's `data` data structure, with a few additions: 82 | //- `cached` always has a property called `nodes`, which is a list of DOM elements that correspond to the data represented by the respective virtual element 83 | //- in order to support attaching `nodes` as a property of `cached`, `cached` is *always* a non-primitive object, i.e. if the data was a string, then cached is a String instance. If data was `null` or `undefined`, cached is `new String("")` 84 | //- `cached also has a `configContext` property, which is the state storage object exposed by config(element, isInitialized, context) 85 | //- when `cached` is an Object, it represents a virtual element; when it's an Array, it represents a list of elements; when it's a String, Number or Boolean, it represents a text node 86 | 87 | //`parentElement` is a DOM element used for W3C DOM API calls 88 | //`parentTag` is only used for handling a corner case for textarea values 89 | //`parentCache` is used to remove nodes in some multi-node cases 90 | //`parentIndex` and `index` are used to figure out the offset of nodes. They're artifacts from before arrays started being flattened and are likely refactorable 91 | //`data` and `cached` are, respectively, the new and old nodes being diffed 92 | //`shouldReattach` is a flag indicating whether a parent node was recreated (if so, and if this node is reused, then this node must reattach itself to the new parent) 93 | //`editable` is a flag that indicates whether an ancestor is contenteditable 94 | //`namespace` indicates the closest HTML namespace as it cascades down from an ancestor 95 | //`configs` is a list of config functions to run after the topmost `build` call finishes running 96 | 97 | //there's logic that relies on the assumption that null and undefined data are equivalent to empty strings 98 | //- this prevents lifecycle surprises from procedural helpers that mix implicit and explicit return statements (e.g. function foo() {if (cond) return m("div")} 99 | //- it simplifies diffing code 100 | //data.toString() might throw or return null if data is the return value of Console.log in Firefox (behavior depends on version) 101 | try {if (data == null || data.toString() == null) data = "";} catch (e) {data = ""} 102 | if (data.subtree === "retain") return cached; 103 | var cachedType = type.call(cached), dataType = type.call(data); 104 | if (cached == null || cachedType !== dataType) { 105 | if (cached != null) { 106 | if (parentCache && parentCache.nodes) { 107 | var offset = index - parentIndex; 108 | var end = offset + (dataType === ARRAY ? data : cached.nodes).length; 109 | clear(parentCache.nodes.slice(offset, end), parentCache.slice(offset, end)) 110 | } 111 | else if (cached.nodes) clear(cached.nodes, cached) 112 | } 113 | cached = new data.constructor; 114 | if (cached.tag) cached = {}; //if constructor creates a virtual dom element, use a blank object as the base cached node instead of copying the virtual el (#277) 115 | cached.nodes = [] 116 | } 117 | 118 | if (dataType === ARRAY) { 119 | //recursively flatten array 120 | for (var i = 0, len = data.length; i < len; i++) { 121 | if (type.call(data[i]) === ARRAY) { 122 | data = data.concat.apply([], data); 123 | i-- //check current index again and flatten until there are no more nested arrays at that index 124 | len = data.length 125 | } 126 | } 127 | 128 | var nodes = [], intact = cached.length === data.length, subArrayCount = 0; 129 | 130 | //keys algorithm: sort elements without recreating them if keys are present 131 | //1) create a map of all existing keys, and mark all for deletion 132 | //2) add new keys to map and mark them for addition 133 | //3) if key exists in new list, change action from deletion to a move 134 | //4) for each key, handle its corresponding action as marked in previous steps 135 | var DELETION = 1, INSERTION = 2 , MOVE = 3; 136 | var existing = {}, shouldMaintainIdentities = false; 137 | for (var i = 0; i < cached.length; i++) { 138 | if (cached[i] && cached[i].attrs && cached[i].attrs.key != null) { 139 | shouldMaintainIdentities = true; 140 | existing[cached[i].attrs.key] = {action: DELETION, index: i} 141 | } 142 | } 143 | 144 | var guid = 0 145 | for (var i = 0, len = data.length; i < len; i++) { 146 | if (data[i] && data[i].attrs && data[i].attrs.key != null) { 147 | for (var j = 0, len = data.length; j < len; j++) { 148 | if (data[j] && data[j].attrs && data[j].attrs.key == null) data[j].attrs.key = "__mithril__" + guid++ 149 | } 150 | break 151 | } 152 | } 153 | 154 | if (shouldMaintainIdentities) { 155 | var keysDiffer = false 156 | if (data.length != cached.length) keysDiffer = true 157 | else for (var i = 0, cachedCell, dataCell; cachedCell = cached[i], dataCell = data[i]; i++) { 158 | if (cachedCell.attrs && dataCell.attrs && cachedCell.attrs.key != dataCell.attrs.key) { 159 | keysDiffer = true 160 | break 161 | } 162 | } 163 | 164 | if (keysDiffer) { 165 | for (var i = 0, len = data.length; i < len; i++) { 166 | if (data[i] && data[i].attrs) { 167 | if (data[i].attrs.key != null) { 168 | var key = data[i].attrs.key; 169 | if (!existing[key]) existing[key] = {action: INSERTION, index: i}; 170 | else existing[key] = { 171 | action: MOVE, 172 | index: i, 173 | from: existing[key].index, 174 | element: cached.nodes[existing[key].index] || $document.createElement("div") 175 | } 176 | } 177 | } 178 | } 179 | var actions = [] 180 | for (var prop in existing) actions.push(existing[prop]) 181 | var changes = actions.sort(sortChanges); 182 | var newCached = new Array(cached.length) 183 | newCached.nodes = cached.nodes.slice() 184 | 185 | for (var i = 0, change; change = changes[i]; i++) { 186 | if (change.action === DELETION) { 187 | clear(cached[change.index].nodes, cached[change.index]); 188 | newCached.splice(change.index, 1) 189 | } 190 | if (change.action === INSERTION) { 191 | var dummy = $document.createElement("div"); 192 | dummy.key = data[change.index].attrs.key; 193 | parentElement.insertBefore(dummy, parentElement.childNodes[change.index] || null); 194 | newCached.splice(change.index, 0, {attrs: {key: data[change.index].attrs.key}, nodes: [dummy]}) 195 | newCached.nodes[change.index] = dummy 196 | } 197 | 198 | if (change.action === MOVE) { 199 | if (parentElement.childNodes[change.index] !== change.element && change.element !== null) { 200 | parentElement.insertBefore(change.element, parentElement.childNodes[change.index] || null) 201 | } 202 | newCached[change.index] = cached[change.from] 203 | newCached.nodes[change.index] = change.element 204 | } 205 | } 206 | cached = newCached; 207 | } 208 | } 209 | //end key algorithm 210 | 211 | for (var i = 0, cacheCount = 0, len = data.length; i < len; i++) { 212 | //diff each item in the array 213 | var item = build(parentElement, parentTag, cached, index, data[i], cached[cacheCount], shouldReattach, index + subArrayCount || subArrayCount, editable, namespace, configs); 214 | if (item === undefined) continue; 215 | if (!item.nodes.intact) intact = false; 216 | if (item.$trusted) { 217 | //fix offset of next element if item was a trusted string w/ more than one html element 218 | //the first clause in the regexp matches elements 219 | //the second clause (after the pipe) matches text nodes 220 | subArrayCount += (item.match(/<[^\/]|\>\s*[^<]/g) || [0]).length 221 | } 222 | else subArrayCount += type.call(item) === ARRAY ? item.length : 1; 223 | cached[cacheCount++] = item 224 | } 225 | if (!intact) { 226 | //diff the array itself 227 | 228 | //update the list of DOM nodes by collecting the nodes from each item 229 | for (var i = 0, len = data.length; i < len; i++) { 230 | if (cached[i] != null) nodes.push.apply(nodes, cached[i].nodes) 231 | } 232 | //remove items from the end of the array if the new array is shorter than the old one 233 | //if errors ever happen here, the issue is most likely a bug in the construction of the `cached` data structure somewhere earlier in the program 234 | for (var i = 0, node; node = cached.nodes[i]; i++) { 235 | if (node.parentNode != null && nodes.indexOf(node) < 0) clear([node], [cached[i]]) 236 | } 237 | if (data.length < cached.length) cached.length = data.length; 238 | cached.nodes = nodes 239 | } 240 | } 241 | else if (data != null && dataType === OBJECT) { 242 | var views = [], controllers = [] 243 | while (data.view) { 244 | var view = data.view.$original || data.view 245 | var controllerIndex = m.redraw.strategy() == "diff" && cached.views ? cached.views.indexOf(view) : -1 246 | var controller = controllerIndex > -1 ? cached.controllers[controllerIndex] : new (data.controller || noop) 247 | var key = data && data.attrs && data.attrs.key 248 | data = pendingRequests == 0 || (cached && cached.controllers && cached.controllers.indexOf(controller) > -1) ? data.view(controller) : {tag: "placeholder"} 249 | if (data.subtree === "retain") return cached; 250 | if (key) { 251 | if (!data.attrs) data.attrs = {} 252 | data.attrs.key = key 253 | } 254 | if (controller.onunload) unloaders.push({controller: controller, handler: controller.onunload}) 255 | views.push(view) 256 | controllers.push(controller) 257 | } 258 | if (!data.tag && controllers.length) throw new Error("Component template must return a virtual element, not an array, string, etc.") 259 | if (!data.attrs) data.attrs = {}; 260 | if (!cached.attrs) cached.attrs = {}; 261 | 262 | var dataAttrKeys = Object.keys(data.attrs) 263 | var hasKeys = dataAttrKeys.length > ("key" in data.attrs ? 1 : 0) 264 | //if an element is different enough from the one in cache, recreate it 265 | if (data.tag != cached.tag || dataAttrKeys.sort().join() != Object.keys(cached.attrs).sort().join() || data.attrs.id != cached.attrs.id || data.attrs.key != cached.attrs.key || (m.redraw.strategy() == "all" && (!cached.configContext || cached.configContext.retain !== true)) || (m.redraw.strategy() == "diff" && cached.configContext && cached.configContext.retain === false)) { 266 | if (cached.nodes.length) clear(cached.nodes); 267 | if (cached.configContext && typeof cached.configContext.onunload === FUNCTION) cached.configContext.onunload() 268 | if (cached.controllers) { 269 | for (var i = 0, controller; controller = cached.controllers[i]; i++) { 270 | if (typeof controller.onunload === FUNCTION) controller.onunload({preventDefault: noop}) 271 | } 272 | } 273 | } 274 | if (type.call(data.tag) != STRING) return; 275 | 276 | var node, isNew = cached.nodes.length === 0; 277 | if (data.attrs.xmlns) namespace = data.attrs.xmlns; 278 | else if (data.tag === "svg") namespace = "http://www.w3.org/2000/svg"; 279 | else if (data.tag === "math") namespace = "http://www.w3.org/1998/Math/MathML"; 280 | 281 | if (isNew) { 282 | if (data.attrs.is) node = namespace === undefined ? $document.createElement(data.tag, data.attrs.is) : $document.createElementNS(namespace, data.tag, data.attrs.is); 283 | else node = namespace === undefined ? $document.createElement(data.tag) : $document.createElementNS(namespace, data.tag); 284 | cached = { 285 | tag: data.tag, 286 | //set attributes first, then create children 287 | attrs: hasKeys ? setAttributes(node, data.tag, data.attrs, {}, namespace) : data.attrs, 288 | children: data.children != null && data.children.length > 0 ? 289 | build(node, data.tag, undefined, undefined, data.children, cached.children, true, 0, data.attrs.contenteditable ? node : editable, namespace, configs) : 290 | data.children, 291 | nodes: [node] 292 | }; 293 | if (controllers.length) { 294 | cached.views = views 295 | cached.controllers = controllers 296 | for (var i = 0, controller; controller = controllers[i]; i++) { 297 | if (controller.onunload && controller.onunload.$old) controller.onunload = controller.onunload.$old 298 | if (pendingRequests && controller.onunload) { 299 | var onunload = controller.onunload 300 | controller.onunload = noop 301 | controller.onunload.$old = onunload 302 | } 303 | } 304 | } 305 | 306 | if (cached.children && !cached.children.nodes) cached.children.nodes = []; 307 | //edge case: setting value on