Possible to use slickgrid with ember-auto-import?

@Lupestro wrote:

Hi folks,

This last week, we were forced to seek an alternative (temporarily for an imminent release) to ember-table for the one place we were using it in our app and fell back to using slickgrid.

We got a complete replacement table component (with some enhancements) coded and tested in about three days, but as we started development, we set aside using ember-auto-import for the task and used app.import instead. The package.json for slickgrid specifies jquery and jquery-ui as dependencies and slick.core as the main, so ember-auto-import dealt with those just fine. However, doing what we needed required loading modules provided in the package but whose role is not mentioned in the npm package manifest. While developing with a hot deadline, we fell back on app.import, which we knew would work:

  let app = new EmberApp(defaults, {
    'ember-cli-babel': {
      includePolyfill: true
    },
    sassOptions: {
      onlyInclude: true
    },
    autoImport: {
      exclude: ['slickgrid'],
    }
      // Add options here
  });
  app.import('node_modules/slickgrid/lib/jquery-3.1.0.js', {using: [{transformation: 'fastbootShim'}]});
  app.import('node_modules/slickgrid/lib/jquery-ui-1.11.3.js', {using: [{transformation: 'fastbootShim'}]});
  app.import('node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js', {using: [{transformation: 'fastbootShim'}]});
  app.import('node_modules/slickgrid/slick.core.js', {using: [{transformation: 'fastbootShim'}]});
  app.import('node_modules/slickgrid/plugins/slick.rowselectionmodel.js', {using: [{transformation: 'fastbootShim'}]});
  app.import('node_modules/slickgrid/slick.grid.js', {using: [{transformation: 'fastbootShim'}]});
  app.import('node_modules/slickgrid/slick.dataview.js', {using: [{transformation: 'fastbootShim'}]});
  app.import('node_modules/slickgrid/slick.grid.css', {using: [{transformation: 'fastbootShim'}]});

This works, and let us complete the development.

slickgrid contributes the Slick global to the browser environment. As best I can tell, it doesn’t provide anything like ES6, AMD, CommonJS, or UMD modules to keep it out of the global namespace. The app must load a JavaScript file for each feature that it uses, files with names like slick.grid.js and slick.data.js. Each of the JS files adds some property under Slick.

Is there some way to use ember-auto-import to tame a beast like this one, or is what we did the best solution available?

Aside:

Since someone will ask, our ember-table issues related primarily to display glitches in IE11 and Edge and load performance overall, but especially in IE11 and Edge. slickgrid is blazingly fast and has few issues with supported browsers. We’ve been using it for five years across all our tools, and our customers are used to what it provides, so any component we use must meet those expectations. We will return to ember-table when we have time to address those issues, as I still really want a modern “pure ember” solution but, for mid-February, it isn’t likely to deliver all that we get from slickgrid, and we had to “fish or cut bait”.

Posts: 1

Participants: 1

Read full topic