mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[FIX] app: factorize to allow smoother developments in projects
It should be usefull to allow developpers to implement mounting/unmounting if they wish to.
This commit is contained in:
committed by
Aaron Bohy
parent
5dddf8f9a3
commit
6f435c36d8
+20
-4
@@ -1,4 +1,3 @@
|
|||||||
import { onMounted } from "../component/lifecycle_hooks";
|
|
||||||
import { Component } from "../component/component";
|
import { Component } from "../component/component";
|
||||||
import { ComponentNode } from "../component/component_node";
|
import { ComponentNode } from "../component/component_node";
|
||||||
import { MountOptions } from "../component/fibers";
|
import { MountOptions } from "../component/fibers";
|
||||||
@@ -60,15 +59,33 @@ export class App<T extends typeof Component = any> extends TemplateSet {
|
|||||||
}
|
}
|
||||||
|
|
||||||
mount(target: HTMLElement, options?: MountOptions): Promise<InstanceType<T>> {
|
mount(target: HTMLElement, options?: MountOptions): Promise<InstanceType<T>> {
|
||||||
|
this.checkTarget(target);
|
||||||
|
const node = this.makeNode(this.Root, this.props);
|
||||||
|
const prom = this.mountNode(node, target, options);
|
||||||
|
this.root = node;
|
||||||
|
return prom;
|
||||||
|
}
|
||||||
|
|
||||||
|
checkTarget(target: HTMLElement) {
|
||||||
if (!(target instanceof HTMLElement)) {
|
if (!(target instanceof HTMLElement)) {
|
||||||
throw new Error("Cannot mount component: the target is not a valid DOM element");
|
throw new Error("Cannot mount component: the target is not a valid DOM element");
|
||||||
}
|
}
|
||||||
if (!document.body.contains(target)) {
|
if (!document.body.contains(target)) {
|
||||||
throw new Error("Cannot mount a component on a detached dom node");
|
throw new Error("Cannot mount a component on a detached dom node");
|
||||||
}
|
}
|
||||||
const node = new ComponentNode(this.Root, this.props, this);
|
}
|
||||||
|
|
||||||
|
makeNode(Component: T, props: any): ComponentNode {
|
||||||
|
return new ComponentNode(Component, props, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
mountNode(node: ComponentNode, target: HTMLElement, options?: MountOptions) {
|
||||||
const promise: any = new Promise((resolve, reject) => {
|
const promise: any = new Promise((resolve, reject) => {
|
||||||
onMounted(() => resolve(node.component));
|
// manually set a onMounted callback.
|
||||||
|
// that way, we are independant from the current node.
|
||||||
|
node.mounted.push(() => {
|
||||||
|
resolve(node.component);
|
||||||
|
});
|
||||||
|
|
||||||
// Manually add the last resort error handler on the node
|
// Manually add the last resort error handler on the node
|
||||||
let handlers = nodeErrorHandlers.get(node);
|
let handlers = nodeErrorHandlers.get(node);
|
||||||
@@ -81,7 +98,6 @@ export class App<T extends typeof Component = any> extends TemplateSet {
|
|||||||
throw e;
|
throw e;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
this.root = node;
|
|
||||||
node.mountComponent(target, options);
|
node.mountComponent(target, options);
|
||||||
return promise;
|
return promise;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user