const VnObject = require('./object'); const Component = require('./component'); const VnNode = require('./node'); const Scope = require('./scope'); const Type = require('./type'); const kebabToCamel = require('./string-util').kebabToCamel; /** * Creates a object from a XML specification. */ module.exports = new Class({ Extends: VnObject ,_contexts: null /** * Compiles an XML file. * * @param {String} path The XML path * @return {Boolean} %true on success, %false othersise */ ,compileFile: function(path) { this._path = path; return this.compileDocument(Vn.getXml(path)); } /** * Compiles an XML string. * * @param {String} xmlString The XML string * @return {Boolean} %true on success, %false othersise */ ,compileString: function(xmlString) { var parser = new DOMParser(); var doc = parser.parseFromString(xmlString, 'text/xml'); return this.compileDocument(doc); } /** * Compiles a XML document. * * @param {Document} doc The DOM document * @return {Boolean} %true on success, %false othersise */ ,compileDocument: function(doc, exprArgs) { if (!doc) return false; this._preCompile(exprArgs); var docElement = doc.documentElement; if (docElement.tagName !== 'vn') { this.showError('The toplevel tag should be named \'vn\''); this._contexts = null; return false; } var childs = docElement.childNodes; if (childs) for (var i = 0; i < childs.length; i++) this._compile(childs[i]); this._postCompile(); return true; } /** * Compiles a single DOM node. * * @path Node The DOM node * @return %true on success, %false othersise */ ,compileNode: function(node, exprArgs) { this._preCompile(exprArgs); this._mainContext = this._compile(node).id; this._postCompile(); return true; } /** * Called before starting to compile nodes. */ ,_preCompile: function(exprArgs) { this._path = null; this._tags = {}; this._contexts = []; this._contextMap = {}; this._links = []; this._mainContext = null; this._baseExprArgs = ['_', '$']; if (exprArgs) this._baseExprArgs = this._baseExprArgs.concat(exprArgs); this._baseEventArgs = this._baseExprArgs.concat(['$event']); this._exprArgs = this._baseExprArgs.join(','); this._eventArgs = this._baseEventArgs.join(','); } /** * Called after all nodes have been compiled. */ ,_postCompile: function() {} /** * Compiles a node. */ ,_compile: function(node) { let context = null; let tagName = null; const isElement = node.nodeType === Node.ELEMENT_NODE; if (isElement) tagName = node.tagName.toLowerCase(); else if (node.nodeType !== Node.TEXT_NODE || /^[\n\r\t]*$/.test(node.textContent)) return null; context = this.textCompile(node, tagName) || this.objectCompile(node, tagName) || this.elementCompile(node, tagName); context.id = this._contexts.length; if (isElement) { var nodeId = node.getAttribute('id'); if (nodeId) { this._contextMap[kebabToCamel(nodeId)] = context.id; context.nodeId = nodeId; } var tags = this._tags[tagName]; if (!tags) this._tags[tagName] = tags = []; tags.push(context.id); } this._contexts.push(context); return context; } ,getMain: function(scope) { return scope.objects[this._mainContext]; } ,getByTagName: function(scope, tagName) { var tags = this._tags[tagName]; if (tags) { var arr = new Array(tags.length); for (var i = 0; i < tags.length; i++) arr[i] = scope.objects[tags[i]]; return arr; } return []; } ,load: function(dstDocument, thisArg, parentScope) { if (this._contexts === null) return null; const doc = dstDocument ? dstDocument : document; const contexts = this._contexts; const len = contexts.length; const objects = new Array(len); const scope = new Scope(this, objects, thisArg, parentScope); for (var i = 0; i < len; i++) { var context = contexts[i]; if (context.tagName) objects[i] = this.elementInstantiate(doc, context, scope); else if (context.klass) objects[i] = this.objectInstantiate(doc, context, scope); else objects[i] = this.textInstantiate(doc, context, scope); } return scope; } ,link: function(scope, exprScope) { const objects = scope.objects; const links = this._links; // Pre-link for (var i = links.length - 1; i >= 0; i--) { const link = links[i]; const object = objects[link.context.id]; const objectRef = scope.$[link.objectId]; if (objectRef === undefined) { this.showError('Referenced unexistent object with id \'%s\'', link.objectId); continue; } if (link.prop) object[link.prop] = objectRef; else object.appendChild(objectRef); } // Post-link const baseExprScope = [ _, scope.$ ].concat(exprScope); this.linkExpr(scope, baseExprScope); const contexts = this._contexts; for (var i = 0; i < contexts.length; i++) { const context = contexts[i]; const object = objects[i]; if (context.tagName) this.elementLink(context, object, objects, scope, baseExprScope); else if (context.klass) this.objectLink(context, object, objects, scope, baseExprScope); } } ,linkExpr(scope, baseScope, exprScope) { const contexts = this._contexts; const objects = scope.objects; exprScope = baseScope.concat(exprScope); for (let i = 0; i < contexts.length; i++) { const context = contexts[i]; const object = objects[i]; if (context.exprs) { const values = []; for (expr of context.exprs) { let value = undefined; try { value = expr.apply(scope.thisArg, exprScope); } catch (e) { console.warn('Expression error:', e.message); continue; } values.push(value); } let k = 0; const text = context.text.replace(/{{\d+}}/g, function() { return values[k++]; }); object.textContent = text; } else { const dynProps = context.dynProps; for (const prop in dynProps) { let value = undefined; try { value = dynProps[prop].apply(scope.thisArg, exprScope); } catch (e) { console.warn('Expression error:', e.message); continue; } if (context.tagName) object.setAttribute(prop, value); else object[prop] = value; } } } } ,showError: function(error) { var path = this._path ? this._path : 'Node'; var logArgs = ['Vn.Builder: %s: '+ error, path]; for (var i = 1; i < arguments.length; i++) logArgs.push(arguments[i]); console.warn.apply(null, logArgs); } ,_addLink: function(context, prop, objectId) { this._links.push({ context ,prop ,objectId: kebabToCamel(objectId) }); } ,fnExpr(expr) { return new Function(this._exprArgs, '"use strict"; return ' + expr + ';' ); } ,matchExpr(value) { const match = /^{{(.*)}}$/.exec(value); if (!match) return null; return this.fnExpr(match[1]); } ,_translateValue: function(value) { var chr = value.charAt(0); if (chr === '_') return _(value.substr(1)); else if (chr === '\\' && value.charAt(1) === '_') return value.substr(1); return value; } ,_getMethod: function(value) { let method; if (this.isIdentifier(value)) { // XXX: Compatibility with old events method = value; } else { try { method = new Function(this._eventArgs, '"use strict"; return ' + value + ';' ); } catch (err) { this.showError(`Method: ${err.message}: ${value}`); } } return method; } ,_isEvent: function(attribute) { return /^on-\w+/.test(attribute); } ,isIdentifier: function(value) { return /^[a-zA-Z_$][\w$]*$/.test(value); } ,_replaceFunc: function(token) { return token.charAt(1).toUpperCase(); } //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ TextNode /** * Creates a text node context. */ ,textCompile: function(node, tagName) { if (!tagName) { let text = node.textContent; if (/{{.*}}/.test(text)) { let i = 0; const self = this; const exprs = []; text = text.replace(/{{((?:(?!}}).)*)}}/g, function(match, capture) { exprs.push(self.fnExpr(capture)); return `{{${i++}}}`; }); return {text, exprs}; } else return {text}; } else if (tagName === 't') return {text: _(node.firstChild.textContent)}; else return null; } ,textInstantiate: function(doc, context) { return doc.createTextNode(context.exprs ? '' : context.text); } //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Vn.Object /** * Creates a object context. */ ,objectCompile: function(node, tagName) { var klass = vnCustomTags[tagName]; if (!klass) return null; var props = {}; var objectProps = {}; var childs = []; var events = {}; var context = { klass: klass, props: props, dynProps: {}, funcProps: {}, objectProps: objectProps, childs: childs, events: events, custom: null }; var a = node.attributes; for (var i = 0; i < a.length; i++) { var attribute = a[i].nodeName; var value = a[i].nodeValue; if (this._isEvent(attribute)) { var handler = this._getMethod(value) if (handler) events[attribute.substr(3)] = handler; } else if (!/^(id|property)$/.test(attribute)) { this.propCompile(context, klass, props, node, attribute, value); } } var childNodes = node.childNodes; if (childNodes) for (var i = 0; i < childNodes.length; i++) { var child = childNodes[i]; var isElement = child.nodeType === Node.ELEMENT_NODE; var childTagName = isElement ? child.tagName.toLowerCase() : null; var childContext; if (childTagName === 'pointer') { this._addLink(context, null, child.getAttribute('object')); } else if (childTagName === 'custom') { context.custom = child; } else if (childContext = this._compile(child)) { var prop = isElement ? child.getAttribute('property') : null; if (prop) { prop = prop.replace(/-./g, this._replaceFunc); objectProps[prop] = childContext.id; } else childs.push(childContext.id); } } return context; } ,propCompile: function(context, klass, props, node, attribute, value) { let isLink = false; let propError = false; let newValue = null; const propName = attribute.replace(/-./g, this._replaceFunc); const propInfo = klass.Properties[propName]; if (!propInfo) { this.showError('Attribute \'%s\' not valid for tag \'%s\'', attribute, node.tagName); return; } if (!value) { this.showError('Attribute \'%s\' empty on tag \'%s\'', attribute, node.tagName); return; } const expr = this.matchExpr(value); if (expr) { context.dynProps[propName] = expr; } else { switch (propInfo.type) { case Boolean: newValue = (/^(true|1)$/i).test(value); break; case Number: newValue = 0 + new Number(value); break; case String: newValue = this._translateValue(value); break; case Function: context.funcProps[propName] = this._getMethod(value); break; case Type: newValue = window[value]; break; default: if (propInfo.enumType) newValue = propInfo.enumType[value]; else if (propInfo.type instanceof Function) isLink = true; else propError = true; } if (isLink) this._addLink(context, propName, value); else if (newValue !== null && newValue !== undefined) props[propName] = newValue; else if (propError) this.showError('Attribute \'%s\' invalid for tag \'%s\'', attribute, node.tagName); } } ,objectInstantiate: function(doc, context, scope) { const object = new context.klass(); object.setProperties(context.props); if (context.nodeId && object instanceof Component) { var id = context.nodeId; object.htmlId = scope.getHtmlId(id); object.className = '_'+ id +' '+ object.className; } return object; } ,objectLink: function(context, object, objects, scope, exprScope) { const objectProps = context.objectProps; for (const prop in objectProps) object[prop] = objects[objectProps[prop]]; const childs = context.childs; for (let i = 0; i < childs.length; i++) object.appendChild(objects[childs[i]]); const funcProps = context.funcProps; for (const prop in funcProps) { let method; const handler = funcProps[prop]; if (typeof handler === 'string') { // XXX: Compatibility with old expressions method = scope.thisArg[handler]; if (!method) this.showError(`Function '${handler}' not found`); method = method.bind(scope.thisArg); } else { method = function() { handler.apply(scope.thisArg, exprScope); }; } if (method) object[prop] = method; } const events = context.events; for (const event in events) { let listener; const handler = events[event]; if (typeof handler === 'string') { // XXX: Compatibility with old expressions listener = scope.thisArg[handler]; if (!listener) this.showError(`Function '${handler}' not found`); } else { listener = function() { handler.apply(scope.thisArg, exprScope.concat(arguments)); }; } if (listener) object.on(event, listener, scope.thisArg); } if (context.custom) object.loadXml(scope, context.custom); } //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Element /** * Creates a HTML node context. */ ,elementCompile: function(node, tagName) { var attributes = {}; var dynProps = {}; var childs = []; var events = {}; var handler; var a = node.attributes; for (var i = 0; i < a.length; i++) { var attribute = a[i].nodeName; var value = a[i].nodeValue; if (this._isEvent(attribute)) { var handler = this._getMethod(value); if (handler) events[attribute.substr(3)] = handler; } else if (attribute !== 'id') { const expr = this.matchExpr(value); if (expr) dynProps[attribute] = expr; else attributes[attribute] = this._translateValue(value); } } var childContext; var childNodes = node.childNodes; if (childNodes) for (var i = 0; i < childNodes.length; i++) if (childContext = this._compile(childNodes[i])) childs.push(childContext.id); return { tagName, attributes, dynProps, childs, events }; } ,elementInstantiate: function(doc, context, scope) { var object = doc.createElement(context.tagName); const attributes = context.attributes; for (const attribute in attributes) object.setAttribute(attribute, attributes[attribute]); if (context.nodeId) { const id = context.nodeId; object.setAttribute('id', scope.getHtmlId(id)); VnNode.addClass(object, '_'+ id); } return object; } ,elementLink: function(context, object, objects, scope, exprScope) { const childs = context.childs; for (var i = 0; i < childs.length; i++) { let child = objects[childs[i]]; if (child instanceof Component) child = child.node; if (child instanceof Node) object.appendChild(child); } const events = context.events; for (const event in events) { let listener; const handler = events[event]; if (typeof handler === 'string') { // XXX: Compatibility with old expressions listener = scope.thisArg[handler]; if (!listener) this.showError(`Function '${handler}' not found`); listener = listener.bind(scope.thisArg); } else { listener = function(e) { handler.apply(scope.thisArg, exprScope.concat(e)); }; } if (listener) object.addEventListener(event, listener); } } });