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

feat: use PubSub Service with Web Component demo to subscribe instead of SlickEvent #859

Merged
merged 7 commits into from
Dec 7, 2023

Conversation

ghiscoding
Copy link
Collaborator

@ghiscoding ghiscoding commented Oct 7, 2023

An optional PubSub Service could be provided to SlickGrid and SlickDataView to use as a singleton PubSub to make it easier to subscribe to any event in 1 PubSub instance reference, this makes it a lot easier for Web Component based framework like Angular/React/Vue... For example, we can create a PubSub Service which uses JavaScript CustomEvent which we can then use it to send all events to our web component with all possible events (SlickGrid, DataView, plugins...) which is another alternative instead of having to subscribe to individual SlickEvent instances (grid, dataview, plugins, ...)

For this to work we needed to apply the following changes in this PR

  • add event name in SlickEvent constructor and provide event name for all of them
    • the event name is important since after a build, it will lose its original SlickEvent variable name once minified
  • add a new method setPubSubService() to SlickEvent
  • call PubSub publish function when a PubSub Service is provided to the SlickEvent

The best example can be seen with Angular-Slickgrid Component and it is preferable for us to use CustomEvent as shown below via Component attributes like (onClick) and this is all achievable via a PubSub. For this to work, we use a JS CustomEvent based PubSub and we simply make the <my-component> component tag as the target to receive all the events via CustomEvent

<my-component
    on-before-menu-show="onBeforeMenuShow"
    on-menu-close="onMenuClose"
    on-paging-info-changed="onPagingInfoChanged"
    on-before-paging-info-changed="onBeforePagingInfoChanged">
</my-component>

This is the approach that we used for a while in Slickgrid-Universal, Angular-Slickgrid, ... Prior to this feature, what we were doing in Angular-Slickgrid was to loop through all SlickGrid/DataView events and .subscribe to every single SlickEvent and whenever a SlickEvent was calling .notify, we were then redispatching as a CustomEvent to our web component to receive the final event. Basically this was pretty much acting as a middleware, this PR will simply remove the middleware need since providing a PubSub will also call its .publish() method. We used the middleware approach for the past couple years and that worked but was not the most efficient way since we were subscribing for events that we may never use, however with this new feature it allows us to subscribe to only the events that we are interested in with a single PubSub instance (singleton) while still allowing SlickEvent notify/subscribe to work, so it is an optional additional feature and does not introduce any breaking change.

TODOs

  • create a new Example to test with and provide a custom PubSub Service
    • perhaps also wrap it under a <my-component> tag for a full demo of what this feature brings
    • make sure to emphasize the unsubscribeAll() when destroying the component
    • make sure that few controls/plugins also work (adding more Cypress tests might be good)
  • add Cypress E2E tests

@ghiscoding ghiscoding changed the title feat: add optional SlickEvent dispatchEventTarget to dispatch event WIP - feat: add optional SlickEvent dispatchEventTarget to dispatch event Oct 8, 2023
@ghiscoding ghiscoding force-pushed the feat/slick-event-dispatch branch from 0210918 to 872cbc1 Compare October 14, 2023 22:32
@ghiscoding ghiscoding marked this pull request as draft October 19, 2023 14:54
@ghiscoding ghiscoding force-pushed the feat/slick-event-dispatch branch from da73f57 to b4fdd93 Compare December 5, 2023 04:41
@ghiscoding ghiscoding changed the title WIP - feat: add optional SlickEvent dispatchEventTarget to dispatch event feat: use PubSub Service to subscribe instead of SlickEvent Dec 6, 2023
@ghiscoding ghiscoding marked this pull request as ready for review December 6, 2023 06:02
@ghiscoding ghiscoding changed the title feat: use PubSub Service to subscribe instead of SlickEvent feat: use PubSub Service singleton to subscribe to any SlickEvent Dec 6, 2023
@ghiscoding ghiscoding merged commit 7d602e6 into master Dec 7, 2023
2 checks passed
@ghiscoding ghiscoding deleted the feat/slick-event-dispatch branch December 7, 2023 03:02
@ghiscoding ghiscoding changed the title feat: use PubSub Service singleton to subscribe to any SlickEvent feat: use PubSub Service with Web Component demo to subscribe instead of SlickEvent Dec 7, 2023
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.

1 participant