API doc initial draft

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`.
 

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:

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;

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;
+}

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/")
+        }
+    }
+};

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

recipes/use-a-jest-config-file/craco.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    jest: {
+        configure: {
+            globals: {
+                "CONFIG": true
+            }
+        }
+    }
+};

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;