add attributes module in widget (+lint)

README.md

@@ -48,3 +48,4 @@ Before even thinking about using this in a real scenario:
 - style is props? difference between props and attrs
 - text node
 - t-extend???
+- improve qweb generated code: do not assign object/array if no props/attrs/children

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>
 `;

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();
@@ -662,14 +661,18 @@ const widgetDirective: Directive = {
     let defID = ctx.generateID();
     ctx.addLine(`let _${dummyID} = {} // DUMMY`);
     ctx.addLine(`c${ctx.parentNode}.push(_${dummyID})`);
-    let props = node.getAttribute('t-props');
+    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}`);
     }

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;

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", () => {