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

[REF] store: remove connect function, add ConnectedComponent

Browse Source 
closes #238
closes #235
This commit is contained in:
Géry Debongnie
2019-07-12 15:22:14 +02:00
parent 591508e769
commit 545ceefc3d
5 changed files with 365 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doc/store.md
+26 -33
View File
@@ -89,7 +89,7 @@ mutation is not allowed (and should throw an error). Mutations are synchronous.
```js
const mutations = {
setLoginState({ state }, loginState) {
state.loginState = loginState;
state.loginState = loginState;
}
};
```
@@ -165,17 +165,16 @@ const getters = {
const post = store.getters.getPost(id);
```
Getters take *at most* one argument.
Getters take _at most_ one argument.
Note that getters are cached if they don't take any argument, or their argument
is a string or a number.
### Connecting a Component
By default, an Owl `Component` is not connected to any store. The `connect`
function is there to create sub Components that are connected versions of
Components.
At some point, we need a way to access the state in the store from a component.
By default, an Owl `Component` is not connected to any store. To do that, we
need to create a component inheriting from `OwlComponent`:
```javascript
const actions = {
@@ -193,19 +192,18 @@ const state = {
};
const store = new owl.Store({ state, actions, mutations });
class Counter extends owl.Component {
class Counter extends owl.ConnectedComponent {
static mapStoreToProps(state) {
return {
value: state.counter
};
}
increment() {
this.env.store.dispatch("increment");
}
}
function mapStoreToProps(state) {
return {
value: state.counter
};
}
const ConnectedCounter = owl.connect(Counter, mapStoreToProps);
const counter = new ConnectedCounter({ store, qweb });
const counter = new Counter({ store, qweb });
```
```xml
@@ -214,45 +212,40 @@ const counter = new ConnectedCounter({ store, qweb });
</button>
```
The arguments of `connect` are:
The `ConnectedComponent` class can be configured with the following fields:
- `Counter`: an owl `Component` to connect
- `mapStoreToProps`: a function that extracts the `props` of the Component
from the `state` of the `Store` and returns them as a dict
- `options`: dictionary of optional parameters that may contain
- `getStore`: a function that takes the `env` in arguments and returns an
instance of `Store` to connect to (if not given, connects to `env.store`)
- `hashFunction`: the function to use to detect changes in the state (if not
given, generates a function that uses revision numbers, incremented at
each state change)
- `deep`: [only useful if no hashFunction is given] if false, only watch
for top level state changes (true by default)
The `connect` function returns a sub class of the given `Component` which is
connected to the `store`.
from the `state` of the `Store` and returns them as a dict.
- `getStore`: a function that takes the `env` in arguments and returns an
instance of `Store` to connect to (if not given, connects to `env.store`)
- `hashFunction`: the function to use to detect changes in the state (if not
given, generates a function that uses revision numbers, incremented at
each state change)
- `deep` (boolean): [only useful if no hashFunction is given] if `false`, only watch
for top level state changes (`true` by default)
### Semantics
The `Store` and the `connect` function try to be smart and to optimize as much
as possible the rendering and update process. What is important to know is:
The `Store` and the `ConnectedComponent` try to be smart and to optimize as much
as possible the rendering and update process. What is important to know is:
- components are always updated in the order of their creation (so, parent
before children)
- they are updated only if they are in the DOM
- if a parent is asynchronous, the system will wait for it to complete its
update before updating other components.
- in general, updates are not coordinated. This is not a problem for synchronous
- in general, updates are not coordinated. This is not a problem for synchronous
components, but if there are many asynchronous components, this could lead to
a situation where some part of the UI is updated and other parts of the UI is
not updated.
### Good Practices
- avoid asynchronous components as much as possible. Asynchronous components
- avoid asynchronous components as much as possible. Asynchronous components
lead to situations where parts of the UI is not updated immediately.
- do not be afraid to connect many components, parent or children if needed. For
example, a `MessageList` component could get a list of ids in its `mapStoreToProps` and a `Message` component could get the data of its own
message
- since the `mapStoreToProps` function is called for each connected component,
for each state update, it is important to make sure that these functions are
as fast as possible.
as fast as possible.
src/index.ts
+1 -1
View File
@@ -15,7 +15,7 @@ import "./qweb_extensions";
import { QWeb } from "./qweb_core";
export { QWeb };
export { connect, Store } from "./store";
export { Store, ConnectedComponent } from "./store";
import * as _utils from "./utils";
export const __info__ = {};
src/store.ts
+110 -127
View File
@@ -7,7 +7,7 @@ import { Observer } from "./observer";
*
* We have here:
* - a Store class
* - a connect function
* - the ConnectedComponent class
*
* The Owl store is our answer to the problem of managing complex state across
* components. The main idea is that the store owns some state, allow external
@@ -185,139 +185,122 @@ function deepRevNumber<T extends Object>(o: T): number {
return 0;
}
type Constructor<T> = new (...args: any[]) => T;
interface EnvWithStore extends Env {
store: Store;
}
type HashFunction = (a: any, b: any) => number;
interface StoreOptions {
getStore?(Env): Store;
hashFunction?: HashFunction;
deep?: boolean;
}
export function connect<E extends EnvWithStore, P, S>(
Comp: Constructor<Component<E, P, S>>,
mapStoreToProps,
options: StoreOptions = <StoreOptions>{}
) {
let hashFunction = options.hashFunction || null;
const getStore = options.getStore || (env => env.store);
if (!hashFunction) {
let deep = "deep" in options ? options.deep : true;
let defaultRevFunction = deep ? deepRevNumber : revNumber;
hashFunction = function({ storeProps }, options) {
const { currentStoreProps } = options;
if ("__owl__" in storeProps) {
return defaultRevFunction(storeProps);
}
let hash = 0;
for (let key in storeProps) {
const val = storeProps[key];
const hashVal = defaultRevFunction(val);
if (hashVal === 0) {
if (val !== currentStoreProps[key]) {
options.didChange = true;
}
} else {
hash += hashVal;
}
}
return hash;
};
export class ConnectedComponent<T extends Env, P, S> extends Component<T, P, S> {
deep: boolean = true;
getStore(env) {
return env.store;
}
const Result = class extends Comp {
constructor(parent, props?: any) {
const env = parent instanceof Component ? parent.env : parent;
const store = getStore(env);
const ownProps = Object.assign({}, props || {});
const storeProps = mapStoreToProps(store.state, ownProps, store.getters);
const mergedProps = Object.assign({}, props || {}, storeProps);
super(parent, mergedProps);
(<any>this.__owl__).ownProps = ownProps;
(<any>this.__owl__).currentStoreProps = storeProps;
(<any>this.__owl__).store = store;
(<any>this.__owl__).storeHash = (<HashFunction>hashFunction)(
{
state: store.state,
storeProps: storeProps,
revNumber,
deepRevNumber
},
{
currentStoreProps: storeProps
hashFunction: HashFunction = ({ storeProps }, options) => {
let refFunction = this.deep ? deepRevNumber : revNumber;
if ("__owl__" in storeProps) {
return refFunction(storeProps);
}
const { currentStoreProps } = options;
let hash = 0;
for (let key in storeProps) {
const val = storeProps[key];
const hashVal = refFunction(val);
if (hashVal === 0) {
if (val !== currentStoreProps[key]) {
options.didChange = true;
}
);
}
/**
* We do not use the mounted hook here for a subtle reason: we want the
* updates to be called for the parents before the children. However,
* if we use the mounted hook, this will be done in the reverse order.
*/
__callMounted() {
(<any>this.__owl__).store.on("update", this, this.__checkUpdate);
super.__callMounted();
}
willUnmount() {
(<any>this.__owl__).store.off("update", this);
super.willUnmount();
}
async __checkUpdate(updateId) {
if (updateId === (<any>this.__owl__).currentUpdateId) {
return;
}
const ownProps = (<any>this.__owl__).ownProps;
const storeProps = mapStoreToProps(
(<any>this.__owl__).store.state,
ownProps,
(<any>this.__owl__).store.getters
);
const options: any = {
currentStoreProps: (<any>this.__owl__).currentStoreProps
};
const storeHash = (<HashFunction>hashFunction)(
{
state: (<any>this.__owl__).store.state,
storeProps: storeProps,
revNumber,
deepRevNumber
},
options
);
let didChange = options.didChange;
if (storeHash !== (<any>this.__owl__).storeHash) {
didChange = true;
(<any>this.__owl__).storeHash = storeHash;
}
if (didChange) {
(<any>this.__owl__).currentStoreProps = storeProps;
await this.__updateProps(ownProps, false);
} else {
hash += hashVal;
}
}
__updateProps(nextProps, forceUpdate, patchQueue?: any[]) {
const __owl__ = <any>this.__owl__;
__owl__.currentUpdateId = __owl__.store._updateId;
if (__owl__.ownProps !== nextProps) {
__owl__.currentStoreProps = mapStoreToProps(
__owl__.store.state,
nextProps,
__owl__.store.getters
);
}
__owl__.ownProps = nextProps;
const mergedProps = Object.assign({}, nextProps, __owl__.currentStoreProps);
return super.__updateProps(mergedProps, forceUpdate, patchQueue);
}
return hash;
};
// we assign here a unique name to the resulting anonymous class.
// this is necessary for Owl to be able to properly deduce templates.
// Otherwise, all connected components would have the same name, and then
// each component after the first will necessarily have the same template.
let name = `Connected${Comp.name}`;
Object.defineProperty(Result, "name", { value: name });
return Result;
static mapStoreToProps(storeState, ownProps, getters) {
return {};
}
constructor(parent, props?: any) {
super(parent, props);
const store = this.getStore(this.env);
const ownProps = Object.assign({}, props || {});
const storeProps = (<any>this.constructor).mapStoreToProps(
store.state,
ownProps,
store.getters
);
const mergedProps = Object.assign({}, props || {}, storeProps);
this.props = mergedProps;
(<any>this.__owl__).ownProps = ownProps;
(<any>this.__owl__).currentStoreProps = storeProps;
(<any>this.__owl__).store = store;
(<any>this.__owl__).storeHash = this.hashFunction(
{
state: store.state,
storeProps: storeProps,
revNumber,
deepRevNumber
},
{
currentStoreProps: storeProps
}
);
}
/**
* We do not use the mounted hook here for a subtle reason: we want the
* updates to be called for the parents before the children. However,
* if we use the mounted hook, this will be done in the reverse order.
*/
__callMounted() {
(<any>this.__owl__).store.on("update", this, this.__checkUpdate);
super.__callMounted();
}
willUnmount() {
(<any>this.__owl__).store.off("update", this);
super.willUnmount();
}
async __checkUpdate(updateId) {
if (updateId === (<any>this.__owl__).currentUpdateId) {
return;
}
const ownProps = (<any>this.__owl__).ownProps;
const storeProps = (<any>this.constructor).mapStoreToProps(
(<any>this.__owl__).store.state,
ownProps,
(<any>this.__owl__).store.getters
);
const options: any = {
currentStoreProps: (<any>this.__owl__).currentStoreProps
};
const storeHash = this.hashFunction(
{
state: (<any>this.__owl__).store.state,
storeProps: storeProps,
revNumber,
deepRevNumber
},
options
);
let didChange = options.didChange;
if (storeHash !== (<any>this.__owl__).storeHash) {
didChange = true;
(<any>this.__owl__).storeHash = storeHash;
}
if (didChange) {
(<any>this.__owl__).currentStoreProps = storeProps;
await this.__updateProps(ownProps, false);
}
}
__updateProps(nextProps, forceUpdate, patchQueue?: any[]) {
const __owl__ = <any>this.__owl__;
__owl__.currentUpdateId = __owl__.store._updateId;
if (__owl__.ownProps !== nextProps) {
__owl__.currentStoreProps = (<any>this.constructor).mapStoreToProps(
__owl__.store.state,
nextProps,
__owl__.store.getters
);
}
__owl__.ownProps = nextProps;
const mergedProps = Object.assign({}, nextProps, __owl__.currentStoreProps);
return super.__updateProps(mergedProps, forceUpdate, patchQueue);
}
}
tests/store.test.ts
+221 -308
View File
@@ -1,5 +1,5 @@
import { Component, Env } from "../src/component";
import { connect, Store } from "../src/store";
import { Store, ConnectedComponent } from "../src/store";
import { makeTestFixture, makeTestEnv, nextMicroTick, nextTick } from "./helpers";
import { Observer } from "../src";
@@ -561,18 +561,21 @@ describe("connecting a component to store", () => {
});
test("connecting a component works", async () => {
env.qweb.addTemplate(
"App",
`
<div>
env.qweb.addTemplates(`
<templates>
<div t-name="App">
<t t-foreach="props.todos" t-as="todo" >
<Todo msg="todo.msg" t-key="todo"/>
</t>
</div>`
);
env.qweb.addTemplate("Todo", `<span><t t-esc="props.msg"/></span>`);
class App extends Component<any, any, any> {
</div>
<span t-name="Todo"><t t-esc="props.msg"/></span>
</templates>
`);
class App extends ConnectedComponent<any, any, any> {
components = { Todo };
static mapStoreToProps(s) {
return { todos: s.todos };
}
}
class Todo extends Component<any, any, any> {}
const state = { todos: [] };
@@ -581,16 +584,9 @@ describe("connecting a component to store", () => {
state.todos.push({ msg });
}
};
function mapStoreToProps(s) {
return { todos: s.todos };
}
const TodoApp = connect(
App,
mapStoreToProps
);
const store = new Store({ state, mutations });
(<any>env).store = store;
const app = new TodoApp(env);
const app = new App(env);
await app.mount(fixture);
expect(fixture.innerHTML).toMatchSnapshot();
@@ -601,38 +597,35 @@ describe("connecting a component to store", () => {
});
test("deep and shallow connecting a component", async () => {
env.qweb.addTemplates(`
<templates>
<div t-name="App">
<span t-foreach="props.todos" t-as="todo" t-key="todo">
<t t-esc="todo.title"/>
</span>
</div>
</templates>
`);
const state = { todos: [{ title: "Kasteel" }] };
const mutations = {
edit({ state }, title) {
state.todos[0].title = title;
}
};
function mapStoreToProps(s) {
return { todos: s.todos };
}
const store = new Store({ state, mutations });
env.qweb.addTemplate(
"App",
`
<div>
<span t-foreach="props.todos" t-as="todo" t-key="todo">
<t t-esc="todo.title"/>
</span>
</div>`
);
class App extends Component<any, any, any> {}
class App extends ConnectedComponent<any, any, any> {
static mapStoreToProps(s) {
return { todos: s.todos };
}
}
class DeepTodoApp extends App {
deep = true;
}
class ShallowTodoApp extends App {
deep = false;
}
const DeepTodoApp = connect(
App,
mapStoreToProps,
{ deep: true }
);
const ShallowTodoApp = connect(
App,
mapStoreToProps,
{ deep: false }
);
(<any>env).store = store;
const deepTodoApp = new DeepTodoApp(env);
const shallowTodoApp = new ShallowTodoApp(env);
@@ -662,9 +655,6 @@ describe("connecting a component to store", () => {
<span t-name="Todo"><t t-esc="props.msg"/></span>
</templates>
`);
class App extends Component<any, any, any> {
components = { Todo };
}
class Todo extends Component<any, any, any> {}
(<any>env).store = new Store({});
@@ -676,17 +666,16 @@ describe("connecting a component to store", () => {
}
}
});
function mapStoreToProps(s) {
return { todos: s.todos };
}
const TodoApp = connect(
App,
mapStoreToProps,
{
getStore: () => store
class App extends ConnectedComponent<any, any, any> {
components = { Todo };
static mapStoreToProps(s) {
return { todos: s.todos };
}
);
const app = new TodoApp(env);
getStore() {
return store;
}
}
const app = new App(env);
await app.mount(fixture);
expect(fixture.innerHTML).toMatchSnapshot();
@@ -698,8 +687,18 @@ describe("connecting a component to store", () => {
test("connected child components with custom hooks", async () => {
let steps: any = [];
env.qweb.addTemplate("Child", `<div/>`);
class Child extends Component<any, any, any> {
env.qweb.addTemplates(`
<templates>
<div t-name="Parent">
<Child t-if="state.child" />
</div>
<div t-name="Child"/>
</templates>
`);
class Child extends ConnectedComponent<any, any, any> {
static mapStoreToProps(s) {
return s;
}
mounted() {
steps.push("child:mounted");
}
@@ -708,20 +707,8 @@ describe("connecting a component to store", () => {
}
}
const ConnectedChild = connect(
Child,
s => s
);
env.qweb.addTemplate(
"Parent",
`
<div>
<t t-if="state.child" t-component="ConnectedChild"/>
</div>`
);
class Parent extends Component<any, any, any> {
components = { ConnectedChild };
components = { Child };
constructor(env: Env) {
super(env);
@@ -741,7 +728,7 @@ describe("connecting a component to store", () => {
expect(steps).toEqual(["child:mounted", "child:willUnmount"]);
});
test("connect receives ownprops as second argument", async () => {
test("mapStoreToProps receives ownprops as second argument", async () => {
const state = { todos: [{ id: 1, text: "jupiler" }] };
let nextId = 2;
const mutations = {
@@ -751,38 +738,32 @@ describe("connecting a component to store", () => {
};
const store = new Store({ state, mutations });
env.qweb.addTemplate("TodoItem", `<span><t t-esc="props.text"/></span>`);
class TodoItem extends Component<any, any, any> {}
const ConnectedTodo = connect(
TodoItem,
(state, props) => {
env.qweb.addTemplates(`
<templates>
<span t-name="TodoItem"><t t-esc="props.text"/></span>
<div t-name="TodoList">
<t t-foreach="props.todos" t-as="todo">
<TodoItem id="todo.id" t-key="todo.id"/>
</t>
</div>
</templates>
`);
class TodoItem extends ConnectedComponent<any, any, any> {
static mapStoreToProps(state, props) {
const todo = state.todos.find(t => t.id === props.id);
return todo;
}
);
env.qweb.addTemplate(
"TodoList",
`<div>
<t t-foreach="props.todos" t-as="todo">
<ConnectedTodo id="todo.id" t-key="todo.id"/>
</t>
</div>`
);
class TodoList extends Component<any, any, any> {
components = { ConnectedTodo };
}
function mapStoreToProps(state) {
return { todos: state.todos };
class TodoList extends ConnectedComponent<any, any, any> {
components = { TodoItem };
static mapStoreToProps(state) {
return { todos: state.todos };
}
}
const ConnectedTodoList = connect(
TodoList,
mapStoreToProps
);
(<any>env).store = store;
const app = new ConnectedTodoList(env);
const app = new TodoList(env);
await app.mount(fixture);
expect(fixture.innerHTML).toBe("<div><span>jupiler</span></div>");
@@ -792,7 +773,7 @@ describe("connecting a component to store", () => {
expect(fixture.innerHTML).toBe("<div><span>jupiler</span><span>hoegaarden</span></div>");
});
test("connect receives store getters as third argument", async () => {
test("mapStoreToProps receives store getters as third argument", async () => {
const state = {
importantID: 1,
todos: [{ id: 1, text: "jupiler" }, { id: 2, text: "bertinchamps" }]
@@ -807,47 +788,39 @@ describe("connecting a component to store", () => {
};
const store = new Store({ state, getters });
env.qweb.addTemplate(
"TodoItem",
`<div>
<span><t t-esc="props.activeTodoText"/></span>
<span><t t-esc="props.importantTodoText"/></span>
</div>`
);
class TodoItem extends Component<any, any, any> {}
const ConnectedTodo = connect(
TodoItem,
(state, props, getters) => {
env.qweb.addTemplates(`
<templates>
<div t-name="TodoItem">
<span><t t-esc="props.activeTodoText"/></span>
<span><t t-esc="props.importantTodoText"/></span>
</div>
<div t-name="TodoList">
<t t-foreach="props.todos" t-as="todo">
<TodoItem id="todo.id" t-key="todo.id"/>
</t>
</div>
</templates>
`);
class TodoItem extends ConnectedComponent<any, any, any> {
static mapStoreToProps(state, props, getters) {
const todo = state.todos.find(t => t.id === props.id);
return {
activeTodoText: getters.text(todo.id),
importantTodoText: getters.importantTodoText()
};
}
);
env.qweb.addTemplate(
"TodoList",
`<div>
<t t-foreach="props.todos" t-as="todo">
<ConnectedTodo id="todo.id" t-key="todo.id"/>
</t>
</div>`
);
class TodoList extends Component<any, any, any> {
components = { ConnectedTodo };
}
function mapStoreToProps(state) {
return { todos: state.todos };
class TodoList extends ConnectedComponent<any, any, any> {
components = { TodoItem };
static mapStoreToProps(state) {
return { todos: state.todos };
}
}
const ConnectedTodoList = connect(
TodoList,
mapStoreToProps
);
(<any>env).store = store;
const app = new ConnectedTodoList(env);
const app = new TodoList(env);
await app.mount(fixture);
expect(fixture.innerHTML).toBe(
@@ -856,23 +829,23 @@ describe("connecting a component to store", () => {
});
test("connected component is updated when props are updated", async () => {
env.qweb.addTemplate("Beer", `<span><t t-esc="props.name"/></span>`);
class Beer extends Component<any, any, any> {}
const ConnectedBeer = connect(
Beer,
(state, props) => {
env.qweb.addTemplates(`
<templates>
<span t-name="Beer"><t t-esc="props.name"/></span>
<div t-name="App">
<Beer id="state.beerId"/>
</div>
</templates>
`);
class Beer extends ConnectedComponent<any, any, any> {
static mapStoreToProps(state, props) {
return state.beers[props.id];
}
);
}
env.qweb.addTemplate(
"App",
`<div>
<ConnectedBeer id="state.beerId"/>
</div>`
);
class App extends Component<any, any, any> {
components = { ConnectedBeer };
components = { Beer };
state = { beerId: 1 };
}
@@ -890,14 +863,19 @@ describe("connecting a component to store", () => {
});
test("connected component is updated when store is changed", async () => {
env.qweb.addTemplate(
"App",
`
<div>
env.qweb.addTemplates(`
<templates>
<div t-name="App">
<span t-foreach="props.beers" t-as="beer" t-key="beer.name"><t t-esc="beer.name"/></span>
</div>`
);
class App extends Component<any, any, any> {}
</div>
</templates>
`);
class App extends ConnectedComponent<any, any, any> {
static mapStoreToProps(state) {
return { beers: state.beers, otherKey: 1 };
}
}
const mutations = {
addBeer({ state }, name) {
@@ -909,14 +887,7 @@ describe("connecting a component to store", () => {
const store = new Store({ state, mutations });
(<any>env).store = store;
function mapStoreToProps(state) {
return { beers: state.beers, otherKey: 1 };
}
const ConnectedApp = connect(
App,
mapStoreToProps
);
const app = new ConnectedApp(env);
const app = new App(env);
await app.mount(fixture);
expect(fixture.innerHTML).toBe("<div><span>jupiler</span></div>");
@@ -927,34 +898,31 @@ describe("connecting a component to store", () => {
});
test("connected component with undefined, null and string props", async () => {
env.qweb.addTemplate(
"Beer",
`<div>
<span>taster:<t t-esc="props.taster"/></span>
<span t-if="props.selected">selected:<t t-esc="props.selected.name"/></span>
<span t-if="props.consumed">consumed:<t t-esc="props.consumed.name"/></span>
</div>`
);
class Beer extends Component<any, any, any> {}
const ConnectedBeer = connect(
Beer,
(state, props) => {
env.qweb.addTemplates(`
<templates>
<div t-name="Beer">
<span>taster:<t t-esc="props.taster"/></span>
<span t-if="props.selected">selected:<t t-esc="props.selected.name"/></span>
<span t-if="props.consumed">consumed:<t t-esc="props.consumed.name"/></span>
</div>
<div t-name="App">
<Beer id="state.beerId"/>
</div>
</templates>
`);
class Beer extends ConnectedComponent<any, any, any> {
static mapStoreToProps(state, props) {
return {
selected: state.beers[props.id],
consumed: state.beers[state.consumedID] || null,
taster: state.taster
};
}
);
}
env.qweb.addTemplate(
"App",
`<div>
<ConnectedBeer id="state.beerId"/>
</div>`
);
class App extends Component<any, any, any> {
components = { ConnectedBeer };
components = { Beer };
state = { beerId: 0 };
}
@@ -997,34 +965,31 @@ describe("connecting a component to store", () => {
});
test("connected component deeply reactive with undefined, null and string props", async () => {
env.qweb.addTemplate(
"Beer",
`<div>
<span>taster:<t t-esc="props.taster"/></span>
<span t-if="props.selected">selected:<t t-esc="props.selected.name"/></span>
<span t-if="props.consumed">consumed:<t t-esc="props.consumed.name"/></span>
</div>`
);
class Beer extends Component<any, any, any> {}
const ConnectedBeer = connect(
Beer,
(state, props) => {
env.qweb.addTemplates(`
<templates>
<div t-name="Beer">
<span>taster:<t t-esc="props.taster"/></span>
<span t-if="props.selected">selected:<t t-esc="props.selected.name"/></span>
<span t-if="props.consumed">consumed:<t t-esc="props.consumed.name"/></span>
</div>
<div t-name="App">
<Beer id="state.beerId"/>
</div>
</templates>
`);
class Beer extends ConnectedComponent<any, any, any> {
static mapStoreToProps(storeState, props) {
return {
selected: state.beers[props.id],
consumed: state.beers[state.consumedID] || null,
taster: state.taster
selected: storeState.beers[props.id],
consumed: storeState.beers[storeState.consumedID] || null,
taster: storeState.taster
};
}
);
}
env.qweb.addTemplate(
"App",
`<div>
<ConnectedBeer id="state.beerId"/>
</div>`
);
class App extends Component<any, any, any> {
components = { ConnectedBeer };
components = { Beer };
state = { beerId: 0 };
}
@@ -1093,35 +1058,29 @@ describe("connecting a component to store", () => {
test("correct update order when parent/children are connected", async () => {
const steps: string[] = [];
env.qweb.addTemplate(
"Parent",
`
<div>
<Child key="props.current"/>
</div>
`
);
class Parent extends Component<any, any, any> {
components = { Child: ConnectedChild };
}
const ConnectedParent = connect(
Parent,
function(s) {
env.qweb.addTemplates(`
<templates>
<div t-name="Parent">
<Child key="props.current"/>
</div>
<span t-name="Child"><t t-esc="props.msg"/></span>
</templates>
`);
class Parent extends ConnectedComponent<any, any, any> {
components = { Child };
static mapStoreToProps(s) {
steps.push("parent");
return { current: s.current, isvisible: s.isvisible };
}
);
}
env.qweb.addTemplate("Child", `<span><t t-esc="props.msg"/></span>`);
class Child extends Component<any, any, any> {}
const ConnectedChild = connect(
Child,
function(s, props) {
class Child extends ConnectedComponent<any, any, any> {
static mapStoreToProps(s, props) {
steps.push("child");
return { msg: s.msg[props.key] };
}
);
}
const state = { current: "a", msg: { a: "a", b: "b" } };
const mutations = {
@@ -1132,7 +1091,7 @@ describe("connecting a component to store", () => {
const store = new Store({ state, mutations });
(<any>env).store = store;
const app = new ConnectedParent(env);
const app = new Parent(env);
await app.mount(fixture);
expect(fixture.innerHTML).toBe("<div><span>a</span></div>");
@@ -1163,7 +1122,7 @@ describe("connecting a component to store", () => {
<templates>
<div t-name="TodoApp" class="todoapp">
<t t-foreach="Object.values(props.todos)" t-as="todo">
<ConnectedTodoItem t-key="todo.id" id="todo.id"/>
<TodoItem t-key="todo.id" id="todo.id"/>
</t>
</div>
@@ -1174,33 +1133,26 @@ describe("connecting a component to store", () => {
</templates>
`);
function mapStoreToPropsTodoApp(state) {
return {
todos: state.todos
};
class TodoApp extends ConnectedComponent<any, any, any> {
components = { TodoItem };
static mapStoreToProps(state) {
return {
todos: state.todos
};
}
}
class TodoApp extends Component<any, any, any> {
components = { ConnectedTodoItem };
}
const ConnectedTodoApp = connect(
TodoApp,
mapStoreToPropsTodoApp
);
let renderCount = 0;
let fCount = 0;
function mapStoreToPropsTodoItem(state, ownProps) {
fCount++;
return {
todo: state.todos[ownProps.id]
};
}
class TodoItem extends Component<any, any, any> {
class TodoItem extends ConnectedComponent<any, any, any> {
state = { isEditing: false };
static mapStoreToProps(state, ownProps) {
fCount++;
return {
todo: state.todos[ownProps.id]
};
}
editTodo() {
this.env.store.commit("editTodo");
@@ -1211,13 +1163,8 @@ describe("connecting a component to store", () => {
}
}
const ConnectedTodoItem = connect(
TodoItem,
mapStoreToPropsTodoItem
);
(<any>env).store = store;
const app = new ConnectedTodoApp(env);
const app = new TodoApp(env);
await app.mount(fixture);
expect(fixture.innerHTML).toBe(
@@ -1254,7 +1201,7 @@ describe("connecting a component to store", () => {
<templates>
<div t-name="TodoApp" class="todoapp">
<t t-foreach="Object.values(props.todos)" t-as="todo">
<ConnectedTodoItem t-key="todo.id" id="todo.id"/>
<TodoItem t-key="todo.id" id="todo.id"/>
</t>
</div>
@@ -1265,34 +1212,27 @@ describe("connecting a component to store", () => {
</templates>
`);
function mapStoreToPropsTodoApp(state) {
return {
todos: state.todos
};
class TodoApp extends ConnectedComponent<any, any, any> {
components = { TodoItem };
static mapStoreToProps(state) {
return {
todos: state.todos
};
}
}
class TodoApp extends Component<any, any, any> {
components = { ConnectedTodoItem };
}
const ConnectedTodoApp = connect(
TodoApp,
mapStoreToPropsTodoApp
);
let renderCount = 0;
let fCount = 0;
function mapStoreToPropsTodoItem(state, ownProps) {
fCount++;
return {
todo: state.todos[ownProps.id]
};
}
class TodoItem extends Component<any, any, any> {
class TodoItem extends ConnectedComponent<any, any, any> {
state = { isEditing: false };
static mapStoreToProps(state, ownProps) {
fCount++;
return {
todo: state.todos[ownProps.id]
};
}
removeTodo() {
this.env.store.commit("removeTodo");
}
@@ -1302,13 +1242,8 @@ describe("connecting a component to store", () => {
}
}
const ConnectedTodoItem = connect(
TodoItem,
mapStoreToPropsTodoItem
);
(<any>env).store = store;
const app = new ConnectedTodoApp(env);
const app = new TodoApp(env);
await app.mount(fixture);
expect(fixture.innerHTML).toBe(
@@ -1326,8 +1261,17 @@ describe("connecting a component to store", () => {
test("connected component willpatch/patch hooks are called on store updates", async () => {
const steps: string[] = [];
env.qweb.addTemplate("App", `<div><t t-esc="props.msg"/></div>`);
class App extends Component<any, any, any> {
env.qweb.addTemplates(`
<templates>
<div t-name="App"><t t-esc="props.msg"/></div>
</templates>
`);
class App extends ConnectedComponent<any, any, any> {
static mapStoreToProps(s) {
return { msg: s.msg };
}
willPatch() {
steps.push("willpatch");
}
@@ -1335,12 +1279,6 @@ describe("connecting a component to store", () => {
steps.push("patched");
}
}
const ConnectedApp = connect(
App,
function(s) {
return { msg: s.msg };
}
);
const state = { msg: "a" };
const mutations = {
@@ -1351,7 +1289,7 @@ describe("connecting a component to store", () => {
const store = new Store({ state, mutations });
(<any>env).store = store;
const app = new ConnectedApp(env);
const app = new App(env);
await app.mount(fixture);
expect(fixture.innerHTML).toBe("<div>a</div>");
@@ -1362,29 +1300,4 @@ describe("connecting a component to store", () => {
expect(steps).toEqual(["willpatch", "patched"]);
});
test("connected component has its own name", () => {
function mapStoreToProps() {}
class Named extends Component<any, any, any> {}
const namedConnected = connect(
Named,
mapStoreToProps
);
expect(namedConnected.name).toMatch("ConnectedNamed");
class ParentNamed extends Component<any, any, any> {}
class ChildNamed extends ParentNamed {}
const childConnected = connect(
ChildNamed,
mapStoreToProps
);
expect(childConnected.name).toMatch("ConnectedChildNamed");
const Anonymous = class extends Component<any, any, any> {};
const anonymousConnected = connect(
Anonymous,
mapStoreToProps
);
expect(anonymousConnected.name).toMatch(/^Connectedclass_\d+/);
});
});
tools/playground/samples.js
+7 -10
View File
@@ -405,16 +405,15 @@ class TodoItem extends owl.Component {
//------------------------------------------------------------------------------
// TodoApp
//------------------------------------------------------------------------------
function mapStoreToProps(state) {
return {
todos: state.todos
};
}
class TodoApp extends owl.Component {
class TodoApp extends owl.ConnectedComponent {
components = { TodoItem };
state = { filter: "all" };
static mapStoreToProps(state) {
return {
todos: state.todos
};
}
get visibleTodos() {
let todos = this.props.todos;
if (this.state.filter === "active") {
@@ -462,8 +461,6 @@ class TodoApp extends owl.Component {
}
}
const ConnectedTodoApp = owl.connect(TodoApp, mapStoreToProps);
//------------------------------------------------------------------------------
// App Initialization
//------------------------------------------------------------------------------
@@ -474,7 +471,7 @@ const env = {
store,
dispatch: store.dispatch.bind(store),
};
const app = new ConnectedTodoApp(env);
const app = new TodoApp(env);
app.mount(document.body);
`;