@uploadcare/file-uploader 1.23.0 → 1.24.0-alpha.1

package/abstract/UploaderPublicApi.js

@@ -1,407 +0,0 @@
-// @ts-check
-import { ActivityBlock } from './ActivityBlock.js';
-
-import { applyStyles, Data } from '@symbiotejs/symbiote';
-import { calcCameraModes } from '../blocks/CameraSource/calcCameraModes.js';
-import { CameraSourceTypes } from '../blocks/CameraSource/constants.js';
-import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
-import { UploadSource } from '../blocks/utils/UploadSource.js';
-import { serializeCsv } from '../blocks/utils/comma-separated.js';
-import { browserFeatures } from '../utils/browser-info.js';
-import {
-  BASIC_IMAGE_WILDCARD,
-  BASIC_VIDEO_WILDCARD,
-  fileIsImage,
-  IMAGE_ACCEPT_LIST,
-  mergeFileTypes,
-} from '../utils/fileTypes.js';
-import { parseCdnUrl } from '../utils/parseCdnUrl.js';
-import { stringToArray } from '../utils/stringToArray.js';
-import { buildOutputCollectionState } from './buildOutputCollectionState.js';
-
-export class UploaderPublicApi {
-  /**
-   * @private
-   * @type {import('./UploaderBlock.js').UploaderBlock}
-   */
-  _ctx;
-
-  /** @param {import('./UploaderBlock.js').UploaderBlock} ctx */
-  constructor(ctx) {
-    this._ctx = ctx;
-  }
-
-  /** @private */
-  get _uploadCollection() {
-    return this._ctx.uploadCollection;
-  }
-
-  get cfg() {
-    return this._ctx.cfg;
-  }
-
-  get l10n() {
-    return this._ctx.l10n.bind(this._ctx);
-  }
-
-  /**
-   * TODO: Probably we should not allow user to override `source` property
-   *
-   * @param {string} url
-   * @param {{ silent?: boolean; fileName?: string; source?: string }} [options]
-   * @returns {import('../types').OutputFileEntry<'idle'>}
-   */
-  addFileFromUrl = (url, { silent, fileName, source } = {}) => {
-    const internalId = this._uploadCollection.add({
-      externalUrl: url,
-      fileName: fileName ?? null,
-      silent: silent ?? false,
-      source: source ?? UploadSource.API,
-    });
-    return this.getOutputItem(internalId);
-  };
-
-  /**
-   * @param {string} uuid
-   * @param {{ silent?: boolean; fileName?: string; source?: string }} [options]
-   * @returns {import('../types').OutputFileEntry<'idle'>}
-   */
-  addFileFromUuid = (uuid, { silent, fileName, source } = {}) => {
-    const internalId = this._uploadCollection.add({
-      uuid,
-      fileName: fileName ?? null,
-      silent: silent ?? false,
-      source: source ?? UploadSource.API,
-    });
-    return this.getOutputItem(internalId);
-  };
-
-  /**
-   * @param {string} cdnUrl
-   * @param {{ silent?: boolean; fileName?: string; source?: string }} [options]
-   * @returns {import('../types').OutputFileEntry<'idle'>}
-   */
-  addFileFromCdnUrl = (cdnUrl, { silent, fileName, source } = {}) => {
-    const parsedCdnUrl = parseCdnUrl({ url: cdnUrl, cdnBase: this.cfg.cdnCname });
-    if (!parsedCdnUrl) {
-      throw new Error('Invalid CDN URL');
-    }
-    const internalId = this._uploadCollection.add({
-      uuid: parsedCdnUrl.uuid,
-      cdnUrl,
-      cdnUrlModifiers: parsedCdnUrl.cdnUrlModifiers,
-      fileName: fileName ?? parsedCdnUrl.filename ?? null,
-      silent: silent ?? false,
-      source: source ?? UploadSource.API,
-    });
-    return this.getOutputItem(internalId);
-  };
-
-  /**
-   * @param {File} file
-   * @param {{ silent?: boolean; fileName?: string; source?: string; fullPath?: string }} [options]
-   * @returns {import('../types').OutputFileEntry<'idle'>}
-   */
-  addFileFromObject = (file, { silent, fileName, source, fullPath } = {}) => {
-    const internalId = this._uploadCollection.add({
-      file,
-      isImage: fileIsImage(file),
-      mimeType: file.type,
-      fileName: fileName ?? file.name,
-      fileSize: file.size,
-      silent: silent ?? false,
-      source: source ?? UploadSource.API,
-      fullPath: fullPath ?? null,
-    });
-    return this.getOutputItem(internalId);
-  };
-
-  /** @param {string} internalId */
-  removeFileByInternalId = (internalId) => {
-    if (!this._uploadCollection.read(internalId)) {
-      throw new Error(`File with internalId ${internalId} not found`);
-    }
-    this._uploadCollection.remove(internalId);
-  };
-
-  removeAllFiles() {
-    this._uploadCollection.clearAll();
-  }
-
-  uploadAll = () => {
-    const itemsToUpload = this._uploadCollection.items().filter((id) => {
-      const entry = this._uploadCollection.read(id);
-      if (!entry) return false;
-      return (
-        !entry.getValue('isRemoved') &&
-        !entry.getValue('isUploading') &&
-        !entry.getValue('fileInfo') &&
-        entry.getValue('errors').length === 0 &&
-        !entry.getValue('isValidationPending') &&
-        !entry.getValue('isQueuedForValidation')
-      );
-    });
-
-    if (itemsToUpload.length === 0) {
-      return;
-    }
-
-    this._ctx.$['*uploadTrigger'] = new Set(itemsToUpload);
-    this._ctx.emit(
-      EventType.COMMON_UPLOAD_START,
-      /** @type {import('../types').OutputCollectionState<'uploading'>} */ (this.getOutputCollectionState()),
-    );
-  };
-
-  /** @param {{ captureCamera?: boolean; modeCamera?: import('../blocks/CameraSource/constants.js').ModeCameraType }} options */
-  openSystemDialog = (options = {}) => {
-    const accept = serializeCsv(
-      mergeFileTypes([this.cfg.accept ?? '', ...(this.cfg.imgOnly ? IMAGE_ACCEPT_LIST : [])]),
-    );
-    const INPUT_ATTR_NAME = 'uploadcare-file-input';
-    const fileInput = document.createElement('input');
-    fileInput.setAttribute(INPUT_ATTR_NAME, '');
-    applyStyles(fileInput, {
-      opacity: 0,
-      height: 0,
-      width: 0,
-      visibility: 'hidden',
-      position: 'absolute',
-      top: 0,
-      left: 0,
-    });
-    fileInput.type = 'file';
-    fileInput.multiple = this.cfg.multiple;
-    if (options.captureCamera) {
-      fileInput.capture = this.cfg.cameraCapture;
-      const { isPhotoEnabled, isVideoRecordingEnabled } = calcCameraModes(this.cfg);
-
-      if (options.modeCamera === CameraSourceTypes.PHOTO && isPhotoEnabled) {
-        fileInput.accept = BASIC_IMAGE_WILDCARD;
-      } else if (options.modeCamera === CameraSourceTypes.VIDEO && isVideoRecordingEnabled) {
-        fileInput.accept = BASIC_VIDEO_WILDCARD;
-      } else {
-        fileInput.accept = [BASIC_IMAGE_WILDCARD, isVideoRecordingEnabled && BASIC_VIDEO_WILDCARD]
-          .filter(Boolean)
-          .join(',');
-      }
-    } else {
-      fileInput.accept = accept;
-    }
-    fileInput.addEventListener(
-      'change',
-      () => {
-        if (!fileInput.files) {
-          return;
-        }
-        [...fileInput.files].forEach((file) =>
-          this.addFileFromObject(file, { source: options.captureCamera ? UploadSource.CAMERA : UploadSource.LOCAL }),
-        );
-        // To call uploadTrigger UploadList should draw file items first:
-        this._ctx.modalManager.open(ActivityBlock.activities.UPLOAD_LIST);
-        this._ctx.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
-        fileInput.remove();
-      },
-      {
-        once: true,
-      },
-    );
-
-    document.querySelectorAll(`[${INPUT_ATTR_NAME}]`).forEach((el) => el.remove());
-
-    /**
-     * Some browsers (e.g. Safari) require the file input to be in the DOM to work properly. Without it the file input
-     * will open system dialog but won't trigger the change event sometimes.
-     */
-    document.body.appendChild(fileInput);
-    fileInput.dispatchEvent(new MouseEvent('click'));
-  };
-
-  /**
-   * @template {import('../types').OutputFileStatus} TStatus
-   * @param {string} entryId
-   * @returns {import('../types/exported.js').OutputFileEntry<TStatus>}
-   */
-  getOutputItem(entryId) {
-    const uploadEntryData = /** @type {import('./uploadEntrySchema.js').UploadEntryData} */ (
-      Data.getCtx(entryId).store
-    );
-
-    /** @type {import('@uploadcare/upload-client').UploadcareFile?} */
-    const fileInfo = uploadEntryData.fileInfo;
-
-    /** @type {import('../types').OutputFileEntry['status']} */
-    let status = uploadEntryData.isRemoved
-      ? 'removed'
-      : uploadEntryData.errors.length > 0
-        ? 'failed'
-        : !!uploadEntryData.fileInfo
-          ? 'success'
-          : uploadEntryData.isUploading
-            ? 'uploading'
-            : 'idle';
-
-    /** @type {unknown} */
-    const outputItem = {
-      uuid: fileInfo?.uuid ?? uploadEntryData.uuid ?? null,
-      internalId: entryId,
-      name: fileInfo?.originalFilename ?? uploadEntryData.fileName,
-      size: fileInfo?.size ?? uploadEntryData.fileSize,
-      isImage: fileInfo?.isImage ?? uploadEntryData.isImage,
-      mimeType: fileInfo?.mimeType ?? uploadEntryData.mimeType,
-      file: uploadEntryData.file,
-      externalUrl: uploadEntryData.externalUrl,
-      cdnUrlModifiers: uploadEntryData.cdnUrlModifiers,
-      cdnUrl: uploadEntryData.cdnUrl ?? fileInfo?.cdnUrl ?? null,
-      fullPath: uploadEntryData.fullPath,
-      uploadProgress: uploadEntryData.uploadProgress,
-      fileInfo: fileInfo ?? null,
-      metadata: uploadEntryData.metadata ?? fileInfo?.metadata ?? null,
-      isSuccess: status === 'success',
-      isUploading: status === 'uploading',
-      isFailed: status === 'failed',
-      isRemoved: status === 'removed',
-      isValidationPending: uploadEntryData.isValidationPending,
-      errors: /** @type {import('../types/exported.js').OutputFileEntry['errors']} */ (uploadEntryData.errors),
-      status,
-      source: uploadEntryData?.source,
-    };
-
-    return /** @type {import('../types/exported.js').OutputFileEntry<TStatus>} */ (outputItem);
-  }
-
-  /** @template {import('../types').OutputCollectionStatus} TStatus */
-  getOutputCollectionState() {
-    return /** @type {ReturnType<typeof buildOutputCollectionState<TStatus>>} */ (
-      buildOutputCollectionState(this._ctx)
-    );
-  }
-
-  /** @param {Boolean} [force] */
-  initFlow = (force = false) => {
-    if (this._uploadCollection.size > 0 && !force) {
-      this._ctx.modalManager?.open(ActivityBlock.activities.UPLOAD_LIST);
-      this._ctx.set$({
-        '*currentActivity': ActivityBlock.activities.UPLOAD_LIST,
-      });
-    } else {
-      if (this._sourceList?.length === 1) {
-        const srcKey = this._sourceList[0];
-
-        // TODO: We should refactor those handlers
-        if (srcKey === 'local') {
-          this._ctx.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
-          this.openSystemDialog();
-          return;
-        }
-
-        if (srcKey === 'camera' && browserFeatures.htmlMediaCapture) {
-          const { isPhotoEnabled, isVideoRecordingEnabled } = calcCameraModes(this.cfg);
-
-          if (isPhotoEnabled && isVideoRecordingEnabled) {
-            this._ctx.set$({
-              '*currentActivity': ActivityBlock.activities.START_FROM,
-            });
-            return;
-          } else if (isPhotoEnabled || isVideoRecordingEnabled) {
-            this.openSystemDialog({
-              captureCamera: true,
-              modeCamera: isPhotoEnabled ? CameraSourceTypes.PHOTO : CameraSourceTypes.VIDEO,
-            });
-            return;
-          } else {
-            this.openSystemDialog({
-              captureCamera: true,
-              modeCamera: CameraSourceTypes.PHOTO,
-            });
-          }
-        }
-
-        /** @type {Set<import('./Block').Block>} */
-        const blocksRegistry = this._ctx.$['*blocksRegistry'];
-        /**
-         * @param {import('./Block').Block} block
-         * @returns {block is import('../blocks/SourceBtn/SourceBtn.js').SourceBtn}
-         */
-        const isSourceBtn = (block) => 'type' in block && block.type === srcKey;
-        const sourceBtnBlock = [...blocksRegistry].find(isSourceBtn);
-        // TODO: This is weird that we have this logic inside UI component, we should consider to move it somewhere else
-        sourceBtnBlock?.activate();
-
-        if (this._ctx.$['*currentActivity']) {
-          this._ctx.modalManager?.open(this._ctx.$['*currentActivity']);
-        }
-      } else {
-        // Multiple sources case:
-        this._ctx.modalManager?.open(ActivityBlock.activities.START_FROM);
-        this._ctx.set$({
-          '*currentActivity': ActivityBlock.activities.START_FROM,
-        });
-      }
-    }
-  };
-
-  doneFlow = () => {
-    this._ctx.set$({
-      '*currentActivity': this._ctx.doneActivity,
-      '*history': this._ctx.doneActivity ? [this._ctx.doneActivity] : [],
-    });
-    if (!this._ctx.$['*currentActivity']) {
-      this._ctx.modalManager.closeAll();
-    }
-  };
-
-  /**
-   * @type {<T extends import('./ActivityBlock.js').ActivityType>(
-   *   activityType: T,
-   *   ...params: T extends keyof import('./ActivityBlock.js').ActivityParamsMap
-   *     ? [import('./ActivityBlock.js').ActivityParamsMap[T]]
-   *     : T extends import('./ActivityBlock.js').RegisteredActivityType
-   *       ? [undefined?]
-   *       : [any?]
-   * ) => void}
-   */
-  setCurrentActivity = (activityType, params = undefined) => {
-    if (this._ctx.hasBlockInCtx((b) => b.activityType === activityType)) {
-      this._ctx.set$({
-        '*currentActivityParams': params ?? {},
-        '*currentActivity': activityType,
-      });
-      return;
-    }
-    console.warn(`Activity type "${activityType}" not found in the context`);
-  };
-
-  /** @returns {import('./ActivityBlock.js').ActivityType} */
-  getCurrentActivity = () => {
-    return this._ctx.$['*currentActivity'];
-  };
-
-  /** @param {boolean} opened */
-  setModalState = (opened) => {
-    if (opened && !this._ctx.$['*currentActivity']) {
-      console.warn(`Can't open modal without current activity. Please use "setCurrentActivity" method first.`);
-      return;
-    }
-
-    if (opened) {
-      this._ctx.modalManager?.open(this._ctx.$['*currentActivity']);
-    } else {
-      this._ctx.modalManager?.close(this._ctx.$['*currentActivity']);
-      this._ctx.$['*currentActivity'] = null;
-    }
-  };
-
-  /**
-   * @private
-   * @type {string[]}
-   */
-  get _sourceList() {
-    /** @type {string[]} */
-    let list = [];
-    if (this.cfg.sourceList) {
-      list = stringToArray(this.cfg.sourceList);
-    }
-    return list;
-  }
-}

