/* eslint-disable class-methods-use-this */ import { render, type ComponentChild } from 'preact' import findDOMElement from '@uppy/utils/lib/findDOMElement' import getTextDirection from '@uppy/utils/lib/getTextDirection' import type { Body, Meta } from '@uppy/utils/lib/UppyFile' import BasePlugin from './BasePlugin.ts' import type { PluginOpts } from './BasePlugin.js' import type { State } from './Uppy.js' /** * Defer a frequent call to the microtask queue. */ function debounce any>( fn: T, ): (...args: Parameters) => Promise> { let calling: Promise> | null = null let latestArgs: Parameters return (...args) => { latestArgs = args if (!calling) { calling = Promise.resolve().then(() => { calling = null // At this point `args` may be different from the most // recent state, if multiple calls happened since this task // was queued. So we use the `latestArgs`, which definitely // is the most recent call. return fn(...latestArgs) }) } return calling } } /** * UIPlugin is the extended version of BasePlugin to incorporate rendering with Preact. * Use this for plugins that need a user interface. * * For plugins without an user interface, see BasePlugin. */ class UIPlugin< // eslint-disable-next-line no-use-before-define Opts extends UIPluginOptions, M extends Meta, B extends Body, PluginState extends Record = Record, > extends BasePlugin { #updateUI!: (state: Partial>) => void isTargetDOMEl!: boolean el!: HTMLElement | null parent: unknown title!: string getTargetPlugin( target: PluginTarget, // eslint-disable-line no-use-before-define ): UIPlugin | undefined { let targetPlugin if (typeof (target as UIPlugin)?.addTarget === 'function') { // Targeting a plugin *instance* targetPlugin = target as UIPlugin if (!(targetPlugin instanceof UIPlugin)) { // eslint-disable-next-line no-console console.warn( new Error( 'The provided plugin is not an instance of UIPlugin. This is an indication of a bug with the way Uppy is bundled.', { cause: { targetPlugin, UIPlugin } }, ), ) } } else if (typeof target === 'function') { // Targeting a plugin type const Target = target // Find the target plugin instance. this.uppy.iteratePlugins((p) => { if (p instanceof Target) { targetPlugin = p } }) } return targetPlugin } /** * Check if supplied `target` is a DOM element or an `object`. * If it’s an object — target is a plugin, and we search `plugins` * for a plugin with same name and return its target. */ mount( target: PluginTarget, // eslint-disable-line no-use-before-define plugin: UIPlugin, ): HTMLElement { const callerPluginName = plugin.id const targetElement = findDOMElement(target) if (targetElement) { this.isTargetDOMEl = true // When target is with a single

element, // Preact thinks it’s the Uppy root element in there when doing a diff, // and destroys it. So we are creating a fragment (could be empty div) const uppyRootElement = document.createElement('div') uppyRootElement.classList.add('uppy-Root') // API for plugins that require a synchronous rerender. this.#updateUI = debounce((state) => { // plugin could be removed, but this.rerender is debounced below, // so it could still be called even after uppy.removePlugin or uppy.close // hence the check if (!this.uppy.getPlugin(this.id)) return render(this.render(state), uppyRootElement) this.afterUpdate() }) this.uppy.log( `Installing ${callerPluginName} to a DOM element '${target}'`, ) if (this.opts.replaceTargetContent) { // Doing render(h(null), targetElement), which should have been // a better way, since because the component might need to do additional cleanup when it is removed, // stopped working — Preact just adds null into target, not replacing targetElement.innerHTML = '' } render(this.render(this.uppy.getState()), uppyRootElement) this.el = uppyRootElement targetElement.appendChild(uppyRootElement) // Set the text direction if the page has not defined one. uppyRootElement.dir = this.opts.direction || getTextDirection(uppyRootElement) || 'ltr' this.onMount() return this.el! } const targetPlugin = this.getTargetPlugin(target) if (targetPlugin) { this.uppy.log(`Installing ${callerPluginName} to ${targetPlugin.id}`) this.parent = targetPlugin this.el = targetPlugin.addTarget(plugin) this.onMount() return this.el! } this.uppy.log(`Not installing ${callerPluginName}`) let message = `Invalid target option given to ${callerPluginName}.` if (typeof target === 'function') { message += ' The given target is not a Plugin class. ' + "Please check that you're not specifying a React Component instead of a plugin. " + 'If you are using @uppy/* packages directly, make sure you have only 1 version of @uppy/core installed: ' + 'run `npm ls @uppy/core` on the command line and verify that all the versions match and are deduped correctly.' } else { message += 'If you meant to target an HTML element, please make sure that the element exists. ' + 'Check that the