Merge branch 'main' into feat/rename-blocks

uploadcare · Jul 29, 2024 · f9aed1d · f9aed1d
2 parents 0fee0c8 + 37ed5b3
commit f9aed1d
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 83 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## [0.50.1](https://github.com/uploadcare/blocks/compare/v0.50.0...v0.50.1) (2024-07-16)
+
+### Bug Fixes
+
+- **styles:** added prefix uc- to className in the js ([#700](https://github.com/uploadcare/blocks/issues/700)) ([672c5c3](https://github.com/uploadcare/blocks/commit/672c5c3f15ce7bb54027ae2ba77217c3aa622824))
+
+# [0.50.0](https://github.com/uploadcare/blocks/compare/v0.49.0...v0.50.0) (2024-07-16)
+
+### Features
+
+- async `secureDeliveryProxyUrlResolver` ([#677](https://github.com/uploadcare/blocks/issues/677)) ([60f06be](https://github.com/uploadcare/blocks/commit/60f06be2ac903d3901eded42cc6ccaaaff41a97a))
+
+See the [`secureDeliveryProxyUrlResolver` docs](https://uploadcare.com/docs/file-uploader/options/#secure-delivery-proxy-url-resolver) for details.
+
 # [0.49.0](https://github.com/uploadcare/blocks/compare/v0.48.1...v0.49.0) (2024-07-03)
 
 ### BEAKING CHANGES

diff --git a/README.md b/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,19 +45,19 @@ 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
 
 We provide a ready-to-use set of UI components for file handling. It saves you valuable development time and effort, allowing you to focus on other core aspects of your application. You even don't need to build a stage while developing — just run the code directly from the browser.
 
 ### 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,7 +67,7 @@ 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">
@@ -77,7 +77,7 @@ We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/int
 </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
@@ -88,11 +88,11 @@ We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/int
 <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 @uploadcare/file-uploader`
+1. Install Uploadcare File Uploader package: `npm i @uploadcare/file-uploader`
 2. Connect `Blocks` from your script file:
 
 ```js
@@ -101,7 +101,7 @@ 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
@@ -112,11 +112,11 @@ UC.registerBlocks(UC);
 <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)

diff --git a/abstract/Block.js b/abstract/Block.js
@@ -236,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(

diff --git a/abstract/UploaderBlock.js b/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,

diff --git a/blocks/CloudImageEditor/src/CloudImageEditorBlock.js b/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);

diff --git a/blocks/CloudImageEditor/src/EditorFilterControl.js b/blocks/CloudImageEditor/src/EditorFilterControl.js
@@ -1,19 +1,24 @@
+// @ts-check
 import { createCdnUrl, createCdnUrlModifiers } from '../../../utils/cdn-utils.js';
 import { EditorButtonControl } from './EditorButtonControl.js';
 import { FAKE_ORIGINAL_FILTER } from './EditorSlider.js';
 import { COMMON_OPERATIONS, transformationsToOperations } from './lib/transformationUtils.js';
 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?.();
   }
 }
 

diff --git a/blocks/CloudImageEditor/src/EditorImageCropper.js b/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