feat: extract public api to the composition class (#676)

* feat: extract public api to the composition class * feat: extract public api to the composition class * feat: add `setModalActive` and `setCurrentActivity` methods * chore: mark private/protected methods * chore: fix getAPI method * chore: fix l10n binding * fix: missing common-upload-success event on errors remove * chore: fix common-upload-success event firing with failed collection validation * fix(file-item): async rendering troubles * fix(block): correctly destroy nullish blocks registrey on destroy callback * chore(build-svg): trim output & add trailing newline * fix(file-item): error reset text-align --------- Co-authored-by: nd0ut <[email protected]>
uploadcare · Jul 2, 2024 · ea29dd2 · ea29dd2
1 parent 3fa6622
commit ea29dd2
Show file tree

Hide file tree

Showing 26 changed files with 517 additions and 400 deletions.
diff --git a/abstract/ActivityBlock.js b/abstract/ActivityBlock.js
@@ -8,7 +8,9 @@ const ACTIVE_ATTR = 'active';
 const ACTIVE_PROP = '___ACTIVITY_IS_ACTIVE___';
 
 export class ActivityBlock extends Block {
+  /** @protected */
   historyTracked = false;
+
   init$ = activityBlockCtx(this);
 
   _debouncedHistoryFlush = debounce(this._historyFlush.bind(this), 10);
@@ -37,6 +39,7 @@ export class ActivityBlock extends Block {
     });
   }
 
+  /** @protected */
   initCallback() {
     super.initCallback();
     if (this.hasAttribute('current-activity')) {
@@ -131,6 +134,7 @@ export class ActivityBlock extends Block {
     ActivityBlock._activityCallbacks.delete(this);
   }
 
+  /** @protected */
   destroyCallback() {
     super.destroyCallback();
     this._isActivityRegistered() && this.unregisterActivity();
@@ -144,6 +148,7 @@ export class ActivityBlock extends Block {
 
     if (!hasCurrentActivityInCtx) {
       this.$['*currentActivity'] = null;
+      this.setOrAddState('*modalActive', false);
     }
   }
 
@@ -199,4 +204,4 @@ ActivityBlock.activities = Object.freeze({
   DETAILS: 'details',
 });
 
-/** @typedef {(typeof ActivityBlock)['activities'][keyof (typeof ActivityBlock)['activities']] | null} ActivityType */
+/** @typedef {(typeof ActivityBlock)['activities'][keyof (typeof ActivityBlock)['activities']] | (string & {}) | null} ActivityType */
diff --git a/abstract/Block.js b/abstract/Block.js
@@ -23,8 +23,10 @@ export class Block extends BaseComponent {
 
   /** @type {string[]} */
   static styleAttrs = [];
+
+  /** @protected */
   requireCtxName = false;
-  allowCustomTemplate = true;
+
   /** @type {import('./ActivityBlock.js').ActivityType} */
   activityType = null;
 
@@ -52,6 +54,7 @@ export class Block extends BaseComponent {
   }
 
   /**
+   * @private
    * @param {string} key
    * @param {number} count
    * @returns {string}
@@ -65,6 +68,7 @@ export class Block extends BaseComponent {
   /**
    * @param {string} key
    * @param {() => void} resolver
+   * @protected
    */
   bindL10n(key, resolver) {
     this.localeManager?.bindL10n(this, key, resolver);
@@ -118,15 +122,7 @@ export class Block extends BaseComponent {
     );
   }
 
-  /** @param {import('./ActivityBlock.js').ActivityType} activityType */
-  setActivity(activityType) {
-    if (this.hasBlockInCtx((b) => b.activityType === activityType)) {
-      this.$['*currentActivity'] = activityType;
-      return;
-    }
-    console.warn(`Activity type "${activityType}" not found in the context`);
-  }
-
+  /** @protected */
   connectedCallback() {
     const styleAttrs = /** @type {typeof Block} */ (this.constructor).styleAttrs;
     styleAttrs.forEach((attr) => {
@@ -158,11 +154,13 @@ export class Block extends BaseComponent {
     WindowHeightTracker.registerClient(this);
   }
 
+  /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
     WindowHeightTracker.unregisterClient(this);
   }
 
+  /** @protected */
   initCallback() {
     if (!this.has('*blocksRegistry')) {
       this.add('*blocksRegistry', new Set());
@@ -188,12 +186,18 @@ export class Block extends BaseComponent {
     });
   }
 
-  /** @returns {LocaleManager | null} */
+  /**
+   * @private
+   * @returns {LocaleManager | null}
+   */
   get localeManager() {
     return this.has('*localeManager') ? this.$['*localeManager'] : null;
   }
 
-  /** @returns {A11y | null} */
+  /**
+   * @returns {A11y | null}
+   * @protected
+   */
   get a11y() {
     return this.has('*a11y') ? this.$['*a11y'] : null;
   }
@@ -203,9 +207,10 @@ export class Block extends BaseComponent {
     return this.$['*blocksRegistry'];
   }
 
+  /** @protected */
   destroyCallback() {
     let blocksRegistry = this.blocksRegistry;
-    blocksRegistry.delete(this);
+    blocksRegistry?.delete(this);
 
     this.localeManager?.destroyL10nBindings(this);
     this.l10nProcessorSubs = new Map();
@@ -214,7 +219,7 @@ export class Block extends BaseComponent {
     // TODO: this should be done inside symbiote
     Data.deleteCtx(this);
 
-    if (blocksRegistry.size === 0) {
+    if (blocksRegistry?.size === 0) {
       setTimeout(() => {
         // Destroy global context after all blocks are destroyed and all callbacks are run
         this.destroyCtxCallback();
@@ -234,28 +239,10 @@ export class Block extends BaseComponent {
     this.a11y?.destroy();
   }
 
-  /**
-   * @param {Number} bytes
-   * @param {Number} [decimals]
-   */
-  fileSizeFmt(bytes, decimals = 2) {
-    let units = ['B', 'KB', 'MB', 'GB', 'TB'];
-    /**
-     * @param {String} str
-     * @returns {String}
-     */
-    if (bytes === 0) {
-      return `0 ${units[0]}`;
-    }
-    let k = 1024;
-    let dm = decimals < 0 ? 0 : decimals;
-    let i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / k ** i).toFixed(dm)) + ' ' + units[i];
-  }
-
   /**
    * @param {String} url
    * @returns {String}
+   * @protected
    */
   proxyUrl(url) {
     if (this.cfg.secureDeliveryProxy && this.cfg.secureDeliveryProxyUrlResolver) {

diff --git a/abstract/CTX.js b/abstract/CTX.js
@@ -6,14 +6,14 @@ export const blockCtx = () => ({});
 /** @param {import('./Block').Block} fnCtx */
 export const activityBlockCtx = (fnCtx) => ({
   ...blockCtx(),
-  '*currentActivity': '',
+  '*currentActivity': null,
   '*currentActivityParams': {},
   '*history': [],
   '*historyBack': null,
   '*closeModal': () => {
     fnCtx.set$({
+      '*currentActivity': null,
       '*modalActive': false,
-      '*currentActivity': '',
     });
   },
 });
@@ -25,7 +25,6 @@ export const uploaderBlockCtx = (fnCtx) => ({
   '*uploadList': [],
   '*focusedEntry': null,
   '*uploadQueue': new Queue(1),
-  '*uploadCollection': null,
   /** @type {ReturnType<import('../types').OutputErrorCollection>[]} */
   '*collectionErrors': [],
   /** @type {import('../types').OutputCollectionState | null} */