Fix Babel-Loader Caching for ember-template-compiler

We now include the checksum of the template compiler in the inline-template-compiler babel configuration options.
This busts the cache, as any functioning caching babel subsystem (such as babel-loader) must consider option changes as cache invalidating scenarios. Today, it is in-fact the case that babel-loader operates as we expect, and with this change, caches are correctly invalidated.

We co-located the checksum with the template-compiler options, rather then a single global cache key to both simplify debugging and not prevent some more granular caching strategy from functioning optimally.


This does not explicitly include integration tests due to my believe that this is already covered sufficiently:

1) today’s tests already include this (running yarn test currently fails without this fix)
2) type checking ensure we now always pass the key in
3) this is ultimately a configuration change of a babel-loader feature (which itself should test this)

packages/compat/src/compat-app.ts

@@ -32,7 +32,8 @@ import flatten from 'lodash/flatten';
 import { sync as resolveSync } from 'resolve';
 import { MacrosConfig } from '@embroider/macros/src/node';
 import bind from 'bind-decorator';
-import { pathExistsSync } from 'fs-extra';
+import { pathExistsSync, readFileSync } from 'fs-extra';
+import crypto from 'crypto';
 import { tmpdir } from 'os';
 import { Options as AdjustImportsOptions } from '@embroider/core/src/babel-plugin-adjust-imports';
 import semver from 'semver';
@@ -401,11 +402,15 @@ class CompatAppAdapter implements AppAdapter<TreeNames> {
       adjustImportsOptions: this.makeAdjustImportOptions(false),
     });
 
