diff --git a/doc/learning/environment.md b/doc/learning/environment.md index 8da07aa5..2882032a 100644 --- a/doc/learning/environment.md +++ b/doc/learning/environment.md @@ -20,29 +20,28 @@ create a test environment with mock services. For example: - ```js async function myEnv() { - const templates = await loadTemplates(); - const qweb = new QWeb({templates}); - const session = getSession(); + const templates = await loadTemplates(); + const qweb = new QWeb({ templates }); + const session = getSession(); - return { - _t: myTranslateFunction, - session: session, - qweb: qweb, - services: { - localStorage: localStorage, - rpc: rpc, - }, - debug: false, - inMobileMode: true, - }; + return { + _t: myTranslateFunction, + session: session, + qweb: qweb, + services: { + localStorage: localStorage, + rpc: rpc + }, + debug: false, + inMobileMode: true + }; } async function start() { - owl.config.env = await myEnv(); - const app = new App(); - await app.mount(document.body); + owl.config.env = await myEnv(); + const app = new App(); + await app.mount(document.body); } -``` \ No newline at end of file +``` diff --git a/doc/readme.md b/doc/readme.md index 72e3b2b4..6958e6de 100644 --- a/doc/readme.md +++ b/doc/readme.md @@ -1,6 +1,7 @@ # 🦉 OWL Documentation 🦉 ## Reference + - [Animations](reference/animations.md) - [Component](reference/component.md) - [Configuration](reference/config.md) @@ -43,7 +44,7 @@ and `EventBus` is exported as `owl.core.EventBus`): ``` Component misc -Context AsyncRoot +Context AsyncRoot QWeb router Store Link useState RouteComponent @@ -70,4 +71,3 @@ hooks loadJS ``` Note that for convenience, the `useState` hook is also exported at the root of the `owl` object. - diff --git a/doc/reference/config.md b/doc/reference/config.md index 5d151539..8bddf307 100644 --- a/doc/reference/config.md +++ b/doc/reference/config.md @@ -1,7 +1,7 @@ # 🦉 Config 🦉 -The Owl framework is designed to work in many situations. However, it is -sometimes necessary to customize some behaviour. This is done by using the +The Owl framework is designed to work in many situations. However, it is +sometimes necessary to customize some behaviour. This is done by using the global `config` object. It currently has two keys: - [`mode`](#mode), diff --git a/doc/reference/environment.md b/doc/reference/environment.md index 40e6aa10..fa4932b6 100644 --- a/doc/reference/environment.md +++ b/doc/reference/environment.md @@ -15,4 +15,3 @@ Note: some additional information can be found here: - [What should go into an environment?](../learning/environment.md) - [Customizing an environment](config.md#env) - diff --git a/src/component/component.ts b/src/component/component.ts index b8a4039a..50d0d1f4 100644 --- a/src/component/component.ts +++ b/src/component/component.ts @@ -115,15 +115,16 @@ export class Component { Component.current = this; const id: number = nextId++; + let constr = this.constructor as any; let depth; if (parent) { - const defaultProps = (this.constructor).defaultProps; + const defaultProps = constr.defaultProps; if (defaultProps) { props = this.__applyDefaultProps(props, defaultProps); } this.props = props; if (QWeb.dev) { - QWeb.utils.validateProps(this.constructor, this.props); + QWeb.utils.validateProps(constr, this.props); } this.env = parent.env; const __powl__ = parent.__owl__; @@ -153,7 +154,7 @@ export class Component { } const qweb = this.env.qweb; - + const template = constr.template || this.__getTemplate(qweb); this.__owl__ = { id: id, depth: depth, @@ -173,7 +174,7 @@ export class Component { willStartCB: null, willUpdatePropsCB: null, observer: null, - renderFn: qweb.render.bind(qweb, this.__getTemplate(qweb)), + renderFn: qweb.render.bind(qweb, template), classObj: null, refs: null }; @@ -543,22 +544,18 @@ export class Component { __getTemplate(qweb: QWeb): string { let p = (this).constructor; if (!p.hasOwnProperty("_template")) { - if (p.template) { - p._template = p.template; - } else { - // 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 - // one of its subclass). + // 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 + // one of its subclass). - let template: string; - while ((template = p.name) && !(template in qweb.templates) && p !== Component) { - p = p.__proto__; - } - if (p === Component) { - throw new Error(`Could not find template for component "${this.constructor.name}"`); - } else { - p._template = template; - } + let template: string; + while ((template = p.name) && !(template in qweb.templates) && p !== Component) { + p = p.__proto__; + } + if (p === Component) { + throw new Error(`Could not find template for component "${this.constructor.name}"`); + } else { + p._template = template; } } return p._template; diff --git a/src/config.ts b/src/config.ts index 5deac5c4..e667d136 100644 --- a/src/config.ts +++ b/src/config.ts @@ -26,5 +26,5 @@ Object.defineProperty(config, "mode", { } else { console.log(`Owl is now running in 'prod' mode.`); } - }, + } }); diff --git a/tests/component/props_validation.test.ts b/tests/component/props_validation.test.ts index 8da25451..a9d1ced8 100644 --- a/tests/component/props_validation.test.ts +++ b/tests/component/props_validation.test.ts @@ -121,7 +121,7 @@ describe("props validation", () => { expect(error.message).toBe(`Missing props 'p' (component '_a')`); error = undefined; - props = {p: test.ok}; + props = { p: test.ok }; try { const p = new Parent(); await p.mount(fixture); @@ -130,7 +130,7 @@ describe("props validation", () => { } expect(error).toBeUndefined(); - props = {p: test.ko}; + props = { p: test.ko }; try { const p = new Parent(); await p.mount(fixture); @@ -178,7 +178,7 @@ describe("props validation", () => { expect(error.message).toBe(`Missing props 'p' (component '_a')`); error = undefined; - props = {p: test.ok}; + props = { p: test.ok }; try { const p = new Parent(); await p.mount(fixture); @@ -187,7 +187,7 @@ describe("props validation", () => { } expect(error).toBeUndefined(); - props = {p: test.ko}; + props = { p: test.ko }; try { const p = new Parent(); await p.mount(fixture); @@ -203,14 +203,14 @@ describe("props validation", () => { class TestWidget extends Component { static template = xml`
hey
`; static props = { p: [String, Boolean] }; - }; + } class Parent extends Component { static template = xml`
`; static components = { TestWidget }; get p() { return props.p; } - }; + } let error; let props; @@ -247,14 +247,14 @@ describe("props validation", () => { class TestWidget extends Component { static template = xml`
hey
`; static props = { p: { type: String, optional: true } }; - }; + } class Parent extends Component { static template = xml`
`; static components = { TestWidget }; get p() { return props.p; } - }; + } let error; let props; @@ -291,14 +291,14 @@ describe("props validation", () => { class TestWidget extends Component { static template = xml`
hey
`; static props = { p: { type: Array, element: String } }; - }; + } class Parent extends Component { static template = xml`
`; static components = { TestWidget }; get p() { return props.p; } - }; + } let error; let props; @@ -343,7 +343,7 @@ describe("props validation", () => { class TestWidget extends Component { static template = xml`
hey
`; static props = { p: { type: Array, element: [String, Boolean] } }; - }; + } class Parent extends Component { static template = xml`
`; static components = { TestWidget }; @@ -398,7 +398,7 @@ describe("props validation", () => { static props = { p: { type: Object, shape: { id: Number, url: String } } }; - }; + } class Parent extends Component { static template = xml`
`; static components = { TestWidget }; @@ -461,7 +461,7 @@ describe("props validation", () => { } } }; - }; + } class Parent extends Component { static template = xml`
`; static components = { TestWidget }; @@ -677,7 +677,7 @@ describe("default props", () => { const w = new Parent(); await w.mount(fixture); - expect(fixture.innerHTML).toBe('
4
'); + expect(fixture.innerHTML).toBe("
4
"); }); test("default values are also set whenever component is updated", async () => {