Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(nf): support adding native federation in ESM application #687

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions .github/ISSUE_TEMPLATE/bug-report.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
name: Bug Report
description: Report a bug or regression in functionality

body:
- type: dropdown
id: affected-packages
attributes:
label: With what library do you have an issue?
options:
- native-federation
- module-federation
validations:
required: true

- type: textarea
id: reproduction
attributes:
label: Reproduction of the bug/regression with instructions
description: If on Native Federation, use our [Stackblitz template](https://stackblitz.com/github/rainerhahnekamp/native-federation-stackblitz?file=projects%2Fhost%2Fsrc%2Fapp%2Fapp.routes.ts) to reproduce the issue
placeholder: If the bug/regression does not include a reproduction via StackBlitz or GitHub repo, your issue may be closed without resolution.
validations:
required: true

- type: textarea
id: expected_behavior
attributes:
label: Expected behavior
description: Describe what the expected behavior would be.
validations:
required: true

- type: textarea
id: version
attributes:
label: Versions of Native/Module Federation, Angular, Node, Browser, and operating system
placeholder: |
Native/Module Federation:
Angular:
Node:
Browser:
Operating system(s):
validations:
required: true

- type: textarea
id: other
attributes:
label: Other information

- type: checkboxes
id: assistance
attributes:
label: I would be willing to submit a PR to fix this issue
description: Assistance is provided if you need help submitting a pull request
options:
- label: 'Yes'
- label: 'No'
37 changes: 37 additions & 0 deletions .github/ISSUE_TEMPLATE/feature-request.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
name: Feature Request
description: Submit a Request For Consideration

body:
- type: dropdown
id: affected-packages
attributes:
label: For which library do you have a feature request?
options:
- native-federation
- module-federation
- other
multiple: true
validations:
required: true

- type: textarea
id: information
attributes:
label: Information
description: What feature would you like to see added?
validations:
required: true

- type: textarea
id: alternatives
attributes:
label: Describe any alternatives/workarounds you're currently using

- type: checkboxes
id: assistance
attributes:
label: I would be willing to submit a PR to fix this issue
description: Assistance is provided if you need help submitting a pull request
options:
- label: 'Yes'
- label: 'No'
23 changes: 23 additions & 0 deletions .github/ISSUE_TEMPLATE/question.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
name: Question / Help
description: Ask a question or request help

body:
- type: dropdown
id: affected-packages
attributes:
label: For which library do you need help?
options:
- native-federation
- module-federation
- other
multiple: true
validations:
required: true

- type: textarea
id: information
attributes:
label: Question
description: What do you need help with?
validations:
required: true
8 changes: 7 additions & 1 deletion libs/native-federation/migration-collection.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
{
"$schema": "../../node_modules/@angular-devkit/schematics/collection-schema.json",
"name": "native-federation",
"version": "0.0.1",
"version": "0.0.2",
"schematics": {
"update18": {
"version": "18",
"factory": "./src/schematics/update18/schematic",
"schema": "./src/schematics/update18/schema.json",
"description": "migrating to v18"
},
"updateConfigExtension": {
"version": "18.1",
"factory": "./src/schematics/updateConfigExtension/schematic",
"schema": "./src/schematics/updateConfigExtension/schema.json",
"description": "renaming config file to .cjs"
}
}
}
2 changes: 1 addition & 1 deletion libs/native-federation/src/builders/build/builder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@ function removeBaseHref(req: any, baseHref?: string) {

function infereConfigPath(tsConfig: string): string {
const relProjectPath = path.dirname(tsConfig);
const relConfigPath = path.join(relProjectPath, 'federation.config.js');
const relConfigPath = path.join(relProjectPath, 'federation.config.cjs');

return relConfigPath;
}
Expand Down
56 changes: 55 additions & 1 deletion libs/native-federation/src/schematics/init/schematic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
} from '@schematics/angular/utility/dependencies';

import * as path from 'path';
import * as fs from 'fs';

type NormalizedOptions = {
polyfills: string;
Expand All @@ -38,6 +39,10 @@ type NormalizedOptions = {
port: number;
};

const CONFIG_FILE_NAME_PREFIX = 'federation.config';
const CONFIG_FILE_NAME = `${CONFIG_FILE_NAME_PREFIX}.cjs`;
const CONFIG_FILE_NAME_JS = `${CONFIG_FILE_NAME_PREFIX}.js`;

export function updatePackageJson(tree: Tree): void {
const packageJson = tree.readJson('package.json');

Expand Down Expand Up @@ -91,9 +96,28 @@ export default function config(options: MfSchematicSchema): Rule {
tree.create(manifestPath, JSON.stringify(remoteMap, null, '\t'));
}

const federationConfigPath = path.join(projectRoot, 'federation.config.js');
const federationConfigPath = path.join(projectRoot, CONFIG_FILE_NAME);
const jsFederationConfigPath = path.join(projectRoot, CONFIG_FILE_NAME_JS);

const exists = tree.exists(federationConfigPath);
const jsConfigExists = tree.exists(jsFederationConfigPath);

if (jsConfigExists) {
// If old .js config is found check if new .cjs exists
if (!exists) {
// .js config is found and no .cjs is found. Inform user to delete old config file so new one is created from scratch
// or rename old one to .cjs in order to keep same configuration.
throw new Error(
`Outdated configuration file found (federation.config.js), please delete it or rename it to .cjs in case you want to keep existing configuration.`
);
}
// Both .js and .cjs configurations are found, delete .js one
console.log(
'Multiple configuration files found, deleting outdated one (federation.config.js)'
);
//tree.delete(jsFederationConfigPath); // Doesn't seem to work, will use fs
fs.unlinkSync(jsFederationConfigPath);
}

const generateRule = !exists
? await generateFederationConfig(
Expand Down Expand Up @@ -144,6 +168,36 @@ export function patchAngularBuild(tree: Tree) {
}
}

export function renameConfigToCjs(options: MfSchematicSchema, tree: Tree) {
const workspaceFileName = getWorkspaceFileName(tree);
const workspace = JSON.parse(tree.read(workspaceFileName).toString('utf8'));

const normalized = normalizeOptions(options, workspace, tree);

const { projectRoot } = normalized;

const federationConfigPath = path.join(projectRoot, CONFIG_FILE_NAME);
const jsFederationConfigPath = path.join(projectRoot, CONFIG_FILE_NAME_JS);

const exists = tree.exists(federationConfigPath);
const jsConfigExists = tree.exists(jsFederationConfigPath);

if (jsConfigExists) {
// If old .js config is found check if new .cjs exists
if (!exists) {
// .js config is found and no .cjs is found. Rename existing .js to .cjs.
tree.rename(jsFederationConfigPath, federationConfigPath);
return;
}
// Both .js and .cjs configurations are found, delete .js one
console.log(
'Multiple configuration files found, deleting outdated one (federation.config.js)'
);
//tree.delete(jsFederationConfigPath); // Doesn't seem to work, will use fs
fs.unlinkSync(jsFederationConfigPath);
}
}

function updateWorkspaceConfig(
tree: Tree,
options: NormalizedOptions,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"$schema": "http://json-schema.org/schema",
"$id": "mf",
"title": "",
"type": "object",
"properties": {}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { Rule, Tree } from '@angular-devkit/schematics';
import { MfSchematicSchema } from '../init/schema';
import { renameConfigToCjs } from '../init/schematic';

export default function updateConfigExtension(
options: MfSchematicSchema
): Rule {
return async function (tree: Tree) {
renameConfigToCjs(options, tree);
};
}
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ async function runEsbuild(
splitting: kind === 'mapping-or-exposed',
platform: 'browser',
format: 'esm',
target: ['esnext'],
target: target,
logLimit: kind === 'shared-package' ? 1 : 0,
plugins: plugins || [
createCompilerPlugin(
Expand Down