@uploadcare/file-uploader 0.50.1-alpha.2

package/abstract/Block.js

@@ -0,0 +1,349 @@
+// @ts-check
+import { BaseComponent, Data } from '@symbiotejs/symbiote';
+import { initialConfig } from '../blocks/Config/initialConfig.js';
+import { EventEmitter } from '../blocks/UploadCtxProvider/EventEmitter.js';
+import { WindowHeightTracker } from '../utils/WindowHeightTracker.js';
+import { extractFilename, extractCdnUrlModifiers, extractUuid } from '../utils/cdn-utils.js';
+import { getLocaleDirection } from '../utils/getLocaleDirection.js';
+import { getPluralForm } from '../utils/getPluralForm.js';
+import { applyTemplateData, getPluralObjects } from '../utils/template-utils.js';
+import { waitForAttribute } from '../utils/waitForAttribute.js';
+import { blockCtx } from './CTX.js';
+import { LocaleManager, localeStateKey } from './LocaleManager.js';
+import { l10nProcessor } from './l10nProcessor.js';
+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 {
+  /** @type {string | null} */
+  static StateConsumerScope = null;
+
+  /** @type {string[]} */
+  static styleAttrs = [];
+
+  /** @protected */
+  requireCtxName = false;
+
+  /** @type {import('./ActivityBlock.js').ActivityType} */
+  activityType = null;
+
+  init$ = blockCtx();
+
+  /**
+   * @param {String} str
+   * @param {{ [key: string]: string | number }} variables
+   * @returns {String}
+   */
+  l10n(str, variables = {}) {
+    if (!str) {
+      return '';
+    }
+    let template = this.$[localeStateKey(str)] || str;
+    let pluralObjects = getPluralObjects(template);
+    for (let pluralObject of pluralObjects) {
+      variables[pluralObject.variable] = this.pluralize(
+        pluralObject.pluralKey,
+        Number(variables[pluralObject.countVariable]),
+      );
+    }
+    let result = applyTemplateData(template, variables);
+    return result;
+  }
+
+  /**
+   * @private
+   * @param {string} key
+   * @param {number} count
+   * @returns {string}
+   */
+  pluralize(key, count) {
+    const locale = this.l10n('locale-id') || 'en';
+    const pluralForm = getPluralForm(locale, count);
+    return this.l10n(`${key}__${pluralForm}`);
+  }
+
+  /**
+   * @param {string} key
+   * @param {() => void} resolver
+   * @protected
+   */
+  bindL10n(key, resolver) {
+    this.localeManager?.bindL10n(this, key, resolver);
+  }
+
+  constructor() {
+    super();
+    /** @type {Map<string, Set<{ remove: () => void }>>} */
+    this.l10nProcessorSubs = new Map();
+    // @ts-ignore TODO: fix this
+    this.addTemplateProcessor(l10nProcessor);
+  }
+
+  /**
+   * @param {Parameters<import('../blocks/UploadCtxProvider/EventEmitter.js').EventEmitter['emit']>[0]} type
+   * @param {Parameters<import('../blocks/UploadCtxProvider/EventEmitter.js').EventEmitter['emit']>[1]} [payload]
+   * @param {Parameters<import('../blocks/UploadCtxProvider/EventEmitter.js').EventEmitter['emit']>[2]} [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 {(block: Block) => boolean} callback
+   * @returns {Boolean}
+   */
+  hasBlockInCtx(callback) {
+    for (let block of this.blocksRegistry) {
+      if (callback(block)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * @param {String} prop
+   * @param {any} newVal
+   */
+  setOrAddState(prop, newVal) {
+    this.add$(
+      {
+        [prop]: newVal,
+      },
+      true,
+    );
+  }
+
+  /** @protected */
+  connectedCallback() {
+    const styleAttrs = /** @type {typeof Block} */ (this.constructor).styleAttrs;
+    styleAttrs.forEach((attr) => {
+      this.setAttribute(attr, '');
+    });
+
+    if (this.hasAttribute('retpl')) {
+      // @ts-ignore TODO: fix this
+      this.constructor['template'] = null;
+      this.processInnerHtml = true;
+    }
+    if (this.requireCtxName) {
+      waitForAttribute({
+        element: this,
+        attribute: 'ctx-name',
+        onSuccess: () => {
+          // async wait for ctx-name attribute to be set, needed for Angular because it sets attributes after mount
+          // TODO: should be moved to the symbiote core
+          super.connectedCallback();
+        },
+        onTimeout: () => {
+          console.error('Attribute `ctx-name` is required and it is not set.');
+        },
+      });
+    } else {
+      super.connectedCallback();
+    }
+
+    WindowHeightTracker.registerClient(this);
+  }
+
+  /** @protected */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    WindowHeightTracker.unregisterClient(this);
+  }
+
+  /** @protected */
+  initCallback() {
+    if (!this.has('*blocksRegistry')) {
+      this.add('*blocksRegistry', new Set());
+    }
+
+    let blocksRegistry = this.$['*blocksRegistry'];
+    blocksRegistry.add(this);
+
+    if (!this.has('*eventEmitter')) {
+      this.add('*eventEmitter', new EventEmitter(this.debugPrint.bind(this)));
+    }
+    if (!this.has('*localeManager')) {
+      this.add('*localeManager', new LocaleManager(this));
+    }
+
+    if (!this.has('*a11y')) {
+      this.add('*a11y', new A11y());
+    }
+
+    this.sub(localeStateKey('locale-id'), (localeId) => {
+      const direction = getLocaleDirection(localeId);
+      this.style.direction = direction === 'ltr' ? '' : direction;
+    });
+  }
+
+  /**
+   * @private
+   * @returns {LocaleManager | null}
+   */
+  get localeManager() {
+    return this.has('*localeManager') ? this.$['*localeManager'] : null;
+  }
+
+  /**
+   * @returns {A11y | null}
+   * @protected
+   */
+  get a11y() {
+    return this.has('*a11y') ? this.$['*a11y'] : null;
+  }
+
+  /** @type {Set<Block>} */
+  get blocksRegistry() {
+    return this.$['*blocksRegistry'];
+  }
+
+  /** @protected */
+  destroyCallback() {
+    let blocksRegistry = this.blocksRegistry;
+    blocksRegistry?.delete(this);
+
+    this.localeManager?.destroyL10nBindings(this);
+    this.l10nProcessorSubs = new Map();
+
+    // Destroy local context
+    // TODO: this should be done inside symbiote
+    Data.deleteCtx(this);
+
+    if (blocksRegistry?.size === 0) {
+      setTimeout(() => {
+        // Destroy global context after all blocks are destroyed and all callbacks are run
+        this.destroyCtxCallback();
+      }, 0);
+    }
+  }
+
+  /**
+   * Called when the last block is removed from the context. Note that inheritors must run their callback before that.
+   *
+   * @protected
+   */
+  destroyCtxCallback() {
+    Data.deleteCtx(this.ctxName);
+
+    this.localeManager?.destroy();
+    this.a11y?.destroy();
+  }
+
+  /**
+   * @param {String} url
+   * @returns {String}
+   * @protected
+   */
+  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),
+      });
+    }
+    if (this.cfg.secureDeliveryProxy) {
+      return applyTemplateData(
+        this.cfg.secureDeliveryProxy,
+        { previewUrl: url },
+        { transform: (value) => window.encodeURIComponent(value) },
+      );
+    }
+    return url;
+  }
+
+  /** @returns {import('../types').ConfigType} } */
+  get cfg() {
+    if (!this.__cfgProxy) {
+      let o = Object.create(null);
+      /** @private */
+      this.__cfgProxy = new Proxy(o, {
+        set: (obj, key, value) => {
+          if (typeof key !== 'string') {
+            return false;
+          }
+          const sharedKey = sharedConfigKey(/** @type {keyof import('../types').ConfigType} */ (key));
+          if (!this.has(sharedKey)) {
+            this.add(sharedKey, initialConfig[/** @type {keyof import('../types').ConfigType} */ (key)]);
+          }
+          this.$[sharedKey] = value;
+          return true;
+        },
+        /**
+         * @param {never} obj
+         * @param {keyof import('../types').ConfigType} key
+         */
+        get: (obj, key) => {
+          const sharedKey = sharedConfigKey(key);
+          if (!this.has(sharedKey)) {
+            this.add(sharedKey, initialConfig[key]);
+          }
+          return this.$[sharedConfigKey(key)];
+        },
+      });
+    }
+    return this.__cfgProxy;
+  }
+
+  /**
+   * @template {keyof import('../types').ConfigType} T
+   * @param {T} key
+   * @param {(value: import('../types').ConfigType[T]) => void} callback
+   */
+  subConfigValue(key, callback) {
+    const sharedKey = sharedConfigKey(key);
+    if (!this.has(sharedKey)) {
+      this.add(sharedKey, initialConfig[key]);
+    }
+    this.sub(sharedKey, callback);
+  }
+
+  /** @param {unknown[]} args */
+  debugPrint(...args) {
+    if (!this.cfg.debug) {
+      return;
+    }
+    let consoleArgs = args;
+    if (typeof args?.[0] === 'function') {
+      const resolver = args[0];
+      consoleArgs = resolver();
+    }
+    console.log(`[${this.ctxName}]`, ...consoleArgs);
+  }
+
+  /**
+   * @param {String} [name]
+   * @param {Boolean} [isAlias]
+   */
+  static reg(name, isAlias = false) {
+    if (!name) {
+      super.reg();
+      return;
+    }
+    if (name.startsWith(TAG_PREFIX)) {
+      super.reg(name, isAlias);
+    }
+
+    if (name.startsWith(LEGACY_TAG_PREFIX)) {
+      super.reg(name, isAlias);
+    }
+  }
+}
+
+export { BaseComponent };

