Refactoring Events

[6pac]

Hey @ghiscoding, I have a question. I'm inplementing a few new features and want to refactor some of the basic events in the system. But I'm still a TypeScript newb and struggling a bit. eg. in the RowSelection plugin,

setSelectedRanges(ranges: SlickRange_[], caller = 'SlickRowSelectionModel.setSelectedRanges', selectionMode?: string) {
  // simple check for: empty selection didn't change, prevent firing onSelectedRangesChanged
  if ((!this._ranges || this._ranges.length === 0) && (!ranges || ranges.length === 0)) {
    return;
  }
  this._ranges = ranges;

  // provide extra "caller" argument through SlickEventData event to avoid breaking the previous pubsub event structure
  // that only accepts an array of selected range `SlickRange[]`, the SlickEventData args will be merged and used later by `onSelectedRowsChanged`
  const eventData = new SlickEventData(new CustomEvent('click', { detail: { caller } }), this._ranges);
  this.onSelectedRangesChanged.notify(this._ranges, eventData);
}

I'd like to add the selectionMode parameter to the onSelectedRangesChanged call. The most obvious way to do this is to change the _ranges parameter to an object, like

  this.onSelectedRangesChanged.notify({ ranges: this._ranges, selectionMode: selectionMode }, eventData);

Because this is a breaking change, we'd need a little code shim at the receiving end of the event to detect whether the parameter was a ranges array or the parameter object, and make sure the result was consistent in both cases (probably transform it to the object form).
From what I can see you have already encountered this situation, and chosen a different approach: to create a custom event and pass the additional data inside that. I've looked over the solution, but I can't find a definition for CustomEvent.

Could you advise

(1) where is the definition for CustomEvent or how does this work? If I was to use it, I'm nor sure where to put the new value, it could be { detail: { caller, selectionMode } } or { detail: { caller }, selectionMode: selectionMode } and I'm not sure why caller is wrapped in its own object and doesn't have a property name.

(2) would you object to just moving back to regular event and refactoring the event receiver as described above? I feel like that's much clearer and I can't really think of a downside.

[ghiscoding]

CustomEvent is a built-in native code and the detail is the property that holds the values
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

The ranges has always been an array of ranges, so yes changing it to an object would be a breaking change. CustomEvent is what SlickGrid always used behing the scene, it shouldn't be anything else I think. However technically speaking I don't use SlickGrid project anymore since I have my own standalone version now, however I would prefer if it doesn't deviate too much because I like to sync both projects functionalities as much as possible.

Perhaps the best way to go around this would be to create and use a different event name with an object instead of the ranges (we could add the @deprecate JSDoc to the event and whenever a new major version comes in (if ever) then we typically revisit all these deprecated stuff and remove them).

[6pac]

Thanks, didn't know about CustomEvent. I'll use that method to pass the additional vars.

Sorry to keep bugging you, but I'm trying to get the project running again in Visual Studio. npm run dev is working from a command prompt, but ideally I'd like to use the 'Launch Chrome against localhost' debug button in VS to get the full experience and debug live in VS using Typescript rather than dealing with the mangled javascript output.
I've revisited out my previous queries here and here without any enlightenment.

To rule out issues with my changes I've gone back to the vanilla master branch pulled direct from the repo. So there are no changes to anything.

Firrstly, it appears that you are using VS Code, which is quite a different beast to VS. If it's too difficult to adapt to full VS, I guess I can just VS Code just for this project. But it would be great to use VS because I use it for 100% of my projects.
VS Code doesn't use a project/solution file and the repo doesn't contain one, so I created one a while back and added the build action of npm run build.

It looks like the build process has changed, because now when I build I get:

Build started at 9:43 AM...
1>------ Build started: Project: Slickgrid, Configuration: Debug Any CPU ------
1>npm ERR! Missing script: "build"
1>npm ERR!
1>npm ERR! To see a list of scripts, run:
1>npm ERR!   npm run

Also in VS I get as the one and only error, I suspect masking other errors:

Error (active)	(ESLint) 	Parsing error: Cannot read file 'G:\Dropbox\Work\SlickGrid\SlickGrid-6pac\cypress\e2e\tsconfig.json'.	Slickgrid	{base folder}\SlickGrid-6pac\cypress\e2e\example-excel-compatible-spreadsheet.cy.ts	1		

(there is a tsconfig file in the parent folder but not e2e)

I was able to overcome a number of other errors by updating npm and adding the cypress-real-events package, but I'm stumped by these. Or perhaps I'm just being an idiot. Not at all familiar with npm or any of the ts or build tools.

Any ideas?

[ghiscoding]

You should really start using VSCode a bit more, it's really the best for working with frontend project. I did some searches and there's a Stack Overflow for converting launch.json to launchSettings.json for VS and there's no answer for the question
https://stackoverflow.com/questions/41388941/how-to-convert-a-vs-code-launch-json-to-a-visual-studio-launchsettings-json-for

