performance

slimjs · May 25, 2017 · 72f1d23 · 72f1d23
1 parent 881d2da
commit 72f1d23
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 12 deletions.
diff --git a/example/multi-level-repeat/app.js b/example/multi-level-repeat/app.js
@@ -0,0 +1,44 @@
+
+Slim.tag('file-item',
+`<li><span bind>Filename: [[file]]</span><a href="[[generateLink(file, library)]]" bind>[[generateLink(file, library)]]</a></li>`,
+class extends Slim {
+    get useShadow() { return true; }
+    generateLink(data, library) {
+        return 'https://cdnjs.cloudfare.com/ajax/libs/' + library + '/' +
+            this.version + '/' + data;
+    }
+});
+
+Slim.tag('lib-asset',`
+<h2 bind>Version: [[asset.version]]</h2>
+<ul>
+    <file-item bind library="[[libraryName]]" version="[[asset.version]]" slim-repeat="asset.files" slim-repeat-as="file"></file-item>
+</ul>
+`,
+class LibAsset extends Slim {
+    get useShadow() { return true; }
+}
+);
+
+
+Slim.tag('lib-browser',`
+<h1 bind>[[libraryData.name]]</h1>
+<lib-asset library-name="[[libraryData.name]]" slim-repeat="libraryData.assets" slim-repeat-as="asset"></lib-asset>
+`, class LibBrowser extends Slim {
+    get useShadow() { return true; }
+    onBeforeCreated() {
+        this.libraryName = 'slim.js';
+        this.libraryData = {};
+        this.getData();
+    }
+
+    getData() {
+        fetch('https://api.cdnjs.com/libraries/' + this.libraryName)
+            .then(r => r.json())
+            .then( data => {
+                console.time('render');
+                this.libraryData = data;
+                console.timeEnd('render');
+            });
+    }
+});
diff --git a/example/multi-level-repeat/index.html b/example/multi-level-repeat/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Multiple levels repeat</title>
+    <script src="../../src/Slim.js"></script>
+    <script src="./app.js"></script>
+</head>
+<body>
+    <lib-browser></lib-browser>
+</body>
+</html>
diff --git a/example/stargazers/stargazers-demo.js b/example/stargazers/stargazers-demo.js
@@ -28,16 +28,10 @@ Slim.tag('stargazers-demo',
             window.unit = this;
             this.repoName = 'eavichay/slim.js';
             this.stargazers = [];
-            this._avatarSize = 128;
+            this.avatarSize = 128;
             this.isLoading = false;
         }
 
-        get avatarSize() { return this._avatarSize; }
-        set avatarSize(value) {
-            // console.log('Changing avatar size to ' + value);
-            this._avatarSize = value;
-        }
-
         makeBig() {
             console.time('makeBig');
             this.avatarSize = 256;

diff --git a/example/tests/repeat-benchmark.html b/example/tests/repeat-benchmark.html
@@ -58,7 +58,7 @@
         while (arr.length < ARR_LENGTH) {
             const random = Math.random();
             arr.push(random);
-            let child = document.createElement('div');
+            const child = document.createElement('div');
             child.innerText = random.toString();
             el.appendChild(child);
         }

diff --git a/src/Slim.js b/src/Slim.js
@@ -363,7 +363,7 @@ class Slim extends HTMLElement {
                             targets = descriptor.target.repeater.clones;
                         }
                         if (targets) {
-                            let sourceRef = descriptor.target._boundRepeaterParent;
+                            let sourceRef = descriptor.target._boundRepeaterParent || descriptor.target._boundParent;
                             let value = Slim.__lookup((sourceRef || source), prop).obj || Slim.__lookup(descriptor.target, prop).obj;
                             const attrName = Slim.__dashToCamel(descriptor.attribute);
                             targets.forEach(target => {
@@ -408,7 +408,8 @@ class Slim extends HTMLElement {
                     }
                 } else if (descriptor.type === 'R') {
                     executor = () => {
-                        descriptor.repeater.renderList()
+                        descriptor.repeater.registerForRender();
+                        // !descriptor.repeater.isRendering && descriptor.repeater.renderList()
                     }
                 } else if (descriptor.type === 'W') {
                     executor = () => {
@@ -1028,7 +1029,7 @@ Slim.__initRepeater = function() {
             if (!this.uq_index) {
                 this.createdCallback();
             }
-            this.renderList();
+            this.checkoutRender();
         }
 
         onRemoved() {
@@ -1066,19 +1067,24 @@ Slim.__initRepeater = function() {
                     element[targetPropName] = sourceData[idx];
                     element.data_index = idx;
                     element.data_source = sourceData;
+                    if (element.isSlim) {
+                        element.update();
+                    }
                 });
                 if (clone.isSlim) {
                     clone.update();
                 }
             });
             this.clones[0]._boundProperties && Object.keys(this.clones[0]._boundProperties).forEach( prop => {
                 try {
+                    this.clones[0]._boundParent._executeBindings(prop.split('.')[0]);
                     this._boundParent._executeBindings(prop.split('.')[0]);
                 }
                 catch (err) { /* swallow error */ }
             });
             Slim.selectorToArr(this.clones[0], '*').forEach( element => {
                 try {
+                    element._boundParent._executeBindings(prop.split('.')[0]);
                     this._boundParent._executeBindings(prop.split('.')[0]);
                 }
                 catch (err) { /* swallow error */ }
@@ -1087,11 +1093,17 @@ Slim.__initRepeater = function() {
         }
 
         renderList() {
-            if (!this.sourceNode) return;
+            if (this.isRendering) return;
+            this.isRendering = true;
+            if (!this.sourceNode) {
+                this.isRendering = false;
+                return;
+            }
             this.sourceData.registerSlimRepeater(this);
 
             if (this.clones && this.clones.length === this.sourceData.length && this.sourceData.length > 0) {
                 this.updateExistingList();
+                this.isRendering = false;
                 return;
             }
 
@@ -1101,16 +1113,19 @@ Slim.__initRepeater = function() {
                     Slim.removeChild(leftover);
                 });
                 this.updateExistingList();
+                this.isRendering = false;
                 return;
             }
             if (this.clones && this.clones.length < this.sourceData.length && this.clones.length > 0) {
                 this.updateExistingList();
                 let remaining = this.sourceData.slice(this.clones.length);
                 this.createItems(remaining);
+                this.isRendering = false;
                 return;
             }
             this.clearList();
             this.createItems(this.sourceData);
+            this.isRendering = false;
         }
 
         createItems(sourceData) {