Correctly allow components to return different top-level nodes during different renderings

sky/framework/fn.dart

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 library fn;
 
 import 'dart:async';
 import 'dart:collection';
 import 'dart:sky' as sky;
 import 'reflect.dart' as reflect;
@@ skipping 597 matching lines @@
     _currentOrder = _order;
     _currentlyRendering = this;
     _rendered = render();
     _currentlyRendering = null;
     _currentOrder = lastOrder;
 
     _rendered.events.addAll(events);
 
     _dirty = false;
 
-    if (oldRendered != null && _rendered.runtimeType != oldRendered.runtimeType)
+    // TODO(rafaelw): This eagerly removes the old DOM. It may be that a
+    // new component was rendered that could re-use some of it. Consider
+    // syncing the new VDOM against the old one.
+    if (oldRendered != null &&
+        _rendered.runtimeType != oldRendered.runtimeType) {
+      oldRendered._remove();
       oldRendered = null;
+    }
 
     if (_rendered._sync(oldRendered, host, insertBefore)) {
       _rendered = oldRendered; // retain stateful component
     }
     _root = _rendered._root;
     assert(_rendered._root is sky.Node);
 
     if (mounting) {
       didMount();
     }
@@ skipping 36 matching lines @@
 
       _sync(null, _host, null);
       assert(_root is sky.Node);
 
       sw.stop();
       if (_shouldLogRenderDuration)
         print("Initial render: ${sw.elapsedMicroseconds} microseconds");
     });
   }
 }