You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/cdk/schematics/ng-update/update-schematic.md
+55-54Lines changed: 55 additions & 54 deletions
Original file line number
Diff line number
Diff line change
@@ -1,43 +1,44 @@
1
-
# ng-update schematic
1
+
# ng-update schematic
2
2
3
3
**Note** The CDK ng-update schematic is the foundation for the Angular Material update schematic. This is achieved by making the ng-update code for the CDK as reusable as possible.
4
-
4
+
5
5
This means that this document also applies for the Angular Material `ng-update`.
6
6
7
7
---
8
-
8
+
9
9
The `ng-update` schematic consists of multiple migration entry-points where every entry-point
10
-
targets a specific Angular CDK or Angular Material version.
10
+
targets a specific Angular CDK or Angular Material version.
11
11
12
12
13
13
As of right now, we have multiple migration entry-points that handle the breaking changes for a
14
-
given target version:
15
-
14
+
given target version:
15
+
16
16
| Target Version | Description |
17
17
|----------------|------------------------|
18
-
| V6 | Upgrade from any version to v6.0.0 |
19
-
| V7 | Upgrade from any version to v7.0.0 |
20
-
| V8 | Upgrade from any version to v8.0.0 |
21
-
18
+
| V6 | Upgrade from any version to v6.0.0 |
19
+
| V7 | Upgrade from any version to v7.0.0 |
20
+
| V8 | Upgrade from any version to v8.0.0 |
21
+
| V9 | Upgrade from any version to v9.0.0 |
22
+
22
23
Note that the migrations run _in order_ if multiple versions are implicitly targeted. For
23
24
example, consider an application which uses Angular Material v5.0.0. In case the developer runs
24
25
`ng update`, the Angular CLI **only** installs V7 and runs the V6 and V7 migrations _in order_.
25
-
26
+
26
27
This shows that we technically need to keep all migrations in the code base because
27
28
the CLI usually only installs the latest version and expects all migrations for past
28
29
major versions to be present.
29
-
30
-
## Update concept
31
-
30
+
31
+
## Update concept
32
+
32
33
The goal of the update schematic is to automatically migrate code that is affected by breaking
33
34
changes of the target version. Most of the time we can apply such automatic migrations, but
34
35
there are also a few breaking changes that cannot be migrated automatically.
35
-
36
+
36
37
In that case, our goal should be to notify the developer about the breaking change that needs
37
38
attention.
38
-
39
-
## Transforming TypeScript files
40
-
39
+
40
+
## Transforming TypeScript files
41
+
41
42
In order to automatically migrate TypeScript source files, we take advantage of the TypeScript
42
43
Compiler API which allows us to parse and work with the AST of project source files. We built
43
44
a small framework for analyzing and updating project source files that is called `update-tool`.
@@ -53,8 +54,8 @@ leveraged `tslint` caused various problems:
53
54
* TSLint is not guaranteed to be installed in CLI projects. See: https://github.com/angular/angular-cli/issues/14555
54
55
* TSLint replacements lead to memory leaks due to the retained TypeScript nodes
55
56
* No way to have a *global analysis* phase since lint rules are only able to visit source files.
56
-
* No flexibility. i.e.
57
-
* No way to ensure source files are only analyzed a single time
57
+
* No flexibility. i.e.
58
+
* No way to ensure source files are only analyzed a single time
58
59
* No way to implement a progress bar
59
60
* No easy way to add support for HTML templates or stylesheets
60
61
@@ -74,49 +75,49 @@ All of these problems that `tslint` had, have been solved when we built the
74
75
There also other various concepts for transforming TypeScript source files, but most of them
75
76
don't provide a simple API for replacements and reporting. Read more about the possible
76
77
approaches below:
77
-
78
-
|Description | Evaluation |
79
-
|------------|------------|
80
-
| Regular Expressions | Too brittle. No type checking possible. Regular Expression _can_ be used in combination with some real AST walking |
81
-
| TypeScript transforms (no emit) | This would be a good solution but there is no API to serialize the transformed AST into source code without using the `ts.Printer`. The printer can be used to serialize the AST but it breaks formatting, code style and more. This is not acceptable for a migration. |
78
+
79
+
|Description | Evaluation |
80
+
|------------|------------|
81
+
| Regular Expressions | Too brittle. No type checking possible. Regular Expression _can_ be used in combination with some real AST walking |
82
+
| TypeScript transforms (no emit) | This would be a good solution but there is no API to serialize the transformed AST into source code without using the `ts.Printer`. The printer can be used to serialize the AST but it breaks formatting, code style and more. This is not acceptable for a migration. |
82
83
83
84
### Upgrade data for target versions
84
-
85
+
85
86
The upgrade data for migrations is separated based on the target version. This is necessary in
86
-
order to allow migrations run sequentially. For example:
87
-
87
+
order to allow migrations run sequentially. For example:
88
+
88
89
* In V6: `onChange` has been renamed to `changed`
89
90
* In V7: `changed` has been renamed to `onValueChange`
90
-
91
+
91
92
If we would not run the migrations in order, or don't separate the upgrade data, we would not be
92
93
able to properly handle the migrations for each target version. e.g. someone is on
93
94
5.0.0 and *only* wants to upgrade to 6.0.0. In that case he would end up with `onValueChange`
94
-
because the non-separated upgrade data would just include: _`onChange` => `onValueChange`_
95
-
95
+
because the non-separated upgrade data would just include: _`onChange` => `onValueChange`_
96
+
96
97
Also besides separating the upgrade data based on the target version, we split the upgrade data
97
-
based on the type of code that is affected by these migrations:
98
-
99
-
* See here: [src/material/schematics/update/material/data](https://github.com/angular/components/tree/master/src/material/schematics/update/material/data)
100
-
98
+
based on the type of code that is affected by these migrations:
99
+
100
+
* See here: [src/material/schematics/update/material/data](https://github.com/angular/components/tree/master/src/material/schematics/update/material/data)
101
+
101
102
### Adding upgrade data
102
-
103
+
103
104
Adding upgrade data is now a **mandatory** step before breaking changes should be merged
104
105
into `upstream`. For simple and common breaking changes, there should be already an upgrade
105
-
data file that just needs the new change inserted.
106
-
106
+
data file that just needs the new change inserted.
107
+
107
108
In case there is no upgrade data for a breaking change, we need to evaluate if there should be
108
109
a single `misc` migration rule that is tied to that specific breaking change, or if we should
109
-
create a new migration rule in a more generic way.
110
+
create a new migration rule in a more generic way.
110
111
111
112
---
112
113
113
-
**Example**: Adding upgrade data for a property rename
114
+
**Example**: Adding upgrade data for a property rename
114
115
**Scenario**: In Angular Material V7.0.0, we rename `MatRipple#color` to `MatRipple#newColor`.
115
-
116
+
116
117
First, look for an existing upgrade data file that covers similar breaking changes. In that case
117
118
an existing upgrade data file for `property-names` already exists. Insert the new breaking change
0 commit comments