[IMP] component: add position option to mount method

A component can now be mounted in different positions: either 'before' (at
the start), 'after' (at the end), or 'attach' (take possession of a target
element)

closes #539

src/component/component.ts

@@ -36,6 +36,10 @@ export interface Env {
   [key: string]: any;
 }
 
+interface MountOptions {
+  position?: "first-child" | "last-child" | "self";
+}
+
 /**
  * This is mostly an internal detail of implementation. The Meta interface is
  * useful to typecheck and describe the internal keys used by Owl to manage the
@@ -102,6 +106,7 @@ export class Component<T extends Env, Props extends {}> {
   static env: any = {};
   // expose scheduler s.t. it can be mocked for testing purposes
   static scheduler: Scheduler = scheduler;
+  __target: HTMLElement | undefined;
 
   /**
    * The `el` is the root element of the component.  Note that it could be null:
@@ -291,7 +296,8 @@ export class Component<T extends Env, Props extends {}> {
    *
    * Note that a component can be mounted an unmounted several times
    */
-  async mount(target: HTMLElement | DocumentFragment): Promise<void> {
+  async mount(target: HTMLElement | DocumentFragment, options: MountOptions = {}): Promise<void> {
+    const position = options.position || "last-child";
     const __owl__ = this.__owl__;
     if (__owl__.isMounted) {
       return Promise.resolve();
@@ -301,7 +307,16 @@ export class Component<T extends Env, Props extends {}> {
       message += `\nMaybe the DOM is not ready yet? (in that case, you can use owl.utils.whenReady)`;
       throw new Error(message);
     }
-    const fiber = new Fiber(null, this, false, target);
+    let inserter =
+      position === "last-child"
+        ? el => target.appendChild(el)
+        : position === "first-child"
+        ? el => target.prepend(el)
+        : el => {};
+    if (position === "self") {
+      this.__target = target as HTMLElement;
+    }
+    const fiber = new Fiber(null, this, false, inserter);
     fiber.shouldPatch = false;
     if (!__owl__.vnode) {
       this.__prepareAndRender(fiber, () => {});
@@ -535,8 +550,18 @@ export class Component<T extends Env, Props extends {}> {
    */
   __patch(vnode: VNode) {
     const __owl__ = this.__owl__;
-    const target = __owl__.vnode || document.createElement(vnode.sel!);
-    __owl__.vnode = patch(target, vnode);
+    if (this.__target) {
+      if (this.__target.tagName.toLowerCase() !== vnode.sel) {
+        throw new Error(
+          `Cannot attach '${this.constructor.name}' to target node (not same tag name)`
+        );
+      }
+      __owl__.vnode = patch(this.__target, vnode);
+      delete this.__target;
+    } else {
+      const target = __owl__.vnode || document.createElement(vnode.sel!);
+      __owl__.vnode = patch(target, vnode);
+    }
   }
 
   /**

src/component/fiber.ts

@@ -46,7 +46,7 @@ export class Fiber {
   // scheduler.
   counter: number = 0;
 
-  target: HTMLElement | null;
+  inserter: (el: HTMLElement) => void | null;
 
   scope: any;
   vars: any;
@@ -62,10 +62,10 @@ export class Fiber {
 
   error?: Error;
 
-  constructor(parent: Fiber | null, component: Component<any, any>, force, target) {
+  constructor(parent: Fiber | null, component: Component<any, any>, force, inserter) {
     this.component = component;
     this.force = force;
-    this.target = target;
+    this.inserter = inserter;
 
     const __owl__ = component.__owl__;
     this.scope = __owl__.scope;
@@ -181,7 +181,7 @@ export class Fiber {
   complete() {
     let component = this.component;
     this.isCompleted = true;
-    if (!this.target && !component.__owl__.isMounted) {
+    if (!this.inserter && !component.__owl__.isMounted) {
       return;
     }
 
@@ -211,7 +211,7 @@ export class Fiber {
       const fiber = patchQueue[i];
       component = fiber.component;
       component.__patch(fiber.vnode!);
-      if (!fiber.shouldPatch && (!fiber.target || i !== 0)) {
+      if (!fiber.shouldPatch && (!fiber.inserter || i !== 0)) {
         component.__owl__.pvnode!.elm = component.__owl__.vnode!.elm;
       }
       component.__owl__.currentFiber = null;
@@ -219,9 +219,9 @@ export class Fiber {
 
     // insert into the DOM (mount case)
     let inDOM = false;
-    if (this.target) {
-      this.target.appendChild(this.component.el!);
-      inDOM = document.body.contains(this.target);
+    if (this.inserter) {
+      this.inserter(this.component.el!);
+      inDOM = document.body.contains(this.component.el);
       this.component.env.qweb.trigger("dom-appended");
     }
 
@@ -229,12 +229,12 @@ export class Fiber {
     for (let i = patchLen - 1; i >= 0; i--) {
       const fiber = patchQueue[i];
       component = fiber.component;
-      if (fiber.shouldPatch && !this.target) {
+      if (fiber.shouldPatch && !this.inserter) {
         component.patched();
         if (component.__owl__.patchedCB) {
           component.__owl__.patchedCB();
         }
-      } else if (this.target ? inDOM : true) {
+      } else if (this.inserter ? inDOM : true) {
         component.__callMounted();
       }
     }