@antha/gamepad-type 0.1.0

package/dist/demo/elements/vir-demo.element.js

@@ -0,0 +1,469 @@
+import { copyThroughJson, makeWritable, pickObjectKeys } from '@augment-vir/common';
+import { asyncProp, css, defineElement, html, listen } from 'element-vir';
+import { CurrentInputsChangedEvent, InputDeviceHandler, InputDeviceType, } from 'input-device-handler';
+import { sendLog } from 'sentry-vir';
+import { LoaderAnimated24Icon, ViraButton, ViraColorVariant, ViraEmphasis, ViraIcon, noNativeSpacing, } from 'vira';
+import { createEmptyGamepadLayout, findMatchingGamepadLayout, getSystemVersions, includesSystemVersion, } from '../../index.js';
+import { ModalClose } from '../events/modal-close.event.js';
+import { SelectedGamepadIndexChange } from '../events/selected-gamepad-index-change.event.js';
+import { setupSentry } from '../sentry-setup.js';
+import { extractNewChanges } from '../util/check-changes.js';
+import { loadSavedLayouts, loadSavedModelMap, loadSubmittedChanges, resetAllSavedData, saveLayouts, saveModelMap, savedSubmittedChanges, } from '../util/local-save-data.js';
+import { userAgent } from '../util/user-agent.js';
+import { addWindowListener } from '../util/window-listener.js';
+import { VirGamepadInputs } from './gamepad/vir-gamepad-inputs.element.js';
+import { VirGamepadName } from './gamepad/vir-gamepad-name.element.js';
+import { VirGamepad } from './gamepad/vir-gamepad.element.js';
+import { VirCreateNewTypeModal } from './modals/vir-create-new-type.modal.element.js';
+import { VirEditMappingsModal } from './modals/vir-edit-mappings.modal.element.js';
+void setupSentry();
+var EditMode;
+(function (EditMode) {
+    EditMode["None"] = "none";
+    EditMode["Mappings"] = "mappings";
+    EditMode["CreateType"] = "create-type";
+})(EditMode || (EditMode = {}));
+export const VirDemo = defineElement()({
+    tagName: 'vir-demo',
+    styles: css `
+        :host {
+            box-sizing: border-box;
+            width: 100%;
+            height: 100%;
+            font-family: sans-serif;
+        }
+
+        main {
+            box-sizing: border-box;
+            width: 100%;
+            min-height: 100%;
+            display: flex;
+            flex-direction: column;
+            padding: 24px;
+            gap: 24px;
+        }
+
+        p {
+            margin: 0;
+        }
+
+        .description {
+            font-size: 0.5em;
+            opacity: 0.3;
+            transition: 100ms;
+        }
+
+        .description:hover {
+            opacity: 1;
+        }
+
+        .modal-wrapper {
+            position: absolute;
+        }
+
+        .gamepads-wrapper {
+            display: flex;
+            flex-direction: column;
+            gap: 64px;
+        }
+
+        ${ViraIcon} {
+            display: flex;
+            height: 100%;
+            width: 100%;
+            justify-content: center;
+            align-items: center;
+            transform: scale(2);
+        }
+
+        header {
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+
+        header .column {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        h1 {
+            ${noNativeSpacing};
+        }
+
+        header .row {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+        }
+
+        .submission-buttons {
+            display: flex;
+            gap: 16px;
+            align-items: flex-start;
+        }
+
+        .submission-buttons .subtitle {
+            opacity: 0.3;
+            font-size: 0.5em;
+            transition: 100ms;
+        }
+
+        .user-agent {
+            opacity: 0.5;
+            font-size: 0.7em;
+            transition: 100ms;
+        }
+
+        .user-agent:hover,
+        .submission-buttons .subtitle:hover {
+            opacity: 1;
+        }
+        
+        .error {
+            font-weight: bold
+            color: red;
+        }
+    `,
+    state() {
+        return {
+            deviceHandler: new InputDeviceHandler({
+                startLoopImmediately: false,
+                disableMouseMovement: true,
+                globalDeadZone: 0.1,
+            }),
+            gamepadDevices: [],
+            newInputs: {
+                timestamp: 0,
+                devices: [],
+            },
+            gamepadIndexForEditing: 0,
+            inputForEditing: undefined,
+            savedGamepadLayouts: asyncProp({
+                defaultValue: loadSavedLayouts().then((result) => {
+                    console.info('Loaded layouts:');
+                    console.info(JSON.stringify(result));
+                    return result;
+                }),
+            }),
+            submittedChanges: asyncProp({
+                defaultValue: loadSubmittedChanges(),
+            }),
+            savedGamepadModelMap: asyncProp({
+                defaultValue: loadSavedModelMap().then((result) => {
+                    console.info('Loaded model map:');
+                    console.info(JSON.stringify(result));
+                    return result;
+                }),
+            }),
+            overrides: {
+                gamepadLayouts: [],
+                gamepadTypes: {},
+            },
+            editMode: EditMode.None,
+            cleanup: undefined,
+        };
+    },
+    init({ state, updateState }) {
+        const cleanupCallbacks = [
+            state.deviceHandler.listen(CurrentInputsChangedEvent, () => {
+                const allDevices = state.deviceHandler.getLastPollResults();
+                updateState({
+                    gamepadDevices: Object.values(allDevices).filter((device) => {
+                        return device.deviceType === InputDeviceType.Gamepad;
+                    }),
+                });
+            }),
+            state.deviceHandler.listen(CurrentInputsChangedEvent, (event) => {
+                const now = Date.now();
+                const devicesWithNewInputs = event.detail.inputs.newInputs.reduce((accum, newInput) => {
+                    accum.add(newInput.deviceKey);
+                    return accum;
+                }, new Set());
+                if (devicesWithNewInputs.size) {
+                    updateState({
+                        newInputs: {
+                            timestamp: now,
+                            devices: Array.from(devicesWithNewInputs),
+                        },
+                    });
+                }
+            }),
+            addWindowListener('keydown', (event) => {
+                if (event.code.toLowerCase() === 'escape' && state.editMode !== EditMode.None) {
+                    updateState({
+                        editMode: EditMode.None,
+                    });
+                }
+            }),
+        ];
+        updateState({
+            cleanup() {
+                cleanupCallbacks.forEach((cleanupCallback) => cleanupCallback());
+            },
+        });
+        state.deviceHandler.startPollingLoop();
+    },
+    cleanup({ state, updateState }) {
+        state.cleanup?.();
+        updateState({
+            cleanup: undefined,
+        });
+    },
+    render({ state, updateState }) {
+        if (state.savedGamepadLayouts.isWaiting() ||
+            state.savedGamepadModelMap.isWaiting() ||
+            state.submittedChanges.isWaiting()) {
+            return html `
+                <${ViraIcon.assign({
+                icon: LoaderAnimated24Icon,
+            })}></${ViraIcon}>
+            `;
+        }
+        else if (!state.savedGamepadLayouts.isResolved() ||
+            !state.savedGamepadModelMap.isResolved() ||
+            !state.submittedChanges.isResolved()) {
+            return html `
+                <p class="error">Failed to initialize.</p>
+            `;
+        }
+        const savedLayouts = makeWritable(state.savedGamepadLayouts.value);
+        const savedModelMap = state.savedGamepadModelMap.value;
+        const submittedChanges = state.submittedChanges.value;
+        const notSubmittedChanges = extractNewChanges({
+            layouts: savedLayouts,
+            models: savedModelMap,
+        }, submittedChanges);
+        const changes = extractNewChanges({
+            layouts: savedLayouts,
+            models: savedModelMap,
+        }, undefined);
+        const hasAnyChanges = changes.layouts.length || Object.values(changes.models).length;
+        const hasNotSubmitted = notSubmittedChanges.layouts.length || Object.values(notSubmittedChanges.models).length;
+        const gamepadDevices = [
+            ...state.gamepadDevices,
+        ];
+        const gamepadTemplates = gamepadDevices.map((gamepad, gamepadIndex) => {
+            const gamepadLayout = findMatchingGamepadLayout({
+                gamepad,
+                layouts: savedLayouts,
+                gamepadModelMap: savedModelMap,
+            });
+            return html `
+                <${VirGamepad.assign({
+                gamepad,
+                gamepadIndex,
+                gamepadLayout,
+                gamepadModelMap: savedModelMap,
+            })}
+                    ${listen(VirGamepadName.events.editMappingsClick, () => {
+                updateState({
+                    gamepadIndexForEditing: gamepadIndex,
+                    editMode: EditMode.Mappings,
+                });
+            })}
+                    ${listen(VirGamepadName.events.gamepadModelOverride, async (event) => {
+                const newModelMap = {
+                    ...savedModelMap,
+                    [gamepad.deviceName.toLowerCase()]: event.detail,
+                };
+                state.savedGamepadModelMap.setValue(newModelMap);
+                await saveModelMap(newModelMap);
+            })}
+                    ${listen(VirGamepadInputs.events.gamepadInputClick, (event) => {
+                updateState({
+                    editMode: EditMode.Mappings,
+                    gamepadIndexForEditing: gamepadIndex,
+                    inputForEditing: event.detail,
+                });
+            })}
+                    ${listen(VirGamepadName.events.createNewModel, () => {
+                updateState({
+                    editMode: EditMode.CreateType,
+                    gamepadIndexForEditing: gamepadIndex,
+                });
+            })}
+                ></${VirGamepad}>
+            `;
+        });
+        const currentModalTemplate = state.editMode === EditMode.CreateType
+            ? html `
+                      <${VirCreateNewTypeModal.assign({
+                gamepadDevices,
+                selectedGamepadIndex: state.gamepadIndexForEditing,
+            })}
+                          ${listen(VirCreateNewTypeModal.events.newModelCreate, async (event) => {
+                const selectedGamepad = state.gamepadDevices[state.gamepadIndexForEditing];
+                if (!selectedGamepad) {
+                    throw new Error('Cannot update layouts, failed to find selected device');
+                }
+                const newModelMap = {
+                    ...savedModelMap,
+                    [selectedGamepad.deviceName.toLowerCase()]: event.detail,
+                };
+                console.info('Saving updated model map:');
+                console.info(JSON.stringify(newModelMap));
+                state.savedGamepadModelMap.setValue(newModelMap);
+                await saveModelMap(newModelMap);
+            })}
+                      ></${VirCreateNewTypeModal}>
+                  `
+            : state.editMode === EditMode.Mappings
+                ? html `
+                        <${VirEditMappingsModal.assign({
+                    savedGamepadLayouts: savedLayouts,
+                    gamepadDevices,
+                    selectedGamepadIndex: state.gamepadIndexForEditing,
+                    savedGamepadModelMap: savedModelMap,
+                    selectedGamepadInput: state.inputForEditing,
+                    inputDeviceHandler: state.deviceHandler,
+                })}
+                            ${listen(VirEditMappingsModal.events.selectedGamepadInputChange, (event) => {
+                    updateState({
+                        inputForEditing: event.detail,
+                    });
+                })}
+                            ${listen(VirEditMappingsModal.events.inputMapSave, async (event) => {
+                    if (savedLayouts instanceof Error) {
+                        throw new TypeError('Cannot save mapping, failed to load current mappings.');
+                    }
+                    const selectedGamepad = state.gamepadDevices[state.gamepadIndexForEditing];
+                    if (!selectedGamepad) {
+                        throw new Error('Cannot update layouts, failed to find selected device');
+                    }
+                    const matchingLayout = findMatchingGamepadLayout({
+                        gamepad: selectedGamepad,
+                        layouts: savedLayouts,
+                        gamepadModelMap: savedModelMap,
+                    });
+                    const systemVersions = getSystemVersions();
+                    const areSystemsEqual = matchingLayout
+                        ? includesSystemVersion(matchingLayout.systemVersions, systemVersions)
+                        : true;
+                    const emptyLayout = createEmptyGamepadLayout(selectedGamepad);
+                    const layoutToEdit = areSystemsEqual
+                        ? (matchingLayout ?? emptyLayout)
+                        : matchingLayout
+                            ? {
+                                ...copyThroughJson(matchingLayout),
+                                systemVersions: emptyLayout.systemVersions,
+                            }
+                            : emptyLayout;
+                    layoutToEdit.inputMappings[event.detail.inputName] =
+                        event.detail.mappedName;
+                    if (!matchingLayout || !areSystemsEqual) {
+                        savedLayouts.push(layoutToEdit);
+                    }
+                    console.info('Saving updated layouts:');
+                    console.info(JSON.stringify(savedLayouts));
+                    state.savedGamepadLayouts.setValue(copyThroughJson(savedLayouts));
+                    await saveLayouts(savedLayouts);
+                })}
+                        ></${VirEditMappingsModal}>
+                    `
+                : '';
+        return html `
+            <main
+                ${listen(ModalClose, () => {
+            updateState({
+                editMode: EditMode.None,
+            });
+        })}
+                ${listen(SelectedGamepadIndexChange, (event) => {
+            updateState({
+                gamepadIndexForEditing: event.detail,
+            });
+        })}
+            >
+                <div class="modal-wrapper">${currentModalTemplate}</div>
+                <header>
+                    <div class="column">
+                        <h1>Gamepad Layout Tester</h1>
+                        <p>
+                            Map gamepad ids to gamepad models, brands, and input names using the
+                            gamepad-type npm package.
+                        </p>
+                        <ul>
+                            <li>
+                                <a href="https://electrovir.github.io/gamepad-type/docs">
+                                    Full API docs
+                                </a>
+                            </li>
+                            <li>
+                                <a href="https://github.com/electrovir/gamepad-type">
+                                    Repository in GitHub
+                                </a>
+                            </li>
+                            <li>
+                                <a href="https://www.npmjs.com/package/gamepad-type">
+                                    Package on npm
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="row">
+                        <p
+                            class="user-agent"
+                            title="These versions determine gamepad input mappings."
+                        >
+                            Current system versions (used for correct mapping):
+                            <br />
+                            ${userAgent.osName} ${userAgent.osVersion}
+                            <br />
+                            ${userAgent.browserName} ${userAgent.browserVersion}
+                        </p>
+                        <div class="submission-buttons">
+                            <div class="column">
+                                <${ViraButton.assign({
+            text: 'Submit Changes',
+            isDisabled: !hasNotSubmitted,
+        })}
+                                    ${listen('click', async () => {
+            await savedSubmittedChanges(notSubmittedChanges);
+            state.submittedChanges.setValue(notSubmittedChanges);
+            sendLog.info('New mapping override received', {
+                context: {
+                    changes: notSubmittedChanges,
+                    systemVersions: getSystemVersions(),
+                    connectedDevices: state.gamepadDevices.map((gamepadDevice) => {
+                        return pickObjectKeys(gamepadDevice, [
+                            'deviceKey',
+                            'deviceName',
+                            'deviceType',
+                        ]);
+                    }),
+                },
+            });
+        })}
+                                ></${ViraButton}>
+                                <p class="subtitle">
+                                    Submit your changes. IP address is not stored.
+                                </p>
+                            </div>
+                            <${ViraButton.assign({
+            text: 'Reset Changes',
+            isDisabled: !hasAnyChanges,
+            buttonEmphasis: ViraEmphasis.Subtle,
+            color: ViraColorVariant.Danger,
+        })}
+                                ${listen('click', async () => {
+            await resetAllSavedData();
+            state.savedGamepadLayouts.setValue(loadSavedLayouts());
+            state.savedGamepadModelMap.setValue(loadSavedModelMap());
+        })}
+                            ></${ViraButton}>
+                        </div>
+                    </div>
+                </header>
+                <div class="gamepads-wrapper">
+                    ${gamepadTemplates.length
+            ? gamepadTemplates
+            : html `
+                              Connect a gamepad and press a button on it.
+                          `}
+                </div>
+            </main>
+        `;
+    },
+});

