wip

Add action to launch the tests on the PRs

.github/workflows/deploy.yml

@@ -0,0 +1,26 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test

package.json

@@ -48,6 +48,7 @@
     "jest": "^23.6.0",
     "jest-environment-jsdom": "^24.7.1",
     "live-server": "^1.2.1",
+    "monaco-editor": "^0.21.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
     "rollup": "^1.6.0",

src/qweb/base_directives.ts

@@ -312,13 +312,9 @@ QWeb.addDirective({
     let valuesID = ctx.generateID();
     ctx.addLine(`let _${keysID} = _${valuesID} = _${arrayID};`);
     ctx.addIf(`!(_${arrayID} instanceof Array)`);
-    ctx.addIf(`typeof _${arrayID}[Symbol.iterator] === 'function'`);
-    ctx.addLine(`_${keysID} = [..._${arrayID}];`)
-    ctx.addElse();
     ctx.addLine(`_${keysID} = Object.keys(_${arrayID});`);
     ctx.addLine(`_${valuesID} = Object.values(_${arrayID});`);
     ctx.closeIf();
-    ctx.closeIf();
     ctx.addLine(`let _length${keysID} = _${keysID}.length;`);
     let varsID = ctx.startProtectScope(true);
     const loopVar = `i${ctx.loopNumber}`;

tests/component/__snapshots__/component.test.ts.snap

@@ -53,12 +53,8 @@ exports[`basic widget properties reconciliation alg works for t-foreach in t-for
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -74,12 +70,8 @@ exports[`basic widget properties reconciliation alg works for t-foreach in t-for
         if (!_6) { throw new Error('QWeb error: Invalid loop expression')}
         let _7 = _8 = _6;
         if (!(_6 instanceof Array)) {
-            if (typeof _6[Symbol.iterator] === 'function') {
+            _7 = Object.keys(_6);
-                _7 = [..._6];
+            _8 = Object.values(_6);
-            } else {
-                _7 = Object.keys(_6);
-                _8 = Object.values(_6);
-            }
         }
         let _length7 = _7.length;
         let _origScope9 = scope;
@@ -280,12 +272,8 @@ exports[`composition sub components with some state rendered in a loop 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -570,12 +558,8 @@ exports[`other directives with t-component t-on expression captured in t-foreach
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -616,12 +600,8 @@ exports[`other directives with t-component t-on expression in t-foreach 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -672,12 +652,8 @@ exports[`other directives with t-component t-on expression in t-foreach with t-s
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -729,12 +705,8 @@ exports[`other directives with t-component t-on method call in t-foreach 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -1399,12 +1371,8 @@ exports[`other directives with t-component t-set outside modified in t-foreach 1
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -1553,12 +1521,8 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -1833,12 +1797,8 @@ exports[`t-model directive in a t-foreach 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -1877,12 +1837,8 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;

tests/component/__snapshots__/slots.test.ts.snap

@@ -348,12 +348,8 @@ exports[`t-slot directive slots are rendered with proper context, part 2 2`] = `
     if (!_3) { throw new Error('QWeb error: Invalid loop expression')}
     let _4 = _5 = _3;
     if (!(_3 instanceof Array)) {
-        if (typeof _3[Symbol.iterator] === 'function') {
+        _4 = Object.keys(_3);
-            _4 = [..._3];
+        _5 = Object.values(_3);
-        } else {
-            _4 = Object.keys(_3);
-            _5 = Object.values(_3);
-        }
     }
     let _length4 = _4.length;
     let _origScope6 = scope;
@@ -449,12 +445,8 @@ exports[`t-slot directive slots are rendered with proper context, part 3 2`] = `
     if (!_3) { throw new Error('QWeb error: Invalid loop expression')}
     let _4 = _5 = _3;
     if (!(_3 instanceof Array)) {
-        if (typeof _3[Symbol.iterator] === 'function') {
+        _4 = Object.keys(_3);
-            _4 = [..._3];
+        _5 = Object.values(_3);
-        } else {
-            _4 = Object.keys(_3);
-            _5 = Object.values(_3);
-        }
     }
     let _length4 = _4.length;
     let _origScope6 = scope;

tests/qweb/__snapshots__/qweb.test.ts.snap

@@ -431,12 +431,8 @@ exports[`foreach does not pollute the rendering context 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -470,12 +466,8 @@ exports[`foreach iterate on items (on a element node) 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -512,12 +504,8 @@ exports[`foreach iterate on items 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -563,12 +551,8 @@ exports[`foreach iterate, dict param 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -614,12 +598,8 @@ exports[`foreach iterate, position 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -663,12 +643,8 @@ exports[`foreach t-call with body in t-foreach in t-foreach 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -684,12 +660,8 @@ exports[`foreach t-call with body in t-foreach in t-foreach 1`] = `
         if (!_6) { throw new Error('QWeb error: Invalid loop expression')}
         let _7 = _8 = _6;
         if (!(_6 instanceof Array)) {
-            if (typeof _6[Symbol.iterator] === 'function') {
+            _7 = Object.keys(_6);
-                _7 = [..._6];
+            _8 = Object.values(_6);
-            } else {
-                _7 = Object.keys(_6);
-                _8 = Object.values(_6);
-            }
         }
         let _length7 = _7.length;
         let _origScope9 = scope;
@@ -759,12 +731,8 @@ exports[`foreach t-call without body in t-foreach in t-foreach 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -780,12 +748,8 @@ exports[`foreach t-call without body in t-foreach in t-foreach 1`] = `
         if (!_6) { throw new Error('QWeb error: Invalid loop expression')}
         let _7 = _8 = _6;
         if (!(_6 instanceof Array)) {
-            if (typeof _6[Symbol.iterator] === 'function') {
+            _7 = Object.keys(_6);
-                _7 = [..._6];
+            _8 = Object.values(_6);
-            } else {
-                _7 = Object.keys(_6);
-                _8 = Object.values(_6);
-            }
         }
         let _length7 = _7.length;
         let _origScope9 = scope;
@@ -849,12 +813,8 @@ exports[`foreach t-foreach in t-forach 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -870,12 +830,8 @@ exports[`foreach t-foreach in t-forach 1`] = `
         if (!_6) { throw new Error('QWeb error: Invalid loop expression')}
         let _7 = _8 = _6;
         if (!(_6 instanceof Array)) {
-            if (typeof _6[Symbol.iterator] === 'function') {
+            _7 = Object.keys(_6);
-                _7 = [..._6];
+            _8 = Object.values(_6);
-            } else {
-                _7 = Object.keys(_6);
-                _8 = Object.values(_6);
-            }
         }
         let _length7 = _7.length;
         let _origScope9 = scope;
@@ -905,162 +861,6 @@ exports[`foreach t-foreach in t-forach 1`] = `
 }"
 `;
 
-exports[`foreach t-foreach supports custom iterators 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    let _2 = scope['iterator'];
-    if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
-    let _3 = _4 = _2;
-    if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
-            _3 = [..._2];
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
-    }
-    let _length3 = _3.length;
-    let _origScope5 = scope;
-    scope = Object.create(scope);
-    for (let i1 = 0; i1 < _length3; i1++) {
-        scope.item_first = i1 === 0
-        scope.item_last = i1 === _length3 - 1
-        scope.item_index = i1
-        scope.item = _3[i1]
-        scope.item_value = _4[i1]
-        let key1 = i1;
-        let _6 = scope['item'];
-        if (_6 != null) {
-            c1.push({text: _6});
-        }
-    }
-    scope = _origScope5;
-    return vn1;
-}"
-`;
-
-exports[`foreach t-foreach supports custom iterators 2`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    let _2 = scope['iterator'];
-    if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
-    let _3 = _4 = _2;
-    if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
-            _3 = [..._2];
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
-    }
-    let _length3 = _3.length;
-    let _origScope5 = scope;
-    scope = Object.create(scope);
-    for (let i1 = 0; i1 < _length3; i1++) {
-        scope.item_first = i1 === 0
-        scope.item_last = i1 === _length3 - 1
-        scope.item_index = i1
-        scope.item = _3[i1]
-        scope.item_value = _4[i1]
-        let key1 = i1;
-        let _6 = scope['item'];
-        if (_6 != null) {
-            c1.push({text: _6});
-        }
-    }
-    scope = _origScope5;
-    return vn1;
-}"
-`;
-
-exports[`foreach t-foreach supports custom iterators 3`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    let _2 = scope['iterator'];
-    if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
-    let _3 = _4 = _2;
-    if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
-            _3 = [..._2];
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
-    }
-    let _length3 = _3.length;
-    let _origScope5 = scope;
-    scope = Object.create(scope);
-    for (let i1 = 0; i1 < _length3; i1++) {
-        scope.item_first = i1 === 0
-        scope.item_last = i1 === _length3 - 1
-        scope.item_index = i1
-        scope.item = _3[i1]
-        scope.item_value = _4[i1]
-        let key1 = i1;
-        let _6 = scope['item'];
-        if (_6 != null) {
-            c1.push({text: _6});
-        }
-    }
-    scope = _origScope5;
-    return vn1;
-}"
-`;
-
-exports[`foreach t-foreach supports custom iterators 4`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    let _2 = scope['iterator'];
-    if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
-    let _3 = _4 = _2;
-    if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
-            _3 = [..._2];
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
-    }
-    let _length3 = _3.length;
-    let _origScope5 = scope;
-    scope = Object.create(scope);
-    for (let i1 = 0; i1 < _length3; i1++) {
-        scope.item_first = i1 === 0
-        scope.item_last = i1 === _length3 - 1
-        scope.item_index = i1
-        scope.item = _3[i1]
-        scope.item_value = _4[i1]
-        let key1 = i1;
-        let _6 = scope['item'];
-        if (_6 != null) {
-            c1.push({text: _6});
-        }
-    }
-    scope = _origScope5;
-    return vn1;
-}"
-`;
-
 exports[`foreach warn if no key in some case 1`] = `
 "function anonymous(context, extra
 ) {
@@ -1073,12 +873,8 @@ exports[`foreach warn if no key in some case 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -1146,12 +942,8 @@ exports[`misc global 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -1717,12 +1509,8 @@ exports[`t-call (template calling recursive template, part 2 2`] = `
     if (!_5) { throw new Error('QWeb error: Invalid loop expression')}
     let _6 = _7 = _5;
     if (!(_5 instanceof Array)) {
-        if (typeof _5[Symbol.iterator] === 'function') {
+        _6 = Object.keys(_5);
-            _6 = [..._5];
+        _7 = Object.values(_5);
-        } else {
-            _6 = Object.keys(_5);
-            _7 = Object.values(_5);
-        }
     }
     let _length6 = _6.length;
     let _origScope8 = scope;
@@ -1800,12 +1588,8 @@ exports[`t-call (template calling recursive template, part 3 2`] = `
     if (!_5) { throw new Error('QWeb error: Invalid loop expression')}
     let _6 = _7 = _5;
     if (!(_5 instanceof Array)) {
-        if (typeof _5[Symbol.iterator] === 'function') {
+        _6 = Object.keys(_5);
-            _6 = [..._5];
+        _7 = Object.values(_5);
-        } else {
-            _6 = Object.keys(_5);
-            _7 = Object.values(_5);
-        }
     }
     let _length6 = _6.length;
     let _origScope8 = scope;
@@ -1889,12 +1673,8 @@ exports[`t-call (template calling recursive template, part 4: with t-set recursi
     if (!_5) { throw new Error('QWeb error: Invalid loop expression')}
     let _6 = _7 = _5;
     if (!(_5 instanceof Array)) {
-        if (typeof _5[Symbol.iterator] === 'function') {
+        _6 = Object.keys(_5);
-            _6 = [..._5];
+        _7 = Object.values(_5);
-        } else {
-            _6 = Object.keys(_5);
-            _7 = Object.values(_5);
-        }
     }
     let _length6 = _6.length;
     let _origScope8 = scope;
@@ -2030,12 +1810,8 @@ exports[`t-call (template calling t-call with t-set inside and outside 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -2811,12 +2587,8 @@ exports[`t-key t-key directive in a list 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -2919,12 +2691,8 @@ exports[`t-on can bind handlers with loop variable as argument 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -3205,12 +2973,8 @@ exports[`t-on t-on with prevent modifier in t-foreach 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -3463,12 +3227,8 @@ exports[`t-ref refs in a loop 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;
@@ -3711,12 +3471,8 @@ exports[`t-set t-set should reuse variable if possible 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
-        if (typeof _2[Symbol.iterator] === 'function') {
+        _3 = Object.keys(_2);
-            _3 = [..._2];
+        _4 = Object.values(_2);
-        } else {
-            _3 = Object.keys(_2);
-            _4 = Object.values(_2);
-        }
     }
     let _length3 = _3.length;
     let _origScope5 = scope;

tests/qweb/qweb.test.ts

@@ -1263,44 +1263,6 @@ describe("foreach", () => {
     );
     console.warn = consoleWarn;
   });
-
-  test('t-foreach supports custom iterators', () => {
-    qweb.addTemplate(
-      "test",
-      `
-      <div>
-        <t t-foreach="iterator" t-as="item">
-          <t t-esc="item"/>
-        </t>
-    </div>`
-    );
-
-    let iterator: any = [1, 2, 3];
-    let result = trim(renderToString(qweb, "test", { iterator } ));
-    let expected = `<div>123</div>`;
-    expect(result).toBe(expected);
-    
-    iterator = { 1: 1, 2: 2, 3:3 };
-    result = trim(renderToString(qweb, "test", { iterator } ));
-    expected = `<div>123</div>`;
-    expect(result).toBe(expected);
-    
-    iterator = new Set([1, 2, 3]);
-    result = trim(renderToString(qweb, "test", { iterator } ));
-    expected = `<div>123</div>`;
-    expect(result).toBe(expected);
-      
-    iterator = {}
-    iterator[Symbol.iterator] = function* () {
-      yield 1;
-      yield 2;
-      yield 3;
-    }
-    result = trim(renderToString(qweb, "test", { iterator } ));
-    expected = `<div>123</div>`;
-    expect(result).toBe(expected);
-  });
-
 });
 
 describe("misc", () => {

tools/playground/app.js

@@ -1,4 +1,4 @@
-import { SAMPLES } from "./samples.js";
+import { SAMPLES as samples }  from "./samples.js" ;
 const { useState, useRef, onMounted, onWillUnmount } = owl.hooks;
 //------------------------------------------------------------------------------
 // Constants, helpers, utils
@@ -6,18 +6,18 @@ const { useState, useRef, onMounted, onWillUnmount } = owl.hooks;
 let owlJS;
 
 async function owlSourceCode() {
-  if (owlJS) {
+    if (owlJS) {
+        return owlJS;
+    }
+    const result = await fetch("../owl.js");
+    owlJS = await result.text();
     return owlJS;
-  }
-  const result = await fetch("../owl.js");
-  owlJS = await result.text();
-  return owlJS;
 }
 
 const MODES = {
-  js: "ace/mode/javascript",
+    js: "ace/mode/javascript",
-  css: "ace/mode/css",
+    css: "ace/mode/css",
-  xml: "ace/mode/xml"
+    xml: "ace/mode/xml"
 };
 
 const DEFAULT_XML = `<templates>
@@ -71,22 +71,23 @@ if __name__ == "__main__":
  * Make an iframe, with all the js, css and xml properly injected.
  */
 function makeCodeIframe(js, css, xml) {
-  const sanitizedXML = xml.replace(/<!--[\s\S]*?-->/g, "");
+    const sanitizedXML = xml.replace(/<!--[\s\S]*?-->/g, "");
 
 
-  // create iframe
+    // create iframe
-  const iframe = document.createElement("iframe");
+    const iframe = document.createElement("iframe");
+    iframe.className += "h-full w-full";
 
-  iframe.onload = () => {
+    iframe.onload = () => {
-    const doc = iframe.contentDocument;
+        const doc = iframe.contentDocument;
-    // inject js
+        // inject js
-    const owlScript = doc.createElement("script");
+        const owlScript = doc.createElement("script");
-    owlScript.type = "text/javascript";
+        owlScript.type = "text/javascript";
-    owlScript.src = "../owl.js";
+        owlScript.src = "../owl.js";
-    owlScript.addEventListener("load", () => {
+        owlScript.addEventListener("load", () => {
-      const script = doc.createElement("script");
+            const script = doc.createElement("script");
-      script.type = "text/javascript";
+            script.type = "text/javascript";
-      const content = `
+            const content = `
         {
           owl.config.mode = 'dev';
           let templates = \`${sanitizedXML}\`;
@@ -94,32 +95,32 @@ function makeCodeIframe(js, css, xml) {
           owl.Component.env = { qweb };
         }
         ${js}`;
-      script.innerHTML = content;
+            script.innerHTML = content;
-      doc.body.appendChild(script);
+            doc.body.appendChild(script);
-    });
+        });
-    doc.head.appendChild(owlScript);
+        doc.head.appendChild(owlScript);
 
-    // inject css
+        // inject css
-    const style = document.createElement("style");
+        const style = document.createElement("style");
-    style.innerHTML = css;
+        style.innerHTML = css;
-    doc.head.appendChild(style);
+        doc.head.appendChild(style);
-  };
+    };
-  return iframe;
+    return iframe;
 }
 
 /**
  * Make a zip file containing a functioning application
  */
 async function makeApp(js, css, xml) {
-  await owl.utils.loadJS("libs/jszip.min.js");
+    await owl.utils.loadJS("libs/jszip.min.js");
 
-  const zip = new JSZip();
+    const zip = new JSZip();
-  const processedJS = js
+    const processedJS = js
-    .split("\n")
+        .split("\n")
-    .map(l => (l === "" ? "" : "  " + l))
+        .map(l => (l === "" ? "" : "  " + l))
-    .join("\n");
+        .join("\n");
 
-  const JS = `
+    const JS = `
 /**
  * This is the javascript code defined in the playground.
  * In a larger application, this code should probably be moved in different
@@ -150,278 +151,248 @@ async function start() {
 start();
 `;
 
-  zip.file("app.js", JS);
+    zip.file("app.js", JS);
-  zip.file("app.css", css);
+    zip.file("app.css", css);
-  zip.file("app.py", APP_PY);
+    zip.file("app.py", APP_PY);
-  zip.file("app.xml", xml);
+    zip.file("app.xml", xml);
-  zip.file("index.html", DEFAULT_HTML);
+    zip.file("index.html", DEFAULT_HTML);
-  zip.file("owl.js", owlSourceCode());
+    zip.file("owl.js", owlSourceCode());
-  return zip.generateAsync({ type: "blob" });
+    return zip.generateAsync({ type: "blob" });
 }
 
 //------------------------------------------------------------------------------
 // SAMPLES
 //------------------------------------------------------------------------------
 function loadSamples() {
-  let result = SAMPLES.slice();
+    let result = samples.slice();
-  const localSample = localStorage.getItem("owl-playground-local-sample");
+    const localSample = localStorage.getItem("owl-playground-local-sample");
-  if (localSample) {
+    if (localSample) {
-    const { js, css, xml } = JSON.parse(localSample);
+        const { js, css, xml } = JSON.parse(localSample);
-    result.unshift({
+        result.unshift({
-      description: "Local Storage Code",
+            description: "Local Storage Code",
-      code: js,
+            code: js,
-      xml,
+            xml,
-      css
+            css
-    });
+        });
-  }
+    }
-  return result;
+    return result;
 }
 
 function saveLocalSample(js, css, xml) {
-  const str = JSON.stringify({ js, css, xml });
+    const str = JSON.stringify({ js, css, xml });
-  localStorage.setItem("owl-playground-local-sample", str);
+    localStorage.setItem("owl-playground-local-sample", str);
 }
 
 function deleteLocalSample() {
-  localStorage.removeItem("owl-playground-local-sample");
+    localStorage.removeItem("owl-playground-local-sample");
 }
 
 function useSamples() {
-  const samples = loadSamples();
+    return loadSamples();
-  const component = owl.Component.current;
-  let interval;
-
-  onMounted(() => {
-    const state = component.state;
-    interval = setInterval(() => {
-      if (component.isDirty) {
-        saveLocalSample(state.js, state.css, state.xml);
-      }
-    }, 1000);
-  });
-  onWillUnmount(() => {
-    clearInterval(interval);
-  });
-  return samples;
-}
-//------------------------------------------------------------------------------
-// Tabbed editor
-//------------------------------------------------------------------------------
-class TabbedEditor extends owl.Component {
-  constructor(parent, props) {
-    super(parent, props);
-    this.state = useState({
-      currentTab: props.js !== false ? "js" : props.xml ? "xml" : "css"
-    });
-    this.setTab = owl.utils.debounce(this.setTab, 250, true);
-
-    this.sessions = {};
-    this._setupSessions(props);
-    this.editorNode = useRef("editor");
-    this._updateCode = this._updateCode.bind(this);
-  }
-
-  mounted() {
-    this.editor = this.editor || ace.edit(this.editorNode.el);
-
-    this.editor.setValue(this.props[this.state.currentTab], -1);
-    this.editor.setFontSize("12px");
-    this.editor.setTheme("ace/theme/monokai");
-    this.editor.setSession(this.sessions[this.state.currentTab]);
-    const tabSize = this.state.currentTab === "xml" ? 2 : 4;
-    this.editor.session.setOption("tabSize", tabSize);
-    this.editor.on("blur", this._updateCode);
-    this.interval = setInterval(this._updateCode, 3000);
-  }
-
-  willUnmount() {
-    clearInterval(this.interval);
-    this.editor.off("blur", this._updateCode);
-  }
-  willUpdateProps(nextProps) {
-    this._setupSessions(nextProps);
-  }
-
-  patched() {
-    const session = this.sessions[this.state.currentTab];
-    let content = this.props[this.state.currentTab];
-    if (content === false) {
-      const tab = this.props.js !== false ? "js" : this.props.xml ? "xml" : "css";
-      content = this.props[tab];
-      this.state.currentTab = tab;
-    }
-    if (this.editor.getValue() !== content) {
-      session.setValue(content, -1);
-      this.editor.setSession(session);
-      this.editor.resize();
-    }
-  }
-
-  setTab(tab) {
-    if (this.state.currentTab !== tab) {
-      this.state.currentTab = tab;
-      const session = this.sessions[this.state.currentTab];
-      session.doc.setValue(this.props[tab], -1);
-      this.editor.setSession(session);
-    }
-  }
-
-  onMouseDown(ev) {
-    if (ev.target.tagName === "DIV") {
-      let y = ev.clientY;
-      const resizer = ev => {
-        const delta = ev.clientY - y;
-        y = ev.clientY;
-        this.trigger("updatePanelHeight", { delta });
-      };
-      document.body.addEventListener("mousemove", resizer);
-      document.body.addEventListener("mouseup", () => {
-        document.body.removeEventListener("mousemove", resizer);
-      });
-    }
-  }
-
-  _setupSessions(props) {
-    for (let tab of ["js", "xml", "css"]) {
-      if (props[tab] !== false && !this.sessions[tab]) {
-        this.sessions[tab] = new ace.EditSession(props[tab], MODES[tab]);
-        this.sessions[tab].setOption("useWorker", false);
-        const tabSize = tab === "xml" ? 2 : 4;
-        this.sessions[tab].setOption("tabSize", tabSize);
-        this.sessions[tab].setUndoManager(new ace.UndoManager());
-      }
-    }
-  }
-
-  _updateCode() {
-    const editorValue = this.editor.getValue();
-    const propsValue = this.props[this.state.currentTab];
-    if (editorValue !== propsValue) {
-      this.trigger("updateCode", {
-        type: this.state.currentTab,
-        value: editorValue
-      });
-    }
-  }
 }
 
 //------------------------------------------------------------------------------
 // MAIN APP
 //------------------------------------------------------------------------------
-class App extends owl.Component {
-  constructor(...args) {
-    super(...args);
-    this.version = owl.__info__.version;
-    this.SAMPLES = useSamples();
-    this.isDirty = false;
 
-    this.state = useState({
+class Tab extends owl.Component {
-      js: this.SAMPLES[0].code,
-      css: this.SAMPLES[0].css || "",
-      xml: this.SAMPLES[0].xml || DEFAULT_XML,
-      displayWelcome: true,
-      splitLayout: true,
-      leftPaneWidth: Math.ceil(window.innerWidth / 2),
-      topPanelHeight: null
-    });
-
-    this.toggleLayout = owl.utils.debounce(this.toggleLayout, 250, true);
-    this.runCode = owl.utils.debounce(this.runCode, 250, true);
-    this.downloadCode = owl.utils.debounce(this.downloadCode, 250, true);
-    this.content = useRef("content");
-  }
-
-  runCode() {
-    this.content.el.innerHTML = "";
-    this.state.displayWelcome = false;
-
-    const { js, css, xml } = this.state;
-    const subiframe = makeCodeIframe(js, css, xml);
-    this.content.el.appendChild(subiframe);
-  }
-
-  setSample(ev) {
-    const sample = this.SAMPLES.find(s => s.description === ev.target.value);
-    this.state.js = sample.code;
-    this.state.css = sample.css || "";
-    this.state.xml = sample.xml || DEFAULT_XML;
-    deleteLocalSample();
-    this.isDirty = false;
-  }
-
-  get leftPaneStyle() {
-    return `width:${this.state.leftPaneWidth}px`;
-  }
-
-  get rightPaneStyle() {
-    return `width:${window.innerWidth - 6 - this.state.leftPaneWidth}px`;
-  }
-
-  get topEditorStyle() {
-    return `flex: 0 0 ${this.state.topPanelHeight}px`;
-  }
-
-  onMouseDown() {
-    const resizer = ev => {
-      this.state.leftPaneWidth = ev.clientX;
-    };
-
-    document.body.addEventListener("mousemove", resizer);
-    for (let iframe of document.getElementsByTagName("iframe")) {
-      iframe.classList.add("disabled");
-    }
-
-    document.body.addEventListener("mouseup", () => {
-      document.body.removeEventListener("mousemove", resizer);
-      for (let iframe of document.getElementsByTagName("iframe")) {
-        iframe.classList.remove("disabled");
-      }
-    });
-  }
-  updateCode(ev) {
-    if (this.state[ev.detail.type] !== ev.detail.value) {
-      this.state[ev.detail.type] = ev.detail.value;
-      this.isDirty = true;
-    }
-  }
-  toggleLayout() {
-    this.state.splitLayout = !this.state.splitLayout;
-  }
-  updatePanelHeight(ev) {
-    if (!ev.detail.delta) {
-      return;
-    }
-    let height = this.state.topPanelHeight;
-    if (!height) {
-      height = document.getElementsByClassName("tabbed-editor")[0].clientHeight;
-    }
-    this.state.topPanelHeight = height + ev.detail.delta;
-  }
-
-  async downloadCode() {
-    const { js, css, xml } = this.state;
-    const content = await makeApp(js, css, xml);
-    await owl.utils.loadJS("libs/FileSaver.min.js");
-    saveAs(content, "app.zip");
-  }
 }
-App.components = { TabbedEditor };
+
+class Editor extends owl.Component {
+
+    static props = ['js', 'xml', 'css']
+
+    state = useState({ 
+        currentExtension: 'js', 
+        js: this.props.js,
+        css: this.props.css,
+        xml: this.props.xml,
+        
+    })
+
+    jsModel =  null;
+    cssModel =  null;
+    xmlModel =  null;
+
+    editor = null;
+
+    willUpdateProps(nextProps) {
+        console.log(nextProps);
+        this.state.js = nextProps.js;
+        this.state.css = nextProps.css;
+        this.state.xml = nextProps.xml;
+        
+        this.jsModel = null;
+        this.cssModel = null;
+        this.xmlModel = null;
+
+        this._openFile(this.state.currentExtension, false) 
+    }
+
+    _run(ev) {
+        this._saveCodeState();
+        this.trigger('run-project', {
+            js: this.state.js,
+            xml: this.state.xml,
+            css: this.state.css
+        })
+    }
+
+    _openFile(extension, save = true) {
+        if (save) this._saveCodeState();
+
+        this.state.currentExtension = extension;
+        let language = null;
+        let model = null;
+
+        if (extension === 'js') {
+            console.log("here")
+
+            if (this.jsModel) {
+                model = this.jsModel;
+            }
+
+            else {
+                language = 'javascript'
+            }
+        }
+
+        if (extension === 'xml') {
+
+            if (this.xmlModel) {
+                model = this.xmlModel;
+            }
+
+            else {
+                language = 'xml'
+            }
+        }
+
+        if (extension === 'css') {
+
+            if (this.cssModel) {
+                model = this.cssModel;
+            }
+
+            else {
+                language = 'css'
+            }
+        }
+
+        console.log(model)
+
+        if (!model) {
+            model = monaco.editor.createModel(
+                this.state[this.state.currentExtension],
+                language,
+                null
+            )
+
+            if (extension === 'js') {
+                this.jsModel = model;
+            }
+    
+            if (extension === 'xml') {
+               this.xmlModel = model;
+            }
+    
+            if (extension === 'css') {
+                this.cssModel = model;
+            }
+        }
+
+        this.editor.setModel(model)
+
+    }
+
+    mounted() {
+        this.editor = monaco.editor.create(document.getElementById('container'), {
+            value: this.state[this.state.currentExtension],
+            language: 'javascript',
+            automaticLayout: true,
+            minimap: {
+                enabled: false
+            }
+        });
+    }
+
+    _saveCodeState() {
+        this.state[this.state.currentExtension] = this.editor.getValue();
+    }
+
+    _openCSS(ev) {
+        this._openFile('css')
+    }
+
+    _openXML(ev) {
+        this._openFile('xml')
+    }
+
+    _openJS(ev) {
+        this._openFile('js')
+    }
+
+}
+
+Editor.components = { Tab }
+
+
+class App extends owl.Component {
+
+    samples = [];
+
+    constructor(...args) {
+        super(...args);
+        this.version = owl.__info__.version;
+        this.samples = useSamples();
+
+        this.state = useState({ 
+            js: this.samples[0].code,
+            css: this.samples[0].css || "",
+            xml: this.samples[0].xml || DEFAULT_XML,
+        });
+
+        this.runCode = owl.utils.debounce(this.runCode, 250, true);
+        this.downloadCode = owl.utils.debounce(this.downloadCode, 250, true);
+        this.content = useRef("iframe-container");
+    }
+
+
+    _run(ev) {
+        this.content.el.innerHTML = "";
+        const { js, css, xml } = ev.detail;
+        const subiframe = makeCodeIframe(js, css, xml);
+        this.content.el.appendChild(subiframe);
+    }
+
+    _setSample(ev) {
+        const sample = this.samples.find(s => s.description === ev.target.value);
+        this.state.js = sample.code;
+        this.state.css = sample.css || "";
+        this.state.xml = sample.xml || DEFAULT_XML;
+        deleteLocalSample();
+    }
+
+
+}
+
+App.components = { Editor }
 
 //------------------------------------------------------------------------------
 // Application initialization
 //------------------------------------------------------------------------------
 async function start() {
-  document.title = `${document.title} (v${owl.__info__.version})`;
+    document.title = `${document.title} (v${owl.__info__.version})`;
-  const commit = `https://github.com/odoo/owl/commit/${owl.__info__.hash}`;
+    const commit = `https://github.com/odoo/owl/commit/${owl.__info__.hash}`;
-  console.info(`This application is using Owl built with the following commit:`, commit);
+    console.info(`This application is using Owl built with the following commit:`, commit);
-  const [templates] = await Promise.all([
+    const [templates] = await Promise.all([
-    owl.utils.loadFile("templates.xml"),
+        owl.utils.loadFile("templates.xml"),
-    owl.utils.whenReady()
+        owl.utils.whenReady()
-  ]);
+    ]);
-  const qweb = new owl.QWeb({ templates });
+    const qweb = new owl.QWeb({ templates });
-  owl.Component.env = { qweb };
+    owl.Component.env = { qweb };
-  const app = new App();
+    const app = new App();
-  app.mount(document.body);
+    app.mount(document.body);
 }
 
 start();

tools/playground/index.html

@@ -1,20 +1,26 @@
+
+
 <!DOCTYPE html>
-<html lang="en">
+<html>
-  <head>
+	<head>
-    <meta charset="utf-8">
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-    <title>OWL Playground</title>
+		<link
-    <link rel="icon" href="data:,">
+			rel="stylesheet"
-
+			data-name="vs/editor/editor.main"
-    <script src="libs/ace.js" type="text/javascript" charset="utf-8"></script>
+			href="../../node_modules/monaco-editor/min/vs/editor/editor.main.css"
+    />
     <script src="../owl.js"></script>
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css" integrity="sha384-QokYePQSOwpBDuhlHOsX0ymF6R/vLk/UQVz3WHa6wygxI5oGTmDTv8wahFOSspdm" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css" integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq" crossorigin="anonymous">
-
-    <!-- Application JS/CSS -->
-    <link rel="stylesheet" href="playground.css">
     <script type="module" src="app.js"></script>
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+	</head>
+	<body class="h-screen bg-gray-200">
 
-  </head>
+		<script>
-  <body>
+			var require = { paths: { vs: '../../node_modules/monaco-editor/min/vs' } };
-  </body>
+		</script>
+		<script src="../../node_modules/monaco-editor/min/vs/loader.js"></script>
+		<script src="../../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
+        <script src="../../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>
+
+	</body>
 </html>

tools/playground/old_app.js

@@ -0,0 +1,427 @@
+import { SAMPLES } from "./samples.js";
+const { useState, useRef, onMounted, onWillUnmount } = owl.hooks;
+//------------------------------------------------------------------------------
+// Constants, helpers, utils
+//------------------------------------------------------------------------------
+let owlJS;
+
+async function owlSourceCode() {
+  if (owlJS) {
+    return owlJS;
+  }
+  const result = await fetch("../owl.js");
+  owlJS = await result.text();
+  return owlJS;
+}
+
+const MODES = {
+  js: "ace/mode/javascript",
+  css: "ace/mode/css",
+  xml: "ace/mode/xml"
+};
+
+const DEFAULT_XML = `<templates>
+</templates>`;
+
+const DEFAULT_HTML = `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>OWL App</title>
+    <link rel="icon" href="data:,">
+
+    <script src="owl.js"></script>
+    <link rel="stylesheet" href="app.css">
+    <script src="app.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
+`;
+
+const APP_PY = `#!/usr/bin/env python3
+
+import threading
+import time
+
+from http.server import SimpleHTTPRequestHandler, HTTPServer
+
+def start_server():
+    SimpleHTTPRequestHandler.extensions_map['.js'] = 'application/javascript'
+    httpd = HTTPServer(('0.0.0.0', 3600), SimpleHTTPRequestHandler)
+    httpd.serve_forever()
+
+url = 'http://127.0.0.1:3600'
+
+if __name__ == "__main__":
+    print("Owl Application")
+    print("---------------")
+    print("Server running on: {}".format(url))
+    threading.Thread(target=start_server, daemon=True).start()
+
+    while True:
+        try:
+            time.sleep(1)
+        except KeyboardInterrupt:
+            httpd.server_close()
+            quit(0)
+`;
+
+/**
+ * Make an iframe, with all the js, css and xml properly injected.
+ */
+function makeCodeIframe(js, css, xml) {
+  const sanitizedXML = xml.replace(/<!--[\s\S]*?-->/g, "");
+
+
+  // create iframe
+  const iframe = document.createElement("iframe");
+
+  iframe.onload = () => {
+    const doc = iframe.contentDocument;
+    // inject js
+    const owlScript = doc.createElement("script");
+    owlScript.type = "text/javascript";
+    owlScript.src = "../owl.js";
+    owlScript.addEventListener("load", () => {
+      const script = doc.createElement("script");
+      script.type = "text/javascript";
+      const content = `
+        {
+          owl.config.mode = 'dev';
+          let templates = \`${sanitizedXML}\`;
+          const qweb = new owl.QWeb({ templates });
+          owl.Component.env = { qweb };
+        }
+        ${js}`;
+      script.innerHTML = content;
+      doc.body.appendChild(script);
+    });
+    doc.head.appendChild(owlScript);
+
+    // inject css
+    const style = document.createElement("style");
+    style.innerHTML = css;
+    doc.head.appendChild(style);
+  };
+  return iframe;
+}
+
+/**
+ * Make a zip file containing a functioning application
+ */
+async function makeApp(js, css, xml) {
+  await owl.utils.loadJS("libs/jszip.min.js");
+
+  const zip = new JSZip();
+  const processedJS = js
+    .split("\n")
+    .map(l => (l === "" ? "" : "  " + l))
+    .join("\n");
+
+  const JS = `
+/**
+ * This is the javascript code defined in the playground.
+ * In a larger application, this code should probably be moved in different
+ * sub files.
+ */
+function app() {
+${processedJS}
+}
+
+/**
+ * Initialization code
+ * This code load templates, and make sure everything is properly connected.
+ */
+async function start() {
+  let templates;
+  try {
+    templates = await owl.utils.loadFile('app.xml');
+  } catch(e) {
+    console.error(\`This app requires a static server.  If you have python installed, try 'python app.py'\`);
+    return;
+  }
+  const env = { qweb: new owl.QWeb({templates})};
+  owl.Component.env = env;
+  await owl.utils.whenReady();
+  app();
+}
+
+start();
+`;
+
+  zip.file("app.js", JS);
+  zip.file("app.css", css);
+  zip.file("app.py", APP_PY);
+  zip.file("app.xml", xml);
+  zip.file("index.html", DEFAULT_HTML);
+  zip.file("owl.js", owlSourceCode());
+  return zip.generateAsync({ type: "blob" });
+}
+
+//------------------------------------------------------------------------------
+// SAMPLES
+//------------------------------------------------------------------------------
+function loadSamples() {
+  let result = SAMPLES.slice();
+  const localSample = localStorage.getItem("owl-playground-local-sample");
+  if (localSample) {
+    const { js, css, xml } = JSON.parse(localSample);
+    result.unshift({
+      description: "Local Storage Code",
+      code: js,
+      xml,
+      css
+    });
+  }
+  return result;
+}
+
+function saveLocalSample(js, css, xml) {
+  const str = JSON.stringify({ js, css, xml });
+  localStorage.setItem("owl-playground-local-sample", str);
+}
+
+function deleteLocalSample() {
+  localStorage.removeItem("owl-playground-local-sample");
+}
+
+function useSamples() {
+  const samples = loadSamples();
+  const component = owl.Component.current;
+  let interval;
+
+  onMounted(() => {
+    const state = component.state;
+    interval = setInterval(() => {
+      if (component.isDirty) {
+        saveLocalSample(state.js, state.css, state.xml);
+      }
+    }, 1000);
+  });
+  onWillUnmount(() => {
+    clearInterval(interval);
+  });
+  return samples;
+}
+//------------------------------------------------------------------------------
+// Tabbed editor
+//------------------------------------------------------------------------------
+class TabbedEditor extends owl.Component {
+  constructor(parent, props) {
+    super(parent, props);
+    this.state = useState({
+      currentTab: props.js !== false ? "js" : props.xml ? "xml" : "css"
+    });
+    this.setTab = owl.utils.debounce(this.setTab, 250, true);
+
+    this.sessions = {};
+    this._setupSessions(props);
+    this.editorNode = useRef("editor");
+    this._updateCode = this._updateCode.bind(this);
+  }
+
+  mounted() {
+    this.editor = this.editor || ace.edit(this.editorNode.el);
+
+    this.editor.setValue(this.props[this.state.currentTab], -1);
+    this.editor.setFontSize("12px");
+    this.editor.setTheme("ace/theme/monokai");
+    this.editor.setSession(this.sessions[this.state.currentTab]);
+    const tabSize = this.state.currentTab === "xml" ? 2 : 4;
+    this.editor.session.setOption("tabSize", tabSize);
+    this.editor.on("blur", this._updateCode);
+    this.interval = setInterval(this._updateCode, 3000);
+  }
+
+  willUnmount() {
+    clearInterval(this.interval);
+    this.editor.off("blur", this._updateCode);
+  }
+  willUpdateProps(nextProps) {
+    this._setupSessions(nextProps);
+  }
+
+  patched() {
+    const session = this.sessions[this.state.currentTab];
+    let content = this.props[this.state.currentTab];
+    if (content === false) {
+      const tab = this.props.js !== false ? "js" : this.props.xml ? "xml" : "css";
+      content = this.props[tab];
+      this.state.currentTab = tab;
+    }
+    if (this.editor.getValue() !== content) {
+      session.setValue(content, -1);
+      this.editor.setSession(session);
+      this.editor.resize();
+    }
+  }
+
+  setTab(tab) {
+    if (this.state.currentTab !== tab) {
+      this.state.currentTab = tab;
+      const session = this.sessions[this.state.currentTab];
+      session.doc.setValue(this.props[tab], -1);
+      this.editor.setSession(session);
+    }
+  }
+
+  onMouseDown(ev) {
+    if (ev.target.tagName === "DIV") {
+      let y = ev.clientY;
+      const resizer = ev => {
+        const delta = ev.clientY - y;
+        y = ev.clientY;
+        this.trigger("updatePanelHeight", { delta });
+      };
+      document.body.addEventListener("mousemove", resizer);
+      document.body.addEventListener("mouseup", () => {
+        document.body.removeEventListener("mousemove", resizer);
+      });
+    }
+  }
+
+  _setupSessions(props) {
+    for (let tab of ["js", "xml", "css"]) {
+      if (props[tab] !== false && !this.sessions[tab]) {
+        this.sessions[tab] = new ace.EditSession(props[tab], MODES[tab]);
+        this.sessions[tab].setOption("useWorker", false);
+        const tabSize = tab === "xml" ? 2 : 4;
+        this.sessions[tab].setOption("tabSize", tabSize);
+        this.sessions[tab].setUndoManager(new ace.UndoManager());
+      }
+    }
+  }
+
+  _updateCode() {
+    const editorValue = this.editor.getValue();
+    const propsValue = this.props[this.state.currentTab];
+    if (editorValue !== propsValue) {
+      this.trigger("updateCode", {
+        type: this.state.currentTab,
+        value: editorValue
+      });
+    }
+  }
+}
+
+//------------------------------------------------------------------------------
+// MAIN APP
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  constructor(...args) {
+    super(...args);
+    this.version = owl.__info__.version;
+    this.SAMPLES = useSamples();
+    this.isDirty = false;
+
+    this.state = useState({
+      js: this.SAMPLES[0].code,
+      css: this.SAMPLES[0].css || "",
+      xml: this.SAMPLES[0].xml || DEFAULT_XML,
+      displayWelcome: true,
+      splitLayout: true,
+      leftPaneWidth: Math.ceil(window.innerWidth / 2),
+      topPanelHeight: null
+    });
+
+    this.toggleLayout = owl.utils.debounce(this.toggleLayout, 250, true);
+    this.runCode = owl.utils.debounce(this.runCode, 250, true);
+    this.downloadCode = owl.utils.debounce(this.downloadCode, 250, true);
+    this.content = useRef("content");
+  }
+
+  runCode() {
+    this.content.el.innerHTML = "";
+    this.state.displayWelcome = false;
+
+    const { js, css, xml } = this.state;
+    const subiframe = makeCodeIframe(js, css, xml);
+    this.content.el.appendChild(subiframe);
+  }
+
+  setSample(ev) {
+    const sample = this.SAMPLES.find(s => s.description === ev.target.value);
+    this.state.js = sample.code;
+    this.state.css = sample.css || "";
+    this.state.xml = sample.xml || DEFAULT_XML;
+    deleteLocalSample();
+    this.isDirty = false;
+  }
+
+  get leftPaneStyle() {
+    return `width:${this.state.leftPaneWidth}px`;
+  }
+
+  get rightPaneStyle() {
+    return `width:${window.innerWidth - 6 - this.state.leftPaneWidth}px`;
+  }
+
+  get topEditorStyle() {
+    return `flex: 0 0 ${this.state.topPanelHeight}px`;
+  }
+
+  onMouseDown() {
+    const resizer = ev => {
+      this.state.leftPaneWidth = ev.clientX;
+    };
+
+    document.body.addEventListener("mousemove", resizer);
+    for (let iframe of document.getElementsByTagName("iframe")) {
+      iframe.classList.add("disabled");
+    }
+
+    document.body.addEventListener("mouseup", () => {
+      document.body.removeEventListener("mousemove", resizer);
+      for (let iframe of document.getElementsByTagName("iframe")) {
+        iframe.classList.remove("disabled");
+      }
+    });
+  }
+  updateCode(ev) {
+    if (this.state[ev.detail.type] !== ev.detail.value) {
+      this.state[ev.detail.type] = ev.detail.value;
+      this.isDirty = true;
+    }
+  }
+  toggleLayout() {
+    this.state.splitLayout = !this.state.splitLayout;
+  }
+  updatePanelHeight(ev) {
+    if (!ev.detail.delta) {
+      return;
+    }
+    let height = this.state.topPanelHeight;
+    if (!height) {
+      height = document.getElementsByClassName("tabbed-editor")[0].clientHeight;
+    }
+    this.state.topPanelHeight = height + ev.detail.delta;
+  }
+
+  async downloadCode() {
+    const { js, css, xml } = this.state;
+    const content = await makeApp(js, css, xml);
+    await owl.utils.loadJS("libs/FileSaver.min.js");
+    saveAs(content, "app.zip");
+  }
+}
+App.components = { TabbedEditor };
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  document.title = `${document.title} (v${owl.__info__.version})`;
+  const commit = `https://github.com/odoo/owl/commit/${owl.__info__.hash}`;
+  console.info(`This application is using Owl built with the following commit:`, commit);
+  const [templates] = await Promise.all([
+    owl.utils.loadFile("templates.xml"),
+    owl.utils.whenReady()
+  ]);
+  const qweb = new owl.QWeb({ templates });
+  owl.Component.env = { qweb };
+  const app = new App();
+  app.mount(document.body);
+}
+
+start();

tools/playground/old_index.html

@@ -0,0 +1,21 @@
+<!---->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>OWL Playground</title>
+    <link rel="icon" href="data:,">
+
+    <script src="libs/ace.js" type="text/javascript" charset="utf-8"></script>
+    <script src="../owl.js"></script>
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css" integrity="sha384-QokYePQSOwpBDuhlHOsX0ymF6R/vLk/UQVz3WHa6wygxI5oGTmDTv8wahFOSspdm" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css" integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq" crossorigin="anonymous">
+
+    <!-- Application JS/CSS -->
+    <link rel="stylesheet" href="playground.css">
+    <script type="module" src="app.js"></script>
+
+  </head>
+  <body>
+  </body>
+</html>

tools/playground/old_templates.xml

@@ -0,0 +1,57 @@
+<templates>
+  <div t-name="TabbedEditor" class="tabbed-editor">
+    <div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
+        <t t-foreach="['js', 'xml', 'css']" t-as="tab">
+            <a t-ref="{{tab}}" t-if="props[tab] !== false" t-key="tab" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="setTab(tab)">
+                <t t-esc="tab"/>
+            </a>
+        </t>
+    </div>
+    <div class="code-editor" t-ref="editor"></div>
+  </div>
+
+  <div t-name="App" class="playground">
+      <div class="left-bar" t-att-class="{split: state.splitLayout}"
+           t-att-style="leftPaneStyle"
+           t-on-updateCode="updateCode">
+        <div class="menubar">
+          <a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
+          <select t-on-change="setSample">
+            <option t-foreach="SAMPLES" t-as="sample" t-key="sample_index">
+              <t t-esc="sample.description"/>
+            </option>
+          </select>
+          <a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"><i class="fas fa-download"></i></a>
+          <a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas"  t-att-class="state.splitLayout ?  'fa-toggle-on' : 'fa-toggle-off'"></i></a>
+        </div>
+        <TabbedEditor
+            js="state.js"
+            css="!state.splitLayout and state.css"
+            xml="!state.splitLayout and state.xml"
+            t-att-style="topEditorStyle"/>
+        <t t-if="state.splitLayout">
+          <div class="separator horizontal"/>
+          <TabbedEditor
+             js="false"
+             css="state.css"
+             xml="state.xml"
+             resizeable="true"
+             t-on-updatePanelHeight="updatePanelHeight"/>
+        </t>
+      </div>
+      <div class="separator vertical" t-on-mousedown="onMouseDown"/>
+      <div class="right-pane"  t-att-style="rightPaneStyle">
+        <div class="welcome" t-if="state.displayWelcome">
+          <div>🦉 Odoo Web Library 🦉</div>
+          <div>v<t t-esc="version"/></div>
+          <div class="url"><a href="https://github.com/odoo/owl">https://github.com/odoo/owl</a></div>
+          <div class="note">
+            <p>Note: these examples are using recent features of Javascript, and require a recent browser to work without a transpilation step!
+              For example, it makes use of class fields and class static fields. These examples should work in a recent Chrome version.
+            </p>
+          </div>
+        </div>
+        <div class="content" t-ref="content"/>
+      </div>
+  </div>
+</templates>

tools/playground/templates.xml

@@ -1,57 +1,79 @@
 <templates>
-  <div t-name="TabbedEditor" class="tabbed-editor">
-    <div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
-        <t t-foreach="['js', 'xml', 'css']" t-as="tab">
-            <a t-ref="{{tab}}" t-if="props[tab] !== false" t-key="tab" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="setTab(tab)">
-                <t t-esc="tab"/>
-            </a>
-        </t>
-    </div>
-    <div class="code-editor" t-ref="editor"></div>
-  </div>
 
-  <div t-name="App" class="playground">
+    <div t-name="App" t-on-run-project="_run" class="h-full flex">
-      <div class="left-bar" t-att-class="{split: state.splitLayout}"
+
-           t-att-style="leftPaneStyle"
+        <Editor js="state.js" xml="state.xml" css="state.css" />
-           t-on-updateCode="updateCode">
+
-        <div class="menubar">
+
-          <a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
+        <div class="flex flex-col w-1/2 h-full">
-          <select t-on-change="setSample">
+
-            <option t-foreach="SAMPLES" t-as="sample" t-key="sample_index">
+            <div class="bg-purple-300 mx-2 my-1 p-2 rounded-sm" style="background-color: #865A7B">
-              <t t-esc="sample.description"/>
+                <div class="flex items-center">
-            </option>
+                    <div class="relative">
-          </select>
+                        <select t-on-change="_setSample" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-1 px-2 pr-8 rounded-sm leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
-          <a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"><i class="fas fa-download"></i></a>
+                            <t t-foreach="samples" t-as="sample" t-key="sample_index">
-          <a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas"  t-att-class="state.splitLayout ?  'fa-toggle-on' : 'fa-toggle-off'"></i></a>
+                                <option>
+                                    <t t-esc="sample.description"/>
+                                </option>
+                            </t>
+                        </select>
+                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                            <svg class="fill-current h-4 w-4"
+                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+            <div t-ref="iframe-container" class="bg-white flex-grow m-2 rounded-sm shadow"></div>
         </div>
-        <TabbedEditor
+
-            js="state.js"
+
-            css="!state.splitLayout and state.css"
+    </div>
-            xml="!state.splitLayout and state.xml"
+
-            t-att-style="topEditorStyle"/>
+    <t t-name="Editor" t-on-open-file="_openFile">
-        <t t-if="state.splitLayout">
+        <div class="resize-x w-1/2">
-          <div class="separator horizontal"/>
+
-          <TabbedEditor
+            <div class="flex justify-between items-center" style="background-color: #865A7B">
-             js="false"
+                <ul class="flex justify-start">
-             css="state.css"
+                    <li>
-             xml="state.xml"
+                        <Tab t-on-click="_openXML">
-             resizeable="true"
+                            xml
-             t-on-updatePanelHeight="updatePanelHeight"/>
+                        </Tab>
-        </t>
+                    </li>
-      </div>
+                    <li>
-      <div class="separator vertical" t-on-mousedown="onMouseDown"/>
+                        <Tab t-on-click="_openJS">
-      <div class="right-pane"  t-att-style="rightPaneStyle">
+                            js
-        <div class="welcome" t-if="state.displayWelcome">
+                        </Tab>
-          <div>🦉 Odoo Web Library 🦉</div>
+                    </li>
-          <div>v<t t-esc="version"/></div>
+                    <li>
-          <div class="url"><a href="https://github.com/odoo/owl">https://github.com/odoo/owl</a></div>
+                        <Tab t-on-click="_openCSS">
-          <div class="note">
+                            css
-            <p>Note: these examples are using recent features of Javascript, and require a recent browser to work without a transpilation step!
+                        </Tab>
-              For example, it makes use of class fields and class static fields. These examples should work in a recent Chrome version.
+                    </li>
-            </p>
+                </ul>
-          </div>
+                <ul class="flex justify-end m-2">
+                    <li>
+                        <button class="h-6 w-6 bg-white rounded-full p-1 shadow" t-on-click="_run">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                            </svg>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+
+            <div id="container" class="h-full"></div>
         </div>
-        <div class="content" t-ref="content"/>
+    </t>
-      </div>
+
-  </div>
+    <t t-name="Tab">
+        <button class="bg-white hover:bg-gray-300 uppercase rounded-sm px-2 shadow mx-1">
+            <t t-slot="default"/>
+        </button>
+    </t>
+
 </templates>