miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(react): use JS webpack config files for module federation (#19452)

Browse Source
This commit is contained in:
Jack Hsu 2023-10-04 17:43:02 -04:00 committed by GitHub
parent 854d8b83b5
commit f04519996c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/generated/packages/react/generators/host.json
View File

@ -164,7 +164,7 @@
"typescriptConfiguration": { "typescriptConfiguration": {
"type": "boolean", "type": "boolean",
"description": "Whether the module federation configuration and webpack configuration files should use TS.", "description": "Whether the module federation configuration and webpack configuration files should use TS.",
"default": true "default": false
} }
}, },
"required": ["name"], "required": ["name"],

2
docs/generated/packages/react/generators/remote.json
View File

@ -162,7 +162,7 @@
"typescriptConfiguration": { "typescriptConfiguration": {
"type": "boolean", "type": "boolean",
"description": "Whether the module federation configuration and webpack configuration files should use TS.", "description": "Whether the module federation configuration and webpack configuration files should use TS.",
"default": true "default": false
} }
}, },
"required": ["name"], "required": ["name"],

70
e2e/react-core/src/react-module-federation.test.ts
View File

@ -2,6 +2,7 @@ import { stripIndents } from '@nx/devkit';
import { import {
checkFilesExist, checkFilesExist,
cleanupProject, cleanupProject,
killPorts,
killProcessAndPorts, killProcessAndPorts,
newProject, newProject,
readJson, readJson,
@ -39,10 +40,10 @@ describe('React Module Federation', () => {
`generate @nx/react:remote ${remote3} --style=css --host=${shell} --no-interactive` `generate @nx/react:remote ${remote3} --style=css --host=${shell} --no-interactive`
); );
checkFilesExist(`apps/${shell}/module-federation.config.ts`); checkFilesExist(`apps/${shell}/module-federation.config.js`);
checkFilesExist(`apps/${remote1}/module-federation.config.ts`); checkFilesExist(`apps/${remote1}/module-federation.config.js`);
checkFilesExist(`apps/${remote2}/module-federation.config.ts`); checkFilesExist(`apps/${remote2}/module-federation.config.js`);
checkFilesExist(`apps/${remote3}/module-federation.config.ts`); checkFilesExist(`apps/${remote3}/module-federation.config.js`);
await expect(runCLIAsync(`test ${shell}`)).resolves.toMatchObject({ await expect(runCLIAsync(`test ${shell}`)).resolves.toMatchObject({
combinedOutput: expect.stringContaining('Test Suites: 1 passed, 1 total'), combinedOutput: expect.stringContaining('Test Suites: 1 passed, 1 total'),
@ -54,15 +55,15 @@ describe('React Module Federation', () => {
expect(readPort(remote3)).toEqual(4203); expect(readPort(remote3)).toEqual(4203);
updateFile( updateFile(
`apps/${shell}/webpack.config.ts`, `apps/${shell}/webpack.config.js`,
stripIndents` stripIndents`
import { composePlugins, withNx, ModuleFederationConfig } from '@nx/webpack'; const { composePlugins, withNx, ModuleFederationConfig } = require('@nx/webpack');
import { withReact } from '@nx/react'; const { withReact } = require('@nx/react');
import { withModuleFederation } from '@nx/react/module-federation'); const { withModuleFederation } = require('@nx/react/module-federation');
const baseConfig = require('./module-federation.config'); const baseConfig = require('./module-federation.config');
const config: ModuleFederationConfig = { const config = {
...baseConfig, ...baseConfig,
remotes: [ remotes: [
'${remote1}', '${remote1}',
@ -106,20 +107,15 @@ describe('React Module Federation', () => {
}); });
` `
); );
// TODO(caleb): cypress isn't able to find the element and then throws error with an address already in use error.
// https://staging.nx.app/runs/ASAokpXhnE/task/e2e-react:e2e if (runE2ETests()) {
// if (runCypressTests()) { const e2eResults = runCLI(`e2e ${shell}-e2e --no-watch --verbose`);
// const e2eResults = runCLI(`e2e ${shell}-e2e --no-watch --verbose`); expect(e2eResults).toContain('All specs passed!');
// expect(e2eResults).toContain('All specs passed!'); await killPorts(readPort(shell));
// expect( await killPorts(readPort(remote1));
// await killPorts([ await killPorts(readPort(remote2));
// readPort(shell), await killPorts(readPort(remote3));
// readPort(remote1), }
// readPort(remote2),
// readPort(remote3),
// ])
// ).toBeTruthy();
// }
}, 500_000); }, 500_000);
it('should should support generating host and remote apps with the new name and root format', async () => { it('should should support generating host and remote apps with the new name and root format', async () => {
@ -136,8 +132,8 @@ describe('React Module Federation', () => {
// check files are generated without the layout directory ("apps/") and // check files are generated without the layout directory ("apps/") and
// using the project name as the directory when no directory is provided // using the project name as the directory when no directory is provided
checkFilesExist(`${shell}/module-federation.config.ts`); checkFilesExist(`${shell}/module-federation.config.js`);
checkFilesExist(`${remote}/module-federation.config.ts`); checkFilesExist(`${remote}/module-federation.config.js`);
// check default generated host is built successfully // check default generated host is built successfully
const buildOutput = runCLI(`run ${shell}:build:development`); const buildOutput = runCLI(`run ${shell}:build:development`);
@ -304,31 +300,31 @@ describe('React Module Federation', () => {
// update host and remote to use library type var // update host and remote to use library type var
updateFile( updateFile(
`${shell}/module-federation.config.ts`, `${shell}/module-federation.config.js`,
stripIndents` stripIndents`
import { ModuleFederationConfig } from '@nx/webpack'; const { ModuleFederationConfig } = require('@nx/webpack');
const config: ModuleFederationConfig = { const config = {
name: '${shell}', name: '${shell}',
library: { type: 'var', name: '${shell}' }, library: { type: 'var', name: '${shell}' },
remotes: ['${remote}'], remotes: ['${remote}'],
}; };
export default config; module.exports = config;
` `
); );
updateFile( updateFile(
`${shell}/webpack.config.prod.ts`, `${shell}/webpack.config.prod.js`,
`export { default } from './webpack.config';` `module.exports = require('./webpack.config');`
); );
updateFile( updateFile(
`${remote}/module-federation.config.ts`, `${remote}/module-federation.config.js`,
stripIndents` stripIndents`
import { ModuleFederationConfig } from '@nx/webpack'; const { ModuleFederationConfig } = require('@nx/webpack');
const config: ModuleFederationConfig = { const config = {
name: '${remote}', name: '${remote}',
library: { type: 'var', name: '${remote}' }, library: { type: 'var', name: '${remote}' },
exposes: { exposes: {
@ -336,13 +332,13 @@ describe('React Module Federation', () => {
}, },
}; };
export default config; module.exports = config;
` `
); );
updateFile( updateFile(
`${remote}/webpack.config.prod.ts`, `${remote}/webpack.config.prod.js`,
`export { default } from './webpack.config';` `module.exports = require('./webpack.config');`
); );
// Update host e2e test to check that the remote works with library type var via navigation // Update host e2e test to check that the remote works with library type var via navigation

2
packages/react/src/generators/host/schema.json
View File

@ -170,7 +170,7 @@
"typescriptConfiguration": { "typescriptConfiguration": {
"type": "boolean", "type": "boolean",
"description": "Whether the module federation configuration and webpack configuration files should use TS.", "description": "Whether the module federation configuration and webpack configuration files should use TS.",
"default": true "default": false
} }
}, },
"required": ["name"], "required": ["name"],

2
packages/react/src/generators/remote/schema.json
View File

@ -168,7 +168,7 @@
"typescriptConfiguration": { "typescriptConfiguration": {
"type": "boolean", "type": "boolean",
"description": "Whether the module federation configuration and webpack configuration files should use TS.", "description": "Whether the module federation configuration and webpack configuration files should use TS.",
"default": true "default": false
} }
}, },
"required": ["name"], "required": ["name"],