Skip to content

Commit

Permalink
feat(react): add --bundler=none option for React lib generator if the…
Browse files Browse the repository at this point in the history
… library is not buildable
  • Loading branch information
jaysoo authored and Jack Hsu committed Nov 30, 2022
1 parent c0bae20 commit 37b6088
Show file tree
Hide file tree
Showing 13 changed files with 252 additions and 249 deletions.
6 changes: 3 additions & 3 deletions docs/generated/packages/react.json
Original file line number Diff line number Diff line change
Expand Up @@ -436,9 +436,9 @@
},
"bundler": {
"type": "string",
"description": "The bundler to use.",
"enum": ["vite", "rollup"],
"x-prompt": "Which bundler would you like to use to build the library?"
"description": "The bundler to use. Choosing 'none' means this library is not buildable.",
"enum": ["none", "vite", "rollup"],
"x-prompt": "Which bundler would you like to use to build the library? Choose 'none' to skip build setup."
},
"compiler": {
"type": "string",
Expand Down
3 changes: 1 addition & 2 deletions docs/generated/packages/vite.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,7 @@
"includeLib": {
"type": "boolean",
"description": "Add a library build option and skip the server option.",
"default": false,
"x-prompt": "Does this project contain a buildable library?"
"hidden": true
},
"uiFramework": {
"type": "string",
Expand Down
48 changes: 48 additions & 0 deletions e2e/react/src/react-misc.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import {
checkFilesExist,
newProject,
runCLI,
runCLIAsync,
uniq,
} from '@nrwl/e2e/utils';

describe('React Applications: additional packages', () => {
beforeAll(() => newProject());

it('should generate app with routing', async () => {
const appName = uniq('app');

runCLI(
`generate @nrwl/react:app ${appName} --routing --bundler=webpack --no-interactive`
);

runCLI(`build ${appName} --outputHashing none`);

checkFilesExist(
`dist/apps/${appName}/index.html`,
`dist/apps/${appName}/runtime.js`,
`dist/apps/${appName}/polyfills.js`,
`dist/apps/${appName}/main.js`
);
}, 250_000);

it('should be able to add a redux slice', async () => {
const appName = uniq('app');
const libName = uniq('lib');

runCLI(`g @nrwl/react:app ${appName} --bundler=webpack --no-interactive`);
runCLI(`g @nrwl/react:redux lemon --project=${appName}`);
runCLI(`g @nrwl/react:lib ${libName} --no-interactive`);
runCLI(`g @nrwl/react:redux orange --project=${libName}`);

const appTestResults = await runCLIAsync(`test ${appName}`);
expect(appTestResults.combinedOutput).toContain(
'Test Suites: 2 passed, 2 total'
);

const libTestResults = await runCLIAsync(`test ${libName}`);
expect(libTestResults.combinedOutput).toContain(
'Test Suites: 2 passed, 2 total'
);
}, 250_000);
});
38 changes: 26 additions & 12 deletions e2e/react/src/react-package.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,13 @@ describe('Build React libraries and apps', () => {

// generate buildable libs
runCLI(
`generate @nrwl/react:library ${parentLib} --buildable --importPath=@${proj}/${parentLib} --no-interactive `
`generate @nrwl/react:library ${parentLib} --bundler=rollup --importPath=@${proj}/${parentLib} --no-interactive `
);
runCLI(
`generate @nrwl/react:library ${childLib} --buildable --importPath=@${proj}/${childLib} --no-interactive `
`generate @nrwl/react:library ${childLib} --bundler=rollup --importPath=@${proj}/${childLib} --no-interactive `
);
runCLI(
`generate @nrwl/react:library ${childLib2} --buildable --importPath=@${proj}/${childLib2} --no-interactive `
`generate @nrwl/react:library ${childLib2} --bundler=rollup --importPath=@${proj}/${childLib2} --no-interactive `
);

createDep(parentLib, [childLib, childLib2]);
Expand Down Expand Up @@ -237,7 +237,7 @@ export async function h() { return 'c'; }
const libName = uniq('lib');

runCLI(
`generate @nrwl/react:lib ${libName} --buildable --importPath=@${proj}/${libName} --no-interactive`
`generate @nrwl/react:lib ${libName} --bundler=rollup --importPath=@${proj}/${libName} --no-interactive`
);

const mainPath = `libs/${libName}/src/lib/${libName}.tsx`;
Expand All @@ -261,24 +261,38 @@ describe('Build React applications and libraries with Vite', () => {
});

it('should support bundling with Vite', async () => {
const libName = uniq('lib');
const viteLib = uniq('vitelib');

runCLI(
`generate @nrwl/react:lib ${libName} --bundler=vite --no-interactive`
`generate @nrwl/react:lib ${viteLib} --bundler=vite --no-interactive`
);

const packageJson = readJson('package.json');
// Vite does not need these libraries to work.
expect(packageJson.dependencies['core-js']).toBeUndefined();
expect(packageJson.dependencies['tslib']).toBeUndefined();

await runCLIAsync(`build ${libName}`);
await runCLIAsync(`build ${viteLib}`);

checkFilesExist(
`dist/libs/${libName}/package.json`,
`dist/libs/${libName}/index.d.ts`,
`dist/libs/${libName}/index.js`,
`dist/libs/${libName}/index.mjs`
`dist/libs/${viteLib}/package.json`,
`dist/libs/${viteLib}/index.d.ts`,
`dist/libs/${viteLib}/index.js`,
`dist/libs/${viteLib}/index.mjs`
);
});

// Convert non-buildable lib to buildable one
const nonBuildableLib = uniq('nonbuildablelib');
runCLI(`generate @nrwl/react:lib ${nonBuildableLib} --no-interactive`);
runCLI(
`generate @nrwl/vite:configuration ${nonBuildableLib} --uiFramework=react --no-interactive`
);
await runCLIAsync(`build ${nonBuildableLib}`);
checkFilesExist(
`dist/libs/${nonBuildableLib}/package.json`,
`dist/libs/${nonBuildableLib}/index.d.ts`,
`dist/libs/${nonBuildableLib}/index.js`,
`dist/libs/${nonBuildableLib}/index.mjs`
);
}, 300_000);
});
69 changes: 0 additions & 69 deletions e2e/react/src/react.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,34 +74,6 @@ describe('React Applications', () => {
});
}, 500000);

