Component configuration

Utility functions for shared configuration between components.

Install

npm install --save-dev @olenbetong/component-config

Rollup configuration

getRollupConfig takes input, output and options and creates a full rollup configuration with plugins. The output will be put into the dist folder in the package.

Options available are:

• input - Path to the file that should be processed
• fileName - Filename of the output file without extension and path
• libraryName - Name of the global variable created in UMD builds
• format - A format supported by Rollup, or esm.browser, which creates an ESM build, but using React and ReactDOM from the window object
• production - Boolean. Adds minifying.

Example rollup.config.js from the Spinner component. With this configuration, you can run rollup -c to create non-minified versions, and rollup -c --configProd to create minified versions:

import { getRollupConfig } from "@olenbetong/component-config";

export default function buildConfig(commandLineArgs) {
  const production = commandLineArgs.configProd === true;
  const common = {
    fileName: "spinner",
    input: "./src/index.js",
    libraryName: "ReactSpinner",
    production
  };

  return [
    getRollupConfig({ ...common, format: "umd" }),
    getRollupConfig({ ...common, format: "esm" }),
    getRollupConfig({ ...common, format: "esm.browser" })
  ];
}

Common SASS configuration

SASS variables are available in the style folder.

@import "~@olenbetong/component-config/style/variables";

.myComponent {
  background-color: $brand-primary;
}