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 |