Merge pull request #1046 from typed-ember/warn-on-js-ts-collision

Issue a warning if we detect a .js/.ts file collision

Author: jamescdavis

package.json

@@ -43,6 +43,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.6.0",
     "@babel/plugin-transform-typescript": "~7.8.0",
     "ansi-to-html": "^0.6.6",
+    "broccoli-stew": "^3.0.0",
     "debug": "^4.0.0",
     "ember-cli-babel-plugin-helpers": "^1.0.0",
     "execa": "^3.0.0",
@@ -79,6 +80,8 @@
     "@typescript-eslint/eslint-plugin": "2.17.0",
     "@typescript-eslint/parser": "2.17.0",
     "broccoli-asset-rev": "3.0.0",
+    "broccoli-node-api": "^1.7.0",
+    "broccoli-plugin": "^4.0.1",
     "capture-console": "1.0.1",
     "co": "4.6.0",
     "commitlint-azure-pipelines-cli": "1.0.3",

tests/dummy/app/shadowed-file.ts

@@ -3,6 +3,7 @@ import { Remote } from 'stagehand';
 import { connect } from 'stagehand/lib/adapters/child-process';
 import { hasPlugin, addPlugin, AddPluginOptions } from 'ember-cli-babel-plugin-helpers';
 import Addon from 'ember-cli/lib/models/addon';
+import PreprocessRegistry from 'ember-cli-preprocess-registry';
 import { addon } from './lib/utilities/ember-cli-entities';
 import fork from './lib/utilities/fork';
 import TypecheckWorker from './lib/typechecking/worker';
