feat(runtime): ability to hook into creating CustomEvent, so vue binding can lowercase it

adamdbradley · adamdbradley · commit a2ce019d1731 · 2020-07-22T14:02:36.000-05:00
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;

Original file line number	Diff line number	Diff line change
`@@ -1716,6 +1716,7 @@ export interface PlatformRuntime {`
`1716`	`1716`	`raf: (c: FrameRequestCallback) => number;`
`1717`	`1717`	`ael: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions) => void;`
`1718`	`1718`	`rel: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions) => void;`
	`1719`	`+ ce: (eventName: string, opts?: any) => CustomEvent;`
`1719`	`1720`	`}`
`1720`	`1721`
`1721`	`1722`	`export type RefMap = WeakMap<any, HostRef>;`