package/abstract/buildOutputCollectionState.d.ts

@@ -1,8 +0,0 @@
-/**
- * @template {import('../index.js').OutputCollectionStatus} TCollectionStatus
- * @template {import('../index.js').GroupFlag} [TGroupFlag='maybe-has-group'] Default is `'maybe-has-group'`
- * @param {import('./UploaderBlock.js').UploaderBlock} uploaderBlock
- * @returns {import('../index.js').OutputCollectionState<TCollectionStatus, TGroupFlag>}
- */
-export function buildOutputCollectionState<TCollectionStatus extends import("../index.js").OutputCollectionStatus, TGroupFlag extends import("../index.js").GroupFlag = "maybe-has-group">(uploaderBlock: import("./UploaderBlock.js").UploaderBlock): import("../index.js").OutputCollectionState<TCollectionStatus, TGroupFlag>;
-//# sourceMappingURL=buildOutputCollectionState.d.ts.map

package/abstract/buildOutputCollectionState.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"buildOutputCollectionState.d.ts","sourceRoot":"","sources":["buildOutputCollectionState.js"],"names":[],"mappings":"AAiCA;;;;;GAKG;AACH,2CAL4D,iBAAiB,SAAhE,OAAQ,aAAa,EAAE,sBAAuB,EACX,UAAU,SAA7C,OAAQ,aAAa,EAAE,SAAU,qCACnC,OAAO,oBAAoB,EAAE,aAAa,GACxC,OAAO,aAAa,EAAE,qBAAqB,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAkGtF"}

