feat(core): add automatic migration from Renderer to Renderer2 (#30936)
Adds a schematic and tslint rule that automatically migrate the consumer from `Renderer` to `Renderer2`. Supports: * Renaming imports. * Renaming property and method argument types. * Casting to `Renderer`. * Mapping all of the methods from the `Renderer` to `Renderer2`. Note that some of the `Renderer` methods don't map cleanly between renderers. In these cases the migration adds a helper function at the bottom of the file which ensures that we generate valid code with the same return value as before. E.g. here's what the migration for `createText` looks like. Before: ``` class SomeComponent { createAndAddText() { const node = this._renderer.createText(this._element.nativeElement, 'hello'); node.textContent += ' world'; } } ``` After: ``` class SomeComponent { createAndAddText() { const node = __rendererCreateTextHelper(this._renderer, this._element.nativeElement, 'hello'); node.textContent += ' world'; } } function __rendererCreateTextHelper(renderer: any, parent: any, value: any) { const node = renderer.createText(value); if (parent) { renderer.appendChild(parent, node); } return node; } ``` This PR resolves FW-1344. PR Close #30936
This commit is contained in:

committed by
Alex Rickabaugh

parent
9515f171b4
commit
c0955975f4
@ -0,0 +1,33 @@
|
||||
## Renderer -> Renderer2 migration
|
||||
|
||||
Automatically migrates from `Renderer` to `Renderer2` by changing method calls, renaming imports
|
||||
and renaming types. Tries to either map method calls directly from one renderer to the other, or
|
||||
if that's not possible, inserts custom helper functions at the bottom of the file.
|
||||
|
||||
#### Before
|
||||
```ts
|
||||
import { Renderer, ElementRef } from '@angular/core';
|
||||
|
||||
@Component({})
|
||||
export class MyComponent {
|
||||
constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
|
||||
|
||||
changeColor() {
|
||||
this._renderer.setElementStyle(this._element.nativeElement, 'color', 'purple');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### After
|
||||
```ts
|
||||
import { Renderer2, ElementRef } from '@angular/core';
|
||||
|
||||
@Component({})
|
||||
export class MyComponent {
|
||||
constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
|
||||
|
||||
changeColor() {
|
||||
this._renderer.setStyle(this._element.nativeElement, 'color', 'purple');
|
||||
}
|
||||
}
|
||||
```
|
Reference in New Issue
Block a user