@uploadcare/file-uploader 1.1.1 → 1.3.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/file-uploader",
-  "version": "1.1.1",
+  "version": "1.3.0-alpha.0",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",
@@ -43,7 +43,7 @@
       "browser": "./index.js",
       "default": "./index.js"
     },
-    "./abstract/connectBlocksFrom.js": "./abstract/connectBlocksFrom.js",
+    "./abstract/loadFileUploaderFrom.js": "./abstract/loadFileUploaderFrom.js",
     "./env": "./env.js",
     "./web/*": "./web/*",
     "./types/*": "./types/*",
@@ -99,12 +99,12 @@
     "@happy-dom/global-registrator": "^9.8.4",
     "@jam-do/jam-tools": "^0.0.4",
     "@total-typescript/ts-reset": "^0.5.1",
-    "@types/chai": "^4.3.4",
+    "@types/chai": "^4.3.17",
     "@types/mocha": "^10.0.1",
     "@types/node": "^18.15.11",
     "@types/react": "^18.2.34",
-    "@web/dev-server": "^0.1.38",
-    "@web/test-runner": "^0.15.3",
+    "@web/dev-server": "^0.4.6",
+    "@web/test-runner": "^0.18.2",
     "esbuild": "^0.19.9",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -128,15 +128,17 @@
     "stylelint-declaration-block-no-ignored-properties": "^2.7.0",
     "stylelint-order": "^6.0.3",
     "svg-sprite": "^2.0.4",
-    "tsd": "^0.29.0",
-    "typescript": "^5.2.2"
+    "tsd": "^0.31.1",
+    "typescript": "^5.5.4"
   },
   "author": "Uploadcare Inc.",
   "license": "MIT",
   "dependencies": {
-    "@symbiotejs/symbiote": "^1.11.7",
+    "@symbiotejs/symbiote": "^2.3.0",
+    "@types/sinon": "^17.0.3",
     "@uploadcare/image-shrink": "^6.14.1",
     "@uploadcare/upload-client": "^6.14.1",
+    "D": "^1.0.0",
     "keyux": "^0.7.1"
   }
 }

package/solutions/cloud-image-editor/index.d.ts

@@ -1,6 +1,6 @@
 export * from "../../blocks/CloudImageEditor/index.js";
 export * from "./CloudImageEditor.js";
 export { Icon } from "../../blocks/Icon/Icon.js";
-export { registerBlocks } from "../../abstract/registerBlocks.js";
+export { defineComponents } from "../../abstract/defineComponents.js";
 export { Config } from "../../blocks/Config/Config.js";
 //# sourceMappingURL=index.d.ts.map

package/solutions/cloud-image-editor/index.js

@@ -7,5 +7,5 @@ Then we can check whether the dependent tag is registered in the CustomElementRe
 If not, register it from default ones or just log the warning */
 
 export { Icon } from '../../blocks/Icon/Icon.js';
-export { registerBlocks } from '../../abstract/registerBlocks.js';
+export { defineComponents } from '../../abstract/defineComponents.js';
 export { Config } from '../../blocks/Config/Config.js';

package/solutions/file-uploader/inline/FileUploaderInline.d.ts