package/abstract/buildOutputCollectionState.js

@@ -1,136 +0,0 @@
-// @ts-check
-
-import { memoize } from '../utils/memoize.js';
-import { warnOnce } from '../utils/warnOnce.js';
-
-/** @param {string} warning */
-function createAsyncAssertWrapper(warning) {
-  let isAsync = false;
-  setTimeout(() => {
-    isAsync = true;
-  }, 0);
-
-  /**
-   * @template {any[]} TArgs
-   * @template {any} TReturn
-   * @template {(...args: TArgs) => TReturn} T
-   * @param {T} fn
-   * @returns {T}
-   */
-  const withAssert = (fn) => {
-    return /** @type {T} */ (
-      (...args) => {
-        if (isAsync) {
-          warnOnce(warning);
-        }
-        return fn(...args);
-      }
-    );
-  };
-
-  return withAssert;
-}
-
-/**
- * @template {import('../index.js').OutputCollectionStatus} TCollectionStatus
- * @template {import('../index.js').GroupFlag} [TGroupFlag='maybe-has-group'] Default is `'maybe-has-group'`
- * @param {import('./UploaderBlock.js').UploaderBlock} uploaderBlock
- * @returns {import('../index.js').OutputCollectionState<TCollectionStatus, TGroupFlag>}
- */
-export function buildOutputCollectionState(uploaderBlock) {
-  const getters = {
-    /** @returns {number} */
-    progress: () => {
-      return uploaderBlock.$['*commonProgress'];
-    },
-    /** @returns {ReturnType<import('../types').OutputErrorFile>[]} */
-    errors: () => {
-      return uploaderBlock.$['*collectionErrors'];
-    },
-
-    /** @returns {import('@uploadcare/upload-client').UploadcareGroup | null} */
-    group: () => {
-      return uploaderBlock.$['*groupInfo'];
-    },
-
-    totalCount: () => {
-      return uploaderBlock.uploadCollection.size;
-    },
-
-    failedCount: () => {
-      return state.failedEntries.length;
-    },
-
-    successCount: () => {
-      return state.successEntries.length;
-    },
-
-    uploadingCount: () => {
-      return state.uploadingEntries.length;
-    },
-
-    status: () => {
-      const status = state.isFailed ? 'failed' : state.isUploading ? 'uploading' : state.isSuccess ? 'success' : 'idle';
-      return /** @type {TCollectionStatus} */ (status);
-    },
-
-    isSuccess: () => {
-      return (
-        state.allEntries.length > 0 &&
-        state.errors.length === 0 &&
-        state.successEntries.length === state.allEntries.length
-      );
-    },
-
-    isUploading: () => {
-      return state.allEntries.some((entry) => entry.status === 'uploading');
-    },
-
-    isFailed: () => {
-      return state.errors.length > 0 || state.failedEntries.length > 0;
-    },
-
-    allEntries: () => {
-      return uploaderBlock.getOutputData();
-    },
-
-    successEntries: () => {
-      return state.allEntries.filter((entry) => entry.status === 'success');
-    },
-
-    failedEntries: () => {
-      return state.allEntries.filter((entry) => entry.status === 'failed');
-    },
-
-    uploadingEntries: () => {
-      return state.allEntries.filter((entry) => entry.status === 'uploading');
-    },
-
-    idleEntries: () => {
-      return state.allEntries.filter((entry) => entry.status === 'idle');
-    },
-  };
-
-  const state = /** @type {import('../index.js').OutputCollectionState<TCollectionStatus, TGroupFlag>} */ (
-    /** @type {unknown} */ ({})
-  );
-  const withAssert = createAsyncAssertWrapper(
-    "You're trying to access the OutputCollectionState asynchronously. " +
-      'In this case, the data you retrieve will be newer than it was when the ' +
-      'OutputCollectionState was created or when the event was dispatched. If you want ' +
-      'to retain the state at a specific moment in time, you should use the spread operator ' +
-      'like this: `{...outputCollectionState}` or `{...e.detail}`',
-  );
-
-  for (const [key, value] of Object.entries(getters)) {
-    const name = /** @type {keyof typeof getters} */ (key);
-    const getter = /** @type {(typeof getters)[name]} */ (value);
-    const wrapped = memoize(withAssert(getter));
-    Object.defineProperty(state, name, {
-      get: wrapped,
-      enumerable: true,
-    });
-  }
-
-  return state;
-}

