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”.