Added test case for #507 and minor change - replaceChildrenOf seem to create an infinite loop

runtime/dom-insert.js

@@ -1,5 +1,5 @@
 var extend = require('raptor-util/extend');
-var widgetsUtil = require('../widgets/util-browser');
+var widgetsUtil = require('../widgets/util');
 var destroyWidgetForEl = widgetsUtil.$__destroyWidgetForEl;
 var destroyElRecursive = widgetsUtil.$__destroyElRecursive;
 
@@ -46,10 +46,11 @@ module.exports = function(target, getEl, afterInsert) {
 
             var curChild = referenceEl.firstChild;
             while(curChild) {
+                var nextSibling = curChild.nextSibling; // Just in case the DOM changes while removing
                 if (curChild.nodeType === 1) {
                     beforeRemove(curChild);
                 }
-                curChild = curChild.nextSibling;
+                curChild = nextSibling;
             }
 
             referenceEl.innerHTML = '';

test/autotests/widgets-browser/replaceChildrenOf/components/app-counter/index.marko

@@ -0,0 +1,16 @@
+<script>
+    module.exports = {
+        onInput: function(input) {
+            this.state = {
+                counter: input.value
+            }
+        },
+
+        increment: function() {
+            this.state.counter++;
+        }
+    }
+</script>
+<div>
+    Count: ${state.counter}
+</div>

test/autotests/widgets-browser/replaceChildrenOf/index.marko

@@ -0,0 +1,10 @@
+<script>
+    module.exports = {};
+</script>
+<div>
+    <div ref="renderTarget">
+        <span>This should disappear</span>
+        <span>We'll add a nested UI component just to make sure it is destroyed.</span>
+        <app-counter value=0 ref="initialCounter"/>
+    </div>
+</div>

test/autotests/widgets-browser/replaceChildrenOf/test.js

@@ -0,0 +1,19 @@
+var expect = require('chai').expect;
+
+
+module.exports = function(helpers) {
+    var widget = helpers.mount(require('./index.marko'));
+
+    var initialCounter = widget.getWidget('initialCounter');
+
+    var counter = require('./components/app-counter');
+
+    var renderTarget = widget.getEl('renderTarget');
+    expect(renderTarget.innerHTML).to.contain('Count: 0');
+
+    counter.renderSync({ value: 99 }).replaceChildrenOf(renderTarget);
+
+    expect(renderTarget.innerHTML).to.not.contain('Count: 0');
+    expect(renderTarget.innerHTML).to.contain('Count: 99');
+    expect(initialCounter.isDestroyed()).to.equal(true);
+};