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

BREAKING CHANGE: use Slickgrid-Universal monorepo #466

Merged
merged 34 commits into from
Dec 11, 2020

Conversation

ghiscoding
Copy link
Owner

@ghiscoding ghiscoding commented Nov 27, 2020

Next Major Version 3.x (WIP)

This will be, for the most part, deleting a lot of code and instead use it from the Slickgrid-Universal lib to have 1 common/core lib. Also that lib was built as a monorepo and with that we'll be able to decouple a few Aurelia-Slickgrid Services (Export to File/Excel, OData, GraphQL). So you will end up with a much smaller bundle since you will be bundling only what you really use (without having for example OData/GraphQL that you might never use). For even more info, you can read a full explanation that was posted under an older release here under the section labeled "What's coming in the Future (much later in the year)"

On the migration side, it should be fairly simple, the only changes will be in regards to the Services that get decoupled, you can take a sneak peak at the changes in the upcoming Migration Guide

ETA 🤞 - Wrapping it up for Christmas would be nice 🎁 🎄 🎅

Migration Guide

Minimum Requirement Changes

  • TypeScript >= 4.1.2
  • Aurelia-I18N >= 3.0.0
  • Aurelia-CLI >= 2.0.0
  • Bootstrap >= 4.5.0 (or any other UI framework like Bulma)

List of TODOs

if you want to help, just tell me which number you are planning to provide help with
  • 1. replace all Formatters with Slickgrid-Universal
  • 2. replace all Grouping Formatters with Slickgrid-Universal
  • 3. replace all Aggregators with Slickgrid-Universal
  • 4. replace all Editors with Slickgrid-Universal
  • 5. replace all Editor Valitors with Slickgrid-Universal
  • 6. replace all Filters with Slickgrid-Universal
    • (requires DI) extend AutoCompleteFilter and SelectFilter so that we can watch collection changes with BindingEngine
    • goal change, I might be able to implement collection watch directly in Slickgrid-Universal
  • 7. replace all Filter Conditions with Slickgrid-Universal
  • 8. replace all Models with Slickgrid-Universal (enums, interfaces)
  • 9. replace all Sort Comparers with Slickgrid-Universal
  • 10. replace all Services with Slickgrid-Universal
    • (requires DI) need to extend FilterService for the 2x Filters mentioned at step 6) to be extended
    • goal change (same as 6.), I might be able to implement collection watch directly in Slickgrid-Universal
  • 11. replace all Extensions with Slickgrid-Universal
    • keep RowDetail Extension since it has specific Aurelia code
  • 12. replace all SASS Stylings with Slickgrid-Universal
  • 13. replace all Export to File Service with Slickgrid-Universal Export to File monorepo package
  • 14. replace all Export to Excel Service with Slickgrid-Universal Export to Excel monorepo package
  • 15. replace all Export to OData Service with Slickgrid-Universal OData monorepo package
  • 16. replace all Export to GraphQL Service with Slickgrid-Universal GraphQL monorepo package
  • 17. some of the events might not work on the Aurelia-Slickgrid custom element because the services are now in separate monorepo packages (onGridBeforeExportToFile, onGridAfterExportToFile, onGridBeforeExportToExcel, onGridAfterExportToExcel)
    • the names might be different, it should be onBeforeExportToTextFile, ...
  • 18. add a Translate Service wrapper of Aurelia-I18N for Slickgrid-Universal to work properly
  • 19. add a PubSub Service wrapper of Aurelia-Event-Aggregator for Slickgrid-Universal to work properly
  • 20. upgrade to latest Aurelia-I18N version
  • 21. add demo to cover PR refactor(typings): added new column generic #442 and close issue Type-safe column definitions #441
  • 22. use Bootstrap 4 as a base instead of BS3
  • 23. drop internal copy of 3rd party lib multiple-select.js and use multiple-select-modified instead
  • 24. add yarn.lock file into Git and make use of dependabot, see dependabot.yml config from Slickgrid-Universal
  • 25. create/update Migration Guide Wiki to next version 3.x
  • 26. update all necessary Wikis
    • Export to Excel from @slickgrid-universal/excel-export
    • Export to Text File from @slickgrid-universal/text-export
    • OData Backend Service from @slickgrid-universal/odata
    • GraphQL Backend Service from @slickgrid-universal/graphql
  • 27. rename/move master branch into version2 branch to keep ref to older version
  • 28. create a Git Tag on Aurelia-Slickgrid-Demos of 2.x version before rewriting to newer version
  • 29. add the new SlickGrid Composite Editor + Example
  • 30. Convert dynamic loading of SlickGrid plugins/controls from require(plugin) to await import(plugin)
    • this is causing way too many racing conditions, I will take a look at that much later in the future in separate version.
    • see this article or this other article
  • 31. jQueryUI is imported separately in Slickgrid-Universal (via main.ts), check to see if we need to do that here
  • 32. search for any leftover of TODO, @ts-ignore and/or @deprecated code
  • 33. all Cypress E2E tests should work
  • 34. all Jest Unit Tests should work and try to keep a 100% test coverage
  • 35. remove a few of the npm scripts, we probably don't need to bundle anymore for (jspm, system)
  • 36. rename monorepo FileExportService to TextExportService and also couple of option changes:
    • deprecate exportOptions use new option exportTextOptions
    • deprecate enableExport use new option enableTextExport
  • 37. remove prefix asg and sg from all events in the global grid options (user can put it back in their own configs).

