@uppy/angular: fix build

This is a temporary workaround to make sure the build doesn't fail while
we're working on typing the Uppy plugins.

packages/@uppy/angular/projects/uppy/angular/src/lib/components/dashboard-modal/dashboard-modal-demo.component.ts

@@ -1,11 +1,16 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+// @ts-expect-error
 import * as Dashboard from '@uppy/dashboard';
+// @ts-expect-error
 import { Uppy } from '@uppy/core';
 
 @Component({
   selector: 'uppy-dashboard-demo',
-  template: `<uppy-dashboard-modal [uppy]='uppy' [props]='props'></uppy-dashboard-modal>`,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  template: `<uppy-dashboard-modal
+    [uppy]="uppy"
+    [props]="props"
+  ></uppy-dashboard-modal>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DashboardModalDemoComponent {
   uppy: Uppy = new Uppy({ debug: true, autoProceed: true });

packages/@uppy/angular/projects/uppy/angular/src/lib/components/dashboard-modal/dashboard-modal.component.ts

@@ -1,16 +1,30 @@
-import { Component, ChangeDetectionStrategy, ElementRef, Input, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  Input,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+// @ts-expect-error
 import Dashboard from '@uppy/dashboard';
+// @ts-expect-error
 import type { DashboardOptions } from '@uppy/dashboard';
+// @ts-expect-error
 import { Uppy } from '@uppy/core';
 import { UppyAngularWrapper } from '../../utils/wrapper';
 
 @Component({
   selector: 'uppy-dashboard-modal',
   template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DashboardModalComponent extends UppyAngularWrapper<Dashboard> implements OnDestroy, OnChanges {
-  @Input() uppy: Uppy = new Uppy;
+export class DashboardModalComponent
+  extends UppyAngularWrapper<Dashboard>
+  implements OnDestroy, OnChanges
+{
+  @Input() uppy: Uppy = new Uppy();
   @Input() props: DashboardOptions = {};
   @Input() open: boolean = false;
 
@@ -19,22 +33,25 @@ export class DashboardModalComponent extends UppyAngularWrapper<Dashboard> imple
   }
 
   ngOnInit() {
-    this.onMount({
-      id: 'angular:DashboardModal',
-      inline: false,
-      target: this.el.nativeElement
-    }, Dashboard)
+    this.onMount(
+      {
+        id: 'angular:DashboardModal',
+        inline: false,
+        target: this.el.nativeElement,
+      },
+      Dashboard,
+    );
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     this.handleChanges(changes, Dashboard);
     // Handle dashboard-modal specific changes
     if (changes['open'] && this.open !== changes['open'].previousValue) {
-      if(this.open && !changes['open'].previousValue) {
-        this.plugin!.openModal()
+      if (this.open && !changes['open'].previousValue) {
+        this.plugin!.openModal();
       }
       if (!this.open && changes['open'].previousValue) {
-        this.plugin!.closeModal()
+        this.plugin!.closeModal();
       }
     }
   }
@@ -42,5 +59,4 @@ export class DashboardModalComponent extends UppyAngularWrapper<Dashboard> imple
   ngOnDestroy(): void {
     this.uninstall();
   }
-
 }

packages/@uppy/angular/projects/uppy/angular/src/lib/components/dashboard/dashboard-demo.component.ts

@@ -1,11 +1,13 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+// @ts-expect-error
 import * as Dashboard from '@uppy/dashboard';
+// @ts-expect-error
 import { Uppy } from '@uppy/core';
 
 @Component({
   selector: 'uppy-dashboard-demo',
-  template: `<uppy-dashboard [uppy]='uppy' [props]='props'></uppy-dashboard>`,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  template: `<uppy-dashboard [uppy]="uppy" [props]="props"></uppy-dashboard>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DashboardDemoComponent {
   uppy: Uppy = new Uppy({ debug: true, autoProceed: true });

packages/@uppy/angular/projects/uppy/angular/src/lib/components/dashboard/dashboard.component.ts

@@ -1,16 +1,30 @@
-import { Component, ChangeDetectionStrategy, ElementRef, Input, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  Input,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+// @ts-expect-error
 import Dashboard from '@uppy/dashboard';
+// @ts-expect-error
 import type { DashboardOptions } from '@uppy/dashboard';
+// @ts-expect-error
 import { Uppy } from '@uppy/core';
 import { UppyAngularWrapper } from '../../utils/wrapper';
 
 @Component({
   selector: 'uppy-dashboard',
   template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DashboardComponent extends UppyAngularWrapper implements OnDestroy, OnChanges {
-  @Input() uppy: Uppy = new Uppy;
+export class DashboardComponent
+  extends UppyAngularWrapper
+  implements OnDestroy, OnChanges
+{
+  @Input() uppy: Uppy = new Uppy();
   @Input() props: DashboardOptions = {};
 
   constructor(public el: ElementRef) {
@@ -18,7 +32,10 @@ export class DashboardComponent extends UppyAngularWrapper implements OnDestroy,
   }
 
   ngOnInit() {
-    this.onMount({ id: 'angular:Dashboard', inline: true, target: this.el.nativeElement }, Dashboard)
+    this.onMount(
+      { id: 'angular:Dashboard', inline: true, target: this.el.nativeElement },
+      Dashboard,
+    );
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -28,5 +45,4 @@ export class DashboardComponent extends UppyAngularWrapper implements OnDestroy,
   ngOnDestroy(): void {
     this.uninstall();
   }
-
 }

packages/@uppy/angular/projects/uppy/angular/src/lib/components/drag-drop/drag-drop-demo.component.ts

@@ -1,13 +1,13 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+// @ts-expect-error
 import * as DragDrop from '@uppy/drag-drop';
+// @ts-expect-error
 import { Uppy } from '@uppy/core';
 
 @Component({
   selector: 'uppy-drag-drop-demo',
-  template: `
-  <uppy-drag-drop [uppy]='uppy' [props]='props'></uppy-drag-drop>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  template: ` <uppy-drag-drop [uppy]="uppy" [props]="props"></uppy-drag-drop> `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DragDropDemoComponent {
   uppy: Uppy = new Uppy({ debug: true, autoProceed: true });

packages/@uppy/angular/projects/uppy/angular/src/lib/components/drag-drop/drag-drop.component.ts

@@ -1,16 +1,30 @@
-import { Component, ChangeDetectionStrategy, Input, OnDestroy, OnChanges, SimpleChanges, ElementRef } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  ElementRef,
+} from '@angular/core';
+// @ts-expect-error
 import { Uppy } from '@uppy/core';
+// @ts-expect-error
 import DragDrop from '@uppy/drag-drop';
+// @ts-expect-error
 import type { DragDropOptions } from '@uppy/drag-drop';
 import { UppyAngularWrapper } from '../../utils/wrapper';
 
 @Component({
   selector: 'uppy-drag-drop',
   template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DragDropComponent extends UppyAngularWrapper implements OnDestroy, OnChanges {
-  @Input() uppy: Uppy = new Uppy;
+export class DragDropComponent
+  extends UppyAngularWrapper
+  implements OnDestroy, OnChanges
+{
+  @Input() uppy: Uppy = new Uppy();
   @Input() props: DragDropOptions = {};
 
   constructor(public el: ElementRef) {
@@ -18,7 +32,10 @@ export class DragDropComponent extends UppyAngularWrapper implements OnDestroy,
   }
 
   ngOnInit() {
-    this.onMount({ id: 'angular:DragDrop', target: this.el.nativeElement }, DragDrop)
+    this.onMount(
+      { id: 'angular:DragDrop', target: this.el.nativeElement },
+      DragDrop,
+    );
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -28,5 +45,4 @@ export class DragDropComponent extends UppyAngularWrapper implements OnDestroy,
   ngOnDestroy(): void {
     this.uninstall();
   }
-
 }

packages/@uppy/angular/projects/uppy/angular/src/lib/components/progress-bar/progress-bar-demo.component.ts

@@ -1,64 +1,68 @@
-import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
+// @ts-expect-error
 import { Uppy } from '@uppy/core';
+// @ts-expect-error
 import { Tus, ProgressBar } from 'uppy';
 
 @Component({
   selector: 'uppy-progress-bar-demo',
   template: `
-  <section class="example-one">
-  <h5>autoProceed is on</h5>
+    <section class="example-one">
+      <h5>autoProceed is on</h5>
 
-  <!-- Target DOM node #1 -->
-  <uppy-drag-drop [uppy]='uppyOne'></uppy-drag-drop>
+      <!-- Target DOM node #1 -->
+      <uppy-drag-drop [uppy]="uppyOne"></uppy-drag-drop>
 
-  <!-- Progress bar #1 -->
-  <uppy-progress-bar [uppy]='uppyOne' [props]='props'></uppy-progress-bar>
+      <!-- Progress bar #1 -->
+      <uppy-progress-bar [uppy]="uppyOne" [props]="props"></uppy-progress-bar>
 
+      <!-- Uploaded files list #1 -->
+      <div class="uploaded-files" *ngIf="fileListOne?.length">
+        <h5>Uploaded files:</h5>
+        <ol>
+          <li *ngFor="let item of fileListOne">
+            <a [href]="item.url" target="_blank"> {{ item.fileName }}</a>
+          </li>
+        </ol>
+      </div>
+    </section>
 
-  <!-- Uploaded files list #1 -->
-  <div class="uploaded-files" *ngIf='fileListOne?.length'>
-    <h5>Uploaded files:</h5>
-    <ol>
-      <li *ngFor='let item of fileListOne'>
-        <a [href]="item.url" target="_blank">
-          {{item.fileName}}</a>
-        </li>
-  </ol>
-  </div>
-</section>
+    <section class="example-two">
+      <h5>autoProceed is off</h5>
 
-<section class="example-two">
-  <h5>autoProceed is off</h5>
+      <!-- Target DOM node #1 -->
+      <uppy-drag-drop [uppy]="uppyTwo"></uppy-drag-drop>
 
-  <!-- Target DOM node #1 -->
-  <uppy-drag-drop [uppy]='uppyTwo'></uppy-drag-drop>
+      <!-- Progress bar #1 -->
+      <uppy-progress-bar [uppy]="uppyTwo" [props]="props"></uppy-progress-bar>
 
-  <!-- Progress bar #1 -->
-  <uppy-progress-bar [uppy]='uppyTwo' [props]='props'></uppy-progress-bar>
+      <button (click)="upload()" class="upload-button">Upload</button>
 
-  <button (click)='upload()' class="upload-button">Upload</button>
-
-  <!-- Uploaded files list #2 -->
-  <div class="uploaded-files" *ngIf='fileListTwo?.length'>
-    <h5>Uploaded files:</h5>
-    <ol>
-      <li *ngFor='let item of fileListTwo'>
-        <a [href]="item.url" target="_blank">
-          {{item.fileName}}</a>
-        </li>
-  </ol>
-  </div>
-</section>
+      <!-- Uploaded files list #2 -->
+      <div class="uploaded-files" *ngIf="fileListTwo?.length">
+        <h5>Uploaded files:</h5>
+        <ol>
+          <li *ngFor="let item of fileListTwo">
+            <a [href]="item.url" target="_blank"> {{ item.fileName }}</a>
+          </li>
+        </ol>
+      </div>
+    </section>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProgressBarDemoComponent implements OnInit {
   uppyOne: Uppy;
   uppyTwo: Uppy;
-  fileListOne: { url: string, fileName: string }[] = [];
-  fileListTwo: { url: string, fileName: string }[] = [];
+  fileListOne: { url: string; fileName: string }[] = [];
+  fileListTwo: { url: string; fileName: string }[] = [];
   props: ProgressBar.ProgressBarOptions = {
-    hideAfterFinish: false
+    hideAfterFinish: false,
   };
 
   upload(): void {
@@ -67,18 +71,22 @@ export class ProgressBarDemoComponent implements OnInit {
 
   constructor(private cdr: ChangeDetectorRef) {}
 
-  updateFileList = (target: string) => (file, response): void => {
-    this[target] = [...this[target], { url: response.uploadURL, fileName: file.name }];
-    this.cdr.markForCheck();
-  }
+  updateFileList =
+    (target: string) =>
+    (file, response): void => {
+      this[target] = [
+        ...this[target],
+        { url: response.uploadURL, fileName: file.name },
+      ];
+      this.cdr.markForCheck();
+    };
 
   ngOnInit(): void {
     this.uppyOne = new Uppy({ debug: true, autoProceed: true })
       .use(Tus, { endpoint: 'https://master.tus.io/files/' })
       .on('upload-success', this.updateFileList('fileListOne'));
     this.uppyTwo = new Uppy({ debug: true, autoProceed: false })
-        .use(Tus, { endpoint: 'https://master.tus.io/files/' })
-        .on('upload-success', this.updateFileList('fileListTwo'));
+      .use(Tus, { endpoint: 'https://master.tus.io/files/' })
+      .on('upload-success', this.updateFileList('fileListTwo'));
   }
-
 }

packages/@uppy/angular/projects/uppy/angular/src/lib/components/progress-bar/progress-bar.component.ts

@@ -1,24 +1,41 @@
-import { Component, ChangeDetectionStrategy, ElementRef, Input, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  Input,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+// @ts-expect-error
 import { Uppy } from '@uppy/core';
+// @ts-expect-error
 import ProgressBar from '@uppy/progress-bar';
+// @ts-expect-error
 import type { ProgressBarOptions } from '@uppy/progress-bar';
 import { UppyAngularWrapper } from '../../utils/wrapper';
 
 @Component({
   selector: 'uppy-progress-bar',
   template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProgressBarComponent extends UppyAngularWrapper implements OnDestroy, OnChanges {
-  @Input() uppy: Uppy = new Uppy;
+export class ProgressBarComponent
+  extends UppyAngularWrapper
+  implements OnDestroy, OnChanges
+{
+  @Input() uppy: Uppy = new Uppy();
   @Input() props: ProgressBarOptions = {};
 
   constructor(public el: ElementRef) {
     super();
-   }
+  }
 
   ngOnInit() {
-    this.onMount({ id: 'angular:ProgressBar', target: this.el.nativeElement }, ProgressBar)
+    this.onMount(
+      { id: 'angular:ProgressBar', target: this.el.nativeElement },
+      ProgressBar,
+    );
   }
 
   ngOnChanges(changes: SimpleChanges): void {

packages/@uppy/angular/projects/uppy/angular/src/lib/components/status-bar/status-bar-demo.component.ts

@@ -1,25 +1,29 @@
-import { Component, OnInit, ChangeDetectionStrategy} from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+// @ts-expect-error
 import * as StatusBar from '@uppy/status-bar';
+// @ts-expect-error
 import { Uppy } from '@uppy/core';
+// @ts-expect-error
 import { FileInput, Tus } from 'uppy';
 
 @Component({
   selector: 'uppy-status-bar-demo',
   template: `
-  <div class="UppyInput"></div>
-  <uppy-status-bar [uppy]='uppy' [props]='props'></uppy-status-bar>
+    <div class="UppyInput"></div>
+    <uppy-status-bar [uppy]="uppy" [props]="props"></uppy-status-bar>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StatusBarDemoComponent implements OnInit {
-  uppy: Uppy = new Uppy({debug: true, autoProceed: true});
+  uppy: Uppy = new Uppy({ debug: true, autoProceed: true });
   props: StatusBar.StatusBarOptions = {
     hideUploadButton: true,
-    hideAfterFinish: false
+    hideAfterFinish: false,
   };
 
   ngOnInit(): void {
-    this.uppy.use(FileInput, { target: '.UppyInput', pretty: false }).use(Tus, { endpoint: 'https://master.tus.io/files/' });
+    this.uppy
+      .use(FileInput, { target: '.UppyInput', pretty: false })
+      .use(Tus, { endpoint: 'https://master.tus.io/files/' });
   }
-
 }

packages/@uppy/angular/projects/uppy/angular/src/lib/components/status-bar/status-bar.component.ts

@@ -1,16 +1,31 @@
-import { Component, ChangeDetectionStrategy, Input, ElementRef, SimpleChange, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  ElementRef,
+  SimpleChange,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+// @ts-expect-error
 import { Uppy } from '@uppy/core';
+// @ts-expect-error
 import StatusBar from '@uppy/status-bar';
+// @ts-expect-error
 import type { StatusBarOptions } from '@uppy/status-bar';
 import { UppyAngularWrapper } from '../../utils/wrapper';
 
 @Component({
   selector: 'uppy-status-bar',
   template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class StatusBarComponent extends UppyAngularWrapper implements OnDestroy, OnChanges  {
-  @Input() uppy: Uppy = new Uppy;
+export class StatusBarComponent
+  extends UppyAngularWrapper
+  implements OnDestroy, OnChanges
+{
+  @Input() uppy: Uppy = new Uppy();
   @Input() props: StatusBarOptions = {};
 
   constructor(public el: ElementRef) {
@@ -18,7 +33,10 @@ export class StatusBarComponent extends UppyAngularWrapper implements OnDestroy,
   }
 
   ngOnInit() {
-    this.onMount({ id: 'angular:StatusBar', target: this.el.nativeElement }, StatusBar)
+    this.onMount(
+      { id: 'angular:StatusBar', target: this.el.nativeElement },
+      StatusBar,
+    );
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -28,5 +46,4 @@ export class StatusBarComponent extends UppyAngularWrapper implements OnDestroy,
   ngOnDestroy(): void {
     this.uninstall();
   }
-
 }

packages/@uppy/angular/projects/uppy/angular/src/lib/utils/wrapper.ts

@@ -1,41 +1,58 @@
+// @ts-expect-error
 import type { Uppy, UIPlugin } from '@uppy/core';
 import type { ElementRef, SimpleChanges } from '@angular/core';
+// @ts-expect-error
 import type { DragDropOptions } from '@uppy/drag-drop';
+// @ts-expect-error
 import type { StatusBarOptions } from '@uppy/status-bar';
+// @ts-expect-error
 import type { ProgressBarOptions } from '@uppy/progress-bar';
 
-export abstract class UppyAngularWrapper<PluginType extends UIPlugin  = UIPlugin> {
-    abstract props: DragDropOptions|StatusBarOptions|ProgressBarOptions;
-    abstract el: ElementRef
-    abstract uppy: Uppy;
-    private options: any;
-    plugin: PluginType | undefined;
+export abstract class UppyAngularWrapper<
+  PluginType extends UIPlugin = UIPlugin,
+> {
+  abstract props: DragDropOptions | StatusBarOptions | ProgressBarOptions;
+  abstract el: ElementRef;
+  abstract uppy: Uppy;
+  private options: any;
+  plugin: PluginType | undefined;
 
-    onMount(defaultOptions: Record<string, unknown>, plugin: new (uppy: Uppy, opts?: Record<string, unknown>) => UIPlugin) {
-      this.options = {
-        ...defaultOptions,
-        ...this.props,
-      };
+  onMount(
+    defaultOptions: Record<string, unknown>,
+    plugin: new (uppy: Uppy, opts?: Record<string, unknown>) => UIPlugin,
+  ) {
+    this.options = {
+      ...defaultOptions,
+      ...this.props,
+    };
 
-      this.uppy.use(plugin, this.options);
-      this.plugin = this.uppy.getPlugin(this.options.id) as PluginType;
-    }
+    this.uppy.use(plugin, this.options);
+    this.plugin = this.uppy.getPlugin(this.options.id) as PluginType;
+  }
 
-    handleChanges(changes: SimpleChanges, plugin: any): void {
-      // Without the last part of this conditional, it tries to uninstall before the plugin is mounted
-      if (changes['uppy'] && this.uppy !== changes['uppy'].previousValue && changes['uppy'].previousValue !== undefined) {
-          this.uninstall(changes['uppy'].previousValue);
-          this.uppy.use(plugin, this.options);
-      }
-      this.options = { ...this.options, ...this.props }
-      this.plugin = this.uppy.getPlugin(this.options.id) as PluginType;
-      if(changes['props'] && this.props !== changes['props'].previousValue && changes['props'].previousValue !== undefined) {
-        this.plugin.setOptions({ ...this.options })
-      }
+  handleChanges(changes: SimpleChanges, plugin: any): void {
+    // Without the last part of this conditional, it tries to uninstall before the plugin is mounted
+    if (
+      changes['uppy'] &&
+      this.uppy !== changes['uppy'].previousValue &&
+      changes['uppy'].previousValue !== undefined
+    ) {
+      this.uninstall(changes['uppy'].previousValue);
+      this.uppy.use(plugin, this.options);
     }
-
-    uninstall(uppy = this.uppy): void {
-        uppy.removePlugin(this.plugin!);
+    this.options = { ...this.options, ...this.props };
+    this.plugin = this.uppy.getPlugin(this.options.id) as PluginType;
+    if (
+      changes['props'] &&
+      this.props !== changes['props'].previousValue &&
+      changes['props'].previousValue !== undefined
+    ) {
+      // @ts-expect-error
+      this.plugin.setOptions({ ...this.options });
     }
+  }
 
+  uninstall(uppy = this.uppy): void {
+    uppy.removePlugin(this.plugin!);
+  }
 }