So it would be easier to just use VSCode and with it, you can debug directly from TypeScript file. I use VS for backend code (aka C#) but yeah I use 2 editors simultaneously.

[6pac]

OK, if that's the easiest. Until recently I thought that VS Code was just the free/stripped back form of VS. But I have been checking it out and see it's actually a different product entirely.
I'm slowly converting my projects to ts, and they are all Asp Net Core, so I'll integrate ts into VS along the way, but I have a pressing need to get this Slickgrid stuff done and it looks like it's too much to bite off all at once.

[ghiscoding]

it evolved a lot in the past couple years, you can even run your C# directly in VSCode as well, just install the C# extension and run it all in 1 editor, this extension even adds a Solution Explorer within VSCode with regular commands like Build/Rebuild/... you can also add debugger breakpoints in C# code as well with it.

[6pac]

Me again, different but related issue. I'm starting to convert my projects to Typescript. At present they are all old style js - no modules, IIFE all the way. I'm wanting to convert one subsystem at a time to TS and leave the rest as-is, so the two have to co-exist.
But I'm finding that adding TypeScript is having a domino effect, and forcing me into a whole raft of changes, eg:

1. because of the 'object namespace' and the 'type namespace' in TS, it's mandatory to use ES6 modules with ts
2. modules load differently to regular scripts, so in order to have a mix of the two I have to defer all the regular script loads in the project and wrap all the inline scripts in a DOM-ready function

This is acceptable and working fine in development, but now I'm facing the issue of what to do in production. I've used the VS 'bundler and minifier' plugin for years, but I don't think it is module-aware. Could you give me a pointer regarding what you see as the best module-aware bundling tool? I read a lot about WebPack, but the module landscape has shifted and evolved rapidly over the last 8 or so years, and I'm not sure, without a lot of research, that it's actually the best, or even suitable at this time.

Any hints?

[ghiscoding]

I guess it depends on what you intend to do with the resulting JS files? Basically are you building a project as a website OR are you building a JS library (like SlickGrid)? In both cases I would go with ViteJS and follow their Getting Started Guide and running the commands they suggest will give you a template with a dev and a build script. Vite accepts all kind of file extensions (.js, .ts, .jsx, .tsx, .css, .scss, ...) and that is basically what I used to create the recent vite-demo showing in Stackblitz.

I read a lot about WebPack, but the module landscape has shifted and evolved rapidly over the last 8 or so years

Yeah please don't trouble yourself with WebPack, it's old (barely anyone uses it on newer project), requires a lot of config setup and is very slow. On the other hand Vite is modern with very minimal setup and it is extremely fast to build and all (it's at 15 millions download a week and is adopted by all frameworks). Vite also supports HMR (Hot Module Reload) which is awesome and will basically re-render whatever DOM element(s) you changed without requiring a full browser reload, it's awesome to develop without losing any of your form data and all. The provided Vite dev/build npm script will take any file extensions and transpile into native JS files for you.

Searching on internet, this video seems like a good tutorial for someone starting with Vite
https://www.youtube.com/watch?v=9oqu9134U8Q
https://www.youtube.com/watch?v=Y3yCB7CfjF4 (this one is shorter and seems good enough too)

[6pac]

Thanks, good advice. I am doing both - libraries and I want to convert my page scripts to TS as well, which will require a separate per-page ts/js file.
I read that Vite requires modern browser functionality, but that's probably OK. I don't support many old browsers any more.
Do you have an opinion on ESBuild? It seemed like the other frontrunner. I have a vague recollection that's maybe what you used earlier and then switched to Vite?

[ghiscoding]

So what makes Vite super fast in Development is actually because they use esbuild in Dev but they use RollupJS to bundle Production builds. Why does it use 2 bundles? The reason is because esbuild is extremely fast but Rollup is more flexible with tons of plugins and it also produces better results in some use case (though it won't make much differences in small projects). So Vite actually does use esbuild & Rollup. The question you might have is, can I use esbuild only? Certainly, that is what I've done in here (SlickGrid) a year ago on our 5.0 version. What's the difference? Vite makes it easy to start working with any type of files (extensions), however if you're only interested in bundling then yes esbuild is certainly an option (again that's what I've done in here)... in other words, if you're only interested in bundling from .ts to .js then yes esbuild is a great option (Vite works too), if you're working with a website and have to deal with all kind of different file extensions .ts, .css, .scss, ... then I would prefer Vite

I have a vague recollection that's maybe what you used earlier and then switched to Vite?

I didn't switched to Vite, I still use esbuild to bundle the 3 outputs (IIFE, CJS, ESM) but like I said, to build a website it's much easier and works out of the box in Stackblitz. The other reason I created this 2nd Vite demo is because Vite makes it easy to import .scss (SASS) files. So in my head it's pretty much this

• website => Vite
• bundling only => esbuild or Vite

[6pac]

Great. Well, my endpoint is a website, so Vite it is. Thanks again.