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

fix(react): fix external npm packages for rollup (#16713)

Browse Source
This commit is contained in:
Emily Xiong 2023-05-03 04:41:20 -04:00 committed by GitHub
parent db862cf691
commit 68c262d933
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 87 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/generated/packages/rollup/executors/rollup.json
View File

@ -66,7 +66,10 @@
"external": {
"type": "array",
"description": "A list of external modules that will not be bundled (`react`, `react-dom`, etc.).",
"items": { "type": "string" }
"oneOf": [
{ "type": "string", "enum": ["all", "none"] },
{ "type": "array", "items": { "type": "string" } }
]
},
"watch": {
"type": "boolean",

2
packages/react/src/generators/library/lib/add-rollup-build-target.ts
View File

@ -38,7 +38,7 @@ export async function addRollupBuildTarget(
const { targets } = readProjectConfiguration(host, options.name);
const { libsDir } = getWorkspaceLayout(host);
const external: string[] = [];
const external: string[] = ['react', 'react-dom'];
if (options.style === '@emotion/styled') {
external.push('@emotion/react/jsx-runtime');

10
packages/react/src/generators/library/library.spec.ts
View File

@ -505,7 +505,7 @@ describe('lib', () => {
executor: '@nx/rollup:rollup',
outputs: ['{options.outputPath}'],
options: {
external: ['react/jsx-runtime'],
external: ['react', 'react-dom', 'react/jsx-runtime'],
entryFile: 'libs/my-lib/src/index.ts',
outputPath: 'dist/libs/my-lib',
project: 'libs/my-lib/package.json',
@ -544,7 +544,7 @@ describe('lib', () => {
expect(config.targets.build).toMatchObject({
options: {
external: ['react/jsx-runtime'],
external: ['react', 'react-dom', 'react/jsx-runtime'],
},
});
expect(babelrc.plugins).toEqual([
@ -566,7 +566,7 @@ describe('lib', () => {
expect(config.targets.build).toMatchObject({
options: {
external: ['@emotion/react/jsx-runtime'],
external: ['react', 'react-dom', '@emotion/react/jsx-runtime'],
},
});
expect(babelrc.plugins).toEqual(['@emotion/babel-plugin']);
@ -588,7 +588,7 @@ describe('lib', () => {
expect(config.targets.build).toMatchObject({
options: {
external: ['react/jsx-runtime'],
external: ['react', 'react-dom', 'react/jsx-runtime'],
},
});
expect(babelrc.plugins).toEqual(['styled-jsx/babel']);
@ -606,7 +606,7 @@ describe('lib', () => {
expect(config.targets.build).toMatchObject({
options: {
external: ['react/jsx-runtime'],
external: ['react', 'react-dom', 'react/jsx-runtime'],
},
});
});

50
packages/rollup/src/executors/rollup/rollup.impl.spec.ts
View File

@ -150,9 +150,13 @@ describe('rollupExecutor', () => {
});
});
it(`should treat npm dependencies as external`, () => {
it(`should treat npm dependencies as external if external is all`, () => {
const options = createRollupOptions(
normalizeRollupExecutorOptions(testOptions, '/root', '/root/src'),
normalizeRollupExecutorOptions(
{ ...testOptions, external: 'all' },
'/root',
'/root/src'
),
[],
context,
{ name: 'example' },
@ -166,5 +170,47 @@ describe('rollupExecutor', () => {
expect(external('lodash/fp', '', false)).toBe(true);
expect(external('rxjs', '', false)).toBe(false);
});
it(`should not treat npm dependencies as external if external is none`, () => {
const options = createRollupOptions(
normalizeRollupExecutorOptions(
{ ...testOptions, external: 'none' },
'/root',
'/root/src'
),
[],
context,
{ name: 'example' },
'/root/src',
['lodash']
);
const external = options[0].external as rollup.IsExternal;
expect(external('lodash', '', false)).toBe(false);
expect(external('lodash/fp', '', false)).toBe(false);
expect(external('rxjs', '', false)).toBe(false);
});
it(`should set external based on options`, () => {
const options = createRollupOptions(
normalizeRollupExecutorOptions(
{ ...testOptions, external: ['rxjs'] },
'/root',
'/root/src'
),
[],
context,
{ name: 'example' },
'/root/src',
['lodash']
);
const external = options[0].external as rollup.IsExternal;
expect(external('lodash', '', false)).toBe(false);
expect(external('lodash/fp', '', false)).toBe(false);
expect(external('rxjs', '', false)).toBe(true);
});
});
});

23
packages/rollup/src/executors/rollup/rollup.impl.ts
View File

@ -271,10 +271,18 @@ export function createRollupOptions(
analyze(),
];
const externalPackages = dependencies
.map((d) => d.name)
.concat(options.external || [])
.concat(Object.keys(packageJson.dependencies || {}));
let externalPackages = [
...Object.keys(packageJson.dependencies || {}),
...Object.keys(packageJson.peerDependencies || {}),
]; // If external is set to none, include all dependencies and peerDependencies in externalPackages
if (options.external === 'all') {
externalPackages = externalPackages
.concat(dependencies.map((d) => d.name))
.concat(npmDeps);
} else if (Array.isArray(options.external) && options.external.length > 0) {
externalPackages = externalPackages.concat(options.external);
}
externalPackages = [...new Set(externalPackages)];
const rollupConfig = {
input: options.outputFileName
@ -289,10 +297,11 @@ export function createRollupOptions(
entryFileNames: `[name].${format === 'esm' ? 'js' : 'cjs'}`,
chunkFileNames: `[name].${format === 'esm' ? 'js' : 'cjs'}`,
},
external: (id) =>
externalPackages.some(
external: (id: string) => {
return externalPackages.some(
(name) => id === name || id.startsWith(`${name}/`)
) || npmDeps.some((name) => id === name || id.startsWith(`${name}/`)), // Could be a deep import
); // Could be a deep import
},
plugins,
};

2
packages/rollup/src/executors/rollup/schema.d.ts vendored
View File

@ -19,7 +19,7 @@ export interface RollupExecutorOptions {
main: string;
outputFileName?: string;
extractCss?: boolean | string;
external?: string[];
external?: string[] | 'all' | 'none';
rollupConfig?: string | string[];
watch?: boolean;
assets?: any[];

15
packages/rollup/src/executors/rollup/schema.json
View File

@ -66,9 +66,18 @@
"external": {
"type": "array",
"description": "A list of external modules that will not be bundled (`react`, `react-dom`, etc.).",
"items": {
"type": "string"
}
"oneOf": [
{
"type": "string",
"enum": ["all", "none"]
},
{
"type": "array",
"items": {
"type": "string"
}
}
]
},
"watch": {
"type": "boolean",