@ghiscoding ghiscoding changed the title feat(core): use Slickgrid-Universal Formatters and override some WIP - break(core): use Slickgrid-Universal monorepo Nov 27, 2020
@codecov
Copy link

codecov bot commented Nov 27, 2020

Codecov Report

Merging #466 (89b7ee1) into master (491c7ff) will not change coverage.
The diff coverage is 100.00%.

Impacted file tree graph

@@             Coverage Diff             @@
##            master      #466     +/-   ##
===========================================
  Coverage   100.00%   100.00%             
===========================================
  Files          168        18    -150     
  Lines        10584      1146   -9438     
  Branches      3466       359   -3107     
===========================================
- Hits         10584      1146   -9438     
Impacted Files Coverage Δ
src/aurelia-slickgrid/extensions/index.ts 100.00% <ø> (ø)
...lia-slickgrid/extensions/rowDetailViewExtension.ts 100.00% <ø> (ø)
src/aurelia-slickgrid/index.ts 100.00% <ø> (ø)
src/aurelia-slickgrid/constants.ts 100.00% <100.00%> (ø)
...lia-slickgrid/custom-elements/aurelia-slickgrid.ts 100.00% <100.00%> (ø)
...d/custom-elements/slick-empty-warning.component.ts 100.00% <100.00%> (ø)
...elia-slickgrid/custom-elements/slick-pagination.ts 100.00% <100.00%> (ø)
src/aurelia-slickgrid/models/index.ts 100.00% <0.00%> (ø)
src/aurelia-slickgrid/services/index.ts 100.00% <0.00%> (ø)
... and 42 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 491c7ff...89b7ee1. Read the comment docs.

@ghiscoding ghiscoding changed the title WIP - break(core): use Slickgrid-Universal monorepo WIP - BREAKING CHANGE: use Slickgrid-Universal monorepo Nov 27, 2020
updates the example2 to show off the new type-safe column.field feature
* update to latest aurelia-i18n version
* add i18next as peerDependency
* remove deprecated @types/i18next dependency
@zewa666
Copy link
Collaborator

zewa666 commented Dec 4, 2020

I've meanwhile pushed the updated example2 and updated to the latest version of aurelia-i18next. Tbh I haven't used i18next yet in side of another library/plugin so I guess the approach going with a peerDependency should be the safest. Will have to check out afterwards with a new project depending on this version.

EDIT: You'll notice the current build state failing due to above mentioned two issues with wrong options types and the way use works. Fixing those will make everything work smoothly.

@zewa666
Copy link
Collaborator

zewa666 commented Dec 4, 2020

also with regards to your mentioned BindingEngine issue from Aurelia's discourse. Could you point me to the location where it causes issues and the steps to reproduce? Are you seeing the errors in your unit tests?

@ghiscoding
Copy link
Owner Author

ghiscoding commented Dec 4, 2020

I tried extending some of the SlickGrid Filters from the monorepo and it wasn't working at all so I removed the code/files in order to push my files to the PR without making the build fail. My plan was to have the commit building without the files and I'll slowly add back some of those files that need to be extended, I'll do that tonight after work.

@zewa666
Copy link
Collaborator

zewa666 commented Dec 5, 2020

Hmm I'm getting a funny error messages of not being allowed to push things to this protected branch due to the codecov issues. do you experience the same?

@ghiscoding
Copy link
Owner Author

ghiscoding commented Dec 5, 2020

I released a new version (2.x) yesterday and that caused a few conflicts here and I had a bit of trouble merging and resolving these conflicts. You might need to force push? Unless it's caused by the branch security I added yesterday, but technically it's just for merging when build passes but anyway I removed it just now. Give it another shot plz

BTW, can you tell me if Aurelia with jspm is still supported, I think it's not anymore right? If so, I'll remove my amd build (I also removed native-modules and system, I've seen those in old Aurelia plugins but probably don't need anymore).

@zewa666
Copy link
Collaborator

zewa666 commented Dec 5, 2020