package/dist/demo/events/modal-close.event.d.ts

@@ -0,0 +1 @@
+export declare const ModalClose: import("element-vir").DefinedTypedEvent<"modal-close", void>;

package/dist/demo/events/modal-close.event.js

@@ -0,0 +1,2 @@
+import { defineTypedEvent } from 'element-vir';
+export const ModalClose = defineTypedEvent()('modal-close');

package/dist/demo/events/selected-gamepad-index-change.event.d.ts

@@ -0,0 +1 @@
+export declare const SelectedGamepadIndexChange: import("element-vir").DefinedTypedEvent<"selected-gamepad-index-change", number>;

package/dist/demo/events/selected-gamepad-index-change.event.js

@@ -0,0 +1,2 @@
+import { defineTypedEvent } from 'element-vir';
+export const SelectedGamepadIndexChange = defineTypedEvent()('selected-gamepad-index-change');

package/dist/demo/gamepad-brand-color.d.ts

@@ -0,0 +1 @@
+export declare function getGamepadBrandColor(gamepadBrand: string | undefined): string;

package/dist/demo/gamepad-brand-color.js

@@ -0,0 +1,14 @@
+import { check } from '@augment-vir/assert';
+import { PredefinedGamepadBrand } from '../index.js';
+const fallbackBrandColor = '#ffaaaa';
+const gamepadBrandColors = {
+    [PredefinedGamepadBrand.Microsoft]: '#aaff97',
+    [PredefinedGamepadBrand.Nintendo]: '#ffaaaa',
+    [PredefinedGamepadBrand.Sony]: '#86e2ff',
+    [PredefinedGamepadBrand.Valve]: '#ffaaaa',
+};
+export function getGamepadBrandColor(gamepadBrand) {
+    return check.isEnumValue(gamepadBrand, PredefinedGamepadBrand)
+        ? gamepadBrandColors[gamepadBrand]
+        : fallbackBrandColor;
+}

