From fc062980602c79abb201d0b5a547dceec498cf76 Mon Sep 17 00:00:00 2001
From: eavichay <eavichay@gmail.com>
Date: Tue, 28 Mar 2017 23:24:20 +0300
Subject: [PATCH] minor fixes

---
 Slim.js                             |  6 +--
 example/TodoList/Todo2.html         | 22 ++++-----
 example/tests/bind-test.html        | 53 ++++++++++++++++++++-
 example/tests/repeat-benchmark.html | 71 ++++++++++++++++++++++++++---
 example/tests/test-repeater.html    |  6 ++-
 5 files changed, 134 insertions(+), 24 deletions(-)

diff --git a/Slim.js b/Slim.js
index fb64599..52fe1d9 100644
--- a/Slim.js
+++ b/Slim.js
@@ -217,7 +217,7 @@ class Slim extends HTMLElement {
                         if (!descriptor.target.hasAttribute('slim-repeat')) {
                             let sourceRef = descriptor.target._boundRepeaterParent || source;
                             let value = sourceRef[ descriptor.method ].apply( sourceRef,
-                                descriptor.properties.map( prop => { return (descriptor.target || sourceRef)[prop] }));
+                                descriptor.properties.map( prop => { return descriptor.target[prop] || sourceRef[prop] }));
                             descriptor.target[ Slim.__dashToCamel(descriptor.attribute) ] = value;
                             descriptor.target.setAttribute( descriptor.attribute, value )
                         }
@@ -661,10 +661,10 @@ Slim.__initRepeater = function() {
                 }
                 Array.prototype.slice.call(clone.querySelectorAll('*')).forEach( element => {
                     element._boundParent = clone._boundParent;
-                    element._boundRepeaterParent = this._boundParent;
+                    element._boundRepeaterParent = clone._boundRepeaterParent;
                     element[targetPropName] = clone[targetPropName];
                     element.data_index = clone.data_index;
-                    element.data_source = clone.data_source
+                    element.data_source = clone.data_source;
                 })
             }
 
diff --git a/example/TodoList/Todo2.html b/example/TodoList/Todo2.html
index 252502d..ba091de 100644
--- a/example/TodoList/Todo2.html
+++ b/example/TodoList/Todo2.html
@@ -25,18 +25,18 @@
 </style>
 
 <script>