Yeah guess that branch security is causing it, can check later at the PC. All official Aurelia packages still ship with all combinations. The reason is to support a wider range of bundlers/loaders like requirejs(amd), rollup(most likeley consuming native) and browserify(commonjs). Since those are autogenerated I would keep them arround if they aren't causing issues for you.

As for JSPM I think its safe to drop the package .json part of it as its (sadly) pretty much dead

@ghiscoding ghiscoding marked this pull request as ready for review December 8, 2020 02:36
@ghiscoding
Copy link
Owner Author

ghiscoding commented Dec 8, 2020

@zewa666
So I worked really hard on this for the entire week because I wanted to get this out the door before Xmas and here's what is left to do:

  1. SlickGrid Filters to be extended so that we can use Aurelia Binding Engine to watch array changes
    • for example, the Filters.MultipleSelect (and single) have a collection property that we can enable a watch which will repopulate the dropdown
  2. Filter Service to be extended so that we can use Filter Factory and get step 6 to work
  3. Add new SlickGrid Composite Editor modal window component

For the number 6 and 10 (we can say it needs DI), I did a bit of research and I think that I can actually implement that kind of array watch directly in Slickgrid-Universal without having to rely on Aurelia BindingEngine. From what I found, it's doable with a Proxy object by overriding getters/setters, something like this SO. I think this can wait and be implemented later on, we rarely have to push new dropdown options after the fact anyway. Also that was the main question that I asked on Discourse which Bigopon replied... Note however, that I have also manually instantiated all Slickgrid-Universal Services and it works but of course isn't ideal (DI would be better), I also added all necessary unit tests for all of that, but we can revisit Bigonpon's solution as well later (if you want to take a look at that, feel free to do so and push changes to the PR).

As for the number 29, that is mainly a big new feature, which I've told you about few weeks ago, and is demonstrated under this Slickgrid-Universal Example 12 which is pretty much a CRUD modal window with a bit more features... that can wait, I have to take my vanilla component approach and create an Aurelia Custom Element for it with appropriate unit testing for it, so it might take a week or two to do so.

So I just released an Alpha version 3.0.0-alpha, I also started to modified 1 of the Aurelia-Slickgrid-Demos (BS4) in this PR, it's a bit more changes than I taught so it might scare a few people, but it is now ready for testing, just make sure to read the Migration Guide that I started writing, it should include most of the changes.

Give it a shot and let me know how it goes
Thanks again

@ghiscoding
Copy link
Owner Author

@zewa666
Just a quick update and some questions. I got a way to get the Composite Editor Modal Window working by extracting the component into a separate Lerna package and I will do that in a separate PR because it's a new feature anyway.

So I'd like to merge this PR but I was curious if you had a chance to give a try and/or if you wanted to do more code change/review?

It's looking good for a full release happening quite soon.
Cheers

@zewa666
Copy link
Collaborator

zewa666 commented Dec 10, 2020

Wasnt yet able to take it to a deep dive. I can try to do so tomorrow. Specifically I wanted to check out that no issues with i18n exist.

@ghiscoding
Copy link
Owner Author

ghiscoding commented Dec 11, 2020

@zewa666
I updated all the WebPack Aurelia-Slickgrid-Demos and they all work but I didn't have the same luck with the aurelia-slickgrid-demo cli-requirejs bundle, you can see the changes in this commit for it. I get a few errors and the strange thing though is that even if undo the package.json and re-run npm install, I get the same kind of errors so could that be just on my side!? It seems the requirejs demo no longer works for me, I also tried deleting the node_modules and re-install previous version without luck

I get a bunch of these errors

Error: File not found with singular glob: C:\GitHub\aurelia-slickgrid-demos\cli-requirejs-demo\node_modules\@slickgrid-universal\excel-export\index.js (if this was purposeful, use `allowEmpty` option)
    at Glob.<anonymous> (C:\GitHub\aurelia-slickgrid-demos\cli-requirejs-demo\node_modules\glob-stream\readable.js:84:17)

Things to note, all the Slickgrid-Universal packages are exported as 2 dist bundles (commonJS and es2015) and I don't really want to add more dist targets unless I really have to. I add more couple days ago but then when I started extracting the Composite Editor, I ran into "out of memory with CircleCI", so I hope it works with just commonJS. I didn't have time to try with a new CLI project

Hope you have better luck than me.

@zewa666
Copy link
Collaborator

zewa666 commented Dec 11, 2020

I wonder why it's looking for a file index.js in the root of the excel-export folder as it's indicated to use the commonjs one. Very interesting. I'll take a look at that as the sample is the same setup as my app.

@zewa666
Copy link
Collaborator

zewa666 commented Dec 11, 2020

@ghiscoding alright this was quick. So good news is it works, bad news is it's ugly.

