[IMP] qweb: add t-debug and t-log directives

doc/qweb.md

@@ -10,7 +10,12 @@
     - [`t-set` directive](#t-set-directive)
     - [`t-if` directive](#t-if-directive)
     - [Expression evaluation](#expression-evaluation)
-- [OWL Specific Extensions](#owl-specific-extensions)
+- [JS/OWL Specific Extensions](#jsowl-specific-extensions)
+    - [t-on directive](#t-on-directive)
+    - [Component: t-widget, t-props](#component-t-widget-t-props)
+    - [t-ref directive](#t-ref-directive)
+    - [t-key directive](#t-key-directive)
+    - [Debugging (t-debug and t-log)](#debugging-t-debug-and-t-log)
 
 ## Overview
 
@@ -205,8 +210,38 @@ compile time.
 
 todo
 
-## OWL Specific Extensions
 
-- t-on directive
-- t-widget, t-props, t-key
-- t-ref
+## JS/OWL Specific Extensions
+
+### t-on directive
+
+### Component: t-widget, t-props
+
+### t-ref
+
+### t-key
+
+
+### Debugging (t-debug and t-log)
+
+The javascript QWeb implementation provides two useful debugging directives:
+
+`t-debug` adds a debugger statement during template rendering:
+
+```xml
+<t t-if="a_test">
+    <t t-debug="">
+</t>
+````
+
+will stop execution if the browser dev tools are open.
+
+`t-log` takes an expression parameter, evaluates the expression during rendering and logs its result with console.log:
+
+```xml
+<t t-set="foo" t-value="42"/>
+<t t-log="foo"/>
+```
+
+will print 42 to the console
+

src/qweb.ts

@@ -198,7 +198,8 @@ export class QWeb {
       props: 1,
       key: 1,
       keepalive: 1,
-      debug: 1
+      debug: 1,
+      log: 1
     };
     [
       forEachDirective,
@@ -211,6 +212,8 @@ export class QWeb {
       callDirective,
       onDirective,
       refDirective,
+      debugDirective,
+      logDirective,
       widgetDirective
     ].forEach(d => this.addDirective(d));
     if (data) {
@@ -370,9 +373,6 @@ export class QWeb {
       throw new Error("A template should have one root node");
     }
     ctx.addLine(`return vn${ctx.rootNode};`);
-    if (isDebug) {
-      ctx.code.unshift("    debugger");
-    }
     let template;
     try {
       template = new Function(
@@ -697,7 +697,7 @@ export interface Directive {
   priority: number;
   // if return true, then directive is fully applied and there is no need to
   // keep processing node. Otherwise, we keep going.
-  atNodeEncounter?(info: CompilationInfo): boolean;
+  atNodeEncounter?(info: CompilationInfo): boolean | void;
   atNodeCreation?(info: CompilationInfo): void;
   finalize?(info: CompilationInfo): void;
 }
@@ -990,6 +990,23 @@ const refDirective: Directive = {
   }
 };
 
+const debugDirective: Directive = {
+  name: "debug",
+  priority: 99,
+  atNodeEncounter({ ctx }) {
+    ctx.addLine("debugger;");
+  }
+};
+
+const logDirective: Directive = {
+  name: "log",
+  priority: 99,
+  atNodeEncounter({ ctx, value }) {
+    const expr = ctx.formatExpression(value);
+    ctx.addLine(`console.log(${expr})`);
+  }
+};
+
 const widgetDirective: Directive = {
   name: "widget",
   priority: 100,

tests/__snapshots__/qweb.test.ts.snap

@@ -256,6 +256,36 @@ exports[`attributes tuple variable 1`] = `
 }"
 `;
 
+exports[`debugging t-debug 1`] = `
+"function anonymous(context,extra
+) {
+    var h = this.utils.h;
+    debugger;
+    var c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    if (true) {
+        debugger;
+        var c2 = [], p2 = {key:2};
+        var vn2 = h('span', p2, c2);
+        c1.push(vn2);
+        c2.push({text: \`hey\`});
+    }
+    return vn1;
+}"
+`;
+
+exports[`debugging t-log 1`] = `
+"function anonymous(context,extra
+) {
+    var h = this.utils.h;
+    var c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    var _2 = 42;
+    console.log(_2 + 3)
+    return vn1;
+}"
+`;
+
 exports[`foreach does not pollute the rendering context 1`] = `
 "function anonymous(context,extra
 ) {

tests/qweb.test.ts

@@ -1094,3 +1094,32 @@ describe("t-key", () => {
     ).toMatchSnapshot();
   });
 });
+
+describe("debugging", () => {
+  test("t-debug", () => {
+    qweb.addTemplate(
+      "test",
+      `<div t-debug="1"><t t-if="true"><span t-debug="1">hey</span></t></div>`
+    );
+    qweb.render('test');
+    expect(qweb.templates.test.toString()).toMatchSnapshot();
+  });
+
+  test("t-log", () => {
+    const consoleLog = console.log;
+    console.log = jest.fn()
+
+    qweb.addTemplate(
+      "test",
+      `<div>
+          <t t-set="foo" t-value="42"/>
+          <t t-log="foo + 3"/>
+        </div>`
+    );
+    qweb.render('test');
+    expect(qweb.templates.test.toString()).toMatchSnapshot();
+
+    expect(console.log).toHaveBeenCalledWith(45);
+    console.log = consoleLog;
+  });
+});