move components to pods structure

[miguelcobain]

At the moment, all of our components are at the root level. The idea here is to move all components to use a pods like structure inside the addon folder. Also, ideally moving related components to the same folder.

Here is an example of this migration:

1. Move the files to the appropriate locations:

// js files
addon/components/paper-dialog-actions.js
addon/components/paper-dialog-container.js
addon/components/paper-dialog-content.js
addon/components/paper-dialog-inner.js
addon/components/paper-dialog.js

// hbs files
addon/templates/paper-dialog.hbs

would become

// js files
addon/components/paper-dialog/actions/component.js
addon/components/paper-dialog/container/component.js
addon/components/paper-dialog/content/component.js
addon/components/paper-dialog/inner/component.js
addon/components/paper-dialog/component.js

// hbs files
addon/components/paper-dialog/template.hbs

2. update the re-export paths on app.

For example, paper app/components/paper-dialog.js now contains:

export { default } from 'ember-paper/components/paper-dialog';

but it should be updated to match the new component file location

export { default } from 'ember-paper/components/paper-dialog/component';

The files at app/components/*.js shouldn't be nested in any directory. They should just be updated to point to the new correct internal component path.

3. update the template import path.

Right now, addon/components/paper-dialog.js contains this import:

import layout from '../templates/components/paper-dialog';

however, now our template is right next to the component file! So it should just be updated to:

import layout from './template';

Bonus

ember-paper has an optional feature that allows the user to opt-out of including certain components. This helps to reduze the size of the final build.

All of the logic is in the index.js file. Since the components have moved around, this code needs to be updated. This might be a bit harder and not particularly easy for a beginner, so feel free to PR without this change! Someone will take care of that later.

[MarcoUmpierrez]

Components moved to pod structure in PR #1071

[miguelcobain]

Thanks!

Can you chance import paths to

import layout from './template';

?

[MarcoUmpierrez]

Sorry, I forgot about that part. Do you want a relative path of the main components (like paper-dialog) or for all the components?

[miguelcobain]

I was thinking for all components.
This way you can move them anywhere and it would still work.

[MarcoUmpierrez]

I tried it but half of the tests fail

[miguelcobain]

hmm, they shouldn't fail. What error do they throw?

[MarcoUmpierrez]

My bad, I forgot removing components folder from inside of templates folder 😅

[miguelcobain]

I had an error on the instructions that I edited.

I had

addon/templates/paper-dialog/template.hbs

But it should be

addon/components/paper-dialog/template.hbs

To be clear, component.js and template.hbs must be placed on the same folder, next to each other.

[MarcoUmpierrez]

Yes, I realized it after removing the component folder. Now all the template and component files are together in their respective folders. All the tests are ok.