package/abstract/CTX.d.ts

@@ -0,0 +1,31 @@
+export function blockCtx(): {};
+export function activityBlockCtx(fnCtx: import('./Block').Block): {
+    '*currentActivity': null;
+    '*currentActivityParams': {};
+    '*history': never[];
+    '*historyBack': null;
+    '*closeModal': () => void;
+};
+export function uploaderBlockCtx(fnCtx: import('./Block').Block): {
+    '*commonProgress': number;
+    '*uploadList': never[];
+    '*focusedEntry': null;
+    '*uploadQueue': Queue;
+    /** @type {ReturnType<import('../types').OutputErrorCollection>[]} */
+    '*collectionErrors': ReturnType<import('../types').OutputErrorCollection>[];
+    /** @type {import('../types').OutputCollectionState | null} */
+    '*collectionState': import('../types').OutputCollectionState | null;
+    /** @type {import('@uploadcare/upload-client').UploadcareGroup | null} */
+    '*groupInfo': import('@uploadcare/upload-client').UploadcareGroup | null;
+    /** @type {Set<string>} */
+    '*uploadTrigger': Set<string>;
+    /** @type {import('./SecureUploadsManager.js').SecureUploadsManager | null} */
+    '*secureUploadsManager': import('./SecureUploadsManager.js').SecureUploadsManager | null;
+    '*currentActivity': null;
+    '*currentActivityParams': {};
+    '*history': never[];
+    '*historyBack': null;
+    '*closeModal': () => void;
+};
+import { Queue } from '@uploadcare/upload-client';
+//# sourceMappingURL=CTX.d.ts.map

