Ember support?

[justincampbell]

How can I use this with Ember? Given a new Ember project (ember new ember-new), I have this file in app/models/test.js:

import { alias } from "@ember/object/computed";
import { computed } from "@ember/object";
import { inject as service } from "@ember/service";
import DS from "ember-data";

const { attr, Model } = DS;

export default Model.extend({
  store: service(),

  name: attr(),

  alternateName: computed.alias("name"),
  anotherAlias: alias("name")
});

(contrived, but you get the idea)

All of the dependencies seem to be in devDependencies, so I added importDevDependencies: true to the config file.

Removing the imports at the top of this example, none of them are added back in by importjs fix app/models/test.js. Should this be working? I dug around node_modules and noticed most of @ember/... is defined in an ember-source package.

If I add namedExports to the config file, such as below, these specific imports work perfectly, but I noticed it's deprecated since 2.1.0, and this also doesn't seem to solve non-named imports:

{
  namedExports: {
    "@ember/object/computed": ["alias"], // etc
    "@ember/object": ["computed", "observer"],
  }
}

I don't mind manually creating a config file which would make this work for Ember (there's only ~10-20 things I need to import day-to-day), but I can't figure out how to write the config file to achieve that. Do I need something special in aliases for this to work?

Thanks in advance!

[justincampbell]

As an aside, aliases only seem to work when they contain a forward slash:

aliases: { DS: "ember-data" }

does not do anything, but if I change it to

aliases: { DS: "ember-data/foobar" }

it adds import DS from 'ember-data/foobar' during importjs fix

[justincampbell]

Here's my current config using the deprecated namedExports in case it helps anyone else: https://gist.github.com/justincampbell/0677cc71932b54cec5ae2e4f9d7f44b0

[trotzig]

Hi @justincampbell, thanks for giving import-js a spin! I have limited ember experience, so I played around with a fresh project to better understand the issues you are facing. I managed to repro the alias-must-have-forward-slash issue and found a workaround: making sure importDevDependencies is true will make the bare aliases work. I would argue that this is a bug in import-js, we're filtering out aliases that look like package dependencies (no slash) if we can't find a matching package in package.json. Adding importDevDependencies: true will prevent the filtering, because then it is treated as a "wanted depedency".

Thanks for sharing the gist! Does that mean you have resolved most issues? If so, we could look into adding that config as an ember environment, which would mean people would just have to have this in their config if they're working in an ember app:

module.exports = {
  environments: ['ember'],
}

[justincampbell]

@trotzig Thanks! Unfortunately I do have importDevDependencies: true configured, but none of the bare/no-slash aliases I added to that config file are currently working, I just added them for completeness.

people would just have to have this in their config if they're working in an ember app

That would be great! What about the namedExports though? Won't that be removed eventually?

[justincampbell]

Also regarding the config file, @alisdair pointed out to me that maybe we could use https://github.com/ember-cli/ember-rfc176-data to generate the aliases and namedExports.

[trotzig]

That would be great! What about the namedExports though? Won't that be removed eventually?

I'm pretty sure they'll stick around for now at least. The reason we deprecated them was that we wanted to make the automatic export finding good enough so that they wouldn't be needed. But that's turned out to be harder than we thought, so for now the namedExports/aliases will stick around in one form or another.

@trotzig Thanks! Unfortunately I do have importDevDependencies: true configured, but none of the bare/no-slash aliases I added to that config file are currently working, I just added them for completeness.

I'll dig around to see if I can find anything.

[trotzig]

Also regarding the config file, @alisdair pointed out to me that maybe we could use https://github.com/ember-cli/ember-rfc176-data to generate the aliases and namedExports.

Good call. I'm looking into an automatic way as well, one that doesn't require handmade lists.

[trotzig]

Quick question: are you using any editor plugin to run import-js or is it pure CLI?

[justincampbell]

@trotzig Currently using Vim and ALE:

let g:ale_fixers = {}
let g:ale_fixers['javascript'] = ['prettier', 'importjs']

I initially tried vim-import-js, but when I realized ALE already supported it as a fixer, I figured that would be good enough. Have also been running the CLI to test things via importjs fix [filename].

[trotzig]

Cool, I didn't know about the ALE support. The reason I ask is because the editor plugins all keep a process running in the background doing indexing. When you run from the command line you might benefit from having a running importjs start process somewhere (needs to start from the project root folder).

[trotzig]

Okay, it's getting late here and I'm not having much success with my attempt at finding ember exports automatically. The idea I had was to use the findExports function from import-js to automatically create the lists you had in your gist. As long as we know the paths to the files exporting those variables, we can theoretically auto-find them inside .importjs.js. Something like

const fs = require('fs');
const findExports = require('import-js/build/findExports');

const path = require.resolve('@ember/object');
const exports = findExports(fs.readFileSync(path), path);

// do something with exports

[monovertex]

Until we get support for plugins and eventually an Ember plugin, I wrote an .importjs.js config file for our ember-cli project which includes all the @ember modules. You can find in this gist.

To extract the modules, I used the data from https://github.com/ember-cli/ember-rfc176-data and the scripts used can be found here: https://github.com/monovertex/ember-rfc176-data/tree/master/scripts (generate-import-js-aliases.js, generate-import-js-core-modules.js, generate-import-js-named-exports.js).

Thank you @justincampbell for the ember-concurrency and ember-qunit named exports :+1:.