tessl/npm-customize-cra

A set of utilities to customize create-react-app configurations leveraging react-app-rewired core functionalities

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Core Override Functions

Name: tessl/npm-customize-cra
Author: tessl

Core functions for composing configuration customizers using functional composition approach.

Capabilities

Override Function

Main function for composing multiple webpack configuration customizers.

/**
 * Composes multiple customizer functions using lodash.flow
 * Filters out falsy values to allow conditional customizers
 * @param {...Function} plugins - Customizer functions to apply in sequence
 * @returns {Function} Composed configuration function that takes webpack config and returns modified config
 */
function override(...plugins);

Usage Examples:

const { override, addDecoratorsLegacy, disableEsLint } = require("customize-cra");

// Basic composition
module.exports = override(
  addDecoratorsLegacy(),
  disableEsLint()
);

// Conditional customizers (falsy values are filtered out)
module.exports = override(
  addDecoratorsLegacy(),
  process.env.NODE_ENV === 'development' && disableEsLint(),
  process.env.ANALYZE && addBundleVisualizer()
);

Override Dev Server Function

Function for composing webpack-dev-server configuration customizers.

/**
 * Compose customizers for webpack-dev-server configuration
 * Returns a function that wraps the original dev server config function
 * @param {...Function} plugins - Dev server customizer functions to apply
 * @returns {Function} Dev server configuration function that accepts (proxy, allowedHost) parameters
 */
function overrideDevServer(...plugins);

Usage Examples:

const { override, overrideDevServer, watchAll } = require("customize-cra");

// Separate webpack and dev server configurations
module.exports = {
  webpack: override(
    // webpack customizers
    disableEsLint()
  ),
  devServer: overrideDevServer(
    // dev server customizers  
    watchAll()
  )
};

// Multiple dev server customizers
module.exports = {
  webpack: override(/* webpack config */),
  devServer: overrideDevServer(
    watchAll(),
    // additional dev server customizers would go here
  )
};

Implementation Details

The override function uses lodash.flow internally to create a composition of functions:

Each customizer receives the config object and returns a modified version
Falsy values are filtered out before composition, enabling conditional customizers
The resulting function can be used directly as a react-app-rewired config override

The overrideDevServer function wraps the original create-react-app dev server configuration function: