Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(405)

Side by Side Diff: sky/framework/fn.dart

Issue 992033002: Change the name of Component.render to Component.build in Effen (Closed) Base URL: https://github.com/domokit/mojo.git@master
Patch Set: README Created 5 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « sky/examples/stocks-fn/stocksapp.dart ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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 }
OLDNEW
« no previous file with comments | « sky/examples/stocks-fn/stocksapp.dart ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698