package/abstract/defineComponents.d.ts

@@ -1,5 +0,0 @@
-/** @param {Object<string, any>} blockExports */
-export function defineComponents(blockExports: {
-    [x: string]: any;
-}): void;
-//# sourceMappingURL=defineComponents.d.ts.map

package/abstract/defineComponents.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defineComponents.d.ts","sourceRoot":"","sources":["defineComponents.js"],"names":[],"mappings":"AAAA,gDAAgD;AAChD;;SAmBC"}

package/abstract/defineComponents.js

@@ -1,21 +0,0 @@
-/** @param {Object<string, any>} blockExports */
-export function defineComponents(blockExports) {
-  for (let blockName in blockExports) {
-    let tagName = [...blockName].reduce((name, char) => {
-      if (char.toUpperCase() === char) {
-        char = '-' + char.toLowerCase();
-      }
-      return (name += char);
-    }, '');
-    if (tagName.startsWith('-')) {
-      tagName = tagName.replace('-', '');
-    }
-
-    if (!tagName.startsWith('uc-')) {
-      tagName = 'uc-' + tagName;
-    }
-    if (blockExports[blockName].reg) {
-      blockExports[blockName].reg(tagName);
-    }
-  }
-}

package/abstract/l10nProcessor.d.ts

@@ -1,7 +0,0 @@
-/**
- * @template {import('./Block.js').Block} T
- * @param {DocumentFragment} fr
- * @param {T} fnCtx
- */
-export function l10nProcessor<T extends import("./Block.js").Block>(fr: DocumentFragment, fnCtx: T): void;
-//# sourceMappingURL=l10nProcessor.d.ts.map