package/dist/demo/global-vars.d.ts

@@ -0,0 +1,6 @@
+declare global {
+    const VITE_RELEASE_NAME: string;
+}
+export declare const globalVars: {
+    releaseName: string;
+};

package/dist/demo/global-vars.js

@@ -0,0 +1,3 @@
+export const globalVars = {
+    releaseName: typeof VITE_RELEASE_NAME === 'undefined' ? 'unknown' : VITE_RELEASE_NAME,
+};

package/dist/demo/overrides.d.ts

@@ -0,0 +1,7 @@
+import { type GamepadLayout, type PredefinedGamepadModel } from '../index.js';
+export type GamepadOverrides = Readonly<{
+    gamepadTypes: Readonly<{
+        [deviceName: string]: PredefinedGamepadModel;
+    }>;
+    gamepadLayouts: ReadonlyArray<Readonly<GamepadLayout>>;
+}>;

package/dist/demo/overrides.js

@@ -0,0 +1 @@
+export {};

package/dist/demo/sentry-setup.d.ts

@@ -0,0 +1 @@
+export declare function setupSentry(): Promise<void>;

package/dist/demo/sentry-setup.js

@@ -0,0 +1,11 @@
+import { initSentry } from 'sentry-vir/dist/browser.js';
+import { globalVars } from './global-vars.js';
+const isDev = window.location.hostname === 'localhost';
+export async function setupSentry() {
+    await initSentry({
+        dsn: 'https://5b5d58b459305bfcd595aabfd356136c@o4506447710060544.ingest.sentry.io/4506479530737664',
+        isDev,
+        releaseEnv: isDev ? 'dev' : 'prod',
+        releaseName: globalVars.releaseName,
+    });
+}

