feat: webpack configs full configuration object

README.md

@@ -13,7 +13,7 @@
     -   [@component-controls/core](#component-controlscore)
     -   [@component-controls/instrument](#component-controlsinstrument)
     -   [@component-controls/loader](#component-controlsloader)
-    -   [@component-controls/webpack-rules](#component-controlswebpack-rules)
+    -   [@component-controls/webpack-configs](#component-controlswebpack-configs)
     -   [@component-controls/store](#component-controlsstore)
 -   [UI packages](#ui-packages)
     -   [@component-controls/components](#component-controlscomponents)
@@ -168,11 +168,11 @@ Webpack loader that injects the data collected by [@component-controls/instrumen
 
 <!-- END-PACKAGE-SECTION -->
 
-<package-section file="./core/webpack-rules/README.md" section="overview" />
+<package-section file="./core/webpack-configs/README.md" section="overview" />
 
 <!-- START-PACKAGE-SECTION -->
 
-## [@component-controls/webpack-rules](https://github.com/ccontrols/component-controls/blob/master/core/webpack-rules)
+## [@component-controls/webpack-configs](https://github.com/ccontrols/component-controls/blob/master/core/webpack-configs)
 
 Webpack preset configurations
 

core/instrument/src/misc/props-info.ts

@@ -20,22 +20,6 @@ export const propsInfo = async (
   if (!fs.existsSync(cacheFolder)) {
     fs.mkdirSync(cacheFolder, { recursive: true });
   }
-  const cachedFileName = path.join(
-    cacheFolder,
-    createHash('md5')
-      .update(`${filePath}-${componentName}`)
-      .digest('hex'),
-  );
-  if (fs.existsSync(cachedFileName)) {
-    const cacheStats = fs.statSync(cachedFileName);
-    const fileStats = fs.statSync(filePath);
-    if (cacheStats.mtime.getTime() >= fileStats.mtime.getTime()) {
-      const fileData = fs.readFileSync(cachedFileName, 'utf8');
-      const json = JSON.parse(fileData);
-      return Object.keys(json).length ? json : undefined;
-    }
-  }
-  let result: ComponentInfo | undefined = undefined;
   const loaders = options.filter(loader => {
     const include = Array.isArray(loader.test)
       ? loader.test
@@ -58,6 +42,27 @@ export const propsInfo = async (
     console.error(`Multiple propsloaders found for file ${filePath}`);
   }
   const propsLoaderName = loaders.length === 1 ? loaders[0] : undefined;
+  const cachedFileName = path.join(
+    cacheFolder,
+    createHash('md5')
+      .update(
+        `${filePath}-${componentName}-${
+          propsLoaderName ? propsLoaderName.name : ''
+        }`,
+      )
+      .digest('hex'),
+  );
+  if (fs.existsSync(cachedFileName)) {
+    const cacheStats = fs.statSync(cachedFileName);
+    const fileStats = fs.statSync(filePath);
+    if (cacheStats.mtime.getTime() >= fileStats.mtime.getTime()) {
+      const fileData = fs.readFileSync(cachedFileName, 'utf8');
+      const json = JSON.parse(fileData);
+      return Object.keys(json).length ? json : undefined;
+    }
+  }
+  let result: ComponentInfo | undefined = undefined;
+
   if (propsLoaderName) {
     const { run } = require(propsLoaderName.name);
     if (run) {

core/webpack-configs/README.md

@@ -0,0 +1,203 @@
+# Table of contents
+
+-   [Overview](#overview)
+-   [Installation](#installation)
+-   [Usage](#usage)
+    -   [Basic usage](#basic-usage)
+    -   [Advanced usage](#advanced-usage)
+-   [API](#api)
+    -   [merge](#merge)
+    -   [arrayMerge](#arraymerge)
+    -   [deepMerge](#deepmerge)
+    -   [deepMergeWithRules](#deepmergewithrules)
+    -   [getWebpackConfig](#getwebpackconfig)
+    -   [mergeWebpackConfig](#mergewebpackconfig)
+    -   [rulesFactory](#rulesfactory)
+    -   [RuleOptions](#ruleoptions)
+    -   [RuleType](#ruletype)
+    -   [RuleTypes](#ruletypes)
+
+# Overview
+
+Collection of standard webpack rules for [@component-controls/instrument](https://github.com/ccontrols/component-controls/tree/master/core/instrument).
+
+# Installation
+
+```bash
+$ npm install @component-controls/webpack-configs --save-dev
+```
+
+# Usage
+
+in `.storybook/main.js`
+
+## Basic usage
+
+```js
+addons: [
+    ...
+    { 
+      name: '@component-controls/storybook',
+      options: {
+        webpack: ['react-docgen-typescript']
+      }
+    }
+  ],
+```
+
+## Advanced usage
+
+    addons: [
+      ...
+      {
+        name: '@component-controls/storybook',
+        options: {
+          webpack: [
+            'instrument',
+            {
+              name: 'react-docgen-typescript',
+              config: {
+                module: {
+                  rules: [
+                    {
+                      loader: '@component-controls/loader/loader',
+                      options: {
+                        //instrumentation options
+                        prettier: {
+                          tabWidth: 4,
+                        },
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+        }
+      }],    
+
+# API
+
+<tsdoc-typescript files="@types/webpack/index.d.ts" entry="./src/index.ts,./src/types.ts"/>
+
+<!-- START-TSDOC-TYPESCRIPT -->
+
+## merge
+
+_defined in [@component-controls/webpack-configs/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-configs/src/index.ts#L1)_
+
+
+
+## arrayMerge
+
+_defined in [@component-controls/webpack-configs/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-configs/src/index.ts#L17)_
+
+**function** arrayMerge(`dest`\*: any\[], `src`\*: any\[]): any\[];
+
+### parameters
+
+| Name      | Type   | Description |
+| --------- | ------ | ----------- |
+| `dest*`   | any\[] |             |
+| `src*`    | any\[] |             |
+| `returns` | any\[] |             |
+
+## deepMerge
+
+_defined in [@component-controls/webpack-configs/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-configs/src/index.ts#L44)_
+
+**function** deepMerge(`dest`\*: any, `source`\*: any): any;
+
+### parameters
+
+| Name      | Type | Description |
+| --------- | ---- | ----------- |
+| `dest*`   | any  |             |
+| `source*` | any  |             |
+| `returns` | any  |             |
+
+## deepMergeWithRules
+
+_defined in [@component-controls/webpack-configs/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-configs/src/index.ts#L36)_
+
+**function** deepMergeWithRules(`dest`\*: any, `source`\*: any): any;
+
+### parameters
+
+| Name      | Type | Description |
+| --------- | ---- | ----------- |
+| `dest*`   | any  |             |
+| `source*` | any  |             |
+| `returns` | any  |             |
+
+## getWebpackConfig
+
+expands the rules into webpack rules
+
+_defined in [@component-controls/webpack-configs/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-configs/src/index.ts#L55)_
+
+**function** getWebpackConfig(`custom`\*: [RuleTypes](#ruletypes)): [Configuration](#configuration);
+
+### parameters
+
+| Name      | Type                            | Description    |
+| --------- | ------------------------------- | -------------- |
+| `custom*` | [RuleTypes](#ruletypes)         | custom config  |
+| `returns` | [Configuration](#configuration) |                |
+
+## mergeWebpackConfig
+
+merge webpack config with custom set of rules
+
+_defined in [@component-controls/webpack-configs/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-configs/src/index.ts#L84)_
+
+**function** mergeWebpackConfig(`webPack`\*: [Configuration](#configuration), `custom`\*: [RuleTypes](#ruletypes)): [Configuration](#configuration);
+
+### parameters
+
+| Name       | Type                            | Description                        |
+| ---------- | ------------------------------- | ---------------------------------- |
+| `webPack*` | [Configuration](#configuration) | passed configuration to merge with |
+| `custom*`  | [RuleTypes](#ruletypes)         | custom config                      |
+| `returns`  | [Configuration](#configuration) |                                    |
+
+## rulesFactory
+
+_defined in [@component-controls/webpack-configs/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-configs/src/index.ts#L9)_
+
+
+
+### properties
+
+| Name                       | Type                            | Description |
+| -------------------------- | ------------------------------- | ----------- |
+| `instrument*`              | [Configuration](#configuration) |             |
+| `react-docgen*`            | [Configuration](#configuration) |             |
+| `react-docgen-typescript*` | [Configuration](#configuration) |             |
+
+## RuleOptions
+
+_defined in [@component-controls/webpack-configs/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-configs/src/types.ts#L3)_
+
+
+
+### properties
+
+| Name      | Type                            | Description |
+| --------- | ------------------------------- | ----------- |
+| `config*` | [Configuration](#configuration) |             |
+| `name*`   | string                          |             |
+
+## RuleType
+
+_defined in [@component-controls/webpack-configs/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-configs/src/types.ts#L7)_
+
+string | [RuleOptions](#ruleoptions)
+
+## RuleTypes
+
+_defined in [@component-controls/webpack-configs/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-configs/src/types.ts#L9)_
+
+[RuleType](#ruletype)\[]
+
+<!-- END-TSDOC-TYPESCRIPT -->

core/webpack-rules/package.json → core/webpack-configs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@component-controls/webpack-rules",
+  "name": "@component-controls/webpack-configs",
   "version": "0.6.0",
   "private": true,
   "description": "Webpack preset configurations",
@@ -27,7 +27,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/ccontrols/component-controls.git",
-    "directory": "core/webpack-rules"
+    "directory": "core/webpack-configs"
   },
   "license": "MIT",
   "dependencies": {

core/webpack-configs/src/index.ts

@@ -0,0 +1,90 @@
+const merge = require('deepmerge');
+import { Configuration } from 'webpack';
+import { instrument } from './instrument';
+import { reactDocgen } from './react-docgen';
+import { reactDocgenTypescript } from './react-docgen-typescript';
+import { RuleOptions, RuleTypes, RuleType } from './types';
+export * from './types';
+
+export const rulesFactory: {
+  [key: string]: Configuration;
+} = {
+  'react-docgen-typescript': reactDocgenTypescript,
+  'react-docgen': reactDocgen,
+  instrument,
+};
+
+const arrayMerge = (dest: any[], src: any[]) => {
+  const srcCache = src ? [...src] : [];
+  const destItems = dest
+    ? dest.reduce((acc, item) => {
+        // merge rules by loader or test
+        const srcItemIdx = srcCache.findIndex(
+          d => d.test === item.test || d.loader === item.loader,
+        );
+        if (srcItemIdx >= 0) {
+          const srcItem = srcCache[srcItemIdx];
+          srcCache.splice(srcItemIdx, 1);
+          return [...acc, deepMerge(srcItem, item)];
+        }
+        return [...acc, item];
+      }, [])
+    : src || [];
+  return [...destItems, ...srcCache];
+};
+
+const deepMergeWithRules = (dest: any, source: any) => {
+  return dest && source
+    ? merge(dest, source, {
+        arrayMerge: arrayMerge,
+      })
+    : source || dest || {};
+};
+
+const deepMerge = (dest: any, source: any) => {
+  return dest && source
+    ? merge(dest, source, {
+        arrayMerge: (d: any[], s: any[]) => (d && s ? [...d, ...s] : d || s),
+      })
+    : source || dest || {};
+};
+/**
+ * expands the rules into webpack rules
+ * @param custom custom config
+ */
+export const getWebpackConfig = (custom: RuleTypes): Configuration => {
+  const result: Configuration = custom.reduce(
+    (acc: Configuration, config: RuleType) => {
+      if (typeof config === 'string') {
+        const f = rulesFactory[config];
+        return deepMergeWithRules(acc, f);
+      }
+      if (config && (config as RuleOptions).name) {
+        const name = (config as RuleOptions).name;
+        if (rulesFactory[name]) {
+          const r: Configuration = rulesFactory[name];
+          const o: Configuration = (config as RuleOptions).config;
+          const merged: Configuration[] = deepMergeWithRules(r, o);
+          return deepMergeWithRules(acc, merged);
+        }
+      }
+      return deepMergeWithRules(acc, config);
+    },
+    {},
+  );
+  return result;
+};
+
+/**
+ * merge webpack config with custom set of rules
+ * @param webPack passed configuration to merge with
+ * @param custom custom config
+ */
+
+export const mergeWebpackConfig = (
+  webPack: Configuration,
+  custom: RuleTypes,
+): Configuration => {
+  const newConfig = getWebpackConfig(custom);
+  return deepMerge(webPack, newConfig);
+};