Merge pull request #17 from modulor-js/fix_range

fix(range): update range fix
modulor-js · Feb 19, 2018 · 16f9ef7 · 16f9ef7
2 parents 0d357a7 + 77c5d12
commit 16f9ef7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 11 deletions.
diff --git a/build/html.js b/build/html.js
diff --git a/src/html.js b/src/html.js
@@ -26,6 +26,9 @@ function same(nodeA, nodeB, sanitizeNodePrefix = ''){
   if(nodeA.nodeType !== nodeB.nodeType){
     return false;
   }
+  if(nodeA.range != nodeB.range){
+    return false;
+  }
   if(nodeA.tagName && nodeB.tagName &&
     (nodeA.tagName.toLowerCase().replace(sanitizeNodePrefix, '') === nodeB.tagName.toLowerCase())
   ){
@@ -257,7 +260,6 @@ Template.prototype.loop = function($source, $target, debug){
           const processedChunks = this.processTextNodeChunks(chunks);
           const $processedChunksFragment = this.copyTextNodeChunks(processedChunks);
           this.loop($processedChunksFragment, range);
-          range.update();
           offset += range.childNodes.length + 1;
           break;
         case NODE_TYPES.COMMENT_NODE:
@@ -266,12 +268,11 @@ Template.prototype.loop = function($source, $target, debug){
             const range = getRange($targetElement, type);
 
             if(type === 'futureResult'){
+              range.update();
               $sourceElement.futureResult.then((response) => {
+                range.update();
                 const $frag = this.copyTextNodeChunks(response);
                 this.loop($frag, range);
-                //update range for future promise resolves
-                //@TODO write better explanation
-                range.update();
                 return $frag;
               });
               offset += range.childNodes.length + 1;
@@ -280,7 +281,6 @@ Template.prototype.loop = function($source, $target, debug){
             }
             if(type === 'template'){
               $sourceElement.template.render(range);
-              $target.update();
               offset += range.childNodes.length + 1;
 
               break;
@@ -291,7 +291,6 @@ Template.prototype.loop = function($source, $target, debug){
 
               //@TODO probably better to simply replace elements in range with ones from $frag
               this.loop($frag, range);
-              $target.update();
               offset += range.childNodes.length + 1;
 
               break;
@@ -310,9 +309,6 @@ Template.prototype.loop = function($source, $target, debug){
           this.copyAttributes(newChild, $sourceElement);
           break;
       }
-      if($target instanceof NodesRange){
-        $target.update();
-      }
       continue;
     }
 

diff --git a/src/range.js b/src/range.js
@@ -50,11 +50,15 @@ NodesRange.prototype.extractContents = function(){
 NodesRange.prototype.update = function(){
   this.childNodes = [];
   for(let node = this.startNode.nextSibling; node && node !== this.stopNode; node = node.nextSibling){
+    if(node.range){
+      node.range.onUpdate = () => this.update();
+    }
     this.childNodes.push(node);
   }
 
   this.firstChild = this.childNodes[0];
   this.lastChild = this.childNodes[this.childNodes.length - 1];
+  this.onUpdate && this.onUpdate();
 }
 
 NodesRange.prototype.getByIndex = function(index){};

diff --git a/test/html.test.js b/test/html.test.js
@@ -4,6 +4,7 @@ import 'document-register-element';
 import { html, render, r, stopNode, Template } from '../src/html';
 import { NodesRange } from '../src/range';
 
+
 const template = (scope) => r`
   <div foo="${scope.foo}" bar="${scope.bar}${scope.foo}" class="foo ${scope.classes}">
     <span>${scope.text}</span>
@@ -629,7 +630,22 @@ describe('transitions', () => {
     expect($container.innerHTML).toBe(snapshot1);
     tpl(true).render($container, true);
     expect($container.innerHTML).toBe(snapshot2);
-  })
+  });
+
+  it('ternary operator 2', () => {
+    const $container = document.createElement('div');
+
+    const tpl = (show) => html`${show ? html`<span>ok</span>`: ''}`;
+    const snapshot = '<span>ok</span>';
+
+    render(tpl(true), $container);
+    expect($container.innerHTML).toBe(snapshot);
+    render(tpl(false), $container);
+    expect($container.innerHTML).toBe('');
+    render(tpl(true), $container);
+    expect($container.innerHTML).toBe(snapshot);
+  });
+
 });