feat: merge user webpack config

core/instrument/src/misc/mdx-exports.ts

@@ -36,7 +36,6 @@ export const extractStoryExports = (exports?: MDXExportTypes): string => {
             storiesExports.push(expFn);
           }
           const expCode = mdxPropertiesExport(exports[exportStory]);
-          debugger;
           if (expCode) {
             storiesExports.push(`${exportStory}.story = ${expCode}
              `);

core/specification/package.json

@@ -37,7 +37,8 @@
     "@types/jest": "^25.1.2",
     "cross-env": "^5.2.1",
     "eslint": "^6.5.1",
-    "jest": "^24.9.0"
+    "jest": "^24.9.0",
+    "webpack": "^4.43.0"
   },
   "publishConfig": {
     "access": "public"

core/specification/src/configuration.ts

@@ -1,3 +1,4 @@
+import { Configuration as WebpackConfiguration } from 'webpack';
 import { StoryRenderFn } from './utility';
 
 export type PageType = 'story' | 'blog' | 'page' | 'tags' | 'author';
@@ -32,6 +33,12 @@ export interface PageConfiguration {
 
 export type PagesConfiguration = Record<PageType, PageConfiguration>;
 
+type WebpackConfigFn = (
+  config: WebpackConfiguration,
+  options?: any,
+) => WebpackConfiguration;
+type WebpackCOnfig = WebpackConfiguration | WebpackConfigFn;
+
 /**
  * global configuration used at build time
  * stored in a file named main.js/main.ts
@@ -47,6 +54,12 @@ export interface BuildConfiguration {
    * base url path for API documentation pages. Default is "docs/"
    */
   pages?: Record<PageType, Pick<PageConfiguration, 'basePath'>>;
+
+  /**
+   * custom webpack fonfigurations setup. One or the other will be used
+   */
+  webpack?: WebpackCOnfig;
+  finalWebpack?: WebpackCOnfig;
 }
 
 /**

core/webpack-compile/src/utilities.ts

@@ -3,7 +3,11 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
   .BundleAnalyzerPlugin;
 import * as path from 'path';
 import LoaderPlugin from '@component-controls/loader/plugin';
-import { mergeWebpackConfig } from '@component-controls/webpack-configs';
+import {
+  mergeWebpackConfig,
+  deepMergeWebpackConfig,
+} from '@component-controls/webpack-configs';
+import { loadConfiguration } from '@component-controls/config';
 import { CompileProps, CompileResults } from './types';
 
 export type CompileRunProps = CompileProps & {
@@ -13,14 +17,9 @@ export type CompileRunProps = CompileProps & {
   mode: webpack.Configuration['mode'];
 };
 
-const createConfig = ({
-  webPack,
-  presets,
-  configPath,
-  mode,
-  bundleAnalyzer,
-}: CompileRunProps): webpack.Configuration => {
-  const webpackConfig = mergeWebpackConfig(
+const createConfig = (options: CompileRunProps): webpack.Configuration => {
+  const { webPack, presets, configPath, mode, bundleAnalyzer } = options;
+  const initialWebpackConfig = mergeWebpackConfig(
     {
       mode,
       ...(webPack || {}),
@@ -42,7 +41,7 @@ const createConfig = ({
     );
   }
 
-  return {
+  const webpackConfig: webpack.Configuration = {
     entry: {
       stories: require.resolve(
         '@component-controls/loader/story-store-data.js',
@@ -52,10 +51,7 @@ const createConfig = ({
     output: {
       path: path.resolve(__dirname, '../dist'),
       filename: 'bundle.js',
-      library: 'store',
       libraryTarget: 'umd',
-      globalObject: 'this',
-      umdNamedDefine: true,
     },
     resolve: {
       alias: {
@@ -141,9 +137,21 @@ const createConfig = ({
       '@component-controls/blocks': '@component-controls/blocks',
       '@component-controls/components': '@component-controls/components',
     },
-    ...webpackConfig,
+    ...initialWebpackConfig,
     plugins,
   };
+  const runConfig = loadConfiguration(process.cwd(), configPath);
+
+  const userWebpackConfig =
+    runConfig?.config &&
+    (runConfig.config.webpack || runConfig.config.finalWebpack);
+
+  if (!userWebpackConfig) {
+    return webpackConfig;
+  }
+  return typeof userWebpackConfig === 'function'
+    ? userWebpackConfig(webpackConfig, options)
+    : deepMergeWebpackConfig(webpackConfig, userWebpackConfig);
 };
 
 export const runCompiler = (

core/webpack-configs/src/index.ts

@@ -1,14 +1,15 @@
 const merge = require('deepmerge');
-import { Configuration } from 'webpack';
+import { Configuration as WebpackConfiguration } from 'webpack';
 import { react } from './react';
 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 { WebpackConfiguration };
 export const presetsFactory: {
-  [key: string]: Configuration;
+  [key: string]: WebpackConfiguration;
 } = {
   'react-docgen-typescript': reactDocgenTypescript,
   'react-docgen': reactDocgen,
@@ -54,19 +55,19 @@ const deepMerge = (dest: any, source: any) => {
  * expands the presets into webpack config
  * @param presets custom config
  */
-export const getWebpackConfig = (presets: RuleTypes): Configuration => {
-  const result: Configuration = presets.reduce(
-    (acc: Configuration, config: RuleType) => {
+export const getWebpackConfig = (presets: RuleTypes): WebpackConfiguration => {
+  const result: WebpackConfiguration = presets.reduce(
+    (acc: WebpackConfiguration, config: RuleType) => {
       if (typeof config === 'string') {
         const f = presetsFactory[config];
         return deepMergeWithPresets(acc, f);
       }
       if (config && (config as RuleOptions).name) {
         const name = (config as RuleOptions).name;
         if (presetsFactory[name]) {
-          const r: Configuration = presetsFactory[name];
-          const o: Configuration = (config as RuleOptions).config;
-          const merged: Configuration[] = deepMergeWithPresets(r, o);
+          const r: WebpackConfiguration = presetsFactory[name];
+          const o: WebpackConfiguration = (config as RuleOptions).config;
+          const merged: WebpackConfiguration[] = deepMergeWithPresets(r, o);
           return deepMergeWithPresets(acc, merged);
         }
       }
@@ -77,16 +78,30 @@ export const getWebpackConfig = (presets: RuleTypes): Configuration => {
   return result;
 };
 
+/**
+ * deep merge two webpack configurations
+ */
+export const deepMergeWebpackConfig = (
+  dest?: WebpackConfiguration,
+  source?: WebpackConfiguration,
+): WebpackConfiguration => {
+  return dest && source
+    ? merge(dest, source, {
+        arrayMerge: arrayMerge,
+      })
+    : source || dest || {};
+};
+
 /**
  * merge webpack config with custom set of presets
  * @param webPack passed configuration to merge with
  * @param presets custom config
  */
 
 export const mergeWebpackConfig = (
-  webPack?: Configuration,
+  webPack?: WebpackConfiguration,
   presets?: RuleTypes,
-): Configuration => {
+): WebpackConfiguration => {
   if (!presets) {
     return {};
   }

examples/gatsby/.config/main.js

@@ -1,3 +1,5 @@
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
 module.exports = {
   stories: [
     '../../stories/src/blogs/*.mdx',
@@ -13,4 +15,14 @@ module.exports = {
       basePath: 'blogs/',
     },
   },
+  webpack: (config = {}, options = {}) => {
+    return {
+      ...config,
+      plugins: [
+        ...config.plugins,
+        //new BundleAnalyzerPlugin({ generateStatsFile: true, statsFilename: 'stats.json' })
+      ]
+    };
+  },
+
 };

examples/gatsby/package.json

@@ -21,6 +21,7 @@
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "typescript": "^3.9.3"
+    "typescript": "^3.9.3",
+    "webpack-bundle-analyzer": "^3.7.0"
   }  
 }