Bump webpack and remove event-target-shim (#5156)

* Bump webpack and remove event-target-shim

* Update entry

Author: compulim

CHANGELOG.md

@@ -22,6 +22,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Known issues
+
+-  Web Chat is not loading with error `Uncaught TypeError: Super constructor null of anonymous class is not a constructor`
+   -  A [bug in webpack@>=5.84.1](https://github.com/webpack/webpack/issues/17711) is causing the issue. Please update to [`webpack@>=5.90.0`](https://npmjs.com/package/webpack/v/5.90.0)
+
 ### Breaking changes
 
 -  `useSendMessage` hook is updated to support sending attachments with a message. To reduce complexity, the `useSendFiles` hook is being deprecated. The hook will be removed on or after 2026-04-03
@@ -70,11 +75,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes type portability issues by exporting types from all exported code, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
 -  Fixes missing exports of `useNotifications`, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
 -  Fixes suggested actions keyboard navigation skips actions after suggested actions got updated, in PR [#5150](https://github.com/microsoft/BotFramework-WebChat/pull/5150), by [@OEvgeny](https://github.com/OEvgeny)
+-  Fixes [#5155](https://github.com/microsoft/BotFramework-WebChat/issues/5155). Fixed "Super constructor null of anonymous class is not a constructor" error in CDN bundle by bumping to [`webpack@5.91.0`](https://www.npmjs.com/package/webpack/v/5.91.0), in PR [#5156](https://github.com/microsoft/BotFramework-WebChat/pull/5156), by [@compulim](https://github.com/compulim)
 
 ### Changed
 
 -  Moved pull request validation pipeline to GitHub Actions, by [@compulim](https://github.com/compulim), in PR [#4976](https://github.com/microsoft/BotFramework-WebChat/pull/4976)
--  Bumped all dependencies to the latest versions, by [@compulim](https://github.com/compulim) in PR [#4973](https://github.com/microsoft/BotFramework-WebChat/pull/4973), PR [#5115](https://github.com/microsoft/BotFramework-WebChat/pull/5115), and PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148)
+-  Bumped all dependencies to the latest versions, by [@compulim](https://github.com/compulim) in PR [#4973](https://github.com/microsoft/BotFramework-WebChat/pull/4973), PR [#5115](https://github.com/microsoft/BotFramework-WebChat/pull/5115), PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), and PR [#5156](https://github.com/microsoft/BotFramework-WebChat/pull/5156)
    -  Notes: Some components/features in Adaptive Cards are in preview and not ready for production use. Web Chat does not support these components and features
    -  Production dependencies
       -  [`adaptivecards@3.0.2`](https://npmjs.com/package/adaptivecards)
@@ -112,7 +118,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
       -  [`read-pkg@9.0.1`](https://npmjs.com/package/read-pkg)
       -  [`selenium-webdriver@4.15.0`](https://npmjs.com/package/selenium-webdriver)
       -  [`typescript@5.3.2`](https://npmjs.com/package/typescript)
-      -  [`webpack@5.89.0`](https://npmjs.com/package/webpack)
+      -  [`webpack@5.91.0`](https://npmjs.com/package/webpack)
 
 ## [4.16.0] - 2023-11-16
 

packages/bundle/package-lock.json

@@ -169,7 +169,7 @@
     "tsd": "^0.30.3",
     "type-fest": "^4.9.0",
     "typescript": "^5.3.2",
-    "webpack": "^5.89.0",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
     "webpack-stats-plugin": "^1.1.3"
   },

packages/bundle/package.json

@@ -120,7 +120,6 @@
     "classnames": "2.3.2",
     "compute-scroll-into-view": "1.0.20",
     "deep-freeze-strict": "^1.1.1",
-    "event-target-shim": "6.0.2",
     "markdown-it": "13.0.2",
     "math-random": "2.0.1",
     "mdast-util-from-markdown": "2.0.0",

packages/component/package-lock.json

@@ -6,7 +6,7 @@
 /* eslint max-classes-per-file: ["error", 4] */
 /* eslint no-empty-function: "off" */
 
-import EventTarget, { Event, getEventAttributeValue, setEventAttributeValue } from 'event-target-shim';
+import createOnEventShim from './private/createOnEventShim';
 
 class SpeechSynthesisEvent extends Event {
   constructor(type, utterance) {
@@ -42,6 +42,8 @@ class SpeechSynthesisUtterance extends EventTarget {
     this._text = text;
     this._voice = null;
     this._volume = 1;
+
+    this._shim = createOnEventShim(this);
   }
 
   get lang() {
@@ -93,59 +95,59 @@ class SpeechSynthesisUtterance extends EventTarget {
   }
 
   get onboundary() {
-    return getEventAttributeValue(this, 'boundary');
+    return this._shim.get('boundary');
   }
 
   set onboundary(value) {
-    setEventAttributeValue(this, 'boundary', value);
+    this._shim.set('boundary', value);
   }
 
   get onend() {
-    return getEventAttributeValue(this, 'end');
+    return this._shim.get('end');
   }
 
   set onend(value) {
-    setEventAttributeValue(this, 'end', value);
+    this._shim.set('end', value);
   }
 
   get onerror() {
-    return getEventAttributeValue(this, 'error');
+    return this._shim.get('error');
   }
 
   set onerror(value) {
-    setEventAttributeValue(this, 'error', value);
+    this._shim.set('error', value);
   }
 
   get onmark() {
-    return getEventAttributeValue(this, 'mark');
+    return this._shim.get('mark');
   }
 
   set onmark(value) {
-    setEventAttributeValue(this, 'mark', value);
+    this._shim.set('mark', value);
   }
 
   get onpause() {
-    return getEventAttributeValue(this, 'pause');
+    return this._shim.get('pause');
   }
 
   set onpause(value) {
-    setEventAttributeValue(this, 'pause', value);
+    this._shim.set('pause', value);
   }
 
   get onresume() {
-    return getEventAttributeValue(this, 'resume');
+    return this._shim.get('resume');
   }
 
   set onresume(value) {
-    setEventAttributeValue(this, 'resume', value);
+    this._shim.set('resume', value);
   }
 
   get onstart() {
-    return getEventAttributeValue(this, 'start');
+    return this._shim.get('start');
   }
 
   set onstart(value) {
-    setEventAttributeValue(this, 'start', value);
+    this._shim.set('start', value);
   }
 }
 
@@ -172,6 +174,12 @@ class SpeechSynthesisVoice {
 }
 
 class SpeechSynthesis extends EventTarget {
+  constructor() {
+    super();
+
+    this._shim = createOnEventShim(this);
+  }
+
   get paused() {
     return false;
   }
@@ -204,14 +212,14 @@ class SpeechSynthesis extends EventTarget {
   }
 
   get onvoiceschanged() {
-    return getEventAttributeValue(this, 'voiceschanged');
+    return this._shim.get('voiceschanged');
   }
 
   set onvoiceschanged(value) {
-    setEventAttributeValue(this, 'voiceschanged', value);
+    this._shim.set('voiceschanged', value);
   }
 }
 
 const speechSynthesis = new SpeechSynthesis();
 
-export { speechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance, SpeechSynthesisVoice };
+export { SpeechSynthesisEvent, SpeechSynthesisUtterance, SpeechSynthesisVoice, speechSynthesis };

packages/component/package.json

@@ -0,0 +1,90 @@
+import createOnEventShim from './createOnEventShim';
+
+describe('A shimmed event target', () => {
+  class MyEventTarget extends EventTarget {
+    #shim = createOnEventShim<'message'>(this);
+
+    get onmessage() {
+      return this.#shim.get('message');
+    }
+
+    set onmessage(listener: EventListener) {
+      this.#shim.set('message', listener);
+    }
+  }
+
+  describe('with an "onmessage" handler', () => {
+    let eventTarget: MyEventTarget;
+    let messageEventListener: jest.Mock<void, []>;
+
+    beforeEach(() => {
+      eventTarget = new MyEventTarget();
+      messageEventListener = jest.fn();
+      eventTarget.onmessage = messageEventListener;
+    });
+
+    test('"onmessage" getter should return the event listener', () =>
+      expect(eventTarget.onmessage).toBe(messageEventListener));
+
+    describe('when a "message" event is dispatched', () => {
+      let messageEvent: Event;
+
+      beforeEach(() => {
+        messageEvent = new Event('message');
+        eventTarget.dispatchEvent(messageEvent);
+      });
+
+      test('"onmessage" handler should be called once', () => expect(messageEventListener).toHaveBeenCalledTimes(1));
+      test('"onmessage" handler should be called with the event', () =>
+        expect(messageEventListener).toHaveBeenNthCalledWith(1, messageEvent));
+    });
+
+    describe('replaced with another "onmessage" handler', () => {
+      let anotherMessageEventListener: jest.Mock<void, []>;
+
+      beforeEach(() => {
+        anotherMessageEventListener = jest.fn();
+        eventTarget.onmessage = anotherMessageEventListener;
+      });
+
+      test('"onmessage" getter should return the updated event listener', () =>
+        expect(eventTarget.onmessage).toBe(anotherMessageEventListener));
+
+      describe('when a "message" event is dispatched', () => {
+        let messageEvent: Event;
+
+        beforeEach(() => {
+          messageEvent = new Event('message');
+          eventTarget.dispatchEvent(messageEvent);
+        });
+
+        test('the previous "onmessage" handler should not be called', () =>
+          expect(messageEventListener).toHaveBeenCalledTimes(0));
+        test('the updated "onmessage" handler should be called once', () =>
+          expect(anotherMessageEventListener).toHaveBeenCalledTimes(1));
+        test('the updated "onmessage" handler should be called with the event', () =>
+          expect(anotherMessageEventListener).toHaveBeenNthCalledWith(1, messageEvent));
+      });
+    });
+
+    describe('when the handler is removed', () => {
+      beforeEach(() => {
+        eventTarget.onmessage = null;
+      });
+
+      test('"onmessage" getter should return falsy', () => expect(eventTarget.onmessage).toBeFalsy());
+
+      describe('when a "message" event is dispatched', () => {
+        let messageEvent: Event;
+
+        beforeEach(() => {
+          messageEvent = new Event('message');
+          eventTarget.dispatchEvent(messageEvent);
+        });
+
+        test('the removed "onmessage" handler should not be called', () =>
+          expect(messageEventListener).toHaveBeenCalledTimes(0));
+      });
+    });
+  });
+});

packages/component/src/hooks/internal/BypassSpeechSynthesisPonyfill.js

@@ -0,0 +1,23 @@
+export default function createOnEventShim<Name extends string = string, Target extends EventTarget = EventTarget>(
+  target: Target
+) {
+  const currentListeners: Map<Name, EventListener> = new Map();
+
+  return {
+    get(name: Name): EventListener | undefined {
+      return currentListeners.get(name);
+    },
+    set(name: Name, listener: EventListener | undefined): void {
+      const current = currentListeners.get(name);
+
+      current && target.removeEventListener(name, current);
+
+      if (listener) {
+        target.addEventListener(name, listener);
+        currentListeners.set(name, listener);
+      } else {
+        currentListeners.delete(name);
+      }
+    }
+  };
+}

packages/component/src/hooks/internal/private/createOnEventShim.spec.ts

@@ -5,6 +5,5 @@ export default defineConfig({
   ...baseConfig,
   entry: {
     'botframework-webchat-component': './src/index.ts'
-  },
-  noExternal: ['event-target-shim']
+  }
 });

packages/component/src/hooks/internal/private/createOnEventShim.ts

@@ -27,5 +27,6 @@ export default defineConfig({
     SPEECH_OCSP_CACHE_ROOT: ''
   },
   esbuildPlugins: [resolveCognitiveServicesToES2015],
+  // We need to internalize event-target-shim because it appear as transient packages with a different version.
   noExternal: ['event-target-shim']
 });