package/abstract/CTX.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTX.d.ts","sourceRoot":"","sources":["CTX.js"],"names":[],"mappings":"AAGO,+BAA2B;AAG3B,wCADK,OAAO,SAAS,EAAE,KAAK;;;;;;EAajC;AAGK,wCADK,OAAO,SAAS,EAAE,KAAK;;;;;IAOjC,qEAAqE;yBAA1D,WAAW,OAAO,UAAU,EAAE,qBAAqB,CAAC,EAAE;IAEjE,8DAA8D;wBAAnD,OAAO,UAAU,EAAE,qBAAqB,GAAG,IAAI;IAE1D,yEAAyE;kBAA9D,OAAO,2BAA2B,EAAE,eAAe,GAAG,IAAI;IAErE,0BAA0B;sBAAf,IAAI,MAAM,CAAC;IAEtB,8EAA8E;6BAAnE,OAAO,2BAA2B,EAAE,oBAAoB,GAAG,IAAI;;;;;;EAE1E;sBApCoB,2BAA2B"}

package/abstract/CTX.js

@@ -0,0 +1,38 @@
+// @ts-check
+import { Queue } from '@uploadcare/upload-client';
+
+export const blockCtx = () => ({});
+
+/** @param {import('./Block').Block} fnCtx */
+export const activityBlockCtx = (fnCtx) => ({
+  ...blockCtx(),
+  '*currentActivity': null,
+  '*currentActivityParams': {},
+  '*history': [],
+  '*historyBack': null,
+  '*closeModal': () => {
+    fnCtx.set$({
+      '*currentActivity': null,
+      '*modalActive': false,
+    });
+  },
+});
+
+/** @param {import('./Block').Block} fnCtx */
+export const uploaderBlockCtx = (fnCtx) => ({
+  ...activityBlockCtx(fnCtx),
+  '*commonProgress': 0,
+  '*uploadList': [],
+  '*focusedEntry': null,
+  '*uploadQueue': new Queue(1),
+  /** @type {ReturnType<import('../types').OutputErrorCollection>[]} */
+  '*collectionErrors': [],
+  /** @type {import('../types').OutputCollectionState | null} */
+  '*collectionState': null,
+  /** @type {import('@uploadcare/upload-client').UploadcareGroup | null} */
+  '*groupInfo': null,
+  /** @type {Set<string>} */
+  '*uploadTrigger': new Set(),
+  /** @type {import('./SecureUploadsManager.js').SecureUploadsManager | null} */
+  '*secureUploadsManager': null,
+});

