Opt out moving component templates used as partials or in layoutName

Author: patocallaghan

lib/migrator.js

@@ -1,17 +1,8 @@
-var fse = require("fs-extra");
-var path = require('path');
-var glob = require("glob");
-
-function moveFile(sourceFilePath, targetFilePath) {
-  let targetFileDirectory = path.dirname(targetFilePath);
-  if (!fse.existsSync(targetFileDirectory)) {
-    console.info(`📁 Creating ${targetFileDirectory}`);
-    fse.mkdirSync(targetFileDirectory, { recursive: true })
-  }
-
-  console.info(`👍 Moving ${sourceFilePath} -> ${targetFilePath}`);
-  fse.renameSync(sourceFilePath, targetFilePath);
-}
+const fse = require("fs-extra");
+const path = require('path');
+const glob = require("glob");
+const { getLayoutNameTemplates, getPartialTemplates } = require('./utils/templates')
+const { moveFile, removeDirs } = require('./utils/file')
 
 module.exports = class Migrator {
   constructor(options) {
@@ -20,15 +11,48 @@ module.exports = class Migrator {
 
   async execute() {
     let sourceComponentTemplatesPath = path.join(this.options.projectRoot, 'app/templates/components');
-    var sourceTemplateFilePaths = glob.sync(`${sourceComponentTemplatesPath}/**/*.hbs`);
+    var sourceComponentTemplateFilePaths = glob.sync(`${sourceComponentTemplatesPath}/**/*.hbs`);
+
+    let sourceComponentPath = path.join(this.options.projectRoot, 'app/components');
+    let sourceComponentFilePaths = glob.sync(`${sourceComponentPath}/**/*.js`);
+    let templatesWithLayoutName = getLayoutNameTemplates(sourceComponentFilePaths);
+    if (templatesWithLayoutName.length) {
+      sourceComponentTemplateFilePaths = sourceComponentTemplateFilePaths.filter(sourceTemplateFilePath => {
+        let sourceTemplatePathInApp = sourceTemplateFilePath.slice(this.options.projectRoot.length); // '/app/templates/components/nested1/nested-component.hbs'
+        let templatePath = sourceTemplatePathInApp.slice('app/templates/'.length); // '/nested1/nested-component.hbs'
+        return !templatesWithLayoutName.includes(templatePath.slice(1).replace('.hbs', ''));
+      });
+    }
 
-    sourceTemplateFilePaths.forEach(sourceTemplateFilePath => {
+    let sourceTemplatesPath = path.join(this.options.projectRoot, 'app/templates');
+    var sourceTemplateFilePaths = glob.sync(`${sourceTemplatesPath}/**/*.hbs`);
+    let templatesInPartials = getPartialTemplates(sourceTemplateFilePaths);
+    if (templatesInPartials.length) {
+      sourceComponentTemplateFilePaths = sourceComponentTemplateFilePaths.filter(sourceTemplateFilePath => {
+        let sourceTemplatePathInApp = sourceTemplateFilePath.slice(this.options.projectRoot.length); // '/app/templates/components/nested1/nested-component.hbs'
+        if (/\/\-[\w\-]+\.hbs/.test(sourceTemplatePathInApp)) {
+          sourceTemplatePathInApp = sourceTemplatePathInApp.replace('/-', '/');
+        }
+        let templatePath = sourceTemplatePathInApp.slice('app/templates/'.length); // '/nested1/nested-component.hbs'
+        return !templatesInPartials.includes(templatePath.slice(1).replace('.hbs', ''));
+      });
+    }
+
+    sourceComponentTemplateFilePaths.forEach(sourceTemplateFilePath => {
       let sourceTemplatePathInApp = sourceTemplateFilePath.slice(this.options.projectRoot.length); // '/app/templates/components/nested1/nested-component.hbs'
       let templatePath = sourceTemplatePathInApp.slice('app/templates/components/'.length); // '/nested1/nested-component.hbs'
       let targetTemplateFilePath = path.join(this.options.projectRoot, 'app/components', templatePath); // '[APP_PATH]/app/components/nested1/nested-component.hbs'
       moveFile(sourceTemplateFilePath, targetTemplateFilePath);
     });
 
-    await fse.remove(sourceComponentTemplatesPath);
+    templatesWithLayoutName.sort().forEach(template => {
+      console.info(`❌ Did not move '${template}' due to usage as "layoutName" in a component`);
+    });
+    templatesInPartials.sort().forEach(template => {
+      console.info(`❌ Did not move '${template}' due to usage as a "partial"`);
+    });
+
+    let onlyRemoveEmptyDirs = Boolean(templatesWithLayoutName.length);
+    await removeDirs(sourceComponentTemplatesPath, onlyRemoveEmptyDirs);
   }
 }

lib/utils/file.js

@@ -0,0 +1,27 @@
+const fse = require("fs-extra");
+const path = require('path');
+const removeDirectories = require('remove-empty-directories');
+
+function moveFile(sourceFilePath, targetFilePath) {
+  let targetFileDirectory = path.dirname(targetFilePath);
+  if (!fse.existsSync(targetFileDirectory)) {
+    console.info(`📁 Creating ${targetFileDirectory}`);
+    fse.mkdirSync(targetFileDirectory, { recursive: true })
+  }
+
+  console.info(`👍 Moving ${sourceFilePath} -> ${targetFilePath}`);
+  fse.renameSync(sourceFilePath, targetFilePath);
+}
+
+async function removeDirs(dirPath, removeOnlyEmptyDirectories = false) {
+  if (removeOnlyEmptyDirectories) {
+    removeDirectories(dirPath);
+  } else {
+    await fse.remove(dirPath)
+  }
+}
+
+module.exports = {
+  moveFile,
+  removeDirs
+}

lib/utils/js-parser.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const babylon = require('@babel/parser');
+
+// These are the options that were the default of the Babel5 parse function
+// see https://github.com/babel/babel/blob/5.x/packages/babel/src/api/node.js#L81
+const options = {
+  sourceType: 'module',
+  allowHashBang: true,
+  ecmaVersion: Infinity,
+  allowImportExportEverywhere: true,
+  allowReturnOutsideFunction: true,
+  startLine: 1,
+  tokens: true,
+  plugins: [
+    'asyncGenerators',
+    'classProperties',
+    'doExpressions',
+    'exportExtensions',
+    'functionBind',
+    'functionSent',
+    'objectRestSpread',
+    'dynamicImport',
+    'nullishCoalescingOperator',
+    'optionalChaining',
+    'decorators-legacy'
+  ],
+};
+
+module.exports = {
+  parse(code) {
+    return babylon.parse(code, options);
+  },
+};

lib/utils/templates.js

@@ -0,0 +1,63 @@
+const { readFileSync } = require('fs');
+const JSParser = require('./js-parser');
+const jsTraverse = require('@babel/traverse').default;
+const { parse, traverse } = require('ember-template-recast');
+
+function getLayoutNameTemplates(files) {
+  console.info(`Checking if any component templates are used as templates of other components using \`layoutName\``);
+  let names = files.map(file => {
+    let content = readFileSync(file, 'utf8');
+    return fileInLayoutName(content);
+  }).filter(Boolean);
+  return Array.from(new Set(names));
+}
+
+function fileInLayoutName(content) {
+  let ast = JSParser.parse(content);
+  let layoutName;
+  jsTraverse(ast, {
+    ClassProperty: function(path) {
+      if (path.node.key.name === 'layoutName') {
+        layoutName = path.node.key.value.value;
+        path.stop();
+      }
+    },
+    Property: function(path) {
+      if (path.node.key.name === 'layoutName') {
+        layoutName = path.node.value.value;
+        path.stop();
+      }
+    },
+  });
+  return layoutName;
+}
+
+function getPartialTemplates(files) {
+  console.info(`Checking if any component templates are used as partials`);
+  let names = files.reduce((acc, file) => {
+    let content = readFileSync(file, 'utf8');
+    let partials = filesInPartials(content);
+    return partials.length ? acc.concat(partials) : acc;
+  }, [])
+  .filter(Boolean)
+  .filter(path => path.startsWith('components/'))
+  return Array.from(new Set(names));
+}
+
+function filesInPartials(content) {
+  let partials = [];
+  const ast = parse(content);
+  traverse(ast, {
+    MustacheStatement(node) {
+      if (node.path.original === 'partial') {
+        partials.push(node.params[0].value);
+      }
+    },
+  });
+  return partials;
+}
+
+module.exports = {
+  getLayoutNameTemplates,
+  getPartialTemplates
+}

package.json

@@ -18,9 +18,17 @@
     "power-assert": "^1.3.1"
   },
   "dependencies": {
+    "@babel/core": "^7.7.5",
+    "@babel/parser": "^7.7.5",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-decorators": "^7.7.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
+    "@babel/traverse": "^7.7.4",
+    "ember-template-recast": "^3.3.0",
     "fs-extra": "^7.0.1",
     "glob": "^7.1.4",
-    "nopt": "^4.0.1"
+    "nopt": "^4.0.1",
+    "remove-empty-directories": "^0.0.1"
   },
   "repository": {
     "type": "git",

test/fixtures/classic-app/input.js

@@ -8,6 +8,10 @@ module.exports = {
         nested2: {
           'super-nested-component.js': '// nested1/nested2/super-nested-component.js',
         }
+      },
+      'layout-name': {
+        'has-layout-name.js': `// top-level-component.js
+        Component.extend({ layoutName: "components/layout-name/layout-name-template" });`,
       }
     },
     templates: {
@@ -19,6 +23,14 @@ module.exports = {
           nested2: {
             'super-nested-component.hbs': '{{!-- nested1/nested2/super-nested-component.hbs --}}'
           }
+        },
+        'layout-name': {
+          'layout-name-template.hbs': '{{!-- layout-name-template.hbs --}}',
+        },
+        'partials': {
+          'partials-template.hbs': '{{!-- partials-template.hbs --}}',
+          'with-partial.hbs': `{{!-- with-partial.hbs --}}
+          {{partial 'components/partials/partials-template'}}`,
         }
       }
     }

test/fixtures/classic-app/output.js

@@ -11,10 +11,26 @@ module.exports = {
           'super-nested-component.hbs': '{{!-- nested1/nested2/super-nested-component.hbs --}}',
           'super-nested-component.js': '// nested1/nested2/super-nested-component.js'
         }
+      },
+      'layout-name': {
+        'has-layout-name.js': `// top-level-component.js
+        Component.extend({ layoutName: "components/layout-name/layout-name-template" });`,
+      },
+      'partials': {
+        'with-partial.hbs': `{{!-- with-partial.hbs --}}
+          {{partial 'components/partials/partials-template'}}`,
       }
     },
     templates: {
       'application.hbs': '{{outlet}}',
+      components: {
+        'layout-name': {
+          'layout-name-template.hbs': '{{!-- layout-name-template.hbs --}}',
+        },
+        'partials': {
+          'partials-template.hbs': '{{!-- partials-template.hbs --}}'
+        }
+      }
     }
   },
 };