@epicgames-ps/lib-pixelstreamingfrontend-ue5.5 1.0.3 → 1.2.1

package/src/Config/Config.ts

@@ -7,6 +7,7 @@ import { SettingText } from './SettingText';
 import { SettingOption } from './SettingOption';
 import { PixelStreamingEventEmitter, SettingsChangedEvent } from '../Util/EventEmitter';
 import { SettingBase } from './SettingBase';
+import { BrowserUtils } from '../Util/BrowserUtils';
 
 /**
  * A collection of flags that can be toggled and are core to all Pixel Streaming experiences.
@@ -25,6 +26,7 @@ export class Flags {
     static StartVideoMuted = 'StartVideoMuted' as const;
     static SuppressBrowserKeys = 'SuppressBrowserKeys' as const;
     static UseMic = 'UseMic' as const;
+    static UseModalForTextInput = 'UseModalForTextInput' as const;
     static UseCamera = 'UseCamera' as const;
     static KeyboardInput = 'KeyboardInput' as const;
     static MouseInput = 'MouseInput' as const;
@@ -214,33 +216,8 @@ export class Config {
             )
         );
 
-        const getBrowserSupportedVideoCodecs = function (): Array<string> {
-            const browserSupportedCodecs: Array<string> = [];
-            // Try get the info needed from the RTCRtpReceiver. This is only available on chrome
-            if (!RTCRtpReceiver.getCapabilities) {
-                Logger.Warning(
-                    'RTCRtpReceiver.getCapabilities API is not available in your browser, defaulting to guess that we support H.264.'
-                );
-                browserSupportedCodecs.push(
-                    'H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f'
-                );
-                return browserSupportedCodecs;
-            }
-
-            const matcher = /(VP\d|H26\d|AV1).*/;
-            const codecs = RTCRtpReceiver.getCapabilities('video').codecs;
-            codecs.forEach((codec) => {
-                const str = codec.mimeType.split('/')[1] + ' ' + (codec.sdpFmtpLine || '');
-                const match = matcher.exec(str);
-                if (match !== null) {
-                    browserSupportedCodecs.push(str);
-                }
-            });
-            return browserSupportedCodecs;
-        };
-
         const getDefaultVideoCodec = function (): string {
-            const videoCodecs = getBrowserSupportedVideoCodecs();
+            const videoCodecs = BrowserUtils.getSupportedVideoCodecs();
             // If only one option, then select that.
             if (videoCodecs.length == 1) {
                 return videoCodecs[0];
@@ -259,7 +236,7 @@ export class Config {
         };
 
         const matchSpecifiedCodecToClosestSupported = function (specifiedCodec: string): string {
-            const browserSupportedCodecs: Array<string> = getBrowserSupportedVideoCodecs();
+            const browserSupportedCodecs: Array<string> = BrowserUtils.getSupportedVideoCodecs();
 
             // Codec supplied in url param is an exact match for the browser codec.
             // (e.g. H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f)
@@ -290,7 +267,7 @@ export class Config {
                 settings && Object.prototype.hasOwnProperty.call(settings, OptionParameters.PreferredCodec)
                     ? matchSpecifiedCodecToClosestSupported(settings[OptionParameters.PreferredCodec])
                     : getDefaultVideoCodec(),
-                getBrowserSupportedVideoCodecs(),
+                BrowserUtils.getSupportedVideoCodecs(),
                 useUrlParams,
                 matchSpecifiedCodecToClosestSupported
             )
@@ -353,6 +330,19 @@ export class Config {
             )
         );
 
+        this.flags.set(
+            Flags.UseModalForTextInput,
+            new SettingFlag(
+                Flags.UseModalForTextInput,
+                'Use modal for text input',
+                'When entering input into a streamed UE text widget, use an input modal.',
+                settings && Object.prototype.hasOwnProperty.call(settings, Flags.UseModalForTextInput)
+                    ? settings[Flags.UseModalForTextInput]
+                    : true,
+                useUrlParams
+            )
+        );
+
         this.flags.set(
             Flags.UseCamera,
             new SettingFlag(

package/src/Config/SettingBase.ts

@@ -18,7 +18,7 @@ export class SettingBase {
         label: string,
         description: string,
         defaultSettingValue: unknown,
-         
+
         defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
             /* Do nothing, to be overridden. */
         }

package/src/Config/SettingFlag.ts

@@ -16,7 +16,7 @@ export class SettingFlag<CustomIds extends string = FlagsIds> extends SettingBas
         description: string,
         defaultFlagValue: boolean,
         useUrlParams: boolean,
-         
+
         defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
             /* Do nothing, to be overridden. */
         }

package/src/Config/SettingNumber.ts

@@ -21,7 +21,7 @@ export class SettingNumber<CustomIds extends string = NumericParametersIds> exte
         max: number | null,
         defaultNumber: number,
         useUrlParams: boolean,
-         
+
         defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
             /* Do nothing, to be overridden. */
         }

package/src/Config/SettingOption.ts

@@ -22,12 +22,12 @@ export class SettingOption<CustomIds extends string = OptionParametersIds> exten
         defaultTextValue: string,
         options: Array<string>,
         useUrlParams: boolean,
-         
+
         defaultUrlParamResolver: (urlParamValue: string) => string = function (value: string) {
             /* Return the string as-is by default */
             return value;
         },
-         
+
         defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
             /* Do nothing, to be overridden. */
         }

package/src/Config/SettingText.ts

@@ -17,7 +17,7 @@ export class SettingText<CustomIds extends string = TextParametersIds> extends S
         description: string,
         defaultTextValue: string,
         useUrlParams: boolean,
-         
+
         defaultOnChangeListener: (changedValue: unknown, setting: SettingBase) => void = () => {
             /* Do nothing, to be overridden. */
         }

package/src/Inputs/GamepadController.ts

@@ -21,7 +21,7 @@ declare global {
 /**
  * Gamepad layout codes enum
  */
- 
+
 export enum GamepadLayout {
     RightClusterBottomButton = 0,
     RightClusterRightButton = 1,
@@ -46,7 +46,6 @@ export enum GamepadLayout {
     RightStickHorizontal = 2,
     RightStickVertical = 3
 }
- 
 
 /**
  * Handles gamepad events from the document to send to the streamer.

package/src/Inputs/IInputController.ts

@@ -1,3 +1,4 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
 /**
  * The base interface for all input controllers.
  * Since controllers mostly just register events and handle them the external interface is limited

package/src/Inputs/KeyboardController.ts

@@ -19,7 +19,6 @@ export class KeyboardController implements IInputController {
     onKeyDownListener: (event: KeyboardEvent) => void;
     onKeyUpListener: (event: KeyboardEvent) => void;
     onKeyPressListener: (event: KeyboardEvent) => void;
-    onCompositionEndListener: (event: CompositionEvent) => void;
 
     constructor(streamMessageController: StreamMessageController, config: Config, activeKeys: ActiveKeys) {
         this.streamMessageController = streamMessageController;
@@ -29,11 +28,9 @@ export class KeyboardController implements IInputController {
         this.onKeyDownListener = this.handleOnKeyDown.bind(this);
         this.onKeyUpListener = this.handleOnKeyUp.bind(this);
         this.onKeyPressListener = this.handleOnKeyPress.bind(this);
-        this.onCompositionEndListener = this.handleOnCompositionEnd.bind(this);
     }
 
     register() {
-        document.addEventListener('compositionend', this.onCompositionEndListener);
         document.addEventListener('keydown', this.onKeyDownListener);
         document.addEventListener('keyup', this.onKeyUpListener);
         //This has been deprecated as at Jun 13 2021
@@ -41,7 +38,6 @@ export class KeyboardController implements IInputController {
     }
 
     unregister() {
-        document.removeEventListener('compositionend', this.onCompositionEndListener);
         document.removeEventListener('keydown', this.onKeyDownListener);
         document.removeEventListener('keyup', this.onKeyUpListener);
         document.removeEventListener('keypress', this.onKeyPressListener);
@@ -100,33 +96,6 @@ export class KeyboardController implements IInputController {
         toStreamerHandlers.get('KeyPress')?.([keyCode]);
     }
 
-    private handleOnCompositionEnd(compositionEvent: CompositionEvent) {
-        if (compositionEvent.data && compositionEvent.data.length) {
-            compositionEvent.data.split('').forEach((char) => {
-                // This keydown, keypress, keyup flow is required to mimic the way characters are
-                // normally triggered
-                this.handleOnKeyDown(
-                    new KeyboardEvent('keydown', {
-                        keyCode: char.toUpperCase().charCodeAt(0),
-                        charCode: char.charCodeAt(0)
-                    })
-                );
-                this.handleOnKeyPress(
-                    new KeyboardEvent('keypress', {
-                        keyCode: char.toUpperCase().charCodeAt(0),
-                        charCode: char.charCodeAt(0)
-                    })
-                );
-                this.handleOnKeyUp(
-                    new KeyboardEvent('keyup', {
-                        keyCode: char.toUpperCase().charCodeAt(0),
-                        charCode: char.charCodeAt(0)
-                    })
-                );
-            });
-        }
-    }
-
     /**
      * Gets the Keycode of the Key pressed
      * @param keyboardEvent - Key board Event

package/src/Inputs/MouseController.ts

@@ -1,3 +1,4 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
 import { MouseButtonsMask, MouseButton } from './MouseButtons';
 import { StreamMessageController } from '../UeInstanceMessage/StreamMessageController';
 import { InputCoordTranslator } from '../Util/InputCoordTranslator';
@@ -57,22 +58,22 @@ export class MouseController implements IInputController {
     }
 
     registerMouseEnterAndLeaveEvents() {
-        const videoElementParent = this.videoPlayer.getVideoParentElement() as HTMLDivElement;
-        videoElementParent.addEventListener('mouseenter', this.onEnterListener);
-        videoElementParent.addEventListener('mouseleave', this.onLeaveListener);
+        const videoElementParent = this.videoPlayer.getVideoParentElement();
+        videoElementParent?.addEventListener('mouseenter', this.onEnterListener);
+        videoElementParent?.addEventListener('mouseleave', this.onLeaveListener);
     }
 
     unregisterMouseEnterAndLeaveEvents() {
-        const videoElementParent = this.videoPlayer.getVideoParentElement() as HTMLDivElement;
-        videoElementParent.removeEventListener('mouseenter', this.onEnterListener);
-        videoElementParent.removeEventListener('mouseleave', this.onLeaveListener);
+        const videoElementParent = this.videoPlayer.getVideoParentElement();
+        videoElementParent?.removeEventListener('mouseenter', this.onEnterListener);
+        videoElementParent?.removeEventListener('mouseleave', this.onLeaveListener);
     }
 
     private onMouseEnter(event: MouseEvent) {
         if (!this.videoPlayer.isVideoReady()) {
             return;
         }
-        this.streamMessageController.toStreamerHandlers.get('MouseEnter')();
+        this.streamMessageController.toStreamerHandlers.get('MouseEnter')?.();
         this.pressMouseButtons(event.buttons, event.x, event.y);
     }
 
@@ -80,7 +81,7 @@ export class MouseController implements IInputController {
         if (!this.videoPlayer.isVideoReady()) {
             return;
         }
-        this.streamMessageController.toStreamerHandlers.get('MouseLeave')();
+        this.streamMessageController.toStreamerHandlers.get('MouseLeave')?.();
         this.releaseMouseButtons(event.buttons, event.x, event.y);
     }
 

package/src/Inputs/MouseControllerHovering.ts

@@ -1,3 +1,4 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
 import { StreamMessageController } from '../UeInstanceMessage/StreamMessageController';
 import { InputCoordTranslator } from '../Util/InputCoordTranslator';
 import { VideoPlayer } from '../VideoPlayer/VideoPlayer';

package/src/Inputs/MouseControllerLocked.ts

@@ -1,3 +1,4 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
 import { Logger } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
 import { StreamMessageController } from '../UeInstanceMessage/StreamMessageController';
 import { InputCoordTranslator, TranslatedCoordUnsigned } from '../Util/InputCoordTranslator';

package/src/PixelStreaming/PixelStreaming.ts

@@ -7,7 +7,6 @@ import { WebRtcPlayerController } from '../WebRtcPlayer/WebRtcPlayerController';
 import { Flags, NumericParameters } from '../Config/Config';
 import { Logger } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
 import { InitialSettings } from '../DataChannel/InitialSettings';
-import { OnScreenKeyboard } from '../UI/OnScreenKeyboard';
 import {
     PixelStreamingEventEmitter,
     InitialSettingsEvent,
@@ -78,8 +77,6 @@ export class PixelStreaming {
 
     private allowConsoleCommands = false;
 
-    private onScreenKeyboardHelper: OnScreenKeyboard;
-
     private _videoStartTime: number;
     private _inputController: boolean;
 
@@ -104,13 +101,6 @@ export class PixelStreaming {
         // setup WebRTC
         this.setWebRtcPlayerController(new WebRtcPlayerController(this.config, this));
 
-        // Onscreen keyboard
-        this.onScreenKeyboardHelper = new OnScreenKeyboard(this.videoElementParent);
-        this.onScreenKeyboardHelper.unquantizeAndDenormalizeUnsigned = (x: number, y: number) =>
-            this._webRtcController.requestUnquantizedAndDenormalizeUnsigned(x, y);
-        this._activateOnScreenKeyboard = (command: any) =>
-            this.onScreenKeyboardHelper.showOnScreenKeyboard(command);
-
         this._webXrController = new WebXRController(this._webRtcController);
 
         this._setupWebRtcTCPRelayDetection = this._setupWebRtcTCPRelayDetection.bind(this);
@@ -277,15 +267,6 @@ export class PixelStreaming {
         this.config._registerOnChangeEvents(this._eventEmitter);
     }
 
-    /**
-     * Activate the on screen keyboard when receiving the command from the streamer
-     * @param command - the keyboard command
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _activateOnScreenKeyboard(command: any): void {
-        throw new Error('Method not implemented.');
-    }
-
     /**
      * Set the input control ownership
      * @param inputControlOwnership - does the user have input control ownership
@@ -819,6 +800,19 @@ export class PixelStreaming {
         return true;
     }
 
+    /**
+     * Sets the text contents of the currently focused UE text box widget.
+     * @param contents The new contents of the UE text box.
+     * @returns True if the message could be sent.
+     */
+    public sendTextboxEntry(contents: string): boolean {
+        if (!this._webRtcController.videoPlayer.isVideoReady()) {
+            return false;
+        }
+        this._webRtcController.sendTextboxEntry(contents);
+        return true;
+    }
+
     /**
      * Add a UE -> browser response event listener
      * @param name - The name of the response handler

package/src/UeInstanceMessage/StreamMessageController.ts

@@ -81,6 +81,10 @@ export class StreamMessageController {
             id: 51,
             structure: ['string']
         });
+        this.toStreamerMessages.set('TextboxEntry', {
+            id: 52,
+            structure: ['string']
+        });
         // Keyboard Input Message. Range = 60..69.
         this.toStreamerMessages.set('KeyDown', {
             id: 60,

package/src/Util/BrowserUtils.ts

@@ -0,0 +1,36 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+import { Logger } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5';
+
+export class BrowserUtils {
+    static getSupportedVideoCodecs(): Array<string> {
+        const browserSupportedCodecs: Array<string> = [];
+        // Try get the info needed from the RTCRtpReceiver. This is only available on chrome
+        if (!RTCRtpReceiver.getCapabilities) {
+            Logger.Warning(
+                'RTCRtpReceiver.getCapabilities API is not available in your browser, defaulting to guess that we support H.264.'
+            );
+            browserSupportedCodecs.push(
+                'H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f'
+            );
+            return browserSupportedCodecs;
+        }
+
+        const matcher = /(VP\d|H26\d|AV1).*/;
+        const capabilities = RTCRtpReceiver.getCapabilities('video');
+        if (!capabilities) {
+            browserSupportedCodecs.push(
+                'H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f'
+            );
+            return browserSupportedCodecs;
+        }
+        capabilities.codecs.forEach((codec) => {
+            const str = codec.mimeType.split('/')[1] + ' ' + (codec.sdpFmtpLine || '');
+            const match = matcher.exec(str);
+            if (match !== null) {
+                browserSupportedCodecs.push(str);
+            }
+        });
+        return browserSupportedCodecs;
+    }
+}

package/src/Util/EventEmitter.ts

@@ -1,3 +1,4 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
 import { FlagsIds, NumericParametersIds, OptionParametersIds, TextParametersIds } from '../Config/Config';
 import { LatencyTestResults } from '../DataChannel/LatencyTestResults';
 import { AggregatedStats } from '../PeerConnectionController/AggregatedStats';
@@ -427,6 +428,23 @@ export class LatencyCalculatedEvent extends Event {
     }
 }
 