+    const compilerPath = resolveSync(this.templateCompilerPath(), { basedir: this.root });
+    const compilerChecksum = crypto.createHash('md5').update(readFileSync(compilerPath, 'utf-8')).digest('hex');
     // It's ok that this isn't a fully configured template compiler. We're only
     // using it to parse component snippets out of rules.
     resolver.astTransformer(
       new NodeTemplateCompiler({
-        compilerPath: resolveSync(this.templateCompilerPath(), { basedir: this.root }),
+        compilerPath,
+        compilerChecksum,
+
         EmberENV: {},
         plugins: {},
       })

packages/compat/src/v1-addon.ts

@@ -1,7 +1,8 @@
 import { Memoize } from 'typescript-memoize';
 import { dirname, isAbsolute, join, relative } from 'path';
 import { sync as pkgUpSync } from 'pkg-up';
-import { existsSync, pathExistsSync } from 'fs-extra';
+import { existsSync, pathExistsSync, readFileSync } from 'fs-extra';
+import crypto from 'crypto';
 import buildFunnel, { Options as FunnelOptions } from 'broccoli-funnel';
 import { UnwatchedDir, WatchedDir } from 'broccoli-source';
 import RewritePackageJSON from './rewrite-package-json';
@@ -132,8 +133,10 @@ export default class V1Addon {
         // our macros don't run here in stage1
         options.plugins.ast = options.plugins.ast.filter((p: any) => !isEmbroiderMacrosPlugin(p));
         if (options.plugins.ast.length > 0) {
+          const compilerChecksum = crypto.createHash('md5').update(readFileSync(options.templateCompilerPath, 'utf-8')).digest('hex');
           return new NodeTemplateCompiler({
             compilerPath: options.templateCompilerPath,
+            compilerChecksum,
             EmberENV: {},
             plugins: options.plugins,
             resolver: this.templateResolver(),

packages/compat/tests/audit.test.ts

@@ -24,6 +24,7 @@ describe('audit', function () {
     let templateCompiler = templateCompilerModule(
       {
         compilerPath: emberTemplateCompilerPath(),
+        compilerChecksum: `mock-compiler-checksum${Math.random()}`,
         EmberENV: {},
         plugins: { ast: [] },
         resolver: new CompatResolver({

packages/compat/tests/resolver.test.ts

@@ -10,6 +10,7 @@ import Resolver from '../src/resolver';
 import { PackageRules } from '../src';
 
 const compilerPath = emberTemplateCompilerPath();
+const compilerChecksum = `mock-compiler-checksum${Math.random()}`;
 
 describe('compat-resolver', function () {
   let appDir: string;
@@ -45,7 +46,7 @@ describe('compat-resolver', function () {
         otherOptions.adjustImportsImports
       ),
     });
-    let compiler = new NodeTemplateCompiler({ compilerPath, resolver, EmberENV, plugins });
+    let compiler = new NodeTemplateCompiler({ compilerPath, compilerChecksum, resolver, EmberENV, plugins });
     return function (relativePath: string, contents: string) {
       let moduleName = givenFile(relativePath);
       let { dependencies } = compiler.precompile(moduleName, contents);

packages/core/src/app.ts

@@ -10,7 +10,7 @@ import { OutputPaths } from './wait-for-trees';
 import { compile } from './js-handlebars';
 import resolve from 'resolve';
 import { Memoize } from 'typescript-memoize';
-import { copySync, ensureDirSync, readJSONSync, statSync, unlinkSync, writeFileSync } from 'fs-extra';
+import { copySync, ensureDirSync, readJSONSync, statSync, unlinkSync, writeFileSync, readFileSync } from 'fs-extra';
 import { dirname, join, resolve as resolvePath, sep } from 'path';
 import { debug, warn } from './messages';
 import sortBy from 'lodash/sortBy';
@@ -37,6 +37,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import type { Params as InlineBabelParams } from './babel-plugin-inline-hbs-node';
 import { PortableHint } from './portable';
 import escapeRegExp from 'escape-string-regexp';
+import crypto from 'crypto';
 
 export type EmberENV = unknown;
 
@@ -898,9 +899,13 @@ export class AppBuilder<TreeNames> {
       plugins.ast.push(macroPlugin);
     }
 
+    const compilerPath = resolve.sync(this.adapter.templateCompilerPath(), { basedir: this.root });
+    const compilerChecksum = crypto.createHash('md5').update(readFileSync(compilerPath, 'utf-8')).digest('hex');
+
     return {
       plugins,
-      compilerPath: resolve.sync(this.adapter.templateCompilerPath(), { basedir: this.root }),
+      compilerPath,
+      compilerChecksum,
       resolver: this.adapter.templateResolver(),
       EmberENV: config,
     };

packages/core/src/template-compiler-node.ts

@@ -9,6 +9,7 @@ import adjustImportsPlugin from './babel-plugin-adjust-imports';
 
 export interface NodeTemplateCompilerParams {
   compilerPath: string;
+  compilerChecksum: string;
   resolver?: Resolver;
   EmberENV: unknown;
   plugins: Plugins;

packages/core/tests/inline-hbs.test.ts

@@ -82,6 +82,7 @@ describe('inline-hbs', () => {
       babelConfig() {
         let templateCompiler: NodeTemplateCompilerParams = {
           compilerPath: emberTemplateCompilerPath(),
+          compilerChecksum: `mock-compiler-checksum${Math.random()}`,
           EmberENV: {},
           plugins: {
             ast: [sampleTransform],
@@ -105,6 +106,7 @@ describe('inline-hbs', () => {
       babelConfig() {
         let templateCompiler: NodeTemplateCompilerParams = {
           compilerPath: emberTemplateCompilerPath(),
+          compilerChecksum: `mock-compiler-checksum${Math.random()}`,
           EmberENV: {},
           plugins: {
             ast: [],
@@ -128,6 +130,7 @@ describe('inline-hbs', () => {
       babelConfig(major: number) {
         let templateCompiler: NodeTemplateCompilerParams = {
           compilerPath: emberTemplateCompilerPath(),
+          compilerChecksum: `mock-compiler-checksum${Math.random()}`,
           EmberENV: {},
           plugins: {
             ast: [],

packages/macros/tests/glimmer/helpers.ts

@@ -2,7 +2,11 @@ import { NodeTemplateCompiler } from '@embroider/core';
 import { emberTemplateCompilerPath, Project } from '@embroider/test-support';
 import { MacrosConfig } from '../../src/node';
 import { join } from 'path';
+import crypto from 'crypto';
+import { readFileSync } from 'fs-extra';
+
 const compilerPath = emberTemplateCompilerPath();
+const compilerChecksum = crypto.createHash('md5').update(readFileSync(compilerPath, 'utf-8')).digest('hex');
 
 export { Project };
 
@@ -19,6 +23,7 @@ export function templateTests(createTests: CreateTestsWithConfig | CreateTests)
   setConfig(config);
   let compiler = new NodeTemplateCompiler({
     compilerPath,
+    compilerChecksum,
     EmberENV: {},
     plugins: {
       ast: plugins,