Deploying to gh-pages from @ 2beae73 🚀

uploadcare · Nov 9, 2023 · 118d28f · 118d28f
1 parent bc46002
commit 118d28f
Show file tree

Hide file tree

Showing 26 changed files with 1,499 additions and 540 deletions.
diff --git a/abstract/ActivityBlock.js b/abstract/ActivityBlock.js
@@ -1,5 +1,4 @@
 // @ts-check
-import { Modal } from '../blocks/Modal/Modal.js';
 import { debounce } from '../blocks/utils/debounce.js';
 import { Block } from './Block.js';
 import { activityBlockCtx } from './CTX.js';

diff --git a/abstract/Block.js b/abstract/Block.js
@@ -1,14 +1,15 @@
 // @ts-check
 import { BaseComponent } from '@symbiotejs/symbiote';
+import { EventEmitter } from '../blocks/UploadCtxProvider/EventEmitter.js';
 import { createWindowHeightTracker, getIsWindowHeightTracked } from '../utils/createWindowHeightTracker.js';
+import { getPluralForm } from '../utils/getPluralForm.js';
 import { applyTemplateData, getPluralObjects } from '../utils/template-utils.js';
+import { toKebabCase } from '../utils/toKebabCase.js';
+import { waitForAttribute } from '../utils/waitForAttribute.js';
+import { warnOnce } from '../utils/warnOnce.js';
 import { blockCtx } from './CTX.js';
 import { l10nProcessor } from './l10nProcessor.js';
 import { sharedConfigKey } from './sharedConfigKey.js';
-import { toKebabCase } from '../utils/toKebabCase.js';
-import { warnOnce } from '../utils/warnOnce.js';
-import { getPluralForm } from '../utils/getPluralForm.js';
-import { waitForAttribute } from '../utils/waitForAttribute.js';
 
 const TAG_PREFIX = 'lr-';
 
@@ -77,6 +78,21 @@ export class Block extends BaseComponent {
     this.__l10nKeys = [];
   }
 