+/**
+ * An event that is emitted when we receive the "onScreenKeyboard" command from UE.
+ */
+export class ShowOnScreenKeyboardEvent extends Event {
+    override readonly type: 'showOnScreenKeyboard';
+    readonly data: {
+        showOnScreenKeyboard: boolean;
+        x: number;
+        y: number;
+        contents: string;
+    };
+    constructor(data: ShowOnScreenKeyboardEvent['data']) {
+        super('showOnScreenKeyboard');
+        this.data = data;
+    }
+}
+
 /**
  * An event that is emitted when receiving data channel latency test response from server.
  * This event is handled by DataChannelLatencyTestController
@@ -616,6 +634,7 @@ export type PixelStreamingEvent =
     | DataChannelCloseEvent
     | DataChannelErrorEvent
     | VideoInitializedEvent
+    | ShowOnScreenKeyboardEvent
     | StreamLoadingEvent
     | StreamPreConnectEvent
     | StreamReconnectEvent

package/src/Util/IURLSearchParams.ts

@@ -1,3 +1,4 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
 /**
  * A case insensitive, partial implementation of URLSearchParams
  */

package/src/Util/RTCUtils.ts

@@ -1,3 +1,4 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
 export class RTCUtils {
     static isVideoTransceiver(transceiver: RTCRtpTransceiver | undefined): boolean {
         return this.canTransceiverReceiveVideo(transceiver) || this.canTransceiverSendVideo(transceiver);

package/src/VideoPlayer/VideoPlayer.ts

@@ -70,6 +70,18 @@ export class VideoPlayer {
         window.addEventListener('orientationchange', () => this.onOrientationChange());
     }
 
+    public destroy() {
+        this.videoElement.src = '';
+        this.videoElement.srcObject = null;
+        this.videoElement.remove();
+
+        if (this.audioElement) {
+            this.audioElement.src = '';
+            this.audioElement.srcObject = null;
+            this.audioElement.remove();
+        }
+    }
+
     public setAudioElement(audioElement: HTMLAudioElement): void {
         this.audioElement = audioElement;
     }
@@ -117,8 +129,8 @@ export class VideoPlayer {
      * Get the current context of the html video elements parent
      * @returns - the current context of the video elements parent
      */
-    getVideoParentElement(): HTMLElement {
-        return this.videoElement.parentElement;
+    getVideoParentElement(): HTMLElement | undefined {
+        return this.videoElement.parentElement ?? undefined;
     }
 
     /**

package/src/WebRtcPlayer/WebRtcPlayerController.ts

@@ -34,7 +34,7 @@ import { ResponseController } from '../UeInstanceMessage/ResponseController';
 import { SendMessageController } from '../UeInstanceMessage/SendMessageController';
 import { ToStreamerMessagesController } from '../UeInstanceMessage/ToStreamerMessagesController';
 import { DataChannelSender } from '../DataChannel/DataChannelSender';
-import { InputCoordTranslator, UntranslatedCoordUnsigned } from '../Util/InputCoordTranslator';
+import { InputCoordTranslator } from '../Util/InputCoordTranslator';
 import { PixelStreaming } from '../PixelStreaming/PixelStreaming';
 import {
     DataChannelCloseEvent,
@@ -45,6 +45,7 @@ import {
     PlayStreamErrorEvent,
     PlayStreamEvent,
     PlayStreamRejectedEvent,
+    ShowOnScreenKeyboardEvent,
     StreamerListMessageEvent,
     StreamerIDChangedMessageEvent
 } from '../Util/EventEmitter';
@@ -56,6 +57,7 @@ import { IURLSearchParams } from '../Util/IURLSearchParams';
 import { IInputController } from '../Inputs/IInputController';
 import { GamepadController } from '../Inputs/GamepadController';
 import { LatencyInfo } from '../PeerConnectionController/LatencyCalculator';
+import { BrowserUtils } from '../Util/BrowserUtils';
 
 /**
  * Entry point for the WebRTC Player
@@ -232,6 +234,11 @@ export class WebRtcPlayerController {
 
             this.forceReconnect = false;
 
+            // Reset the list of all possible codecs on disconnect so that if the next connection has "NegotiateCodecs" on
+            // then all codecs can be negotiated
+            this.config.getSettingOption(OptionParameters.PreferredCodec).options =
+                BrowserUtils.getSupportedVideoCodecs();
+
             this.pixelStreaming._onDisconnect(disconnectMessage, allowClickToReconnect);
 
             this.afkController.stopAfkWarningTimer();
@@ -335,12 +342,11 @@ export class WebRtcPlayerController {
     }
 
     /**
-     * Make a request to UnquantizedAndDenormalizeUnsigned coordinates
-     * @param x x axis coordinate
-     * @param y y axis coordinate
+     * Destroys the video player and makes sure resources are freed. This helps to prevent the issue in chrome
+     * where it refuses to make new video players.
      */
-    requestUnquantizedAndDenormalizeUnsigned(x: number, y: number): UntranslatedCoordUnsigned {
-        return this.coordinateConverter.untranslateUnsigned(x, y);
+    destroyVideoPlayer() {
+        this.videoPlayer.destroy();
     }
 
     /**
@@ -700,11 +706,23 @@ export class WebRtcPlayerController {
 
         Logger.Info('Data Channel Command: ' + commandAsString);
         const command = JSON.parse(commandAsString);
+
+        // Handle "onScreenKeyboard" event
         if (command.command === 'onScreenKeyboard') {
-            this.pixelStreaming._activateOnScreenKeyboard(command);
+            this.handleOnScreenKeyboardCommand(command);
         }
     }
 
+    handleOnScreenKeyboardCommand(command: any) {
+        const data: ShowOnScreenKeyboardEvent['data'] = {
+            showOnScreenKeyboard: command.showOnScreenKeyboard ?? true,
+            x: command.x ?? 0,
+            y: command.y ?? 0,
+            contents: command.contents ?? ''
+        };
+        this.pixelStreaming.dispatchEvent(new ShowOnScreenKeyboardEvent(data));
+    }
+
     /**
      * Handles a protocol message received from the streamer
      * @param message the message data from the streamer
@@ -1762,6 +1780,15 @@ export class WebRtcPlayerController {
         this.toStreamerMessagesController.SendRequestQualityControl();
     }
 
+    /**
+     * Send a `TextBoxEntry` message back to UE.
+     * @param contents The new contents of the UE side text box.
+     */
+    sendTextboxEntry(contents: string) {
+        Logger.Info('----   Sending TextboxEntry message  ----');
+        this.streamMessageController.toStreamerHandlers.get('TextboxEntry')?.([contents]);
+    }
+
     /**
      * Handles when a Latency Test Result are received from the UE Instance
      * @param message - Latency Test Timings

package/tsconfig.cjs.json

@@ -1,7 +1,8 @@
 {
-    "extends": "./tsconfig.base.json",
+    "extends": "./tsconfig.json",
     "compilerOptions": {
         "outDir": "./dist/cjs",
-        "module": "commonjs"
+        "module": "node16",
+        "moduleResolution": "node16"
     }
 }

package/tsconfig.esm.json

@@ -1,5 +1,5 @@
 {
-    "extends": "./tsconfig.base.json",
+    "extends": "./tsconfig.json",
     "compilerOptions": {
         "outDir": "./dist/esm",
         "module": "es6",

package/tsconfig.jest.json

@@ -1,5 +1,5 @@
 {
-    "extends": "./tsconfig.base.json",
+    "extends": "./tsconfig.json",
     "include": ["./src/**/*.ts"],
     "exclude": [],
     "compilerOptions": {

package/{tsconfig.base.json → tsconfig.json}

@@ -12,7 +12,8 @@
         "noImplicitReturns": true,
         "noPropertyAccessFromIndexSignature": true,
         "declaration": true,
-        "declarationDir": "./dist/types"
+        "declarationDir": "./dist/types",
+        "moduleResolution": "bundler" // helps IDEs
     },
     "lib": ["ES6"],
     "include": ["./src/**/*.ts"],