fix: update loader for HMR

ccontrols · Jul 17, 2020 · fdf1ee8 · fdf1ee8
1 parent f9785d0
commit fdf1ee8
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 58 deletions.
diff --git a/core/loader/src/loader.ts b/core/loader/src/loader.ts
@@ -1,6 +1,7 @@
 import * as fs from 'fs';
 import * as chalk from 'chalk';
 import { getOptions } from 'loader-utils';
+import { loader } from 'webpack';
 
 import {
   InstrumentOptions,
@@ -9,9 +10,10 @@ import {
 
 import { addStoriesDoc, removeStoriesDoc } from './store';
 
-module.exports.pitch = async function() {
-  const options: InstrumentOptions = getOptions(this) || {};
-  const filePath = this.resource;
+module.exports = async function() {
+  const context = (this as unknown) as loader.LoaderContext;
+  const options: InstrumentOptions = getOptions(context) || {};
+  const filePath = context.resource;
   const source = fs.readFileSync(filePath, 'utf8');
   const { transformed, ...store } = await parseStories(
     source,

diff --git a/core/loader/src/replaceSource.ts b/core/loader/src/replaceSource.ts
@@ -68,29 +68,12 @@ ${stories
   }
 `;
   const exports = `module.exports = store;\n`;
-  const hmr = `
-  if (module.hot) {
-    module.hot.accept(function() {
-      console.log('HMR CALLBACK',this);
-    });
-    ${stories
-      .map(
-        story => `
-    module.hot.accept(${story.relPath}, function() {
-      console.log('HMR',${story.relPath});
-    });    
-    `,
-      )
-      .join('\n')}
-  }
-  `;
   const newContent = `
 ${imports}
 ${storeConst}
 store.config = ${configFilePath ? 'configJSON.default ||' : ''} configJSON;
 store.buildConfig = ${config ? JSON.stringify(config) : '{}'};
 ${loadStories}
-${hmr}
 ${exports}
 `;
   return newContent;

diff --git a/core/loader/src/runtimeLoader.ts b/core/loader/src/runtimeLoader.ts
@@ -2,23 +2,22 @@ import { deepMergeArrays, defaultBuildConfig } from '@component-controls/core';
 
 import { loadConfiguration, extractStories } from '@component-controls/config';
 import { stringifyRequest } from 'loader-utils';
+import { loader } from 'webpack';
 import { replaceSource, StoryPath } from './replaceSource';
 import { store, reserveStories } from './store';
 
 module.exports = function(content: string) {
-  //@ts-ignore
-  const params = JSON.parse(this.query.slice(1));
-  //@ts-ignore
-  const config = loadConfiguration(this.rootContext, params.config);
+  const context = (this as unknown) as loader.LoaderContext;
+  const params = JSON.parse(context.query.slice(1));
+  const config = loadConfiguration(context.rootContext, params.config);
   store.buildConfig = config?.config
     ? deepMergeArrays(defaultBuildConfig, config.config)
     : defaultBuildConfig;
 
   const stories: StoryPath[] = (config ? extractStories(config) || [] : []).map(
     fileName => ({
       absPath: fileName,
-      //@ts-ignore
-      relPath: stringifyRequest(this, fileName),
+      relPath: stringifyRequest(context, fileName),
     }),
   );
   reserveStories(stories.map(story => story.absPath));

diff --git a/core/webpack-compile/src/utilities.ts b/core/webpack-compile/src/utilities.ts
@@ -1,9 +1,4 @@
-import webpack, {
-  Configuration,
-  Compiler,
-  Stats,
-  HotModuleReplacementPlugin,
-} from 'webpack';
+import webpack, { Configuration, Compiler, Stats } from 'webpack';
 import * as path from 'path';
 const chalk = require('chalk');
 import LoaderPlugin from '@component-controls/loader/plugin';
@@ -31,8 +26,7 @@ const createConfig = (options: CompileRunProps): webpack.Configuration => {
       config: configPath,
       escapeOutput: mode === 'development',
     }),
-    new HotModuleReplacementPlugin({}),
-  ];
+  ].filter(Boolean);
   const webpackConfig = mergeWebpackConfig(
     {
       mode,
@@ -100,16 +94,13 @@ export const runCompiler = (
         console.error(error);
         return reject(error);
       }
+
+      const { store } = require('@component-controls/loader/store');
       console.log(
         chalk.bgRgb(244, 147, 66)('@bundle generated: '),
         require.resolve('@component-controls/loader/store'),
+        chalk.bgRgb(244, 147, 66)(`${store.stores.length} documents compiled`),
       );
-      const { store } = require('@component-controls/loader/store');
-      console.log(
-        chalk.bgRgb(244, 147, 66)('@end compilation'),
-        `${store.stores.length} documents compiled`,
-      );
-
       resolve({ store, stats });
     });
   });

diff --git a/core/webpack-configs/src/instrument/index.ts b/core/webpack-configs/src/instrument/index.ts
@@ -29,6 +29,7 @@ export const instrument: Configuration = {
         test: /\.(md|mdx)$/,
         exclude: [/node_modules/],
         loader: '@component-controls/loader/loader',
+        enforce: 'pre',
         options: {
           mdx: {
             transformMDX: true,

diff --git a/core/webpack-configs/src/react-docgen-typescript/index.ts b/core/webpack-configs/src/react-docgen-typescript/index.ts
@@ -7,6 +7,7 @@ export const reactDocgenTypescript: Configuration = {
         test: /\.(md|mdx)$/,
         exclude: [/node_modules/],
         loader: '@component-controls/loader/loader',
+        enforce: 'pre',
         options: {
           propsLoaders: [
             {

diff --git a/core/webpack-configs/src/react-docgen/index.ts b/core/webpack-configs/src/react-docgen/index.ts
@@ -7,6 +7,7 @@ export const reactDocgen: Configuration = {
         test: /\.(md|mdx)$/,
         exclude: [/node_modules/],
         loader: '@component-controls/loader/loader',
+        enforce: 'pre',
         options: {
           propsLoaders: [
             {

diff --git a/core/webpack-configs/src/react/index.ts b/core/webpack-configs/src/react/index.ts
@@ -24,20 +24,6 @@ export const react: PresetType = (options?: PresetOptions) => {
             },
           ],
         },
-        {
-          test: /\.(eot|md|svg|ico|jpg|jpeg|png|gif|ttf|woff|woff2|pdf|mp4|web|wav|mp3|m4a|aac|oga)$/i,
-          exclude: [/node_modules/],
-          loader: 'url-loader',
-          options: {
-            limit: 25000,
-            name: '[name].[hash].[ext]',
-            publicPath: '/static',
-            outputPath: path.relative(
-              options?.distFolder || process.cwd(),
-              path.resolve(options?.outputFolder || process.cwd(), 'static'),
-            ),
-          },
-        },
         {
           test: /\.(ts|tsx)$/,
           exclude: [/node_modules/],
@@ -50,10 +36,6 @@ export const react: PresetType = (options?: PresetOptions) => {
             },
           ],
         },
-        {
-          test: /\.txt$/i,
-          use: require.resolve('raw-loader'),
-        },
         {
           test: /\.(md|mdx)$/i,
           exclude: [/node_modules/],
@@ -65,10 +47,31 @@ export const react: PresetType = (options?: PresetOptions) => {
             ],
           },
         },
+        {
+          test: /\.(eot|md|svg|ico|jpg|jpeg|png|gif|ttf|woff|woff2|pdf|mp4|web|wav|mp3|m4a|aac|oga)$/i,
+          exclude: [/node_modules/],
+          loader: 'url-loader',
+          options: {
+            limit: 25000,
+            name: '[name].[hash].[ext]',
+            publicPath: '/static',
+            outputPath: path.relative(
+              options?.distFolder || process.cwd(),
+              path.resolve(options?.outputFolder || process.cwd(), 'static'),
+            ),
+          },
+        },
+
+        {
+          test: /\.txt$/i,
+          use: require.resolve('raw-loader'),
+        },
+
         {
           test: /\.(md|mdx)$/i,
           exclude: [/node_modules/],
           loader: '@component-controls/loader/loader',
+          enforce: 'pre',
           options: {
             mdx: {
               transformMDX: true,
@@ -79,6 +82,7 @@ export const react: PresetType = (options?: PresetOptions) => {
           test: /\.(story|stories|doc|docs).(js|jsx|ts|tsx)$/,
           loader: '@component-controls/loader/loader',
           exclude: [/node_modules/],
+          enforce: 'pre',
         },
       ],
     },