fix(react): fix external npm packages for rollup

- when external is not specify, will include package in the code
- add option all and none for external

docs/generated/packages/rollup/executors/rollup.json

@@ -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",

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

@@ -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');

packages/react/src/generators/library/library.spec.ts

@@ -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'],
  },
  });
  });

packages/rollup/src/executors/rollup/rollup.impl.spec.ts

@@ -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);
+ });
  });
 });

packages/rollup/src/executors/rollup/rollup.impl.ts

@@ -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,
  };
 

packages/rollup/src/executors/rollup/schema.d.ts

@@ -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[];

packages/rollup/src/executors/rollup/schema.json

@@ -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",