From fbf099f1f3b3afe2a4057211a97396ff7dbb5df2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Mon, 21 Jan 2019 14:38:44 +0100
Subject: [PATCH] add attributes module in widget (+lint)

---
 README.md             |  3 ++-
 demo/src/Counter.ts   |  4 ++--
 src/core/qweb_vdom.ts | 19 +++++++++++--------
 src/core/widget.ts    |  4 ++--
 tests/widget.test.ts  | 10 ++++++++++
 5 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index ee05488c..46164b2e 100644
--- a/README.md
+++ b/README.md
@@ -47,4 +47,5 @@ Before even thinking about using this in a real scenario:
 - remove the "if (${exprID} || ${exprID} === 0) {"
 - style is props? difference between props and attrs
 - text node
-- t-extend???
\ No newline at end of file
+- t-extend???
+- improve qweb generated code: do not assign object/array if no props/attrs/children
\ No newline at end of file
diff --git a/demo/src/Counter.ts b/demo/src/Counter.ts
index ca979997..16cb0a41 100644
--- a/demo/src/Counter.ts
+++ b/demo/src/Counter.ts
@@ -1,9 +1,9 @@
 import Widget from "../../src/core/widget";
 
 const template = `
-    <div>
+    <div t-debug="1">
         <button t-on-click="increment(-1)">-</button>
-        <span>Value: <t t-esc="state.counter"/></span>
+        <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
         <button t-on-click="increment(1)">+</button>
     </div>
 `;
diff --git a/src/core/qweb_vdom.ts b/src/core/qweb_vdom.ts
index 28d4ab3c..5631d6f5 100644
--- a/src/core/qweb_vdom.ts
+++ b/src/core/qweb_vdom.ts
@@ -34,7 +34,7 @@ export class Context {
   withParent(node: number): Context {
     const newContext: Context = Object.create(this);
     if (this === this.rootContext && this.parentNode) {
-      throw new Error('A template should not have more than one root node');
+      throw new Error("A template should not have more than one root node");
     }
     newContext.parentNode = node;
     if (!this.rootContext.rootNode) {
@@ -352,7 +352,6 @@ export default class QWeb {
     let p =
       attrs.length + tattrs.length > 0 ? `{attrs:{${attrs.join(",")}}}` : "{}";
     ctx.addLine(`let c${nodeID} = [], p${nodeID} = ${p}`);
-
     for (let id of tattrs) {
       ctx.addLine(`if (_${id} instanceof Array) {`);
       ctx.indent();
@@ -657,19 +656,23 @@ const onDirective: Directive = {
 const widgetDirective: Directive = {
   name: "widget",
   priority: 100,
-  atNodeEncounter({ ctx, fullName, value, node, qweb}): boolean {
+  atNodeEncounter({ ctx, fullName, value, node, qweb }): boolean {
     let dummyID = ctx.generateID();
     let defID = ctx.generateID();
     ctx.addLine(`let _${dummyID} = {} // DUMMY`);
-      ctx.addLine(`c${ctx.parentNode}.push(_${dummyID})`);
-    let props = node.getAttribute('t-props');
+    ctx.addLine(`c${ctx.parentNode}.push(_${dummyID})`);
+    let props = node.getAttribute("t-props");
     let widgetID = ctx.generateID();
-    ctx.addLine(`let _${widgetID} = new context.widgets['${value}'](context, ${props})`);
-    ctx.addLine(`let def${defID} = _${widgetID}.mount().then(vnode=>Object.assign(_${dummyID}, vnode))`);
+    ctx.addLine(
+      `let _${widgetID} = new context.widgets['${value}'](context, ${props})`
+    );
+    ctx.addLine(
+      `let def${defID} = _${widgetID}.mount().then(vnode=>Object.assign(_${dummyID}, vnode))`
+    );
     ctx.addLine(`context._TEMP.push(def${defID})`);
 
     // split into extra directive?
-    let ref = node.getAttribute('t-ref');
+    let ref = node.getAttribute("t-ref");
     if (ref) {
       ctx.addLine(`context.refs['${ref}'] = _${widgetID}`);
     }
diff --git a/src/core/widget.ts b/src/core/widget.ts
index 692ec3e6..f61bbf0e 100644
--- a/src/core/widget.ts
+++ b/src/core/widget.ts
@@ -1,11 +1,11 @@
 import QWeb from "./qweb_vdom";
 
 import { init } from "../libs/snabbdom/src/snabbdom";
-import sdProps from "../libs/snabbdom/src/modules/props";
 import sdListeners from "../libs/snabbdom/src/modules/eventlisteners";
+import sdAttrs from "../libs/snabbdom/src/modules/attributes";
 import { VNode } from "../libs/snabbdom/src/vnode";
 
-const patch = init([sdProps, sdListeners]);
+const patch = init([sdListeners, sdAttrs]);
 
 export interface Env {
   qweb: QWeb;
diff --git a/tests/widget.test.ts b/tests/widget.test.ts
index ae4a59ac..793695d2 100644
--- a/tests/widget.test.ts
+++ b/tests/widget.test.ts
@@ -53,6 +53,16 @@ describe("basic widget properties", () => {
     await click((<HTMLElement>counter.el).getElementsByTagName("button")[0]);
     expect(target.innerHTML).toBe("<div>1<button>Inc</button></div>");
   });
+
+  test("widget style and classname", async () => {
+    class StyledWidget extends Widget {
+      template= `<div style="font-weight:bold;" class="some-class">world</div>`;
+    }
+    const widget = makeWidget(StyledWidget);
+    const target = document.createElement("div");
+    await widget.mount(target);
+    expect(target.innerHTML).toBe(`<div style="font-weight:bold;" class="some-class">world</div>`);
+  });
 });
 
 describe("lifecycle hooks", () => {