Content-Length: 330732 | pFad | http://github.com/Angular-RU/change-detection-tree

04 GitHub - Angular-RU/change-detection-tree: Visual detecting changes in the component tree (View Engine)
Skip to content

Visual detecting changes in the component tree (View Engine)

Notifications You must be signed in to change notification settings

Angular-RU/change-detection-tree

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 Cannot retrieve latest commit at this time.

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Visual detecting changes in the component tree

This project shows you how the component tree in Angular is updated. The time shown on the component nodes in the tree is the interval between ngDoCheck and ngAfterViewChecked.

$ git clone https://github.com/Angular-RU/change-detection-tree cd-tree && cd cd-tree
$ npm install # install all dependencies
$ ng serve # worked with jit or aot

StackBlitz examples

ChangeDetection.Default + NgZone (static tree + projection):
       Example: https://stackblitz.com/github/Angular-RU/change-detection-tree

Learn more

$ ng serve --app 0 --port 4200

ChangeDetection.OnPush + NgZone (random generate tree):
       Example: https://stackblitz.com/github/Angular-RU/change-detection-tree/tree/onpush

Learn more

$ ng serve --app 1 --port 4201

ChangeDetection.OnPush + Async pipe - without ngZone (random generate tree):
       Example: https://stackblitz.com/github/Angular-RU/change-detection-tree/tree/onpush-async-without-zone

Learn more

$ ng serve --app 2 --port 4202

ChangeDetection.Default + Async pipe + ngZone (random generate tree):
       Example: https://stackblitz.com/github/Angular-RU/change-detection-tree/tree/async-pipe

Learn more

$ ng serve --app 3 --port 4203

TODO

ChangeDetection.Default + Async pipe + Reactive Forms - without ngZone:
       Example: In progress

Custom state-management (services):
       Example: In progress

NgRx:
       Example: In progress

MobX:
       Example: In progress

Web-worker platform:
       Example: In progress

Checklist for detect problem

  • Detect problem with Zone

Copy the code and paste it into the console. If your component tree too often calls Application.tick() your application will disappear.

let [root] = getAllAngularRootElements();
let appRoot = ng.probe(root);
let [rootComponent] = appRoot.injector.get(ng.coreTokens.ApplicationRef).components;
let ChangeDetectorRef = rootComponent.changeDetectorRef.constructor.prototype;
ChangeDetectorRef.constructor.prototype.detectChanges = (function () {
    let oldDC = ChangeDetectorRef.constructor.prototype.detectChanges;
    let map = new WeakMap();
    
    return function () {
        Zone.root.run(() => showChangeDetection(this));
        return oldDC.apply(this, arguments);
    }

    function showChangeDetection (changeDetector) {
        let view = changeDetector._view;
        modifyNodeOpacity(view, fade);
        modifyNodeOpacity(view, (node) => {
            let timeout = map.get(node.renderElement);
            if (timeout) {
                clearTimeout(timeout);
            }
            timeout = setTimeout(() => show(node), 1000);
            map.set(node.renderElement, timeout);
        });
    }

    function modifyNodeOpacity (view, modifier) {
        view.nodes.forEach(node => {
            if (node && node.renderElement && node.renderElement.style) {
                modifier(node);
            }
        });
    }

    function fade (node) {
        let { style } = node.renderElement;
        let opacity = parseFloat(style.opacity) || 1;
        let newOpacity = opacity - 0.01;
        style.display = 'block';
        style.opacity = newOpacity > 0 ? newOpacity : 0;
    }

    function show (node) {
        let { style } = node.renderElement;
        style.display = 'block';
        style.opacity = 1;
    }
})();








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/Angular-RU/change-detection-tree

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy