18b33e79d3
Currently we save a reference to an `LView` on most DOM nodes created by Angular either by saving the `LView` directly in the `__ngContext__` or by saving the `LContext` which has a reference to the `LView`. This can be a problem if the DOM node is retained in memory, because the `LView` has references to all of the child nodes of the view, as well as other internal data structures. Previously we tried to resolve the issue by clearing the `__ngContext__` when a node is removed (see https://github.com/angular/angular/pull/36011), but we decided not to proceeed, because it can slow down destruction due to a megamorphic write. These changes aim to address the issue while reducing the performance impact by assigning a unique ID when an `LView` is created and adding it to `__ngContext__`. All active views are tracked in a map where their unique ID is used as the key. We don't need to worry about leaks within that map, because `LView`s are an internal data structure and we have complete control over when they are created and destroyed. Fixes #41047. PR Close #41358
81 lines
3.0 KiB
TypeScript
81 lines
3.0 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google LLC All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.io/license
|
|
*/
|
|
|
|
import {Component} from '@angular/core';
|
|
import {getLContext} from '@angular/core/src/render3/context_discovery';
|
|
import {LViewDebug} from '@angular/core/src/render3/instructions/lview_debug';
|
|
import {TNodeType} from '@angular/core/src/render3/interfaces/node';
|
|
import {HEADER_OFFSET} from '@angular/core/src/render3/interfaces/view';
|
|
import {TestBed} from '@angular/core/testing';
|
|
import {expect} from '@angular/platform-browser/testing/src/matchers';
|
|
import {onlyInIvy} from '@angular/private/testing';
|
|
|
|
import {matchDomElement, matchDomText, matchTI18n, matchTNode} from '../render3/matchers';
|
|
|
|
onlyInIvy('Ivy specific').describe('Debug Representation', () => {
|
|
it('should generate a human readable version', () => {
|
|
@Component({selector: 'my-comp', template: '<div id="123">Hello World</div>'})
|
|
class MyComponent {
|
|
}
|
|
|
|
TestBed.configureTestingModule({declarations: [MyComponent]});
|
|
const fixture = TestBed.createComponent(MyComponent);
|
|
fixture.detectChanges();
|
|
|
|
const hostView = getLContext(fixture.componentInstance)!.lView!.debug!;
|
|
expect(hostView.hostHTML).toEqual(null);
|
|
const myCompView = hostView.childViews[0] as LViewDebug;
|
|
expect(myCompView.hostHTML).toContain('<div id="123">Hello World</div>');
|
|
expect(myCompView.nodes![0].html).toEqual('<div id="123">');
|
|
expect(myCompView.nodes![0].children![0].html).toEqual('Hello World');
|
|
});
|
|
|
|
describe('LViewDebug', () => {
|
|
describe('range', () => {
|
|
it('should show ranges', () => {
|
|
@Component({selector: 'my-comp', template: '<div i18n>Hello {{name}}</div>'})
|
|
class MyComponent {
|
|
name = 'World';
|
|
}
|
|
|
|
TestBed.configureTestingModule({declarations: [MyComponent]});
|
|
const fixture = TestBed.createComponent(MyComponent);
|
|
fixture.detectChanges();
|
|
|
|
const hostView = getLContext(fixture.componentInstance)!.lView!.debug!;
|
|
const myComponentView = hostView.childViews[0] as LViewDebug;
|
|
expect(myComponentView.decls).toEqual({
|
|
start: HEADER_OFFSET,
|
|
end: HEADER_OFFSET + 2,
|
|
length: 2,
|
|
content: [
|
|
{index: HEADER_OFFSET + 0, t: matchTNode({value: 'div'}), l: matchDomElement('div')},
|
|
{index: HEADER_OFFSET + 1, t: matchTI18n(), l: null},
|
|
]
|
|
});
|
|
expect(myComponentView.vars).toEqual({
|
|
start: HEADER_OFFSET + 2,
|
|
end: HEADER_OFFSET + 3,
|
|
length: 1,
|
|
content: [{index: HEADER_OFFSET + 2, t: null, l: 'World'}]
|
|
});
|
|
expect(myComponentView.expando).toEqual({
|
|
start: HEADER_OFFSET + 3,
|
|
end: HEADER_OFFSET + 4,
|
|
length: 1,
|
|
content: [{
|
|
index: HEADER_OFFSET + 3,
|
|
t: matchTNode({type: TNodeType.Text, value: '{{?}}'}),
|
|
l: matchDomText('Hello World')
|
|
}]
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|