package/dist/demo/util/casing.d.ts

@@ -0,0 +1 @@
+export declare function kebabCaseToNameCase(input: string): string;

package/dist/demo/util/casing.js

@@ -0,0 +1,7 @@
+import { setFirstLetterCasing, StringCase } from '@augment-vir/common';
+export function kebabCaseToNameCase(input) {
+    return input
+        .split('-')
+        .map((word) => setFirstLetterCasing(word, StringCase.Upper))
+        .join(' ');
+}

package/dist/demo/util/check-changes.d.ts

@@ -0,0 +1,6 @@
+import { type GamepadLayout, type GamepadModelMap } from '../../index.js';
+export type ChangedEntries = {
+    layouts: ReadonlyArray<Readonly<GamepadLayout>>;
+    models: Readonly<GamepadModelMap>;
+};
+export declare function extractNewChanges({ layouts, models }: Readonly<ChangedEntries>, lastSubmitted: Readonly<ChangedEntries> | undefined): Readonly<ChangedEntries>;

package/dist/demo/util/check-changes.js

@@ -0,0 +1,28 @@
+import { check } from '@augment-vir/assert';
+import { filterObject } from '@augment-vir/common';
+import { defaultGamepadLayouts, defaultGamepadModelMap, } from '../../index.js';
+export function extractNewChanges({ layouts, models }, lastSubmitted) {
+    const changedLayouts = layouts.filter((layout) => {
+        const matchesDefault = defaultGamepadLayouts.some((defaultLayout) => {
+            return check.jsonEquals(defaultLayout, layout);
+        });
+        const matchesSubmitted = lastSubmitted
+            ? lastSubmitted.layouts.some((submittedLayout) => {
+                return check.jsonEquals(submittedLayout, layout);
+            })
+            : false;
+        return !matchesDefault && !matchesSubmitted;
+    });
+    const changedModels = filterObject(models, (deviceName, newModel) => {
+        const newFromDefault = !(deviceName in defaultGamepadModelMap) ||
+            defaultGamepadModelMap[deviceName] !== newModel;
+        const newFromSubmitted = lastSubmitted
+            ? !(deviceName in lastSubmitted.models) || lastSubmitted.models[deviceName] !== newModel
+            : true;
+        return newFromSubmitted && newFromDefault;
+    });
+    return {
+        layouts: changedLayouts,
+        models: changedModels,
+    };
+}