@@ -18,6 +19,7 @@ export default addon({
 
   included() {
     this._super.included.apply(this, arguments);
+
     this._checkDevelopment();
     this._checkAddonAppFiles();
     this._checkBabelVersion();
@@ -69,9 +71,16 @@ export default addon({
     }
   },
 
-  setupPreprocessorRegistry(type) {
+  setupPreprocessorRegistry(type, registry) {
     if (type !== 'parent') return;
 
+    // If we're acting on behalf of the root app, issue a warning if we detect
+    // a situation where a .js file from an addon has the same name as a .ts
+    // file in the app, as which file wins is nondeterministic.
+    if (this.parent === this.project) {
+      this._registerCollisionDetectionPreprocessor(registry);
+    }
+
     // Normally this is the sort of logic that would live in `included()`, but
     // ember-cli-babel reads the configured extensions when setting up the
     // preprocessor registry, so we need to beat it to the punch.
@@ -97,6 +106,47 @@ export default addon({
     return !['in-repo-a', 'in-repo-b'].includes(addon.name);
   },
 
+  _registerCollisionDetectionPreprocessor(registry: PreprocessRegistry) {
+    registry.add('js', {
+      name: 'ember-cli-typescript-collision-check',
+      toTree: (input, path) => {
+        if (path !== '/') return input;
+
+        let addon = this;
+        let checked = false;
+        let stew = require('broccoli-stew') as typeof import('broccoli-stew');
+
+        return stew.afterBuild(input, function() {
+          if (!checked) {
+            checked = true;
+            addon._checkForFileCollisions(this.inputPaths[0]);
+          }
+        });
+      },
+    });
+  },
+
+  _checkForFileCollisions(directory: string) {
+    let walkSync = require('walk-sync') as typeof import('walk-sync');
+    let files = new Set(walkSync(directory, ['**/*.{js,ts}']));
+
+    let collisions = [];
+    for (let file of files) {
+      if (file.endsWith('.js') && files.has(file.replace(/\.js$/, '.ts'))) {
+        collisions.push(file.replace(/\.js$/, '.{js,ts}'));
+      }
+    }
+
+    if (collisions.length) {
+      this.ui.writeWarnLine(
+        'Detected collisions between .js and .ts files of the same name. ' +
+          'This can result in nondeterministic build output; ' +
+          'see https://git.io/JvIwo for more information.\n  - ' +
+          collisions.join('\n  - ')
+      );
+    }
+  },
+
   _checkBabelVersion() {
     let babel = this.parent.addons.find(addon => addon.name === 'ember-cli-babel');
     let version = babel && babel.pkg.version;

tests/dummy/lib/in-repo-a/app/shadowed-file.ts

@@ -101,6 +101,33 @@ describe('Acceptance: build', function() {
 
     await server.waitForBuild();
   });
+
+  it('emits a warning when .js and .ts files conflict in the app/ tree', async () => {
+    // Set up an in-repo addon
+    app.updatePackageJSON(pkg => {
+      pkg['ember-addon'].paths.push('lib/in-repo-addon');
+    });
+
+    app.writeFile('lib/in-repo-addon/index.js', 'module.exports = { name: "in-repo-addon" };');
+    app.writeFile(
+      'lib/in-repo-addon/package.json',
+      JSON.stringify({
+        name: 'in-repo-addon',
+        keywords: ['ember-addon'],
+      })
+    );
+
+    // Have it export a .js app file and attempt to overwrite it in the host with a .ts file
+    app.writeFile('lib/in-repo-addon/app/foo.js', '// addon');
+    app.writeFile('app/foo.ts', '// app');
+
+    let output = await app.build();
+
+    expect(output.all).to.include('skeleton-app/foo.{js,ts}');
+    expect(output.all).to.include(
+      'WARNING: Detected collisions between .js and .ts files of the same name.'
+    );
+  });
 });
 
 function isExpressionStatement(stmt: Statement | ModuleDeclaration): stmt is ExpressionStatement {

tests/dummy/lib/in-repo-b/app/shadowed-file.js

@@ -44,7 +44,7 @@ export default class SkeletonApp {
     ));
   }
 
-  updatePackageJSON(callback: (arg: any) => string) {
+  updatePackageJSON(callback: (arg: any) => any) {
     let pkgPath = `${this.root}/package.json`;
     let pkg = fs.readJSONSync(pkgPath);
     fs.writeJSONSync(pkgPath, callback(pkg) || pkg, { spaces: 2 });

ts/addon.ts

@@ -0,0 +1,6 @@
+declare module 'broccoli-stew' {
+  import { Node as BroccoliNode } from 'broccoli-node-api';
+  import Plugin from 'broccoli-plugin';
+
+  export function afterBuild(node: BroccoliNode, callback: (this: Plugin) => void): BroccoliNode;
+}

ts/tests/acceptance/build-test.ts

@@ -0,0 +1,17 @@
+declare module 'ember-cli-preprocess-registry' {
+  import { Node as BroccoliNode } from 'broccoli-node-api';
+
+  export = PreprocessRegistry;
+
+  class PreprocessRegistry {
+    add(type: string, plugin: PreprocessPlugin): void;
+    load(type: string): Array<PreprocessPlugin>;
+    extensionsForType(type: string): Array<string>;
+    remove(type: string, plugin: PreprocessPlugin): void;
+  }
+
+  interface PreprocessPlugin {
+    name: string;
+    toTree(input: BroccoliNode, path: string): BroccoliNode;
+  }
+}

ts/tests/helpers/skeleton-app.ts

@@ -13,6 +13,7 @@ declare module 'ember-cli/lib/models/addon' {
   import Project from 'ember-cli/lib/models/project';
   import Command from 'ember-cli/lib/models/command';
   import EmberApp from 'ember-cli/lib/broccoli/ember-app';
+  import PreprocessRegistry from 'ember-cli-preprocess-registry';
 
   export default class Addon extends CoreObject {
     name: string;
@@ -37,7 +38,7 @@ declare module 'ember-cli/lib/models/addon' {
     isDevelopingAddon(): boolean;
     serverMiddleware(options: { app: Application }): void | Promise<void>;
     testemMiddleware(app: Application): void;
-    setupPreprocessorRegistry(type: 'self' | 'parent', registry: unknown): void;
+    setupPreprocessorRegistry(type: 'self' | 'parent', registry: PreprocessRegistry): void;
   }
 }