diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c2658d7 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/index.js b/index.js index b6cce1a..32bf50c 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,7 @@ -function addBundleVisualizer(config) { +const curry = require("lodash.curry"); +const flow = require("lodash.flow"); + +const addBundleVisualizer = () => config => { const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; config.plugins.push( @@ -8,9 +11,9 @@ function addBundleVisualizer(config) { }) ); return config; -} +}; -function addBabelPlugin(plugin, config, env) { +const addBabelPlugin = plugin => config => { let rulesWithBabel = config.module.rules.filter( r => r.oneOf && r.oneOf.some(r => Array.isArray(r.use) && r.use.some(u => u.options && u.options.babelrc != void 0)) ); @@ -27,22 +30,19 @@ function addBabelPlugin(plugin, config, env) { } } return config; -} +}; -function addDecoratorsLegacy(config, env) { - addBabelPlugin(["@babel/plugin-proposal-decorators", { legacy: true }], config, env); - return config; -} +const addDecoratorsLegacy = () => config => addBabelPlugin(["@babel/plugin-proposal-decorators", { legacy: true }])(config); -function disableEsLint(config, env) { +const disableEsLint = () => config => { let eslintRules = config.module.rules.filter(r => r.use && r.use.some(u => u.options && u.options.useEslintrc != void 0)); eslintRules.forEach(rule => { config.module.rules = config.module.rules.filter(r => r !== rule); }); return config; -} +}; -function addWebpackAlias(alias, config) { +const addWebpackAlias = alias => config => { if (!config.resolve) { config.resolve = {}; } @@ -51,9 +51,18 @@ function addWebpackAlias(alias, config) { } Object.assign(config.resolve.alias, alias); return config; -} +}; + +const override = (...pipeline) => (config, env) => + flow( + ...pipeline.map(f => { + const curried = curry(f, 2); + return curried(curry.placeholder, env); + }) + )(config); module.exports = { + override, addBundleVisualizer, addBabelPlugin, addDecoratorsLegacy, diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..5972eb5 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,18 @@ +{ + "name": "customize-cra", + "version": "0.0.6", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "lodash.curry": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz", + "integrity": "sha1-JI42By7ekGUB11lmIAqG2riyMXA=" + }, + "lodash.flow": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz", + "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=" + } + } +} diff --git a/package.json b/package.json index 1943182..407053c 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,15 @@ { "name": "customize-cra", - "version": "0.0.6", + "version": "0.1.0-beta3", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, - "author": "", - "license": "ISC" + "author": "Adam Rackis", + "license": "MIT", + "dependencies": { + "lodash.curry": "^4.1.1", + "lodash.flow": "^3.5.0" + } } diff --git a/readme.md b/readme.md index 4fc3af6..e379b89 100644 --- a/readme.md +++ b/readme.md @@ -4,7 +4,7 @@ This project piggybacks on [`react-app-rewired`](https://github.com/timarney/rea To start, this project will export methods I need for what I'm using CRA for, but PRs will of course be welcome. -The functions documented below can be imported by name, and used in your config-overrides.js file, ie +The functions documented below can be imported by name, and used in your `config-overrides.js` file, as explained below. ```js const { addDecoratorsLegacy } = require("customize-cra"); @@ -17,39 +17,46 @@ const { addDecoratorsLegacy } = require("customize-cra"); Using this library will override default behavior and configuration of create-react-app, and therefore invalidate the guarentees that come with it. Use with discretion! -## Docs +## Available plugins -### addBabelPlugin(plugin, config) +### addBabelPlugin(plugin) Adds a babel plugin. Not sure what else to say here. -### addDecoratorsLegacy(config) +### addDecoratorsLegacy() Add decorators in legacy mode. Be sure to have `@babel/plugin-proposal-decorators` installed. -### disableEsLint(config) +### disableEsLint() Does what it says. You may need this along with `addDecoratorsLegacy` in order to get decorators and exports to parse together. -### addWebpackAlias(alias, config) +### addWebpackAlias(alias) Adds the provided alias info into webpack's alias section. Pass an object literal with as many entries as you'd like, and the whole object will be merged in. -### addBundleVisualizer(config) +### addBundleVisualizer() Adds the bundle visualizer plugin to your webpack config. Be sure to have `webpack-bundle-analyzer` installed. -## MobX Users +## Using the plugins -If you want CRA 2 to work with MobX, this should get you going. +To use these plugins, import the `override` function, and call it with whatever plugins you need. Each of these plugin invocations will return a new function, that `override` will call with the newly modified config object. This means that if you need to conditionally apply any of these plugins, just provide a lambda that receives the config object, and conditionally invoke a plugin as needed, being sure to call it twice. + +For example ```js -const { addDecoratorsLegacy, disableEsLint } = require("customize-cra"); +const { override, addDecoratorsLegacy, disableEsLint, addBundleVisualizer, addWebpackAlias } = require("customize-cra"); +const path = require("path"); -module.exports = function override(config) { - addDecoratorsLegacy(config); - disableEsLint(config); - - return config; -}; +module.exports = override( + addDecoratorsLegacy(), + disableEsLint(), + config => (process.env.BUNDLE_VISUALIZE == 1 ? addBundleVisualizer()(config) : config), + addWebpackAlias({ ["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js") }) +); ``` + +## MobX Users + +If you want CRA 2 to work with MobX, use the `addDecoratorsLegacy` and `disableEsLint`.