Tips for staying on top of imports


#1

The “new” way of importing Ember components is cool and all, but the multi-levelness of it is really hard to grasp. Previously the computed decorator was simply Ember.computed, now it’s in @ember/object. Other decorators like alias are nested even further in @ember/object/computed.

Component is in @ember/component but to create helpers you now import { helper } from '@ember/component/helper'. Ember.run.later is now as import { later } from '@ember/runloop', Ember.Route is now all the way in @ember/routing/route.

These are just some examples off the top of my head. Now my intention is not to argue about the module design of Ember, I’m just wanting to adapt. It used to be really easy to remember where everything was as it was simply on the Ember namespace object.

I’m using Atom so not getting much help from my editor to auto-import anything. Is there a plugin for this? Did anyone else feel this pain when migrating, or am I just slow to catch on?


#2

This doesn’t help you much since you’re an Atom user but I had the same difficulty at first so I wrote my own editor plugin to fix it.

Since Atom is JS based I think porting the plugin to Atom should be fairy easy especially since Vim Dictionaries are almost a one-to-one corrolation to JS Objects.


#3

Also the linter-eslint is really helpful.


#4

Yes, definitely make sure your editor is showing you eslint warnings in realtime.

That lets you type the old thing (like Ember.computed) and have your editor instantly tell you what the new equivalent is.


#5

Not 100% sure of this, but even if you don’t move to using Typescript, I believe adding ember-cli-typescript and enabling it to run on JS files will give you some autocompleting for imports and maybe even suggested or auto imports. I believe Atom will support it, but you might need a TS plugin for it (don’t really know, haven’t used Atom). I think you’d need to ensure that allowJs is true and that the include filter includes .js files in addition to .ts.


#6

If you’re using Atom you definitely want to have this plugin installed https://atom.io/packages/ember-module-snippets


#7

Definitely second getting some packages for Atom, the one I have installed is ember-snippets and I never type out the import statements: