refactor: tests / api changes

Author: nd0ut

src/abstract/CTX.ts

@@ -2,7 +2,7 @@ import type { UploadcareGroup } from '@uploadcare/upload-client';
 import { Queue } from '@uploadcare/upload-client';
 import type { LitBlock } from '../lit/LitBlock';
 import type { OutputCollectionState, OutputErrorCollection } from '../types/index';
-import type { LazyPluginEntry } from './managers/plugin/lazyPluginRegistry';
+import type { LazyPluginEntry } from './managers/plugin/LazyPluginLoader';
 
 export const blockCtx = () => ({});
 

src/abstract/UploaderPublicApi.ts

@@ -121,7 +121,7 @@ export class UploaderPublicApi extends SharedInstance {
     const internalId = this._uploadCollection.add({
       file,
       isImage: fileIsImage(file),
-      mimeType: file.type,
+      mimeType: file.type || null,
       fileName: fileName ?? file.name,
       fileSize: file.size,
       silent: silent ?? false,
@@ -362,7 +362,7 @@ export class UploaderPublicApi extends SharedInstance {
     }
   };
 
-  public async pluginsReady(): Promise<void> {
+  private async _pluginsReady(): Promise<void> {
     const pluginManager = await this._sharedInstancesBag.wait('pluginManager');
     return pluginManager.pluginsReady();
   }
@@ -375,10 +375,7 @@ export class UploaderPublicApi extends SharedInstance {
         : [ActivityParamsMap[T]]
       : []
   ) => {
-    // Since Lit renders DOM asynchronously, we need to wait for the next tick to ensure that the activity block is rendered and registered in the context before we try to set it as current.
-    // TODO: Do not rely on DOM rendering and block registration order, we should have a better way to handle this.
-    // Some kind of ActivityManager that will keep track of registered activities and their states
-    setTimeout(() => {
+    void this._pluginsReady().then(() => {
       if (hasBlockInCtx(this._sharedInstancesBag.blocksRegistry, (b) => b.activityType === activityType)) {
         this._ctx.pub('*currentActivityParams', params[0] ?? {});
         this._ctx.pub('*currentActivity', activityType);
@@ -398,8 +395,7 @@ export class UploaderPublicApi extends SharedInstance {
   };
 
   public setModalState = (opened: boolean): void => {
-    // Next tick here because setCurrentActivity is also async and we want to make sure that the modal state is set
-    setTimeout(() => {
+    void this._pluginsReady().then(() => {
       if (opened && !this._ctx.read('*currentActivity')) {
         console.warn(`Can't open modal without current activity. Please use "setCurrentActivity" method first.`);
         return;

src/abstract/managers/plugin/LazyPluginLoader.ts

@@ -2,18 +2,57 @@ import type { PubSub } from '../../../lit/PubSubCompat';
 import type { SharedState } from '../../../lit/SharedState';
 import type { ConfigType } from '../../../types/index';
 import { sharedConfigKey } from '../../sharedConfigKey';
-import type { ConfigGetter, LazyPluginEntry } from './lazyPluginRegistry';
-import { withLazyPlugins } from './lazyPluginRegistry';
 import type { UploaderPlugin } from './PluginTypes';
 
+export type ConfigGetter = <K extends keyof ConfigType>(key: K) => ConfigType[K];
+
+export type LazyPluginEntry = {
+  pluginId: string;
+  configDeps: readonly (keyof ConfigType)[];
+  isEnabled: (get: ConfigGetter) => boolean;
+  load: () => UploaderPlugin | undefined | Promise<UploaderPlugin | undefined>;
+};
+
+type ResolvedEntry = {
+  pluginId: string;
+  isEnabled: () => boolean;
+  load: () => UploaderPlugin | undefined | Promise<UploaderPlugin | undefined>;
+};
+
+const resolveLazyPlugins = async ({
+  entries,
+  signal,
+}: {
+  entries: ResolvedEntry[];
+  signal: AbortSignal;
+}): Promise<UploaderPlugin[]> => {
+  const loadResults = await Promise.all(
+    entries.map(async (entry): Promise<UploaderPlugin | undefined> => {
+      if (!entry.isEnabled()) return undefined;
+      try {
+        const plugin = await entry.load();
+        if (signal.aborted || !entry.isEnabled()) return undefined;
+        return plugin ?? undefined;
+      } catch (error) {
+        if (!signal.aborted) {
+          console.warn(`[${entry.pluginId}] Failed to load plugin`, error);
+        }
+        return undefined;
+      }
+    }),
+  );
+
+  return loadResults.filter((p): p is UploaderPlugin => p !== undefined);
+};
+
 export class LazyPluginLoader {
   private _subs: Set<() => void> = new Set();
   private _unsubLazyPlugins: () => void;
   private _abortController?: AbortController;
 
   public constructor(
     private readonly _ctx: PubSub<SharedState>,
-    private readonly _onResolved: (plugins: UploaderPlugin[]) => void,
+    private readonly _onCompute: (plugins: Promise<UploaderPlugin[] | undefined>) => void,
   ) {
     this._unsubLazyPlugins = this._ctx.sub('*lazyPlugins', (entries) => {
       this._setEntries(entries ?? []);
@@ -49,19 +88,22 @@ export class LazyPluginLoader {
     const get: ConfigGetter = <K extends keyof ConfigType>(key: K) =>
       this._ctx.read(sharedConfigKey(key)) as unknown as ConfigType[K];
 
-    withLazyPlugins({
-      plugins: () => get('plugins'),
+    const lazyIds = new Set(entries.map((e) => e.pluginId));
+    const userPlugins = (get('plugins') ?? []).filter((p) => !lazyIds.has(p?.id));
+
+    const pluginsPromise = resolveLazyPlugins({
       entries: entries.map((entry) => ({
         pluginId: entry.pluginId,
         isEnabled: () => entry.isEnabled(get),
         load: entry.load,
       })),
       signal: controller.signal,
-    }).then((plugins) => {
-      if (!controller.signal.aborted) {
-        this._onResolved(plugins);
-      }
+    }).then((lazyPlugins) => {
+      if (controller.signal.aborted) return undefined;
+      return [...userPlugins, ...lazyPlugins];
     });
+
+    this._onCompute(pluginsPromise);
   }
 
   public destroy(): void {

src/abstract/managers/plugin/PluginManager.ts

@@ -1,5 +1,6 @@
 import type { Unsubscriber } from '../../../lit/PubSubCompat';
 import { SharedInstance, type SharedInstancesBag } from '../../../lit/shared-instances';
+import { fileIsImage } from '../../../utils/fileTypes';
 import type { UploadEntryTypedData } from '../../uploadEntrySchema';
 import { buildPluginApi } from './buildPluginApi';
 import { LazyPluginLoader } from './LazyPluginLoader';
@@ -20,8 +21,10 @@ export class PluginManager extends SharedInstance {
   public constructor(sharedInstancesBag: SharedInstancesBag) {
     super(sharedInstancesBag);
 
-    this._lazyPluginLoader = new LazyPluginLoader(this._ctx, (plugins) => {
-      this._pluginsUpdate = this._pluginsUpdate.then(() => this._syncPlugins(plugins));
+    this._lazyPluginLoader = new LazyPluginLoader(this._ctx, (pluginsPromise) => {
+      this._pluginsUpdate = this._pluginsUpdate
+        .then(() => pluginsPromise)
+        .then((plugins) => (plugins !== undefined ? this._syncPlugins(plugins) : undefined));
     });
   }
 
@@ -129,10 +132,9 @@ export class PluginManager extends SharedInstance {
     if (onAddHooks.length === 0) return;
 
     let file: File | Blob = initialFile;
-    let mimeType = entry.getValue('mimeType');
     for (const hook of onAddHooks) {
       try {
-        ({ file, mimeType } = await hook.handler({ file, mimeType }));
+        ({ file } = await hook.handler({ file }));
       } catch (error) {
         this._debugPrint(`File hook "onAdd" from plugin "${hook.pluginId}" failed`, error);
       }
@@ -141,9 +143,11 @@ export class PluginManager extends SharedInstance {
     if (file !== initialFile) {
       entry.setValue('file', file as File);
       entry.setValue('fileSize', file.size);
-    }
-    if (mimeType !== entry.getValue('mimeType')) {
-      entry.setValue('mimeType', mimeType);
+      entry.setValue('mimeType', file.type || null);
+      entry.setValue('isImage', fileIsImage(file));
+      if (file instanceof File) {
+        entry.setValue('fileName', file.name);
+      }
     }
   }
 

src/abstract/managers/plugin/PluginTypes.ts

@@ -48,8 +48,6 @@ export type PluginFileActionRegistration = {
 export type PluginFileHookContext = {
   /** The file to transform */
   file: File | Blob;
-  /** MIME type of the file */
-  mimeType: string | null;
 };
 
 export type PluginFileHookRegistration = {
@@ -58,7 +56,8 @@ export type PluginFileHookRegistration = {
    * - `'beforeUpload'`: called right before the file is uploaded.
    * - `'onAdd'`: called after the file is added to the upload list.
    *
-   * Return the modified file and mimeType. Return the originals if no transformation is needed.
+   * Return the (optionally transformed) file. After the hook runs, `mimeType`,
+   * `isImage`, `fileSize`, and `fileName` are all re-derived from the returned file.
    */
   type: 'beforeUpload' | 'onAdd';
   handler: (context: PluginFileHookContext) => PluginFileHookContext | Promise<PluginFileHookContext>;

src/abstract/managers/plugin/lazyPluginRegistry.ts

@@ -10,7 +10,7 @@ import { property, state } from 'lit/decorators.js';
 import type { PluginFileActionRegistration } from '../../abstract/managers/plugin';
 import type { UploadEntryTypedData } from '../../abstract/uploadEntrySchema';
 import { debounce } from '../../utils/debounce';
-
+import { fileIsImage } from '../../utils/fileTypes';
 import { throttle } from '../../utils/throttle';
 import { ExternalUploadSource } from '../../utils/UploadSource';
 import './file-item.css';
@@ -419,13 +419,15 @@ export class FileItem extends FileItemConfig {
           );
           for (const hook of beforeUploadHooks) {
             try {
-              const { file: newFile, mimeType: newMimeType } = await hook.handler({
-                file,
-                mimeType: entry.getValue('mimeType'),
-              });
-              file = newFile;
-              if (newMimeType !== entry.getValue('mimeType')) {
-                entry.setValue('mimeType', newMimeType);
+              const { file: newFile } = await hook.handler({ file });
+              if (newFile !== file) {
+                file = newFile;
+                entry.setValue('mimeType', file.type || null);
+                entry.setValue('isImage', fileIsImage(file));
+                entry.setValue('fileSize', file.size);
+                if (file instanceof File) {
+                  entry.setValue('fileName', file.name);
+                }
               }
             } catch (error) {
               this.debugPrint(`File hook "beforeUpload" from plugin "${hook.pluginId}" failed`, error);

src/blocks/Config/lazyPluginRegistry.ts

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { solutionBlockCtx } from '../abstract/CTX';
-import type { LazyPluginEntry } from '../abstract/managers/plugin/lazyPluginRegistry';
+import type { LazyPluginEntry } from '../abstract/managers/plugin/LazyPluginLoader';
 import svgIconsSprite from '../blocks/themes/uc-basic/svg-sprite';
 import { LitBlock } from './LitBlock';
 

src/blocks/FileItem/FileItem.ts

@@ -49,6 +49,7 @@ export class LitUploaderBlock extends LitActivityBlock {
       return new TypedCollection<UploadEntryData>({
         initialValue: initialUploadEntryData,
         watchList: [
+          'file',
           'uploadProgress',
           'uploadError',
           'fileInfo',
@@ -198,10 +199,7 @@ export class LitUploaderBlock extends LitActivityBlock {
       if (!entry.getValue('silent')) {
         this.emit(EventType.FILE_ADDED, this.api.getOutputItem(entry.uid));
       }
-      const pluginManager = this._sharedInstancesBag.pluginManager;
-      if (pluginManager) {
-        void pluginManager.runOnAddHooks(entry);
-      }
+      void this._sharedInstancesBag.wait('pluginManager').then((pluginManager) => pluginManager.runOnAddHooks(entry));
     }
 
     this.validationManager.runCollectionValidators();
@@ -238,7 +236,7 @@ export class LitUploaderBlock extends LitActivityBlock {
     const entriesToRunValidation = [
       ...new Set(
         Object.entries(changeMap)
-          .filter(([key]) => ['uploadError', 'fileInfo', 'cdnUrl', 'cdnUrlModifiers'].includes(key))
+          .filter(([key]) => ['file', 'uploadError', 'fileInfo', 'cdnUrl', 'cdnUrlModifiers'].includes(key))
           .flatMap(([, ids]) => [...ids]),
       ),
     ];