Bug? Or am I doing something wrong? (globals like Resizable and MouseWheel)

[scott-lewis-nsidc]

I am updating a project that is using SlickGrid, as we really like the functionality. We were using 3.x, upgrading to 5.5.5. Overall, it seems to be OK. I changed the include paths from things like /slickgrid/slick.grid.js to /slickgrid/dist/browser/slick.grid.js, and that seems fine. However, I think somewhere in the translation from TS to JS, something isn't right with a few of the globals. In particular, the Slick.Resizable and Slick.MouseWheel globals defind in slick.interactions.js.

There are a few places in slick.grid.js that refer to either Resizable or MouseWheel just like that - no Slick. prefix. This is causing an error - it says it's undefined, and that I need to include slick.interaction.js, which I'm already doing. Using the debugger, I determined that Resizable isn't defined, but Slick.Resizable is.

Is there something I'm missing in including these files to get the globals correct? Or is there a bug in how the Typescript is being converted to Javascript for the dist folder. (As a note, right now using the ES6/ESM and esbuild method isn't an option for us, we need to stick with the Standalone Scripts method.

Thanks in advance!

[ghiscoding]

There's a specific order that you have to load core/grid/interactions (if I remember correctly it's core first, then interactions and the slick.grid, because the Slick namespace has to be created first (by the core), but again read the migration Wiki to make sure), it should be written in the migration guide (I think) and the dist/browser version if being transpiled by using IIFE and it's exported correctly as shown below. All Examples are working fine and we have plenty of Cypress E2E tests to make sure they do, so you should compare against the Examples that is closest to your use cases (most Examples are still using the IIFE aka dist/browser) so just compare against them.

SlickGrid/src/slick.interactions.ts

Lines 274 to 280 in 13af6f5

	// extend Slick namespace on window object when building as iife
	if (IIFE_ONLY && window.Slick) {
	Utils.extend(Slick, {
	Draggable,
	MouseWheel,
	Resizable,
	});

also make sure to follow the migration in order, 3.x to 4.x then 4.x to 5.x

Also note that the IIFE version loads Draggable, Resizable, .. from the global window object, we cannot use the Slick namespace anywhere in the TypeScript code because it does not exist when using the other 2 build formats (CJS/ESM). So they are all loaded from the window object but they are also exported on the Slick namespace but only for the IIFE build, that is how I was able to provide all 3 formats without increasing the build size

[scott-lewis-nsidc]

Thanks! Changing the order around seems to have been what I needed! Unless I missed it, the migration guide didn't explicitly say anything about doing the imports in a certain order, though it does show "core" before "grid", but doesn't have "interactions". When I was using 3.x, it didn't seem to matter, at least not in the project I've been working on, so I hadn't even thought about that making a difference now.

Thanks for the quick reply, this was exactly what I needed!

[ghiscoding]

I think are open for edit, feel free to add missing info

The migration to TypeScript was a little challenging since we now have 3 builds (iife, cjs & esm) instead of just 1 before (iife), the order of slick.core is the most important one for iife since the core is the one that creates the Slick namespace. I think the slick.interactions might be ok to be mix the order with slick.grid but in all cases slick.core really has to be first so it creates the namespace which the grid & interactions then extend their stuff to the Slick namespace (object) afterward. I guess that should be added to the migration in similar explanations