@@ -6,8 +6,8 @@ export class FileUploaderInline extends SolutionBlock {
         '*uploadList': never[];
         '*focusedEntry': null;
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
-        '*collectionErrors': any[];
-        '*collectionState': import("./index.js").OutputCollectionState<import("./index.js").OutputCollectionStatus, "maybe-has-group"> | null;
+        '*collectionErrors': ReturnType<import("./index.js").OutputErrorCollection>[];
+        '*collectionState': import("./index.js").OutputCollectionState | null;
         '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
         '*uploadTrigger': Set<string>;
         '*secureUploadsManager': import("../../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;

package/solutions/file-uploader/inline/FileUploaderInline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderInline.d.ts","sourceRoot":"","sources":["FileUploaderInline.js"],"names":[],"mappings":"AAIA;IAMI;;;;;;;;;;;;;;;;;MAUC;IAGH,gCAGC;IAED,6BAEC;CA0BF;;;;8BAtD6B,oCAAoC"}
+{"version":3,"file":"FileUploaderInline.d.ts","sourceRoot":"","sources":["FileUploaderInline.js"],"names":[],"mappings":"AAKA;IAMI;;;;;;;+CAamB,YACjB;mCACsC,YAAU;6BAIhD,2BAA2B;;wCAMS,2CAA2B;;;;;;MAfhE;IAGH,gCAGC;IAED,6BAEC;CA0BF;;;;8BAtD6B,oCAAoC"}

package/solutions/file-uploader/inline/FileUploaderInline.js

@@ -1,4 +1,5 @@
 // @ts-check
+import { html } from '@symbiotejs/symbiote';
 import { ActivityBlock } from '../../../abstract/ActivityBlock.js';
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
 
@@ -56,14 +57,14 @@ export class FileUploaderInline extends SolutionBlock {
   }
 }
 
-FileUploaderInline.template = /* HTML */ ` <uc-start-from>
+FileUploaderInline.template = html` <uc-start-from>
     <uc-drop-area with-icon clickable></uc-drop-area>
     <uc-source-list wrap></uc-source-list>
     <button
       type="button"
       l10n="start-from-cancel"
       class="uc-cancel-btn uc-secondary-btn"
-      set="onclick: cancel; @hidden: !couldCancel"
+      bind="onclick: cancel; @hidden: !couldCancel"
     ></button>
     <uc-copyright></uc-copyright>
   </uc-start-from>

package/solutions/file-uploader/minimal/FileUploaderMinimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderMinimal.d.ts","sourceRoot":"","sources":["FileUploaderMinimal.js"],"names":[],"mappings":"AAGA;CAkCC;;;;8BApC6B,oCAAoC"}
+{"version":3,"file":"FileUploaderMinimal.d.ts","sourceRoot":"","sources":["FileUploaderMinimal.js"],"names":[],"mappings":"AAIA;CAkCC;;;;8BApC6B,oCAAoC"}

package/solutions/file-uploader/minimal/FileUploaderMinimal.js

@@ -1,3 +1,4 @@
+import { html } from '@symbiotejs/symbiote';
 import { ActivityBlock } from '../../../abstract/ActivityBlock.js';
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
 
@@ -37,7 +38,7 @@ export class FileUploaderMinimal extends SolutionBlock {
   }
 }
 
-FileUploaderMinimal.template = /* HTML */ `
+FileUploaderMinimal.template = html`
   <uc-start-from>
     <uc-drop-area tabindex="0" clickable l10n="choose-file"></uc-drop-area>
     <uc-copyright></uc-copyright>

package/solutions/file-uploader/minimal/index.d.ts

@@ -1,4 +1,4 @@
-export { registerBlocks } from "../../../abstract/registerBlocks.js";
+export { defineComponents } from "../../../abstract/defineComponents.js";
 export { defineLocale } from "../../../abstract/localeRegistry.js";
 export { FileUploaderMinimal } from "./FileUploaderMinimal.js";
 export { StartFrom } from "../../../blocks/StartFrom/StartFrom.js";

package/solutions/file-uploader/minimal/index.js

@@ -1,4 +1,4 @@
-export { registerBlocks } from '../../../abstract/registerBlocks.js';
+export { defineComponents } from '../../../abstract/defineComponents.js';
 export { defineLocale } from '../../../abstract/localeRegistry.js';
 export { FileUploaderMinimal } from './FileUploaderMinimal.js';
 export { StartFrom } from '../../../blocks/StartFrom/StartFrom.js';

package/solutions/file-uploader/regular/FileUploaderRegular.d.ts

