[Discussion] Global API and ecosystem

Hello,

As we’re starting again from scratch, it would be a good time to think about the API we want to provide to rewired CRA consumers.

I’d like customize-cra to take a more functional approach so we just have to import a bunch of addThing(), provide their specifics options, and we’re good to go! 🚀

This is what I have in mind :

// fantasy organization xD
const { override } = require('@react-app-rewired/core')
const addReactHotLoader = require('@react-app-rewired/add-react-hot-loader')
const addEmotion = require('@react-app-rewired/add-emotion')
const addBundleVisualizer= require('@react-app-rewired/add-bundle-visualizer')

module.exports = override(
  addReactHotLoader , /* no options */
  addEmotion(), /* can have options, here none given so falling back to emotion's defaults */
  addBundleVisualizer({ reportFilename: 'bundle.html' })
)

The override function is an helper providing the (config, env) to all the functions in the pipeline.

The addX functions have to respect two criterias :

• Take their specific options and return a function accepting (config, [env]). If they don’t have any options then you can just write the (config, [env]) directly.
• Always return the altered config object.

And that’s it!

The implementation of override is :

const { flow, curry } = require('lodash')

function override(...pipeline) {
  return function(config, env) {
    return flow(
      ...pipeline.map(f => {
        const curried = curry(f, 2)
        return curried(curry.placeholder, env)
      })
    )(config)
  }
}

And here is an example of “addX” library for webpack-bundle-visualizer :

const { /* re-exported from lodash for convenience */ merge } = require('@react-app-rewired/core')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = function addBundleVisualizer(options) {
  const defaultOptions = {
    analyzerMode: 'static',
    reportFilename: 'report.html'
  }
  return function(config) {
    config.plugins.push(
      new BundleAnalyzerPlugin(merge(defaultOptions, options))
    )
    return config
  }
}

Also, installing @react-app-rewired/core would be enough to get started with the scripts in package.json (either we include react-app-rewired or we restart from scratch…)

What do you think? 💡

[jgoux]

@arackaf FP is especially hard in JS because it’s not strongly typed. Doing FP in Haskell or PureScript is a joy because you just need to connect the types! 😍

[timarney]

Now I’m wondering what was the reasoning for introducing the env parameter in react-app-rewired? (maybe @timarney can answer here)

In practice I don’t think env is used much and yes it’s just process.env.NODE_ENV

I would remove (if I was writing that code again).

https://github.com/timarney/react-app-rewired/blob/master/packages/react-app-rewired/scripts/start.js