mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Géry Debongnie
+5
-1
@@ -60,6 +60,10 @@ export class Context extends EventBus {
|
||||
*/
|
||||
export function useContext(ctx: Context): any {
|
||||
const component: Component<any, any> = Component.current!;
|
||||
return useContextWithCB(ctx, component, component.render.bind(component));
|
||||
}
|
||||
|
||||
export function useContextWithCB(ctx: Context, component, method): any {
|
||||
const __owl__ = component.__owl__;
|
||||
const id = __owl__.id;
|
||||
const mapping = ctx.mapping;
|
||||
@@ -75,7 +79,7 @@ export function useContext(ctx: Context): any {
|
||||
ctx.on("update", component, async contextId => {
|
||||
if (mapping[id] < contextId) {
|
||||
mapping[id] = contextId;
|
||||
await component.render();
|
||||
await method();
|
||||
}
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
|
||||
+142
@@ -0,0 +1,142 @@
|
||||
import { Component } from "./component/component";
|
||||
import { Env } from "./component/component";
|
||||
import { Context, useContextWithCB } from "./Context";
|
||||
import { onWillUpdateProps } from "./hooks";
|
||||
|
||||
/**
|
||||
* Owl Store
|
||||
*
|
||||
* We have here:
|
||||
* - a Store class
|
||||
* - useStore hook
|
||||
* - useDispatch hook
|
||||
* - useGetters hook
|
||||
*
|
||||
* 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
|
||||
* code to modify it through actions, and for each state changes,
|
||||
* connected component will be notified, and updated if necessary.
|
||||
*
|
||||
* Note that this code is partly inspired by VueX and React/Redux
|
||||
*/
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Store Definition
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
export type Action = ({ state, dispatch, env, getters }, ...payload: any) => any;
|
||||
export type Getter = ({ state: any, getters }, payload?) => any;
|
||||
|
||||
interface StoreConfig {
|
||||
env?: Env;
|
||||
state?: any;
|
||||
actions?: { [name: string]: Action };
|
||||
getters?: { [name: string]: Getter };
|
||||
}
|
||||
|
||||
export class Store extends Context {
|
||||
actions: any;
|
||||
env: any;
|
||||
getters: { [name: string]: (payload?) => any };
|
||||
updateFunctions: { [key: number]: (() => boolean)[] };
|
||||
|
||||
constructor(config: StoreConfig) {
|
||||
super(config.state);
|
||||
this.actions = config.actions;
|
||||
this.env = config.env;
|
||||
this.getters = {};
|
||||
this.updateFunctions = [];
|
||||
if (config.getters) {
|
||||
const firstArg = {
|
||||
state: this.state,
|
||||
getters: this.getters
|
||||
};
|
||||
for (let g in config.getters) {
|
||||
this.getters[g] = config.getters[g].bind(this, firstArg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dispatch(action: string, ...payload: any): Promise<void> | void {
|
||||
if (!this.actions[action]) {
|
||||
throw new Error(`[Error] action ${action} is undefined`);
|
||||
}
|
||||
const result = this.actions[action](
|
||||
{
|
||||
dispatch: this.dispatch.bind(this),
|
||||
env: this.env,
|
||||
state: this.state,
|
||||
getters: this.getters
|
||||
},
|
||||
...payload
|
||||
);
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
interface SelectorOptions {
|
||||
store?: Store;
|
||||
isEqual?: (a: any, b: any) => boolean;
|
||||
}
|
||||
|
||||
const isStrictEqual = (a, b) => a === b;
|
||||
|
||||
export function useStore(selector, options: SelectorOptions = {}): any {
|
||||
const component: Component<any, any> = Component.current!;
|
||||
const store = options.store || (component.env.store as Store);
|
||||
let result = selector(store.state, component.props);
|
||||
const hashFn = store.observer.deepRevNumber.bind(store.observer);
|
||||
let revNumber = hashFn(result) || result;
|
||||
const isEqual = options.isEqual || isStrictEqual;
|
||||
if (!store.updateFunctions[component.__owl__.id]) {
|
||||
store.updateFunctions[component.__owl__.id] = [];
|
||||
}
|
||||
const updateFunctions = store.updateFunctions[component.__owl__.id];
|
||||
updateFunctions.push(function(): boolean {
|
||||
const oldResult = result;
|
||||
result = selector(store!.state, component.props);
|
||||
const newRevNumber = hashFn(result);
|
||||
if (
|
||||
(newRevNumber > 0 && revNumber !== newRevNumber) ||
|
||||
(newRevNumber === 0 && !isEqual(oldResult, result))
|
||||
) {
|
||||
revNumber = newRevNumber;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
|
||||
useContextWithCB(store, component, function(): Promise<void> | void {
|
||||
let shouldRender = false;
|
||||
updateFunctions.forEach(function (updateFn) {
|
||||
shouldRender = updateFn() || shouldRender;
|
||||
});
|
||||
if (shouldRender) {
|
||||
return component.render();
|
||||
}
|
||||
});
|
||||
onWillUpdateProps(props => {
|
||||
// FIXME: only do that if not keepalive + do it in destroy in that case
|
||||
delete store.updateFunctions[component.__owl__.id];
|
||||
result = selector(store.state, props);
|
||||
});
|
||||
return new Proxy(result, {
|
||||
get(target, k) {
|
||||
return result[k];
|
||||
},
|
||||
set(target, k, v) {
|
||||
result[k] = v;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function useDispatch(store?: Store): Store["dispatch"] {
|
||||
store = store || (Component.current!.env.store as Store);
|
||||
return store.dispatch.bind(store);
|
||||
}
|
||||
|
||||
export function useGetters(store?: Store): Store["getters"] {
|
||||
store = store || (Component.current!.env.store as Store);
|
||||
return store.getters;
|
||||
}
|
||||
+8
-4
@@ -7,8 +7,7 @@
|
||||
import { EventBus } from "./core/event_bus";
|
||||
import { Observer } from "./core/observer";
|
||||
import { QWeb } from "./qweb/index";
|
||||
import { ConnectedComponent } from "./store/connected_component";
|
||||
import { Store } from "./store/store";
|
||||
import * as _store from "./Store";
|
||||
import * as _utils from "./utils";
|
||||
import * as _tags from "./tags";
|
||||
import * as _hooks from "./hooks";
|
||||
@@ -24,10 +23,15 @@ export const Context = _context.Context;
|
||||
export const useState = _hooks.useState;
|
||||
export const core = { EventBus, Observer };
|
||||
export const router = { Router, RouteComponent, Link };
|
||||
export const store = { Store, ConnectedComponent };
|
||||
export const Store = _store.Store;
|
||||
export const utils = _utils;
|
||||
export const tags = _tags;
|
||||
export const hooks = Object.assign({}, _hooks, { useContext: _context.useContext });
|
||||
export const hooks = Object.assign({}, _hooks, {
|
||||
useContext: _context.useContext,
|
||||
useDispatch: _store.useDispatch,
|
||||
useGetters: _store.useGetters,
|
||||
useStore: _store.useStore
|
||||
});
|
||||
export const __info__ = {};
|
||||
|
||||
Object.defineProperty(__info__, "mode", {
|
||||
|
||||
@@ -1,147 +0,0 @@
|
||||
import { Component, Env, Fiber } from "../component/component";
|
||||
import { VNode } from "../vdom/index";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Connect function
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
type HashFunction = (a: any, b: any) => number;
|
||||
|
||||
export class ConnectedComponent<T extends Env, P> extends Component<T, P> {
|
||||
deep: boolean = true;
|
||||
getStore(env) {
|
||||
return env.store;
|
||||
}
|
||||
|
||||
storeProps: any;
|
||||
|
||||
hashFunction: HashFunction = (storeProps, options) => {
|
||||
const revFn = (this.__owl__ as any).revFn;
|
||||
const rev = revFn(storeProps);
|
||||
if (rev > 0) {
|
||||
return rev;
|
||||
}
|
||||
let hash = 0;
|
||||
for (let key in storeProps) {
|
||||
const val = storeProps[key];
|
||||
const hashVal = revFn(val);
|
||||
if (hashVal === 0) {
|
||||
if (val !== options.prevStoreProps[key]) {
|
||||
options.didChange = true;
|
||||
}
|
||||
} else {
|
||||
hash += hashVal;
|
||||
}
|
||||
}
|
||||
return hash;
|
||||
};
|
||||
|
||||
static mapStoreToProps(storeState, ownProps, getters) {
|
||||
return {};
|
||||
}
|
||||
|
||||
dispatch(name, ...payload) {
|
||||
return (this.__owl__ as any).store.dispatch(name, ...payload);
|
||||
}
|
||||
|
||||
/**
|
||||
* Need to do this here so 'deep' can be overrided by subcomponent easily
|
||||
*/
|
||||
async __prepareAndRender(fiber: Fiber<P>): Promise<VNode> {
|
||||
const store = this.getStore(this.env);
|
||||
const ownProps = this.props || {};
|
||||
this.storeProps = (<any>this.constructor).mapStoreToProps(store.state, ownProps, store.getters);
|
||||
const observer = store.observer;
|
||||
const revFn = this.deep ? observer.deepRevNumber : observer.revNumber;
|
||||
(this.__owl__ as any).store = store;
|
||||
(this.__owl__ as any).ownProps = this.props;
|
||||
(this.__owl__ as any).revFn = revFn.bind(observer);
|
||||
(this.__owl__ as any).storeHash = this.hashFunction(this.storeProps, {
|
||||
prevStoreProps: this.storeProps
|
||||
});
|
||||
(this.__owl__ as any).rev = observer.rev;
|
||||
return super.__prepareAndRender(fiber);
|
||||
}
|
||||
/**
|
||||
* 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() {
|
||||
(this.__owl__ as any).store.on("update", this, this.__checkUpdate);
|
||||
super.__callMounted();
|
||||
}
|
||||
__callWillUnmount() {
|
||||
(this.__owl__ as any).store.off("update", this);
|
||||
super.__callWillUnmount();
|
||||
}
|
||||
__destroy(parent: any) {
|
||||
(this.__owl__ as any).store.off("update", this);
|
||||
super.__destroy(parent);
|
||||
}
|
||||
|
||||
async render(force: boolean = false) {
|
||||
this.__updateStoreProps(this.props);
|
||||
|
||||
// this is quite technical, so this deserves some explanation.
|
||||
// When we have a connected component, it can be updated for 3 reasons:
|
||||
// - some internal state changes (this will go through this method)
|
||||
// - some props changes (if a parent is changed and need to rerender itself)
|
||||
// - a store update
|
||||
//
|
||||
// It is possible (with connected component and parent) to have the following
|
||||
// situation: the parent component is rendered first (from its state change),
|
||||
// then immediately after, it is rendered (from store update). Then, if the
|
||||
// __checkUpdate method is immediately over, the children component will
|
||||
// be rendered again by the store update, even though it is supposed to be
|
||||
// destroyed by the first rendering.
|
||||
//
|
||||
// So, the solution is to keep the information that there is a current
|
||||
// rendering occuring with the same store state, the same props, and return
|
||||
// that in the __checkUpdate method. To do this, we use the renderPromise
|
||||
// deferred, which is not used by the component system once the
|
||||
// component is ready, so we can use it for our own purpose.
|
||||
(this.__owl__ as any).renderPromise = super.render(force);
|
||||
return (this.__owl__ as any).renderPromise;
|
||||
}
|
||||
|
||||
async __updateProps(nextProps: P, f, s, v) {
|
||||
this.__updateStoreProps(nextProps);
|
||||
return super.__updateProps(nextProps, f, s, v);
|
||||
}
|
||||
|
||||
__updateStoreProps(nextProps): boolean {
|
||||
const __owl__ = this.__owl__ as any;
|
||||
const store = __owl__.store;
|
||||
const observer = store.observer;
|
||||
if (observer.rev === __owl__.rev && nextProps === __owl__.ownProps) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const storeProps = (<any>this.constructor).mapStoreToProps(
|
||||
store.state,
|
||||
nextProps,
|
||||
store.getters
|
||||
);
|
||||
const options = { prevStoreProps: this.storeProps, didChange: false };
|
||||
const storeHash = this.hashFunction(storeProps, options);
|
||||
this.storeProps = storeProps;
|
||||
let didChange = options.didChange;
|
||||
if (storeHash !== __owl__.storeHash) {
|
||||
__owl__.storeHash = storeHash;
|
||||
didChange = true;
|
||||
}
|
||||
__owl__.rev = store.observer.rev;
|
||||
__owl__.ownProps = nextProps;
|
||||
return didChange;
|
||||
}
|
||||
|
||||
async __checkUpdate() {
|
||||
const didChange = this.__updateStoreProps(this.props);
|
||||
if (didChange) {
|
||||
return this.render();
|
||||
}
|
||||
// see note in render method
|
||||
return (this.__owl__ as any).renderPromise;
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
import { Env } from "../component/component";
|
||||
import { Context } from "../Context";
|
||||
|
||||
/**
|
||||
* Owl Store
|
||||
*
|
||||
* We have here:
|
||||
* - a Store class
|
||||
* - 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
|
||||
* code to modify it through actions, and for each state changes,
|
||||
* connected component will be notified, and updated if necessary.
|
||||
*
|
||||
* Note that this code is partly inspired by VueX and React/Redux
|
||||
*/
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Store Definition
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
export type Action = ({ state, dispatch, env, getters }, ...payload: any) => any;
|
||||
export type Getter = ({ state: any, getters }, payload?) => any;
|
||||
|
||||
interface StoreConfig {
|
||||
env?: Env;
|
||||
state?: any;
|
||||
actions?: { [name: string]: Action };
|
||||
getters?: { [name: string]: Getter };
|
||||
}
|
||||
|
||||
export class Store extends Context {
|
||||
actions: any;
|
||||
env: any;
|
||||
getters: { [name: string]: (payload?) => any };
|
||||
|
||||
constructor(config: StoreConfig) {
|
||||
super(config.state);
|
||||
this.actions = config.actions;
|
||||
this.env = config.env;
|
||||
this.getters = {};
|
||||
if (config.getters) {
|
||||
const firstArg = {
|
||||
state: this.state,
|
||||
getters: this.getters
|
||||
};
|
||||
for (let g in config.getters) {
|
||||
this.getters[g] = config.getters[g].bind(this, firstArg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dispatch(action: string, ...payload: any): Promise<void> | void {
|
||||
if (!this.actions[action]) {
|
||||
throw new Error(`[Error] action ${action} is undefined`);
|
||||
}
|
||||
const result = this.actions[action](
|
||||
{
|
||||
dispatch: this.dispatch.bind(this),
|
||||
env: this.env,
|
||||
state: this.state,
|
||||
getters: this.getters
|
||||
},
|
||||
...payload
|
||||
);
|
||||
return result;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user