+  /**
+   * @template {typeof import('../blocks/UploadCtxProvider/EventEmitter.js').EventType[keyof typeof import('../blocks/UploadCtxProvider/EventEmitter.js').EventType]} T
+   * @param {T} type
+   * @param {import('../blocks/UploadCtxProvider/EventEmitter.js').EventPayload[T]} [payload]
+   * @param {{ debounce?: boolean | number }} [options]
+   */
+  emit(type, payload, options) {
+    /** @type {import('../blocks/UploadCtxProvider/EventEmitter.js').EventEmitter} */
+    const eventEmitter = this.has('*eventEmitter') && this.$['*eventEmitter'];
+    if (!eventEmitter) {
+      return;
+    }
+    eventEmitter.emit(type, payload, options);
+  }
+
   /**
    * @param {String} localPropKey
    * @param {String} l10nKey
@@ -165,6 +181,10 @@ export class Block extends BaseComponent {
   initCallback() {
     let blocksRegistry = this.$['*blocksRegistry'];
     blocksRegistry.add(this);
+
+    if (!this.$['*eventEmitter']) {
+      this.$['*eventEmitter'] = new EventEmitter(() => this.ctxName);
+    }
   }
 
   destroyCallback() {
@@ -271,7 +291,12 @@ export class Block extends BaseComponent {
     }
   }
 
+  /** @deprecated */
   updateCtxCssData = () => {
+    warnOnce(
+      'Using CSS variables for configuration is deprecated. Please use `lr-config` instead. See migration guide: https://uploadcare.com/docs/file-uploader/migration-to-0.25.0/'
+    );
+
     /** @type {Set<Block>} */
     let blocks = this.$['*blocksRegistry'];
     for (let block of blocks) {

diff --git a/abstract/CTX.js b/abstract/CTX.js
@@ -4,6 +4,8 @@ import { Queue } from '@uploadcare/upload-client';
 export const blockCtx = () => ({
   /** @type {Set<import('./Block').Block>} */
   '*blocksRegistry': new Set(),
+  /** @type {import('../blocks/UploadCtxProvider/EventEmitter.js').EventEmitter | null} */
+  '*eventEmitter': null,
 });
 
 /** @param {import('./Block').Block} fnCtx */

diff --git a/abstract/EventManager.js b/abstract/EventManager.js
diff --git a/abstract/UploaderBlock.js b/abstract/UploaderBlock.js
@@ -4,6 +4,7 @@ import { ActivityBlock } from './ActivityBlock.js';
 import { Data } from '@symbiotejs/symbiote';
 import { calculateMaxCenteredCropFrame } from '../blocks/CloudImageEditor/src/crop-utils.js';
 import { parseCropPreset } from '../blocks/CloudImageEditor/src/lib/parseCropPreset.js';
+import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
 import { UploadSource } from '../blocks/utils/UploadSource.js';
 import { serializeCsv } from '../blocks/utils/comma-separated.js';
 import { debounce } from '../blocks/utils/debounce.js';
@@ -14,7 +15,6 @@ import { prettyBytes } from '../utils/prettyBytes.js';
 import { stringToArray } from '../utils/stringToArray.js';
 import { warnOnce } from '../utils/warnOnce.js';
 import { uploaderBlockCtx } from './CTX.js';
-import { EVENT_TYPES, EventData, EventManager } from './EventManager.js';
 import { TypedCollection } from './TypedCollection.js';
 import { uploadEntrySchema } from './uploadEntrySchema.js';
 
@@ -268,14 +268,7 @@ export class UploaderBlock extends ActivityBlock {
         this.setOrAddState('*modalActive', true);
       }
     }
-    EventManager.emit(
-      new EventData({
-        type: EVENT_TYPES.INIT_FLOW,
-        ctx: this.ctxName,
-      }),
-      undefined,
-      false
-    );
+    this.emit(EventType.INIT_FLOW);
   }
 
   doneFlow() {
@@ -286,14 +279,7 @@ export class UploaderBlock extends ActivityBlock {
     if (!this.$['*currentActivity']) {
       this.setOrAddState('*modalActive', false);
     }
-    EventManager.emit(
-      new EventData({
-        type: EVENT_TYPES.DONE_FLOW,
-        ctx: this.ctxName,
-      }),
-      undefined,
-      false
-    );
+    this.emit(EventType.DONE_FLOW);
   }
 
   /** @returns {TypedCollection} */
@@ -420,15 +406,7 @@ export class UploaderBlock extends ActivityBlock {
     if (data.length !== this.uploadCollection.size) {
       return;
     }
-    EventManager.emit(
-      new EventData({
-        type: EVENT_TYPES.DATA_OUTPUT,
-        // @ts-ignore TODO: fix this
-        ctx: this.ctxName,
-        // @ts-ignore TODO: fix this
-        data,
-      })
-    );
+    this.emit(EventType.DATA_OUTPUT, data);
     // @ts-ignore TODO: fix this
     this.$['*outputData'] = data;
   }, 100);
@@ -483,15 +461,7 @@ export class UploaderBlock extends ActivityBlock {
       });
       let progress = Math.round(commonProgress / items.length);
       this.$['*commonProgress'] = progress;