package/abstract/LocaleManager.d.ts

@@ -0,0 +1,38 @@
+export function localeStateKey(key: string): string;
+export const DEFAULT_LOCALE: "en";
+export class LocaleManager {
+    /** @param {import('./Block.js').Block} blockInstance */
+    constructor(blockInstance: import('./Block.js').Block);
+    /**
+     * @private
+     * @type {import('./Block.js').Block | null}
+     */
+    private _blockInstance;
+    /** @private */
+    private _localeName;
+    /**
+     * @private
+     * @type {Set<() => void>}
+     */
+    private _callbacks;
+    /**
+     * @private
+     * @type {Map<import('./Block.js').Block, Map<string, () => void>>}
+     */
+    private _boundBlocks;
+    /**
+     * @param {() => void} callback
+     * @returns {() => void}
+     */
+    onLocaleChange(callback: () => void): () => void;
+    /**
+     * @param {import('./Block.js').Block} block
+     * @param {string} key
+     * @param {() => void} resolver
+     */
+    bindL10n(block: import('./Block.js').Block, key: string, resolver: () => void): void;
+    /** @param {import('./Block.js').Block} block */
+    destroyL10nBindings(block: import('./Block.js').Block): void;
+    destroy(): void;
+}
+//# sourceMappingURL=LocaleManager.d.ts.map

package/abstract/LocaleManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocaleManager.d.ts","sourceRoot":"","sources":["LocaleManager.js"],"names":[],"mappings":"AAMO,oCADK,MAAM,UACmC;AACrD,kCAAmC;AAEnC;IAsBE,wDAAwD;IACxD,2BADY,OAAO,YAAY,EAAE,KAAK,EA6CrC;IAlED;;;OAGG;IACH,uBAAsB;IAEtB,eAAe;IACf,oBAAiB;IAEjB;;;OAGG;IACH,mBAAuB;IAEvB;;;OAGG;IACH,qBAAyB;IAiDzB;;;OAGG;IACH,yBAHW,MAAM,IAAI,GACR,MAAM,IAAI,CAQtB;IAED;;;;OAIG;IACH,gBAJW,OAAO,YAAY,EAAE,KAAK,OAC1B,MAAM,YACN,MAAM,IAAI,QAgBpB;IAED,gDAAgD;IAChD,2BADY,OAAO,YAAY,EAAE,KAAK,QAUrC;IAED,gBAEC;CACF"}

package/abstract/LocaleManager.js

