diff --git a/README.md b/README.md index 5e23f75d..93601630 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,7 @@ All you have to do is create your app using [create-react-app](https://github.co - [Installation](https://github.com/sharegate/craco/blob/master/packages/craco/README.md#installation) - How to install and setup `craco`. - [Custom location for craco.config.js](https://github.com/sharegate/craco/blob/master/packages/craco/README.md#custom-location-for-cracoconfigjs) - Customize the location of your craco.config.js file. - [Configuration Overview](https://github.com/sharegate/craco/blob/master/packages/craco/README.md#configuration-overview) - Quickly see how you can configure your CRA installation with this plugin. +- [API](https://github.com/sharegate/craco/blob/master/packages/craco/README.md#api) - Have a look at CRACO API for Jest and Webpack. - [Recipes](https://github.com/sharegate/craco/tree/master/recipes) – Short recipes for common use cases. - [Develop a Plugin](https://github.com/sharegate/craco/blob/master/packages/craco/README.md#develop-a-plugin) - How to develop a plugin for `craco`. diff --git a/packages/craco/README.md b/packages/craco/README.md index 13454263..b1fe642c 100644 --- a/packages/craco/README.md +++ b/packages/craco/README.md @@ -19,6 +19,7 @@ All you have to do is create your app using [create-react-app](https://github.co - [Custom location for craco.config.js](#custom-location-for-craco.config.js) - Customize the location of your craco.config.js file. - [Configuration Overview](#configuration-overview) - Quickly see how you can configure your CRA installation with this plugin. +- [API](#api) - Have a look at CRACO API for Jest and Webpack. - [Recipes](https://github.com/sharegate/craco/tree/master/recipes) – Short recipes for common use cases. - [Available Plugins](https://github.com/sharegate/craco#community-maintained-plugins) - Plugins maintained by the community. - [Develop a Plugin](#develop-a-plugin) - How to develop a plugin for `craco`. @@ -249,6 +250,56 @@ module.exports = { }; ``` +## API + +To integrate with other tools, it's useless to have access to the configs generated by CRACO. + +That's what CRACO API are for. The current API supports Jest and Webpack and configs. + +### createJestConfig + +The function accept a `cracoConfig` object and a `context` object and return the generated Jest config object. + +`createJestConfig(cracoConfig, context = {})` + +Usage: + +```javascript +/* jest.config.js */ + +const { createJestConfig } = require("@craco/craco"); + +const cracoConfig = require("./craco.config.js"); +const jestConfig = createJestConfig(cracoConfig); + +module.exports = jestConfig; +``` + +### createWebpackDevConfig & createWebpackProdConfig + +The function accept a `cracoConfig` object and a `context` object and return the generated Webpack config object. + +`createWebpackDevConfig(cracoConfig, context = {})` +`createWebpackProdConfig(cracoConfig, context = {})` + +Usage: + +```javascript +/* webpack.config.js */ + +const { createWebpackDevConfig } = require("@craco/craco"); + +const cracoConfig = require("./craco.config.js"); +const webpackConfig = createWebpackDevConfig(cracoConfig); + +module.exports = webpackConfig; +``` + +### Popular integrations + +- [vscode-jest]() +- [Storybook]() + ## Develop a plugin There are 4 functions available to a plugin: diff --git a/packages/craco/lib/features/webpack/api.js b/packages/craco/lib/features/webpack/api.js index a019bea2..f086645f 100644 --- a/packages/craco/lib/features/webpack/api.js +++ b/packages/craco/lib/features/webpack/api.js @@ -3,35 +3,20 @@ const { processCracoConfig } = require("../../config"); const { loadWebpackProdConfig, loadWebpackDevConfig, getCraPaths } = require("../../cra"); function createWebpackDevConfig(callerCracoConfig, callerContext = {}) { - if (!callerCracoConfig) { - throw new Error("craco: 'cracoConfig' is required."); - } - - if (!process.env.NODE_ENV) { - process.env.NODE_ENV = "development"; - } - - const context = { - env: process.env.NODE_ENV, - ...callerContext - }; - - const cracoConfig = processCracoConfig(callerCracoConfig, context); - context.paths = getCraPaths(cracoConfig); - - const craWebpackConfig = loadWebpackDevConfig(cracoConfig); - const resultingWebpackConfig = mergeWebpackConfig(cracoConfig, craWebpackConfig, context); - - return resultingWebpackConfig; + return createWebpackConfig(callerCracoConfig, callerContext, loadWebpackDevConfig, "development"); } function createWebpackProdConfig(callerCracoConfig, callerContext = {}) { + return createWebpackConfig(callerCracoConfig, callerContext, loadWebpackProdConfig, "production"); +} + +function createWebpackConfig(callerCracoConfig, callerContext = {}, loadWebpackConfig, env) { if (!callerCracoConfig) { throw new Error("craco: 'cracoConfig' is required."); } if (!process.env.NODE_ENV) { - process.env.NODE_ENV = "production"; + process.env.NODE_ENV = env; } const context = { @@ -42,7 +27,7 @@ function createWebpackProdConfig(callerCracoConfig, callerContext = {}) { const cracoConfig = processCracoConfig(callerCracoConfig, context); context.paths = getCraPaths(cracoConfig); - const craWebpackConfig = loadWebpackProdConfig(cracoConfig); + const craWebpackConfig = loadWebpackConfig(cracoConfig); const resultingWebpackConfig = mergeWebpackConfig(cracoConfig, craWebpackConfig, context); return resultingWebpackConfig; diff --git a/recipes/integrate-with-storybook/.storybook/webpack.config.js b/recipes/integrate-with-storybook/.storybook/webpack.config.js new file mode 100644 index 00000000..e57fe335 --- /dev/null +++ b/recipes/integrate-with-storybook/.storybook/webpack.config.js @@ -0,0 +1,9 @@ +const { createWebpackDevConfig } = require("@craco/craco"); + +const cracoConfig = require("../craco.config.js"); + +module.exports = async () => { + const webpackConfig = createWebpackDevConfig(cracoConfig); + + return webpackConfig; +} diff --git a/recipes/integrate-with-storybook/craco.config.js b/recipes/integrate-with-storybook/craco.config.js new file mode 100644 index 00000000..944dbc9c --- /dev/null +++ b/recipes/integrate-with-storybook/craco.config.js @@ -0,0 +1,9 @@ +const path = require("path"); + +module.exports = { + webpack: { + alias: { + "@components": path.resolve(__dirname, "src/components/") + } + } +}; diff --git a/recipes/integrate-with-vscode-jest/README.md b/recipes/integrate-with-vscode-jest/README.md new file mode 100644 index 00000000..c370875b --- /dev/null +++ b/recipes/integrate-with-vscode-jest/README.md @@ -0,0 +1,3 @@ +# Integrate with VSCode Jest + +View the following recipe: https://github.com/sharegate/craco/blob/master/recipes/use-a-jest-config-file diff --git a/recipes/use-a-jest-config-file/craco.config.js b/recipes/use-a-jest-config-file/craco.config.js new file mode 100644 index 00000000..58dc291f --- /dev/null +++ b/recipes/use-a-jest-config-file/craco.config.js @@ -0,0 +1,9 @@ +module.exports = { + jest: { + configure: { + globals: { + "CONFIG": true + } + } + } +}; diff --git a/recipes/use-a-jest-config-file/jest.config.js b/recipes/use-a-jest-config-file/jest.config.js new file mode 100644 index 00000000..0b2974d5 --- /dev/null +++ b/recipes/use-a-jest-config-file/jest.config.js @@ -0,0 +1,6 @@ +const { createJestConfig } = require("@craco/craco"); + +const cracoConfig = require("./craco.config.js"); +const jestConfig = createJestConfig(cracoConfig); + +module.exports = jestConfig;