From de7c680387e999f8582ad2b15772ef4432401ac6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Fri, 10 May 2019 23:59:55 +0200 Subject: [PATCH] [ADD] extras: add owl 0.10.0 to list of benchmarks --- extras/benchmarks/owl-0.10.0/app.js | 84 + extras/benchmarks/owl-0.10.0/index.html | 13 + extras/benchmarks/owl-0.10.0/owl.js | 2685 ++++++++++++++++++++ extras/benchmarks/owl-0.10.0/templates.xml | 32 + extras/index.html | 1 + 5 files changed, 2815 insertions(+) create mode 100644 extras/benchmarks/owl-0.10.0/app.js create mode 100644 extras/benchmarks/owl-0.10.0/index.html create mode 100644 extras/benchmarks/owl-0.10.0/owl.js create mode 100644 extras/benchmarks/owl-0.10.0/templates.xml diff --git a/extras/benchmarks/owl-0.10.0/app.js b/extras/benchmarks/owl-0.10.0/app.js new file mode 100644 index 00000000..e589b499 --- /dev/null +++ b/extras/benchmarks/owl-0.10.0/app.js @@ -0,0 +1,84 @@ +import { buildData, startMeasure, stopMeasure } from "../shared/utils.js"; + +//------------------------------------------------------------------------------ +// Likes Counter Widget +//------------------------------------------------------------------------------ +class Counter extends owl.Component { + template = "counter"; + state = { counter: 0 }; + + increment() { + this.state.counter++; + } +} + +//------------------------------------------------------------------------------ +// Message Widget +//------------------------------------------------------------------------------ +class Message extends owl.Component { + template = "message"; + widgets = { Counter }; + + shouldUpdate(nextProps) { + return nextProps !== this.props; + } + removeMessage() { + this.trigger("remove_message", { + id: this.props.id + }); + } +} + +//------------------------------------------------------------------------------ +// Root Widget +//------------------------------------------------------------------------------ +class App extends owl.Component { + template = "root"; + widgets = { Message }; + state = { messages: [] }; + + addMessages(n) { + startMeasure("add " + n); + const newMessages = buildData(n); + this.state.messages.push.apply(this.state.messages, newMessages); + stopMeasure(); + } + + clear() { + startMeasure("clear"); + this.state.messages = []; + stopMeasure(); + } + + updateSomeMessages() { + startMeasure("update every 10th"); + const messages = this.state.messages; + for (let i = 0; i < this.state.messages.length; i += 10) { + const msg = Object.assign({}, messages[i]); + msg.author += '!!!'; + this.set(messages, i, msg); + } + stopMeasure(); + } + + removeMessage(data) { + startMeasure("remove message"); + const index = this.state.messages.findIndex(m => m.id === data.id); + this.state.messages.splice(index, 1); + stopMeasure(); + } +} + +//------------------------------------------------------------------------------ +// Application initialization +//------------------------------------------------------------------------------ +async function start() { + const templates = await owl.utils.loadTemplates("templates.xml"); + const env = { + qweb: new owl.QWeb(templates) + }; + const app = new App(env); + app.mount(document.body); +} + +start(); diff --git a/extras/benchmarks/owl-0.10.0/index.html b/extras/benchmarks/owl-0.10.0/index.html new file mode 100644 index 00000000..3abd2772 --- /dev/null +++ b/extras/benchmarks/owl-0.10.0/index.html @@ -0,0 +1,13 @@ + + + + + OWL 0.10.0 Benchmark + + + + +
+ + + diff --git a/extras/benchmarks/owl-0.10.0/owl.js b/extras/benchmarks/owl-0.10.0/owl.js new file mode 100644 index 00000000..c59fe751 --- /dev/null +++ b/extras/benchmarks/owl-0.10.0/owl.js @@ -0,0 +1,2685 @@ +(function (exports) { + 'use strict'; + + /** + * We define here a simple event bus: it can + * - emit events + * - add/remove listeners. + * + * This is a useful pattern of communication in many cases. For OWL, each + * components and stores are event buses. + */ + //------------------------------------------------------------------------------ + // EventBus + //------------------------------------------------------------------------------ + class EventBus { + constructor() { + this.subscriptions = {}; + } + /** + * Add a listener for the 'eventType' events. + * + * Note that the 'owner' of this event can be anything, but will more likely + * be a widget or a class. The idea is that the callback will be called with + * the proper owner bound. + * + * Also, the owner should be kind of unique. This will be used to remove the + * listener. + */ + on(eventType, owner, callback) { + if (!callback) { + throw new Error("Missing callback"); + } + if (!this.subscriptions[eventType]) { + this.subscriptions[eventType] = []; + } + this.subscriptions[eventType].push({ + owner, + callback + }); + } + /** + * Remove a listener + */ + off(eventType, owner) { + const subs = this.subscriptions[eventType]; + if (subs) { + this.subscriptions[eventType] = subs.filter(s => s.owner !== owner); + } + } + /** + * Emit an event of type 'eventType'. Any extra arguments will be passed to + * the listeners callback. + */ + trigger(eventType, ...args) { + const subs = this.subscriptions[eventType] || []; + for (let sub of subs) { + sub.callback.call(sub.owner, ...args); + } + } + /** + * Remove all subscriptions. + */ + clear() { + this.subscriptions = {}; + } + } + + /** + * Owl Observer + * + * This code contains the logic that allows Owl to observe and react to state + * changes. + * + * This is a Observer class that can observe any JS values. The way it works + * can be summarized thusly: + * - primitive values are not observed at all + * - Objects are observed by replacing all their keys with getters/setters + * (recursively) + * - Arrays are observed by replacing their prototype with a customized version, + * which wrap some methods to allow the tracking of each state change. + * + * Note that this code is inspired by Vue. + */ + //------------------------------------------------------------------------------ + // Modified Array prototype + //------------------------------------------------------------------------------ + // we define here a new modified Array prototype, which basically override all + // Array methods that change some state to be able to track their changes + const methodsToPatch = [ + "push", + "pop", + "shift", + "unshift", + "splice", + "sort", + "reverse" + ]; + const ArrayProto = Array.prototype; + const ModifiedArrayProto = Object.create(ArrayProto); + for (let method of methodsToPatch) { + const initialMethod = ArrayProto[method]; + ModifiedArrayProto[method] = function (...args) { + if (!this.__observer__.allowMutations) { + throw new Error(`Array cannot be changed here")`); + } + this.__observer__.notifyChange(); + this.__owl__.rev++; + let parent = this; + do { + parent.__owl__.deepRev++; + } while ((parent = parent.__owl__.parent)); + let inserted; + switch (method) { + case "push": + case "unshift": + inserted = args; + break; + case "splice": + inserted = args.slice(2); + break; + } + if (inserted) { + for (let elem of inserted) { + this.__observer__.observe(elem, this); + } + } + return initialMethod.call(this, ...args); + }; + } + //------------------------------------------------------------------------------ + // Observer + //------------------------------------------------------------------------------ + class Observer { + constructor() { + this.rev = 1; + this.allowMutations = true; + this.dirty = false; + } + notifyCB() { } + notifyChange() { + this.rev++; + this.dirty = true; + Promise.resolve().then(() => { + if (this.dirty) { + this.dirty = false; + this.notifyCB(); + } + }); + } + observe(value, parent) { + if (value === null) { + // fun fact: typeof null === 'object' + return; + } + if (typeof value !== "object") { + return; + } + if ("__owl__" in value) { + // already observed + value.__owl__.parent = parent; + return; + } + if (Array.isArray(value)) { + this._observeArr(value, parent); + } + else { + this._observeObj(value, parent); + } + } + set(target, key, value) { + this._addProp(target, key, value); + target.__owl__.rev++; + this.notifyChange(); + } + _observeObj(obj, parent) { + const keys = Object.keys(obj); + obj.__owl__ = { rev: 1, deepRev: 1, parent }; + Object.defineProperty(obj, "__owl__", { enumerable: false }); + for (let key of keys) { + this._addProp(obj, key, obj[key]); + } + } + _observeArr(arr, parent) { + arr.__owl__ = { rev: 1, deepRev: 1, parent }; + Object.defineProperty(arr, "__owl__", { enumerable: false }); + arr.__proto__ = Object.create(ModifiedArrayProto); + arr.__proto__.__observer__ = this; + for (let i = 0; i < arr.length; i++) { + this.observe(arr[i], arr); + } + } + _addProp(obj, key, value) { + var self = this; + Object.defineProperty(obj, key, { + enumerable: true, + get() { + return value; + }, + set(newVal) { + if (newVal !== value) { + if (!self.allowMutations) { + throw new Error(`Observed state cannot be changed here! (key: "${key}", val: "${newVal}")`); + } + value = newVal; + self.observe(newVal, obj); + obj.__owl__.rev++; + let parent = obj; + do { + parent.__owl__.deepRev++; + } while ((parent = parent.__owl__.parent) && parent !== obj); + self.notifyChange(); + } + } + }); + this.observe(value, obj); + } + } + + /** + * Owl VDOM + * + * This file contains an implementation of a virtual DOM, which is a system that + * can generate in-memory representations of a DOM tree, compare them, and + * eventually change a concrete DOM tree to match its representation, in an + * hopefully efficient way. + * + * Note that this code is a fork of Snabbdom, slightly tweaked/optimized for our + * needs (see https://github.com/snabbdom/snabbdom). + * + * The main exported values are: + * - interface VNode + * - h function (a helper function to generate a vnode) + * - patch function (to apply a vnode to an actual DOM node) + */ + function vnode(sel, data, children, text, elm) { + let key = data === undefined ? undefined : data.key; + return { + sel: sel, + data: data, + children: children, + text: text, + elm: elm, + key: key + }; + } + //------------------------------------------------------------------------------ + // snabbdom.ts + //------------------------------------------------------------------------------ + function isUndef(s) { + return s === undefined; + } + function isDef(s) { + return s !== undefined; + } + const emptyNode = vnode("", {}, [], undefined, undefined); + function sameVnode(vnode1, vnode2) { + return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel; + } + function isVnode(vnode) { + return vnode.sel !== undefined; + } + function createKeyToOldIdx(children, beginIdx, endIdx) { + let i, map = {}, key, ch; + for (i = beginIdx; i <= endIdx; ++i) { + ch = children[i]; + if (ch != null) { + key = ch.key; + if (key !== undefined) + map[key] = i; + } + } + return map; + } + const hooks = [ + "create", + "update", + "remove", + "destroy", + "pre", + "post" + ]; + function init(modules, domApi) { + let i, j, cbs = {}; + const api = domApi !== undefined ? domApi : htmlDomApi; + for (i = 0; i < hooks.length; ++i) { + cbs[hooks[i]] = []; + for (j = 0; j < modules.length; ++j) { + const hook = modules[j][hooks[i]]; + if (hook !== undefined) { + cbs[hooks[i]].push(hook); + } + } + } + function emptyNodeAt(elm) { + const id = elm.id ? "#" + elm.id : ""; + const c = elm.className ? "." + elm.className.split(" ").join(".") : ""; + return vnode(api.tagName(elm).toLowerCase() + id + c, {}, [], undefined, elm); + } + function createRmCb(childElm, listeners) { + return function rmCb() { + if (--listeners === 0) { + const parent = api.parentNode(childElm); + api.removeChild(parent, childElm); + } + }; + } + function createElm(vnode, insertedVnodeQueue) { + let i, data = vnode.data; + if (data !== undefined) { + if (isDef((i = data.hook)) && isDef((i = i.init))) { + i(vnode); + data = vnode.data; + } + } + let children = vnode.children, sel = vnode.sel; + if (sel === "!") { + if (isUndef(vnode.text)) { + vnode.text = ""; + } + vnode.elm = api.createComment(vnode.text); + } + else if (sel !== undefined) { + // Parse selector + const hashIdx = sel.indexOf("#"); + const dotIdx = sel.indexOf(".", hashIdx); + const hash = hashIdx > 0 ? hashIdx : sel.length; + const dot = dotIdx > 0 ? dotIdx : sel.length; + const tag = hashIdx !== -1 || dotIdx !== -1 + ? sel.slice(0, Math.min(hash, dot)) + : sel; + const elm = (vnode.elm = + isDef(data) && isDef((i = data.ns)) + ? api.createElementNS(i, tag) + : api.createElement(tag)); + if (hash < dot) + elm.setAttribute("id", sel.slice(hash + 1, dot)); + if (dotIdx > 0) + elm.setAttribute("class", sel.slice(dot + 1).replace(/\./g, " ")); + for (i = 0; i < cbs.create.length; ++i) + cbs.create[i](emptyNode, vnode); + if (array(children)) { + for (i = 0; i < children.length; ++i) { + const ch = children[i]; + if (ch != null) { + api.appendChild(elm, createElm(ch, insertedVnodeQueue)); + } + } + } + else if (primitive(vnode.text)) { + api.appendChild(elm, api.createTextNode(vnode.text)); + } + i = vnode.data.hook; // Reuse variable + if (isDef(i)) { + if (i.create) + i.create(emptyNode, vnode); + if (i.insert) + insertedVnodeQueue.push(vnode); + } + } + else { + vnode.elm = api.createTextNode(vnode.text); + } + return vnode.elm; + } + function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) { + for (; startIdx <= endIdx; ++startIdx) { + const ch = vnodes[startIdx]; + if (ch != null) { + api.insertBefore(parentElm, createElm(ch, insertedVnodeQueue), before); + } + } + } + function invokeDestroyHook(vnode) { + let i, j, data = vnode.data; + if (data !== undefined) { + if (isDef((i = data.hook)) && isDef((i = i.destroy))) + i(vnode); + for (i = 0; i < cbs.destroy.length; ++i) + cbs.destroy[i](vnode); + if (vnode.children !== undefined) { + for (j = 0; j < vnode.children.length; ++j) { + i = vnode.children[j]; + if (i != null && typeof i !== "string") { + invokeDestroyHook(i); + } + } + } + } + } + function removeVnodes(parentElm, vnodes, startIdx, endIdx) { + for (; startIdx <= endIdx; ++startIdx) { + let i, listeners, rm, ch = vnodes[startIdx]; + if (ch != null) { + if (isDef(ch.sel)) { + invokeDestroyHook(ch); + listeners = cbs.remove.length + 1; + rm = createRmCb(ch.elm, listeners); + for (i = 0; i < cbs.remove.length; ++i) + cbs.remove[i](ch, rm); + if (isDef((i = ch.data)) && + isDef((i = i.hook)) && + isDef((i = i.remove))) { + i(ch, rm); + } + else { + rm(); + } + } + else { + // Text node + api.removeChild(parentElm, ch.elm); + } + } + } + } + function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) { + let oldStartIdx = 0, newStartIdx = 0; + let oldEndIdx = oldCh.length - 1; + let oldStartVnode = oldCh[0]; + let oldEndVnode = oldCh[oldEndIdx]; + let newEndIdx = newCh.length - 1; + let newStartVnode = newCh[0]; + let newEndVnode = newCh[newEndIdx]; + let oldKeyToIdx; + let idxInOld; + let elmToMove; + let before; + while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { + if (oldStartVnode == null) { + oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left + } + else if (oldEndVnode == null) { + oldEndVnode = oldCh[--oldEndIdx]; + } + else if (newStartVnode == null) { + newStartVnode = newCh[++newStartIdx]; + } + else if (newEndVnode == null) { + newEndVnode = newCh[--newEndIdx]; + } + else if (sameVnode(oldStartVnode, newStartVnode)) { + patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue); + oldStartVnode = oldCh[++oldStartIdx]; + newStartVnode = newCh[++newStartIdx]; + } + else if (sameVnode(oldEndVnode, newEndVnode)) { + patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue); + oldEndVnode = oldCh[--oldEndIdx]; + newEndVnode = newCh[--newEndIdx]; + } + else if (sameVnode(oldStartVnode, newEndVnode)) { + // Vnode moved right + patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue); + api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm)); + oldStartVnode = oldCh[++oldStartIdx]; + newEndVnode = newCh[--newEndIdx]; + } + else if (sameVnode(oldEndVnode, newStartVnode)) { + // Vnode moved left + patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue); + api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm); + oldEndVnode = oldCh[--oldEndIdx]; + newStartVnode = newCh[++newStartIdx]; + } + else { + if (oldKeyToIdx === undefined) { + oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx); + } + idxInOld = oldKeyToIdx[newStartVnode.key]; + if (isUndef(idxInOld)) { + // New element + api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm); + newStartVnode = newCh[++newStartIdx]; + } + else { + elmToMove = oldCh[idxInOld]; + if (elmToMove.sel !== newStartVnode.sel) { + api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm); + } + else { + patchVnode(elmToMove, newStartVnode, insertedVnodeQueue); + oldCh[idxInOld] = undefined; + api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm); + } + newStartVnode = newCh[++newStartIdx]; + } + } + } + if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) { + if (oldStartIdx > oldEndIdx) { + before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm; + addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue); + } + else { + removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx); + } + } + } + function patchVnode(oldVnode, vnode, insertedVnodeQueue) { + let i, hook; + if (isDef((i = vnode.data)) && + isDef((hook = i.hook)) && + isDef((i = hook.prepatch))) { + i(oldVnode, vnode); + } + const elm = (vnode.elm = oldVnode.elm); + let oldCh = oldVnode.children; + let ch = vnode.children; + if (oldVnode === vnode) + return; + if (vnode.data !== undefined) { + for (i = 0; i < cbs.update.length; ++i) + cbs.update[i](oldVnode, vnode); + i = vnode.data.hook; + if (isDef(i) && isDef((i = i.update))) + i(oldVnode, vnode); + } + if (isUndef(vnode.text)) { + if (isDef(oldCh) && isDef(ch)) { + if (oldCh !== ch) + updateChildren(elm, oldCh, ch, insertedVnodeQueue); + } + else if (isDef(ch)) { + if (isDef(oldVnode.text)) + api.setTextContent(elm, ""); + addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue); + } + else if (isDef(oldCh)) { + removeVnodes(elm, oldCh, 0, oldCh.length - 1); + } + else if (isDef(oldVnode.text)) { + api.setTextContent(elm, ""); + } + } + else if (oldVnode.text !== vnode.text) { + if (isDef(oldCh)) { + removeVnodes(elm, oldCh, 0, oldCh.length - 1); + } + api.setTextContent(elm, vnode.text); + } + if (isDef(hook) && isDef((i = hook.postpatch))) { + i(oldVnode, vnode); + } + } + return function patch(oldVnode, vnode) { + let i, elm, parent; + const insertedVnodeQueue = []; + for (i = 0; i < cbs.pre.length; ++i) + cbs.pre[i](); + if (!isVnode(oldVnode)) { + oldVnode = emptyNodeAt(oldVnode); + } + if (sameVnode(oldVnode, vnode)) { + patchVnode(oldVnode, vnode, insertedVnodeQueue); + } + else { + elm = oldVnode.elm; + parent = api.parentNode(elm); + createElm(vnode, insertedVnodeQueue); + if (parent !== null) { + api.insertBefore(parent, vnode.elm, api.nextSibling(elm)); + removeVnodes(parent, [oldVnode], 0, 0); + } + } + for (i = 0; i < insertedVnodeQueue.length; ++i) { + insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]); + } + for (i = 0; i < cbs.post.length; ++i) + cbs.post[i](); + return vnode; + }; + } + //------------------------------------------------------------------------------ + // is.ts + //------------------------------------------------------------------------------ + const array = Array.isArray; + function primitive(s) { + return typeof s === "string" || typeof s === "number"; + } + function createElement(tagName) { + return document.createElement(tagName); + } + function createElementNS(namespaceURI, qualifiedName) { + return document.createElementNS(namespaceURI, qualifiedName); + } + function createTextNode(text) { + return document.createTextNode(text); + } + function createComment(text) { + return document.createComment(text); + } + function insertBefore(parentNode, newNode, referenceNode) { + parentNode.insertBefore(newNode, referenceNode); + } + function removeChild(node, child) { + node.removeChild(child); + } + function appendChild(node, child) { + node.appendChild(child); + } + function parentNode(node) { + return node.parentNode; + } + function nextSibling(node) { + return node.nextSibling; + } + function tagName(elm) { + return elm.tagName; + } + function setTextContent(node, text) { + node.textContent = text; + } + function getTextContent(node) { + return node.textContent; + } + function isElement(node) { + return node.nodeType === 1; + } + function isText(node) { + return node.nodeType === 3; + } + function isComment(node) { + return node.nodeType === 8; + } + const htmlDomApi = { + createElement, + createElementNS, + createTextNode, + createComment, + insertBefore, + removeChild, + appendChild, + parentNode, + nextSibling, + tagName, + setTextContent, + getTextContent, + isElement, + isText, + isComment + }; + function addNS(data, children, sel) { + data.ns = "http://www.w3.org/2000/svg"; + if (sel !== "foreignObject" && children !== undefined) { + for (let i = 0; i < children.length; ++i) { + let childData = children[i].data; + if (childData !== undefined) { + addNS(childData, children[i].children, children[i].sel); + } + } + } + } + function h(sel, b, c) { + var data = {}, children, text, i; + if (c !== undefined) { + data = b; + if (array(c)) { + children = c; + } + else if (primitive(c)) { + text = c; + } + else if (c && c.sel) { + children = [c]; + } + } + else if (b !== undefined) { + if (array(b)) { + children = b; + } + else if (primitive(b)) { + text = b; + } + else if (b && b.sel) { + children = [b]; + } + else { + data = b; + } + } + if (children !== undefined) { + for (i = 0; i < children.length; ++i) { + if (primitive(children[i])) + children[i] = vnode(undefined, undefined, undefined, children[i], undefined); + } + } + if (sel[0] === "s" && + sel[1] === "v" && + sel[2] === "g" && + (sel.length === 3 || sel[3] === "." || sel[3] === "#")) { + addNS(data, children, sel); + } + return vnode(sel, data, children, text, undefined); + } + function updateProps(oldVnode, vnode) { + var key, cur, old, elm = vnode.elm, oldProps = oldVnode.data.props, props = vnode.data.props; + if (!oldProps && !props) + return; + if (oldProps === props) + return; + oldProps = oldProps || {}; + props = props || {}; + for (key in oldProps) { + if (!props[key]) { + delete elm[key]; + } + } + for (key in props) { + cur = props[key]; + old = oldProps[key]; + if (old !== cur && (key !== "value" || elm[key] !== cur)) { + elm[key] = cur; + } + } + } + const propsModule = { + create: updateProps, + update: updateProps + }; + function invokeHandler(handler, vnode, event) { + if (typeof handler === "function") { + // call function handler + handler.call(vnode, event, vnode); + } + else if (typeof handler === "object") { + // call handler with arguments + if (typeof handler[0] === "function") { + // special case for single argument for performance + if (handler.length === 2) { + handler[0].call(vnode, handler[1], event, vnode); + } + else { + var args = handler.slice(1); + args.push(event); + args.push(vnode); + handler[0].apply(vnode, args); + } + } + else { + // call multiple handlers + for (var i = 0; i < handler.length; i++) { + invokeHandler(handler[i], vnode, event); + } + } + } + } + function handleEvent(event, vnode) { + var name = event.type, on = vnode.data.on; + // call event handler(s) if exists + if (on && on[name]) { + invokeHandler(on[name], vnode, event); + } + } + function createListener() { + return function handler(event) { + handleEvent(event, handler.vnode); + }; + } + function updateEventListeners(oldVnode, vnode) { + var oldOn = oldVnode.data.on, oldListener = oldVnode.listener, oldElm = oldVnode.elm, on = vnode && vnode.data.on, elm = (vnode && vnode.elm), name; + // optimization for reused immutable handlers + if (oldOn === on) { + return; + } + // remove existing listeners which no longer used + if (oldOn && oldListener) { + // if element changed or deleted we remove all existing listeners unconditionally + if (!on) { + for (name in oldOn) { + // remove listener if element was changed or existing listeners removed + oldElm.removeEventListener(name, oldListener, false); + } + } + else { + for (name in oldOn) { + // remove listener if existing listener removed + if (!on[name]) { + oldElm.removeEventListener(name, oldListener, false); + } + } + } + } + // add new listeners which has not already attached + if (on) { + // reuse existing listener or create new + var listener = (vnode.listener = + oldVnode.listener || createListener()); + // update vnode for listener + listener.vnode = vnode; + // if element changed or added we add all needed listeners unconditionally + if (!oldOn) { + for (name in on) { + // add listener if element was changed or new listeners added + elm.addEventListener(name, listener, false); + } + } + else { + for (name in on) { + // add listener if new listener added + if (!oldOn[name]) { + elm.addEventListener(name, listener, false); + } + } + } + } + } + const eventListenersModule = { + create: updateEventListeners, + update: updateEventListeners, + destroy: updateEventListeners + }; + const xlinkNS = "http://www.w3.org/1999/xlink"; + const xmlNS = "http://www.w3.org/XML/1998/namespace"; + const colonChar = 58; + const xChar = 120; + function updateAttrs(oldVnode, vnode) { + var key, elm = vnode.elm, oldAttrs = oldVnode.data.attrs, attrs = vnode.data.attrs; + if (!oldAttrs && !attrs) + return; + if (oldAttrs === attrs) + return; + oldAttrs = oldAttrs || {}; + attrs = attrs || {}; + // update modified attributes, add new attributes + for (key in attrs) { + const cur = attrs[key]; + const old = oldAttrs[key]; + if (old !== cur) { + if (cur === true) { + elm.setAttribute(key, ""); + } + else if (cur === false) { + elm.removeAttribute(key); + } + else { + if (key.charCodeAt(0) !== xChar) { + elm.setAttribute(key, cur); + } + else if (key.charCodeAt(3) === colonChar) { + // Assume xml namespace + elm.setAttributeNS(xmlNS, key, cur); + } + else if (key.charCodeAt(5) === colonChar) { + // Assume xlink namespace + elm.setAttributeNS(xlinkNS, key, cur); + } + else { + elm.setAttribute(key, cur); + } + } + } + } + // remove removed attributes + // use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value) + // the other option is to remove all attributes with value == undefined + for (key in oldAttrs) { + if (!(key in attrs)) { + elm.removeAttribute(key); + } + } + } + const attrsModule = { + create: updateAttrs, + update: updateAttrs + }; + const patch = init([eventListenersModule, attrsModule, propsModule]); + + //------------------------------------------------------------------------------ + // Widget + //------------------------------------------------------------------------------ + let nextId = 1; + class Component extends EventBus { + //-------------------------------------------------------------------------- + // Lifecycle + //-------------------------------------------------------------------------- + /** + * Creates an instance of Component. + * + * The root widget of a component tree needs an environment: + * + * ```javascript + * const root = new RootWidget(env, props); + * ``` + * + * Every other widget simply needs a reference to its parent: + * + * ```javascript + * const child = new SomeWidget(parent, props); + * ``` + * + * Note that most of the time, only the root widget needs to be created by + * hand. Other widgets should be created automatically by the framework (with + * the t-widget directive in a template) + */ + constructor(parent, props) { + super(); + this.template = "default"; + this.inlineTemplate = null; + this.refs = {}; + // is this a good idea? + // Pro: if props is empty, we can create easily a widget + // Con: this is not really safe + // Pro: but creating widget (by a template) is always unsafe anyway + this.props = props || {}; + let id = nextId++; + let p = null; + if (parent instanceof Component) { + p = parent; + this.env = parent.env; + parent.__owl__.children[id] = this; + } + else { + this.env = parent; + } + this.__owl__ = { + id: id, + vnode: null, + isStarted: false, + isMounted: false, + isDestroyed: false, + parent: p, + children: {}, + cmap: {}, + renderId: 1, + renderPromise: null, + renderProps: props || null, + boundHandlers: {} + }; + } + get el() { + return this.__owl__.vnode ? this.__owl__.vnode.elm : null; + } + /** + * willStart is an asynchronous hook that can be implemented to perform some + * action before the initial rendering of a component. + * + * It will be called exactly once before the initial rendering. It is useful + * in some cases, for example, to load external assets (such as a JS library) + * before the widget is rendered. + * + * Note that a slow willStart method will slow down the rendering of the user + * interface. Therefore, some effort should be made to make this method as + * fast as possible. + * + * Note: this method should not be called manually. + */ + async willStart() { } + /** + * mounted is a hook that is called each time a component is attached to the + * DOM. This is a good place to add some listeners, or to interact with the + * DOM, if the component needs to perform some measure for example. + * + * Note: this method should not be called manually. + * + * @see willUnmount + */ + mounted() { } + /** + * The willUpdateProps is an asynchronous hook, called just before new props + * are set. This is useful if the component needs some asynchronous task + * performed, depending on the props (for example, assuming that the props are + * some record Id, fetching the record data). + * + * This hook is not called during the first render (but willStart is called + * and performs a similar job). + */ + async willUpdateProps(nextProps) { } + /** + * The willPatch hook is called just before the DOM patching process starts. + * It is not called on the initial render. This is useful to get some + * information which are in the DOM. For example, the current position of the + * scrollbar + * + * The return value of willPatch will be given to the patched function. + */ + willPatch() { } + /** + * This hook is called whenever a component did actually update its props, + * state or env. + * + * This method is not called on the initial render. It is useful to interact + * with the DOM (for example, through an external library) whenever the + * component was updated. + * + * Updating the widget state in this hook is possible, but not encouraged. + * One need to be careful, because updates here will cause rerender, which in + * turn will cause other calls to updated. So, we need to be particularly + * careful at avoiding endless cycles. + * + * The snapshot parameter is the result of the call to willPatch. + */ + patched(snapshot) { } + /** + * willUnmount is a hook that is called each time just before a component is + * unmounted from the DOM. This is a good place to remove some listeners, for + * example. + * + * Note: this method should not be called manually. + * + * @see mounted + */ + willUnmount() { } + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + async mount(target) { + const vnode = await this._prepare(); + if (this.__owl__.isDestroyed) { + // widget was destroyed before we get here... + return; + } + this._patch(vnode); + target.appendChild(this.el); + if (document.body.contains(target)) { + this._callMounted(); + } + } + _callMounted() { + const children = this.__owl__.children; + for (let id in children) { + const comp = children[id]; + if (!comp.__owl__.isMounted && this.el.contains(comp.el)) { + comp._callMounted(); + } + } + this.__owl__.isMounted = true; + this.mounted(); + } + _callWillUnmount() { + this.willUnmount(); + this.__owl__.isMounted = false; + const children = this.__owl__.children; + for (let id in children) { + const comp = children[id]; + if (comp.__owl__.isMounted) { + comp._callWillUnmount(); + } + } + } + unmount() { + if (this.__owl__.isMounted) { + this._callWillUnmount(); + this.el.remove(); + } + } + async render(force = false, patchQueue) { + if (!this.__owl__.isMounted) { + return; + } + const shouldPatch = !patchQueue; + if (shouldPatch) { + patchQueue = []; + } + const renderVDom = this._render(force, patchQueue); + const renderId = this.__owl__.renderId; + await renderVDom; + if (shouldPatch && + this.__owl__.isMounted && + renderId === this.__owl__.renderId) { + // we only update the vnode and the actual DOM if no other rendering + // occurred between now and when the render method was initially called. + for (let i = 0; i < patchQueue.length; i++) { + const patch = patchQueue[i]; + patch.push(patch[0].willPatch()); + } + for (let i = 0; i < patchQueue.length; i++) { + const patch = patchQueue[i]; + patch[0]._patch(patch[1]); + } + for (let i = patchQueue.length - 1; i >= 0; i--) { + const patch = patchQueue[i]; + patch[0].patched(patch[2]); + } + } + } + destroy() { + if (!this.__owl__.isDestroyed) { + const el = this.el; + this._destroy(this.__owl__.parent); + if (el) { + el.remove(); + } + } + } + _destroy(parent) { + const isMounted = this.__owl__.isMounted; + if (isMounted) { + this.willUnmount(); + this.__owl__.isMounted = false; + } + const children = Object.values(this.__owl__.children); + for (let child of children) { + child._destroy(this); + } + if (parent) { + let id = this.__owl__.id; + delete parent.__owl__.children[id]; + this.__owl__.parent = null; + } + this.clear(); + this.__owl__.isDestroyed = true; + delete this.__owl__.vnode; + } + shouldUpdate(nextProps) { + return true; + } + /** + * This method is the correct way to update the environment of a widget. Doing + * this will cause a full rerender of the widget and its children, so this is + * an operation that should not be done frequently. + * + * A good usecase for updating the environment would be to update some mostly + * static config keys, such as a boolean to determine if we are in mobile + * mode or not. + */ + async updateEnv(nextEnv) { + if (this.__owl__.parent && this.__owl__.parent.env === this.env) { + this.env = Object.create(this.env); + } + Object.assign(this.env, nextEnv); + if (this.__owl__.isMounted) { + await this.render(true); + } + } + set(target, key, value) { + this.__owl__.observer.set(target, key, value); + } + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + async _updateProps(nextProps, forceUpdate = false, patchQueue) { + const shouldUpdate = forceUpdate || this.shouldUpdate(nextProps); + if (shouldUpdate) { + await this.willUpdateProps(nextProps); + this.props = nextProps; + await this.render(forceUpdate, patchQueue); + } + } + _patch(vnode) { + this.__owl__.renderPromise = null; + const target = this.__owl__.vnode || document.createElement(vnode.sel); + this.__owl__.vnode = patch(target, vnode); + } + _prepare() { + this.__owl__.renderProps = this.props; + this.__owl__.renderPromise = this._prepareAndRender(); + return this.__owl__.renderPromise; + } + async _prepareAndRender() { + await this.willStart(); + if (this.__owl__.isDestroyed) { + return Promise.resolve(h("div")); + } + this.__owl__.isStarted = true; + if (this.inlineTemplate) { + this.env.qweb.addTemplate(this.inlineTemplate, this.inlineTemplate, true); + } + this.__owl__.render = this.env.qweb.render.bind(this.env.qweb, this.inlineTemplate || this.template); + this._observeState(); + return this._render(); + } + async _render(force = false, patchQueue = []) { + this.__owl__.renderId++; + const promises = []; + const patch = [this]; + if (this.__owl__.isMounted) { + patchQueue.push(patch); + } + if (this.__owl__.observer) { + this.__owl__.observer.allowMutations = false; + } + let vnode = this.__owl__.render(this, { + promises, + handlers: this.__owl__.boundHandlers, + forceUpdate: force, + patchQueue + }); + patch.push(vnode); + if (this.__owl__.observer) { + this.__owl__.observer.allowMutations = true; + } + // this part is critical for the patching process to be done correctly. The + // tricky part is that a child widget can be rerendered on its own, which + // will update its own vnode representation without the knowledge of the + // parent widget. With this, we make sure that the parent widget will be + // able to patch itself properly after + vnode.key = this.__owl__.id; + this.__owl__.renderProps = this.props; + this.__owl__.renderPromise = Promise.all(promises).then(() => vnode); + return this.__owl__.renderPromise; + } + /** + * Only called by qweb t-widget directive + */ + _mount(vnode, elm) { + this.__owl__.vnode = patch(elm, vnode); + if (this.__owl__.parent && + this.__owl__.parent.__owl__.isMounted && + !this.__owl__.isMounted) { + this._callMounted(); + } + return this.__owl__.vnode; + } + __mount() { + if (!this.__owl__.isMounted) { + this.__owl__.isMounted = true; + this.mounted(); + } + } + _observeState() { + if (this.state) { + this.__owl__.observer = new Observer(); + this.__owl__.observer.observe(this.state); + this.__owl__.observer.notifyCB = this.render.bind(this); + } + } + } + + /** + * Owl Utils + * + * We have here a small collection of utility functions: + * + * - escape + * - memoize + * - debounce + * - patch + * - unpatch + * - loadTemplates + * - loadJS + * - whenReady + * - parseXML + */ + function escape(str) { + if (str === undefined) { + return ""; + } + if (typeof str === "number") { + return String(str); + } + return str + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, "'") + .replace(/`/g, "`"); + } + function memoize(f, hash) { + if (!hash) { + hash = args => args.map(a => String(a)).join(","); + } + let cache = {}; + function memoizedFunction(...args) { + let hashValue = hash(args); + if (!(hashValue in cache)) { + cache[hashValue] = f(...args); + } + return cache[hashValue]; + } + return memoizedFunction; + } + /** + * Returns a function, that, as long as it continues to be invoked, will not + * be triggered. The function will be called after it stops being called for + * N milliseconds. If `immediate` is passed, trigger the function on the + * leading edge, instead of the trailing. + * + * Inspired by https://davidwalsh.name/javascript-debounce-function + */ + function debounce(func, wait, immediate) { + let timeout; + return function () { + const context = this; + const args = arguments; + function later() { + timeout = null; + if (!immediate) { + func.apply(context, args); + } + } + const callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) { + func.apply(context, args); + } + }; + } + function patch$1(C, patchName, patch) { + const proto = C.prototype; + if (!proto.__patches) { + proto.__patches = { + origMethods: {}, + patches: {}, + current: [] + }; + } + if (proto.__patches.patches[patchName]) { + throw new Error(`Patch [${patchName}] already exists`); + } + proto.__patches.patches[patchName] = patch; + applyPatch(proto, patch); + proto.__patches.current.push(patchName); + function applyPatch(proto, patch) { + Object.keys(patch).forEach(function (methodName) { + const method = patch[methodName]; + if (typeof method === "function") { + const original = proto[methodName]; + if (!(methodName in proto.__patches.origMethods)) { + proto.__patches.origMethods[methodName] = original; + } + proto[methodName] = function (...args) { + this._super = original; + return method.call(this, ...args); + }; + } + }); + } + } + function unpatch(C, patchName) { + const proto = C.prototype; + const patchInfo = proto.__patches; + delete proto.__patches; + // reset to original + for (let k in patchInfo.origMethods) { + proto[k] = patchInfo.origMethods[k]; + } + // apply other patches + for (let name of patchInfo.current) { + if (name !== patchName) { + patch$1(C, name, patchInfo.patches[name]); + } + } + } + async function loadTemplates(url) { + const result = await fetch(url); + if (!result.ok) { + throw new Error("Error while fetching xml templates"); + } + let templates = await result.text(); + templates = templates.replace(//g, ""); + return templates; + } + const loadedScripts = {}; + function loadJS(url) { + if (url in loadedScripts) { + return loadedScripts[url]; + } + const promise = new Promise(function (resolve, reject) { + const script = document.createElement("script"); + script.type = "text/javascript"; + script.src = url; + script.onload = function () { + resolve(); + }; + script.onerror = function () { + reject(`Error loading file '${url}'`); + }; + const head = document.head || document.getElementsByTagName("head")[0]; + head.appendChild(script); + }); + loadedScripts[url] = promise; + return promise; + } + function whenReady(fn) { + if (document.readyState === "complete") { + fn(); + } + else { + document.addEventListener("DOMContentLoaded", fn, false); + } + } + function parseXML(xml) { + const parser = new DOMParser(); + const doc = parser.parseFromString(xml, "text/xml"); + if (doc.getElementsByTagName("parsererror").length) { + throw new Error("Invalid XML in template"); + } + return doc; + } + + var _utils = /*#__PURE__*/Object.freeze({ + escape: escape, + memoize: memoize, + debounce: debounce, + patch: patch$1, + unpatch: unpatch, + loadTemplates: loadTemplates, + loadJS: loadJS, + whenReady: whenReady, + parseXML: parseXML + }); + + //------------------------------------------------------------------------------ + // Const/global stuff/helpers + //------------------------------------------------------------------------------ + const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,this,typeof,eval,void,Math,RegExp,Array,Object,Date".split(","); + const WORD_REPLACEMENT = { + and: "&&", + or: "||", + gt: ">", + gte: ">=", + lt: "<", + lte: "<=" + }; + const DISABLED_TAGS = [ + "input", + "textarea", + "button", + "select", + "option", + "optgroup" + ]; + const lineBreakRE = /[\r\n]/; + const whitespaceRE = /\s+/g; + const DIRECTIVE_NAMES = { + name: 1, + att: 1, + attf: 1, + key: 1 + }; + const DIRECTIVES = []; + const UTILS = { + h: h, + objectToAttrString(obj) { + let classes = []; + for (let k in obj) { + if (obj[k]) { + classes.push(k); + } + } + return classes.join(" "); + } + }; + //------------------------------------------------------------------------------ + // Compilation Context + //------------------------------------------------------------------------------ + class Context { + constructor(name) { + this.nextID = 1; + this.code = []; + this.variables = {}; + this.definedVariables = {}; + this.escaping = false; + this.parentNode = null; + this.rootNode = null; + this.indentLevel = 0; + this.shouldDefineOwner = false; + this.shouldProtectContext = false; + this.inLoop = false; + this.inPreTag = false; + this.rootContext = this; + this.templateName = name || "noname"; + this.addLine("var h = this.utils.h;"); + } + generateID() { + const id = this.rootContext.nextID++; + return id; + } + withParent(node) { + if (this === this.rootContext && this.parentNode) { + throw new Error("A template should not have more than one root node"); + } + if (!this.rootContext.rootNode) { + this.rootContext.rootNode = node; + } + return this.subContext("parentNode", node); + } + subContext(key, value) { + const newContext = Object.create(this); + newContext[key] = value; + return newContext; + } + indent() { + this.indentLevel++; + } + dedent() { + this.indentLevel--; + } + addLine(line) { + const prefix = new Array(this.indentLevel + 2).join(" "); + this.code.push(prefix + line); + } + addIf(condition) { + this.addLine(`if (${condition}) {`); + this.indent(); + } + addElse() { + this.dedent(); + this.addLine("} else {"); + this.indent(); + } + closeIf() { + this.dedent(); + this.addLine("}"); + } + getValue(val) { + return val in this.variables ? this.getValue(this.variables[val]) : val; + } + formatExpression(e) { + e = e.trim(); + if (e[0] === "{" && e[e.length - 1] === "}") { + const innerExpr = e + .slice(1, -1) + .split(",") + .map(p => { + let [key, val] = p.trim().split(":"); + if (key === "") { + return ""; + } + if (!val) { + val = key; + } + return `${key}: ${this.formatExpression(val)}`; + }) + .join(","); + return "{" + innerExpr + "}"; + } + // Thanks CHM for this code... + const chars = e.split(""); + let instring = ""; + let invar = ""; + let invarPos = 0; + let r = ""; + chars.push(" "); + for (var i = 0, ilen = chars.length; i < ilen; i++) { + var c = chars[i]; + if (instring.length) { + if (c === instring && chars[i - 1] !== "\\") { + instring = ""; + } + } + else if (c === '"' || c === "'") { + instring = c; + } + else if (c.match(/[a-zA-Z_\$]/) && !invar.length) { + invar = c; + invarPos = i; + continue; + } + else if (c.match(/\W/) && invar.length) { + // TODO: Should check for possible spaces before dot + if (chars[invarPos - 1] !== "." && RESERVED_WORDS.indexOf(invar) < 0) { + if (!(invar in this.definedVariables)) { + invar = + WORD_REPLACEMENT[invar] || + (invar in this.variables && + this.formatExpression(this.variables[invar])) || + "context['" + invar + "']"; + } + } + r += invar; + invar = ""; + } + else if (invar.length) { + invar += c; + continue; + } + r += c; + } + const result = r.slice(0, -1); + return result; + } + } + //------------------------------------------------------------------------------ + // QWeb rendering engine + //------------------------------------------------------------------------------ + class QWeb { + constructor(data) { + this.templates = {}; + this.utils = UTILS; + if (data) { + this.loadTemplates(data); + } + } + static addDirective(directive) { + DIRECTIVES.push(directive); + DIRECTIVE_NAMES[directive.name] = 1; + DIRECTIVES.sort((d1, d2) => d1.priority - d2.priority); + if (directive.extraNames) { + directive.extraNames.forEach(n => (DIRECTIVE_NAMES[n] = 1)); + } + } + /** + * Add a template to the internal template map. Note that it is not + * immediately compiled. + */ + addTemplate(name, xmlString, allowDuplicates = false) { + if (name in this.templates && allowDuplicates) { + return; + } + const doc = parseXML(xmlString); + if (!doc.firstChild) { + throw new Error("Invalid template (should not be empty)"); + } + this._addTemplate(name, doc.firstChild); + } + _addTemplate(name, elem) { + if (name in this.templates) { + throw new Error(`Template ${name} already defined`); + } + this._processTemplate(elem); + const template = { + elem, + fn: (context, extra) => { + const compiledFunction = this._compile(name, elem); + template.fn = compiledFunction; + return compiledFunction.call(this, context, extra); + } + }; + this.templates[name] = template; + } + _processTemplate(elem) { + let tbranch = elem.querySelectorAll("[t-elif], [t-else]"); + for (let i = 0, ilen = tbranch.length; i < ilen; i++) { + let node = tbranch[i]; + let prevElem = node.previousElementSibling; + let pattr = function (name) { + return prevElem.getAttribute(name); + }; + let nattr = function (name) { + return +!!node.getAttribute(name); + }; + if (prevElem && (pattr("t-if") || pattr("t-elif"))) { + if (pattr("t-foreach")) { + throw new Error("t-if cannot stay at the same level as t-foreach when using t-elif or t-else"); + } + if (["t-if", "t-elif", "t-else"].map(nattr).reduce(function (a, b) { + return a + b; + }) > 1) { + throw new Error("Only one conditional branching directive is allowed per node"); + } + // All text nodes between branch nodes are removed + let textNode; + while ((textNode = node.previousSibling) !== prevElem) { + if (textNode.nodeValue.trim().length) { + throw new Error("text is not allowed between branching directives"); + } + textNode.remove(); + } + } + else { + throw new Error("t-elif and t-else directives must be preceded by a t-if or t-elif directive"); + } + } + } + /** + * Load templates from a xml (as a string). This will look up for the first + * tag, and will consider each child of this as a template, with + * the name given by the t-name attribute. + */ + loadTemplates(xmlstr) { + const doc = parseXML(xmlstr); + const templates = doc.getElementsByTagName("templates")[0]; + if (!templates) { + return; + } + for (let elem of templates.children) { + const name = elem.getAttribute("t-name"); + this._addTemplate(name, elem); + } + } + /** + * Render a template + * + * @param {string} name the template should already have been added + */ + render(name, context = {}, extra = null) { + const template = this.templates[name]; + if (!template) { + throw new Error(`Template ${name} does not exist`); + } + return template.fn.call(this, context, extra); + } + _compile(name, elem) { + const isDebug = elem.attributes.hasOwnProperty("t-debug"); + const ctx = new Context(name); + this._compileNode(elem, ctx); + if (ctx.shouldProtectContext) { + ctx.code.unshift(" context = Object.create(context);"); + } + if (ctx.shouldDefineOwner) { + // this is necessary to prevent some directives (t-forach for ex) to + // pollute the rendering context by adding some keys in it. + ctx.code.unshift(" let owner = context;"); + } + if (!ctx.rootNode) { + throw new Error("A template should have one root node"); + } + ctx.addLine(`return vn${ctx.rootNode};`); + let template; + try { + template = new Function("context", "extra", ctx.code.join("\n")); + } + catch (e) { + throw new Error(`Invalid generated code while compiling template '${ctx.templateName.replace(/`/g, "'")}': ${e.message}`); + } + if (isDebug) { + console.log(`Template: ${this.templates[name].elem.outerHTML}\nCompiled code:\n` + + template.toString()); + } + return template; + } + /** + * Generate code from an xml node + * + */ + _compileNode(node, ctx) { + if (!(node instanceof Element)) { + // this is a text node, there are no directive to apply + let text = node.textContent; + if (!ctx.inPreTag) { + if (lineBreakRE.test(text) && !text.trim()) { + return; + } + text = text.replace(whitespaceRE, " "); + } + if (ctx.parentNode) { + ctx.addLine(`c${ctx.parentNode}.push({text: \`${text}\`});`); + } + else { + // this is an unusual situation: this text node is the result of the + // template rendering. + let nodeID = ctx.generateID(); + ctx.addLine(`var vn${nodeID} = {text: \`${text}\`};`); + ctx.rootContext.rootNode = nodeID; + ctx.rootContext.parentNode = nodeID; + } + return; + } + const attributes = node.attributes; + const validDirectives = []; + let withHandlers = false; + // maybe this is not optimal: we iterate on all attributes here, and again + // just after for each directive. + for (let i = 0; i < attributes.length; i++) { + let attrName = attributes[i].name; + if (attrName.startsWith("t-")) { + let dName = attrName.slice(2).split("-")[0]; + if (!(dName in DIRECTIVE_NAMES)) { + throw new Error(`Unknown QWeb directive: '${attrName}'`); + } + } + } + for (let directive of DIRECTIVES) { + let fullName; + let value; + for (let i = 0; i < attributes.length; i++) { + const name = attributes[i].name; + if (name === "t-" + directive.name || + name.startsWith("t-" + directive.name + "-")) { + fullName = name; + value = attributes[i].textContent; + validDirectives.push({ directive, value, fullName }); + if (directive.name === "on") { + withHandlers = true; + } + } + } + } + for (let { directive, value, fullName } of validDirectives) { + if (directive.atNodeEncounter) { + const isDone = directive.atNodeEncounter({ + node, + qweb: this, + ctx, + fullName, + value + }); + if (isDone) { + return; + } + } + } + if (node.nodeName !== "t") { + let nodeID = this._compileGenericNode(node, ctx, withHandlers); + ctx = ctx.withParent(nodeID); + for (let { directive, value, fullName } of validDirectives) { + if (directive.atNodeCreation) { + directive.atNodeCreation({ + node, + qweb: this, + ctx, + fullName, + value, + nodeID + }); + } + } + } + if (node.nodeName === "pre") { + ctx = ctx.subContext("inPreTag", true); + } + this._compileChildren(node, ctx); + for (let { directive, value, fullName } of validDirectives) { + if (directive.finalize) { + directive.finalize({ node, qweb: this, ctx, fullName, value }); + } + } + } + _compileGenericNode(node, ctx, withHandlers = true) { + // nodeType 1 is generic tag + if (node.nodeType !== 1) { + throw new Error("unsupported node type"); + } + const attributes = node.attributes; + const attrs = []; + const props = []; + const tattrs = []; + function handleBooleanProps(key, val) { + let isProp = false; + if (node.nodeName === "input" && key === "checked") { + let type = node.getAttribute("type"); + if (type === "checkbox" || type === "radio") { + isProp = true; + } + } + if (node.nodeName === "option" && key === "selected") { + isProp = true; + } + if (key === "disabled" && DISABLED_TAGS.indexOf(node.nodeName) > -1) { + isProp = true; + } + if ((key === "readonly" && node.nodeName === "input") || + node.nodeName === "textarea") { + isProp = true; + } + if (isProp) { + props.push(`${key}: _${val}`); + } + } + for (let i = 0; i < attributes.length; i++) { + let name = attributes[i].name; + const value = attributes[i].textContent; + // regular attributes + if (!name.startsWith("t-") && + !node.getAttribute("t-attf-" + name)) { + const attID = ctx.generateID(); + ctx.addLine(`var _${attID} = '${value}';`); + if (!name.match(/^[a-zA-Z]+$/)) { + // attribute contains 'non letters' => we want to quote it + name = '"' + name + '"'; + } + attrs.push(`${name}: _${attID}`); + handleBooleanProps(name, attID); + } + // dynamic attributes + if (name.startsWith("t-att-")) { + let attName = name.slice(6); + let formattedValue = ctx.formatExpression(ctx.getValue(value)); + if (formattedValue[0] === "{" && + formattedValue[formattedValue.length - 1] === "}") { + formattedValue = `this.utils.objectToAttrString(${formattedValue})`; + } + const attID = ctx.generateID(); + if (!attName.match(/^[a-zA-Z]+$/)) { + // attribute contains 'non letters' => we want to quote it + attName = '"' + attName + '"'; + } + // we need to combine dynamic with non dynamic attributes: + // class="a" t-att-class="'yop'" should be rendered as class="a yop" + const attValue = node.getAttribute(attName); + if (attValue) { + const attValueID = ctx.generateID(); + ctx.addLine(`var _${attValueID} = ${formattedValue};`); + formattedValue = `'${attValue}' + (_${attValueID} ? ' ' + _${attValueID} : '')`; + const attrIndex = attrs.findIndex(att => att.startsWith(attName + ":")); + attrs.splice(attrIndex, 1); + } + ctx.addLine(`var _${attID} = ${formattedValue};`); + attrs.push(`${attName}: _${attID}`); + handleBooleanProps(attName, attID); + } + if (name.startsWith("t-attf-")) { + let attName = name.slice(7); + if (!attName.match(/^[a-zA-Z]+$/)) { + // attribute contains 'non letters' => we want to quote it + attName = '"' + attName + '"'; + } + const formattedExpr = value.replace(/\{\{.*?\}\}/g, s => "${" + ctx.formatExpression(s.slice(2, -2)) + "}"); + const attID = ctx.generateID(); + let staticVal = node.getAttribute(attName); + if (staticVal) { + ctx.addLine(`var _${attID} = '${staticVal} ' + \`${formattedExpr}\`;`); + } + else { + ctx.addLine(`var _${attID} = \`${formattedExpr}\`;`); + } + attrs.push(`${attName}: _${attID}`); + } + // t-att= attributes + if (name === "t-att") { + let id = ctx.generateID(); + ctx.addLine(`var _${id} = ${ctx.formatExpression(value)};`); + tattrs.push(id); + } + } + let nodeID = ctx.generateID(); + let nodeKey = node.getAttribute("t-key"); + if (nodeKey) { + nodeKey = ctx.formatExpression(nodeKey); + } + else { + nodeKey = nodeID; + } + const parts = [`key:${nodeKey}`]; + if (attrs.length + tattrs.length > 0) { + parts.push(`attrs:{${attrs.join(",")}}`); + } + if (props.length > 0) { + parts.push(`props:{${props.join(",")}}`); + } + if (withHandlers) { + parts.push(`on:{}`); + } + ctx.addLine(`var c${nodeID} = [], p${nodeID} = {${parts.join(",")}};`); + for (let id of tattrs) { + ctx.addIf(`_${id} instanceof Array`); + ctx.addLine(`p${nodeID}.attrs[_${id}[0]] = _${id}[1];`); + ctx.addElse(); + ctx.addLine(`for (let key in _${id}) {`); + ctx.indent(); + ctx.addLine(`p${nodeID}.attrs[key] = _${id}[key];`); + ctx.dedent(); + ctx.addLine(`}`); + ctx.closeIf(); + } + ctx.addLine(`var vn${nodeID} = h('${node.nodeName}', p${nodeID}, c${nodeID});`); + if (ctx.parentNode) { + ctx.addLine(`c${ctx.parentNode}.push(vn${nodeID});`); + } + return nodeID; + } + _compileChildren(node, ctx) { + if (node.childNodes.length > 0) { + for (let child of Array.from(node.childNodes)) { + this._compileNode(child, ctx); + } + } + } + } + + /** + * Owl QWeb Directives + * + * This file contains the implementation of most standard QWeb directives: + * - t-esc + * - t-raw + * - t-set/t-value + * - t-if/t-elif/t-else + * - t-call + * - t-foreach/t-as + * - t-debug + * - t-log + */ + //------------------------------------------------------------------------------ + // t-esc and t-raw + //------------------------------------------------------------------------------ + UTILS.getFragment = function (str) { + const temp = document.createElement("template"); + temp.innerHTML = str; + return temp.content; + }; + function compileValueNode(value, node, qweb, ctx) { + if (value === "0" && ctx.caller) { + qweb._compileNode(ctx.caller, ctx); + return; + } + if (typeof value === "string") { + let exprID = value; + if (!(value in ctx.definedVariables)) { + exprID = `_${ctx.generateID()}`; + ctx.addLine(`var ${exprID} = ${ctx.formatExpression(value)};`); + } + ctx.addIf(`${exprID} || ${exprID} === 0`); + if (!ctx.parentNode) { + throw new Error("Should not have a text node without a parent"); + } + if (ctx.escaping) { + ctx.addLine(`c${ctx.parentNode}.push({text: ${exprID}});`); + } + else { + let fragID = ctx.generateID(); + ctx.addLine(`var frag${fragID} = this.utils.getFragment(${exprID})`); + let tempNodeID = ctx.generateID(); + ctx.addLine(`var p${tempNodeID} = {hook: {`); + ctx.addLine(` insert: n => n.elm.parentNode.replaceChild(frag${fragID}, n.elm),`); + ctx.addLine(`}};`); + ctx.addLine(`var vn${tempNodeID} = h('div', p${tempNodeID})`); + ctx.addLine(`c${ctx.parentNode}.push(vn${tempNodeID});`); + } + if (node.childNodes.length) { + ctx.addElse(); + qweb._compileChildren(node, ctx); + } + ctx.closeIf(); + return; + } + if (value instanceof NodeList) { + for (let node of Array.from(value)) { + qweb._compileNode(node, ctx); + } + } + } + QWeb.addDirective({ + name: "esc", + priority: 70, + atNodeEncounter({ node, qweb, ctx }) { + if (node.nodeName !== "t") { + let nodeID = qweb._compileGenericNode(node, ctx); + ctx = ctx.withParent(nodeID); + } + let value = ctx.getValue(node.getAttribute("t-esc")); + compileValueNode(value, node, qweb, ctx.subContext("escaping", true)); + return true; + } + }); + QWeb.addDirective({ + name: "raw", + priority: 80, + atNodeEncounter({ node, qweb, ctx }) { + if (node.nodeName !== "t") { + let nodeID = qweb._compileGenericNode(node, ctx); + ctx = ctx.withParent(nodeID); + } + let value = ctx.getValue(node.getAttribute("t-raw")); + compileValueNode(value, node, qweb, ctx); + return true; + } + }); + //------------------------------------------------------------------------------ + // t-set + //------------------------------------------------------------------------------ + QWeb.addDirective({ + name: "set", + extraNames: ["value"], + priority: 60, + atNodeEncounter({ node, ctx }) { + const variable = node.getAttribute("t-set"); + let value = node.getAttribute("t-value"); + if (value) { + const formattedValue = ctx.formatExpression(value); + if (ctx.variables.hasOwnProperty(variable)) { + ctx.addLine(`${ctx.variables[variable]} = ${formattedValue}`); + } + else { + const varName = `_${ctx.generateID()}`; + ctx.addLine(`var ${varName} = ${formattedValue};`); + ctx.definedVariables[varName] = formattedValue; + ctx.variables[variable] = varName; + } + } + else { + ctx.variables[variable] = node.childNodes; + } + return true; + } + }); + //------------------------------------------------------------------------------ + // t-if, t-elif, t-else + //------------------------------------------------------------------------------ + QWeb.addDirective({ + name: "if", + priority: 20, + atNodeEncounter({ node, ctx }) { + let cond = ctx.getValue(node.getAttribute("t-if")); + ctx.addIf(`${ctx.formatExpression(cond)}`); + return false; + }, + finalize({ ctx }) { + ctx.closeIf(); + } + }); + QWeb.addDirective({ + name: "elif", + priority: 30, + atNodeEncounter({ node, ctx }) { + let cond = ctx.getValue(node.getAttribute("t-elif")); + ctx.addLine(`else if (${ctx.formatExpression(cond)}) {`); + ctx.indent(); + return false; + }, + finalize({ ctx }) { + ctx.closeIf(); + } + }); + QWeb.addDirective({ + name: "else", + priority: 40, + atNodeEncounter({ ctx }) { + ctx.addLine(`else {`); + ctx.indent(); + return false; + }, + finalize({ ctx }) { + ctx.closeIf(); + } + }); + //------------------------------------------------------------------------------ + // t-call + //------------------------------------------------------------------------------ + QWeb.addDirective({ + name: "call", + priority: 50, + atNodeEncounter({ node, qweb, ctx }) { + if (node.nodeName !== "t") { + throw new Error("Invalid tag for t-call directive (should be 't')"); + } + const subTemplate = node.getAttribute("t-call"); + const nodeTemplate = qweb.templates[subTemplate]; + if (!nodeTemplate) { + throw new Error(`Cannot find template "${subTemplate}" (t-call)`); + } + const nodeCopy = node.cloneNode(true); + nodeCopy.removeAttribute("t-call"); + // extract variables from nodecopy + const tempCtx = new Context(); + tempCtx.nextID = ctx.rootContext.nextID; + qweb._compileNode(nodeCopy, tempCtx); + const vars = Object.assign({}, ctx.variables, tempCtx.variables); + var definedVariables = Object.assign({}, ctx.definedVariables, tempCtx.definedVariables); + ctx.rootContext.nextID = tempCtx.nextID; + // open new scope, if necessary + const hasNewVariables = Object.keys(definedVariables).length > 0; + if (hasNewVariables) { + ctx.addLine("{"); + ctx.indent(); + } + // add new variables, if any + for (let key in definedVariables) { + ctx.addLine(`let ${key} = ${definedVariables[key]}`); + } + // compile sub template + const subCtx = ctx + .subContext("caller", nodeCopy) + .subContext("variables", Object.create(vars)) + .subContext("definedVariables", Object.create(definedVariables)); + qweb._compileNode(nodeTemplate.elem, subCtx); + // close new scope + if (hasNewVariables) { + ctx.dedent(); + ctx.addLine("}"); + } + return true; + } + }); + //------------------------------------------------------------------------------ + // t-foreach + //------------------------------------------------------------------------------ + QWeb.addDirective({ + name: "foreach", + extraNames: ["as"], + priority: 10, + atNodeEncounter({ node, qweb, ctx }) { + ctx.rootContext.shouldProtectContext = true; + ctx = ctx.subContext("inLoop", true); + const elems = node.getAttribute("t-foreach"); + const name = node.getAttribute("t-as"); + let arrayID = ctx.generateID(); + ctx.addLine(`var _${arrayID} = ${ctx.formatExpression(elems)};`); + ctx.addLine(`if (!_${arrayID}) { throw new Error('QWeb error: Invalid loop expression')}`); + ctx.addLine(`if (typeof _${arrayID} === 'number') { _${arrayID} = Array.from(Array(_${arrayID}).keys())}`); + let keysID = ctx.generateID(); + ctx.addLine(`var _${keysID} = _${arrayID} instanceof Array ? _${arrayID} : Object.keys(_${arrayID});`); + let valuesID = ctx.generateID(); + ctx.addLine(`var _${valuesID} = _${arrayID} instanceof Array ? _${arrayID} : Object.values(_${arrayID});`); + ctx.addLine(`for (let i = 0; i < _${keysID}.length; i++) {`); + ctx.indent(); + ctx.addLine(`context.${name}_first = i === 0;`); + ctx.addLine(`context.${name}_last = i === _${keysID}.length - 1;`); + ctx.addLine(`context.${name}_parity = i % 2 === 0 ? 'even' : 'odd';`); + ctx.addLine(`context.${name}_index = i;`); + ctx.addLine(`context.${name} = _${keysID}[i];`); + ctx.addLine(`context.${name}_value = _${valuesID}[i];`); + const nodeCopy = node.cloneNode(true); + let shouldWarn = nodeCopy.tagName !== "t" && !nodeCopy.hasAttribute("t-key"); + if (!shouldWarn && node.tagName === "t") { + if (node.hasAttribute("t-widget") && !node.hasAttribute("t-key")) { + shouldWarn = true; + } + if (!shouldWarn && + node.children.length === 1 && + node.children[0].tagName !== "t" && + !node.children[0].hasAttribute("t-key")) { + shouldWarn = true; + } + } + if (shouldWarn) { + console.warn(`Directive t-foreach should always be used with a t-key! (in template: '${ctx.templateName}')`); + } + nodeCopy.removeAttribute("t-foreach"); + qweb._compileNode(nodeCopy, ctx); + ctx.dedent(); + ctx.addLine("}"); + return true; + } + }); + //------------------------------------------------------------------------------ + // t-debug + //------------------------------------------------------------------------------ + QWeb.addDirective({ + name: "debug", + priority: 99, + atNodeEncounter({ ctx }) { + ctx.addLine("debugger;"); + } + }); + //------------------------------------------------------------------------------ + // t-log + //------------------------------------------------------------------------------ + QWeb.addDirective({ + name: "log", + priority: 99, + atNodeEncounter({ ctx, value }) { + const expr = ctx.formatExpression(value); + ctx.addLine(`console.log(${expr})`); + } + }); + + /** + * Owl QWeb Extensions + * + * This file contains the implementation of non standard QWeb directives, added + * by Owl and that will only work on Owl projects: + * + * - t-on + * - t-ref + * - t-transition + * - t-widget/t-props/t-keepalive + */ + //------------------------------------------------------------------------------ + // t-on + //------------------------------------------------------------------------------ + QWeb.addDirective({ + name: "on", + priority: 90, + atNodeCreation({ ctx, fullName, value, nodeID }) { + ctx.rootContext.shouldDefineOwner = true; + const eventName = fullName.slice(5); + if (!eventName) { + throw new Error("Missing event name with t-on directive"); + } + let extraArgs; + let handler = value.replace(/\(.*\)/, function (args) { + extraArgs = args.slice(1, -1); + return ""; + }); + let error = `(function () {throw new Error('Missing handler \\'' + '${handler}' + \`\\' when evaluating template '${ctx.templateName.replace(/`/g, "'")}'\`)})()`; + if (extraArgs) { + ctx.addLine(`p${nodeID}.on['${eventName}'] = (context['${handler}'] || ${error}).bind(owner, ${ctx.formatExpression(extraArgs)});`); + } + else { + ctx.addLine(`extra.handlers['${eventName}' + ${nodeID}] = extra.handlers['${eventName}' + ${nodeID}] || (context['${handler}'] || ${error}).bind(owner);`); + ctx.addLine(`p${nodeID}.on['${eventName}'] = extra.handlers['${eventName}' + ${nodeID}];`); + } + } + }); + //------------------------------------------------------------------------------ + // t-ref + //------------------------------------------------------------------------------ + QWeb.addDirective({ + name: "ref", + priority: 95, + atNodeCreation({ ctx, nodeID, value }) { + const refKey = `ref${ctx.generateID()}`; + ctx.addLine(`const ${refKey} = ${ctx.formatExpression(value)}`); + ctx.addLine(`p${nodeID}.hook = { + create: (_, n) => context.refs[${refKey}] = n.elm, + };`); + } + }); + //------------------------------------------------------------------------------ + // t-transition + //------------------------------------------------------------------------------ + UTILS.nextFrame = function (cb) { + requestAnimationFrame(() => requestAnimationFrame(cb)); + }; + UTILS.transitionCreate = function (elm, name) { + elm.classList.add(name + "-enter"); + elm.classList.add(name + "-enter-active"); + }; + UTILS.transitionInsert = function (elm, name) { + const finalize = () => { + elm.classList.remove(name + "-enter-active"); + elm.classList.remove(name + "-enter-to"); + }; + this.nextFrame(() => { + elm.classList.remove(name + "-enter"); + elm.classList.add(name + "-enter-to"); + whenTransitionEnd(elm, finalize); + }); + }; + UTILS.transitionRemove = function (elm, name, rm) { + elm.classList.add(name + "-leave"); + elm.classList.add(name + "-leave-active"); + const finalize = () => { + elm.classList.remove(name + "-leave-active"); + elm.classList.remove(name + "-enter-to"); + rm(); + }; + this.nextFrame(() => { + elm.classList.remove(name + "-leave"); + elm.classList.add(name + "-leave-to"); + whenTransitionEnd(elm, finalize); + }); + }; + function getTimeout(delays, durations) { + /* istanbul ignore next */ + while (delays.length < durations.length) { + delays = delays.concat(delays); + } + return Math.max.apply(null, durations.map((d, i) => { + return toMs(d) + toMs(delays[i]); + })); + } + // Old versions of Chromium (below 61.0.3163.100) formats floating pointer numbers + // in a locale-dependent way, using a comma instead of a dot. + // If comma is not replaced with a dot, the input will be rounded down (i.e. acting + // as a floor function) causing unexpected behaviors + function toMs(s) { + return Number(s.slice(0, -1).replace(",", ".")) * 1000; + } + function whenTransitionEnd(elm, cb) { + const styles = window.getComputedStyle(elm); + const delays = (styles.transitionDelay || "").split(", "); + const durations = (styles.transitionDuration || "").split(", "); + const timeout = getTimeout(delays, durations); + if (timeout > 0) { + elm.addEventListener("transitionend", cb, { once: true }); + } + else { + cb(); + } + } + QWeb.addDirective({ + name: "transition", + priority: 96, + atNodeCreation({ ctx, value, nodeID }) { + let name = value; + ctx.addLine(`p${nodeID}.hook = { + create: (_, n) => { + this.utils.transitionCreate(n.elm, '${name}'); + }, + insert: vn => { + this.utils.transitionInsert(vn.elm, '${name}'); + }, + remove: (vn, rm) => { + this.utils.transitionRemove(vn.elm, '${name}', rm); + } + };`); + } + }); + //------------------------------------------------------------------------------ + // t-widget + //------------------------------------------------------------------------------ + QWeb.addDirective({ + name: "widget", + extraNames: ["props", "keepalive"], + priority: 100, + atNodeEncounter({ ctx, value, node }) { + ctx.addLine("//WIDGET"); + ctx.rootContext.shouldDefineOwner = true; + let props = node.getAttribute("t-props"); + let keepAlive = node.getAttribute("t-keepalive") ? true : false; + // t-on- events... + const events = []; + const attributes = node.attributes; + for (let i = 0; i < attributes.length; i++) { + const name = attributes[i].name; + if (name.startsWith("t-on-")) { + events.push([name.slice(5), attributes[i].textContent]); + } + } + let key = node.getAttribute("t-key"); + if (key) { + key = ctx.formatExpression(key); + } + if (props) { + props = ctx.formatExpression(props); + } + let dummyID = ctx.generateID(); + let defID = ctx.generateID(); + let widgetID = ctx.generateID(); + let keyID = key && ctx.generateID(); + if (key) { + // we bind a variable to the key (could be a complex expression, so we + // want to evaluate it only once) + ctx.addLine(`let key${keyID} = ${key};`); + } + ctx.addLine(`let _${dummyID}_index = c${ctx.parentNode}.length;`); + ctx.addLine(`c${ctx.parentNode}.push(null);`); + ctx.addLine(`let def${defID};`); + let templateID = key + ? `key${keyID}` + : ctx.inLoop + ? `String(-${widgetID} - i)` + : String(widgetID); + ctx.addLine(`let w${widgetID} = ${templateID} in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[${templateID}]] : false;`); + ctx.addLine(`let props${widgetID} = ${props || "{}"};`); + ctx.addLine(`let isNew${widgetID} = !w${widgetID};`); + // check if we can reuse current rendering promise + ctx.addIf(`w${widgetID} && w${widgetID}.__owl__.renderPromise`); + ctx.addIf(`w${widgetID}.__owl__.isStarted`); + ctx.addLine(`def${defID} = w${widgetID}._updateProps(props${widgetID}, extra.forceUpdate, extra.patchQueue);`); + ctx.addElse(); + ctx.addLine(`isNew${widgetID} = true`); + ctx.addIf(`props${widgetID} === w${widgetID}.__owl__.renderProps`); + ctx.addLine(`def${defID} = w${widgetID}.__owl__.renderPromise;`); + ctx.addElse(); + ctx.addLine(`w${widgetID}.destroy();`); + ctx.addLine(`w${widgetID} = false`); + ctx.closeIf(); + ctx.closeIf(); + ctx.closeIf(); + ctx.addIf(`!def${defID}`); + ctx.addIf(`w${widgetID}`); + ctx.addLine(`def${defID} = w${widgetID}._updateProps(props${widgetID}, extra.forceUpdate, extra.patchQueue);`); + ctx.addElse(); + ctx.addLine(`w${widgetID} = new context.widgets['${value}'](owner, props${widgetID});`); + ctx.addLine(`context.__owl__.cmap[${templateID}] = w${widgetID}.__owl__.id;`); + for (let [event, method] of events) { + ctx.addLine(`w${widgetID}.on('${event}', owner, owner['${method}'])`); + } + ctx.addLine(`def${defID} = w${widgetID}._prepare();`); + ctx.closeIf(); + ctx.closeIf(); + let ref = node.getAttribute("t-ref"); + let refExpr = ""; + let refKey = ""; + if (ref) { + refKey = `ref${ctx.generateID()}`; + ctx.addLine(`const ${refKey} = ${ctx.formatExpression(ref)}`); + refExpr = `context.refs[${refKey}] = w${widgetID};`; + } + let finalizeWidgetCode = `w${widgetID}.${keepAlive ? "unmount" : "destroy"}()`; + if (ref) { + finalizeWidgetCode += `;delete context.refs[${refKey}]`; + } + let createHook = ""; + let classAttr = node.getAttribute("class"); + let tattClass = node.getAttribute("t-att-class"); + let styleAttr = node.getAttribute("style"); + let tattStyle = node.getAttribute("t-att-style"); + if (tattStyle) { + const attVar = `_${ctx.generateID()}`; + ctx.addLine(`const ${attVar} = ${ctx.formatExpression(tattStyle)};`); + tattStyle = attVar; + } + let updateClassCode = ""; + if (classAttr || tattClass || styleAttr || tattStyle) { + let classCode = ""; + if (classAttr) { + classCode = + classAttr + .split(" ") + .map(c => `vn.elm.classList.add('${c}')`) + .join(";") + ";"; + } + if (tattClass) { + const attVar = `_${ctx.generateID()}`; + ctx.addLine(`const ${attVar} = ${ctx.formatExpression(tattClass)};`); + classCode = `for (let k in ${attVar}) { + if (${attVar}[k]) { + vn.elm.classList.add(k); + } + }`; + updateClassCode = `let cl=w${widgetID}.el.classList;for (let k in ${attVar}) {if (${attVar}[k]) {cl.add(k)} else {cl.remove(k)}}`; + } + const styleExpr = tattStyle || (styleAttr ? `'${styleAttr}'` : false); + const styleCode = styleExpr ? `vn.elm.style = ${styleExpr}` : ""; + createHook = `vnode.data.hook = {create(_, vn){${classCode}${styleCode}}};`; + } + ctx.addIf(`isNew${widgetID}`); + ctx.addLine(`def${defID} = def${defID}.then(vnode=>{${createHook}let pvnode=h(vnode.sel, {key: ${templateID}});c${ctx.parentNode}[_${dummyID}_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w${widgetID}._mount(vnode, vn.elm);pvnode.elm=nvn.elm;${refExpr}},remove(){${finalizeWidgetCode}},destroy(){${finalizeWidgetCode}}}; w${widgetID}.__owl__.pvnode = pvnode;});`); + ctx.addElse(); + ctx.addLine(`def${defID} = def${defID}.then(()=>{if (w${widgetID}.__owl__.isDestroyed) {return};${tattStyle ? `w${widgetID}.el.style=${tattStyle};` : ""}${updateClassCode}let vnode;if (!w${widgetID}.__owl__.vnode){vnode=w${widgetID}.__owl__.pvnode} else { vnode=h(w${widgetID}.__owl__.vnode.sel, {key: ${templateID}});vnode.elm=w${widgetID}.el;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w${widgetID}.el,a.elm);a.elm=w${widgetID}.el;w${widgetID}.__mount();},remove(){${finalizeWidgetCode}}, destroy() {${finalizeWidgetCode}}}}c${ctx.parentNode}[_${dummyID}_index]=vnode;});`); + ctx.closeIf(); + ctx.addLine(`extra.promises.push(def${defID});`); + if (node.hasAttribute("t-if") || node.hasAttribute("t-else")) { + ctx.closeIf(); + } + return true; + } + }); + + class Store extends EventBus { + constructor(config, options = {}) { + super(); + this._commitLevel = 0; + this.history = []; + this.debug = options.debug || false; + this.state = config.state || {}; + this.actions = config.actions; + this.mutations = config.mutations; + this.env = config.env; + this.observer = new Observer(); + this.observer.notifyCB = this.trigger.bind(this, "update"); + this.observer.allowMutations = false; + this.observer.observe(this.state); + this.getters = {}; + if (this.debug) { + this.history.push({ state: this.state }); + } + this.set = this.observer.set.bind(this.observer); + for (let entry of Object.entries(config.getters || {})) { + const name = entry[0]; + const func = entry[1]; + this.getters[name] = payload => { + return func({ state: this.state, getters: this.getters }, payload); + }; + } + } + dispatch(action, payload) { + if (!this.actions[action]) { + throw new Error(`[Error] action ${action} is undefined`); + } + const result = this.actions[action]({ + commit: this.commit.bind(this), + dispatch: this.dispatch.bind(this), + env: this.env, + state: this.state, + getters: this.getters + }, payload); + if (result instanceof Promise) { + return new Promise((resolve, reject) => { + result.then(() => resolve()); + result.catch(reject); + }); + } + } + commit(type, payload) { + if (!this.mutations[type]) { + throw new Error(`[Error] mutation ${type} is undefined`); + } + this._commitLevel++; + this.observer.allowMutations = true; + const res = this.mutations[type].call(null, { + commit: this.commit.bind(this), + state: this.state, + set: this.set, + getters: this.getters + }, payload); + if (this._commitLevel === 1) { + this.observer.allowMutations = false; + if (this.debug) { + this.history.push({ + state: this.state, + mutation: type, + payload: payload + }); + } + } + this._commitLevel--; + return res; + } + } + //------------------------------------------------------------------------------ + // Connect function + //------------------------------------------------------------------------------ + function revNumber(o) { + if (o !== null && typeof o === "object" && o.__owl__) { + return o.__owl__.rev; + } + return 0; + } + function deepRevNumber(o) { + if (o !== null && typeof o === "object" && o.__owl__) { + return o.__owl__.deepRev; + } + return 0; + } + function connect(mapStateToProps, options = {}) { + let hashFunction = options.hashFunction || null; + if (!hashFunction) { + let deep = "deep" in options ? options.deep : true; + let defaultRevFunction = deep ? deepRevNumber : revNumber; + hashFunction = function ({ storeProps }, options) { + const { currentStoreProps } = options; + if ("__owl__" in storeProps) { + return defaultRevFunction(storeProps); + } + let hash = 0; + for (let key in storeProps) { + const val = storeProps[key]; + const hashVal = defaultRevFunction(val); + if (hashVal === 0) { + if (val !== currentStoreProps[key]) { + options.didChange = true; + } + } + else { + hash += hashVal; + } + } + return hash; + }; + } + return function (Comp) { + return class extends Comp { + constructor(parent, props) { + const env = parent instanceof Component ? parent.env : parent; + const ownProps = Object.assign({}, props || {}); + const storeProps = mapStateToProps(env.store.state, ownProps, env.store.getters); + const mergedProps = Object.assign({}, props || {}, storeProps); + super(parent, mergedProps); + this.__owl__.ownProps = ownProps; + this.__owl__.currentStoreProps = storeProps; + this.__owl__.storeHash = hashFunction({ + state: env.store.state, + storeProps: storeProps, + revNumber, + deepRevNumber + }, { + currentStoreProps: storeProps + }); + } + /** + * We do not use the mounted hook here for a subtle reason: we want the + * updates to be called for the parents before the children. However, + * if we use the mounted hook, this will be done in the reverse order. + */ + _callMounted() { + this.env.store.on("update", this, this._checkUpdate); + super._callMounted(); + } + willUnmount() { + this.env.store.off("update", this); + super.willUnmount(); + } + _checkUpdate() { + const ownProps = this.__owl__.ownProps; + const storeProps = mapStateToProps(this.env.store.state, ownProps, this.env.store.getters); + const options = { + currentStoreProps: this.__owl__.currentStoreProps + }; + const storeHash = hashFunction({ + state: this.env.store.state, + storeProps: storeProps, + revNumber, + deepRevNumber + }, options); + let didChange = options.didChange; + if (storeHash !== this.__owl__.storeHash) { + didChange = true; + this.__owl__.storeHash = storeHash; + } + if (didChange) { + this.__owl__.currentStoreProps = storeProps; + this._updateProps(ownProps, false); + } + } + _updateProps(nextProps, forceUpdate, patchQueue) { + if (this.__owl__.ownProps !== nextProps) { + this.__owl__.currentStoreProps = mapStateToProps(this.env.store.state, nextProps, this.env.store.getters); + } + this.__owl__.ownProps = nextProps; + const mergedProps = Object.assign({}, nextProps, this.__owl__.currentStoreProps); + return super._updateProps(mergedProps, forceUpdate, patchQueue); + } + }; + }; + } + + /** + * This file is the main file packaged by rollup (see rollup.config.js). From + * this file, we export all public owl elements. + * + * Note that dynamic values, such as a date or a commit hash are added by rollup + */ + const utils = _utils; + + exports.utils = utils; + exports.Component = Component; + exports.EventBus = EventBus; + exports.Observer = Observer; + exports.QWeb = QWeb; + exports.connect = connect; + exports.Store = Store; + + exports._version = '0.10.0'; + exports._date = '2019-05-10T21:54:47.545Z'; + exports._hash = 'e04c5b1'; + exports._url = 'https://github.com/odoo/owl'; + +}(this.owl = this.owl || {})); diff --git a/extras/benchmarks/owl-0.10.0/templates.xml b/extras/benchmarks/owl-0.10.0/templates.xml new file mode 100644 index 00000000..351fd84f --- /dev/null +++ b/extras/benchmarks/owl-0.10.0/templates.xml @@ -0,0 +1,32 @@ + +
+
+
Number of msg:
+ + + + + + +
+
+
+ + + +
+
+
+ +
+ + + + +
+ +
+ +
+ + \ No newline at end of file diff --git a/extras/index.html b/extras/index.html index 2a74c608..fa28c167 100644 --- a/extras/index.html +++ b/extras/index.html @@ -17,6 +17,7 @@
  • OWL 0.7.0
  • OWL 0.8.0
  • OWL 0.9.0
    • +
  • OWL 0.10.0
  • OWL Master
  • Vue
  • React