fix(babel): addresses problems with cache (fixes #1199, #1265) (#1285)

.changeset/smart-owls-compare.md

@@ -0,0 +1,13 @@
+---
+'@linaria/babel-preset': patch
+'@linaria/rollup': patch
+'@linaria/shaker': patch
+'@linaria/testkit': patch
+'@linaria/utils': patch
+'@linaria/vite': patch
+'@linaria/webpack4-loader': patch
+'@linaria/webpack5-loader': patch
+'linaria-website': patch
+---
+
+The cache has been improved, which should address the build time issues for Webpack 4/5 and resolve HMR-related problems for Vite. Fixes #1199, #1265 and maybe some more.

examples/astro-solid/package.json

@@ -13,7 +13,7 @@
     "astro": "^1.6.10",
     "solid-js": "^1.6.2",
     "vite": "^4",
-    "vite-plugin-inspect": "^0.7.9"
+    "vite-plugin-inspect": "^0.7.33"
   },
   "scripts": {
     "dev": "astro dev --force",

packages/babel/src/cache.ts

@@ -1,7 +1,17 @@
+import { createHash } from 'crypto';
+
+import type { File } from '@babel/types';
+
 import type Module from './module';
 import type { ITransformFileResult } from './types';
 
+function hashContent(content: string) {
+  return createHash('sha256').update(content).digest('hex');
+}
+
 export class TransformCacheCollection {
+  private contentHashes = new Map<string, string>();
+
   constructor(
     public readonly resolveCache: Map<string, string> = new Map(),
     public readonly codeCache: Map<
@@ -12,6 +22,24 @@ export class TransformCacheCollection {
         result: ITransformFileResult;
       }
     > = new Map(),
-    public readonly evalCache: Map<string, Module> = new Map()
+    public readonly evalCache: Map<string, Module> = new Map(),
+    public readonly originalASTCache: Map<string, File | 'ignored'> = new Map()
   ) {}
+
+  public invalidateForFile(filename: string) {
+    this.resolveCache.delete(filename);
+    this.codeCache.delete(filename);
+    this.evalCache.delete(filename);
+    this.originalASTCache.delete(filename);
+  }
+
+  public invalidateIfChanged(filename: string, content: string) {
+    const hash = this.contentHashes.get(filename);
+    const newHash = hashContent(content);
+
+    if (hash !== newHash) {
+      this.contentHashes.set(filename, newHash);
+      this.invalidateForFile(filename);
+    }
+  }
 }

packages/babel/src/index.ts

@@ -20,6 +20,7 @@ export { default as withLinariaMetadata } from './utils/withLinariaMetadata';
 export { default as Module, DefaultModuleImplementation } from './module';
 export { default as transform } from './transform';
 export * from './types';
+export { parseFile } from './transform-stages/helpers/parseFile';
 export { default as loadLinariaOptions } from './transform-stages/helpers/loadLinariaOptions';
 export type { PluginOptions } from './transform-stages/helpers/loadLinariaOptions';
 export { prepareCode } from './transform-stages/1-prepare-for-eval';

packages/babel/src/module.ts

@@ -26,7 +26,6 @@ import { getFileIdx } from '@linaria/utils';
 
 import { TransformCacheCollection } from './cache';
 import * as process from './process';
-import type { ITransformFileResult } from './types';
 
 type HiddenModuleMembers = {
   _extensions: { [key: string]: () => void };
@@ -111,8 +110,6 @@ class Module {
 
   filename: string;
 
-  options: StrictOptions;
-
   imports: Map<string, string[]> | null;
 
   // paths: string[];
@@ -127,40 +124,22 @@ class Module {
 
   debug: CustomDebug;
 
-  readonly #resolveCache: Map<string, string>;
-
-  readonly #codeCache: Map<
-    string,
-    {
-      imports: Map<string, string[]> | null;
-      only: string[];
-      result: ITransformFileResult;
-    }
-  >;
-
-  readonly #evalCache: Map<string, Module>;
-
   constructor(
     filename: string,
-    options: StrictOptions,
-    cache = new TransformCacheCollection(),
+    public options: Pick<StrictOptions, 'extensions'>,
+    private cache = new TransformCacheCollection(),
     private debuggerDepth = 0,
     private parentModule?: Module,
     private moduleImpl: HiddenModuleMembers = DefaultModuleImplementation
   ) {
     this.idx = getFileIdx(filename);
     this.id = filename;
     this.filename = filename;
-    this.options = options;
     this.imports = null;
     this.dependencies = null;
     this.transform = null;
     this.debug = createCustomDebug('module', this.idx);
 
-    this.#resolveCache = cache.resolveCache;
-    this.#codeCache = cache.codeCache;
-    this.#evalCache = cache.evalCache;
-
     this.#lazyValues = new Map();
 
     const exports: Record<string | symbol, unknown> = {};
@@ -279,8 +258,8 @@ class Module {
 
   resolve = (id: string) => {
     const resolveCacheKey = `${this.filename} -> ${id}`;
-    if (this.#resolveCache.has(resolveCacheKey)) {
-      return this.#resolveCache.get(resolveCacheKey)!;
+    if (this.cache.resolveCache.has(resolveCacheKey)) {
+      return this.cache.resolveCache.get(resolveCacheKey)!;
     }
 
     const extensions = this.moduleImpl._extensions;
@@ -347,8 +326,8 @@ class Module {
 
       this.debug('require', `${id} -> ${filename}`);
 
-      if (this.#evalCache.has(filename)) {
-        m = this.#evalCache.get(filename)!;
+      if (this.cache.evalCache.has(filename)) {
+        m = this.cache.evalCache.get(filename)!;
         this.debug('eval-cache', '✅ %r has been gotten from cache', {
           namespace: `module:${padStart(m.idx, 5)}`,
         });
@@ -360,27 +339,23 @@ class Module {
         m = new Module(
           filename,
           this.options,
-          {
-            codeCache: this.#codeCache,
-            evalCache: this.#evalCache,
-            resolveCache: this.#resolveCache,
-          },
+          this.cache,
           this.debuggerDepth + 1,
           this
         );
         m.transform = this.transform;
 
         // Store it in cache at this point with, otherwise
         // we would end up in infinite loop with cyclic dependencies
-        this.#evalCache.set(filename, m);
+        this.cache.evalCache.set(filename, m);
       }
 
       const extension = path.extname(filename);
       if (extension === '.json' || this.extensions.includes(extension)) {
         let code: string | undefined;
         // Requested file can be already prepared for evaluation on the stage 1
-        if (onlyList && this.#codeCache.has(filename)) {
-          const cached = this.#codeCache.get(filename);
+        if (onlyList && this.cache.codeCache.has(filename)) {
+          const cached = this.cache.codeCache.get(filename);
           const only = onlyList
             .split(',')
             .filter((token) => !m.#lazyValues.has(token));