it('should generate app with legacy-ie support', async () => {
const appName = uniq('app');

runCLI(
`generate @nrwl/react:app ${appName} --style=css --bundler=webpack --no-interactive`
);

// changing browser support of this application
updateFile(`apps/${appName}/.browserslistrc`, `IE 11`);

await testGeneratedApp(appName, {
checkStyles: false,
checkLinter: false,
checkE2E: false,
});

const filesToCheck = [
`dist/apps/${appName}/polyfills.es5.js`,
`dist/apps/${appName}/main.es5.js`,
];

checkFilesExist(...filesToCheck);

expect(readFile(`dist/apps/${appName}/index.html`)).toContain(
'<script src="main.js" type="module"></script><script src="main.es5.js" nomodule defer></script>'
);
}, 250_000);

it('should be able to use JS and JSX', async () => {
const appName = uniq('app');
const libName = uniq('lib');
Expand Down Expand Up @@ -222,47 +194,6 @@ describe('React Applications: --style option', () => {
});
});

describe('React Applications: additional packages', () => {
beforeAll(() => newProject());

it('should generate app with routing', async () => {
const appName = uniq('app');

runCLI(
`generate @nrwl/react:app ${appName} --routing --bundler=webpack --no-interactive`
);

runCLI(`build ${appName} --outputHashing none`);

checkFilesExist(
`dist/apps/${appName}/index.html`,
`dist/apps/${appName}/runtime.js`,
`dist/apps/${appName}/polyfills.js`,
`dist/apps/${appName}/main.js`
);
}, 250_000);

it('should be able to add a redux slice', async () => {
const appName = uniq('app');
const libName = uniq('lib');

runCLI(`g @nrwl/react:app ${appName} --bundler=webpack --no-interactive`);
runCLI(`g @nrwl/react:redux lemon --project=${appName}`);
runCLI(`g @nrwl/react:lib ${libName} --no-interactive`);
runCLI(`g @nrwl/react:redux orange --project=${libName}`);

const appTestResults = await runCLIAsync(`test ${appName}`);
expect(appTestResults.combinedOutput).toContain(
'Test Suites: 2 passed, 2 total'
);

const libTestResults = await runCLIAsync(`test ${libName}`);
expect(libTestResults.combinedOutput).toContain(
'Test Suites: 2 passed, 2 total'
);
}, 250_000);
});

describe('React Applications and Libs with PostCSS', () => {
let proj: string;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ describe('normalizeOptions', () => {
tree = createTreeWithEmptyWorkspace();
});

it('should set unitTestRunner=jest and bundler=rollup by default', async () => {
it('should set unitTestRunner=jest and bundler=none by default', async () => {
const options = normalizeOptions(tree, {
name: 'test',
style: 'css',
Expand All @@ -19,12 +19,38 @@ describe('normalizeOptions', () => {

expect(options).toMatchObject({
buildable: false,
bundler: 'rollup',
bundler: 'none',
compiler: 'babel',
unitTestRunner: 'jest',
});
});

it('should set buildable to true when bundler is not "none"', async () => {
let options = normalizeOptions(tree, {
name: 'test',
style: 'css',
linter: Linter.None,
bundler: 'rollup',
});

expect(options).toMatchObject({
buildable: true,
bundler: 'rollup',
});

options = normalizeOptions(tree, {
name: 'test',
style: 'css',
linter: Linter.None,
bundler: 'vite',
});

expect(options).toMatchObject({
buildable: true,
bundler: 'vite',
});
});

it('should set unitTestRunner=vitest by default when bundler is vite', async () => {
const options = normalizeOptions(tree, {
name: 'test',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function normalizeOptions(
const normalized = {
...options,
compiler: options.compiler ?? 'babel',
bundler: options.bundler ?? 'rollup',
bundler: options.bundler ?? 'none',
fileName,
routePath: `/${name}`,
name: projectName,
Expand All @@ -53,7 +53,7 @@ export function normalizeOptions(

// Libraries with a bundler or is publishable must also be buildable.
normalized.buildable = Boolean(
options.bundler || options.buildable || options.publishable
normalized.bundler !== 'none' || options.buildable || options.publishable
);

normalized.unitTestRunner =
Expand Down
Loading

0 comments on commit 37b6088

Please sign in to comment.