mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[REF] component: use __owl__ as metadata key
This commit is contained in:
Géry Debongnie
+51
-51
@@ -51,12 +51,12 @@ export class Component<
|
||||
Props extends {},
|
||||
State extends {}
|
||||
> extends EventBus {
|
||||
readonly __widget__: Meta<Env, Props>;
|
||||
readonly __owl__: Meta<Env, Props>;
|
||||
template: string = "default";
|
||||
inlineTemplate: string | null = null;
|
||||
|
||||
get el(): HTMLElement | null {
|
||||
return this.__widget__.vnode ? (<any>this).__widget__.vnode.elm : null;
|
||||
return this.__owl__.vnode ? (<any>this).__owl__.vnode.elm : null;
|
||||
}
|
||||
|
||||
env: T;
|
||||
@@ -102,11 +102,11 @@ export class Component<
|
||||
if (parent instanceof Component) {
|
||||
p = parent;
|
||||
this.env = parent.env;
|
||||
parent.__widget__.children[id] = this;
|
||||
parent.__owl__.children[id] = this;
|
||||
} else {
|
||||
this.env = parent;
|
||||
}
|
||||
this.__widget__ = {
|
||||
this.__owl__ = {
|
||||
id: id,
|
||||
vnode: null,
|
||||
isStarted: false,
|
||||
@@ -221,7 +221,7 @@ export class Component<
|
||||
|
||||
async mount(target: HTMLElement): Promise<void> {
|
||||
const vnode = await this._prepare();
|
||||
if (this.__widget__.isDestroyed) {
|
||||
if (this.__owl__.isDestroyed) {
|
||||
// widget was destroyed before we get here...
|
||||
return;
|
||||
}
|
||||
@@ -230,8 +230,8 @@ export class Component<
|
||||
|
||||
if (document.body.contains(target)) {
|
||||
this._visitSubTree(w => {
|
||||
if (!w.__widget__.isMounted && this.el!.contains(w.el)) {
|
||||
w.__widget__.isMounted = true;
|
||||
if (!w.__owl__.isMounted && this.el!.contains(w.el)) {
|
||||
w.__owl__.isMounted = true;
|
||||
w.mounted();
|
||||
return true;
|
||||
}
|
||||
@@ -243,9 +243,9 @@ export class Component<
|
||||
unmount() {
|
||||
if (this.el) {
|
||||
this._visitSubTree(w => {
|
||||
if (w.__widget__.isMounted) {
|
||||
if (w.__owl__.isMounted) {
|
||||
w.willUnmount();
|
||||
w.__widget__.isMounted = false;
|
||||
w.__owl__.isMounted = false;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
@@ -255,13 +255,13 @@ export class Component<
|
||||
}
|
||||
|
||||
async render(force: boolean = false): Promise<void> {
|
||||
if (this.__widget__.isDestroyed) {
|
||||
if (this.__owl__.isDestroyed) {
|
||||
return;
|
||||
}
|
||||
const renderVDom = this._render(force);
|
||||
const renderId = this.__widget__.renderId;
|
||||
const renderId = this.__owl__.renderId;
|
||||
const vnode = await renderVDom;
|
||||
if (renderId === this.__widget__.renderId) {
|
||||
if (renderId === this.__owl__.renderId) {
|
||||
// we only update the vnode and the actual DOM if no other rendering
|
||||
// occurred between now and when the render method was initially called.
|
||||
this._patch(vnode);
|
||||
@@ -269,25 +269,25 @@ export class Component<
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (!this.__widget__.isDestroyed) {
|
||||
for (let id in this.__widget__.children) {
|
||||
this.__widget__.children[id].destroy();
|
||||
if (!this.__owl__.isDestroyed) {
|
||||
for (let id in this.__owl__.children) {
|
||||
this.__owl__.children[id].destroy();
|
||||
}
|
||||
if (this.__widget__.isMounted) {
|
||||
if (this.__owl__.isMounted) {
|
||||
this.willUnmount();
|
||||
}
|
||||
if (this.el) {
|
||||
this.el.remove();
|
||||
this.__widget__.isMounted = false;
|
||||
delete this.__widget__.vnode;
|
||||
this.__owl__.isMounted = false;
|
||||
delete this.__owl__.vnode;
|
||||
}
|
||||
if (this.__widget__.parent) {
|
||||
let id = this.__widget__.id;
|
||||
delete this.__widget__.parent.__widget__.children[id];
|
||||
this.__widget__.parent = null;
|
||||
if (this.__owl__.parent) {
|
||||
let id = this.__owl__.id;
|
||||
delete this.__owl__.parent.__owl__.children[id];
|
||||
this.__owl__.parent = null;
|
||||
}
|
||||
this.clear();
|
||||
this.__widget__.isDestroyed = true;
|
||||
this.__owl__.isDestroyed = true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -305,11 +305,11 @@ export class Component<
|
||||
* mode or not.
|
||||
*/
|
||||
async updateEnv(nextEnv: Partial<T>): Promise<void> {
|
||||
if (this.__widget__.parent && this.__widget__.parent.env === this.env) {
|
||||
if (this.__owl__.parent && this.__owl__.parent.env === this.env) {
|
||||
this.env = Object.create(this.env);
|
||||
}
|
||||
Object.assign(this.env, nextEnv);
|
||||
if (this.__widget__.isMounted) {
|
||||
if (this.__owl__.isMounted) {
|
||||
await this.render(true);
|
||||
}
|
||||
this.patched();
|
||||
@@ -319,8 +319,8 @@ export class Component<
|
||||
nextProps: Props,
|
||||
forceUpdate: boolean = false
|
||||
): Promise<void> {
|
||||
if (nextProps === this.__widget__.renderProps && !forceUpdate) {
|
||||
await this.__widget__.renderPromise;
|
||||
if (nextProps === this.__owl__.renderProps && !forceUpdate) {
|
||||
await this.__owl__.renderPromise;
|
||||
return;
|
||||
}
|
||||
const shouldUpdate = forceUpdate || this.shouldUpdate(nextProps);
|
||||
@@ -341,7 +341,7 @@ export class Component<
|
||||
return;
|
||||
}
|
||||
Object.assign(this.state, nextState);
|
||||
if (this.__widget__.isStarted) {
|
||||
if (this.__owl__.isStarted) {
|
||||
await this.render();
|
||||
}
|
||||
this.patched();
|
||||
@@ -359,21 +359,21 @@ export class Component<
|
||||
}
|
||||
|
||||
_patch(vnode) {
|
||||
this.__widget__.renderPromise = null;
|
||||
if (this.__widget__.vnode) {
|
||||
this.__owl__.renderPromise = null;
|
||||
if (this.__owl__.vnode) {
|
||||
this.willPatch();
|
||||
this.__widget__.vnode = patch(this.__widget__.vnode, vnode);
|
||||
this.__owl__.vnode = patch(this.__owl__.vnode, vnode);
|
||||
} else {
|
||||
this.__widget__.vnode = patch(document.createElement(vnode.sel!), vnode);
|
||||
this.__owl__.vnode = patch(document.createElement(vnode.sel!), vnode);
|
||||
}
|
||||
}
|
||||
async _prepare(): Promise<VNode> {
|
||||
this.__widget__.renderProps = this.props;
|
||||
this.__widget__.renderPromise = this.willStart().then(() => {
|
||||
if (this.__widget__.isDestroyed) {
|
||||
this.__owl__.renderProps = this.props;
|
||||
this.__owl__.renderPromise = this.willStart().then(() => {
|
||||
if (this.__owl__.isDestroyed) {
|
||||
return Promise.resolve(h("div"));
|
||||
}
|
||||
this.__widget__.isStarted = true;
|
||||
this.__owl__.isStarted = true;
|
||||
if (this.inlineTemplate) {
|
||||
this.env.qweb.addTemplate(
|
||||
this.inlineTemplate,
|
||||
@@ -383,16 +383,16 @@ export class Component<
|
||||
}
|
||||
return this._render();
|
||||
});
|
||||
return this.__widget__.renderPromise;
|
||||
return this.__owl__.renderPromise;
|
||||
}
|
||||
|
||||
async _render(force: boolean = false): Promise<VNode> {
|
||||
this.__widget__.renderId++;
|
||||
this.__owl__.renderId++;
|
||||
const promises: Promise<void>[] = [];
|
||||
const template = this.inlineTemplate || this.template;
|
||||
let vnode = this.env.qweb.render(template, this, {
|
||||
promises,
|
||||
handlers: this.__widget__.boundHandlers,
|
||||
handlers: this.__owl__.boundHandlers,
|
||||
forceUpdate: force
|
||||
});
|
||||
|
||||
@@ -401,30 +401,30 @@ export class Component<
|
||||
// will update its own vnode representation without the knowledge of the
|
||||
// parent widget. With this, we make sure that the parent widget will be
|
||||
// able to patch itself properly after
|
||||
vnode.key = this.__widget__.id;
|
||||
this.__widget__.renderProps = this.props;
|
||||
this.__widget__.renderPromise = Promise.all(promises).then(() => vnode);
|
||||
return this.__widget__.renderPromise;
|
||||
vnode.key = this.__owl__.id;
|
||||
this.__owl__.renderProps = this.props;
|
||||
this.__owl__.renderPromise = Promise.all(promises).then(() => vnode);
|
||||
return this.__owl__.renderPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Only called by qweb t-widget directive
|
||||
*/
|
||||
_mount(vnode: VNode, elm: HTMLElement): VNode {
|
||||
this.__widget__.vnode = patch(elm, vnode);
|
||||
this.__owl__.vnode = patch(elm, vnode);
|
||||
this.__mount();
|
||||
return this.__widget__.vnode;
|
||||
return this.__owl__.vnode;
|
||||
}
|
||||
|
||||
__mount() {
|
||||
if (this.__widget__.isMounted) {
|
||||
if (this.__owl__.isMounted) {
|
||||
return;
|
||||
}
|
||||
if (this.__widget__.parent) {
|
||||
if (this.__widget__.parent!.__widget__.isMounted) {
|
||||
this.__widget__.isMounted = true;
|
||||
if (this.__owl__.parent) {
|
||||
if (this.__owl__.parent!.__owl__.isMounted) {
|
||||
this.__owl__.isMounted = true;
|
||||
this.mounted();
|
||||
const children = this.__widget__.children;
|
||||
const children = this.__owl__.children;
|
||||
for (let id in children) {
|
||||
children[id].__mount();
|
||||
}
|
||||
@@ -435,7 +435,7 @@ export class Component<
|
||||
_visitSubTree(callback: (w: Component<T, any, any>) => boolean) {
|
||||
const shouldVisitChildren = callback(this);
|
||||
if (shouldVisitChildren) {
|
||||
const children = this.__widget__.children;
|
||||
const children = this.__owl__.children;
|
||||
for (let id in children) {
|
||||
children[id]._visitSubTree(callback);
|
||||
}
|
||||
|
||||
+8
-8
@@ -960,21 +960,21 @@ const widgetDirective: Directive = {
|
||||
? `String(-${widgetID} - i)`
|
||||
: String(widgetID);
|
||||
ctx.addLine(
|
||||
`let w${widgetID} = ${templateID} in context.__widget__.cmap ? context.__widget__.children[context.__widget__.cmap[${templateID}]] : false;`
|
||||
`let w${widgetID} = ${templateID} in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[${templateID}]] : false;`
|
||||
);
|
||||
ctx.addLine(`let props${widgetID} = ${props || "{}"};`);
|
||||
ctx.addLine(`let isNew${widgetID} = !w${widgetID};`);
|
||||
|
||||
// check if we can reuse current rendering promise
|
||||
ctx.addIf(`w${widgetID} && w${widgetID}.__widget__.renderPromise`);
|
||||
ctx.addIf(`w${widgetID}.__widget__.isStarted`);
|
||||
ctx.addIf(`w${widgetID} && w${widgetID}.__owl__.renderPromise`);
|
||||
ctx.addIf(`w${widgetID}.__owl__.isStarted`);
|
||||
ctx.addLine(
|
||||
`def${defID} = w${widgetID}.updateProps(props${widgetID}, extra.forceUpdate);`
|
||||
);
|
||||
ctx.addElse();
|
||||
ctx.addLine(`isNew${widgetID} = true`);
|
||||
ctx.addIf(`props${widgetID} === w${widgetID}.__widget__.renderProps`);
|
||||
ctx.addLine(`def${defID} = w${widgetID}.__widget__.renderPromise;`);
|
||||
ctx.addIf(`props${widgetID} === w${widgetID}.__owl__.renderProps`);
|
||||
ctx.addLine(`def${defID} = w${widgetID}.__owl__.renderPromise;`);
|
||||
ctx.addElse();
|
||||
ctx.addLine(`w${widgetID}.destroy();`);
|
||||
ctx.addLine(`w${widgetID} = false`);
|
||||
@@ -992,7 +992,7 @@ const widgetDirective: Directive = {
|
||||
`w${widgetID} = new context.widgets['${value}'](owner, props${widgetID});`
|
||||
);
|
||||
ctx.addLine(
|
||||
`context.__widget__.cmap[${templateID}] = w${widgetID}.__widget__.id;`
|
||||
`context.__owl__.cmap[${templateID}] = w${widgetID}.__owl__.id;`
|
||||
);
|
||||
for (let [event, method] of events) {
|
||||
ctx.addLine(`w${widgetID}.on('${event}', owner, owner['${method}'])`);
|
||||
@@ -1014,11 +1014,11 @@ const widgetDirective: Directive = {
|
||||
keepAlive ? "unmount" : "destroy"
|
||||
}()},destroy(){w${widgetID}.${
|
||||
keepAlive ? "unmount" : "destroy"
|
||||
}()}}; w${widgetID}.__widget__.pvnode = pvnode;});`
|
||||
}()}}; w${widgetID}.__owl__.pvnode = pvnode;});`
|
||||
);
|
||||
ctx.addElse();
|
||||
ctx.addLine(
|
||||
`def${defID} = def${defID}.then(()=>{if (w${widgetID}.__widget__.isDestroyed) {return};let vnode;if (!w${widgetID}.__widget__.vnode){vnode=w${widgetID}.__widget__.pvnode} else { vnode=h(w${widgetID}.__widget__.vnode.sel, {key: ${templateID}});vnode.elm=w${widgetID}.el;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w${widgetID}.el,a.elm);a.elm=w${widgetID}.el;w${widgetID}.__mount();},remove(){w${widgetID}.${
|
||||
`def${defID} = def${defID}.then(()=>{if (w${widgetID}.__owl__.isDestroyed) {return};let vnode;if (!w${widgetID}.__owl__.vnode){vnode=w${widgetID}.__owl__.pvnode} else { vnode=h(w${widgetID}.__owl__.vnode.sel, {key: ${templateID}});vnode.elm=w${widgetID}.el;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w${widgetID}.el,a.elm);a.elm=w${widgetID}.el;w${widgetID}.__mount();},remove(){w${widgetID}.${
|
||||
keepAlive ? "unmount" : "destroy"
|
||||
}()}, destroy() {w${widgetID}.${keepAlive ? "unmount" : "destroy"}()}}}c${
|
||||
ctx.parentNode
|
||||
|
||||
+16
-16
@@ -227,12 +227,12 @@ export function makeObserver(): Observer {
|
||||
// Connect function
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
function setStoreProps(__widget__: any, storeProps: any) {
|
||||
__widget__.currentStoreProps = storeProps;
|
||||
__widget__.currentStoreRevs = {};
|
||||
__widget__.currentStoreRev = storeProps.__rev__;
|
||||
function setStoreProps(__owl__: any, storeProps: any) {
|
||||
__owl__.currentStoreProps = storeProps;
|
||||
__owl__.currentStoreRevs = {};
|
||||
__owl__.currentStoreRev = storeProps.__rev__;
|
||||
for (let key in storeProps) {
|
||||
__widget__.currentStoreRevs[key] = storeProps[key].__rev__;
|
||||
__owl__.currentStoreRevs[key] = storeProps[key].__rev__;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -245,25 +245,25 @@ export function connect(mapStateToProps) {
|
||||
const storeProps = mapStateToProps(env.store.state, ownProps);
|
||||
const mergedProps = Object.assign({}, props || {}, storeProps);
|
||||
super(parent, mergedProps);
|
||||
setStoreProps(this.__widget__, storeProps);
|
||||
this.__widget__.ownProps = ownProps;
|
||||
setStoreProps(this.__owl__, storeProps);
|
||||
this.__owl__.ownProps = ownProps;
|
||||
}
|
||||
mounted() {
|
||||
this.env.store.on("update", this, () => {
|
||||
const ownProps = this.__widget__.ownProps;
|
||||
const ownProps = this.__owl__.ownProps;
|
||||
const storeProps = mapStateToProps(this.env.store.state, ownProps);
|
||||
let didChange = false;
|
||||
if (this.__widget__.currentStoreRev !== storeProps.__rev__) {
|
||||
setStoreProps(this.__widget__, storeProps);
|
||||
if (this.__owl__.currentStoreRev !== storeProps.__rev__) {
|
||||
setStoreProps(this.__owl__, storeProps);
|
||||
didChange = true;
|
||||
} else {
|
||||
const revs = this.__widget__.currentStoreRevs;
|
||||
const revs = this.__owl__.currentStoreRevs;
|
||||
for (let key in storeProps) {
|
||||
const val = storeProps[key];
|
||||
if (val.__rev__ !== revs[key]) {
|
||||
didChange = true;
|
||||
revs[key] = val.__rev__;
|
||||
this.__widget__.currentStoreProps[key] = val;
|
||||
this.__owl__.currentStoreProps[key] = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -278,17 +278,17 @@ export function connect(mapStateToProps) {
|
||||
super.willUnmount();
|
||||
}
|
||||
updateProps(nextProps, forceUpdate) {
|
||||
if (this.__widget__.ownProps !== nextProps) {
|
||||
this.__widget__.currentStoreProps = mapStateToProps(
|
||||
if (this.__owl__.ownProps !== nextProps) {
|
||||
this.__owl__.currentStoreProps = mapStateToProps(
|
||||
this.env.store.state,
|
||||
nextProps
|
||||
);
|
||||
}
|
||||
this.__widget__.ownProps = nextProps;
|
||||
this.__owl__.ownProps = nextProps;
|
||||
const mergedProps = Object.assign(
|
||||
{},
|
||||
nextProps,
|
||||
this.__widget__.currentStoreProps
|
||||
this.__owl__.currentStoreProps
|
||||
);
|
||||
return super.updateProps(mergedProps, forceUpdate);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user