Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Mixin option for adding defaults to options and columns objects, … #831

Merged
merged 3 commits into from
Aug 10, 2023

Conversation

6pac
Copy link
Owner

@6pac 6pac commented Aug 7, 2023

…preserving external references to those objects
@6pac
Copy link
Owner Author

6pac commented Aug 7, 2023

Posting this provisionally. I can't get a compilation running here without spewing a thousand errors so can't test until I fix that. It's late - will try again tomorrow using Visual Studio (been using Notepad++ to this point). We'll see how the CI tests go.

@@ -209,6 +209,9 @@ export interface GridOption<C extends BaseColumn = BaseColumn> {
/** What is the minimum row buffer to use? */
minRowBuffer: number;

/** Use a mixin function when applying defaults to passed in option and columns objects, rather than creating a new object, so as not to break references */
mixinDefaults: boolean;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you make it optional ?:, I'm not entirely done with this interface. I had some issues with extending the interface in my libs, so I had to turn all options to optional in here so that I could extend properly in my libs. I'm still working on this though

@@ -910,6 +918,7 @@ const SlickCore = {
hide: hide,
slideUp: slideUp,
slideDown: slideDown,
applyDefaults: applyDefaults,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot to review these exports, in ES6 you can omit the right side if it's the same name as on the left. We should probably simplify them all

- applyDefaults: applyDefaults,
+ applyDefaults, 

src/slick.grid.ts Show resolved Hide resolved
@@ -3377,24 +3392,45 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
* @param {Boolean} [suppressSetOverflow] - do we want to suppress the call to `setOverflow`
*/
setOptions(args: Partial<O>, suppressRender?: boolean, suppressColumnSet?: boolean, suppressSetOverflow?: boolean): void {
prepareForOptionsChange();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unless this function is local, which I don't think it is, I would assume that you need the this here because SlickGrid is now a class and in TypeScript you must always include the this (or super) in contrary to C# where it's optional

this.prepareForOptionsChange();

activateChangedOptions(suppressRender?: boolean, suppressColumnSet?: boolean, suppressSetOverflow?: boolean): void {
prepareForOptionsChange();
this.trigger(this.onActivateChangedOptions, { options: this._options });
internal_setOptions(suppressRender, suppressColumnSet, suppressSetOverflow);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same comment, I think you need this.

if (!this.getEditorLock().commitCurrentEdit()) {
return;
}

this.makeActiveCellNormal();

//if (this._options.enableAddRow !== args.enableAddRow) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do these comments need to be preserved?

@6pac
Copy link
Owner Author

6pac commented Aug 8, 2023

OK, this should be a lot better. I got it running in VS and with npm run dev. It's giving great error messages and intellisense.
Actioned all suggestions plus a few other errors I was getting. The only thing was I didn't remove the right side of the exports, I thought this would be better done in its own PR. Happy to do that - would probably base it on NEXT and would edit the single line added from this PR to match before merging.

@6pac 6pac dismissed ghiscoding’s stale review August 8, 2023 05:04

will handle as a separate PR

@6pac
Copy link
Owner Author

6pac commented Aug 8, 2023

I note however that despite having only edited two .ts files, I still get absolute stacks of modified .js and .map files from the auto generation:

$ git status
On branch extend-option-and-column-objects-next
Your branch is up to date with 'origin/extend-option-and-column-objects-next'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
    modified:   dist/browser/controls/slick.columnmenu.js
    modified:   dist/browser/controls/slick.columnpicker.js
    modified:   dist/browser/controls/slick.columnpicker.js.map
    modified:   dist/browser/controls/slick.gridmenu.js
    modified:   dist/browser/controls/slick.gridmenu.js.map
    modified:   dist/browser/controls/slick.pager.js
    modified:   dist/browser/controls/slick.pager.js.map
    modified:   dist/browser/plugins/slick.autotooltips.js
    modified:   dist/browser/plugins/slick.autotooltips.js.map
    modified:   dist/browser/plugins/slick.cellcopymanager.js
    modified:   dist/browser/plugins/slick.cellcopymanager.js.map
    modified:   dist/browser/plugins/slick.cellexternalcopymanager.js
    modified:   dist/browser/plugins/slick.cellexternalcopymanager.js.map
    modified:   dist/browser/plugins/slick.cellmenu.js
    modified:   dist/browser/plugins/slick.cellrangedecorator.js
    modified:   dist/browser/plugins/slick.cellrangeselector.js
    modified:   dist/browser/plugins/slick.cellselectionmodel.js
    modified:   dist/browser/plugins/slick.cellselectionmodel.js.map
    modified:   dist/browser/plugins/slick.checkboxselectcolumn.js
    modified:   dist/browser/plugins/slick.checkboxselectcolumn.js.map
    modified:   dist/browser/plugins/slick.contextmenu.js
    modified:   dist/browser/plugins/slick.contextmenu.js.map
    modified:   dist/browser/plugins/slick.crossgridrowmovemanager.js
    modified:   dist/browser/plugins/slick.customtooltip.js
    modified:   dist/browser/plugins/slick.customtooltip.js.map
    modified:   dist/browser/plugins/slick.draggablegrouping.js
    modified:   dist/browser/plugins/slick.draggablegrouping.js.map
    modified:   dist/browser/plugins/slick.headerbuttons.js
    modified:   dist/browser/plugins/slick.headermenu.js
    modified:   dist/browser/plugins/slick.resizer.js
    modified:   dist/browser/plugins/slick.rowdetailview.js
    modified:   dist/browser/plugins/slick.rowdetailview.js.map
    modified:   dist/browser/plugins/slick.rowmovemanager.js
    modified:   dist/browser/plugins/slick.rowselectionmodel.js
    modified:   dist/browser/plugins/slick.rowselectionmodel.js.map
    modified:   dist/browser/plugins/slick.state.js
    modified:   dist/browser/slick.compositeeditor.js
    modified:   dist/browser/slick.compositeeditor.js.map
    modified:   dist/browser/slick.core.js
    modified:   dist/browser/slick.core.js.map
    modified:   dist/browser/slick.dataview.js
    modified:   dist/browser/slick.dataview.js.map
    modified:   dist/browser/slick.editors.js
    modified:   dist/browser/slick.editors.js.map
    modified:   dist/browser/slick.formatters.js
    modified:   dist/browser/slick.formatters.js.map
    modified:   dist/browser/slick.grid.js
    modified:   dist/browser/slick.grid.js.map
    modified:   dist/browser/slick.groupitemmetadataprovider.js
    modified:   dist/browser/slick.interactions.js
    modified:   dist/browser/slick.interactions.js.map
    modified:   dist/browser/slick.remotemodel-yahoo.js
    modified:   dist/browser/slick.remotemodel.js
    modified:   dist/browser/slick.remotemodel.js.map
    modified:   dist/esm/index.js
    modified:   dist/esm/index.js.map
    modified:   dist/styles/css/slick-alpine-theme.css

Untracked files:
  (use "git add <file>..." to include in what will be committed)
    .vs/
    Slickgrid.esproj
    Slickgrid.sln
    dist/browser/models/
    src/controls/index.js
    src/controls/slick.columnmenu.js
    src/controls/slick.columnpicker.js
    src/controls/slick.gridmenu.js
    src/controls/slick.pager.js
    src/index.js
    src/models/aggregator.interface.js
    src/models/autoSize.interface.js
    src/models/autoTooltipOption.interface.js
    src/models/cancellablePromiseWrapper.interface.js
    src/models/cellMenuOption.interface.js
    src/models/cellRange.interface.js
    src/models/checkboxSelectorOption.interface.js
    src/models/column.interface.js
    src/models/columnPicker.interface.js
    src/models/columnReorderFunction.type.js
    src/models/columnSort.interface.js
    src/models/compositeEditorOption.interface.js
    src/models/contextMenuOption.interface.js
    src/models/core.interface.js
    src/models/customTooltipOption.interface.js
    src/models/dataViewEvents.interface.js
    src/models/domEvent.interface.js
    src/models/drag.interface.js
    src/models/draggableGroupingOption.interface.js
    src/models/editCommand.interface.js
    src/models/editor.interface.js
    src/models/editorArguments.interface.js
    src/models/editorValidationResult.interface.js
    src/models/editorValidator.interface.js
    src/models/elementPosition.interface.js
    src/models/excelCopyBufferOption.interface.js
    src/models/externalCopyClipCommand.interface.js
    src/models/fieldType.enum.js
    src/models/formatter.interface.js
    src/models/formatterResultObject.interface.js
    src/models/gridEvents.interface.js
    src/models/gridMenu.interface.js
    src/models/gridMenuCommandItemCallbackArgs.interface.js
    src/models/gridMenuItem.interface.js
    src/models/gridMenuOption.interface.js
    src/models/gridOption.interface.js
    src/models/gridSize.interface.js
    src/models/groupItemMetadataProviderOption.interface.js
    src/models/groupTotalsFormatter.interface.js
    src/models/grouping.interface.js
    src/models/groupingComparerItem.interface.js
    src/models/groupingFormatterItem.interface.js
    src/models/headerButtonItem.interface.js
    src/models/headerButtonOnCommandArgs.interface.js
    src/models/headerButtonsOrMenu.interface.js
    src/models/headerMenuItems.interface.js
    src/models/headerMenuOption.interface.js
    src/models/htmlElementPosition.interface.js
    src/models/index.js
    src/models/infer.type.js
    src/models/interactions.interface.js
    src/models/itemMetadata.interface.js
    src/models/menuCallbackArgs.interface.js
    src/models/menuCommandItem.interface.js
    src/models/menuCommandItemCallbackArgs.interface.js
    src/models/menuFromCellCallbackArgs.interface.js
    src/models/menuItem.interface.js
    src/models/menuOptionItem.interface.js
    src/models/menuOptionItemCallbackArgs.interface.js
    src/models/mouseOffsetViewport.interface.js
    src/models/multiColumnSort.interface.js
    src/models/pagingInfo.interface.js
    src/models/plugin.interface.js
    src/models/positionMethod.type.js
    src/models/resizerOption.interface.js
    src/models/rowDetailViewOption.interface.js
    src/models/rowInfo.interface.js
    src/models/rowMoveManagerOption.interface.js
    src/models/rowSelectionModelOption.interface.js
    src/models/selectableOverrideCallback.interface.js
    src/models/selectionModel.type.js
    src/models/singleColumnSort.interface.js
    src/models/slickGridModel.interface.js
    src/models/sortDirectionNumber.enum.js
    src/models/usabilityOverrideFn.type.js
    src/plugins/index.js
    src/plugins/slick.autotooltips.js
    src/plugins/slick.cellcopymanager.js
    src/plugins/slick.cellexternalcopymanager.js
    src/plugins/slick.cellmenu.js
    src/plugins/slick.cellrangedecorator.js
    src/plugins/slick.cellrangeselector.js
    src/plugins/slick.cellselectionmodel.js
    src/plugins/slick.checkboxselectcolumn.js
    src/plugins/slick.contextmenu.js
    src/plugins/slick.crossgridrowmovemanager.js
    src/plugins/slick.customtooltip.js
    src/plugins/slick.draggablegrouping.js
    src/plugins/slick.headerbuttons.js
    src/plugins/slick.headermenu.js
    src/plugins/slick.resizer.js
    src/plugins/slick.rowdetailview.js
    src/plugins/slick.rowmovemanager.js
    src/plugins/slick.rowselectionmodel.js
    src/plugins/slick.state.js
    src/slick.compositeeditor.js
    src/slick.core.js
    src/slick.dataview.js
    src/slick.editors.js
    src/slick.formatters.js
    src/slick.grid.js
    src/slick.groupitemmetadataprovider.js
    src/slick.interactions.js
    src/slick.remotemodel-yahoo.js
    src/slick.remotemodel.js

no changes added to commit (use "git add" and/or "git commit -a")

This is pretty annoying. Do you have any tricks for getting around this? Or do you use Source Control in VS and not see it?
Does VS actually commit all these changes? I've just been cherry picking the few files I've actually modified and assuming everything else will get regenerated during the CI build anyway.

@ghiscoding
Copy link
Collaborator

ghiscoding commented Aug 8, 2023

Yeah that's a bit the problem that we'll always get about the dist folder, the problem is basically that we're committing this folder when in theory we rarely include the dist folder in Git. The main reason why we keep it is that all the Examples are now referencing it, the users will no longer be able to use the code in src/ folder directly (like they must often did in the past), with this TypeScript code, you can only use the files from the dist folder. In other words, I wanted to keep the standalone examples and I didn't want to create a new Single Page App (SPA) for this project and I assume that there are still a lot of people using the files directly without even using NPM to download the code. So if we stop committing the dist folder then it might break some people code (I am only going with assumptions here), that won't break my side because I use NPM so I'm good but some others might not if they reference the code directly.

Also if people want to use CDN (like jsDelivr for example then I'm not sure if it works when it's only published on NPM but not committed to GitHub.... Ah actually, I do see Angular-Slickgrid (my lib) in the list which is only published to NPM, so I guess it does work even for NPM only distributed files.

In short, we still commit all the dist/ folder and files because of the Examples, if we wanted to stop committing the dist/ folder, then we would have to change all Examples to maybe do a Single Page App or something similar and that is something I didn't spend time doing and wasn't really planning to do since all Examples currently work with the dist folder still in place.

At the moment, I commit the dist folder in separate commit (without even a PR) and keep only relevant code change in the PR (excluding dist) but it's a manual process (it's probably easier to do that in VSCode compare to VS, I've never liked the Git diff UI in VS)

Also note that I want to test this code in my lib first before approving it, I just want to make sure all my Cypress passes without any breaking change. I'll test it in a day or two

@6pac
Copy link
Owner Author

6pac commented Aug 8, 2023

No problems. I understand the need for this structure, was just querying how we deal with it.

So in summary, I think in future I'll create a PR with my actual changes and a second PR to update all the autogenerated files for the first PR. I just think it's good to keep the 'files changed' tab in the original PR unobscured by the flow-on changes.

Also just checking, does the CI build regenerate all the dist files before running the tests? Or is it just testing with /src/*.js and dist/* files that have been committed? This will impact on the above strategy.

One final note: I set option mixinDefaults to false, which is non-breaking. If this is part of the new major release, we may want to set it to true. Actually, I've just updated it to true now, so we break the maximum amount of stuff during testing. But my point is, we have the choice to make it non breaking or breaking.

@ghiscoding
Copy link
Collaborator

ghiscoding commented Aug 9, 2023

So in summary, I think in future I'll create a PR with my actual changes and a second PR to update all the autogenerated files for the first PR. I just think it's good to keep the 'files changed' tab in the original PR unobscured by the flow-on changes.

You can create a PR with the code change so that I can review but you can go ahead and push directly on the next branch for the dist files, I don't think we need extra PRs for just the dist files. I added most of PR refs to the v5 Roadmap that I created, you can modify the list if you want and add your stuff in that TODO list.

Also just checking, does the CI build regenerate all the dist files before running the tests? Or is it just testing with /src/*.js and dist/* files that have been committed? This will impact on the above strategy.

Yeah I think I do run a full build in the CI to make sure that the PR is ok and from that build I assume it regenerates all the dist files that are then used by the http server for the Cypress tests... but all of that in the CI workflow is technically inside a VM container and we don't need to worry about it. Running a full build every time is mainly to make sure the PR is not breaking the build and it's more true with TypeScript since there is a build process (which we didn't have before with plain JS). The build in the CI (VM) is entirely separate from our code, the CI never has write permissions to our Git code, so you'll never see the CI overwriting our dist folder or anything else, it doesn't have the permissions to do so, it's a separate process and we shouldn't have to worry about it,

One final note: I set option mixinDefaults to false, which is non-breaking. If this is part of the new major release, we may want to set it to true. Actually, I've just updated it to true now, so we break the maximum amount of stuff during testing. But my point is, we have the choice to make it non breaking or breaking.

I would probably prefer to have it non-breaking because I think that might have an impact with my use of locale for translations (I18N) since I think I update the locale text by using the columns pointers (by ref) and I think that if you enable this new feature that will probably break my translation part. I'll test that in a day or two like I said.

All the Cypress tests are passing in your PR now but we don't have locale anywhere in this project, it's only in my own libs so there's more type of Cypress tests on my side. You can take a look at this Slickgrid-Universal Example 7 if you want to see how I use Locales, you'll see that after switching locale, it changes the column titles, the header menu and grid menu options and also context menu (basically any menu plugins) and is super important that this still works

@6pac
Copy link
Owner Author

6pac commented Aug 9, 2023

OK, great. I'd expect that the new feature will make references more persistant rather than less, but we'll see.

Is the next major step after this to merge this project and Slickgrid-Universal?

@ghiscoding
Copy link
Collaborator

ghiscoding commented Aug 9, 2023

You should really take a look at the v5 Roadmap discussion to see what's left to do 😉 On the Slickgrid-Universal side, I got all my Cypress tests working couple days ago but still wish to review the TypeScript interfaces again, I need to extend a few of them from SlickGrid and I have some little issues with extending them (for example the GridOption and Column interfaces, I have more options than SlickGrid which is why I need to extend them), I want to see if I can improve them on both side and then my next step will be to fix all my unit tests and I have over 2000 of them, so we'll see what fails (all my libs have full unit test coverage and also E2E tests)... then the rest of TODOs is for the most part of the roadmap.

BTW, do you like the next styling theme? and what's your impression about the new structure and everything in general (apart from the dist folder)? Personally I like the work I've done on the Dev side with auto-reloading using Browser-Sync and esbuild and more modern on both the UI and the code and libs we now use

@6pac
Copy link
Owner Author

6pac commented Aug 9, 2023

Sure, I have been keeping an eye on the roadmap, but I meant completely merging the two projects into a single one. That's not part of the process AFAIK, but it does seem like a logical long term step.

Re the styling, it's definitely more modern, and the grid theme has been looking dated. If I don't seem overly excited, it's because most of my clients are businesses, and really styling is quite a low priority concern for them. Functionality is of prime importance. But I definitely will be using the new themes.

Re the structure, you've done a great job of working out all the various use cases and being systematic with supporting them. Again, I'm stuck back here in the dark ages - I don't use npm, or any of the JS frameworks, tree shaking, modules or imports. So I'm grateful to have someone who is familiar with all that guide the way through.
I've been an ASP DotNet developer for 20 years and likely to stay that way. Rather than use Vue or React, I've developed my own suite of JS controllers that do most of the work for me - I've done some very complex UI's and been bitten in the past by 'automagic' UI tools and often consider the cure worse than the disease, so I prefer to stick to declarative business logic.
So the sad truth is I will probably continue to ignore (and not even understand, like I have no idea what Browser-Sync even is) almost all of the process and just use the final product in dist/browser. Please note that this is not at all that I don't want to or can't understand the tools, it's just a simple calculus of time spent versus benefit for me, and I just don't want to open the lid on yet another can of worms ;-)

But I understand that I'm far from the typical developer, and that the support for all these other use case will be a great boost to the project. So, many thanks for that.

There is only on more thing I think we really need to do now, and that is to provide better documentation. I've been really busy the last 18 months, and I'm consciously not taking on new work for a while so I can hopefully get some free time starting late this year. Documentation is something that I enjoy, although it's always amazing how time consuming it is. But I think that's the final barrier to Slickgrid being on par with things like Ag-Grid.

@6pac
Copy link
Owner Author

6pac commented Aug 9, 2023

Just Googled 'Browser-Sync', and it looks interesting, but will it run with ASP NET MVC projects? There is hot reload in VS, but it has all these bugs that make it very slow and it crashes every now and then, so I generally turn it off and manually refresh. The problem is that it has to recompile the c# in the .cshtml files so it's not as simple as processing some ts/js/html.

@6pac
Copy link
Owner Author

6pac commented Aug 9, 2023

Thinking we need some documentation around tools use. Because your tool chain is completely different to mine, I find that I never know if a given tool is relevant to or even compatible with my process.

@ghiscoding
Copy link
Collaborator

Sure, I have been keeping an eye on the roadmap, but I meant completely merging the two projects into a single one. That's not part of the process AFAIK, but it does seem like a logical long term step.

Hmm not really intending to merge them, what I've done so far with my libs is to try to move as much code as possible from SlickGrid (here) into Slickgrid-Universal (controls, plugins, editors, formatter, ...) but the main pieces that I have not moved or recreated into Slickgrid-Universal is these 4 files (slick.grid, slick.core, slick.interactions and slick.dataview), can I move them to Slickgrid-Universal, maybe and it would be easier now that it's in TypeScript but at the end of the day SlickGrid and Slickgrid-Universal are very different from each other.

SlickGrid is like an unassembled IKEA product and Slickgrid-Universal is all assembled (includes a bunch of Editors, a bunch of Formatters and a bunch of Filters). The advantage of SlickGrid (unassembled) is that it can be very small if the user only needs a very basic grid with barely any features, on the other hand I built my libs to be a fully assembled product with all Editors, Filters, Formatters that I need but the cost to this approach is a bigger size and in my use cases I'm ok with this cost.

Just Googled 'Browser-Sync', and it looks interesting, but will it run with ASP NET MVC projects? There is hot reload in VS, but it has all these bugs that make it very slow and it crashes every now and then, so I generally turn it off and manually refresh.

The main reason I added Browser-Sync was to reload the page every time a TypeScript file is recompiled, at the beginning I was annoyed by the constant refresh that I had to do after updating the code. Browser-Sync is mainly for development, you would rarely use it in Production.

Thinking we need some documentation around tools use. Because your tool chain is completely different to mine, I find that I never know if a given tool is relevant to or even compatible with my process.

Yeah I have a huge load of docs for my libs, for example see Slickgrid-Universal - Wikis, I spent a lot of time creating these docs to avoid having too many users opening issues that are more questions than issues, about how to do this or that or whatever... but the fact is that adding SlickGrid docs would basically bring nothing to my libs, so I've never focus on this myself and I always preferred to work on features and fixing bugs, like all these migrations and modernization, which does also help my libs as well. That could maybe be done in the future.

As it stands now, I think that migrating to TypeScript and bringing ES6/ESM support was the last of the last thing left to do on this project. I think that after v5, we will have achieved everything that I could think of in terms of modernizing the lib, which is a good thing because after over 5 years of work on this lib, it's been a long while :)

@ghiscoding
Copy link
Collaborator

ghiscoding commented Aug 10, 2023

So I'm a little surprised but all my Cypress tests are still passing and the Locale switching still seem to work as intended. So I guess that I'm ok with making it the new default. So I'm approving the PR as it is 👍🏻

BTW, I renamed the title to include the feat to follow Conventional Commits and also add ref of issue #805 which I assume it closes... feel free to merge, I'll merge my other PR afterward (waiting to see if merge conflicts occurs, I assume there might)

@6pac
Copy link
Owner Author

6pac commented Aug 10, 2023

OK, merging this now and will switch to next and push the autogen files.

For migration guide, note that

  • the options and columns objects that are passed in are now used as the internal objects, rather than new objects being created.
  • to preserve old behaviour either set option mixinDefaults to false, or pass a freshly created object, like grid = new Slick.Grid("#myGrid", dataView, columns, utils.extend(true, {}, options));

@6pac 6pac merged commit b940ff9 into next Aug 10, 2023
2 checks passed
@6pac 6pac deleted the extend-option-and-column-objects-next branch August 10, 2023 08:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants