diff --git a/doc/learning/how_to_debug.md b/doc/learning/how_to_debug.md
index bdebd812..bf50648c 100644
--- a/doc/learning/how_to_debug.md
+++ b/doc/learning/how_to_debug.md
@@ -41,4 +41,3 @@ Each component has an internal `id`, which is very useful when debugging.
Note that it is certainly useful to run this code at some point in an application,
just to get a feel of what each user action implies, for the framework.
-
diff --git a/doc/learning/overview.md b/doc/learning/overview.md
index 71e99b96..1ef8cd70 100644
--- a/doc/learning/overview.md
+++ b/doc/learning/overview.md
@@ -1,6 +1,5 @@
# 🦉 Quick Overview 🦉
-
Owl components in an application are used to define a (dynamic) tree of components.
```
@@ -110,7 +109,10 @@ class Parent extends Component {
line="line" />
`;
static components = { OrderLine };
- orders = useState([{ id: 1, name: "Coffee", quantity: 0 }, { id: 2, name: "Tea", quantity: 0 }]);
+ orders = useState([
+ { id: 1, name: "Coffee", quantity: 0 },
+ { id: 2, name: "Tea", quantity: 0 }
+ ]);
addToOrder(event) {
const line = event.detail.line;
diff --git a/doc/learning/quick_start.md b/doc/learning/quick_start.md
index 7d921985..236773a9 100644
--- a/doc/learning/quick_start.md
+++ b/doc/learning/quick_start.md
@@ -9,16 +9,16 @@
## Overview
-Each software project has its specific needs. Many of these needs can be solved
+Each software project has its specific needs. Many of these needs can be solved
with some tooling: `webpack`, `gulp`, css preprocessor, bundlers, transpilers, ...
-Because of that, it is usually not simple to just start a project. Some
-frameworks provide their own tooling to help with that. But then, you have to
+Because of that, it is usually not simple to just start a project. Some
+frameworks provide their own tooling to help with that. But then, you have to
integrate and learn how these applications work.
Owl is designed to be used with no tooling at all. Because of that, Owl can
-"easily" be integrated in a modern build toolchain. In this section, we will
-discuss a few different setups to start a project. Each of these setups has
+"easily" be integrated in a modern build toolchain. In this section, we will
+discuss a few different setups to start a project. Each of these setups has
advantages and disadvantages in different situations.
## Simple html file
@@ -74,8 +74,7 @@ whenReady(setup);
Now, simply loading this html file in a browser should display a welcome message.
This setup is not fancy, but it is extremely simple. There are no tooling at
-all required. It can be slightly optimized by using the minified build of Owl.
-
+all required. It can be slightly optimized by using the minified build of Owl.
## With a static server
@@ -87,7 +86,7 @@ variables and we lose autocompletion across files.
There is a low tech solution to this issue: using native javascript modules.
This however has a requirement: for security reasons, browsers will not accept
-modules on content served through the `file` protocol. This means that we need
+modules on content served through the `file` protocol. This means that we need
to use a static server.
Let us start a new project with the following file structure:
@@ -101,7 +100,6 @@ hello_owl/
owl.js
```
-
As previously, the file `owl.js` can be downloaded from the last release published at
[https://github.com/odoo/owl/releases](https://github.com/odoo/owl/releases).
@@ -130,10 +128,9 @@ const { Component } = owl;
const { xml } = owl.tags;
export class App extends Component {
- static template = xml`
Hello Owl
`;
+ static template = xml`
Hello Owl
`;
}
-
// main.js ---------------------------------------------------------------------
import { App } from "./app.js";
@@ -145,11 +142,11 @@ function setup() {
owl.utils.whenReady(setup);
```
-The `main.js` file import the `app.js` file. Note that the import statement has
-a `.js` suffix, which is important. Most text editor can understand this syntax
+The `main.js` file import the `app.js` file. Note that the import statement has
+a `.js` suffix, which is important. Most text editor can understand this syntax
and will provide autocompletion.
-Now, to execute this code, we need to serve the `src` folder statically. A low
+Now, to execute this code, we need to serve the `src` folder statically. A low
tech way to do that is to use for example the python `SimpleHTTPServer` feature:
```
@@ -180,18 +177,16 @@ that, we can add the following `package.json` file at the root of the project:
We can now install the `serve` tool with the command `npm install`, and then,
start a static server with the simple `npm run serve` command.
-
## Standard Javascript project
The previous setup works, and is certainly good for some usecases, including
-quick prototyping. However, it lacks some useful features, such as livereload,
+quick prototyping. However, it lacks some useful features, such as livereload,
a test suite, or bundling the code in a single file.
Each of these features, and many others, can be done in many different ways.
Since it is really not trivial to configure such a project, we provide here an
example that can be used as a starting point.
-
Our standard Owl project has the following file structure:
```
@@ -244,7 +239,6 @@ export class App extends Component {
}
}
-
// src/main.js -----------------------------------------------------------------
import { utils } from "@odoo/owl";
import { App } from "./components/App";
@@ -256,7 +250,6 @@ function setup() {
utils.whenReady(setup);
-
// tests/components/App.test.js ------------------------------------------------
import { App } from "../../src/components/App";
import { makeTestFixture, nextTick, click } from "../helpers";
@@ -283,16 +276,13 @@ describe("App", () => {
});
});
-
// tests/helpers.js ------------------------------------------------------------
import { Component } from "@odoo/owl";
import "regenerator-runtime/runtime";
export async function nextTick() {
return new Promise(function(resolve) {
- setTimeout(() =>
- Component.scheduler.requestAnimationFrame(() => resolve())
- );
+ setTimeout(() => Component.scheduler.requestAnimationFrame(() => resolve()));
});
}
@@ -347,9 +337,7 @@ dist/
"@odoo/owl": "^1.0.4"
},
"babel": {
- "plugins": [
- "@babel/plugin-proposal-class-properties"
- ],
+ "plugins": ["@babel/plugin-proposal-class-properties"],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
@@ -359,9 +347,7 @@ dist/
"jest": {
"verbose": false,
"testRegex": "(/tests/.*(test|spec))\\.js?$",
- "moduleFileExtensions": [
- "js"
- ],
+ "moduleFileExtensions": ["js"],
"transform": {
"^.+\\.[t|j]sx?$": "babel-jest"
}
diff --git a/doc/readme.md b/doc/readme.md
index d5d5491c..a15fa2dd 100644
--- a/doc/readme.md
+++ b/doc/readme.md
@@ -46,9 +46,7 @@ which cannot be considered either a tutorial, or reference documentation.
- [Comparison with React/Vue](miscellaneous/comparison.md)
- [Why did Odoo built Owl?](miscellaneous/why_owl.md)
-
---
Found an issue in the documentation? A broken link? Some outdated information?
Please open an issue or submit a PR!
-
diff --git a/src/component/component.ts b/src/component/component.ts
index cc90440f..93fa3ec7 100644
--- a/src/component/component.ts
+++ b/src/component/component.ts
@@ -46,7 +46,7 @@ interface MountOptions {
* useful to typecheck and describe the internal keys used by Owl to manage the
* component tree.
*/
-interface Internal {
+interface Internal {
// each component has a unique id, useful mostly to handle parent/child
// relationships
readonly id: number;
@@ -58,8 +58,8 @@ interface Internal {
// parent and children keys are obviously useful to setup the parent-children
// relationship.
- parent: Component | null;
- children: { [key: number]: Component };
+ parent: Component | null;
+ children: { [key: number]: Component };
// children mapping: from templateID to componentID. templateID identifies a
// place in a template. The t-component directive needs it to be able to get
// the component instance back whenever the template is rerendered.
@@ -85,7 +85,7 @@ interface Internal {
willStartCB: Function | null;
willUpdatePropsCB: Function | null;
classObj: { [key: string]: boolean } | null;
- refs: { [key: string]: Component | HTMLElement | undefined } | null;
+ refs: { [key: string]: Component | HTMLElement | undefined } | null;
}
export const portalSymbol = Symbol("portal"); // FIXME
@@ -95,11 +95,11 @@ export const portalSymbol = Symbol("portal"); // FIXME
//------------------------------------------------------------------------------
let nextId = 1;
-export class Component {
- readonly __owl__: Internal;
+export class Component {
+ readonly __owl__: Internal;
static template?: string | null = null;
static _template?: string | null = null;
- static current: Component | null = null;
+ static current: Component | null = null;
static components = {};
static props?: any;
static defaultProps?: any;
@@ -130,7 +130,7 @@ export class Component {
* hand. Other components should be created automatically by the framework (with
* the t-component directive in a template)
*/
- constructor(parent?: Component | null, props?: Props) {
+ constructor(parent?: Component | null, props?: Props) {
Component.current = this;
let constr = this.constructor as any;
@@ -441,7 +441,7 @@ export class Component {
* Note that it does not call the __callWillUnmount method to avoid visiting
* all children many times.
*/
- __destroy(parent: Component | null) {
+ __destroy(parent: Component | null) {
const __owl__ = this.__owl__;
const isMounted = __owl__.isMounted;
if (isMounted) {
@@ -501,7 +501,7 @@ export class Component {
* Private trigger method, allows to choose the component which triggered
* the event in the first place
*/
- __trigger(component: Component, eventType: string, payload?: any) {
+ __trigger(component: Component, eventType: string, payload?: any) {
if (this.el) {
const ev = new OwlEvent(component, eventType, {
bubbles: true,
diff --git a/src/component/fiber.ts b/src/component/fiber.ts
index 0de55ef9..40beda9f 100644
--- a/src/component/fiber.ts
+++ b/src/component/fiber.ts
@@ -50,7 +50,7 @@ export class Fiber {
scope: any;
- component: Component;
+ component: Component;
vnode: VNode | null = null;
root: Fiber;
@@ -61,7 +61,7 @@ export class Fiber {
error?: Error;
- constructor(parent: Fiber | null, component: Component, force, inserter) {
+ constructor(parent: Fiber | null, component: Component, force: boolean, inserter) {
this.component = component;
this.force = force;
this.inserter = inserter;
diff --git a/src/context.ts b/src/context.ts
index 5a9f6b7c..ffe4e088 100644
--- a/src/context.ts
+++ b/src/context.ts
@@ -100,11 +100,11 @@ export class Context extends EventBus {
* to context state changes. The `useContext` method returns the context state
*/
export function useContext(ctx: Context): any {
- const component: Component = Component.current!;
+ const component: Component = Component.current!;
return useContextWithCB(ctx, component, component.render.bind(component));
}
-export function useContextWithCB(ctx: Context, component: Component, method): any {
+export function useContextWithCB(ctx: Context, component: Component, method): any {
const __owl__ = component.__owl__;
const id = __owl__.id;
const mapping = ctx.mapping;
diff --git a/src/core/owl_event.ts b/src/core/owl_event.ts
index 85573152..2a37a51f 100644
--- a/src/core/owl_event.ts
+++ b/src/core/owl_event.ts
@@ -7,7 +7,7 @@ import { Component } from "../component/component";
*/
export class OwlEvent extends CustomEvent {
- originalComponent: Component;
+ originalComponent: Component;
constructor(component, eventType, options) {
super(eventType, options);
this.originalComponent = component;
diff --git a/src/hooks.ts b/src/hooks.ts
index 6b06591a..259194a2 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -22,7 +22,7 @@ import { Observer } from "./core/observer";
* trigger a rerendering of the current component.
*/
export function useState(state: T): T {
- const component: Component = Component.current!;
+ const component: Component = Component.current!;
const __owl__ = component.__owl__;
if (!__owl__.observer) {
__owl__.observer = new Observer();
@@ -37,7 +37,7 @@ export function useState(state: T): T {
function makeLifecycleHook(method: string, reverse: boolean = false) {
if (reverse) {
return function(cb) {
- const component: Component = Component.current!;
+ const component: Component = Component.current!;
if (component.__owl__[method]) {
const current = component.__owl__[method];
component.__owl__[method] = function() {
@@ -50,7 +50,7 @@ function makeLifecycleHook(method: string, reverse: boolean = false) {
};
} else {
return function(cb) {
- const component: Component = Component.current!;
+ const component: Component = Component.current!;
if (component.__owl__[method]) {
const current = component.__owl__[method];
component.__owl__[method] = function() {
@@ -66,7 +66,7 @@ function makeLifecycleHook(method: string, reverse: boolean = false) {
function makeAsyncHook(method: string) {
return function(cb) {
- const component: Component = Component.current!;
+ const component: Component = Component.current!;
if (component.__owl__[method]) {
const current = component.__owl__[method];
component.__owl__[method] = function(...args) {
@@ -96,7 +96,7 @@ export const onWillUpdateProps = makeAsyncHook("willUpdatePropsCB");
*/
interface Ref {
el: HTMLElement | null;
- comp: Component | null;
+ comp: Component | null;
}
export function useRef(name: string): Ref {
@@ -111,7 +111,7 @@ export function useRef(name: string): Ref {
}
return null;
},
- get comp(): Component | null {
+ get comp(): Component | null {
const val = __owl__.refs && __owl__.refs[name];
return val instanceof Component ? val : null;
}
diff --git a/src/misc/async_root.ts b/src/misc/async_root.ts
index 604f582f..da4c4b9c 100644
--- a/src/misc/async_root.ts
+++ b/src/misc/async_root.ts
@@ -10,7 +10,7 @@ import { xml } from "../tags";
* from this coordination. This is the goal of the AsyncRoot component.
*/
-export class AsyncRoot extends Component {
+export class AsyncRoot extends Component {
static template = xml``;
async __updateProps(nextProps, parentFiber) {
diff --git a/src/misc/portal.ts b/src/misc/portal.ts
index c49af5d4..8b53c028 100644
--- a/src/misc/portal.ts
+++ b/src/misc/portal.ts
@@ -18,7 +18,11 @@ import { useSubEnv } from "../hooks";
* are re-triggered on an empty node located in the parent's DOM.
*/
-export class Portal extends Component {
+interface Props {
+ target: string;
+}
+
+export class Portal extends Component {
static template = xml``;
static props = {
target: {
@@ -43,7 +47,7 @@ export class Portal extends Component {
// represents the element that is moved somewhere else
portal: VNode | null = null;
// the target where we will move `portal`
- target: HTMLElement | null = null;
+ target: Element | null = null;
constructor(parent, props) {
super(parent, props);
@@ -158,7 +162,7 @@ export class Portal extends Component {
/**
* Override to set the env
*/
- __trigger(component: Component, eventType: string, payload?: any) {
+ __trigger(component: Component, eventType: string, payload?: any) {
const env = this.env;
this.env = this.parentEnv;
super.__trigger(component, eventType, payload);
diff --git a/src/router/link.ts b/src/router/link.ts
index 8885fa7e..f7edac9c 100644
--- a/src/router/link.ts
+++ b/src/router/link.ts
@@ -4,7 +4,7 @@ import { Destination, RouterEnv } from "./router";
type Props = Destination;
-export class Link extends Component {
+export class Link extends Component {
static template = xml`
{
+export class RouteComponent extends Component {
static template = xml`
a === b;
export function useStore(selector, options: SelectorOptions = {}): any {
- const component: Component = Component.current!;
+ const component: Component = Component.current!;
const componentId = component.__owl__.id;
const store = options.store || (component.env.store as Store);
if (!(store instanceof Store)) {
diff --git a/tests/component/async.test.ts b/tests/component/async.test.ts
index 07f77a1d..c89113d3 100644
--- a/tests/component/async.test.ts
+++ b/tests/component/async.test.ts
@@ -25,7 +25,7 @@ afterEach(() => {
fixture.remove();
});
-function children(w: Component): Component[] {
+function children(w: Component): Component[] {
const childrenMap = w.__owl__.children;
return Object.keys(childrenMap).map(id => childrenMap[id]);
}
@@ -33,7 +33,7 @@ function children(w: Component): Component[] {
describe("async rendering", () => {
test("destroying a widget before start is over", async () => {
let def = makeDeferred();
- class W extends Component {
+ class W extends Component {
static template = xml``;
willStart(): Promise {
return def;
@@ -53,7 +53,7 @@ describe("async rendering", () => {
test("destroying/recreating a subwidget with different props (if start is not over)", async () => {
let def = makeDeferred();
let n = 0;
- class Child extends Component {
+ class Child extends Component {
static template = xml`child:`;
constructor(parent, props) {
super(parent, props);
@@ -63,7 +63,7 @@ describe("async rendering", () => {
return def;
}
}
- class W extends Component {
+ class W extends Component {
static template = xml`