package/abstract/l10nProcessor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"l10nProcessor.d.ts","sourceRoot":"","sources":["l10nProcessor.js"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,8BAJ0C,CAAC,SAA9B,OAAQ,YAAY,EAAE,KAAM,MAC9B,gBAAgB,SAChB,CAAC,QAcX"}

package/abstract/l10nProcessor.js

@@ -1,93 +0,0 @@
-// @ts-check
-
-import { localeStateKey } from './managers/LocaleManager.js';
-
-/**
- * @template {import('./Block.js').Block} T
- * @param {DocumentFragment} fr
- * @param {T} fnCtx
- */
-export function l10nProcessor(fr, fnCtx) {
-  [...fr.querySelectorAll('[l10n]')].forEach((el) => {
-    let key = el.getAttribute('l10n');
-    if (!key) {
-      return;
-    }
-    const list = key.split(';');
-
-    for (const item of list) {
-      if (item) locale(el, item, fnCtx);
-    }
-  });
-}
-
-/**
- * @param {Element} el
- * @param {string} key
- * @param {any} fnCtx
- */
-const locale = (el, key, fnCtx) => {
-  let elProp = 'textContent';
-  let useAttribute = false;
-  if (key.includes(':')) {
-    const arr = key.split(':');
-    elProp = arr[0];
-    key = arr[1];
-    if (elProp.startsWith('@')) {
-      elProp = elProp.slice(1);
-      useAttribute = true;
-    }
-  }
-
-  // Check if the key is present in the local context
-  const localCtxKey = key;
-  if (fnCtx.has(localCtxKey)) {
-    fnCtx.sub(localCtxKey, (/** @type {string} */ mappedKey) => {
-      if (!mappedKey) {
-        return;
-      }
-      // Store the subscription in a temporary map to be able to unsubscribe later
-      if (!fnCtx.l10nProcessorSubs.has(localCtxKey)) {
-        fnCtx.l10nProcessorSubs.set(localCtxKey, new Set());
-      }
-      const keySubs = fnCtx.l10nProcessorSubs.get(localCtxKey);
-      keySubs?.forEach(
-        /** @param {{ remove: () => void }} sub */
-        (sub) => {
-          sub.remove();
-          keySubs.delete(sub);
-          fnCtx.allSubs.delete(sub);
-        },
-      );
-      // We don't need the leading * in the key because we use the key as a local context key relative to the global state
-      const nodeStateKey = localeStateKey(mappedKey).replace('*', '');
-      // If the key is not present in the node context, add it
-      if (!fnCtx.nodeCtx.has(nodeStateKey)) {
-        fnCtx.nodeCtx.add(nodeStateKey, mappedKey);
-      }
-      // Subscribe on the global l10n key change
-      const sub = fnCtx.nodeCtx.sub(nodeStateKey, () => {
-        el[/** @type {'textContent'} */ (elProp)] = fnCtx.l10n(mappedKey);
-      });
-      keySubs?.add(sub);
-      // Store the subscription in the global context to make able Symbiote to unsubscribe it on destroy
-      fnCtx.allSubs.add(sub);
-      el.removeAttribute('l10n');
-    });
-  }
-
-  // Otherwise, assume the key is in the global context
-  const stateKey = localeStateKey(key);
-  if (!fnCtx.has(stateKey)) {
-    fnCtx.add(stateKey, '');
-  }
-  fnCtx.sub(stateKey, () => {
-    key = /** @type {string} */ (key);
-    if (useAttribute) {
-      el.setAttribute(elProp, fnCtx.l10n(key));
-    } else {
-      el[/** @type {'textContent'} */ (elProp)] = fnCtx.l10n(key);
-    }
-  });
-  el.removeAttribute('l10n');
-};