feat: Invalidate handlebar template caches when dependent blocks change.

Author: chriseppstein

packages/@css-blocks/ember-cli/index.js

@@ -102,9 +102,9 @@ module.exports = {
     registry.add("htmlbars-ast-plugin", {
       name: "css-blocks-htmlbars",
       plugin: this.astPlugin.bind(this),
-      // cacheKey: () => {
-      //   return this.transports.get(this.parent).mapping;
-      // }
+      dependencyInvalidation: true,
+      cacheKey: () => this.optionsForCacheInvalidation(),
+      baseDir: () => __dirname,
     });
 
     // For Glimmer
@@ -267,9 +267,10 @@ module.exports = {
     options.aliases      || (options.aliases = {});
     options.analysisOpts || (options.analysisOpts = {});
     options.optimization || (options.optimization = {});
-    options.parserOpts   || (options.parserOpts = {
-      importer: new NodeJsImporter(options.aliases),
-    });
+    options.parserOpts   || (options.parserOpts = {});
+
+    // Use the node importer by default.
+    options.parserOpts.importer = options.parserOpts.importer || new NodeJsImporter(options.aliases);
 
     // Optimization is always disabled for now, until we get project-wide analysis working.
     options.optimization.enabled = false;
@@ -292,6 +293,27 @@ module.exports = {
     return options;
   },
 
+  optionsForCacheInvalidation() {
+    let aliases = this._options.aliases;
+    let analysisOpts = this._options.analysisOpts;
+    let optimization = this._options.optimization;
+    let parserOpts = {};
+    Object.assign(parserOpts, this._options.parserOpts);
+    let constructor = parserOpts.importer && parserOpts.importer.constructor;
+    if (constructor) {
+      parserOpts.importer = constructor.name;
+    } else {
+      delete parserOpts.importer;
+    }
+
+    return {
+      aliases,
+      analysisOpts,
+      optimization,
+      parserOpts
+    };
+  },
+
   genTreeWrapper(env, options, prev = NOOP) {
     const { isEmber, app, parent, rootDir, moduleConfig, modulePrefix } = env;
 

packages/@css-blocks/ember-cli/package.json

@@ -30,15 +30,16 @@
     "broccoli-merge-trees": "^3.0.2",
     "debug": "^4.1.1",
     "ember-cli-babel": "7.11.0",
-    "ember-cli-htmlbars": "^3.0.0",
     "fs-extra": "^8.0.0",
     "symlink-or-copy": "^1.2.0"
   },
   "devDependencies": {
+    "@ember/jquery": "^0.6.1",
     "broccoli-asset-rev": "^3.0.0",
     "ember-ajax": "^5.0.0",
     "ember-cli": "~3.11",
     "ember-cli-eslint": "^5.1.0",
+    "ember-cli-htmlbars": "^3.1.0",
     "ember-cli-htmlbars-inline-precompile": "^2.1.0",
     "ember-cli-inject-live-reload": "^2.0.1",
     "ember-cli-qunit": "^4.3.2",

packages/@css-blocks/glimmer/src/Rewriter.ts

@@ -26,14 +26,34 @@ const DEBUG = debugGenerator("css-blocks:glimmer:rewriter");
 
 export type GlimmerStyleMapping = StyleMapping<TEMPLATE_TYPE>;
 
-export class GlimmerRewriter implements ASTPlugin {
+interface ASTPluginWithDeps extends ASTPlugin {
+  /**
+   * If this method exists, it is called with the relative path to the current
+   * file just before processing starts. Use this method to reset the
+   * dependency tracking state associated with the file.
+   */
+  resetDependencies?(relativePath: string): void;
+  /**
+   * This method is called just as the template finishes being processed.
+   *
+   * @param relativePath A relative path to the file that may have dependencies.
+   * @return paths to files that are a dependency for the given
+   * file. Any relative paths returned by this method are taken to be relative
+   * to the file that was processed.
+   */
+  dependencies(relativePath: string): string[];
+}
+
+export class GlimmerRewriter implements ASTPluginWithDeps {
   template: ResolvedFile;
   analysis: GlimmerAnalysis;
   elementCount: number;
   syntax: Syntax;
   block: Block;
   styleMapping: GlimmerStyleMapping;
   cssBlocksOpts: CSSBlocksConfiguration;
+  visitor: NodeVisitor;
+  visitors: NodeVisitor;
 
   private elementAnalyzer: ElementAnalyzer;
 
@@ -51,6 +71,16 @@ export class GlimmerRewriter implements ASTPlugin {
     this.cssBlocksOpts = resolveConfiguration(cssBlocksOpts);
     this.elementCount  = 0;
     this.elementAnalyzer = new ElementAnalyzer(this.analysis, this.cssBlocksOpts);
+    if (this.block) {
+      this.visitor = {
+        ElementNode: this.ElementNode.bind(this),
+        MustacheStatement: this.BuiltinStatement.bind(this),
+        BlockStatement: this.BuiltinStatement.bind(this),
+      };
+    } else {
+      this.visitor = {};
+    }
+    this.visitors = this.visitor;
   }
 
   debug(message: string, ...args: unknown[]): void {
@@ -59,15 +89,30 @@ export class GlimmerRewriter implements ASTPlugin {
 
   get name(): string { return this.block ? "css-blocks-glimmer-rewriter" : "css-blocks-noop"; }
 
-  // `visitors` is used by Ember < 3.0.0. `visitor` is used by Glimmer and Ember >= 3.0.0.
-  get visitor(): NodeVisitor { return this.visitors; }
-  get visitors(): NodeVisitor {
-    if (!this.block) { return {}; }
-    return {
-      ElementNode: this.ElementNode.bind(this),
-      MustacheStatement: this.BuiltinStatement.bind(this),
-      BlockStatement: this.BuiltinStatement.bind(this),
-    };
+  /**
+   * @param _relativePath Unused in this implementation.
+   * @returns Files this template file depends on.
+   */
+  dependencies(_relativePath: string): Array<string> {
+    this.debug("Getting dependencies for", _relativePath);
+    let deps: Set<string> = new Set();
+
+    // let importer = this.cssBlocksOpts.importer;
+    for (let block of this.analysis.transitiveBlockDependencies()) {
+      // TODO: Figure out why the importer is returning null here.
+      // let blockFile = importer.filesystemPath(block.identifier, this.cssBlocksOpts);
+      let blockFile = block.identifier;
+      this.debug("block file path is", blockFile);
+      if (blockFile) {
+        deps.add(blockFile);
+      }
+      // These dependencies happen when additional files get involved via preprocessors.
+      for (let additionalDep of block.dependencies) {
+        deps.add(additionalDep);
+      }
+    }
+    let depArray = new Array(...deps);
+    return depArray;
   }
 
   BuiltinStatement(node: AST.MustacheStatement | AST.BlockStatement) {