[FIX] qweb: properly handle t-raw in various situations

closes #325
closes #327

src/qweb/base_directives.ts

@@ -1,6 +1,7 @@
 import { Context } from "./context";
 import { QWebExprVar } from "./expression_parser";
 import { QWeb } from "./qweb";
+import { htmlToVDOM } from "../vdom/html_to_vdom";
 
 /**
  * Owl QWeb Directives
@@ -25,6 +26,8 @@ QWeb.utils.getFragment = function(str: string): DocumentFragment {
   return temp.content;
 };
 
+QWeb.utils.htmlToVDOM = htmlToVDOM;
+
 function compileValueNode(value: any, node: Element, qweb: QWeb, ctx: Context) {
   if (value === "0" && ctx.caller) {
     qweb._compileNode(ctx.caller, ctx);
@@ -60,15 +63,8 @@ function compileValueNode(value: any, node: Element, qweb: QWeb, ctx: Context) {
       }
     }
   } else {
-    let fragID = ctx.generateID();
     ctx.rootContext.shouldDefineUtils = true;
-    ctx.addLine(`var frag${fragID} = utils.getFragment(${exprID})`);
-    let tempNodeID = ctx.generateID();
-    ctx.addLine(`var p${tempNodeID} = {hook: {`);
-    ctx.addLine(`  insert: n => n.elm.parentNode.replaceChild(frag${fragID}, n.elm),`);
-    ctx.addLine(`}};`);
-    ctx.addLine(`var vn${tempNodeID} = h('div', p${tempNodeID})`);
-    ctx.addLine(`c${ctx.parentNode}.push(vn${tempNodeID});`);
+    ctx.addLine(`c${ctx.parentNode}.push(...utils.htmlToVDOM(${exprID}));`);
   }
   if (node.childNodes.length) {
     ctx.addElse();

src/qweb/extensions.ts

@@ -207,9 +207,7 @@ QWeb.addDirective({
     );
     ctx.addIf(`slot${slotKey}`);
     ctx.addLine(
-      `slot${slotKey}.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c${
-        ctx.parentNode
-      }, vars: extra.vars, parent: owner}));`
+      `slot${slotKey}.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c${ctx.parentNode}, vars: extra.vars, parent: owner}));`
     );
     ctx.closeIf();
     return true;

src/qweb/qweb.ts

@@ -458,8 +458,8 @@ export class QWeb extends EventBus {
         if (!(dName in QWeb.DIRECTIVE_NAMES)) {
           throw new Error(`Unknown QWeb directive: '${attrName}'`);
         }
-        if (node.tagName !== 't' && (attrName === 't-esc' || attrName === 't-raw')) {
-          const tNode = document.createElement('t');
+        if (node.tagName !== "t" && (attrName === "t-esc" || attrName === "t-raw")) {
+          const tNode = document.createElement("t");
           tNode.setAttribute(attrName, node.getAttribute(attrName)!);
           for (let child of Array.from(node.childNodes)) {
             tNode.appendChild(child);

src/vdom/html_to_vdom.ts

@@ -0,0 +1,29 @@
+import { VNode, h } from "./vdom";
+
+const parser = new DOMParser();
+
+export function htmlToVDOM(html: string): VNode[] {
+  const doc = parser.parseFromString(html, "text/html");
+  const result: VNode[] = [];
+  for (let child of doc.body.childNodes) {
+    result.push(htmlToVNode(child));
+  }
+  return result;
+}
+
+function htmlToVNode(node: ChildNode): VNode {
+  if (!(node instanceof Element)) {
+    return { text: node.textContent! } as VNode;
+  }
+  const attrs = {};
+  for (let attr of node.attributes) {
+    attrs[attr.name] = attr.textContent;
+  }
+  const children: VNode[] = [];
+  if (node.hasChildNodes) {
+    for (let c of node.childNodes) {
+      children.push(htmlToVNode(c));
+    }
+  }
+  return h((node as Element).tagName, { attrs }, children);
+}