search

ijlee2 / ember-codemod-pod-to-octane

Codemod to un-pod Ember apps, addons, and engines
MIT License
17 stars 2 forks source link

Move template.hbs alongside route.js or component.js #68

Open apellerano-pw opened 2 days ago

apellerano-pw commented 2 days ago

Ember's component blueprint will nest components under the app/components/ directory. However it's also valid Ember to place components directly in a pod folder under the app/ root.

Both of these are valid components

app/
  components/
    my-pod-b/
      component.js
      template.hbs
  my-pod-a/
    component.js
    template.hbs

Problem is route templates pod similarly to my-pod-a, and if all you're looking at is template.hbs you have no way to know if it's a route or a component template. You need the broader context of there being a route.js or component.js present.

If you have components stored like my-pod-a and run this codemod, the map-route-template will move the component's template.hbs into the app/templates/ folder, and map-component-classes will never move the component.js. This breaks the component.

I don't see a way to fix this with the current architecture. I think there needs to be a more broad map-route and map-component concept which, upon spotting a route.js or component.js, also look for the sibling template.hbs and move it appropriately.

apellerano-pw commented 2 days ago

One more complication is that a lone template.hbs as in

app/
  my-pod-c/
    template.hbs

is a route template, but the absence of sibling component.js is the only way to know that.

Maybe that speaks to another architectural approach where there's a generic map-template replacing map-component-template and map-route-template, and only that mapper peeks at siblings to figure out what kind of template it is

ijlee2 commented 2 days ago

I didn't know that a component class could live outside the components folder, and appreciate your documenting an edge case (maybe it's an unintended bug in ember-cli or ember-source?).

In general, the codemods that I write target the 80% case, and I leave it up to end-developers to handle the other 20% (e.g. things specific to their project). Since the command ember g component creates component classes in components for podded projects and Ember CLI documents so in cli.emberjs.com, I think it's okay for the codemod to not handle this edge case.

# Copied from cli.emberjs.com
app
├── components
|   └── tags
|       ├── component.js
|       └── template.hbs
├── post      
|   ├── controller.js
|   ├── model.js
|   ├── route.js
|   └── template.hbs
├── app.js
├── index.html
├── resolver.js
└── router.js