Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core): Add schematic to migrate control flow syntax
This adds the migration to run to migrate to the block control flow syntax. It includes ngIf, ngFor, and ngSwitch.
- Loading branch information
1 parent
5b88d13
commit fd31a93
Showing
9 changed files
with
1,294 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
packages/core/schematics/ng-generate/control-flow-migration/BUILD.bazel
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
load("//tools:defaults.bzl", "esbuild", "ts_library") | ||
|
||
package( | ||
default_visibility = [ | ||
"//packages/core/schematics:__pkg__", | ||
"//packages/core/schematics/migrations/google3:__pkg__", | ||
"//packages/core/schematics/test:__pkg__", | ||
], | ||
) | ||
|
||
filegroup( | ||
name = "static_files", | ||
srcs = ["schema.json"], | ||
) | ||
|
||
ts_library( | ||
name = "control-flow-migration", | ||
srcs = glob(["**/*.ts"]), | ||
tsconfig = "//packages/core/schematics:tsconfig.json", | ||
deps = [ | ||
"//packages/compiler", | ||
"//packages/core/schematics/utils", | ||
"@npm//@angular-devkit/schematics", | ||
"@npm//@types/node", | ||
"@npm//typescript", | ||
], | ||
) | ||
|
||
esbuild( | ||
name = "bundle", | ||
entry_point = ":index.ts", | ||
external = [ | ||
"@angular-devkit/*", | ||
"typescript", | ||
], | ||
format = "cjs", | ||
platform = "node", | ||
deps = [":control-flow-migration"], | ||
) |
32 changes: 32 additions & 0 deletions
32
packages/core/schematics/ng-generate/control-flow-migration/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
## Control Flow Syntax migration | ||
|
||
Angular v17 introduces a new control flow syntax that uses the `@` and `}` characters. | ||
This migration replaces the existing usages of `*ngIf`, `*ngFor`, and `*ngSwitch` to | ||
their equivalent block syntax. Existing ng-templates are preserved in case they are | ||
used elsewhere in the template. | ||
|
||
|
||
#### Before | ||
```ts | ||
import {Component} from '@angular/core'; | ||
|
||
@Component({ | ||
template: `<div><span *ngIf="show">Content here</span></div>` | ||
}) | ||
export class MyComp { | ||
show = false; | ||
} | ||
``` | ||
|
||
|
||
#### After | ||
```ts | ||
import {Component} from '@angular/core'; | ||
|
||
@Component({ | ||
template: `<div>@if (show) {<span>Content here</span}</div>` | ||
}) | ||
export class MyComp { | ||
show = false | ||
} | ||
``` |
63 changes: 63 additions & 0 deletions
63
packages/core/schematics/ng-generate/control-flow-migration/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
/** | ||
* @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 {Rule, SchematicsException, Tree} from '@angular-devkit/schematics'; | ||
import {relative} from 'path'; | ||
|
||
import {getProjectTsConfigPaths} from '../../utils/project_tsconfig_paths'; | ||
import {canMigrateFile, createMigrationProgram} from '../../utils/typescript/compiler_host'; | ||
|
||
import {analyze, AnalyzedFile, migrateTemplate} from './util'; | ||
|
||
export default function(): Rule { | ||
return async (tree: Tree) => { | ||
const {buildPaths, testPaths} = await getProjectTsConfigPaths(tree); | ||
const basePath = process.cwd(); | ||
const allPaths = [...buildPaths, ...testPaths]; | ||
|
||
if (!allPaths.length) { | ||
throw new SchematicsException( | ||
'Could not find any tsconfig file. Cannot run the control flow migration.'); | ||
} | ||
|
||
for (const tsconfigPath of allPaths) { | ||
runControlFlowMigration(tree, tsconfigPath, basePath); | ||
} | ||
}; | ||
} | ||
|
||
function runControlFlowMigration(tree: Tree, tsconfigPath: string, basePath: string) { | ||
const program = createMigrationProgram(tree, tsconfigPath, basePath); | ||
const sourceFiles = | ||
program.getSourceFiles().filter(sourceFile => canMigrateFile(basePath, sourceFile, program)); | ||
const analysis = new Map<string, AnalyzedFile>(); | ||
|
||
for (const sourceFile of sourceFiles) { | ||
analyze(sourceFile, analysis); | ||
} | ||
|
||
for (const [path, file] of analysis) { | ||
const ranges = file.getSortedRanges(); | ||
const relativePath = relative(basePath, path); | ||
const content = tree.readText(relativePath); | ||
const update = tree.beginUpdate(relativePath); | ||
|
||
for (const [start, end] of ranges) { | ||
const template = content.slice(start, end); | ||
const length = (end ?? content.length) - start; | ||
const migrated = migrateTemplate(template); | ||
|
||
if (migrated !== null) { | ||
update.remove(start, length); | ||
update.insertLeft(start, migrated); | ||
} | ||
} | ||
|
||
tree.commitUpdate(update); | ||
} | ||
} |
7 changes: 7 additions & 0 deletions
7
packages/core/schematics/ng-generate/control-flow-migration/schema.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"$schema": "http://json-schema.org/draft-07/schema", | ||
"$id": "AngularControlFlowMigration", | ||
"title": "Angular Control Flow Migration Schema", | ||
"type": "object", | ||
"properties": {} | ||
} |
Oops, something went wrong.