@uploadcare/file-uploader 0.50.1-alpha.2 → 1.0.0

package/README.md

@@ -16,13 +16,13 @@
   <a href="https://twitter.com/Uploadcare?ref=github-readme">Twitter</a>
 </p>
 
-# 📦 Uploadcare Blocks: stack-agnostic library for uploading, processing, and editing images on-the-fly
+# 📦 Uploadcare File Uploader: stack-agnostic library for uploading, processing, and editing images on-the-fly
 
-[![npm version](https://badge.fury.io/js/@uploadcare%2Fblocks.svg)](https://www.npmjs.com/package/@uploadcare/blocks)
+[![npm version](https://badge.fury.io/js/@uploadcare%2Fblocks.svg)](https://www.npmjs.com/package/@uploadcare/file-uploader)
 [![GitHub Actions](https://github.com/uploadcare/blocks/workflows/checks/badge.svg)](https://github.com/uploadcare/blocks/actions?query=workflow%3ABuild+branch%3Amaster)
 [![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-_Uploadcare Blocks_ is a powerful JavaScript library for creating custom file-handling services.
+_Uploadcare File Uploader_ is a powerful JavaScript library for creating custom file-handling services.
 It includes various interactive and customizable UI components to enhance users' file uploading
 and processing experience. As a bonus, you receive all the
 [Uploadcare's](https://uploadcare.com/?ref=github-readme) versatile file-handling capabilities,
@@ -31,9 +31,9 @@ including [smart CDN](https://uploadcare.com/docs/delivery/cdn/#content-delivery
 [signed uploads](https://uploadcare.com/docs/security/secure-uploads/?ref=github-readme),
 and [even more](<(https://uploadcare.com/features/?ref=github-readme)>).
 
-See Uploadcare Blocks [in action](https://codesandbox.io/p/devbox/github/uploadcare/blocks-examples/tree/main/examples/js-uploader)!
+See Uploadcare File Uploader [in action](https://codesandbox.io/p/devbox/github/uploadcare/blocks-examples/tree/main/examples/js-uploader)!
 
-<img alt="Uploadcare Blocks examples" src="https://ucarecdn.com/2883da9f-6962-49db-9947-f91a3e25be2f/-/preview/">
+<img alt="Uploadcare File Uploader examples" src="https://ucarecdn.com/2883da9f-6962-49db-9947-f91a3e25be2f/-/preview/">
 
 ## Core features
 
@@ -45,7 +45,7 @@ See Uploadcare Blocks [in action](https://codesandbox.io/p/devbox/github/uploadc
 
 * **Coming soon!** Web Components for any media content management like audio, video, image galleries, and more.
 
-## Why Uploadcare Blocks?
+## Why Uploadcare File Uploader?
 
 ### Rapid integration
 
@@ -53,11 +53,11 @@ We provide a ready-to-use set of UI components for file handling. It saves you v
 
 ### Cross-platform compatibility
 
-Uploadcare Blocks are designed to work seamlessly across various platforms and frameworks. Whether you're building a web application using React, Vue.js, Angular, Svelte, or other frameworks, you get [integrations and support](https://uploadcare.com/docs/integrations/?ref=github-readme) for various development environments.
+Uploadcare File Uploader are designed to work seamlessly across various platforms and frameworks. Whether you're building a web application using React, Vue.js, Angular, Svelte, or other frameworks, you get [integrations and support](https://uploadcare.com/docs/integrations/?ref=github-readme) for various development environments.
 
 ### Developer-friendly
 
-The library comes with modern technologies at your fingertips, like [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), [ESM-level](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) code sharing, and other cutting-edge web standards. _Uploadcare Blocks_ is designed lightweight with minimum external dependencies for a cheap security audit.
+The library comes with modern technologies at your fingertips, like [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), [ESM-level](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) code sharing, and other cutting-edge web standards. _Uploadcare File Uploader_ is designed lightweight with minimum external dependencies for a cheap security audit.
 
 ### Typescript support
 
@@ -67,32 +67,32 @@ We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/int
 
 ### From CDN
 
-1. Connect Uploadcare Blocks directly from your document replacing `{{PACKAGE_VERSION}}` with the [latest version](https://github.com/uploadcare/blocks/releases) of the package:
+1. Connect Uploadcare File Uploader directly from your document:
 
 ```html
 <script type="module">
-  import * as UC from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@{{PACKAGE_VERSION}}/web/blocks.min.js';
+  import * as UC from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/blocks.min.js';
 
   UC.registerBlocks(UC);
 </script>
 ```
 
-2. Start using Uploadcare Blocks in your application markup (don't forget to specify `{{PACKAGE_VERSION}}` with the [latest one](https://github.com/uploadcare/file-uploader/releases)):
+2. Start using Uploadcare File Uploader in your application markup:
 
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@{{PACKAGE_VERSION}}/web/uc-file-uploader-regular.min.css"
+  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
 />
 
 <uc-file-uploader-regular ctx-name="my-uploader"> </uc-file-uploader-regular>
 ```
 
-3. Configure Uploadcare Blocks and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
+3. Configure Uploadcare File Uploader and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
 
 ### From NPM
 
-1. Install Uploadcare Blocks package: `npm i --save-exact @uploadcare/file-uploader`
+1. Install Uploadcare File Uploader package: `npm i @uploadcare/file-uploader`
 2. Connect `Blocks` from your script file:
 
 ```js
@@ -101,22 +101,22 @@ import * as UC from '@uploadcare/file-uploader';
 UC.registerBlocks(UC);
 ```
 
-3. Start using Uploadcare Blocks in your application markup and replace `{{PACKAGE_VERSION}}` with the [latest version](https://github.com/uploadcare/file-uploader/releases) of the package:
+3. Start using Uploadcare File Uploader in your application markup:
 
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@{{PACKAGE_VERSION}}/web/uc-file-uploader-regular.min.css"
+  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
 />
 
 <uc-file-uploader-inline ctx-name="my-uploader"> </uc-file-uploader-inline>
 ```
 
-4. Configure Uploadcare Blocks and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
+4. Configure Uploadcare File Uploader and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
 
 ### Configuration
 
-All configurations in Uploadcare Blocks are managed from `uc-config` block.
+All configurations in Uploadcare File Uploader are managed from `uc-config` block.
 
 1. Sign up to [Uploadcare](https://app.uploadcare.com/accounts/signup/?ref=github-readme).
 2. Get a Public API key in [Uploadcare project's dashboard](https://app.uploadcare.com/projects/-/api-keys/?ref=github-readme).
@@ -128,11 +128,11 @@ All configurations in Uploadcare Blocks are managed from `uc-config` block.
 
 4. Make sure that your config block uses the same `ctx-name` attribute value as your solution block.
 
-Discover more about Uploadcare Blocks configuration in [our documentation](https://uploadcare.com/docs/file-uploader/configuration/?ref=github-readme).
+Discover more about Uploadcare File Uploader configuration in [our documentation](https://uploadcare.com/docs/file-uploader/configuration/?ref=github-readme).
 
-### Deep dive in Uploadcare Blocks 🛠
+### Deep dive in Uploadcare File Uploader 🛠
 
-Follow our [step-by-step installation guide](https://uploadcare.com/docs/file-uploader/installation/?ref=github-readme) to launch Uploadcare Blocks in a few minutes and set it up based on your needs.
+Follow our [step-by-step installation guide](https://uploadcare.com/docs/file-uploader/installation/?ref=github-readme) to launch Uploadcare File Uploader in a few minutes and set it up based on your needs.
 
 ## Browser support
 
@@ -142,7 +142,7 @@ Internet Explorer is outdated and [not supported anymore](https://uploadcare.com
 
 ## Framework support
 
-_Uploadcare Blocks_ is a framework-agnostic solution, so you can use it with **any** runtime you like. Discover the integration examples:
+_Uploadcare File Uploader_ is a framework-agnostic solution, so you can use it with **any** runtime you like. Discover the integration examples:
 <br/>
 
 - [React](https://github.com/uploadcare/uc-blocks-examples/tree/main/examples/react-uploader)

package/abstract/Block.d.ts

@@ -3,6 +3,8 @@ export class Block extends BaseComponent<any> {
     static StateConsumerScope: string | null;
     /** @type {string[]} */
     static styleAttrs: string[];
+    /** @param {String} [name] */
+    static reg(name?: string | undefined): void;
     constructor();
     /** @protected */
     protected requireCtxName: boolean;
@@ -76,10 +78,10 @@ export class Block extends BaseComponent<any> {
     protected destroyCtxCallback(): void;
     /**
      * @param {String} url
-     * @returns {String}
+     * @returns {Promise<String>}
      * @protected
      */
-    protected proxyUrl(url: string): string;
+    protected proxyUrl(url: string): Promise<string>;
     /** @returns {import('../types').ConfigType} } */
     get cfg(): import("../types").ConfigType;
     /** @private */

package/abstract/Block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["Block.js"],"names":[],"mappings":"AAoBA;IACE,4BAA4B;IAC5B,2BADW,MAAM,GAAG,IAAI,CACS;IAEjC,uBAAuB;IACvB,mBADW,MAAM,EAAE,CACI;IAoDvB,cAMC;IAxDD,iBAAiB;IACjB,kCAAuB;IAEvB,wDAAwD;IACxD,cADW,OAAO,oBAAoB,EAAE,YAAY,CAChC;IAEpB,UAAmB;IAEnB;;;;OAIG;IACH;;eAcC;IAED;;;;;OAKG;IACH,kBAIC;IAED;;;;OAIG;IACH,wBAJW,MAAM,YACN,MAAM,IAAI,QAKpB;IAIC,uDAAuD;IACvD,mBADW,IAAI,MAAM,EAAE,IAAI;QAAE,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CACjB;IAKpC;;;;OAIG;IACH,WAJW;;qBAAuF,CAAC,CAAC,YACzF;;qBAAuF,CAAC,CAAC,YACzF;;qBAAuF,CAAC,CAAC,QASnG;IAED;;;OAGG;IACH,gCAHmB,KAAK,KAAK,OAAO,WAUnC;IAED;;;OAGG;IACH,oCAFW,GAAG,QASb;IAkED;;;OAGG;IACH,4BAEC;IAED;;;OAGG;IACH,kCAEC;IAED,yBAAyB;IACzB,iCAEC;IAsBD;;;;OAIG;IACH,qCAKC;IAED;;;;OAIG;IACH,wCAqBC;IAED,iDAAiD;IACjD,yCA8BC;IA3BG,eAAe;IACf,mBAuBE;IAKN;;;;OAIG;IACH,6HAFwD,IAAI,QAQ3D;IAED,8BAA8B;IAC9B,oBADY,OAAO,EAAE,QAWpB;CAmBF;;8BAzVmC,sBAAsB;qBAarC,WAAW"}
+{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["Block.js"],"names":[],"mappings":"AAmBA;IACE,4BAA4B;IAC5B,2BADW,MAAM,GAAG,IAAI,CACS;IAEjC,uBAAuB;IACvB,mBADW,MAAM,EAAE,CACI;IAoTvB,6BAA6B;IAC7B,4CAQC;IAzQD,cAMC;IAxDD,iBAAiB;IACjB,kCAAuB;IAEvB,wDAAwD;IACxD,cADW,OAAO,oBAAoB,EAAE,YAAY,CAChC;IAEpB,UAAmB;IAEnB;;;;OAIG;IACH;;eAcC;IAED;;;;;OAKG;IACH,kBAIC;IAED;;;;OAIG;IACH,wBAJW,MAAM,YACN,MAAM,IAAI,QAKpB;IAIC,uDAAuD;IACvD,mBADW,IAAI,MAAM,EAAE,IAAI;QAAE,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CACjB;IAKpC;;;;OAIG;IACH,WAJW;;qBAAuF,CAAC,CAAC,YACzF;;qBAAuF,CAAC,CAAC,YACzF;;qBAAuF,CAAC,CAAC,QASnG;IAED;;;OAGG;IACH,gCAHmB,KAAK,KAAK,OAAO,WAUnC;IAED;;;OAGG;IACH,oCAFW,GAAG,QASb;IAkED;;;OAGG;IACH,4BAEC;IAED;;;OAGG;IACH,kCAEC;IAED,yBAAyB;IACzB,iCAEC;IAsBD;;;;OAIG;IACH,qCAIC;IAED;;;;OAIG;IACH,iCAHa,eAAe,CA6B3B;IAED,iDAAiD;IACjD,yCA8BC;IA3BG,eAAe;IACf,mBAuBE;IAKN;;;;OAIG;IACH,6HAFwD,IAAI,QAQ3D;IAED,8BAA8B;IAC9B,oBADY,OAAO,EAAE,QAWpB;CAYF;;8BArVmC,sBAAsB;qBAarC,WAAW"}

package/abstract/Block.js

@@ -15,7 +15,6 @@ import { sharedConfigKey } from './sharedConfigKey.js';
 import { A11y } from './a11y.js';
 
 const TAG_PREFIX = 'uc-';
-const LEGACY_TAG_PREFIX = 'lr-';
 
 // @ts-ignore TODO: fix this
 export class Block extends BaseComponent {
@@ -237,26 +236,30 @@ export class Block extends BaseComponent {
     Data.deleteCtx(this.ctxName);
 
     this.localeManager?.destroy();
-    this.a11y?.destroy();
   }
 
   /**
    * @param {String} url
-   * @returns {String}
+   * @returns {Promise<String>}
    * @protected
    */
-  proxyUrl(url) {
+  async proxyUrl(url) {
     if (this.cfg.secureDeliveryProxy && this.cfg.secureDeliveryProxyUrlResolver) {
       console.warn(
         'Both secureDeliveryProxy and secureDeliveryProxyUrlResolver are set. The secureDeliveryProxyUrlResolver will be used.',
       );
     }
     if (this.cfg.secureDeliveryProxyUrlResolver) {
-      return this.cfg.secureDeliveryProxyUrlResolver(url, {
-        uuid: extractUuid(url),
-        cdnUrlModifiers: extractCdnUrlModifiers(url),
-        fileName: extractFilename(url),
-      });
+      try {
+        return await this.cfg.secureDeliveryProxyUrlResolver(url, {
+          uuid: extractUuid(url),
+          cdnUrlModifiers: extractCdnUrlModifiers(url),
+          fileName: extractFilename(url),
+        });
+      } catch (err) {
+        console.error('Failed to resolve secure delivery proxy URL. Falling back to the default URL.', err);
+        return url;
+      }
     }
     if (this.cfg.secureDeliveryProxy) {
       return applyTemplateData(
@@ -327,21 +330,14 @@ export class Block extends BaseComponent {
     console.log(`[${this.ctxName}]`, ...consoleArgs);
   }
 
-  /**
-   * @param {String} [name]
-   * @param {Boolean} [isAlias]
-   */
-  static reg(name, isAlias = false) {
+  /** @param {String} [name] */
+  static reg(name) {
     if (!name) {
       super.reg();
       return;
     }
     if (name.startsWith(TAG_PREFIX)) {
-      super.reg(name, isAlias);
-    }
-
-    if (name.startsWith(LEGACY_TAG_PREFIX)) {
-      super.reg(name, isAlias);
+      super.reg(name);
     }
   }
 }

package/abstract/UploaderBlock.js

@@ -281,10 +281,10 @@ export class UploaderBlock extends ActivityBlock {
         return entry.getValue('errors').length > 0;
       });
       if (
-          uploadCollection.size > 0 &&
-          errorItems.length === 0 &&
-          uploadCollection.size === loadedItems.length &&
-          this.$['*collectionErrors'].length === 0
+        uploadCollection.size > 0 &&
+        errorItems.length === 0 &&
+        uploadCollection.size === loadedItems.length &&
+        this.$['*collectionErrors'].length === 0
       ) {
         this.emit(
           EventType.COMMON_UPLOAD_SUCCESS,

package/abstract/registerBlocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registerBlocks.d.ts","sourceRoot":"","sources":["registerBlocks.js"],"names":[],"mappings":"AAAA,gDAAgD;AAChD;QADmB,MAAM,GAAE,GAAG;SA4B7B"}
+{"version":3,"file":"registerBlocks.d.ts","sourceRoot":"","sources":["registerBlocks.js"],"names":[],"mappings":"AAAA,gDAAgD;AAChD;QADmB,MAAM,GAAE,GAAG;SAoB7B"}

package/abstract/registerBlocks.js

@@ -11,21 +11,11 @@ export function registerBlocks(blockExports) {
       tagName = tagName.replace('-', '');
     }
 
-    let currentTagName = '';
     if (!tagName.startsWith('uc-')) {
-      currentTagName = addPrefix('uc-', tagName);
+      tagName = 'uc-' + tagName;
     }
-
-    let legacyTagName = '';
-    if (!tagName.startsWith('lr-')) {
-      legacyTagName = addPrefix('lr-', tagName);
-    }
-
     if (blockExports[blockName].reg) {
-      blockExports[blockName].reg(currentTagName);
-      blockExports[blockName].reg(legacyTagName, true);
+      blockExports[blockName].reg(tagName);
     }
   }
 }
-
-const addPrefix = (prefix, name) => prefix + name;

package/blocks/CloudImageEditor/src/CloudImageEditorBlock.js

@@ -108,7 +108,7 @@ export class CloudImageEditorBlock extends Block {
     }
 
     try {
-      const cdnUrl = createCdnUrl(this.$['*originalUrl'], createCdnUrlModifiers('json'));
+      const cdnUrl = await this.proxyUrl(createCdnUrl(this.$['*originalUrl'], createCdnUrlModifiers('json')));
       const json = await fetch(cdnUrl).then((response) => response.json());
 
       const { width, height } = /** @type {{ width: number; height: number }} */ (json);

package/blocks/CloudImageEditor/src/EditorFilterControl.d.ts

@@ -4,10 +4,10 @@ export class EditorFilterControl extends EditorButtonControl {
      * @param {IntersectionObserverEntry[]} entries
      * @param {IntersectionObserver} observer
      */
-    _observerCallback(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void;
+    _observerCallback(entries: IntersectionObserverEntry[], observer: IntersectionObserver): Promise<void>;
     _cancelPreload: (() => void) | undefined;
     _operation: string | undefined;
-    _filter: any;
+    _filter: string | undefined;
     _observer: IntersectionObserver | undefined;
     _originalUrl: any;
 }

package/blocks/CloudImageEditor/src/EditorFilterControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorFilterControl.d.ts","sourceRoot":"","sources":["EditorFilterControl.js"],"names":[],"mappings":"AAMA;IAWE,sBA0BC;IAED;;;OAGG;IACH,2BAHW,yBAAyB,EAAE,YAC3B,oBAAoB,QAuB9B;IAfG,yCAA4B;IAiC5B,+BAA0B;IAC1B,aAAqB;IAKvB,4CAEE;IAGF,kBAA+B;CAgDlC;;;;oCAlJmC,0BAA0B"}
+{"version":3,"file":"EditorFilterControl.d.ts","sourceRoot":"","sources":["EditorFilterControl.js"],"names":[],"mappings":"AAOA;IAeE,sBA2BC;IAED;;;OAGG;IACH,2BAHW,yBAAyB,EAAE,YAC3B,oBAAoB,iBAuB9B;IAfG,yCAA4B;IAoC1B,+BAA0B;IAC1B,4BAAqB;IAMzB,4CAEE;IAGF,kBAA+B;CAgDlC;;;;oCA3JmC,0BAA0B"}

package/blocks/CloudImageEditor/src/EditorFilterControl.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { createCdnUrl, createCdnUrlModifiers } from '../../../utils/cdn-utils.js';
 import { EditorButtonControl } from './EditorButtonControl.js';
 import { FAKE_ORIGINAL_FILTER } from './EditorSlider.js';
@@ -5,15 +6,19 @@ import { COMMON_OPERATIONS, transformationsToOperations } from './lib/transforma
 import { preloadImage } from './lib/preloadImage.js';
 
 export class EditorFilterControl extends EditorButtonControl {
-  init$ = {
-    ...this.init$,
-    active: false,
-    title: '',
-    icon: '',
-    isOriginal: false,
-    iconSize: '20',
-    'on.click': null,
-  };
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      active: false,
+      title: '',
+      icon: '',
+      isOriginal: false,
+      iconSize: '20',
+      'on.click': null,
+    };
+  }
 
   _previewSrc() {
     let previewSize = parseInt(window.getComputedStyle(this).getPropertyValue('--l-base-min-width'), 10);
@@ -24,6 +29,7 @@ export class EditorFilterControl extends EditorButtonControl {
 
     /** @type {import('./types.js').Transformations} */
     let transformations = { ...this.$['*editorTransformations'] };
+    // @ts-expect-error FIXME: fix this
     transformations[this._operation] =
       this._filter !== FAKE_ORIGINAL_FILTER
         ? {
@@ -47,10 +53,10 @@ export class EditorFilterControl extends EditorButtonControl {
    * @param {IntersectionObserverEntry[]} entries
    * @param {IntersectionObserver} observer
    */
-  _observerCallback(entries, observer) {
+  async _observerCallback(entries, observer) {
     let intersectionEntry = entries[0];
     if (intersectionEntry.isIntersecting) {
-      let src = this.proxyUrl(this._previewSrc());
+      let src = await this.proxyUrl(this._previewSrc());
       let previewEl = this.ref['preview-el'];
       let { promise, cancel } = preloadImage(src);
       this._cancelPreload = cancel;
@@ -66,14 +72,14 @@ export class EditorFilterControl extends EditorButtonControl {
           observer.unobserve(this);
         });
     } else {
-      this._cancelPreload && this._cancelPreload();
+      this._cancelPreload?.();
     }
   }
 
   initCallback() {
     super.initCallback();
 
-    this.$['on.click'] = (e) => {
+    this.$['on.click'] = () => {
       if (!this.$.active) {
         this.$['*sliderEl'].setOperation(this._operation, this._filter);
         this.$['*sliderEl'].apply();
@@ -85,12 +91,16 @@ export class EditorFilterControl extends EditorButtonControl {
       this.$['*currentFilter'] = this._filter;
     };
 
-    this.defineAccessor('filter', (filter) => {
-      this._operation = 'filter';
-      this._filter = filter;
-      this.$.isOriginal = filter === FAKE_ORIGINAL_FILTER;
-      this.$.icon = this.$.isOriginal ? 'original' : 'slider';
-    });
+    this.defineAccessor(
+      'filter',
+      /** @param {string} filter */
+      (filter) => {
+        this._operation = 'filter';
+        this._filter = filter;
+        this.$.isOriginal = filter === FAKE_ORIGINAL_FILTER;
+        this.$.icon = this.$.isOriginal ? 'original' : 'slider';
+      },
+    );
 
     this._observer = new window.IntersectionObserver(this._observerCallback.bind(this), {
       threshold: [0, 1],
@@ -128,9 +138,9 @@ export class EditorFilterControl extends EditorButtonControl {
       }
     });
 
-    this.sub('*networkProblems', (networkProblems) => {
+    this.sub('*networkProblems', async (networkProblems) => {
       if (!networkProblems) {
-        let src = this.proxyUrl(this._previewSrc());
+        let src = await this.proxyUrl(this._previewSrc());
         let previewEl = this.ref['preview-el'];
         if (previewEl.style.backgroundImage) {
           previewEl.style.backgroundImage = 'none';
@@ -143,7 +153,7 @@ export class EditorFilterControl extends EditorButtonControl {
   destroyCallback() {
     super.destroyCallback();
     this._observer?.disconnect();
-    this._cancelPreload && this._cancelPreload();
+    this._cancelPreload?.();
   }
 }
 

package/blocks/CloudImageEditor/src/EditorImageCropper.js

@@ -461,7 +461,7 @@ export class EditorImageCropper extends Block {
    * @param {import('./types.js').Transformations} transformations
    * @returns {Promise<HTMLImageElement>}
    */
-  _waitForImage(originalUrl, transformations) {
+  async _waitForImage(originalUrl, transformations) {
     let width = this.offsetWidth;
     transformations = {
       ...transformations,
@@ -470,13 +470,13 @@ export class EditorImageCropper extends Block {
       flip: undefined,
       mirror: undefined,
     };
-    let src = this.proxyUrl(viewerImageSrc(originalUrl, width, transformations));
+    let src = await this.proxyUrl(viewerImageSrc(originalUrl, width, transformations));
     let { promise, cancel, image } = preloadImage(src);
 
     let stop = this._handleImageLoading(src);
     image.addEventListener('load', stop, { once: true });
     image.addEventListener('error', stop, { once: true });
-    this._cancelPreload && this._cancelPreload();
+    this._cancelPreload?.();
     this._cancelPreload = cancel;
 
     return promise

package/blocks/CloudImageEditor/src/EditorImageFader.d.ts

@@ -35,14 +35,14 @@ export class EditorImageFader extends Block {
      * @param {String} [options.filter]
      * @param {String} [options.operation]
      * @param {Number} [options.value]
-     * @returns {String}
+     * @returns {Promise<String>}
      */
     private _imageSrc;
     /**
      * @private
      * @param {String} operation
      * @param {Number} value
-     * @returns {Keypoint}
+     * @returns {Promise<Keypoint>}
      */
     private _constructKeypoint;
     /**
@@ -79,7 +79,7 @@ export class EditorImageFader extends Block {
     _cancelLastImages: any;
     _container: HTMLDivElement | undefined;
     /** @param {import('./types.js').Transformations} transformations */
-    setTransformations(transformations: import('./types.js').Transformations): void;
+    setTransformations(transformations: import('./types.js').Transformations): Promise<void>;
     _transformations: import("./types.js").Transformations | undefined;
     /**
      * @param {object} options
@@ -93,7 +93,7 @@ export class EditorImageFader extends Block {
         operation: string;
         value: number;
         filter?: string | undefined;
-    }): void;
+    }): Promise<void>;
     _cancelBatchPreload: (() => void) | undefined;
     /** @private */
     private _setOriginalSrc;
@@ -111,7 +111,7 @@ export class EditorImageFader extends Block {
         value?: number | undefined;
         filter?: string | undefined;
         fromViewer?: boolean | undefined;
-    }): void;
+    }): Promise<void>;
     _url: string | undefined;
     _filter: string | undefined;
     _fromViewer: boolean | undefined;

package/blocks/CloudImageEditor/src/EditorImageFader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorImageFader.d.ts","sourceRoot":"","sources":["EditorImageFader.js"],"names":[],"mappings":"AA8DA;;;;;;;GAOG;AAEH;IAII;;;OAGG;IACH,kBAAsB;IAEtB;;;OAGG;IACH,gBAAmB;IAEnB,eAAe;IACf,8BAAwE;IAK1E;;;;OAIG;IACH,4BAmBC;IAED,eAAe;IACf,eAWC;IATC,yBAQE;IAGJ;;;;;;;;OAQG;IACH,kBAUC;IAED;;;;;OAKG;IACH,2BASC;IAED;;;;;;;OAOG;IACH,gBAEC;IAED;;;;;OAKG;IACH,qBA0CC;IAED,qCAAqC;IACrC,WADY,eAAe,QAK1B;IAED;;;;OAIG;IACH,gBAgBC;IAfC,+BAA2B;IAC3B,2BAAmB;IAgBrB,eAAe;IACf,4BAKC;IAED,eAAe;IACf,mBAmCC;IAjCC,mBAAqE;IAcrE,uBAGC;IAMC,uCAA2B;IAY/B,oEAAoE;IACpE,oCADY,OAAO,YAAY,EAAE,eAAe,QAmB/C;IAjBC,mEAAuC;IAmBzC;;;;;;OAMG;IACH;QAL2B,GAAG;QACH,SAAS;QACT,KAAK;QACJ,MAAM;aAUjC;IADC,8CAAiC;IAGnC,eAAe;IACf,wBA4CC;IAED;;;;;;;OAOG;IACH;QAN2B,GAAG;QACF,SAAS;QACT,KAAK;QACL,MAAM;QACL,UAAU;aAsBtC;IAjBC,yBAAe;IAGf,4BAAqB;IACrB,iCAA6B;IAS7B,mCAAkH;IAMpH,0CAA0C;IAC1C,sBADY;QAAE,IAAI,CAAC,UAAS;KAAE,QA4B7B;CACF;;;;;WAlYa,gBAAgB;;;sBAlER,4BAA4B"}
+{"version":3,"file":"EditorImageFader.d.ts","sourceRoot":"","sources":["EditorImageFader.js"],"names":[],"mappings":"AA8DA;;;;;;;GAOG;AAEH;IAII;;;OAGG;IACH,kBAAsB;IAEtB;;;OAGG;IACH,gBAAmB;IAEnB,eAAe;IACf,8BAAwE;IAK1E;;;;OAIG;IACH,4BAmBC;IAED,eAAe;IACf,eAWC;IATC,yBAQE;IAGJ;;;;;;;;OAQG;IACH,kBAUC;IAED;;;;;OAKG;IACH,2BASC;IAED;;;;;;;OAOG;IACH,gBAEC;IAED;;;;;OAKG;IACH,qBA0CC;IAED,qCAAqC;IACrC,WADY,eAAe,QAK1B;IAED;;;;OAIG;IACH,gBAgBC;IAfC,+BAA2B;IAC3B,2BAAmB;IAgBrB,eAAe;IACf,4BAKC;IAED,eAAe;IACf,mBAmCC;IAjCC,mBAAqE;IAcrE,uBAGC;IAMC,uCAA2B;IAY/B,oEAAoE;IACpE,oCADY,OAAO,YAAY,EAAE,eAAe,iBAmB/C;IAjBC,mEAAuC;IAmBzC;;;;;;OAMG;IACH;QAL2B,GAAG;QACH,SAAS;QACT,KAAK;QACJ,MAAM;sBAUjC;IADC,8CAAiC;IAGnC,eAAe;IACf,wBA4CC;IAED;;;;;;;OAOG;IACH;QAN2B,GAAG;QACF,SAAS;QACT,KAAK;QACL,MAAM;QACL,UAAU;sBAwBtC;IAnBC,yBAAe;IAGf,4BAAqB;IACrB,iCAA6B;IAS7B,mCAEC;IAMH,0CAA0C;IAC1C,sBADY;QAAE,IAAI,CAAC,UAAS;KAAE,QA4B7B;CACF;;;;;WApYa,gBAAgB;;;sBAlER,4BAA4B"}

package/blocks/CloudImageEditor/src/EditorImageFader.js

@@ -138,9 +138,9 @@ export class EditorImageFader extends Block {
    * @param {String} [options.filter]
    * @param {String} [options.operation]
    * @param {Number} [options.value]
-   * @returns {String}
+   * @returns {Promise<String>}
    */
-  _imageSrc({ url = this._url, filter = this._filter, operation, value } = {}) {
+  async _imageSrc({ url = this._url, filter = this._filter, operation, value } = {}) {
     let transformations = { ...this._transformations };
 
     if (operation) {
@@ -149,17 +149,17 @@ export class EditorImageFader extends Block {
 
     // do not use getBoundingClientRect because scale transform affects it
     let width = this.offsetWidth;
-    return this.proxyUrl(viewerImageSrc(url, width, transformations));
+    return await this.proxyUrl(viewerImageSrc(url, width, transformations));
   }
 
   /**
    * @private
    * @param {String} operation
    * @param {Number} value
-   * @returns {Keypoint}
+   * @returns {Promise<Keypoint>}
    */
-  _constructKeypoint(operation, value) {
-    let src = this._imageSrc({ operation, value });
+  async _constructKeypoint(operation, value) {
+    let src = await this._imageSrc({ operation, value });
     return {
       src,
       image: null,
@@ -187,14 +187,14 @@ export class EditorImageFader extends Block {
    * @param {String | null} filter
    * @param {Number} value
    */
-  _addKeypoint(operation, filter, value) {
+  async _addKeypoint(operation, filter, value) {
     let shouldSkip = () =>
       !this._isSame(operation, filter) || this._value !== value || !!this._keypoints.find((kp) => kp.value === value);
 
     if (shouldSkip()) {
       return;
     }
-    let keypoint = this._constructKeypoint(operation, value);
+    let keypoint = await this._constructKeypoint(operation, value);
     let image = new Image();
     image.src = keypoint.src;
     let stop = this._handleImageLoading(keypoint.src);
@@ -308,10 +308,10 @@ export class EditorImageFader extends Block {
   }
 
   /** @param {import('./types.js').Transformations} transformations */
-  setTransformations(transformations) {
+  async setTransformations(transformations) {
     this._transformations = transformations;
     if (this._previewImage) {
-      let src = this._imageSrc();
+      let src = await this._imageSrc();
       let stop = this._handleImageLoading(src);
       this._previewImage.src = src;
       this._previewImage.addEventListener('load', stop, { once: true });
@@ -335,11 +335,11 @@ export class EditorImageFader extends Block {
    * @param {Number} options.value
    * @param {String} [options.filter]
    */
-  preload({ url, filter, operation, value }) {
+  async preload({ url, filter, operation, value }) {
     this._cancelBatchPreload && this._cancelBatchPreload();
 
     let keypoints = keypointsRange(operation, value);
-    let srcList = keypoints.map((kp) => this._imageSrc({ url, filter, operation, value: kp }));
+    let srcList = await Promise.all(keypoints.map((kp) => this._imageSrc({ url, filter, operation, value: kp })));
     let { cancel } = batchPreloadImages(srcList);
 
     this._cancelBatchPreload = cancel;
@@ -400,7 +400,7 @@ export class EditorImageFader extends Block {
    * @param {String} [options.filter]
    * @param {Boolean} [options.fromViewer]
    */
-  activate({ url, operation, value, filter, fromViewer }) {
+  async activate({ url, operation, value, filter, fromViewer }) {
     this._isActive = true;
     this._hidden = false;
     this._url = url;
@@ -411,12 +411,14 @@ export class EditorImageFader extends Block {
 
     let isOriginal = typeof value !== 'number' && !filter;
     if (isOriginal) {
-      let src = this._imageSrc({ operation, value });
+      let src = await this._imageSrc({ operation, value });
       this._setOriginalSrc(src);
       this._container && this._container.remove();
       return;
     }
-    this._keypoints = keypointsRange(operation, value).map((keyValue) => this._constructKeypoint(operation, keyValue));
+    this._keypoints = await Promise.all(
+      keypointsRange(operation, value).map((keyValue) => this._constructKeypoint(operation, keyValue)),
+    );
 
     this._update(operation, value);
     this._initNodes();

package/blocks/CloudImageEditor/src/EditorToolbar.js

@@ -105,7 +105,7 @@ export class EditorToolbar extends Block {
         visible: 'uc-tab-toggles--visible',
       },
       'on.cancel': () => {
-        this._cancelPreload && this._cancelPreload();
+        this._cancelPreload?.();
         this.$['*on.cancel']();
       },
       'on.apply': () => {
@@ -271,11 +271,11 @@ export class EditorToolbar extends Block {
   }
 
   /** @private */
-  _preloadEditedImage() {
+  async _preloadEditedImage() {
     if (this.$['*imgContainerEl'] && this.$['*originalUrl']) {
       let width = this.$['*imgContainerEl'].offsetWidth;
-      let src = this.proxyUrl(viewerImageSrc(this.$['*originalUrl'], width, this.$['*editorTransformations']));
-      this._cancelPreload && this._cancelPreload();
+      let src = await this.proxyUrl(viewerImageSrc(this.$['*originalUrl'], width, this.$['*editorTransformations']));
+      this._cancelPreload?.();
       let { cancel } = batchPreloadImages([src]);
       this._cancelPreload = () => {
         cancel();

package/blocks/FileItem/FileItem.js

@@ -132,7 +132,7 @@ export class FileItem extends UploaderBlock {
 
     if (entry.getValue('fileInfo') && entry.getValue('isImage')) {
       let size = this.cfg.thumbSize;
-      let thumbUrl = this.proxyUrl(
+      let thumbUrl = await this.proxyUrl(
         createCdnUrl(
           createOriginalUrl(this.cfg.cdnCname, this._entry.getValue('uuid')),
           createCdnUrlModifiers(entry.getValue('cdnUrlModifiers'), `scale_crop/${size}x${size}/center`),