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: simplify connect API

Browse Source 
Closes #158
This commit is contained in:
Aaron Bohy
2019-06-11 09:32:28 +02:00
committed by Géry Debongnie
parent 1ff3c32fe4
commit 22e48e3be0
4 changed files with 199 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doc/store.md
+3 -3
View File
@@ -176,7 +176,7 @@ function mapStoreToProps(state) {
value: state.counter
};
}
const ConnectedCounter = owl.connect(mapStoreToProps)(Counter);
const ConnectedCounter = owl.connect(Counter, mapStoreToProps);
const counter = new ConnectedCounter({ store, qweb });
```
@@ -199,5 +199,5 @@ The arguments of `connect` are:
- `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 function that takes a `Component` as argument
and returns a sub Class of this `Component` that is connected to the `store`
The `connect` function returns a sub class of the given `Component` which is
connected to the `store`.
src/store.ts
+96 -94
View File
@@ -150,10 +150,20 @@ 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;
}
let nextID = 1;
export function connect(mapStateToProps, options: any = {}) {
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);
@@ -181,103 +191,95 @@ export function connect(mapStateToProps, options: any = {}) {
};
}
return function<E extends EnvWithStore, P, S>(
Comp: Constructor<Component<E, P, S>>
) {
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 = mapStateToProps(
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(
{
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();
}
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
}
);
}
/**
* 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();
}
_checkUpdate() {
const ownProps = (<any>this.__owl__).ownProps;
const storeProps = mapStateToProps(
_checkUpdate() {
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;
this._updateProps(ownProps, false);
}
}
_updateProps(nextProps, forceUpdate, patchQueue?: any[]) {
if ((<any>this.__owl__).ownProps !== nextProps) {
(<any>this.__owl__).currentStoreProps = mapStoreToProps(
(<any>this.__owl__).store.state,
ownProps,
nextProps,
(<any>this.__owl__).store.getters
);
const options: any = {
currentStoreProps: (<any>this.__owl__).currentStoreProps
};
const storeHash = 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;
this._updateProps(ownProps, false);
}
}
_updateProps(nextProps, forceUpdate, patchQueue?: any[]) {
if ((<any>this.__owl__).ownProps !== nextProps) {
(<any>this.__owl__).currentStoreProps = mapStateToProps(
(<any>this.__owl__).store.state,
nextProps,
(<any>this.__owl__).store.getters
);
}
(<any>this.__owl__).ownProps = nextProps;
const mergedProps = Object.assign(
{},
nextProps,
(<any>this.__owl__).currentStoreProps
);
return super._updateProps(mergedProps, forceUpdate, patchQueue);
}
};
// 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 = `ConnectedComponent${nextID++}`;
Object.defineProperty(Result, "name", { value: name });
return Result;
(<any>this.__owl__).ownProps = nextProps;
const mergedProps = Object.assign(
{},
nextProps,
(<any>this.__owl__).currentStoreProps
);
return super._updateProps(mergedProps, forceUpdate, patchQueue);
}
};
// 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 = `ConnectedComponent${nextID++}`;
Object.defineProperty(Result, "name", { value: name });
return Result;
}
tests/store.test.ts
+98 -56
View File
@@ -411,10 +411,13 @@ describe("connecting a component to store", () => {
state.todos.push({ msg });
}
};
function mapStateToProps(s) {
function mapStoreToProps(s) {
return { todos: s.todos };
}
const TodoApp = connect(mapStateToProps)(App);
const TodoApp = connect(
App,
mapStoreToProps
);
const store = new Store({ state, mutations });
(<any>env).store = store;
const app = new TodoApp(env);
@@ -434,7 +437,7 @@ describe("connecting a component to store", () => {
state.todos[0].title = title;
}
};
function mapStateToProps(s) {
function mapStoreToProps(s) {
return { todos: s.todos };
}
const store = new Store({ state, mutations });
@@ -451,13 +454,15 @@ describe("connecting a component to store", () => {
class App extends Component<any, any, any> {}
const DeepTodoApp = connect(
mapStateToProps,
App,
mapStoreToProps,
{ deep: true }
)(App);
);
const ShallowTodoApp = connect(
mapStateToProps,
App,
mapStoreToProps,
{ deep: false }
)(App);
);
(<any>env).store = store;
const deepTodoApp = new DeepTodoApp(env);
const shallowTodoApp = new ShallowTodoApp(env);
@@ -501,15 +506,16 @@ describe("connecting a component to store", () => {
}
}
});
function mapStateToProps(s) {
function mapStoreToProps(s) {
return { todos: s.todos };
}
const TodoApp = connect(
mapStateToProps,
App,
mapStoreToProps,
{
getStore: () => store
}
)(App);
);
const app = new TodoApp(env);
await app.mount(fixture);
@@ -532,7 +538,10 @@ describe("connecting a component to store", () => {
}
}
const ConnectedChild = connect(s => s)(Child);
const ConnectedChild = connect(
Child,
s => s
);
env.qweb.addTemplate(
"Parent",
@@ -574,10 +583,13 @@ describe("connecting a component to store", () => {
env.qweb.addTemplate("TodoItem", `<span><t t-esc="props.text"/></span>`);
class TodoItem extends Component<any, any, any> {}
const ConnectedTodo = connect((state, props) => {
const todo = state.todos.find(t => t.id === props.id);
return todo;
})(TodoItem);
const ConnectedTodo = connect(
TodoItem,
(state, props) => {
const todo = state.todos.find(t => t.id === props.id);
return todo;
}
);
env.qweb.addTemplate(
"TodoList",
@@ -591,10 +603,13 @@ describe("connecting a component to store", () => {
widgets = { ConnectedTodo };
}
function mapStateToProps(state) {
function mapStoreToProps(state) {
return { todos: state.todos };
}
const ConnectedTodoList = connect(mapStateToProps)(TodoList);
const ConnectedTodoList = connect(
TodoList,
mapStoreToProps
);
(<any>env).store = store;
const app = new ConnectedTodoList(env);
@@ -632,13 +647,16 @@ describe("connecting a component to store", () => {
</div>`
);
class TodoItem extends Component<any, any, any> {}
const ConnectedTodo = connect((state, props, getters) => {
const todo = state.todos.find(t => t.id === props.id);
return {
activeTodoText: getters.text(todo.id),
importantTodoText: getters.importantTodoText()
};
})(TodoItem);
const ConnectedTodo = connect(
TodoItem,
(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",
@@ -652,10 +670,13 @@ describe("connecting a component to store", () => {
widgets = { ConnectedTodo };
}
function mapStateToProps(state) {
function mapStoreToProps(state) {
return { todos: state.todos };
}
const ConnectedTodoList = connect(mapStateToProps)(TodoList);
const ConnectedTodoList = connect(
TodoList,
mapStoreToProps
);
(<any>env).store = store;
const app = new ConnectedTodoList(env);
@@ -669,9 +690,12 @@ 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((state, props) => {
return state.beers[props.id];
})(Beer);
const ConnectedBeer = connect(
Beer,
(state, props) => {
return state.beers[props.id];
}
);
env.qweb.addTemplate(
"App",
@@ -717,10 +741,13 @@ describe("connecting a component to store", () => {
const store = new Store({ state, mutations });
(<any>env).store = store;
function mapStateToProps(state) {
function mapStoreToProps(state) {
return { beers: state.beers, otherKey: 1 };
}
const ConnectedApp = connect(mapStateToProps)(App);
const ConnectedApp = connect(
App,
mapStoreToProps
);
const app = new ConnectedApp(env);
await app.mount(fixture);
@@ -743,13 +770,16 @@ describe("connecting a component to store", () => {
</div>`
);
class Beer extends Component<any, any, any> {}
const ConnectedBeer = connect((state, props) => {
return {
selected: state.beers[props.id],
consumed: state.beers[state.consumedID] || null,
taster: state.taster
};
})(Beer);
const ConnectedBeer = connect(
Beer,
(state, props) => {
return {
selected: state.beers[props.id],
consumed: state.beers[state.consumedID] || null,
taster: state.taster
};
}
);
env.qweb.addTemplate(
"App",
@@ -812,13 +842,16 @@ describe("connecting a component to store", () => {
</div>`
);
class Beer extends Component<any, any, any> {}
const ConnectedBeer = connect((state, props) => {
return {
selected: state.beers[props.id],
consumed: state.beers[state.consumedID] || null,
taster: state.taster
};
})(Beer);
const ConnectedBeer = connect(
Beer,
(state, props) => {
return {
selected: state.beers[props.id],
consumed: state.beers[state.consumedID] || null,
taster: state.taster
};
}
);
env.qweb.addTemplate(
"App",
@@ -909,18 +942,24 @@ describe("connecting a component to store", () => {
class Parent extends Component<any, any, any> {
widgets = { Child: ConnectedChild };
}
const ConnectedParent = connect(function(s) {
steps.push("parent");
return { current: s.current, isvisible: s.isvisible };
})(Parent);
const ConnectedParent = connect(
Parent,
function(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(function(s, props) {
steps.push("child");
return { msg: s.msg[props.key] };
})(Child);
const ConnectedChild = connect(
Child,
function(s, props) {
steps.push("child");
return { msg: s.msg[props.key] };
}
);
const state = { current: "a", msg: { a: "a", b: "b" } };
const mutations = {
@@ -953,9 +992,12 @@ describe("connecting a component to store", () => {
steps.push("patched");
}
}
const ConnectedApp = connect(function(s) {
return { msg: s.msg };
})(App);
const ConnectedApp = connect(
App,
function(s) {
return { msg: s.msg };
}
);
const state = { msg: "a" };
const mutations = {
tools/playground/samples.js
+2 -2
View File
@@ -432,7 +432,7 @@ class TodoItem extends owl.Component {
//------------------------------------------------------------------------------
// TodoApp
//------------------------------------------------------------------------------
function mapStateToProps(state) {
function mapStoreToProps(state) {
return {
todos: state.todos
};
@@ -489,7 +489,7 @@ class TodoApp extends owl.Component {
}
}
const ConnectedTodoApp = owl.connect(mapStateToProps)(TodoApp);
const ConnectedTodoApp = owl.connect(TodoApp, mapStoreToProps);
//------------------------------------------------------------------------------
// App Initialization