@@ -5,8 +5,8 @@ export class FileUploaderRegular extends SolutionBlock {
         '*uploadList': never[];
         '*focusedEntry': null;
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
-        '*collectionErrors': any[];
-        '*collectionState': import("./index.js").OutputCollectionState<import("./index.js").OutputCollectionStatus, "maybe-has-group"> | null;
+        '*collectionErrors': ReturnType<import("./index.js").OutputErrorCollection>[];
+        '*collectionState': import("./index.js").OutputCollectionState | null;
         '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
         '*uploadTrigger': Set<string>;
         '*secureUploadsManager': import("../../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;

package/solutions/file-uploader/regular/FileUploaderRegular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderRegular.d.ts","sourceRoot":"","sources":["FileUploaderRegular.js"],"names":[],"mappings":"AAKA;IAMI;;;;;;;;;;;;;;;;MAGC;IAoBG,eAAe;IACf,yBAAmC;CAK1C;;;;8BAvC6B,oCAAoC"}
+{"version":3,"file":"FileUploaderRegular.d.ts","sourceRoot":"","sources":["FileUploaderRegular.js"],"names":[],"mappings":"AAMA;IAMI;;;;;;+CAY2B,YAAU;mCAM1B,YACf;6BAC8B,2BAA2B;;wCAIhB,2CAGxC;;;;;;MAxBI;IAoBG,eAAe;IACf,yBAAmC;CAK1C;;;;8BAvC6B,oCAAoC"}

package/solutions/file-uploader/regular/FileUploaderRegular.js

@@ -1,4 +1,5 @@
 // @ts-check
+import { html } from '@symbiotejs/symbiote';
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
 import { asBoolean } from '../../../blocks/Config/normalizeConfigValue.js';
 import { EventType } from '../../../blocks/UploadCtxProvider/EventEmitter.js';
@@ -40,14 +41,14 @@ export class FileUploaderRegular extends SolutionBlock {
   }
 }
 
-FileUploaderRegular.template = /* HTML */ `
-  <uc-simple-btn set="@hidden: isHidden"></uc-simple-btn>
+FileUploaderRegular.template = html`
+  <uc-simple-btn bind="@hidden: isHidden"></uc-simple-btn>
 
   <uc-modal strokes block-body-scrolling>
     <uc-start-from>
       <uc-drop-area with-icon clickable></uc-drop-area>
       <uc-source-list wrap></uc-source-list>
-      <button type="button" l10n="start-from-cancel" class="uc-secondary-btn" set="onclick: *historyBack"></button>
+      <button type="button" l10n="start-from-cancel" class="uc-secondary-btn" bind="onclick: *historyBack"></button>
       <uc-copyright></uc-copyright>
     </uc-start-from>
     <uc-upload-list></uc-upload-list>

package/types/global.d.ts

@@ -1,4 +1,4 @@
-import { UC_WINDOW_KEY } from '../abstract/connectBlocksFrom.js';
+import { UC_WINDOW_KEY } from '../abstract/loadFileUploaderFrom.js';
 import * as blocks from '../index.js';
 
 declare global {

package/types/jsx.d.ts

@@ -9,7 +9,7 @@ type FileUploaderMinimal = import('../index.js').FileUploaderMinimal;
 type FormInput = import('../index.js').FormInput;
 type CloudImageEditorBlock = import('../index.js').CloudImageEditorBlock;
 type CtxAttributes = {
-  'ctx-name': string;
+  ctx: string;
 };
 type CommonHtmlAttributes<T> = Partial<
   Pick<React.HTMLAttributes<T>, 'id' | 'children' | 'hidden'> & { class: React.HTMLAttributes<T>['className'] }

package/utils/getPluralForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getPluralForm.d.ts","sourceRoot":"","sources":["getPluralForm.js"],"names":[],"mappings":"AASO,sCAJI,MAAM,SACN,MAAM,GACJ,UAAU,CAKtB;yBAVa,KAAK,cAAc"}
+{"version":3,"file":"getPluralForm.d.ts","sourceRoot":"","sources":["getPluralForm.js"],"names":[],"mappings":"AASO,sCAJI,MAAM,SACN,MAAM,GACJ,UAAU,CAKtB;yBAVa,IAAI,CAAC,cAAc"}

package/utils/isSecureTokenExpired.d.ts

@@ -1,4 +1,4 @@
-export function isSecureTokenExpired(secureToken: import('../types').SecureUploadsSignatureAndExpire, { threshold }: {
+export function isSecureTokenExpired(secureToken: import("../types").SecureUploadsSignatureAndExpire, { threshold }: {
     threshold?: number;
 }): boolean;
 //# sourceMappingURL=isSecureTokenExpired.d.ts.map

package/utils/memoize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"memoize.d.ts","sourceRoot":"","sources":["memoize.js"],"names":[],"mappings":"AASO,uHAaN"}
+{"version":3,"file":"memoize.d.ts","sourceRoot":"","sources":["memoize.js"],"names":[],"mappings":"AASO,wBANc,KAAK,SAAZ,GAAG,EAAG,EACD,OAAO,kBACiB,CAAC,SAA/B,CAAE,GAAG,IAAI,EAAE,KAAK,KAAK,OAAQ,MAC/B,CAAC,GACC,CAAC,CAeb"}

package/utils/mixinClass.d.ts

@@ -4,5 +4,7 @@ export type GConstructor<T> = new (...args: any[]) => T;
  * are some dynamic generated properties or native overrides in the class. We're use it to define dynamic access
  * properties and events to subscribe to.
  */
-export type MixinClass<Base extends GConstructor<HTMLElement>, InstanceProperties extends Record<string, any> = {}> = (new (...args: ConstructorParameters<Base>) => InstanceProperties & InstanceType<Base>) & Omit<Base, "new">;
+export type MixinClass<Base extends GConstructor<HTMLElement>, InstanceProperties extends Record<string, any> = {}> = {
+    new (...args: ConstructorParameters<Base>): InstanceProperties & InstanceType<Base>;
+} & Omit<Base, "new">;
 //# sourceMappingURL=mixinClass.d.ts.map

package/utils/mixinClass.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mixinClass.d.ts","sourceRoot":"","sources":["mixinClass.js"],"names":[],"mappings":"4CAE2B,GAAG,EAAE,KAAK,CAAC;;;;;;qIAWnB,sBAAsB,IAAI,CAAC,KAAG,kBAAkB,GAAG,aAAa,IAAI,CAAC"}
+{"version":3,"file":"mixinClass.d.ts","sourceRoot":"","sources":["mixinClass.js"],"names":[],"mappings":"yBACa,CAAC,IACD,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC;;;;;;uBAQG,IAAI,SAA/B,YAAY,CAAC,WAAW,CAAE,EACJ,kBAAkB,SAAxC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAE,SACrB;IACZ,KAAS,GAAG,IAAI,EAAE,qBAAqB,CAAC,IAAI,CAAC,GAAG,kBAAkB,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;CACrF,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC"}

package/utils/prettyBytes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prettyBytes.d.ts","sourceRoot":"","sources":["prettyBytes.js"],"names":[],"mappings":"AAKA;;;;;;;;GAQG;AAiBI,mCAJI,MAAM,SACN,CAAC,mBAAmB,CAAC,CAAC,MAAM,mBAAmB,CAAC,GAC9C,MAAM,CAmClB"}
+{"version":3,"file":"prettyBytes.d.ts","sourceRoot":"","sources":["prettyBytes.js"],"names":[],"mappings":"AAKA;;;;;;;;GAQG;AAiBI,mCAJI,MAAM,SACN,CAAC,OAAO,YAAY,EAAE,MAAM,OAAO,YAAY,CAAC,GAC9C,MAAM,CAmClB"}

package/utils/template-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template-utils.d.ts","sourceRoot":"","sources":["template-utils.js"],"names":[],"mappings":"AAOA;;;;;GAKG;AAEH;;;;;GAKG;AACH,yHAQC;AAED;;;GAGG;AACH,oDAFa;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,EAAE,CAiB5E"}
+{"version":3,"file":"template-utils.d.ts","sourceRoot":"","sources":["template-utils.js"],"names":[],"mappings":"AAOA;;;;;GAKG;AAEH;;;;;GAKG;AACH,yHAQC;AAED;;;GAGG;AACH,oDAFa;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,EAAE,CAiB5E;;;;;;;;;;;;;;;wBAjDa;IAAE,CAAC,GAAG,QAAQ,GAAG,4BAA4B,SAAS,CAAA;CAAE"}

package/utils/toKebabCase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toKebabCase.d.ts","sourceRoot":"","sources":["toKebabCase.js"],"names":[],"mappings":"AAUO,oEAIO"}
+{"version":3,"file":"toKebabCase.d.ts","sourceRoot":"","sources":["toKebabCase.js"],"names":[],"mappings":"AAUO,4BAJe,CAAC,SAAV,MAAQ,OACV,CAAC,GACC,SAAS,CAAC,CAAC,CAAC,CAMX;sBAbQ,CAAC,SAAV,MAAQ,IACR,CAAC,SAAS,GAAG,MAAM,IAAI,IAAI,MAAM,IAAI,EAAE,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC,CAAC"}

package/utils/uniqueArray.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"uniqueArray.d.ts","sourceRoot":"","sources":["uniqueArray.js"],"names":[],"mappings":"AAKO,8CAEN"}
+{"version":3,"file":"uniqueArray.d.ts","sourceRoot":"","sources":["uniqueArray.js"],"names":[],"mappings":"AAKO,4BAJM,CAAC,OACH,CAAC,EAAE,GACD,CAAC,EAAE,CAIf"}

package/utils/validators/collection/validateCollectionUploadError.d.ts

@@ -1,3 +1,3 @@
 /** @type {import('../../../abstract/ValidationManager.js').FuncCollectionValidator} */
-export const validateCollectionUploadError: import('../../../abstract/ValidationManager.js').FuncCollectionValidator;
+export const validateCollectionUploadError: import("../../../abstract/ValidationManager.js").FuncCollectionValidator;
 //# sourceMappingURL=validateCollectionUploadError.d.ts.map

package/utils/validators/collection/validateMultiple.d.ts

@@ -1,3 +1,3 @@
 /** @type {import('../../../abstract/ValidationManager.js').FuncCollectionValidator} */
-export const validateMultiple: import('../../../abstract/ValidationManager.js').FuncCollectionValidator;
+export const validateMultiple: import("../../../abstract/ValidationManager.js").FuncCollectionValidator;
 //# sourceMappingURL=validateMultiple.d.ts.map

package/utils/validators/file/validateFileType.d.ts

@@ -1,3 +1,3 @@
 /** @type {import('../../../abstract/ValidationManager.js').FuncFileValidator} */
-export const validateFileType: import('../../../abstract/ValidationManager.js').FuncFileValidator;
+export const validateFileType: import("../../../abstract/ValidationManager.js").FuncFileValidator;
 //# sourceMappingURL=validateFileType.d.ts.map

package/utils/validators/file/validateIsImage.d.ts

@@ -1,3 +1,3 @@
 /** @type {import('../../../abstract/ValidationManager.js').FuncFileValidator} */
-export const validateIsImage: import('../../../abstract/ValidationManager.js').FuncFileValidator;
+export const validateIsImage: import("../../../abstract/ValidationManager.js").FuncFileValidator;
 //# sourceMappingURL=validateIsImage.d.ts.map

package/utils/validators/file/validateMaxSizeLimit.d.ts

@@ -1,3 +1,3 @@
 /** @type {import('../../../abstract/ValidationManager.js').FuncFileValidator} */
-export const validateMaxSizeLimit: import('../../../abstract/ValidationManager.js').FuncFileValidator;
+export const validateMaxSizeLimit: import("../../../abstract/ValidationManager.js").FuncFileValidator;
 //# sourceMappingURL=validateMaxSizeLimit.d.ts.map

package/utils/validators/file/validateUploadError.d.ts

@@ -1,3 +1,3 @@
 /** @type {import('../../../abstract/ValidationManager.js').FuncFileValidator} */
-export const validateUploadError: import('../../../abstract/ValidationManager.js').FuncFileValidator;
+export const validateUploadError: import("../../../abstract/ValidationManager.js").FuncFileValidator;
 //# sourceMappingURL=validateUploadError.d.ts.map

package/utils/waitForAttribute.d.ts

@@ -1,8 +1,14 @@
-export function waitForAttribute({ element, attribute, onSuccess, onTimeout, timeout }: {
+export function waitForAttribute<T extends string>({ element, attribute, timeout }: {
     element: HTMLElement;
-    attribute: string;
-    onSuccess: (value: string) => void;
-    onTimeout: () => void;
-    timeout?: number | undefined;
-}): void;
+    attribute: T;
+    timeout?: number;
+}): Promise<ReturnType<T>>;
+export type ReturnType<T extends string> = {
+    success: true;
+    attribute: T;
+    value: string;
+} | {
+    success: false;
+    attribute: T;
+};
 //# sourceMappingURL=waitForAttribute.d.ts.map

package/utils/waitForAttribute.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"waitForAttribute.d.ts","sourceRoot":"","sources":["waitForAttribute.js"],"names":[],"mappings":"AAWO;aAPO,WAAW;eACT,MAAM;uBACE,MAAM,KAAK,IAAI;eACvB,MAAM,IAAI;;SAmCzB"}
+{"version":3,"file":"waitForAttribute.d.ts","sourceRoot":"","sources":["waitForAttribute.js"],"names":[],"mappings":"AA0BO,iCARe,CAAC,SAAV,MAAQ,mCACV;IACV,OAAW,EAAE,WAAW,CAAC;IACzB,SAAa,EAAE,CAAC,CAAC;IACjB,OAAW,CAAC,EAAE,MAAM,CAAC;CAClB,GACS,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAgDlC;uBAnEqB,CAAC,SAAV,MAAQ,IACR;IACZ,OAAe,EAAE,IAAI,CAAC;IACtB,SAAiB,EAAE,CAAC,CAAC;IACrB,KAAa,EAAE,MAAM,CAAC;CACf,GACD;IACN,OAAe,EAAE,KAAK,CAAC;IACvB,SAAiB,EAAE,CAAC,CAAC;CACd"}

package/utils/waitForAttribute.js

@@ -1,19 +1,40 @@
 // @ts-check
 
+import { withResolvers } from './withResolvers.js';
+
+/**
+ * @template {string} T
+ * @typedef {{
+ *       success: true;
+ *       attribute: T;
+ *       value: string;
+ *     }
+ *   | {
+ *       success: false;
+ *       attribute: T;
+ *     }} ReturnType
+ */
+
 /**
+ * @template {string} T
  * @param {{
  *   element: HTMLElement;
- *   attribute: string;
- *   onSuccess: (value: string) => void;
- *   onTimeout: () => void;
+ *   attribute: T;
  *   timeout?: number;
  * }} options
+ * @returns {Promise<ReturnType<T>>}
  */
-export const waitForAttribute = ({ element, attribute, onSuccess, onTimeout, timeout = 300 }) => {
+export const waitForAttribute = async ({ element, attribute, timeout = 300 }) => {
+  const { promise, resolve } = /** @type {typeof withResolvers<ReturnType<T>>} */ (withResolvers)();
+
   const currentAttrValue = element.getAttribute(attribute);
   if (currentAttrValue !== null) {
-    onSuccess(currentAttrValue);
-    return;
+    resolve({
+      success: true,
+      value: currentAttrValue,
+      attribute,
+    });
+    return promise;
   }
 
   const observer = new MutationObserver((mutations) => {
@@ -28,7 +49,10 @@ export const waitForAttribute = ({ element, attribute, onSuccess, onTimeout, tim
 
   const timeoutId = setTimeout(() => {
     observer.disconnect();
-    onTimeout();
+    resolve({
+      success: false,
+      attribute,
+    });
   }, timeout);
 
   /** @param {MutationRecord} mutation */
@@ -37,7 +61,13 @@ export const waitForAttribute = ({ element, attribute, onSuccess, onTimeout, tim
     if (mutation.type === 'attributes' && mutation.attributeName === attribute && attrValue !== null) {
       clearTimeout(timeoutId);
       observer.disconnect();
-      onSuccess(attrValue);
+      resolve({
+        success: true,
+        value: attrValue,
+        attribute,
+      });
     }
   };
+
+  return promise;
 };

package/utils/waitForAttribute.test.js

@@ -1,78 +1,41 @@
+// @ts-check
 import { expect } from '@esm-bundle/chai';
-import { spy } from 'sinon';
 import { delay } from './delay';
 import { waitForAttribute } from './waitForAttribute';
 
 const TEST_ATTRIBUTE = 'test-attribute';
 
 describe('waitForAttribute', () => {
-  it('should call onTimeout callback when timeout is over', async () => {
+  it('should resolve success false when timeout is over', async () => {
     const element = document.createElement('div');
-    const onSuccess = spy();
-    const onTimeout = spy();
-    waitForAttribute({
+    const promise = waitForAttribute({
       element,
       attribute: TEST_ATTRIBUTE,
-      onSuccess,
-      onTimeout,
       timeout: 10,
     });
     await delay(100);
-    expect(onSuccess.called).to.be.false;
-    expect(onTimeout.calledOnce).to.be.true;
+    expect(await promise).to.be.eql({ success: false, attribute: TEST_ATTRIBUTE });
   });
-  it('should call onSuccess callback when attribute is set async', async () => {
+  it('should resolve success true when attribute is set async', async () => {
     const element = document.createElement('div');
-    const onSuccess = spy();
-    const onTimeout = spy();
-    waitForAttribute({
+    const promise = waitForAttribute({
       element,
       attribute: TEST_ATTRIBUTE,
-      onSuccess,
-      onTimeout,
       timeout: 10,
     });
     element.setAttribute(TEST_ATTRIBUTE, 'test');
     await delay(100);
-    expect(onSuccess.calledOnce).to.be.true;
-    expect(onSuccess.getCall(0).args[0]).to.equal('test');
-    expect(onTimeout.called).to.be.false;
+    expect(await promise).to.be.eql({ success: true, attribute: TEST_ATTRIBUTE, value: 'test' });
   });
-  it('should call onSuccess callback when attribute is set sync', async () => {
+  it('should resolve success true when attribute is set sync', async () => {
     const element = document.createElement('div');
     element.setAttribute(TEST_ATTRIBUTE, 'test');
-    const onSuccess = spy();
-    const onTimeout = spy();
-    waitForAttribute({
+    const promise = waitForAttribute({
       element,
       attribute: TEST_ATTRIBUTE,
-      onSuccess,
-      onTimeout,
       timeout: 10,
     });
     await delay(100);
-    expect(onSuccess.calledOnce).to.be.true;
-    expect(onSuccess.getCall(0).args[0]).to.equal('test');
-    expect(onTimeout.called).to.be.false;
-  });
-
-  it('should not call onSuccess on the second attribute change', async () => {
-    const element = document.createElement('div');
-    element.setAttribute(TEST_ATTRIBUTE, 'test');
-    const onSuccess = spy();
-    const onTimeout = spy();
-    waitForAttribute({
-      element,
-      attribute: TEST_ATTRIBUTE,
-      onSuccess,
-      onTimeout,
-      timeout: 10,
-    });
-    await delay(100);
-    element.setAttribute(TEST_ATTRIBUTE, 'tes2');
-    await delay(100);
-    expect(onSuccess.calledOnce).to.be.true;
-    expect(onSuccess.getCall(0).args[0]).to.equal('test');
-    expect(onTimeout.called).to.be.false;
+    expect(await promise).to.be.eql({ success: true, attribute: TEST_ATTRIBUTE, value: 'test' });
   });
 });

package/utils/withResolvers.d.ts

@@ -0,0 +1,7 @@
+/** @template T */
+export function withResolvers<T>(): {
+    resolve: (value: T | PromiseLike<T>) => void;
+    reject: (value?: unknown) => void;
+    promise: Promise<T>;
+};
+//# sourceMappingURL=withResolvers.d.ts.map

package/utils/withResolvers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withResolvers.d.ts","sourceRoot":"","sources":["withResolvers.js"],"names":[],"mappings":"AAEA,kBAAkB;AAClB,8BADc,CAAC;aAUS,CAAC,KAAK,EAAE,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,IAAI;YACpC,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI;;EAG/C"}

package/utils/withResolvers.js

@@ -0,0 +1,17 @@
+// @ts-check
+
+/** @template T */
+export function withResolvers() {
+  let resolve;
+  let reject;
+  /** @type {Promise<T>} */
+  const promise = new Promise((_resolve, _reject) => {
+    resolve = _resolve;
+    reject = _reject;
+  });
+  return {
+    resolve: /** @type {(value: T | PromiseLike<T>) => void} */ (/** @type {unknown} */ (resolve)),
+    reject: /** @type {(value?: unknown) => void} */ (/** @type {unknown} */ (reject)),
+    promise,
+  };
+}

package/utils/withResolvers.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=withResolvers.test.d.ts.map

package/utils/withResolvers.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withResolvers.test.d.ts","sourceRoot":"","sources":["withResolvers.test.js"],"names":[],"mappings":""}

package/utils/withResolvers.test.js

@@ -0,0 +1,27 @@
+import { expect } from '@esm-bundle/chai';
+import { withResolvers } from './withResolvers';
+
+describe('withResolvers', () => {
+  it('should return resolve, reject and promise', () => {
+    const { resolve, reject, promise } = withResolvers();
+    expect(resolve).to.be.a('function');
+    expect(reject).to.be.a('function');
+    expect(promise).to.be.instanceOf(Promise);
+  });
+
+  it('should resolve promise', async () => {
+    const { resolve, promise } = withResolvers();
+    resolve('resolved');
+    expect(await promise).to.equal('resolved');
+  });
+
+  it('should reject promise', async () => {
+    const { reject, promise } = withResolvers();
+    reject(new Error('rejected'));
+    try {
+      await promise;
+    } catch (error) {
+      expect(error.message).to.equal('rejected');
+    }
+  });
+});