feat(runtime): ability to hook into creating CustomEvent, so vue bind…

…ing can lowercase it
ionic-team · Jul 22, 2020 · a2ce019 · a2ce019
1 parent a06a941
commit a2ce019
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 2 deletions.
diff --git a/src/client/client-window.ts b/src/client/client-window.ts
@@ -16,6 +16,7 @@ export const plt: d.PlatformRuntime = {
   raf: h => requestAnimationFrame(h),
   ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
+  ce: (eventName, opts) => new CustomEvent(eventName, opts),
 };
 
 export const supportsShadow = BUILD.shadowDomShim && BUILD.shadowDom ? /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)() : true;

diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts
@@ -1716,6 +1716,7 @@ export interface PlatformRuntime {
   raf: (c: FrameRequestCallback) => number;
   ael: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  ce: (eventName: string, opts?: any) => CustomEvent;
 }
 
 export type RefMap = WeakMap<any, HostRef>;

diff --git a/src/hydrate/platform/index.ts b/src/hydrate/platform/index.ts
@@ -98,6 +98,7 @@ export const plt: d.PlatformRuntime = {
   raf: h => requestAnimationFrame(h),
   ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
+  ce: (eventName, opts) => new win.CustomEvent(eventName, opts),
 };
 
 export const supportsShadow = false;

diff --git a/src/runtime/event-emitter.ts b/src/runtime/event-emitter.ts
@@ -1,6 +1,6 @@
 import * as d from '../declarations';
 import { BUILD } from '@app-data';
-import { consoleDevWarn, win } from '@platform';
+import { consoleDevWarn, plt } from '@platform';
 import { EVENT_FLAGS } from '@utils';
 import { getElement } from './element';
 
@@ -22,7 +22,7 @@ export const createEvent = (ref: d.RuntimeRef, name: string, flags: number) => {
 };
 
 export const emitEvent = (elm: EventTarget, name: string, opts?: CustomEventInit) => {
-  const ev = new (BUILD.hydrateServerSide ? (win as any).CustomEvent : CustomEvent)(name, opts);
+  const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
   return ev;
 };
diff --git a/src/testing/platform/testing-platform.ts b/src/testing/platform/testing-platform.ts
@@ -12,6 +12,7 @@ export const plt: d.PlatformRuntime = {
   raf: h => requestAnimationFrame(h),
   ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
+  ce: (eventName, opts) => new (win as any).CustomEvent(eventName, opts),
 };
 
 export const cssVarShim: d.CssVarShim = false as any;