feat: allow changing event type

glass-easel/src/event.ts

@@ -177,6 +177,8 @@ export class Event<TDetail> {
   bubbles: boolean
   composed: boolean
   /** @internal */
+  private _$eventName: string
+  /** @internal */
   private _$capturePhase: boolean
   /** @internal */
   private _$originalEvent: unknown
@@ -193,7 +195,7 @@ export class Event<TDetail> {
 
   constructor(name: string, detail: TDetail, options: EventOptions = {}) {
     const ts = getCurrentTimeStamp()
-    this.type = name
+    this._$eventName = this.type = name
     this.timeStamp = ts
     this.detail = detail
     this.bubbles = options.bubbles || false
@@ -229,6 +231,10 @@ export class Event<TDetail> {
     return ret
   }
 
+  getEventName(): string {
+    return this._$eventName
+  }
+
   getOriginalEvent(): unknown {
     return this._$originalEvent
   }
@@ -267,7 +273,7 @@ export class Event<TDetail> {
     target: Element,
     isCapture: boolean,
   ) {
-    const evName = this.type
+    const evName = this._$eventName
 
     const eventTarget = currentTarget._$eventTarget
     if (!eventTarget) return
@@ -303,7 +309,7 @@ export class Event<TDetail> {
       throw new Error('Event cannot be dispatched twice')
     }
     if (ENV.DEV) {
-      addTimelineEvent(this.type, { event: this })
+      addTimelineEvent(this._$eventName, { event: this })
       performanceMeasureStart('event.dispatch')
     }
     this._$dispatched = true

glass-easel/src/tmpl/native_rendering.ts

@@ -137,7 +137,7 @@ export class GlassEaselTemplateDOMInstance implements TemplateInstance, External
     const target = elem as unknown as ElementWithEvent
     let cur: Element = target
     const root = this.shadowRootElement
-    const evName = event.type
+    const evName = event.getEventName()
     const bubbles = event.bubbles
     for (;;) {
       const shadowedEvent = event.wrapShadowedEvent(target as any, null, cur as any)