Merge pull request #1 from ember-codemods/master

Get the latest code
ember-codemods · Apr 29, 2020 · e8d3e3a · e8d3e3a
2 parents e92bb50 + 249d462
commit e8d3e3a
Show file tree

Hide file tree

Showing 13 changed files with 494 additions and 32 deletions.
diff --git a/bin/ember-component-template-colocation-migrator b/bin/ember-component-template-colocation-migrator
@@ -14,26 +14,26 @@ let options = {
 let parsed = nopt(options);
 let projectRoot = parsed['project-root'] || process.cwd();
 
-const args = process.argv.slice(2);
+const { argv } = require('yargs');
 
 // Allow passing the flag, -fs (flat) or -ns (nested), to specify component structure
-let newComponentStructure = 'flat';
+const changeToFlatStructure = argv.f && argv.s;
+const changeToNestedStructure = argv.n && argv.s;
 
-if (args.includes('-fs')) {
-  newComponentStructure = 'flat';
+let structure = 'flat';
 
-} else if (args.includes('-ns')) {
-  newComponentStructure = 'nested';
+if (changeToFlatStructure) {
+  structure = 'flat';
+
+} else if (changeToNestedStructure) {
+  structure = 'nested';
 
 }
 
-let migrator = new Migrator({
-  projectRoot,
-  newComponentStructure
-});
+let migrator = new Migrator({ projectRoot, structure });
 
 migrator.execute().then(function() {
   console.log('Codemod finished successfully!');
 }).catch(function(error) {
   console.error(error.stack);
-});
+});
diff --git a/lib/migrator.js b/lib/migrator.js
@@ -6,10 +6,10 @@ const { moveFile, removeDirs } = require('./utils/file')
 
 module.exports = class Migrator {
   constructor(options) {
-    const { projectRoot, newComponentStructure } = options;
+    const { projectRoot, structure } = options;
 
     this.projectRoot = projectRoot;
-    this.newComponentStructure = newComponentStructure;
+    this.structure = structure;
   }
 
   findClassicComponentTemplates() {
@@ -21,7 +21,7 @@ module.exports = class Migrator {
 
   findClassicComponentClasses() {
     const classFolderPath = path.join(this.projectRoot, 'app/components');
-    const classFilePaths = glob.sync(`${classFolderPath}/**/*.js`);
+    const classFilePaths = glob.sync(`${classFolderPath}/**/*.{js,ts}`);
 
     return classFilePaths;
   }
@@ -75,6 +75,15 @@ module.exports = class Migrator {
         // Extract '/app/templates/components/nested1/nested-component.hbs'
         let filePathFromApp = templateFilePath.slice(this.projectRoot.length);
 
+        /*
+          When Ember sees `{{partial "foo"}}`, it will look for the template in
+          two locations:
+
+          - `app/templates/foo.hbs`
+          - `app/templates/-foo.hbs`
+
+          If `filePathFromApp` matches the latter pattern, we remove the hyphen. 
+        */
         if (/\/\-[\w\-]+\.hbs/.test(filePathFromApp)) {
           filePathFromApp = filePathFromApp.replace('/-', '/');
         }
@@ -125,11 +134,19 @@ module.exports = class Migrator {
       moveFile(templateFilePath, newTemplateFilePath);
 
       // Build '[APP_PATH]/app/components/nested1/nested-component/index.js'
-      const classFilePath = path.join(this.projectRoot, 'app/components', `${targetPath}.js`);
+      const classFilePath = {
+        js: path.join(this.projectRoot, 'app/components', `${targetPath}.js`),
+        ts: path.join(this.projectRoot, 'app/components', `${targetPath}.ts`)
+      };
 
-      if (classFilePaths.includes(classFilePath)) {
+      if (classFilePaths.includes(classFilePath.js)) {
         const newClassFilePath = path.join(this.projectRoot, 'app/components', targetPath, 'index.js');
-        moveFile(classFilePath, newClassFilePath);
+        moveFile(classFilePath.js, newClassFilePath);
+
+      } else if (classFilePaths.includes(classFilePath.ts)) {
+        const newClassFilePath = path.join(this.projectRoot, 'app/components', targetPath, 'index.ts');
+        moveFile(classFilePath.ts, newClassFilePath);
+
       }
     });
   }
@@ -149,10 +166,10 @@ module.exports = class Migrator {
     templateFilePaths = this.skipTemplatesUsedAsLayoutName(templateFilePaths);
     templateFilePaths = this.skipTemplatesUsedAsPartial(templateFilePaths);
 
-    if (this.newComponentStructure === 'flat') {
+    if (this.structure === 'flat') {
       this.changeComponentStructureToFlat(templateFilePaths);
 
-    } else if (this.newComponentStructure === 'nested') {
+    } else if (this.structure === 'nested') {
       this.changeComponentStructureToNested(templateFilePaths);
 
     }

diff --git a/package.json b/package.json
@@ -28,7 +28,8 @@
     "fs-extra": "^7.0.1",
     "glob": "^7.1.4",
     "nopt": "^4.0.1",
-    "remove-empty-directories": "^0.0.1"
+    "remove-empty-directories": "^0.0.1",
+    "yargs": "^15.3.1"
   },
   "repository": {
     "type": "git",

diff --git a/...xtures/classic-to-flat/example-1/input.js → ...tures/classic-to-flat/example-js/input.js b/...xtures/classic-to-flat/example-1/input.js → ...tures/classic-to-flat/example-js/input.js
@@ -66,10 +66,15 @@ module.exports = {
 
         // A partial template
         'partials': {
-          'partials-template.hbs': '{{!-- partials-template.hbs --}}',
+          'partial-one-template.hbs': '{{!-- partial-one-template.hbs --}}',
+          'partial-two-template.hbs': '{{!-- partial-two-template.hbs --}}',
+          '-partial-three-template.hbs': '{{!-- partial-three-template.hbs --}}',
+
           'with-partial.hbs': [
             '{{!-- with-partial.hbs --}}',
-            '{{partial "components/partials/partials-template"}}'
+            '{{partial "components/partials/partial-one-template"}}',
+            '{{partial "components/partials/partial-two-template"}}',
+            '{{partial "components/partials/partial-three-template"}}'
           ].join('\n')
         }
       }

diff --git a/...tures/classic-to-flat/example-1/output.js → ...ures/classic-to-flat/example-js/output.js b/...tures/classic-to-flat/example-1/output.js → ...ures/classic-to-flat/example-js/output.js
@@ -44,7 +44,9 @@ module.exports = {
       'partials': {
         'with-partial.hbs': [
           '{{!-- with-partial.hbs --}}',
-          '{{partial "components/partials/partials-template"}}'
+          '{{partial "components/partials/partial-one-template"}}',
+          '{{partial "components/partials/partial-two-template"}}',
+          '{{partial "components/partials/partial-three-template"}}'
         ].join('\n')
       }
     },
@@ -60,7 +62,9 @@ module.exports = {
 
         // A partial template
         'partials': {
-          'partials-template.hbs': '{{!-- partials-template.hbs --}}',
+          'partial-one-template.hbs': '{{!-- partial-one-template.hbs --}}',
+          'partial-two-template.hbs': '{{!-- partial-two-template.hbs --}}',
+          '-partial-three-template.hbs': '{{!-- partial-three-template.hbs --}}'
         }
       }
     }

diff --git a/test/fixtures/classic-to-flat/example-ts/input.js b/test/fixtures/classic-to-flat/example-ts/input.js
@@ -0,0 +1,83 @@
+module.exports = {
+  app: {
+    'app.js': '// app',
+
+    components: {
+      // A standalone component
+      'top-level-component.ts': '// top-level-component.ts',
+
+      // A nested component
+      'parent-component.ts': '// parent-component.ts',
+      'parent-component': {
+        'child-component.ts': '// parent-component/child-component.ts',
+        'child-component': {
+          'grandchild-component.ts': '// parent-component/child-component/grandchild-component.ts'
+        }
+      },
+
+      // Another nested component
+      nested1: {
+        'nested-component.ts': '// nested1/nested-component.ts',
+        nested2: {
+          'super-nested-component.ts': '// nested1/nested2/super-nested-component.ts'
+        }
+      },
+
+      // A component with layoutName
+      'layout-name': {
+        'has-layout-name.ts': [
+          '// top-level-component.ts',
+          'Component.extend({ layoutName: "components/layout-name/layout-name-template" });'
+        ].join('\n')
+      }
+    },
+
+    templates: {
+      'application.hbs': '{{outlet}}',
+
+      components: {
+        // A standalone component
+        'top-level-component.hbs': '{{!-- top-level-component.hbs --}}',
+
+        // A template-only component
+        'template-only-component.hbs': '{{!-- template-only-component.hbs --}}',
+
+        // A nested component
+        'parent-component.hbs': '{{!-- parent-component.hbs --}}',
+        'parent-component': {
+          'child-component.hbs': '{{!-- parent-component/child-component.hbs --}}',
+          'child-component': {
+            'grandchild-component.hbs': '{{!-- parent-component/child-component/grandchild-component.hbs --}}'
+          }
+        },
+
+        // Another nested component
+        nested1: {
+          'nested-component.hbs': '{{!-- nested1/nested-component.hbs --}}',
+          nested2: {
+            'super-nested-component.hbs': '{{!-- nested1/nested2/super-nested-component.hbs --}}'
+          }
+        },
+
+        // A component with layoutName
+        'layout-name': {
+          'layout-name-template.hbs': '{{!-- layout-name-template.hbs --}}'
+        },
+
+        // A partial template
+        'partials': {
+          'partial-one-template.hbs': '{{!-- partial-one-template.hbs --}}',
+          'partial-two-template.hbs': '{{!-- partial-two-template.hbs --}}',
+          '-partial-three-template.hbs': '{{!-- partial-three-template.hbs --}}',
+
+          'with-partial.hbs': [
+            '{{!-- with-partial.hbs --}}',
+            '{{partial "components/partials/partial-one-template"}}',
+            '{{partial "components/partials/partial-two-template"}}',
+            '{{partial "components/partials/partial-three-template"}}'
+          ].join('\n')
+        }
+      }
+    }
+  }
+};
diff --git a/test/fixtures/classic-to-flat/example-ts/output.js b/test/fixtures/classic-to-flat/example-ts/output.js
@@ -0,0 +1,72 @@
+module.exports = {
+  app: {
+    'app.js': '// app',
+
+    components: {
+      // A standalone component
+      'top-level-component.hbs': '{{!-- top-level-component.hbs --}}',
+      'top-level-component.ts': '// top-level-component.ts',
+
+      // A template-only component
+      'template-only-component.hbs': '{{!-- template-only-component.hbs --}}',
+
+      // A nested component
+      'parent-component.hbs': '{{!-- parent-component.hbs --}}',
+      'parent-component.ts': '// parent-component.ts',
+      'parent-component': {
+        'child-component.hbs': '{{!-- parent-component/child-component.hbs --}}',
+        'child-component.ts': '// parent-component/child-component.ts',
+        'child-component': {
+          'grandchild-component.hbs': '{{!-- parent-component/child-component/grandchild-component.hbs --}}',
+          'grandchild-component.ts': '// parent-component/child-component/grandchild-component.ts'
+        }
+      },
+
+      // Another nested component
+      nested1: {
+        'nested-component.hbs': '{{!-- nested1/nested-component.hbs --}}',
+        'nested-component.ts': '// nested1/nested-component.ts',
+        nested2: {
+          'super-nested-component.hbs': '{{!-- nested1/nested2/super-nested-component.hbs --}}',
+          'super-nested-component.ts': '// nested1/nested2/super-nested-component.ts'
+        }
+      },
+
+      // A component with layoutName
+      'layout-name': {
+        'has-layout-name.ts': [
+          '// top-level-component.ts',
+          'Component.extend({ layoutName: "components/layout-name/layout-name-template" });'
+        ].join('\n')
+      },
+
+      // A component with partial
+      'partials': {
+        'with-partial.hbs': [
+          '{{!-- with-partial.hbs --}}',
+          '{{partial "components/partials/partial-one-template"}}',
+          '{{partial "components/partials/partial-two-template"}}',
+          '{{partial "components/partials/partial-three-template"}}'
+        ].join('\n')
+      }
+    },
+
+    templates: {
+      'application.hbs': '{{outlet}}',
+
+      components: {
+        // A component with layoutName
+        'layout-name': {
+          'layout-name-template.hbs': '{{!-- layout-name-template.hbs --}}'
+        },
+
+        // A partial template
+        'partials': {
+          'partial-one-template.hbs': '{{!-- partial-one-template.hbs --}}',
+          'partial-two-template.hbs': '{{!-- partial-two-template.hbs --}}',
+          '-partial-three-template.hbs': '{{!-- partial-three-template.hbs --}}'
+        }
+      }
+    }
+  },
+};
diff --git a/...ures/classic-to-nested/example-1/input.js → ...res/classic-to-nested/example-js/input.js b/...ures/classic-to-nested/example-1/input.js → ...res/classic-to-nested/example-js/input.js
@@ -66,10 +66,15 @@ module.exports = {
 
         // A partial template
         'partials': {
-          'partials-template.hbs': '{{!-- partials-template.hbs --}}',
+          'partial-one-template.hbs': '{{!-- partial-one-template.hbs --}}',
+          'partial-two-template.hbs': '{{!-- partial-two-template.hbs --}}',
+          '-partial-three-template.hbs': '{{!-- partial-three-template.hbs --}}',
+
           'with-partial.hbs': [
             '{{!-- with-partial.hbs --}}',
-            '{{partial "components/partials/partials-template"}}'
+            '{{partial "components/partials/partial-one-template"}}',
+            '{{partial "components/partials/partial-two-template"}}',
+            '{{partial "components/partials/partial-three-template"}}'
           ].join('\n')
         }
       }

diff --git a/...res/classic-to-nested/example-1/output.js → ...es/classic-to-nested/example-js/output.js b/...res/classic-to-nested/example-1/output.js → ...es/classic-to-nested/example-js/output.js
@@ -55,7 +55,9 @@ module.exports = {
         'with-partial': {
           'index.hbs': [
             '{{!-- with-partial.hbs --}}',
-            '{{partial "components/partials/partials-template"}}'
+            '{{partial "components/partials/partial-one-template"}}',
+            '{{partial "components/partials/partial-two-template"}}',
+            '{{partial "components/partials/partial-three-template"}}'
           ].join('\n')
         }
       }
@@ -72,7 +74,9 @@ module.exports = {
 
         // A partial template
         'partials': {
-          'partials-template.hbs': '{{!-- partials-template.hbs --}}',
+          'partial-one-template.hbs': '{{!-- partial-one-template.hbs --}}',
+          'partial-two-template.hbs': '{{!-- partial-two-template.hbs --}}',
+          '-partial-three-template.hbs': '{{!-- partial-three-template.hbs --}}'
         }
       }
     }