fix(webpack-loader): fixes HMR (#528)

src/babel/eval-cache.ts

@@ -4,6 +4,7 @@ import { debug } from './utils/logger';
 
 const fileHashes = new Map<string, string>();
 const evalCache = new Map<string, any>();
+const fileKeys = new Map<string, string[]>();
 
 const hash = (text: string) =>
   createHash('sha1')
@@ -22,33 +23,69 @@ const memoizedHash: typeof hash = text => {
   return lastHash;
 };
 
+const toKey = (filename: string, exports: string[]) =>
+  exports.length > 0 ? `${filename}:${exports.join(',')}` : filename;
+
 export const clear = () => {
   fileHashes.clear();
   evalCache.clear();
+  fileKeys.clear();
 };
 
-export const has = (filename: string, text: string): boolean => {
+export const clearForFile = (filename: string) => {
+  const keys = fileKeys.get(filename) ?? [];
+  if (keys.length === 0) {
+    return;
+  }
+
+  debug('eval-cache:clear-for-file', filename);
+
+  for (const key of keys) {
+    fileHashes.delete(key);
+    evalCache.delete(key);
+  }
+
+  fileKeys.set(filename, []);
+};
+
+export const has = (
+  [filename, ...exports]: string[],
+  text: string
+): boolean => {
+  const key = toKey(filename, exports);
   const textHash = memoizedHash(text);
-  debug('eval-cache:has', `${filename} ${textHash}`);
+  debug('eval-cache:has', `${key} ${textHash}`);
 
-  return fileHashes.get(filename) === textHash;
+  return fileHashes.get(key) === textHash;
 };
 
-export const get = (filename: string, text: string): any => {
+export const get = ([filename, ...exports]: string[], text: string): any => {
+  const key = toKey(filename, exports);
   const textHash = memoizedHash(text);
-  debug('eval-cache:get', `${filename} ${textHash}`);
+  debug('eval-cache:get', `${key} ${textHash}`);
 
-  if (fileHashes.get(filename) !== textHash) {
+  if (fileHashes.get(key) !== textHash) {
     return undefined;
   }
 
-  return evalCache.get(filename);
+  return evalCache.get(key);
 };
 
-export const set = (filename: string, text: string, value: any): void => {
+export const set = (
+  [filename, ...exports]: string[],
+  text: string,
+  value: any
+): void => {
+  const key = toKey(filename, exports);
   const textHash = memoizedHash(text);
-  debug('eval-cache:set', `${filename} ${textHash}`);
+  debug('eval-cache:set', `${key} ${textHash}`);
+
+  fileHashes.set(key, textHash);
+  evalCache.set(key, value);
+
+  if (!fileKeys.has(filename)) {
+    fileKeys.set(filename, []);
+  }
 
-  fileHashes.set(filename, textHash);
-  evalCache.set(filename, value);
+  fileKeys.get(filename)!.push(key);
 };

src/babel/module.ts

@@ -250,9 +250,7 @@ class Module {
       })
       .reverse();
 
-    const cacheKey = only
-      ? `${this.filename}:${only.join(',')}`
-      : this.filename;
+    const cacheKey = [this.filename, ...(only ?? [])];
 
     if (EvalCache.has(cacheKey, text)) {
       this.exports = EvalCache.get(cacheKey, text);

src/loader.ts

@@ -6,10 +6,11 @@ import loaderUtils from 'loader-utils';
 import enhancedResolve from 'enhanced-resolve';
 import findYarnWorkspaceRoot from 'find-yarn-workspace-root';
 import { loader as webpackLoader } from 'webpack';
+import { RawSourceMap } from 'source-map';
+import * as EvalCache from './babel/eval-cache';
 import Module from './babel/module';
 import { debug } from './babel/utils/logger';
 import transform from './transform';
-import { RawSourceMap } from 'source-map';
 
 const workspaceRoot = findYarnWorkspaceRoot();
 
@@ -18,7 +19,9 @@ export default function loader(
   content: string,
   inputSourceMap: RawSourceMap | null
 ) {
-  debug('loader', this.resourcePath, this.hot ? 'with HMR' : 'without HMR');
+  debug('loader', this.resourcePath);
+
+  EvalCache.clearForFile(this.resourcePath);
 
   const {
     sourceMap = undefined,