-    Slim.tag('todo-item', class extends Slim {
-        get useShadow() { return true; }
-        get template() {
-            return `<span class="[[getDoneClass(todo)]]" bind>[[todo.text]]</span>`;
-        }
+    Slim.tag('todo-item',
+        `<span class="[[getDoneClass(todo)]]" bind>[[todo.text]]</span>`,
 
-        get isInteractive() { return true;}
+        class extends Slim {
+            get useShadow() { return true; }
 
-        getDoneClass(todo) {
-            if (todo.done) return 'done'
-            return ''
-        }
+            get isInteractive() { return true;}
+
+            getDoneClass(todo) {
+                if (todo.done) return 'done'
+                return ''
+            }
     });
 
     Slim.tag('todo-list', class extends Slim {
@@ -47,8 +47,8 @@
                     </div>
                     <div>
                         <ul>
+                            <todo-item slim-repeat="todos" slim-repeat-as="todo" click="toggle"></todo-item>
                             <li slim-repeat="todos" slim-repeat-as="todo">
-                                <todo-item click="toggle"></todo-item>
                             </li>
                         </ul>
                     </div>
diff --git a/example/tests/bind-test.html b/example/tests/bind-test.html
index c838cf4..a43e20b 100644
--- a/example/tests/bind-test.html
+++ b/example/tests/bind-test.html
@@ -46,7 +46,9 @@
     <script>
         Slim.tag('slim-confirm', class extends Slim {
 
-
+            onBeforeCreated() {
+                console.log('onBeforeCreated', this);
+            }
             get template() {
                 return `<div>
                             <div>
@@ -100,6 +102,55 @@ <h3 slim-show="[[urProp]]">Confirm reusable example</h3>
     </bind-parent>
 
 
+    <repeat-tester></repeat-tester>
+    <script>
+        Slim.tag('repeat-tester',
+            `
+            <ul>
+                <li slim-repeat="items" slim-repeat-as="item" active="[[isActive(item)]]"  bind click="handleItemSelect">[[item.label]]</li>
+            </ul>
+            <style>
+                li {
+                    color: blue;
+                }
+                li[active="true"] {
+                    color: white;
+                    background-color: black;
+                }
+            </style>
+            `,
+            class extends Slim {
+
+                get useShadow() { return true; }
+
+                onBeforeCreated() {
+                    this.items = [
+                        {label: 'item 1', value: 1},
+                        {label: 'item 2', value: 2},
+                        {label: 'item 3', value: 3},
+                    ];
+
+                    this.current = this.items[0];
+
+                    setTimeout( () => {
+                        this.items.push( {label: 'item 4', value: 4});
+                    }, 1000);
+                }
+
+                isActive(item) {
+                    console.log(item);
+                    return item === this.current;
+                }
+
+                handleItemSelect(e) {
+                    this.current = e.target.item;
+                    console.log(this.current);
+                    this.update();
+                }
+            });
+    </script>
+
+
 <!--<event-bus-e1></event-bus-e1>-->
 <!--<event-bus-e2></event-bus-e2>-->
 <!--<event-bus-e3></event-bus-e3>-->
diff --git a/example/tests/repeat-benchmark.html b/example/tests/repeat-benchmark.html
index 3d46cb9..3eb4ce4 100644
--- a/example/tests/repeat-benchmark.html
+++ b/example/tests/repeat-benchmark.html
@@ -3,33 +3,90 @@
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
     <script src="../../Slim.js"></script>
     <script>
-        Slim.polyfill('https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.min.js');
+        Slim.polyfill('https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents.min.js');
     </script>
 </head>
 <body>
 </body>
-    <benchmark-tester></benchmark-tester>
+<div id="react"></div>
+<benchmark-tester></benchmark-tester>
+
+    <script type="text/jsx">
+        const arr = [];
+        var R = React.createClass({
+            componentWillMount: function() {
+                this.state = {
+                    arr: arr
+                };
+                window.startReactBenchmark = () => {
+                    this.startBenchmark();
+                }
+            },
+            startBenchmark: function() {
+                while( arr.length < ARR_LENGTH ) {
+                    arr.push('A' + Math.random());
+                }
+                this.setState({arr: arr.concat()});
+            },
+            render: function() {
+                return (
+                        <div>{ this.state.arr.map( (x,i) => (<div key={i}>{x}</div>))}</div>
+                );
+            }
+        });
+        window.ReactElement = R;
+        React.render(<R />, document.getElementById('react'));
+    </script>
 
 <script>
+    const ARR_LENGTH = 10000;
+    const benchmarkReact = function() {
+        console.time('React');
+        window.startReactBenchmark();
+        console.timeEnd('React');
+    };
+
+    const benchmarkHTML = function() {
+        console.time('JS');
+        let el = document.createElement('div');
+        document.body.appendChild(el);
+        let arr = [];
+        while (arr.length < ARR_LENGTH) {
+            const random = Math.random();
+            arr.push(random);
+            let child = document.createElement('div');
+            child.innerText = random.toString();
+            el.appendChild(child);
+        }
+        console.timeEnd('JS');
+        setTimeout(benchmarkReact, 100);
+    };
+
     Slim.tag('benchmark-tester', class extends Slim {
 
         get template() {
             return `<div slim-repeat="arr" bind>[[data]]</div>`
         }
 
+        onBeforeCreated() {
+            this.arr = [];
+        }
+
         onAfterRender() {
-            console.log(new Date().getTime())
-            this.arr = []
-            while (this.arr.length < 1000) {
-                this.arr.push(Math.random())
+            console.time('Slim');
+            while(this.arr.length < ARR_LENGTH) {
+                this.arr.push(Math.random());
             }
         }
 
         update() {
             super.update()
-            console.log(new Date().getTime())
+            console.timeEnd('Slim');
+            setTimeout(benchmarkHTML, 100);
         }
 
     })
diff --git a/example/tests/test-repeater.html b/example/tests/test-repeater.html
index 8e99b1f..1c37dfc 100644
--- a/example/tests/test-repeater.html
+++ b/example/tests/test-repeater.html
@@ -2,13 +2,16 @@
     <head>
     </head>
     <script src="../../Slim.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
     <body>
         <repeat-tester></repeat-tester>
         <script>
             Slim.tag('repeat-tester',
             `
             <ul>
-                <li slim-repeat="items" slim-repeat-as="item" active="[[isActive(item)]]"  bind click="handleItemSelect">[[item.label]]</li>
+                <li slim-repeat="items" slim-repeat-as="item" click="handleItemSelect">
+                    <span active="[[isActive(item)]]" bind>[[item.label]]</span>
+                </li>
             </ul>
             `,
             class extends Slim {
@@ -27,7 +30,6 @@
                 }
 
                 isActive(item) {
-                    console.log(item);
                     return item === this.current;
                 }