Seems the sub-dependencies excel-export, graphql, odata, text-export and common all get the same kind of issue looking for the index.js in the root of their node_modules folders instead of dist/commonjs/index.js.

The workaround for now is to add

{
            "name": "@slickgrid-universal/excel-export",
            "path": "../node_modules/@slickgrid-universal/excel-export/dist/commonjs",
            "main": "index"
          },
          {
            "name": "@slickgrid-universal/graphql",
            "path": "../node_modules/@slickgrid-universal/graphql/dist/commonjs",
            "main": "index"
          },
          {
            "name": "@slickgrid-universal/odata",
            "path": "../node_modules/@slickgrid-universal/odata/dist/commonjs",
            "main": "index"
          },
          {
            "name": "@slickgrid-universal/text-export",
            "path": "../node_modules/@slickgrid-universal/text-export/dist/commonjs",
            "main": "index"
          },
          {
            "name": "@slickgrid-universal/common",
            "path": "../node_modules/@slickgrid-universal/common/dist/commonjs",
            "main": "index"
          }

So as said while this works, it's not fixing the root-cause. But at least I can now tell that the new alpha builds properly for requirejs and i18n seems to work as expected. So all clear for my app 🥳

@zewa666
Copy link
Collaborator

zewa666 commented Dec 11, 2020

Btw. I'm still not able to push to the branch (the mentioned minor ui fix) due to the same protection issue.

Anyways I'm attaching the patch here as it's really small

diff --git a/src/examples/slickgrid/example12.html b/src/examples/slickgrid/example12.html
index 4f610bd8..4219619e 100644
--- a/src/examples/slickgrid/example12.html
+++ b/src/examples/slickgrid/example12.html
@@ -4,13 +4,13 @@
 
   <hr />
 
-  <div class="row">
+  <div class="row align-items-center">
     <button class="btn btn-outline-secondary btn-sm" data-test="language-button" click.delegate="switchLanguage()">
       <i class="fa fa-language"></i>
       Switch Language
     </button>
-    <label>Locale:</label>
-    <span style="font-style: italic" data-test="selected-locale">
+    <label style="margin: 0 5px">Locale:</label>
+    <span style="font-style: italic; width: 70px;" data-test="selected-locale">
       ${selectedLanguage + '.json'}
     </span>

},
"devDependencies": {
"@slickgrid-universal/excel-export": "^0.4.1",
Copy link
Collaborator

Choose a reason for hiding this comment

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

I've noticed the example uses v 0.5.1. Besides that why is this listed as a devDependency here but as normal dependency for the consumer -> the samples?

Copy link
Owner Author

Choose a reason for hiding this comment

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

I've pushed 0.5.1 yesterday that includes the Composite Editor as a new Lerna package and was waiting to merge this PR and then create another PR to update to 0.5.1 and add Composite Editor. They are all devDependencies because they are really optional, I add them here so I can run Cypress tests and make sure everything works. The only Lerna that is essential is the /common, all other ones are optional, does that make sense?

Copy link
Owner Author

Choose a reason for hiding this comment

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

I added a note in the aurelia-slickgrid-demo saying that those are installed only for demo purposes and should be removed from your dependencies if you don't use the feature, see this readme note

Copy link
Collaborator

Choose a reason for hiding this comment

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

Ok cool. I was wondering whether that was causing the rjs issue

Copy link
Owner Author

@ghiscoding ghiscoding Dec 11, 2020

Choose a reason for hiding this comment

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

I assume this is resolve then? Let me know if there's anything else to do before merging this PR, probably later tonight, so I can create the next PR for Composite Editor. Also note that I create a version2 branch last week, so I still have previous code if something goes awfully wrong. This PR is getting quite long

Copy link
Collaborator

@zewa666 zewa666 Dec 11, 2020

Choose a reason for hiding this comment

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

Yeah, as said rjs has only limited spread and there is a workaround. So this shouldnt block the release.

We can ship the fix once found later as well, meanwhile an docs update with the workaround is good enough

@ghiscoding ghiscoding changed the title WIP - BREAKING CHANGE: use Slickgrid-Universal monorepo BREAKING CHANGE: use Slickgrid-Universal monorepo Dec 11, 2020
@ghiscoding ghiscoding merged commit ed0e090 into master Dec 11, 2020
@ghiscoding
Copy link
Owner Author

@zewa666
Merged in master branch, feel free to create PR for anything else you wanna change.
Thanks for the great collaboration on this big PR

@zewa666
Copy link
Collaborator

zewa666 commented Dec 11, 2020

Big thanks to you for the great effort in unifying also the Aurelia version.

@ghiscoding ghiscoding deleted the feat/version-next-universal branch December 17, 2020 04:29
@ghiscoding ghiscoding removed the wip label May 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants