add t-keep-alive directive

web/static/src/ts/core/Widget.ts

@@ -112,11 +112,27 @@ export class Widget<T extends WEnv, Props> {
         if (!w.__widget__.isMounted && this.el!.contains(w.el)) {
           w.__widget__.isMounted = true;
           w.mounted();
+          return true;
         }
+        return false;
       });
     }
   }
 
+  detach() {
+    if (this.el) {
+      this.visitSubTree(w => {
+        if (w.__widget__.isMounted) {
+          w.willUnmount();
+          w.__widget__.isMounted = false;
+          return true;
+        }
+        return false;
+      });
+      this.el.remove();
+    }
+  }
+
   destroy() {
     if (!this.__widget__.isDestroyed) {
       for (let id in this.__widget__.children) {
@@ -221,11 +237,13 @@ export class Widget<T extends WEnv, Props> {
     return this.__widget__.vnode;
   }
 
-  private visitSubTree(callback: (w: Widget<T, any>) => void) {
-    callback(this);
-    const children = this.__widget__.children;
-    for (let id in children) {
-      children[id].visitSubTree(callback);
+  private visitSubTree(callback: (w: Widget<T, any>) => boolean) {
+    const shouldVisitChildren = callback(this);
+    if (shouldVisitChildren) {
+      const children = this.__widget__.children;
+      for (let id in children) {
+        children[id].visitSubTree(callback);
+      }
     }
   }
 }

web/static/src/ts/core/qweb_vdom.ts

@@ -703,8 +703,10 @@ const widgetDirective: Directive = {
   name: "widget",
   priority: 100,
   atNodeEncounter({ ctx, value, node, qweb }): boolean {
+    ctx.addLine("//WIDGET");
     ctx.rootContext.shouldDefineOwner = true;
     let props = node.getAttribute("t-props");
+    let keepAlive = node.getAttribute("t-keep-alive") ? true : false;
     let key = node.getAttribute("t-key");
     if (key) {
       key = qweb._formatExpression(key);
@@ -748,9 +750,11 @@ const widgetDirective: Directive = {
     ctx.addLine(`if (w${widgetID}) {`);
     ctx.indent();
     ctx.addLine(
-      `def${defID} = w${widgetID}.updateProps(${props}).then(()=>{let vnode=h(w${widgetID}.__widget__.vnode.sel, {key: ${templateID}});c${
+      `def${defID} = w${widgetID}.updateProps(${props}).then(()=>{let vnode=h(w${widgetID}.__widget__.vnode.sel, {key: ${templateID}});vnode.elm=w${widgetID}.el;c${
         ctx.parentNode
-      }[_${dummyID}_index]=vnode;vnode.data.hook = {remove(){w${widgetID}.destroy()}}});`
+      }[_${dummyID}_index]=vnode;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w${widgetID}.el,a.elm);a.elm=w${widgetID}.el;},remove(){w${widgetID}.${
+        keepAlive ? "detach" : "destroy"
+      }()}}});`
     );
     ctx.dedent();
     ctx.addLine("} else {");
@@ -765,7 +769,9 @@ const widgetDirective: Directive = {
     ctx.addLine(
       `def${defID} = _${widgetID}._start().then(() => _${widgetID}._render()).then(vnode=>{let pvnode=h(vnode.sel, {key: ${templateID}});c${
         ctx.parentNode
-      }[_${dummyID}_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=_${widgetID}._mount(vnode, vn.elm);pvnode.elm=nvn.elm},remove(){_${widgetID}.destroy()}}});`
+      }[_${dummyID}_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=_${widgetID}._mount(vnode, vn.elm);pvnode.elm=nvn.elm},remove(){_${widgetID}.${
+        keepAlive ? "detach" : "destroy"
+      }()}}});`
     );
 
     let ref = node.getAttribute("t-ref");