-
Notifications
You must be signed in to change notification settings - Fork 2.4k
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 federate-module generator (#19523)
- Loading branch information
Showing
19 changed files
with
754 additions
and
6 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
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
86 changes: 86 additions & 0 deletions
86
docs/generated/packages/angular/generators/federate-module.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,86 @@ | ||
| { | ||
| "name": "federate-module", | ||
| "factory": "./src/generators/federate-module/federate-module", | ||
| "schema": { | ||
| "$schema": "http://json-schema.org/schema", | ||
| "cli": "nx", | ||
| "$id": "NxReactFederateModule", | ||
| "title": "Federate Module", | ||
| "description": "Create a federated module, which is exposed by a remote and can be subsequently loaded by a host.", | ||
| "examples": [ | ||
| { | ||
| "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --remote=my-remote-app", | ||
| "description": "Create a federated module from my-remote-app, that exposes my-cmp from ./src/component/my-cmp.ts as MyModule." | ||
| } | ||
| ], | ||
| "type": "object", | ||
| "properties": { | ||
| "name": { | ||
| "description": "The name of the module.", | ||
| "type": "string", | ||
| "$default": { "$source": "argv", "index": 0 }, | ||
| "x-prompt": "What name would you like to use for the module?", | ||
| "pattern": "^[a-zA-Z][^:]*$", | ||
| "x-priority": "important" | ||
| }, | ||
| "path": { | ||
| "type": "string", | ||
| "description": "The path to locate the federated module.", | ||
| "x-prompt": "What is the path to the module to be federated?" | ||
| }, | ||
| "remote": { | ||
| "type": "string", | ||
| "description": "The name of the remote.", | ||
| "x-prompt": "What is/should the remote be named?" | ||
| }, | ||
| "projectNameAndRootFormat": { | ||
| "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).", | ||
| "type": "string", | ||
| "enum": ["as-provided", "derived"] | ||
| }, | ||
| "style": { | ||
| "description": "The file extension to be used for style files for the remote if one needs to be created.", | ||
| "type": "string", | ||
| "default": "css", | ||
| "enum": ["css", "scss", "sass", "less"] | ||
| }, | ||
| "skipFormat": { | ||
| "description": "Skip formatting files.", | ||
| "type": "boolean", | ||
| "default": false, | ||
| "x-priority": "internal" | ||
| }, | ||
| "unitTestRunner": { | ||
| "type": "string", | ||
| "enum": ["jest", "none"], | ||
| "description": "Test runner to use for unit tests of the remote if it needs to be created.", | ||
| "default": "jest" | ||
| }, | ||
| "e2eTestRunner": { | ||
| "type": "string", | ||
| "enum": ["cypress", "none"], | ||
| "description": "Test runner to use for end to end (e2e) tests of the remote if it needs to be created.", | ||
| "default": "cypress" | ||
| }, | ||
| "standalone": { | ||
| "description": "Whether to generate the remote application with standalone components if it needs to be created. _Note: This is only supported in Angular versions >= 14.1.0_", | ||
| "type": "boolean", | ||
| "default": false | ||
| }, | ||
| "host": { | ||
| "type": "string", | ||
| "description": "The host / shell application for this remote." | ||
| } | ||
| }, | ||
| "required": ["name", "path", "remote"], | ||
| "additionalProperties": false, | ||
| "presets": [] | ||
| }, | ||
| "x-type": "application", | ||
| "description": "Create a federated module, which is exposed by a remote and can be subsequently loaded by a host.", | ||
| "implementation": "/packages/angular/src/generators/federate-module/federate-module.ts", | ||
| "aliases": [], | ||
| "hidden": false, | ||
| "path": "/packages/angular/src/generators/federate-module/schema.json", | ||
| "type": "generator" | ||
| } |
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
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
5 changes: 5 additions & 0 deletions
5
packages/angular/src/generators/federate-module/federate-module.compat.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,5 @@ | ||
| import { convertNxGenerator } from '@nx/devkit'; | ||
| import { warnForSchematicUsage } from '../utils/warn-for-schematic-usage'; | ||
| import federateModule from './federate-module'; | ||
|
|
||
| export default warnForSchematicUsage(convertNxGenerator(federateModule)); |
102 changes: 102 additions & 0 deletions
102
packages/angular/src/generators/federate-module/federate-module.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,102 @@ | ||
| import { getProjects, Tree } from '@nx/devkit'; | ||
| import { Schema } from './schema'; | ||
| import { Schema as remoteSchma } from '../remote/schema'; | ||
| import { federateModuleGenerator } from './federate-module'; | ||
| import { createTreeWithEmptyWorkspace } from 'nx/src/devkit-testing-exports'; | ||
| import { Linter } from '@nx/linter'; | ||
| import remoteGenerator from '../remote/remote'; | ||
| import { E2eTestRunner, UnitTestRunner } from '../../utils/test-runners'; | ||
|
|
||
| describe('federate-module', () => { | ||
| let schema: Schema = { | ||
| name: 'my-federated-module', | ||
| remote: 'my-remote', | ||
| path: 'apps/my-remote/src/my-federated-module.ts', | ||
| }; | ||
|
|
||
| describe('no remote', () => { | ||
| const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); | ||
|
|
||
| beforeEach(() => { | ||
| tree.write(schema.path, `export const isEven = true;`); | ||
| }); | ||
|
|
||
| it('should generate a remote and e2e and should contain an entry for the new path for module federation', async () => { | ||
| await federateModuleGenerator(tree, schema); | ||
|
|
||
| const projects = getProjects(tree); | ||
|
|
||
| expect(projects.get('my-remote').root).toEqual('apps/my-remote'); | ||
|
|
||
| expect(tree.exists('apps/my-remote/module-federation.config.ts')).toBe( | ||
| true | ||
| ); | ||
|
|
||
| const content = tree.read( | ||
| 'apps/my-remote/module-federation.config.ts', | ||
| 'utf-8' | ||
| ); | ||
| expect(content).toContain( | ||
| `'./my-federated-module': 'apps/my-remote/src/my-federated-module.ts'` | ||
| ); | ||
|
|
||
| const tsconfig = JSON.parse(tree.read('tsconfig.base.json', 'utf-8')); | ||
| expect( | ||
| tsconfig.compilerOptions.paths['my-remote/my-federated-module'] | ||
| ).toEqual(['apps/my-remote/src/my-federated-module.ts']); | ||
| }); | ||
| }); | ||
|
|
||
| describe('with remote', () => { | ||
| const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); | ||
| let remoteSchema: remoteSchma = { | ||
| name: 'my-remote', | ||
| e2eTestRunner: E2eTestRunner.Cypress, | ||
| skipFormat: true, | ||
| linter: Linter.EsLint, | ||
| style: 'css', | ||
| unitTestRunner: UnitTestRunner.Jest, | ||
| }; | ||
|
|
||
| beforeEach(async () => { | ||
| remoteSchema.name = uniq('remote'); | ||
| await remoteGenerator(tree, remoteSchema); | ||
| tree.write(schema.path, `export const isEven = true;`); | ||
| }); | ||
|
|
||
| it('should append the new path to the module federation config', async () => { | ||
| let content = tree.read( | ||
| `apps/${remoteSchema.name}/module-federation.config.ts`, | ||
| 'utf-8' | ||
| ); | ||
|
|
||
| expect(content).not.toContain( | ||
| `'./my-federated-module': 'apps/my-remote/src/my-federated-module.ts'` | ||
| ); | ||
|
|
||
| await federateModuleGenerator(tree, { | ||
| ...schema, | ||
| remote: remoteSchema.name, | ||
| }); | ||
|
|
||
| content = tree.read( | ||
| `apps/${remoteSchema.name}/module-federation.config.ts`, | ||
| 'utf-8' | ||
| ); | ||
| expect(content).toContain( | ||
| `'./my-federated-module': 'apps/my-remote/src/my-federated-module.ts'` | ||
| ); | ||
|
|
||
| const tsconfig = JSON.parse(tree.read('tsconfig.base.json', 'utf-8')); | ||
| expect( | ||
| tsconfig.compilerOptions.paths[ | ||
| `${remoteSchema.name}/my-federated-module` | ||
| ] | ||
| ).toEqual(['apps/my-remote/src/my-federated-module.ts']); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| function uniq(prefix: string) { | ||
| return `${prefix}${Math.floor(Math.random() * 10000000)}`; | ||
| } |
Oops, something went wrong.
00ebc0bThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
nx-dev – ./
nx-five.vercel.app
nx.dev
nx-dev-git-master-nrwl.vercel.app
nx-dev-nrwl.vercel.app