From 83a5baf9a9da82b472edd789657e7f0761cdb077 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Tue, 16 Apr 2019 17:37:17 +0200 Subject: [PATCH] [IMP] owl: update library, and update examples --- libs/owl.js | 162 ++++++++++++++++++------------------------------- src/app.js | 4 +- src/samples.js | 35 ++++++----- 3 files changed, 77 insertions(+), 124 deletions(-) diff --git a/libs/owl.js b/libs/owl.js index b5d3cd46..b621abba 100644 --- a/libs/owl.js +++ b/libs/owl.js @@ -802,7 +802,7 @@ } } - var utils = /*#__PURE__*/Object.freeze({ + var _utils = /*#__PURE__*/Object.freeze({ escape: escape, htmlTrim: htmlTrim, idGenerator: idGenerator, @@ -1166,23 +1166,6 @@ } } } - class PureComponent extends Component { - shouldUpdate(nextProps) { - for (let k in nextProps) { - if (nextProps[k] !== this.props[k]) { - return true; - } - } - return false; - } - async updateState(nextState) { - for (let k in nextState) { - if (nextState[k] !== this.state[k]) { - return super.updateState(nextState); - } - } - } - } 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 = { @@ -1831,11 +1814,16 @@ const variable = node.getAttribute("t-set"); let value = node.getAttribute("t-value"); if (value) { - const varName = `_${ctx.generateID()}`; const formattedValue = ctx.formatExpression(value); - ctx.addLine(`var ${varName} = ${formattedValue}`); - ctx.definedVariables[varName] = formattedValue; - ctx.variables[variable] = varName; + 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; @@ -2078,35 +2066,44 @@ } }; - /** - * The registry is basically a simple hashmap. It is only a little safer and - * more structured than a simple object. - */ - class Registry { - constructor() { - this.map = {}; - } - /** - * Add an element to the registry. Note that the add method returns the - * registry, to it can be chained. - */ - add(key, item) { - if (key in this.map) { - throw new Error(`Key ${key} already exists!`); + 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) { + this.__observer__.rev++; + 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; } - this.map[key] = item; - return this; - } - /** - * Returns the element corresponding to the key - * - * Nothing is done to check that the key actually exists. - */ - get(key) { - return this.map[key]; - } + if (inserted) { + for (let elem of inserted) { + this.__observer__.observe(elem, this); + } + } + return initialMethod.call(this, ...args); + }; } - function makeObserver() { const observer = { rev: 1, @@ -2152,48 +2149,11 @@ addProp(obj, key, obj[key]); } } - const ArrayProto = Array.prototype; - const ModifiedArrayProto = Object.create(ArrayProto); - const methodsToPatch = [ - "push", - "pop", - "shift", - "unshift", - "splice", - "sort", - "reverse" - ]; - for (let method of methodsToPatch) { - const initialMethod = ArrayProto[method]; - ModifiedArrayProto[method] = function (...args) { - observer.rev++; - 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) { - observe(elem, this); - } - } - return initialMethod.call(this, ...args); - }; - } function observeArr(arr, parent) { arr.__owl__ = { rev: 1, deepRev: 1, parent }; Object.defineProperty(arr, "__owl__", { enumerable: false }); - arr.__proto__ = ModifiedArrayProto; + arr.__proto__ = Object.create(ModifiedArrayProto); + arr.__proto__.__observer__ = observer; for (let i = 0; i < arr.length; i++) { observe(arr[i], arr); } @@ -2396,24 +2356,18 @@ }; } - const core = { - QWeb, - EventBus, - Component, - PureComponent, - utils - }; - const extras = { - Store, - connect, - Registry - }; + const utils = _utils; - exports.core = core; - exports.extras = extras; + exports.utils = utils; + exports.Component = Component; + exports.EventBus = EventBus; + exports.QWeb = QWeb; + exports.connect = connect; + exports.Store = Store; exports._version = '0.6.0'; - exports._date = '2019-04-16T12:48:20.169Z'; - exports._hash = '0ca4cc1'; + exports._date = '2019-04-16T15:27:25.412Z'; + exports._hash = 'e19540f'; + exports._url = 'https://github.com/odoo/owl'; }(this.owl = this.owl || {})); diff --git a/src/app.js b/src/app.js index 0e90d804..71600deb 100644 --- a/src/app.js +++ b/src/app.js @@ -1,6 +1,6 @@ import { SAMPLES } from "./samples.js"; -const { QWeb, Component } = owl.core; +const { QWeb, Component } = owl; const MODES = { js: "ace/mode/javascript", @@ -157,7 +157,7 @@ class App extends Component { async runCode() { // check templates - var qweb = new owl.core.QWeb(); + var qweb = new owl.QWeb(); var error = false; try { qweb.loadTemplates(this.state.xml); diff --git a/src/samples.js b/src/samples.js index 9b412183..b3c53437 100644 --- a/src/samples.js +++ b/src/samples.js @@ -1,6 +1,6 @@ -const HELLO_WORLD = `const {Component, QWeb} = owl.core; +const HELLO_WORLD = `const {Component, QWeb} = owl; -class HelloWorld extends Component { +class App extends Component { constructor() { super(...arguments); this.template = "demo.hello"; @@ -8,8 +8,8 @@ class HelloWorld extends Component { } const qweb = new QWeb(TEMPLATES); -const hello = new HelloWorld({qweb}, { name: "World" }); -hello.mount(document.body); +const app = new App({qweb}, { name: "World" }); +app.mount(document.body); `; const HELLO_WORLD_XML = ` @@ -24,7 +24,7 @@ const HELLO_WORLD_CSS = `.hello { }`; const HELLO_WORLD_ESNEXT = `// This example will not work if your browser does not support ESNext Class Fields -const {Component, QWeb} = owl.core; +const {Component, QWeb} = owl; class HelloWorld extends Component { template = "demo.hello"; @@ -34,7 +34,7 @@ const qweb = new QWeb(TEMPLATES); const hello = new HelloWorld({qweb}, { name: "World" }); hello.mount(document.body);`; -const HELLO_WORLD_ES5 = `const { Component, QWeb } = owl.core; +const HELLO_WORLD_ES5 = `const { Component, QWeb } = owl; function HelloWorld(env, props) { var obj = new Component(env, props); @@ -63,7 +63,7 @@ const HELLO_WORLD_ES5_XML = ` `; -const WIDGET_COMPOSITION = `class Counter extends owl.core.Component { +const WIDGET_COMPOSITION = `class Counter extends owl.Component { constructor(parent, props) { super(parent, props); this.template="counter"; @@ -77,7 +77,7 @@ const WIDGET_COMPOSITION = `class Counter extends owl.core.Component { } } -class App extends owl.core.Component { +class App extends owl.Component { constructor() { super(...arguments); this.template="app"; @@ -86,7 +86,7 @@ class App extends owl.core.Component { } const env = { - qweb: new owl.core.QWeb(TEMPLATES) + qweb: new owl.QWeb(TEMPLATES) }; const app = new App(env); @@ -105,7 +105,7 @@ const WIDGET_COMPOSITION_XML = ` `; -const LIFECYCLE_DEMO = `const { Component, QWeb } = owl.core; +const LIFECYCLE_DEMO = `const { Component, QWeb } = owl; class HookWidget extends Component { constructor() { @@ -196,7 +196,7 @@ for (let i = 1; i < 16000; i++) { //------------------------------------------------------------------------------ // Counter Widget //------------------------------------------------------------------------------ -class Counter extends owl.core.Component { +class Counter extends owl.Component { constructor(parent, props) { super(parent, props); this.template = "counter"; @@ -213,7 +213,7 @@ class Counter extends owl.core.Component { //------------------------------------------------------------------------------ // Message Widget //------------------------------------------------------------------------------ -class Message extends owl.core.Component { +class Message extends owl.Component { constructor() { super(...arguments); this.template = "message"; @@ -230,7 +230,7 @@ class Message extends owl.core.Component { //------------------------------------------------------------------------------ // Root Widget //------------------------------------------------------------------------------ -class App extends owl.core.Component { +class App extends owl.Component { constructor() { super(...arguments); this.template = "root"; @@ -263,7 +263,7 @@ class App extends owl.core.Component { // Application initialization //------------------------------------------------------------------------------ const env = { - qweb: new owl.core.QWeb(TEMPLATES) + qweb: new owl.QWeb(TEMPLATES) }; const app = new App(env); @@ -355,8 +355,7 @@ const BENCHMARK_APP_XML = ` `; -const STATE_MANAGEMENT = `const { Component, QWeb } = owl.core; -const { Store, connect } = owl.extras; +const STATE_MANAGEMENT = `const { Component, QWeb, Store, connect } = owl; //------------------------------------------------------------------------------ // Store Definition @@ -461,7 +460,7 @@ const STATE_MANAGEMENT_CSS = `.action { } `; -const RESPONSIVE = `const { Component, QWeb, utils } = owl.core; +const RESPONSIVE = `const { Component, QWeb, utils } = owl; class SubWidget extends Component { constructor() { @@ -530,7 +529,7 @@ const RESPONSIVE_CSS = `.info { margin: 30px; }`; -const EMPTY = `const {Component, QWeb} = owl.core; +const EMPTY = `const {Component, QWeb} = owl; class Widget extends Component { }