package/dist/demo/util/local-save-data.d.ts

@@ -0,0 +1,9 @@
+import { type GamepadLayout, type GamepadModelMap } from '../../index.js';
+import { type ChangedEntries } from './check-changes.js';
+export declare function resetAllSavedData(): Promise<void>;
+export declare function loadSavedLayouts(): Promise<ReadonlyArray<Readonly<GamepadLayout>>>;
+export declare function saveLayouts(layouts: ReadonlyArray<Readonly<GamepadLayout>>): Promise<void>;
+export declare function loadSavedModelMap(): Promise<Readonly<GamepadModelMap>>;
+export declare function saveModelMap(types: Readonly<GamepadModelMap>): Promise<void>;
+export declare function loadSubmittedChanges(): Promise<Readonly<ChangedEntries> | undefined>;
+export declare function savedSubmittedChanges(changes: Readonly<ChangedEntries>): Promise<void>;

package/dist/demo/util/local-save-data.js

@@ -0,0 +1,36 @@
+import { Store } from 'indexed-vir';
+import { defaultGamepadLayouts, defaultGamepadModelMap, } from '../../index.js';
+const gamepadTypeStore = new Store('gamepad-type-indexed-vir');
+const savedLayoutsKey = 'saved-layouts';
+const savedTypesKey = 'saved-types';
+const submittedChangesKey = 'submitted-changes';
+async function loadSavedValue(key) {
+    const storedValue = await gamepadTypeStore.getItem(key);
+    return (storedValue ?? undefined);
+}
+export async function resetAllSavedData() {
+    await gamepadTypeStore.clear();
+}
+export async function loadSavedLayouts() {
+    return ((await loadSavedValue(savedLayoutsKey)) ??
+        defaultGamepadLayouts);
+}
+export async function saveLayouts(layouts) {
+    await gamepadTypeStore.setItem(savedLayoutsKey, layouts);
+}
+export async function loadSavedModelMap() {
+    const loadedModelMap = (await loadSavedValue(savedTypesKey)) ?? {};
+    return {
+        ...defaultGamepadModelMap,
+        ...loadedModelMap,
+    };
+}
+export async function saveModelMap(types) {
+    await gamepadTypeStore.setItem(savedTypesKey, types);
+}
+export async function loadSubmittedChanges() {
+    return (await loadSavedValue(submittedChangesKey)) || undefined;
+}
+export async function savedSubmittedChanges(changes) {
+    await gamepadTypeStore.setItem(submittedChangesKey, changes);
+}

package/dist/demo/util/user-agent.d.ts

@@ -0,0 +1,6 @@
+export declare const userAgent: Readonly<{
+    osName: string;
+    osVersion: string;
+    browserName: string;
+    browserVersion: string;
+}>;

package/dist/demo/util/user-agent.js

@@ -0,0 +1,2 @@
+import { getSystemVersions } from '../../index.js';
+export const userAgent = getSystemVersions();

package/dist/demo/util/window-listener.d.ts

@@ -0,0 +1 @@
+export declare function addWindowListener<K extends keyof WindowEventMap>(type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): () => void;

package/dist/demo/util/window-listener.js

@@ -0,0 +1,6 @@
+export function addWindowListener(type, listener, options) {
+    window.addEventListener(type, listener, options);
+    return () => {
+        window.removeEventListener(type, listener, options);
+    };
+}