-      EventManager.emit(
-        new EventData({
-          type: EVENT_TYPES.UPLOAD_PROGRESS,
-          ctx: this.ctxName,
-          data: progress,
-        }),
-        undefined,
-        progress === 100
-      );
+      this.emit(EventType.UPLOAD_PROGRESS, progress, { debounce: true });
     }
     if (changeMap.fileInfo) {
       if (this.cfg.cropPreset) {
@@ -507,62 +477,31 @@ export class UploaderBlock extends ActivityBlock {
         let data = this.getOutputData((dataItem) => {
           return !!dataItem.getValue('fileInfo') && !dataItem.getValue('silentUpload');
         });
-        data.length > 0 &&
-          EventManager.emit(
-            new EventData({
-              type: EVENT_TYPES.UPLOAD_FINISH,
-              ctx: this.ctxName,
-              data,
-            })
-          );
+        data.length > 0 && this.emit(EventType.UPLOAD_FINISH, data, { debounce: true });
       }
     }
     if (changeMap.uploadError) {
       let items = uploadCollection.findItems((entry) => {
         return !!entry.getValue('uploadError');
       });
       items.forEach((id) => {
-        EventManager.emit(
-          new EventData({
-            type: EVENT_TYPES.UPLOAD_ERROR,
-            ctx: this.ctxName,
-            data: uploadCollection.readProp(id, 'uploadError'),
-          }),
-          undefined,
-          false
-        );
+        this.emit(EventType.UPLOAD_ERROR, uploadCollection.readProp(id, 'uploadError'));
       });
     }
     if (changeMap.validationErrorMsg) {
       let items = uploadCollection.findItems((entry) => {
         return !!entry.getValue('validationErrorMsg');
       });
       items.forEach((id) => {
-        EventManager.emit(
-          new EventData({
-            type: EVENT_TYPES.VALIDATION_ERROR,
-            ctx: this.ctxName,
-            data: uploadCollection.readProp(id, 'validationErrorMsg'),
-          }),
-          undefined,
-          false
-        );
+        this.emit(EventType.VALIDATION_ERROR, uploadCollection.readProp(id, 'validationErrorMsg'));
       });
     }
     if (changeMap.cdnUrlModifiers) {
       let items = uploadCollection.findItems((entry) => {
         return !!entry.getValue('cdnUrlModifiers');
       });
       items.forEach((id) => {
-        EventManager.emit(
-          new EventData({
-            type: EVENT_TYPES.CLOUD_MODIFICATION,
-            ctx: this.ctxName,
-            data: Data.getCtx(id).store,
-          }),
-          undefined,
-          false
-        );
+        this.emit(EventType.CLOUD_MODIFICATION, uploadCollection.readProp(id, 'cdnUrlModifiers'));
       });
     }
   };

diff --git a/blocks/Config/Config.js b/blocks/Config/Config.js
@@ -38,7 +38,7 @@ const attrStateMapping = /** @type {Record<keyof import('../../types').ConfigAtt
   ...Object.fromEntries(allConfigKeys.map((key) => [key.toLowerCase(), sharedConfigKey(key)])),
 });
 
-export class Config extends Block {
+class ConfigClass extends Block {
   ctxOwner = true;
   requireCtxName = true;
 
@@ -55,6 +55,10 @@ export class Config extends Block {
         ])
       ),
     };
+
+    Object.assign(this, {
+      test: 'test',
+    });
   }
 
   initCallback() {
@@ -127,4 +131,8 @@ export class Config extends Block {
   }
 }
 
-Config.bindAttributes(attrStateMapping);
+ConfigClass.bindAttributes(attrStateMapping);
+
+export const Config = ConfigClass;
+
+/** @typedef {typeof ConfigClass & import('../../types').ConfigType} Config */
diff --git a/blocks/FileItem/FileItem.js b/blocks/FileItem/FileItem.js
@@ -1,9 +1,9 @@
 // @ts-check
 import { UploadClientError, uploadFile } from '@uploadcare/upload-client';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
-import { EVENT_TYPES, EventData, EventManager } from '../../abstract/EventManager.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { createCdnUrl, createCdnUrlModifiers, createOriginalUrl } from '../../utils/cdn-utils.js';
+import { EventType } from '../UploadCtxProvider/EventEmitter.js';
 import { fileCssBg } from '../svg-backgrounds/svg-backgrounds.js';
 import { debounce } from '../utils/debounce.js';
 import { generateThumb } from '../utils/resizeImage.js';
@@ -74,13 +74,7 @@ export class FileItem extends UploaderBlock {
           let data = this.getOutputData((dataItem) => {
             return dataItem.getValue('uuid') === entryUuid;
           });
-          EventManager.emit(
-            new EventData({
-              type: EVENT_TYPES.REMOVE,
-              ctx: this.ctxName,
-              data,
-            })
-          );
+          this.emit(EventType.REMOVE, data, { debounce: true });
         }
         this.uploadCollection.remove(this.$.uid);
       },
@@ -370,13 +364,7 @@ export class FileItem extends UploaderBlock {
       return !dataItem.getValue('fileInfo');
     });
 
-    EventManager.emit(
-      new EventData({
-        type: EVENT_TYPES.UPLOAD_START,
-        ctx: this.ctxName,
-        data,
-      })
-    );
+    this.emit(EventType.UPLOAD_START, data, { debounce: true });
 
     this._debouncedCalculateState();
     entry.setValue('isUploading', true);