@rx-angular/cdk
Version:
@rx-angular/cdk is a Component Development Kit for ergonomic and highly performant angular applications. It helps to to build Large scale applications, UI libs, state management, rendering systems and much more. Furthermore the unique way of mixing reacti
356 lines (350 loc) • 9.8 kB
JavaScript
// Standard Events
// Focus Events
const focusEvents = ['blur', 'focus', 'focusin', 'focusout'];
/**
* Mouse Events
* (MouseEvent)[https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent]
*/
const mouseEvents = [
'mousedown',
'dblclick',
'mouseenter',
'mouseleave',
'mousemove',
'mouseout',
'mouseover',
'mouseup',
'click',
];
/**
* Wheel Events
* (WheelEvent)[https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent]
*/
const wheelEvents = [
// (WheelEvent)[https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent]
'wheel',
'mousewheel',
];
// Input Events
const inputEvents = [
'input',
'invalid',
'change',
'reset',
'select',
'submit',
];
/**
* @deprecated
*/
const formControlsEvents = inputEvents;
// [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
const keyboardEvents = ['keydown', 'keypress', 'keyup'];
// [VR]()
const vrEvents = [
'vrdisplayactivate',
'vrdisplayblur',
'vrdisplayconnect',
'vrdisplaydeactivate',
'vrdisplaydisconnect',
'vrdisplayfocus',
'vrdisplaypointerrestricted',
'vrdisplaypointerunrestricted',
'vrdisplaypresentchange',
];
// [MSGesture]()
const mSGestureEvents = [
'MSGestureChange',
'MSGestureDoubleTap',
'MSGestureEnd',
'MSGestureHold',
'MSGestureStart',
'MSGestureTap',
'MSInertiaStart',
'MSPointerCancel',
'MSPointerDown',
'MSPointerEnter',
'MSPointerLeave',
'MSPointerMove',
'MSPointerOut',
'MSPointerOver',
'MSPointerUp',
];
// [xPrint](https://developer.mozilla.org/en-US/docs/Web/API/Window/afterprint_event)
const printEvents = ['afterprint', 'beforeprint'];
// [network]()
const networkEvents = ['offline', 'online'];
// [network]()
const audioEvents = [
'canplay',
'canplaythrough',
'pause',
'play',
'playing',
'volumechange',
];
// Composition Events
const compositionEvents = [
'compositionstart',
'compositionupdate',
'compositionend',
];
/**
* Touch Events
* [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)
* [TouchEvent](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent)
*/
const touchEvents = [
// [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)
'pointerover',
'pointerenter',
'pointerdown',
'pointermove',
// 'pointerrawupdate',
'pointerup',
'pointercancel',
'pointerout',
'pointerleave',
'gotpointercapture',
'lostpointercapture',
'pointerup',
// [TouchEvent](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent)
'touchstart',
'touchend',
'touchmove',
'touchcancel',
// [DragEvent](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent)
'drag',
'dragend',
'dragexit',
'dragenter',
'dragleave',
'dragover',
'dragstart',
'drop',
];
const globalEvents = [
'contextmenu',
'resize',
'scroll',
'abort',
'load',
'loadeddata',
'loadedmetadata',
'loadstart',
'unload',
'error',
];
const websocketEvents = ['close', 'error', 'message', 'open'];
/**
* Basic XHR Events
* [Load](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/load_event)
* [Error](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/error_event)
* There are more events you may want to unpatch https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
*/
// XHREvent (group is here to make it easier to target XHR in angular applications. It contains redundant events e.g. 'error')
const xhrEvents = ['load', 'error'];
// @TODO
const windowEvents = [
'compassneedscalibration',
'durationchange',
'emptied',
'ended',
'orientationchange',
'ratechange',
'seeked',
'seeking',
'stalled',
'suspend',
'timeupdate',
'waiting',
];
/**
* All Events combined
*/
const allEvents = Array.from(new Set([
...focusEvents,
...mouseEvents,
...wheelEvents,
...inputEvents,
...keyboardEvents,
...inputEvents,
...vrEvents,
...mSGestureEvents,
...printEvents,
...networkEvents,
...audioEvents,
...compositionEvents,
...touchEvents,
...globalEvents,
...websocketEvents,
...xhrEvents,
...windowEvents,
]));
const convenienceMethods = (config) => ({
unpatchXHR: () => {
config.global.disable.XHR();
config.events.disable.UNPATCHED_EVENTS([...xhrEvents]);
},
useUnpatchedPassiveScrollEvents: () => {
config.events.disable.PASSIVE_EVENTS(['scroll']);
config.events.disable.UNPATCHED_EVENTS(['scroll']);
},
});
const zoneGlobalDisableConfigurationsKeys = [
'EventEmitter',
'fs',
'node_timers',
'nextTick',
'crypto',
'defineProperty',
'registerElement',
'EventTargetLegacy',
'timers',
'requestAnimationFrame',
'blocking',
'EventTarget',
'FileReader',
'MutationObserver',
'IntersectionObserver',
'on_property',
'customElements',
'XHR',
'geolocation',
'canvas',
'ZoneAwarePromise',
];
const zoneGlobalEventsConfigurationsKeys = ['UNPATCHED_EVENTS', 'PASSIVE_EVENTS'];
const zoneGlobalSettingsConfigurationsKeys = ['DISABLE_WRAPPING_UNCAUGHT_PROMISE_REJECTION'];
const zoneRuntimeConfigurationsKeys = [
'ignoreConsoleErrorUncaughtError',
];
const zoneTestDisableConfigurationsKeys = ['jasmine', 'mocha', 'jest'];
const zoneTestSettingsConfigurationsKeys = [
'fakeAsyncDisablePatchingClock',
'fakeAsyncAutoFakeAsyncWhenClockPatched',
'supportWaitUnResolvedChainedPromise',
];
const zoneDisable = '__Zone_disable_';
const zoneSymbol = '__zone_symbol__';
/**
* https://angular.io/guide/zone#setting-up-zonejs
**/
function assertZoneConfig() {
if (window.Zone !== undefined) {
// @TODO link to docs
console.error('zone-flags file needs to get imported before zone.js');
}
}
const addDisableFlag = (prop) => ({
[prop]: () => {
assertZoneConfig();
return (window[zoneDisable + prop] = true);
},
});
const addSymbolFlag = (prop) => ({
[prop]: () => {
assertZoneConfig();
return (window[zoneSymbol + prop] = true);
},
});
const addArraySymbolFlag = (prop) => ({
[prop]: (eventNames) => {
assertZoneConfig();
const w = window;
return (w[zoneSymbol + prop] = [
...(Array.isArray(w[zoneSymbol + prop]) ? w[zoneSymbol + prop] : []),
...eventNames,
]);
},
});
const reduceToObject = (methodsArray) => {
return methodsArray.reduce((map, item) => ({ ...map, ...item }), {});
};
/**
* factory function to create a `RxZoneConfig` object.
*
* @Example
* import { globalEvents,xhrEvent, zoneConfig} from '@rx-angular/cdk/zone-flags';
*
* const zoneConfig = createZoneFlagsConfigurator();
*
* zoneConfig.global.disable.requestAnimationFrame();
* zoneConfig.global.disable.timers();
* zoneConfig.events.disable.UNPATCHED_EVENTS([...globalEvents, ...xhrEvent]);
*
*/
function createZoneFlagsConfigurator() {
const cfg = globalThis;
const configProps = [
...[
...zoneGlobalDisableConfigurationsKeys,
...zoneTestDisableConfigurationsKeys,
].map((prop) => zoneDisable + prop),
...[
...zoneGlobalSettingsConfigurationsKeys,
...zoneTestSettingsConfigurationsKeys,
...zoneGlobalEventsConfigurationsKeys,
...zoneRuntimeConfigurationsKeys,
].map((prop) => zoneSymbol + prop),
];
// append as global method for easy debugging
cfg.__rxa_zone_config__log = () => {
configProps.forEach((flag) => {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
cfg[flag] && console.log(flag, cfg[flag]);
});
};
const zoneConfigObj = {
global: {
disable: reduceToObject([
...zoneGlobalDisableConfigurationsKeys.map(addDisableFlag),
...zoneGlobalSettingsConfigurationsKeys.map(addSymbolFlag),
]),
},
test: {
disable: reduceToObject([
...zoneTestDisableConfigurationsKeys.map(addDisableFlag),
...zoneTestSettingsConfigurationsKeys.map(addSymbolFlag),
]),
},
events: {
disable: reduceToObject(zoneGlobalEventsConfigurationsKeys.map(addArraySymbolFlag)),
},
runtime: {
disable: reduceToObject(zoneRuntimeConfigurationsKeys.map(addSymbolFlag)),
},
};
return {
...zoneConfigObj,
...convenienceMethods(zoneConfigObj),
};
}
/**
* An object for typed zone-flags configuration.
*
* @Example
*
* create file `zone-flags.ts` parallel to your `polyfills.ts` and insert following content:
* ```typescript
* import { globalEvents, xhrEvent, zoneConfig} from '@rx-angular/cdk/zone-flags';
*
* zoneConfig.global.disable.requestAnimationFrame();
* zoneConfig.global.disable.timers();
* zoneConfig.events.disable.UNPATCHED_EVENTS([...globalEvents, ...xhrEvent]);
* ```
* In `polyfills.ts` above the zone import, import `zone-flags.ts`
*
* ```typescript
* import './zone-flags';
* // Zone JS is required by default for Angular itself.
* import 'zone.js';
* ```
*
*/
const zoneConfig = createZoneFlagsConfigurator();
/**
* Generated bundle index. Do not edit.
*/
export { allEvents, audioEvents, compositionEvents, focusEvents, formControlsEvents, globalEvents, inputEvents, keyboardEvents, mSGestureEvents, mouseEvents, networkEvents, printEvents, touchEvents, vrEvents, websocketEvents, wheelEvents, windowEvents, xhrEvents, zoneConfig };
//# sourceMappingURL=cdk-zone-configurations.mjs.map