@@ -0,0 +1,127 @@
+// @ts-check
+import { debounce } from '../blocks/utils/debounce.js';
+import { resolveLocaleDefinition } from './localeRegistry.js';
+import { default as en } from '../locales/file-uploader/en.js';
+
+/** @param {string} key */
+export const localeStateKey = (key) => `*l10n/${key}`;
+export const DEFAULT_LOCALE = 'en';
+
+export class LocaleManager {
+  /**
+   * @private
+   * @type {import('./Block.js').Block | null}
+   */
+  _blockInstance = null;
+
+  /** @private */
+  _localeName = '';
+
+  /**
+   * @private
+   * @type {Set<() => void>}
+   */
+  _callbacks = new Set();
+
+  /**
+   * @private
+   * @type {Map<import('./Block.js').Block, Map<string, () => void>>}
+   */
+  _boundBlocks = new Map();
+
+  /** @param {import('./Block.js').Block} blockInstance */
+  constructor(blockInstance) {
+    this._blockInstance = blockInstance;
+
+    for (let [key, value] of Object.entries(en)) {
+      this._blockInstance.add(localeStateKey(key), value, false);
+    }
+
+    setTimeout(() => {
+      blockInstance.subConfigValue('localeName', async (localeName) => {
+        if (!this._blockInstance || !localeName) {
+          return;
+        }
+        this._localeName = localeName;
+        const definition = await resolveLocaleDefinition(localeName);
+        if (localeName !== DEFAULT_LOCALE && this._localeName !== localeName) {
+          return;
+        }
+
+        const overrides = this._blockInstance.cfg.localeDefinitionOverride?.[localeName];
+        for (const [key, value] of Object.entries(definition)) {
+          const overriddenValue = overrides?.[key];
+          this._blockInstance.add(localeStateKey(key), overriddenValue ?? value, true);
+          for (const callback of this._callbacks) {
+            callback();
+          }
+        }
+      });
+
+      blockInstance.subConfigValue('localeDefinitionOverride', (localeDefinitionOverride) => {
+        if (!localeDefinitionOverride) {
+          return;
+        }
+        const definition = localeDefinitionOverride[this._localeName];
+        if (!definition) {
+          return;
+        }
+        for (const [key, value] of Object.entries(definition)) {
+          this._blockInstance?.add(localeStateKey(key), value, true);
+          for (const callback of this._callbacks) {
+            callback();
+          }
+        }
+      });
+    });
+  }
+
+  /**
+   * @param {() => void} callback
+   * @returns {() => void}
+   */
+  onLocaleChange(callback) {
+    const debouncedCb = debounce(callback, 0);
+    this._callbacks.add(debouncedCb);
+    return () => {
+      this._callbacks.delete(debouncedCb);
+    };
+  }
+
+  /**
+   * @param {import('./Block.js').Block} block
+   * @param {string} key
+   * @param {() => void} resolver
+   */
+  bindL10n(block, key, resolver) {
+    block.$[key] = resolver();
+
+    if (!this._boundBlocks.has(block)) {
+      this._boundBlocks.set(block, new Map());
+    }
+
+    this._boundBlocks.get(block)?.get(key)?.();
+
+    const destroyCallback = this.onLocaleChange(() => {
+      block.$[key] = resolver();
+    });
+
+    this._boundBlocks.get(block)?.set(key, destroyCallback);
+  }
+
+  /** @param {import('./Block.js').Block} block */
+  destroyL10nBindings(block) {
+    const callbacks = this._boundBlocks.get(block);
+    if (!callbacks) {
+      return;
+    }
+    for (const callback of callbacks.values()) {
+      callback();
+    }
+    this._boundBlocks.delete(block);
+  }
+
+  destroy() {
+    this._callbacks.clear();
+  }
+}

package/abstract/SecureUploadsManager.d.ts

@@ -0,0 +1,22 @@
+export class SecureUploadsManager {
+    /** @param {import('./UploaderBlock.js').UploaderBlock} block */
+    constructor(block: import('./UploaderBlock.js').UploaderBlock);
+    /**
+     * @private
+     * @type {import('./UploaderBlock.js').UploaderBlock}
+     */
+    private _block;
+    /**
+     * @private
+     * @type {import('../types').SecureUploadsSignatureAndExpire | null}
+     */
+    private _secureToken;
+    /**
+     * @private
+     * @param {unknown[]} args
+     */
+    private _debugPrint;
+    /** @returns {Promise<import('../types').SecureUploadsSignatureAndExpire | null>} */
+    getSecureToken(): Promise<import('../types').SecureUploadsSignatureAndExpire | null>;
+}
+//# sourceMappingURL=SecureUploadsManager.d.ts.map

package/abstract/SecureUploadsManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecureUploadsManager.d.ts","sourceRoot":"","sources":["SecureUploadsManager.js"],"names":[],"mappings":"AAIA;IAYE,gEAAgE;IAChE,mBADY,OAAO,oBAAoB,EAAE,aAAa,EAGrD;IAdD;;;OAGG;IACH,eAAO;IACP;;;OAGG;IACH,qBAAoB;IAOpB;;;OAGG;IACH,oBAEC;IAED,oFAAoF;IACpF,kBADc,QAAQ,OAAO,UAAU,EAAE,+BAA+B,GAAG,IAAI,CAAC,CAwD/E;CACF"}