fix(lr-upload-ctx-provider): import event types

blocks/ShadowWrapper/ShadowWrapper.js

@@ -5,18 +5,14 @@ import { waitForAttribute } from '../../utils/waitForAttribute.js';
 const CSS_ATTRIBUTE = 'css-src';
 
 /**
- * @template T
- * @typedef {new (...args: any[]) => T} GConstructor
- */
-
-/**
- * @template {GConstructor<import('../../abstract/Block.js').Block>} T
+ * @template {import('../../utils/mixinClass.js').GConstructor<import('../../abstract/Block.js').Block>} T
  * @param {T} Base
- * @returns {{
- *   new (...args: ConstructorParameters<T>): InstanceType<T> & {
+ * @returns {import('../../utils/mixinClass.js').MixinClass<
+ *   T,
+ *   {
  *     shadowReadyCallback(): void;
- *   };
- * } & Omit<T, 'new'>}
+ *   }
+ * >}
  */
 export function shadowed(Base) {
   // @ts-ignore

blocks/UploadCtxProvider/UploadCtxProvider.js

@@ -1,7 +1,6 @@
 // @ts-check
 
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
-
 class UploadCtxProviderClass extends UploaderBlock {
   requireCtxName = true;
 
@@ -10,23 +9,26 @@ class UploadCtxProviderClass extends UploaderBlock {
   }
 }
 
-export const UploadCtxProvider = UploadCtxProviderClass;
-
 /**
- * @typedef {typeof UploadCtxProviderClass & {
- *   addEventListener<
- *     T extends typeof import('./EventEmitter.js').EventType[keyof typeof import('./EventEmitter.js').EventType]
- *   >(
- *     type: T,
- *     listener: (e: CustomEvent<import('./EventEmitter.js').EventPayload[T]>) => void,
- *     options?: boolean | AddEventListenerOptions
- *   ): void;
- *   removeEventListener<
- *     T extends typeof import('./EventEmitter.js').EventType[keyof typeof import('./EventEmitter.js').EventType]
- *   >(
- *     type: T,
- *     listener: (e: CustomEvent<import('./EventEmitter.js').EventPayload[T]>) => void,
- *     options?: boolean | EventListenerOptions
- *   ): void;
- * }} UploadCtxProvider
+ * @typedef {import('../../utils/mixinClass.js').MixinClass<
+ *   typeof UploadCtxProviderClass,
+ *   {
+ *     addEventListener<
+ *       T extends typeof import('./EventEmitter.js').EventType[keyof typeof import('./EventEmitter.js').EventType]
+ *     >(
+ *       type: T,
+ *       listener: (e: CustomEvent<import('./EventEmitter.js').EventPayload[T]>) => void,
+ *       options?: boolean | AddEventListenerOptions
+ *     ): void;
+ *     removeEventListener<
+ *       T extends typeof import('./EventEmitter.js').EventType[keyof typeof import('./EventEmitter.js').EventType]
+ *     >(
+ *       type: T,
+ *       listener: (e: CustomEvent<import('./EventEmitter.js').EventPayload[T]>) => void,
+ *       options?: boolean | EventListenerOptions
+ *     ): void;
+ *   }
+ * >} UploadCtxProviderType
  */
+
+export const UploadCtxProvider = /** @type {UploadCtxProviderType} */ (/** @type {unknown} */ (UploadCtxProviderClass));

types/events.d.ts

@@ -1,18 +1,23 @@
-import type { GlobalEventPayload } from '../blocks/UploadCtxProvider/EventEmitter';
+import type { GlobalEventPayload, EventPayload } from '../blocks/UploadCtxProvider/EventEmitter';
 
-type CustomEventMap = {
+export type GlobalEventMap = {
   [T in keyof GlobalEventPayload]: CustomEvent<GlobalEventPayload[T]>;
 };
+
+export type EventMap = {
+  [T in keyof EventPayload]: CustomEvent<EventPayload[T]>;
+};
+
 declare global {
   interface Window {
-    addEventListener<T extends keyof CustomEventMap>(
+    addEventListener<T extends keyof GlobalEventMap>(
       type: T,
-      listener: (e: CustomEventMap[T]) => void,
+      listener: (e: GlobalEventMap[T]) => void,
       options?: boolean | AddEventListenerOptions
     ): void;
-    removeEventListener<T extends keyof CustomEventMap>(
+    removeEventListener<T extends keyof GlobalEventMap>(
       type: T,
-      listener: (e: CustomEventMap[T]) => void,
+      listener: (e: GlobalEventMap[T]) => void,
       options?: boolean | EventListenerOptions
     ): void;
   }

types/test/global-events.test-d.ts

@@ -0,0 +1,10 @@
+import { expectType } from 'tsd';
+import { GlobalEventPayload } from '..';
+
+window.addEventListener(
+  'LR_DATA_OUTPUT',
+  (e) => {
+    expectType<CustomEvent<GlobalEventPayload['LR_DATA_OUTPUT']>>(e);
+  },
+  { once: true }
+);

types/test/lr-upload-ctx-provider.test-d.tsx

@@ -0,0 +1,21 @@
+import { expectType } from 'tsd';
+import { EventMap, UploadCtxProvider } from '../..';
+
+const instance = new UploadCtxProvider();
+
+instance.addFileFromUrl('https://example.com/image.png');
+instance.uploadCollection.size;
+instance.setOrAddState('fileId', 'uploading');
+
+instance.addEventListener('data-output', (e) => {
+  expectType<EventMap['data-output']>(e);
+
+  // @ts-expect-error - wrong event type
+  expectType<EventMap['init-flow']>(e);
+});
+
+const onDataOutput = (e: EventMap['data-output']) => {
+  // noop
+}
+
+instance.addEventListener('data-output', onDataOutput);

utils/mixinClass.js

@@ -0,0 +1,14 @@
+/**
+ * @template T
+ * @typedef {new (...args: any[]) => T} GConstructor
+ */
+
+/**
+ * @template {GConstructor<HTMLElement>} Base
+ * @template {Record<string, any>} [InstanceProperties={}] Default is `{}`
+ * @typedef {{
+ *   new (...args: ConstructorParameters<Base>): InstanceProperties & InstanceType<Base>;
+ * } & Omit<Base, 'new'>} MixinClass
+ */
+
+export {};