NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] owl: update library, and update examples

Browse Source
This commit is contained in:
Géry Debongnie
2019-04-16 17:37:17 +02:00
parent 050a4e5f3e
commit 83a5baf9a9
3 changed files with 77 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/owl.js
+58 -104
View File
@@ -802,7 +802,7 @@
} }
} }
var utils = /*#__PURE__*/Object.freeze({ var _utils = /*#__PURE__*/Object.freeze({
escape: escape, escape: escape,
htmlTrim: htmlTrim, htmlTrim: htmlTrim,
idGenerator: idGenerator, 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 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 = { const WORD_REPLACEMENT = {
@@ -1831,11 +1814,16 @@
const variable = node.getAttribute("t-set"); const variable = node.getAttribute("t-set");
let value = node.getAttribute("t-value"); let value = node.getAttribute("t-value");
if (value) { if (value) {
const varName = `_${ctx.generateID()}`;
const formattedValue = ctx.formatExpression(value); const formattedValue = ctx.formatExpression(value);
ctx.addLine(`var ${varName} = ${formattedValue}`); if (ctx.variables.hasOwnProperty(variable)) {
ctx.definedVariables[varName] = formattedValue; ctx.addLine(`${ctx.variables[variable]} = ${formattedValue}`);
ctx.variables[variable] = varName; }
else {
const varName = `_${ctx.generateID()}`;
ctx.addLine(`var ${varName} = ${formattedValue};`);
ctx.definedVariables[varName] = formattedValue;
ctx.variables[variable] = varName;
}
} }
else { else {
ctx.variables[variable] = node.childNodes; ctx.variables[variable] = node.childNodes;
@@ -2078,35 +2066,44 @@
} }
}; };
/** const methodsToPatch = [
* The registry is basically a simple hashmap. It is only a little safer and "push",
* more structured than a simple object. "pop",
*/ "shift",
class Registry { "unshift",
constructor() { "splice",
this.map = {}; "sort",
} "reverse"
/** ];
* Add an element to the registry. Note that the add method returns the const ArrayProto = Array.prototype;
* registry, to it can be chained. const ModifiedArrayProto = Object.create(ArrayProto);
*/ for (let method of methodsToPatch) {
add(key, item) { const initialMethod = ArrayProto[method];
if (key in this.map) { ModifiedArrayProto[method] = function (...args) {
throw new Error(`Key ${key} already exists!`); 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; if (inserted) {
return this; for (let elem of inserted) {
} this.__observer__.observe(elem, this);
/** }
* Returns the element corresponding to the key }
* return initialMethod.call(this, ...args);
* Nothing is done to check that the key actually exists. };
*/
get(key) {
return this.map[key];
}
} }
function makeObserver() { function makeObserver() {
const observer = { const observer = {
rev: 1, rev: 1,
@@ -2152,48 +2149,11 @@
addProp(obj, key, obj[key]); 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) { function observeArr(arr, parent) {
arr.__owl__ = { rev: 1, deepRev: 1, parent }; arr.__owl__ = { rev: 1, deepRev: 1, parent };
Object.defineProperty(arr, "__owl__", { enumerable: false }); 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++) { for (let i = 0; i < arr.length; i++) {
observe(arr[i], arr); observe(arr[i], arr);
} }
@@ -2396,24 +2356,18 @@
}; };
} }
const core = { const utils = _utils;
QWeb,
EventBus,
Component,
PureComponent,
utils
};
const extras = {
Store,
connect,
Registry
};
exports.core = core; exports.utils = utils;
exports.extras = extras; exports.Component = Component;
exports.EventBus = EventBus;
exports.QWeb = QWeb;
exports.connect = connect;
exports.Store = Store;
exports._version = '0.6.0'; exports._version = '0.6.0';
exports._date = '2019-04-16T12:48:20.169Z'; exports._date = '2019-04-16T15:27:25.412Z';
exports._hash = '0ca4cc1'; exports._hash = 'e19540f';
exports._url = 'https://github.com/odoo/owl';
}(this.owl = this.owl || {})); }(this.owl = this.owl || {}));
src/app.js
+2 -2
View File
@@ -1,6 +1,6 @@
import { SAMPLES } from "./samples.js"; import { SAMPLES } from "./samples.js";
const { QWeb, Component } = owl.core; const { QWeb, Component } = owl;
const MODES = { const MODES = {
js: "ace/mode/javascript", js: "ace/mode/javascript",
@@ -157,7 +157,7 @@ class App extends Component {
async runCode() { async runCode() {
// check templates // check templates
var qweb = new owl.core.QWeb(); var qweb = new owl.QWeb();
var error = false; var error = false;
try { try {
qweb.loadTemplates(this.state.xml); qweb.loadTemplates(this.state.xml);
src/samples.js
+17 -18
View File
@@ -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() { constructor() {
super(...arguments); super(...arguments);
this.template = "demo.hello"; this.template = "demo.hello";
@@ -8,8 +8,8 @@ class HelloWorld extends Component {
} }
const qweb = new QWeb(TEMPLATES); const qweb = new QWeb(TEMPLATES);
const hello = new HelloWorld({qweb}, { name: "World" }); const app = new App({qweb}, { name: "World" });
hello.mount(document.body); app.mount(document.body);
`; `;
const HELLO_WORLD_XML = `<templates> const HELLO_WORLD_XML = `<templates>
@@ -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 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 { class HelloWorld extends Component {
template = "demo.hello"; template = "demo.hello";
@@ -34,7 +34,7 @@ const qweb = new QWeb(TEMPLATES);
const hello = new HelloWorld({qweb}, { name: "World" }); const hello = new HelloWorld({qweb}, { name: "World" });
hello.mount(document.body);`; 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) { function HelloWorld(env, props) {
var obj = new Component(env, props); var obj = new Component(env, props);
@@ -63,7 +63,7 @@ const HELLO_WORLD_ES5_XML = `<templates>
</div> </div>
</templates>`; </templates>`;
const WIDGET_COMPOSITION = `class Counter extends owl.core.Component { const WIDGET_COMPOSITION = `class Counter extends owl.Component {
constructor(parent, props) { constructor(parent, props) {
super(parent, props); super(parent, props);
this.template="counter"; 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() { constructor() {
super(...arguments); super(...arguments);
this.template="app"; this.template="app";
@@ -86,7 +86,7 @@ class App extends owl.core.Component {
} }
const env = { const env = {
qweb: new owl.core.QWeb(TEMPLATES) qweb: new owl.QWeb(TEMPLATES)
}; };
const app = new App(env); const app = new App(env);
@@ -105,7 +105,7 @@ const WIDGET_COMPOSITION_XML = `<templates>
</div> </div>
</templates>`; </templates>`;
const LIFECYCLE_DEMO = `const { Component, QWeb } = owl.core; const LIFECYCLE_DEMO = `const { Component, QWeb } = owl;
class HookWidget extends Component { class HookWidget extends Component {
constructor() { constructor() {
@@ -196,7 +196,7 @@ for (let i = 1; i < 16000; i++) {
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Counter Widget // Counter Widget
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
class Counter extends owl.core.Component { class Counter extends owl.Component {
constructor(parent, props) { constructor(parent, props) {
super(parent, props); super(parent, props);
this.template = "counter"; this.template = "counter";
@@ -213,7 +213,7 @@ class Counter extends owl.core.Component {
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Message Widget // Message Widget
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
class Message extends owl.core.Component { class Message extends owl.Component {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.template = "message"; this.template = "message";
@@ -230,7 +230,7 @@ class Message extends owl.core.Component {
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Root Widget // Root Widget
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
class App extends owl.core.Component { class App extends owl.Component {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.template = "root"; this.template = "root";
@@ -263,7 +263,7 @@ class App extends owl.core.Component {
// Application initialization // Application initialization
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
const env = { const env = {
qweb: new owl.core.QWeb(TEMPLATES) qweb: new owl.QWeb(TEMPLATES)
}; };
const app = new App(env); const app = new App(env);
@@ -355,8 +355,7 @@ const BENCHMARK_APP_XML = `<templates>
</templates>`; </templates>`;
const STATE_MANAGEMENT = `const { Component, QWeb } = owl.core; const STATE_MANAGEMENT = `const { Component, QWeb, Store, connect } = owl;
const { Store, connect } = owl.extras;
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Store Definition // 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 { class SubWidget extends Component {
constructor() { constructor() {
@@ -530,7 +529,7 @@ const RESPONSIVE_CSS = `.info {
margin: 30px; margin: 30px;
}`; }`;
const EMPTY = `const {Component, QWeb} = owl.core; const EMPTY = `const {Component, QWeb} = owl;
class Widget extends Component { class Widget extends Component {
} }