ember-paper
ember-paper copied to clipboard
miguelcobain
move components to pods structure
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.
Thanks!
Can you chance import paths to
import layout from './template';
?
Sorry, I forgot about that part. Do you want a relative path of the main components (like paper-dialog) or for all the components?
I was thinking for all components. This way you can move them anywhere and it would still work.
My bad, I forgot removing components folder from inside of templates folder :sweat_smile:
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.
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.