This is an Angular library for optimizing performance sensitive events and declarative preventDefault, stopPropagation and capture phase listeners.
Home Page: https://codesandbox.io/s/github/TinkoffCreditSystems/ng-event-plugins/tree/master/projects/demo
License: Apache License 2.0
Before
After
Do you have plans to upgrade to Angular 13+?
Exact type of the $event variable is lost when using .stop and .prevent. This leads to compilation errors like this:
Argument of type 'Event' is not assignable to parameter of type 'MouseEvent'.
https://stackblitz.com/edit/angular-ivy-nmv1wb
The type of $event should be preserved
See stackblitz
After setting up lazy loaded modules, I get the following error in console:
EventManagerModule must come after BrowserModule in imports
Note that I do not import EventManagerModule directly, only @taiga-ui modules, and I do import them after BrowserModule so I'm a bit confused.
Something weird: I had lazy loaded modules without errors and in my case the error occurred as soon as I set up the ssr with Angular Universal. I don't really understand why but working on the reproduction I realized that it had nothing to do with ssr but rather with lazy loaded modules. But again I had no error before using ssr :/
I think that the assertion may not be right?
When I log plugins inside the constructor, we pass twice:
class EventPluginsModule {
/**
* @param {?} plugins
*/
constructor(plugins) {
console.log('!!!!!!!!!!!!!!!');
console.log(plugins);
console.log('!!!!!!!!!!!!!!!');
console.assert(!(plugins[0] instanceof SilentEventPlugin), 'EventManagerModule must come after BrowserModule in imports');
}
}
!!!!!!!!!!!!!!!
[
DomEventsPlugin {
_doc: <ref *1> {
parentNode: null,
_previousSibling: [Circular *1],
_nextSibling: [Circular *1],
_index: undefined,
_childNodes: null,
_firstChild: [Object],
nodeType: 9,
isHTML: true,
_address: 'http://localhost:59992/',
readyState: 'loading',
implementation: [Object],
ownerDocument: null,
_contentType: 'text/html',
doctype: [Object],
documentElement: [HTMLHtmlElement],
_templateDocCache: null,
_nodeIterators: null,
_nid: 1,
_nextnid: 35,
_nodes: [Array],
byId: [Object: null prototype] {},
modclock: 1,
_scripting_enabled: true,
defaultView: [Object]
}
},
KeyEventsPlugin {
_doc: <ref *1> {
parentNode: null,
_previousSibling: [Circular *1],
_nextSibling: [Circular *1],
_index: undefined,
_childNodes: null,
_firstChild: [Object],
nodeType: 9,
isHTML: true,
_address: 'http://localhost:59992/',
readyState: 'loading',
implementation: [Object],
ownerDocument: null,
_contentType: 'text/html',
doctype: [Object],
documentElement: [HTMLHtmlElement],
_templateDocCache: null,
_nodeIterators: null,
_nid: 1,
_nextnid: 35,
_nodes: [Array],
byId: [Object: null prototype] {},
modclock: 1,
_scripting_enabled: true,
defaultView: [Object]
}
},
SilentEventPlugin { modifier: 'silent' },
PreventEventPlugin { modifier: 'prevent' },
SelfEventPlugin { modifier: 'self' },
StopEventPlugin { modifier: 'stop' },
ZoneEventPlugin { modifier: 'init' },
CaptureEventPlugin { modifier: 'capture' },
BindEventPlugin { modifier: '$' },
ServerEventManagerPlugin {
doc: <ref *1> {
parentNode: null,
_previousSibling: [Circular *1],
_nextSibling: [Circular *1],
_index: undefined,
_childNodes: null,
_firstChild: [Object],
nodeType: 9,
isHTML: true,
_address: 'http://localhost:59992/',
readyState: 'loading',
implementation: [Object],
ownerDocument: null,
_contentType: 'text/html',
doctype: [Object],
documentElement: [HTMLHtmlElement],
_templateDocCache: null,
_nodeIterators: null,
_nid: 1,
_nextnid: 35,
_nodes: [Array],
byId: [Object: null prototype] {},
modclock: 1,
_scripting_enabled: true,
defaultView: [Object]
}
}
]
!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!
[
SilentEventPlugin { modifier: 'silent' },
PreventEventPlugin { modifier: 'prevent' },
SelfEventPlugin { modifier: 'self' },
StopEventPlugin { modifier: 'stop' },
ZoneEventPlugin { modifier: 'init' },
CaptureEventPlugin { modifier: 'capture' },
BindEventPlugin { modifier: '$' }
]
!!!!!!!!!!!!!!!
The second time seems ok but indeed the first time SilentEventPlugin is not the first item of the plugins array.
Upgrade to [email protected] caused ShouldCalls in our application to throw this error:
ERROR TypeError: zone.run is not a function
value tinkoff-ng-event-plugins.js:580
ResizableSidebarComponent_mousemove_silent_HostBindingHandler ResizableSidebarComponent.js:8
Angular 15
addEventListener tinkoff-ng-event-plugins.js:344
Angular 3
addEventListener tinkoff-ng-event-plugins.js:341
Angular 5
ResizableSidebarComponent_HostBindings ResizableSidebarComponent.js:7
Angular 4
ClassificationSchemesComponent_Template template.html:1
Angular 22
RxJS 70
seems to be caused by should-call.ts:13, as if its associated init event did not pass Angular ZoneJS instance to it.
In a controller of Angular component:
@HostListener('document:mousemove.silent', ['$event'])
@HostListener('document:init.mousemove', ['$event'])
@ShouldCall(resizeInProgress)
onSideResize(event: MouseEvent) { ... }
Nothing should be thrown.
.stop and .prevent syntax is not correctly handled by angular language service. This leads to errors being displayed by IDE when such syntax is used:
Compare it to the standard click event:
No error is displayed, type of $event is displayed on hover, description of event is displayed on hover.
I'm not sure that this can be fixed on the plugin side, but still creating an issue, as this is very annoying to have these errors all around the IDE.
Added by @waterplea:
Also exact type of the $event variable is lost when using .stop and .prevent. This leads to compilation errors like this:
Argument of type 'Event' is not assignable to parameter of type 'MouseEvent'.
Explore this issue taiga-family/taiga-ui#3393 are this PR taiga-family/taiga-ui#3395
The demo app on codesandbox.io is not working. When the app is loaded the error is thrown
(https://codesandbox.io/s/github/TinkoffCreditSystems/ng-event-plugins/tree/master/projects/demo)
Adding providers manually is scary. Would be nice if there was a module with them added already so people could import it.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google β€οΈ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
