[IMP] allow to combine t-transition and t-widget

Closes #94

src/qweb_extensions.ts

@@ -192,7 +192,10 @@ QWeb.addDirective({
  * explanation of the code generated by the t-widget directive for the following
  * situation:
  * ```xml
- *   <t t-widget="child" t-key="'somestring'" t-props="{flag:state.flag}"/>
+ *   <t t-widget="child"
+ *      t-key="'somestring'"
+ *      t-props="{flag:state.flag}"
+ *      t-transition="fade"/>
  * ```
  *
  * ```js
@@ -252,6 +255,8 @@ QWeb.addDirective({
  *   }
  *   w4 = new W4(owner, props4);
  *
+ *   let utils = this.utils;
+ *
  *   // Whenever we rerender the parent widget, we need to be sure that we
  *   // are able to find the widget instance. To do that, we register it to
  *   // the parent cmap (children map).  Note that the 'template' key is
@@ -281,15 +286,21 @@ QWeb.addDirective({
  *         // to synchronise the pvnode elm with the resulting elm
  *         let nvn = w4._mount(vnode, vn.elm);
  *         pvnode.elm = nvn.elm;
+ *         // what follows is only present if there are animations on the widget
+ *         utils.transitionInsert(vn.elm, "fade");
  *       },
  *       remove() {
- *         // apparently, in some cases, it is necessary to call the destroy
- *         // method here
- *         w4.destroy();
+ *         // override with empty function to prevent from removing the node
+ *         // directly. It will be removed when destroy is called anyway, which
+ *         // delays the removal if there are animations.
  *       },
  *       destroy() {
- *         // and here...
- *         w4.destroy();
+ *         // if there are animations, we delay the call to destroy on the
+ *         // widget, if not, we call it directly.
+ *         let finalize = () => {
+ *           w4.destroy();
+ *         };
+ *         utils.transitionRemove(vn.elm, "fade", finalize);
  *       }
  *     };
  *     // the pvnode is inserted at the correct position in the div's children
@@ -332,16 +343,20 @@ QWeb.addDirective({
   atNodeEncounter({ ctx, value, node }): boolean {
     ctx.addLine("//WIDGET");
     ctx.rootContext.shouldDefineOwner = true;
+    ctx.rootContext.shouldDefineUtils = true;
     let props = node.getAttribute("t-props");
     let keepAlive = node.getAttribute("t-keepalive") ? true : false;
 
-    // t-on- events...
+    // t-on- events and t-transition
     const events: [string, string][] = [];
+    let transition: string = "";
     const attributes = (<Element>node).attributes;
     for (let i = 0; i < attributes.length; i++) {
       const name = attributes[i].name;
       if (name.startsWith("t-on-")) {
         events.push([name.slice(5), attributes[i].textContent!]);
+      } else if (name === "t-transition") {
+        transition = attributes[i].textContent!;
       }
     }
 
@@ -378,13 +393,23 @@ QWeb.addDirective({
       ctx.addLine(`const ${refKey} = ${ctx.formatExpression(ref)}`);
       refExpr = `context.refs[${refKey}] = w${widgetID};`;
     }
-
+    let transitionsInsertCode = "";
+    if (transition) {
+      transitionsInsertCode = `utils.transitionInsert(vn.elm, '${transition}');`;
+    }
     let finalizeWidgetCode = `w${widgetID}.${
       keepAlive ? "unmount" : "destroy"
-    }()`;
+    }();`;
     if (ref) {
-      finalizeWidgetCode += `;delete context.refs[${refKey}]`;
+      finalizeWidgetCode += `delete context.refs[${refKey}];`; // FIXME: shouldn't we keep ref if keepAlive is true?
     }
+    if (transition) {
+      finalizeWidgetCode = `let finalize = () => {
+          ${finalizeWidgetCode}
+        };
+        utils.transitionRemove(vn.elm, '${transition}', finalize);`;
+    }
+
     let createHook = "";
     let classAttr = node.getAttribute("class");
     let tattClass = node.getAttribute("t-att-class");
@@ -447,8 +472,10 @@ QWeb.addDirective({
       ctx.addLine(`w${widgetID}.on('${event}', owner, owner['${method}'])`);
     }
     ctx.addLine(`def${defID} = w${widgetID}._prepare();`);
+    // hack: specify empty remove hook to prevent the node from being removed from the DOM
+    // FIXME: click to re-add widget during remove transition -> leak
     ctx.addLine(
-      `def${defID} = def${defID}.then(vnode=>{${createHook}let pvnode=h(vnode.sel, {key: ${templateID}, hook: {insert(vn){let nvn=w${widgetID}._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;${refExpr}},remove(){${finalizeWidgetCode}},destroy(){${finalizeWidgetCode}}}});c${
+      `def${defID} = def${defID}.then(vnode=>{${createHook}let pvnode=h(vnode.sel, {key: ${templateID}, hook: {insert(vn) {let nvn=w${widgetID}._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;${refExpr}${transitionsInsertCode}},remove() {},destroy(vn) {${finalizeWidgetCode}}}});c${
         ctx.parentNode
       }[_${dummyID}_index]=pvnode;w${widgetID}.__owl__.pvnode = pvnode;});`
     );