| OLD | NEW |
| 1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 library fn; | 5 library fn; |
| 6 | 6 |
| 7 import 'dart:async'; | 7 import 'dart:async'; |
| 8 import 'dart:collection'; | 8 import 'dart:collection'; |
| 9 import 'dart:sky' as sky; | 9 import 'dart:sky' as sky; |
| 10 import 'reflect.dart' as reflect; | 10 import 'reflect.dart' as reflect; |
| (...skipping 226 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 237 root.setAttribute('style', inlineStyle); | 237 root.setAttribute('style', inlineStyle); |
| 238 } | 238 } |
| 239 } | 239 } |
| 240 | 240 |
| 241 bool _sync(Node old, sky.ParentNode host, sky.Node insertBefore) { | 241 bool _sync(Node old, sky.ParentNode host, sky.Node insertBefore) { |
| 242 // print("---Syncing children of $_key"); | 242 // print("---Syncing children of $_key"); |
| 243 | 243 |
| 244 Element oldElement = old as Element; | 244 Element oldElement = old as Element; |
| 245 | 245 |
| 246 if (oldElement == null) { | 246 if (oldElement == null) { |
| 247 // print("...no oldElement, initial render"); | 247 // print("...no oldElement, initial build"); |
| 248 | 248 |
| 249 _root = sky.document.createElement(_tagName); | 249 _root = sky.document.createElement(_tagName); |
| 250 _parentInsertBefore(host, _root, insertBefore); | 250 _parentInsertBefore(host, _root, insertBefore); |
| 251 _syncNode(); | 251 _syncNode(); |
| 252 | 252 |
| 253 for (var child in _children) { | 253 for (var child in _children) { |
| 254 child._sync(null, _root, null); | 254 child._sync(null, _root, null); |
| 255 assert(child._root is sky.Node); | 255 assert(child._root is sky.Node); |
| 256 } | 256 } |
| 257 | 257 |
| (...skipping 237 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 495 super._syncNode(oldAnchor); | 495 super._syncNode(oldAnchor); |
| 496 | 496 |
| 497 sky.HTMLAnchorElement skyAnchor = _root as sky.HTMLAnchorElement; | 497 sky.HTMLAnchorElement skyAnchor = _root as sky.HTMLAnchorElement; |
| 498 if (href != oldAnchor.href) { | 498 if (href != oldAnchor.href) { |
| 499 skyAnchor.href = href; | 499 skyAnchor.href = href; |
| 500 } | 500 } |
| 501 } | 501 } |
| 502 } | 502 } |
| 503 | 503 |
| 504 List<Component> _dirtyComponents = new List<Component>(); | 504 List<Component> _dirtyComponents = new List<Component>(); |
| 505 bool _renderScheduled = false; | 505 bool _buildScheduled = false; |
| 506 bool _inRenderDirtyComponents = false; | 506 bool _inRenderDirtyComponents = false; |
| 507 | 507 |
| 508 void _renderDirtyComponents() { | 508 void _buildDirtyComponents() { |
| 509 try { | 509 try { |
| 510 _inRenderDirtyComponents = true; | 510 _inRenderDirtyComponents = true; |
| 511 Stopwatch sw = new Stopwatch()..start(); | 511 Stopwatch sw = new Stopwatch()..start(); |
| 512 | 512 |
| 513 _dirtyComponents.sort((a, b) => a._order - b._order); | 513 _dirtyComponents.sort((a, b) => a._order - b._order); |
| 514 for (var comp in _dirtyComponents) { | 514 for (var comp in _dirtyComponents) { |
| 515 comp._renderIfDirty(); | 515 comp._buildIfDirty(); |
| 516 } | 516 } |
| 517 | 517 |
| 518 _dirtyComponents.clear(); | 518 _dirtyComponents.clear(); |
| 519 _renderScheduled = false; | 519 _buildScheduled = false; |
| 520 | 520 |
| 521 sw.stop(); | 521 sw.stop(); |
| 522 if (_shouldLogRenderDuration) | 522 if (_shouldLogRenderDuration) |
| 523 print("Render took ${sw.elapsedMicroseconds} microseconds"); | 523 print("Render took ${sw.elapsedMicroseconds} microseconds"); |
| 524 } finally { | 524 } finally { |
| 525 _inRenderDirtyComponents = false; | 525 _inRenderDirtyComponents = false; |
| 526 } | 526 } |
| 527 } | 527 } |
| 528 | 528 |
| 529 void _scheduleComponentForRender(Component c) { | 529 void _scheduleComponentForRender(Component c) { |
| 530 assert(!_inRenderDirtyComponents); | 530 assert(!_inRenderDirtyComponents); |
| 531 _dirtyComponents.add(c); | 531 _dirtyComponents.add(c); |
| 532 | 532 |
| 533 if (!_renderScheduled) { | 533 if (!_buildScheduled) { |
| 534 _renderScheduled = true; | 534 _buildScheduled = true; |
| 535 new Future.microtask(_renderDirtyComponents); | 535 new Future.microtask(_buildDirtyComponents); |
| 536 } | 536 } |
| 537 } | 537 } |
| 538 | 538 |
| 539 abstract class Component extends Node { | 539 abstract class Component extends Node { |
| 540 bool _dirty = true; // components begin dirty because they haven't rendered. | 540 bool _dirty = true; // components begin dirty because they haven't built. |
| 541 Node _rendered = null; | 541 Node _vdom = null; |
| 542 bool _removed = false; | 542 bool _removed = false; |
| 543 final int _order; | 543 final int _order; |
| 544 static int _currentOrder = 0; | 544 static int _currentOrder = 0; |
| 545 bool _stateful; | 545 bool _stateful; |
| 546 static Component _currentlyRendering; | 546 static Component _currentlyRendering; |
| 547 | 547 |
| 548 Component({ Object key, bool stateful }) | 548 Component({ Object key, bool stateful }) |
| 549 : _stateful = stateful != null ? stateful : false, | 549 : _stateful = stateful != null ? stateful : false, |
| 550 _order = _currentOrder + 1, | 550 _order = _currentOrder + 1, |
| 551 super(key:key); | 551 super(key:key); |
| 552 | 552 |
| 553 void didMount() {} | 553 void didMount() {} |
| 554 void didUnmount() {} | 554 void didUnmount() {} |
| 555 | 555 |
| 556 void _remove() { | 556 void _remove() { |
| 557 assert(_rendered != null); | 557 assert(_vdom != null); |
| 558 assert(_root != null); | 558 assert(_root != null); |
| 559 _rendered._remove(); | 559 _vdom._remove(); |
| 560 _rendered = null; | 560 _vdom = null; |
| 561 _root = null; | 561 _root = null; |
| 562 _removed = true; | 562 _removed = true; |
| 563 didUnmount(); | 563 didUnmount(); |
| 564 } | 564 } |
| 565 | 565 |
| 566 // TODO(rafaelw): It seems wrong to expose DOM at all. This is presently | 566 // TODO(rafaelw): It seems wrong to expose DOM at all. This is presently |
| 567 // needed to get sizing info. | 567 // needed to get sizing info. |
| 568 sky.Node getRoot() => _root; | 568 sky.Node getRoot() => _root; |
| 569 | 569 |
| 570 bool _sync(Node old, sky.Node host, sky.Node insertBefore) { | 570 bool _sync(Node old, sky.Node host, sky.Node insertBefore) { |
| 571 Component oldComponent = old as Component; | 571 Component oldComponent = old as Component; |
| 572 | 572 |
| 573 if (oldComponent == null || oldComponent == this) { | 573 if (oldComponent == null || oldComponent == this) { |
| 574 _renderInternal(host, insertBefore); | 574 _buildInternal(host, insertBefore); |
| 575 return false; | 575 return false; |
| 576 } | 576 } |
| 577 | 577 |
| 578 assert(oldComponent != null); | 578 assert(oldComponent != null); |
| 579 assert(_dirty); | 579 assert(_dirty); |
| 580 assert(_rendered == null); | 580 assert(_vdom == null); |
| 581 | 581 |
| 582 if (oldComponent._stateful) { | 582 if (oldComponent._stateful) { |
| 583 _stateful = false; // prevent iloop from _renderInternal below. | 583 _stateful = false; // prevent iloop from _buildInternal below. |
| 584 | 584 |
| 585 reflect.copyPublicFields(this, oldComponent); | 585 reflect.copyPublicFields(this, oldComponent); |
| 586 | 586 |
| 587 oldComponent._dirty = true; | 587 oldComponent._dirty = true; |
| 588 _dirty = false; | 588 _dirty = false; |
| 589 | 589 |
| 590 oldComponent._renderInternal(host, insertBefore); | 590 oldComponent._buildInternal(host, insertBefore); |
| 591 return true; // Must retain old component | 591 return true; // Must retain old component |
| 592 } | 592 } |
| 593 | 593 |
| 594 _rendered = oldComponent._rendered; | 594 _vdom = oldComponent._vdom; |
| 595 _renderInternal(host, insertBefore); | 595 _buildInternal(host, insertBefore); |
| 596 return false; | 596 return false; |
| 597 } | 597 } |
| 598 | 598 |
| 599 void _renderInternal(sky.Node host, sky.Node insertBefore) { | 599 void _buildInternal(sky.Node host, sky.Node insertBefore) { |
| 600 if (!_dirty) { | 600 if (!_dirty) { |
| 601 assert(_rendered != null); | 601 assert(_vdom != null); |
| 602 return; | 602 return; |
| 603 } | 603 } |
| 604 | 604 |
| 605 var oldRendered = _rendered; | 605 var oldRendered = _vdom; |
| 606 bool mounting = oldRendered == null; | 606 bool mounting = oldRendered == null; |
| 607 int lastOrder = _currentOrder; | 607 int lastOrder = _currentOrder; |
| 608 _currentOrder = _order; | 608 _currentOrder = _order; |
| 609 _currentlyRendering = this; | 609 _currentlyRendering = this; |
| 610 _rendered = render(); | 610 _vdom = build(); |
| 611 _currentlyRendering = null; | 611 _currentlyRendering = null; |
| 612 _currentOrder = lastOrder; | 612 _currentOrder = lastOrder; |
| 613 | 613 |
| 614 _rendered.events.addAll(events); | 614 _vdom.events.addAll(events); |
| 615 | 615 |
| 616 _dirty = false; | 616 _dirty = false; |
| 617 | 617 |
| 618 // TODO(rafaelw): This eagerly removes the old DOM. It may be that a | 618 // TODO(rafaelw): This eagerly removes the old DOM. It may be that a |
| 619 // new component was rendered that could re-use some of it. Consider | 619 // new component was built that could re-use some of it. Consider |
| 620 // syncing the new VDOM against the old one. | 620 // syncing the new VDOM against the old one. |
| 621 if (oldRendered != null && | 621 if (oldRendered != null && |
| 622 _rendered.runtimeType != oldRendered.runtimeType) { | 622 _vdom.runtimeType != oldRendered.runtimeType) { |
| 623 oldRendered._remove(); | 623 oldRendered._remove(); |
| 624 oldRendered = null; | 624 oldRendered = null; |
| 625 } | 625 } |
| 626 | 626 |
| 627 if (_rendered._sync(oldRendered, host, insertBefore)) { | 627 if (_vdom._sync(oldRendered, host, insertBefore)) { |
| 628 _rendered = oldRendered; // retain stateful component | 628 _vdom = oldRendered; // retain stateful component |
| 629 } | 629 } |
| 630 _root = _rendered._root; | 630 _root = _vdom._root; |
| 631 assert(_rendered._root is sky.Node); | 631 assert(_vdom._root is sky.Node); |
| 632 | 632 |
| 633 if (mounting) { | 633 if (mounting) { |
| 634 didMount(); | 634 didMount(); |
| 635 } | 635 } |
| 636 } | 636 } |
| 637 | 637 |
| 638 void _renderIfDirty() { | 638 void _buildIfDirty() { |
| 639 if (_removed) | 639 if (_removed) |
| 640 return; | 640 return; |
| 641 | 641 |
| 642 assert(_rendered != null); | 642 assert(_vdom != null); |
| 643 | 643 |
| 644 var rendered = _rendered; | 644 var vdom = _vdom; |
| 645 while (rendered is Component) { | 645 while (vdom is Component) { |
| 646 rendered = rendered._rendered; | 646 vdom = vdom._vdom; |
| 647 } | 647 } |
| 648 | 648 |
| 649 assert(rendered._root != null); | 649 assert(vdom._root != null); |
| 650 sky.Node root = rendered._root; | 650 sky.Node root = vdom._root; |
| 651 | 651 |
| 652 _renderInternal(root.parentNode, root.nextSibling); | 652 _buildInternal(root.parentNode, root.nextSibling); |
| 653 } | 653 } |
| 654 | 654 |
| 655 void setState(Function fn()) { | 655 void setState(Function fn()) { |
| 656 assert(_rendered != null || _removed); // cannot setState before mounting. | 656 assert(_vdom != null || _removed); // cannot setState before mounting. |
| 657 _stateful = true; | 657 _stateful = true; |
| 658 fn(); | 658 fn(); |
| 659 if (!_removed && _currentlyRendering != this) { | 659 if (!_removed && _currentlyRendering != this) { |
| 660 _dirty = true; | 660 _dirty = true; |
| 661 _scheduleComponentForRender(this); | 661 _scheduleComponentForRender(this); |
| 662 } | 662 } |
| 663 } | 663 } |
| 664 | 664 |
| 665 Node render(); | 665 Node build(); |
| 666 } | 666 } |
| 667 | 667 |
| 668 abstract class App extends Component { | 668 abstract class App extends Component { |
| 669 sky.Node _host = null; | 669 sky.Node _host = null; |
| 670 App() : super(stateful: true) { | 670 App() : super(stateful: true) { |
| 671 _host = sky.document.createElement('div'); | 671 _host = sky.document.createElement('div'); |
| 672 sky.document.appendChild(_host); | 672 sky.document.appendChild(_host); |
| 673 | 673 |
| 674 new Future.microtask(() { | 674 new Future.microtask(() { |
| 675 Stopwatch sw = new Stopwatch()..start(); | 675 Stopwatch sw = new Stopwatch()..start(); |
| 676 | 676 |
| 677 _sync(null, _host, null); | 677 _sync(null, _host, null); |
| 678 assert(_root is sky.Node); | 678 assert(_root is sky.Node); |
| 679 | 679 |
| 680 sw.stop(); | 680 sw.stop(); |
| 681 if (_shouldLogRenderDuration) | 681 if (_shouldLogRenderDuration) |
| 682 print("Initial render: ${sw.elapsedMicroseconds} microseconds"); | 682 print("Initial build: ${sw.elapsedMicroseconds} microseconds"); |
| 683 }); | 683 }); |
| 684 } | 684 } |
| 685 } | 685 } |
| OLD | NEW |