ember-cli / ember-cli-import-polyfill

Backports newer addon import API to older ember-cli versions.
MIT License
1 stars 2 forks source link

How to use? #1

Open elwayman02 opened 8 years ago

elwayman02 commented 8 years ago

I'm not sure how to use this in my addons. For example, I have ember-sinon-qunit, which depends on ember-sinon, which has imports that need to execute on the app. However, I can't seem to figure out where/how to include this addon to make sure that all apps consuming ember-sinon-qunit will have ember-sinon's index.js execute properly.

rwjblue commented 8 years ago

Add this as a dependency. That is all you should need to do.

elwayman02 commented 8 years ago

@rwjblue do I call this.import instead of app.import now? I'm not sure how to trigger the new prototype method.

For example, trying this threw an error that this.import didn't exist:

included: function (app) {
    this._super.included.apply(this, arguments);
    this.import('vendor/ember-sinon/shim.js', {
      type: 'test',
      exports: { 'sinon': ['default'] }
    });
  }
rwjblue commented 8 years ago

You may have to list the polyfill as a 'before' in your package.json to ensure it is loaded first.

elwayman02 commented 8 years ago

err don't you mean after? I thought addons listed as after specified all addons that must run before your addon can run

elwayman02 commented 8 years ago

Optionally, you may specify whether your ember-addon must run "before" or "after" any other Ember CLI addons.

I have

  "dependencies": {
    "ember-cli-babel": "^5.1.6",
    "ember-cli-import-polyfill": "0.1.0",
    "ember-cli-node-assets": "^0.1.1",
    "sinon": "^1.17.4"
  },
  "ember-addon": {
    "configPath": "tests/dummy/config",
    "after": ["ember-cli-import-polyfill"]
  }
rox163 commented 8 years ago

I also have issues using this. I have an engine addon running Ember 2.6 that is dependent on another regular addon, lets say AddonB [also 2.6]. AddonB uses app.import, so when I run my engine I get an error TypeError: Cannot read property 'import' of undefined. This is pointing to the index.js file of AddonB where a app.import call is being made for a bower dependency. I tried installing the polyfill in AddonB and in my engine and changed the call in AddonB to this.import but it still didn't work.

xcambar commented 8 years ago

Unless you're using ember-cli 2.7.0, you must install the polyfill for your app, even if the add-ons already have it.

This is because the code in the add-ons is run with the models from the app.

If it doesn't work, it would be great to have a repo that reproduces the issue.

rox163 commented 8 years ago

@xcambar Yes I have installed the polyfill in my engine as well. The engine here is consuming the addon that has the import statement in its index.js. I dont have a small repo for this right now...working on an internal company project. @elwayman02 Did you manage to get this working by any chance?

ef4 commented 8 years ago

The polyfill is intended for apps with ember-cli older than 2.7.

The whole point of the polyfill was making it so we don't need to make changes in a lot of addons. Addons do not need the polyfill. Addon authors should be telling users to upgrade to ember-cli 2.7 or install the polyfill.

rox163 commented 8 years ago

ok based on this I just upgraded my consuming engine to ember-cli 2.7 and left all addons as is. I am consuming ember-perfectscroll as a dependency. It is now giving me an error -

The Broccoli Plugin: [SourceMapConcat: Concat: Vendor /assets/vendor.js] failed with:
Error: ENOENT: no such file or directory, stat '/Users/rpanthak/git_workspace/ciena-uac-engine/tmp/source_map_concat-input_base_path-JMJjNLkd.tmp/0/undefined/perfect-scrollbar/js/perfect-scrollbar.js'

Which seems like its due to app.bowerDirectory not being found?

rox163 commented 8 years ago

ok I had to add another if block guard inside an addon that was pulling in perfectscroll to get it to all be happy, which doesn't seem very clean -

if (typeof app.import === 'function' && app.bowerDirectory) {
    this.import(app.bowerDirectory + '/perfect-scrollbar/js/perfect-scrollbar.js')
    this.import(app.bowerDirectory + '/perfect-scrollbar/css/perfect-scrollbar.css')
  }
ef4 commented 8 years ago

@rox163 you're right, this change didn't account for bowerDirectory. There is some discussion about fixing that too. https://github.com/ember-cli/ember-cli/pull/6111

rox163 commented 8 years ago

Thanks. Looking forward to seeing the RFC for this.

xcambar commented 8 years ago

@rox163 @ef4 See the RFC here: https://github.com/ember-cli/rfcs/pull/63