[REF] component: small improvement

and run prettier
This commit is contained in:
Géry Debongnie
2019-10-31 21:28:35 +01:00
parent 05a678c039
commit 534152eff7
7 changed files with 53 additions and 58 deletions
+2 -3
View File
@@ -20,7 +20,6 @@ create a test environment with mock services.
For example: For example:
```js ```js
async function myEnv() { async function myEnv() {
const templates = await loadTemplates(); const templates = await loadTemplates();
@@ -33,10 +32,10 @@ async function myEnv() {
qweb: qweb, qweb: qweb,
services: { services: {
localStorage: localStorage, localStorage: localStorage,
rpc: rpc, rpc: rpc
}, },
debug: false, debug: false,
inMobileMode: true, inMobileMode: true
}; };
} }
+1 -1
View File
@@ -1,6 +1,7 @@
# 🦉 OWL Documentation 🦉 # 🦉 OWL Documentation 🦉
## Reference ## Reference
- [Animations](reference/animations.md) - [Animations](reference/animations.md)
- [Component](reference/component.md) - [Component](reference/component.md)
- [Configuration](reference/config.md) - [Configuration](reference/config.md)
@@ -70,4 +71,3 @@ hooks loadJS
``` ```
Note that for convenience, the `useState` hook is also exported at the root of the `owl` object. Note that for convenience, the `useState` hook is also exported at the root of the `owl` object.
-1
View File
@@ -15,4 +15,3 @@ Note: some additional information can be found here:
- [What should go into an environment?](../learning/environment.md) - [What should go into an environment?](../learning/environment.md)
- [Customizing an environment](config.md#env) - [Customizing an environment](config.md#env)
+5 -8
View File
@@ -115,15 +115,16 @@ export class Component<T extends Env, Props extends {}> {
Component.current = this; Component.current = this;
const id: number = nextId++; const id: number = nextId++;
let constr = this.constructor as any;
let depth; let depth;
if (parent) { if (parent) {
const defaultProps = (<any>this.constructor).defaultProps; const defaultProps = constr.defaultProps;
if (defaultProps) { if (defaultProps) {
props = this.__applyDefaultProps(props, defaultProps); props = this.__applyDefaultProps(props, defaultProps);
} }
this.props = <Props>props; this.props = <Props>props;
if (QWeb.dev) { if (QWeb.dev) {
QWeb.utils.validateProps(this.constructor, this.props); QWeb.utils.validateProps(constr, this.props);
} }
this.env = parent.env; this.env = parent.env;
const __powl__ = parent.__owl__; const __powl__ = parent.__owl__;
@@ -153,7 +154,7 @@ export class Component<T extends Env, Props extends {}> {
} }
const qweb = this.env.qweb; const qweb = this.env.qweb;
const template = constr.template || this.__getTemplate(qweb);
this.__owl__ = { this.__owl__ = {
id: id, id: id,
depth: depth, depth: depth,
@@ -173,7 +174,7 @@ export class Component<T extends Env, Props extends {}> {
willStartCB: null, willStartCB: null,
willUpdatePropsCB: null, willUpdatePropsCB: null,
observer: null, observer: null,
renderFn: qweb.render.bind(qweb, this.__getTemplate(qweb)), renderFn: qweb.render.bind(qweb, template),
classObj: null, classObj: null,
refs: null refs: null
}; };
@@ -543,9 +544,6 @@ export class Component<T extends Env, Props extends {}> {
__getTemplate(qweb: QWeb): string { __getTemplate(qweb: QWeb): string {
let p = (<any>this).constructor; let p = (<any>this).constructor;
if (!p.hasOwnProperty("_template")) { if (!p.hasOwnProperty("_template")) {
if (p.template) {
p._template = p.template;
} else {
// here, the component and none of its superclasses defines a static `template` // here, the component and none of its superclasses defines a static `template`
// key. So we fall back on looking for a template matching its name (or // key. So we fall back on looking for a template matching its name (or
// one of its subclass). // one of its subclass).
@@ -560,7 +558,6 @@ export class Component<T extends Env, Props extends {}> {
p._template = template; p._template = template;
} }
} }
}
return p._template; return p._template;
} }
async __prepareAndRender(fiber: Fiber) { async __prepareAndRender(fiber: Fiber) {
+1 -1
View File
@@ -26,5 +26,5 @@ Object.defineProperty(config, "mode", {
} else { } else {
console.log(`Owl is now running in 'prod' mode.`); console.log(`Owl is now running in 'prod' mode.`);
} }
}, }
}); });
+10 -10
View File
@@ -203,14 +203,14 @@ describe("props validation", () => {
class TestWidget extends Component<any, any> { class TestWidget extends Component<any, any> {
static template = xml`<div>hey</div>`; static template = xml`<div>hey</div>`;
static props = { p: [String, Boolean] }; static props = { p: [String, Boolean] };
}; }
class Parent extends Component<any, any> { class Parent extends Component<any, any> {
static template = xml`<div><TestWidget p="p"/></div>`; static template = xml`<div><TestWidget p="p"/></div>`;
static components = { TestWidget }; static components = { TestWidget };
get p() { get p() {
return props.p; return props.p;
} }
}; }
let error; let error;
let props; let props;
@@ -247,14 +247,14 @@ describe("props validation", () => {
class TestWidget extends Component<any, any> { class TestWidget extends Component<any, any> {
static template = xml`<div>hey</div>`; static template = xml`<div>hey</div>`;
static props = { p: { type: String, optional: true } }; static props = { p: { type: String, optional: true } };
}; }
class Parent extends Component<any, any> { class Parent extends Component<any, any> {
static template = xml`<div><TestWidget p="p"/></div>`; static template = xml`<div><TestWidget p="p"/></div>`;
static components = { TestWidget }; static components = { TestWidget };
get p() { get p() {
return props.p; return props.p;
} }
}; }
let error; let error;
let props; let props;
@@ -291,14 +291,14 @@ describe("props validation", () => {
class TestWidget extends Component<any, any> { class TestWidget extends Component<any, any> {
static template = xml`<div>hey</div>`; static template = xml`<div>hey</div>`;
static props = { p: { type: Array, element: String } }; static props = { p: { type: Array, element: String } };
}; }
class Parent extends Component<any, any> { class Parent extends Component<any, any> {
static template = xml`<div><TestWidget p="p"/></div>`; static template = xml`<div><TestWidget p="p"/></div>`;
static components = { TestWidget }; static components = { TestWidget };
get p() { get p() {
return props.p; return props.p;
} }
}; }
let error; let error;
let props; let props;
@@ -343,7 +343,7 @@ describe("props validation", () => {
class TestWidget extends Component<any, any> { class TestWidget extends Component<any, any> {
static template = xml`<div>hey</div>`; static template = xml`<div>hey</div>`;
static props = { p: { type: Array, element: [String, Boolean] } }; static props = { p: { type: Array, element: [String, Boolean] } };
}; }
class Parent extends Component<any, any> { class Parent extends Component<any, any> {
static template = xml`<div><TestWidget p="p"/></div>`; static template = xml`<div><TestWidget p="p"/></div>`;
static components = { TestWidget }; static components = { TestWidget };
@@ -398,7 +398,7 @@ describe("props validation", () => {
static props = { static props = {
p: { type: Object, shape: { id: Number, url: String } } p: { type: Object, shape: { id: Number, url: String } }
}; };
}; }
class Parent extends Component<any, any> { class Parent extends Component<any, any> {
static template = xml`<div><TestWidget p="p"/></div>`; static template = xml`<div><TestWidget p="p"/></div>`;
static components = { TestWidget }; static components = { TestWidget };
@@ -461,7 +461,7 @@ describe("props validation", () => {
} }
} }
}; };
}; }
class Parent extends Component<any, any> { class Parent extends Component<any, any> {
static template = xml`<div><TestWidget p="p"/></div>`; static template = xml`<div><TestWidget p="p"/></div>`;
static components = { TestWidget }; static components = { TestWidget };
@@ -677,7 +677,7 @@ describe("default props", () => {
const w = new Parent(); const w = new Parent();
await w.mount(fixture); await w.mount(fixture);
expect(fixture.innerHTML).toBe('<div><div>4</div></div>'); expect(fixture.innerHTML).toBe("<div><div>4</div></div>");
}); });
test("default values are also set whenever component is updated", async () => { test("default values are also set whenever component is updated", async () => {