Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(angular): add generator to migrate old mfe config
- Loading branch information
Showing
23 changed files
with
1,545 additions
and
0 deletions.
There are no files selected for viewing
48 changes: 48 additions & 0 deletions
48
docs/generated/api-angular/generators/convert-to-with-mf.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,48 @@ | ||
--- | ||
title: '@nrwl/angular:convert-to-with-mf generator' | ||
description: | ||
'Converts an old micro frontend configuration to use the new withModuleFederation helper. It will run successfully if the following conditions are met: | ||
- Is either a host or remote application | ||
- Shared npm package configurations have not been modified | ||
- Name used to identify the Micro Frontend application matches the project name | ||
_**Note:** This generator will overwrite your webpack config. If you have additional custom configuration in your config file, it will be lost!_' | ||
--- | ||
|
||
# @nrwl/angular:convert-to-with-mf | ||
|
||
Converts an old micro frontend configuration to use the new withModuleFederation helper. It will run successfully if the following conditions are met: | ||
|
||
- Is either a host or remote application | ||
- Shared npm package configurations have not been modified | ||
- Name used to identify the Micro Frontend application matches the project name | ||
|
||
_**Note:** This generator will overwrite your webpack config. If you have additional custom configuration in your config file, it will be lost!_ | ||
|
||
## Usage | ||
|
||
```bash | ||
nx generate convert-to-with-mf ... | ||
``` | ||
|
||
By default, Nx will search for `convert-to-with-mf` in the default collection provisioned in `workspace.json`. | ||
|
||
You can specify the collection explicitly as follows: | ||
|
||
```bash | ||
nx g @nrwl/angular:convert-to-with-mf ... | ||
``` | ||
|
||
Show what will be generated without writing to disk: | ||
|
||
```bash | ||
nx g convert-to-with-mf ... --dry-run | ||
``` | ||
|
||
## Options | ||
|
||
### project | ||
|
||
Type: `string` | ||
|
||
The name of the micro frontend project to migrate. |
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
29 changes: 29 additions & 0 deletions
29
packages/angular/src/generators/move-to-with-mf/__snapshots__/move-to-with-mf.spec.ts.snap
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,29 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`moveToWithMF should migrate a standard previous generated host config correctly 1`] = ` | ||
"const { withModuleFederation } = require('@nrwl/angular/module-federation'); | ||
module.exports = withModuleFederation({ | ||
name: 'host1', | ||
remotes: [['remote1', 'http://localhost:4201']], | ||
});" | ||
`; | ||
|
||
exports[`moveToWithMF should migrate a standard previous generated remote config correctly 1`] = ` | ||
"const { withModuleFederation } = require('@nrwl/angular/module-federation'); | ||
module.exports = withModuleFederation({ | ||
name: 'remote1', | ||
exposes: { | ||
'./Module': 'apps/remote1/src/app/remote-entry/entry.module.ts', | ||
}, | ||
});" | ||
`; | ||
|
||
exports[`moveToWithMF should migrate a standard previous generated remote config using object shared syntax correctly 1`] = ` | ||
"const { withModuleFederation } = require('@nrwl/angular/module-federation'); | ||
module.exports = withModuleFederation({ | ||
name: 'remote1', | ||
exposes: { | ||
'./Module': 'apps/remote1/src/app/remote-entry/entry.module.ts', | ||
}, | ||
});" | ||
`; |
7 changes: 7 additions & 0 deletions
7
...gular/src/generators/move-to-with-mf/lib/__snapshots__/is-host-remote-config.spec.ts.snap
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 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`isHostRemoteConfig should return remote when correct remote config found 1`] = ` | ||
"{ | ||
'./Module': 'apps/remote1/src/app/remote-entry/entry.module.ts' | ||
}" | ||
`; |
37 changes: 37 additions & 0 deletions
37
...ar/src/generators/move-to-with-mf/lib/__snapshots__/write-new-webpack-config.spec.ts.snap
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,37 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`writeNewWebpackConfig should convert config that is both remote and host correctly 1`] = ` | ||
"const { withModuleFederation } = require('@nrwl/angular/module-federation'); | ||
module.exports = withModuleFederation({ | ||
name: 'both1', | ||
remotes: [['remote1', 'http://localhost:4201']], | ||
exposes: { | ||
'./Module': 'apps/both/src/app/remote-entry/entry.module.ts' | ||
}, | ||
});" | ||
`; | ||
|
||
exports[`writeNewWebpackConfig should convert config that is neither remote and host correctly 1`] = ` | ||
"const { withModuleFederation } = require('@nrwl/angular/module-federation'); | ||
module.exports = withModuleFederation({ | ||
name: 'neither', | ||
});" | ||
`; | ||
|
||
exports[`writeNewWebpackConfig should convert host config correctly 1`] = ` | ||
"const { withModuleFederation } = require('@nrwl/angular/module-federation'); | ||
module.exports = withModuleFederation({ | ||
name: 'host1', | ||
remotes: [['remote1', 'http://localhost:4201']], | ||
});" | ||
`; | ||
|
||
exports[`writeNewWebpackConfig should convert remote config correctly 1`] = ` | ||
"const { withModuleFederation } = require('@nrwl/angular/module-federation'); | ||
module.exports = withModuleFederation({ | ||
name: 'remote1', | ||
exposes: { | ||
'./Module': 'apps/remote1/src/app/remote-entry/entry.module.ts' | ||
}, | ||
});" | ||
`; |
37 changes: 37 additions & 0 deletions
37
packages/angular/src/generators/move-to-with-mf/lib/check-name-matches.spec.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,37 @@ | ||
import { tsquery } from '@phenomnomnominal/tsquery'; | ||
import { checkOutputNameMatchesProjectName } from './check-name-matches'; | ||
describe('checkOutputNameMatchesProjectName', () => { | ||
it('should return true if the uniqueName matches the project name', () => { | ||
// ARRANGE | ||
const sourceText = `module.exports = { | ||
output: { | ||
uniqueName: 'proj' | ||
} | ||
}`; | ||
|
||
const ast = tsquery.ast(sourceText); | ||
|
||
// ACT | ||
const result = checkOutputNameMatchesProjectName(ast, 'proj'); | ||
|
||
// ASSERT | ||
expect(result).toBeTruthy(); | ||
}); | ||
|
||
it('should return false if the uniqueName does not match the project name', () => { | ||
// ARRANGE | ||
const sourceText = `module.exports = { | ||
output: { | ||
uniqueName: 'app1' | ||
} | ||
}`; | ||
|
||
const ast = tsquery.ast(sourceText); | ||
|
||
// ACT | ||
const result = checkOutputNameMatchesProjectName(ast, 'proj'); | ||
|
||
// ASSERT | ||
expect(result).toBeFalsy(); | ||
}); | ||
}); |
29 changes: 29 additions & 0 deletions
29
packages/angular/src/generators/move-to-with-mf/lib/check-name-matches.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,29 @@ | ||
import type { SourceFile } from 'typescript'; | ||
import { tsquery } from '@phenomnomnominal/tsquery'; | ||
|
||
export function checkOutputNameMatchesProjectName( | ||
ast: SourceFile, | ||
projectName: string | ||
) { | ||
const OUTPUT_SELECTOR = | ||
'PropertyAssignment:has(Identifier[name=output]) > ObjectLiteralExpression:has(PropertyAssignment:has(Identifier[name=uniqueName]))'; | ||
const UNIQUENAME_SELECTOR = | ||
'ObjectLiteralExpression > PropertyAssignment:has(Identifier[name=uniqueName]) > StringLiteral'; | ||
|
||
const outputNodes = tsquery(ast, OUTPUT_SELECTOR, { visitAllChildren: true }); | ||
if (outputNodes.length === 0) { | ||
// If the output isnt set in the config, then we can still set the project name correctly | ||
return true; | ||
} | ||
|
||
const uniqueNameNodes = tsquery(outputNodes[0], UNIQUENAME_SELECTOR, { | ||
visitAllChildren: true, | ||
}); | ||
if (uniqueNameNodes.length === 0) { | ||
// If the uniqeName isnt set in the config, then we can still set the project name correctly | ||
return true; | ||
} | ||
const uniqueName = uniqueNameNodes[0].getText().replace(/'/g, ''); | ||
|
||
return uniqueName === projectName; | ||
} |
Oops, something went wrong.