fix: fixes to webpack upgrade

ccontrols · Mar 6, 2021 · 6417166 · 6417166
1 parent b1fb2f1
commit 6417166
Show file tree

Hide file tree

Showing 13 changed files with 205 additions and 129 deletions.
diff --git a/core/core/src/build.ts b/core/core/src/build.ts
@@ -16,6 +16,7 @@ export type PresetCallback = (options: BuildProps) => Configuration;
 export type PresetType = Configuration | PresetCallback;
 
 export type WebpackLoader =
+  | 'mini-css-extract-plugin'
   | 'css-loader'
   | 'postcss-loader'
   | 'sass-loader'

diff --git a/core/webpack-compile/src/args.ts b/core/webpack-compile/src/args.ts
@@ -1,3 +1,4 @@
+import path from 'path';
 import yargs, { Options, Argv } from 'yargs';
 
 export interface CliArgTypes {
@@ -65,7 +66,7 @@ export const defaultCliArgs: ArgOptions = [
       alias: 's',
       description: 'static assets folder',
       type: 'string',
-      default: 'dist/static',
+      default: path.join('dist', 'static'),
     },
   },
   {

diff --git a/core/webpack-compile/tests/draft.test.ts b/core/webpack-compile/tests/draft.test.ts
@@ -10,11 +10,16 @@ expect.addSnapshotSerializer({
 
 describe('test draft', () => {
   it('compile', async () => {
-    const { bundleName } = await compile({
+    const { store } = await compile({
       presets: ['react', 'react-docgen-typescript'],
-      configPath: path.resolve(__dirname, 'fixtures', 'draft'),
+      //configPath: path.resolve(__dirname, 'fixtures', 'draft'),
+      configPath: path.resolve(
+        __dirname,
+        '../../../examples',
+        'starter',
+        '.config',
+      ),
     });
-    const bundle = require(bundleName);
-    expect(bundle).toMatchSnapshot();
+    expect(store).toMatchSnapshot();
   }, 50000);
 });
diff --git a/core/webpack-configs/package.json b/core/webpack-configs/package.json
@@ -37,13 +37,13 @@
     "@component-controls/store": "^2.12.0",
     "babel-loader": "^8.2.2",
     "babel-preset-react-app": "^10.0.0",
-    "core-js": "^3.9.1",
     "css-loader": "^5.1.1",
+    "css-minimizer-webpack-plugin": "^1.2.0",
+    "core-js": "^3.9.1",
     "mini-css-extract-plugin": "^1.3.9",
     "file-loader": "^6.2.0",
     "less": "^4.1.1",
     "less-loader": "^8.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "path": "^0.12.7",
     "postcss-loader": "^5.0.0",
     "raw-loader": "^4.0.2",
@@ -57,7 +57,9 @@
   "devDependencies": {
     "@babel/preset-env": "^7.13.9",
     "@component-controls/ts-markdown-docs": "^2.6.0",
+    "@types/css-minimizer-webpack-plugin": "^1.1.1",
     "@types/jest": "^26.0.10",
+    "@types/mini-css-extract-plugin": "^1.2.2",
     "@types/node": "^14.14.31",
     "@types/optimize-css-assets-webpack-plugin": "^5.0.2",
     "cross-env": "^5.2.1",

diff --git a/core/webpack-configs/src/react/index.ts b/core/webpack-configs/src/react/index.ts
@@ -1,14 +1,11 @@
 import path from 'path';
-import { Configuration, RuleSetUseItem, WebpackPluginInstance } from 'webpack';
-import OptimizeCssAssetsWebpackPlugin from 'optimize-css-assets-webpack-plugin';
+import { Configuration, RuleSetUseItem } from 'webpack';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import {
   PresetCallback,
   BuildProps,
-  //TODO webpack compatible version:
-  /*
   defCssFileName,
-   */
   customLoaderOptions,
 } from '@component-controls/core';
 import { findUpFile } from '@component-controls/core/node-utils';
@@ -33,12 +30,9 @@ export const react: PresetCallback = (options: BuildProps) => {
   }
   const result: Configuration = {
     plugins: [
-      //TODO webpack compatible version:
-      /*
-      new ExtractCssPlugin({
+      new MiniCssExtractPlugin({
         filename: options.cssFileName || defCssFileName,
       }),
-       */
     ],
     optimization: { minimizer: [] },
     performance: { hints: false },
@@ -110,7 +104,7 @@ export const react: PresetCallback = (options: BuildProps) => {
           exclude: [/node_modules/],
           loader: 'url-loader',
           options: customLoaderOptions(options, 'url-loader', {
-            limit: 25000,
+            limit: 1024 * 24,
             name: '[name].[ext]',
             publicPath: '/static',
             outputPath: path.relative(
@@ -140,9 +134,9 @@ export const react: PresetCallback = (options: BuildProps) => {
             // Creates `style` nodes from JS strings
             {
               loader: MiniCssExtractPlugin.loader,
-              options: {
+              options: customLoaderOptions(options, 'mini-css-extract-plugin', {
                 publicPath: '',
-              },
+              }),
             },
             {
               // Translates CSS into CommonJS
@@ -210,15 +204,8 @@ export const react: PresetCallback = (options: BuildProps) => {
     },
   };
   if (isProd) {
-    const optimizeCss: WebpackPluginInstance = new (OptimizeCssAssetsWebpackPlugin as any)(
-      {
-        cssProcessorOptions: {
-          discardComments: { removeAll: true },
-        },
-      },
-    );
     result.optimization = {
-      minimizer: [optimizeCss],
+      minimizer: [new CssMinimizerPlugin()],
     };
   }
   return result;

diff --git a/integrations/gatsby-theme-stories/src/gatsby-node.ts b/integrations/gatsby-theme-stories/src/gatsby-node.ts
@@ -115,7 +115,11 @@ export const createPagesStatefully = async (
         }
         await searchIndexing(store);
       }
-      process.env.GATSBY_CC_CSS_FILENAME = getCSSBundleName(store.config);
+      const cssBundle = getCSSBundleName(store.config);
+      if (fs.existsSync(cssBundle)) {
+        const cssStyles = fs.readFileSync(cssBundle, 'utf8');
+        process.env.GATSBY_CC_CSS = JSON.stringify(cssStyles);
+      }
     }
 
     doneCb(null, null);

diff --git a/integrations/gatsby-theme-stories/src/gatsby-ssr.tsx b/integrations/gatsby-theme-stories/src/gatsby-ssr.tsx
@@ -1,4 +1,3 @@
-import fs from 'fs';
 import React from 'react';
 import { PreRenderHTMLArgs, RenderBodyArgs } from 'gatsby';
 import { Helmet } from 'react-helmet';
@@ -27,9 +26,8 @@ export const onPreRenderHTML = ({
   replaceHeadComponents,
 }: PreRenderHTMLArgs): void => {
   const headComponents = getHeadComponents();
-  const cssBundle = process.env.GATSBY_CC_CSS_FILENAME;
-  if (cssBundle && fs.existsSync(cssBundle)) {
-    const cssStyles = fs.readFileSync(cssBundle, 'utf8');
+  if (typeof process.env.GATSBY_CC_CSS === 'string') {
+    const cssStyles = JSON.parse(process.env.GATSBY_CC_CSS);
     headComponents.push(<style key="controls-styles">{cssStyles}</style>);
   }
   //fix issue with facebook ignoring the helmet tags

diff --git a/integrations/nextjs-plugin/src/build.ts b/integrations/nextjs-plugin/src/build.ts
@@ -12,8 +12,12 @@ import {
   RuleOptions,
   defaultCompileProps,
 } from '@component-controls/core';
-import { getCSSBundleName } from '@component-controls/core/node-utils';
+import {
+  getBundleName,
+  getCSSBundleName,
+} from '@component-controls/core/node-utils';
 import { Store } from '@component-controls/core';
+import { mergeBuildConfiguration } from '@component-controls/config';
 import { loadStore } from '@component-controls/store';
 import { getSiteMap } from '@component-controls/routes';
 
@@ -22,39 +26,39 @@ module.exports = ({
   configPath,
   presets,
   staticFolder,
+  distFolder,
   webpack,
   ...rest
 }: BuildProps) => () => {
+  const userProps: BuildProps = {
+    bundleName,
+    configPath,
+    webpack,
+  };
+  const buildConfig: BuildProps = {
+    ...defaultCompileProps,
+    ...{
+      distFolder: distFolder || path.join(process.cwd(), 'public'),
+      staticFolder: staticFolder || path.join(process.cwd(), 'dist', 'static'),
+    },
+    ...userProps,
+  };
+  if (presets) {
+    buildConfig.presets = presets;
+  }
   return {
     /**
      * we need some async function, to make sure the compilation process is completed
      */
     async headers() {
-      const userProps: BuildProps = {
-        bundleName,
-        configPath,
-        webpack,
-      };
-      const config: BuildProps = {
-        ...defaultCompileProps,
-        ...{
-          distFolder: path.resolve(__dirname),
-          staticFolder:
-            staticFolder || path.join(process.cwd(), 'public', 'static'),
-          ...userProps,
-        },
-      };
-      if (presets) {
-        config.presets = presets;
-      }
       const onBundle: CompilerCallbackFn = async ({ store: loadingStore }) => {
         if (loadingStore) {
           const store: Store = loadStore(loadingStore, true);
           if (process.env.NODE_ENV === 'production') {
             if (store.config.siteMap) {
               const sitemap = getSiteMap(store);
               const sitemapfolder = path.resolve(
-                config.staticFolder as string,
+                buildConfig.staticFolder as string,
                 '..',
               );
               if (!fs.existsSync(sitemapfolder)) {
@@ -71,8 +75,8 @@ module.exports = ({
       };
       const compiler =
         process.env.NODE_ENV === 'development'
-          ? watch(config, onBundle)
-          : compile(config, onBundle);
+          ? watch(buildConfig, onBundle)
+          : compile(buildConfig, onBundle);
       await compiler;
 
       return [];
@@ -86,7 +90,26 @@ module.exports = ({
           '@emotion/babel-plugin',
         );
       }
-      return config;
+      return {
+        ...config,
+        module: {
+          ...config.module,
+          rules: [
+            ...(config.module?.rules || []),
+            {
+              test: require.resolve('@component-controls/store/controls-store'),
+              use: {
+                loader: require.resolve('@component-controls/store/loader.js'),
+                options: {
+                  bundleFileName: getBundleName(
+                    mergeBuildConfiguration(buildConfig),
+                  ),
+                },
+              },
+            },
+          ],
+        },
+      };
     },
 
     ...rest,

diff --git a/integrations/nextjs-plugin/src/store.ts b/integrations/nextjs-plugin/src/store.ts
@@ -1,5 +1 @@
-import { Store } from '@component-controls/core';
-import { loadStore } from '@component-controls/store';
-
-const bundle = require('./component-controls');
-export const store: Store = loadStore(bundle, true);
+export { store } from '@component-controls/store/controls-store';
diff --git a/misc/storybook-custom-docs/package.json b/misc/storybook-custom-docs/package.json
@@ -34,6 +34,9 @@
     "directory": "misc/storybook-custom-docs"
   },
   "license": "MIT",
+  "dependencies": {
+    "@component-controls/core": "^2.10.4"
+  },
   "devDependencies": {
     "@component-controls/ts-markdown-docs": "^2.6.0",
     "@storybook/addons": "^6.2.0-alpha.29",

diff --git a/misc/storybook-custom-docs/src/manager-loader.ts b/misc/storybook-custom-docs/src/manager-loader.ts
@@ -1,19 +1,30 @@
+import {
+  WebpackLoaderContext,
+  LoaderOptions,
+} from '@component-controls/core/node-utils';
 import { getOptions } from 'loader-utils';
 
 interface DocsOptions {
-  pages: string[];
+  pages?: string[];
 }
-module.exports.default = async function() {
-  const options: DocsOptions = (getOptions(this) as DocsOptions) || {};
+function loader(this: WebpackLoaderContext): any {
+  const options: DocsOptions = getOptions(this) || {};
+
   const { pages } = options;
   const callback = this.async();
   const code = ` 
   /* eslint-disable react/display-name */
   const React = require('react');
   const { addons, types } = require('@storybook/addons');
-  ${pages
-    .map((file, index) => `const pageConfig_${index} = require("${file}");`)
-    .join('\n')}
+  ${
+    pages
+      ? pages
+          .map(
+            (file, index) => `const pageConfig_${index} = require("${file}");`,
+          )
+          .join('\n')
+      : ''
+  }
   const { ManagerContainer } =  require('./ManagerContainer');
   
   const ADDON_ID = 'CUSTOM_PAGE_ADDON';
@@ -41,15 +52,33 @@ module.exports.default = async function() {
     });
   };
   const pageConfigs = [];
-  ${pages
-    .map(
-      (file, index) =>
-        `pageConfigs.push(pageConfig_${index}.default || pageConfig_${index});`,
-    )
-    .join('\n')}
+  ${
+    pages
+      ? pages
+          .map(
+            (file, index) =>
+              `pageConfigs.push(pageConfig_${index}.default || pageConfig_${index});`,
+          )
+          .join('\n')
+      : ''
+  }
 
   registerPages(pageConfigs);
   
 `;
-  return callback(null, code);
-};
+  if (callback) {
+    return callback(null, code);
+  }
+  return '';
+}
+
+export default loader;
+
+/**
+ * expose public types via declaration merging
+ */
+// eslint-disable-next-line @typescript-eslint/no-namespace
+namespace loader {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Options extends LoaderOptions {}
+}