fix: Fix dev build performance issue.

This fix makes the block GUID stable across build processes so that cached templates remain valid.

Closes #357.

Author: chriseppstein

packages/@css-blocks/broccoli/src/Analyze.ts

@@ -1,15 +1,16 @@
 import { Analyzer, BlockCompiler, StyleMapping } from "@css-blocks/core";
 import { TemplateTypes } from "@opticss/template-api";
 import * as debugGenerator from "debug";
-import * as fs from "fs-extra";
+import * as fs from "fs";
 import * as FSTree from "fs-tree-diff";
 import * as glob from "glob";
+import * as minimatch from "minimatch";
 import { OptiCSSOptions, Optimizer, postcss } from "opticss";
 import * as path from "path";
 import * as walkSync from "walk-sync";
 
 import { Transport } from "./Transport";
-import { BroccoliPlugin, symlinkOrCopy } from "./utils";
+import { BroccoliPlugin } from "./utils";
 
 const debug = debugGenerator("css-blocks:broccoli");
 
@@ -32,11 +33,9 @@ export class CSSBlocksAnalyze extends BroccoliPlugin {
   private analyzer: Analyzer<keyof TemplateTypes>;
   private entries: string[];
   private output: string;
-  private root: string;
   private transport: Transport;
   private optimizationOptions: Partial<OptiCSSOptions>;
   private previousInput: FSTree = new FSTree();
-  private previousOutput: FSTree = new FSTree();
 
   /**
    * Initialize this new instance with the app tree, transport, and analysis options.
@@ -55,48 +54,52 @@ export class CSSBlocksAnalyze extends BroccoliPlugin {
     this.output = options.output || "css-blocks.css";
     this.optimizationOptions = options.optimization || {};
     this.analyzer = options.analyzer;
-    this.root = options.root || process.cwd();
     this.transport.css = this.transport.css ? this.transport.css : "";
   }
 
   /**
    * Re-run the broccoli build over supplied inputs.
    */
   async build() {
-    let input = this.inputPaths[0];
+    // We currently rely on the fact that the input path is a source directory
+    // and not a temp directory from a previous build step.
+    // When the input directory is a temp directory, the block guid
+    // becomes unstable across brocolli build processes which can cause
+    // persistent cache incoherence within the templates.
+    let input = path.resolve(this.inputPaths[0]);
     let output = this.outputPath;
     let options = this.analyzer.cssBlocksOptions;
     let blockCompiler = new BlockCompiler(postcss, options);
     let optimizer = new Optimizer(this.optimizationOptions, this.analyzer.optimizationOptions);
 
+    let isBlockFile = minimatch.makeRe("**/*.block.*");
+
     // Test if anything has changed since last time. If not, skip all analysis work.
     let newFsTree = FSTree.fromEntries(walkSync.entries(input));
     let diff = this.previousInput.calculatePatch(newFsTree);
+    this.previousInput = newFsTree;
     if (!diff.length) { return; }
 
-    // Save the current state of our output dir for future diffs.
-    this.previousOutput = FSTree.fromEntries(walkSync.entries(output));
-    FSTree.applyPatch(input, output, this.previousOutput.calculatePatch(newFsTree));
-    this.previousInput = newFsTree;
+    // Get all the operations for files that aren't related to CSS Block files
+    // So they can be performed on the output directory.
+    let nonBlockFileChanges = new Array<FSTree.Operation>();
+    for (let op of diff) {
+      let entry = op[2];
+      if (entry && entry.relativePath.match(isBlockFile)) {
+        continue;
+      }
+      nonBlockFileChanges.push(op);
+    }
+
+    FSTree.applyPatch(input, output, nonBlockFileChanges);
 
     // When no entry points are passed, we treat *every* template as an entry point.
-    this.entries = this.entries.length ? this.entries : glob.sync("**/*.hbs", { cwd: output });
-
-    // The glimmer-analyzer package tries to require() package.json
-    // in the root of the directory it is passed. We pass it our broccoli
-    // tree, so it needs to contain package.json too.
-    // TODO: Ideally this is configurable in glimmer-analyzer. We can
-    //       contribute that option back to the project. However,
-    //       other template integrations may want this available too...
-    let pjsonLink = path.join(output, "package.json");
-    if (!fs.existsSync(pjsonLink)) {
-      symlinkOrCopy(path.join(this.root, "package.json"), pjsonLink);
-    }
+    this.entries = this.entries.length ? this.entries : glob.sync("**/*.hbs", { cwd: input });
 
     // Oh hey look, we're analyzing.
     this.analyzer.reset();
     this.transport.reset();
-    await this.analyzer.analyze(output, this.entries);
+    await this.analyzer.analyze(input, this.entries);
 
     // Compile all Blocks and add them as sources to the Optimizer.
     // TODO: handle a sourcemap from compiling the block file via a preprocessor.
@@ -108,10 +111,14 @@ export class CSSBlocksAnalyze extends BroccoliPlugin {
         let filesystemPath = options.importer.filesystemPath(block.identifier, options);
         let filename = filesystemPath || options.importer.debugIdentifier(block.identifier, options);
 
-        // If this Block has a representation on disk, remove it from our output tree.
-        if (filesystemPath && !!~filesystemPath.indexOf(output)) {
-          debug(`Removing block file ${filesystemPath} from output.`);
-          if (fs.existsSync(filesystemPath)) { fs.removeSync(filesystemPath); }
+        if (filesystemPath && filesystemPath.startsWith(input)) {
+          let relativePath = path.relative(input, filesystemPath);
+          let outputPath = path.resolve(output, relativePath);
+          try {
+            fs.unlinkSync(outputPath);
+          } catch (e) {
+            // ignore
+          }
         }
 
         // Add the compiled Block file to the optimizer.
@@ -123,9 +130,6 @@ export class CSSBlocksAnalyze extends BroccoliPlugin {
       }
     }
 
-    // Save the current state of our output dir for future diffs.
-    this.previousOutput = FSTree.fromEntries(walkSync.entries(output));
-
     // Add each Analysis to the Optimizer.
     this.analyzer.eachAnalysis((a) => optimizer.addAnalysis(a.forOptimizer(options)));
 

packages/@css-blocks/broccoli/test/Analyze.ts

@@ -2,7 +2,6 @@ import { BlockFactory } from "@css-blocks/core";
 import { GlimmerAnalyzer } from "@css-blocks/glimmer";
 import * as assert from "assert";
 import { TempDir, createBuilder, createTempDir } from "broccoli-test-helper";
-import * as fs from "fs";
 import * as FSTree from "fs-tree-diff";
 import * as walkSync from "walk-sync";
 
@@ -80,8 +79,6 @@ describe("Broccoli Analyze Plugin Test", function () {
       });
 
       // Modifications to block files trigger build but result in no output tree changes.
-      // Accidental modification of output directory does not make the plugin explode.
-      fs.unlinkSync(output.path("src/ui/components/Chrisrng/template.hbs"));
       input.write({
         src: {
           ui: {

packages/@css-blocks/core/src/BlockTree/Block.ts

@@ -1,12 +1,14 @@
 import { MultiMap, ObjectDictionary } from "@opticss/util";
 import * as crypto from "crypto";
+import * as debugGenerator from "debug";
 import {
   CompoundSelector,
   ParsedSelector,
   parseSelector,
   postcss,
   postcssSelectorParser as selectorParser,
 } from "opticss";
+import * as process from "process";
 
 import { isAttributeNode, isClassNode } from "../BlockParser";
 import { isRootNode, toAttrToken } from "../BlockParser";
@@ -20,22 +22,24 @@ import { BlockClass } from "./BlockClass";
 import { Inheritable } from "./Inheritable";
 import { Styles } from "./Styles";
 
-// Random seed for `get_guid`. Consistent for life of process.
-const RAND_SEED = Math.floor(Math.random() * 1000);
+const DEBUG = debugGenerator("css-blocks:caching");
 
 /**
- * Generates a 5 digit, process-wide globally unique
- * identifier from a given input identifier. This
- * generated identifier hash will remain consistent
- * for the life of the process that spawned it.
- * @prop  identifier  string  Input Block identifier.
+ * Generates a 5 digit, unique identifier from a given input identifier. This
+ * generated identifier hash will remain consistent for the tuple of (machine,
+ * user, css blocks installation location).
+ * @param  identifier Input Block identifier.
  * @returns This Block's guid hash.
  */
 function gen_guid(identifier: string): string {
-  return crypto.createHash("md5")
-    .update(identifier + RAND_SEED)
+  let hash = crypto.createHash("md5")
+    .update(process.getuid().toString())
+    .update(__filename)
+    .update(identifier)
     .digest("hex")
     .slice(0, 5);
+  DEBUG("guid is %s for %s", hash, identifier);
+  return hash;
 }
 
 export class Block

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

@@ -196,7 +196,15 @@ module.exports = {
     // Analyze all templates and block files from `/src` in Glimmer apps.
     if (parent.trees) {
       let treeName = env.isEmber ? "app" : "src";
-      parent.trees[treeName] = this.genTreeWrapper(env, options)(parent.trees[treeName]);
+      let tree = parent.trees[treeName];
+      if (!env.isEmber) {
+        // Glimmer apps use the glimmer dependency analyzer which expects to find
+        // the package.json file for the project in the tree that also includes the app's
+        // src directory
+        let packageJsonTree = BroccoliFunnel(env.rootDir, {include: ["package.json"]});
+        tree = BroccoliMerge([tree, packageJsonTree]);
+      }
+      parent.trees[treeName] = this.genTreeWrapper(env, options)(tree);
     }
 
   },
@@ -304,7 +312,6 @@ module.exports = {
   },
 
   optionsForCacheInvalidation() {
-    let pid = process.pid; // Because of the per-process randomization of css block names.
     let aliases = this._options.aliases;
     let analysisOpts = this._options.analysisOpts;
     let optimization = this._options.optimization;
@@ -318,7 +325,6 @@ module.exports = {
     }
 
     return {
-      pid,
       aliases,
       analysisOpts,
       optimization,

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

@@ -28,7 +28,7 @@ export class GlimmerAnalyzer extends Analyzer<TEMPLATE_TYPE> {
   constructor(
     blockFactory: BlockFactory,
     analysisOpts: AnalysisOptions,
-    moduleConfig: ResolverConfiguration,
+    moduleConfig?: ResolverConfiguration | undefined,
   ) {
     super(blockFactory, analysisOpts);
     this.blockFactory = blockFactory;

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

@@ -82,6 +82,8 @@ export class Resolver {
    * @return The DependencyAnalyzer, or undefined.
    */
   private dependencyAnalyzerFor(base: string): DependencyAnalyzer | undefined {
+    DEBUG("Base directory for dependency analysis is %s", base);
+
     if (!this.moduleConfig) { return undefined; }
     if (this.depAnalyzers.has(base)) {
       return this.depAnalyzers.get(base)!;