examples: update angular-example to Angular v13 (#3325)

* examples: update angular-example to Angular v13

* meta: upgrade TS version accross the board

* meta: upgrade ESLint packages

* Fix angular-examples tests

* bump lock file

* fix type conflict

* Upgrade `ng-packagr`

.eslintrc.js

@@ -118,7 +118,7 @@ module.exports = {
 
     // jsdoc
     'jsdoc/check-alignment': 'error',
-    'jsdoc/check-examples': 'error',
+    'jsdoc/check-examples': 'off', // cannot yet be supported for ESLint 8, see https://github.com/eslint/eslint/issues/14745
     'jsdoc/check-param-names': ['warn'],
     'jsdoc/check-syntax': ['warn'],
     'jsdoc/check-tag-names': 'error',

.gitignore

@@ -4,6 +4,7 @@ npm-debug.log
 npm-debug.log*
 nohup.out
 node_modules
+.angular
 .cache
 .parcel-cache
 .eslintcache

examples/angular-example/e2e/src/app.e2e-spec.ts

@@ -11,7 +11,7 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', async () => {
     await page.navigateTo()
-    expect(await page.getTitleText()).toEqual('angular-example app is running!')
+    expect(await page.getTitleText()).toEqual('Uppy Angular Example')
   })
 
   afterEach(async () => {

examples/angular-example/package.json

@@ -11,14 +11,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.1.0",
-    "@angular/common": "~12.1.0",
-    "@angular/compiler": "~12.1.0",
-    "@angular/core": "~12.1.0",
-    "@angular/forms": "~12.1.0",
-    "@angular/platform-browser": "~12.1.0",
-    "@angular/platform-browser-dynamic": "~12.1.0",
-    "@angular/router": "~12.1.0",
+    "@angular/animations": "~13.0.2",
+    "@angular/common": "~13.0.2",
+    "@angular/compiler": "~13.0.2",
+    "@angular/core": "~13.0.2",
+    "@angular/forms": "~13.0.2",
+    "@angular/platform-browser": "~13.0.2",
+    "@angular/platform-browser-dynamic": "~13.0.2",
+    "@angular/router": "~13.0.2",
     "@uppy/angular": "workspace:*",
     "@uppy/core": "workspace:*",
     "@uppy/drag-drop": "workspace:*",
@@ -31,31 +31,31 @@
     "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.1.0",
-    "@angular-eslint/builder": "12.2.0",
-    "@angular-eslint/eslint-plugin": "12.2.0",
-    "@angular-eslint/eslint-plugin-template": "12.2.0",
-    "@angular-eslint/schematics": "12.2.0",
-    "@angular-eslint/template-parser": "12.2.0",
-    "@angular/cli": "~12.1.0",
-    "@angular/compiler-cli": "~12.1.0",
+    "@angular-devkit/build-angular": "~13.0.3",
+    "@angular-eslint/builder": "13.0.0",
+    "@angular-eslint/eslint-plugin": "13.0.0",
+    "@angular-eslint/eslint-plugin-template": "13.0.0",
+    "@angular-eslint/schematics": "13.0.0",
+    "@angular-eslint/template-parser": "13.0.0",
+    "@angular/cli": "~13.0.3",
+    "@angular/compiler-cli": "~13.0.2",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "eslint": "^8.0.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsdoc": "^36.0.0",
-    "eslint-plugin-prefer-arrow": "latest",
+    "eslint-plugin-jsdoc": "^37.0.0",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.1.0",
+    "karma": "~6.3.9",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
-    "typescript": "~4.3"
+    "typescript": "~4.4"
   }
 }

examples/angular-example/src/app/app.component.spec.ts

@@ -26,6 +26,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent)
     fixture.detectChanges()
     const compiled = fixture.nativeElement
-    expect(compiled.querySelector('.content span').textContent).toContain('angular-example app is running!')
+    expect(compiled.textContent).toContain('Uppy Angular Example')
   })
 })

examples/svelte-example/package.json

@@ -25,7 +25,7 @@
     "svelte-check": "^1.0.0",
     "svelte-preprocess": "^4.6.1",
     "tslib": "^2.0.0",
-    "typescript": "~4.3"
+    "typescript": "~4.4"
   },
   "dependencies": {
     "@uppy/core": "workspace:*",

package.json

@@ -69,15 +69,15 @@
     "disc": "^1.3.3",
     "eslint": "^8.0.0",
     "eslint-config-transloadit": "^2.0.0",
-    "eslint-plugin-compat": "^3.8.0",
+    "eslint-plugin-compat": "^4.0.0",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-jest": "^25.0.0",
-    "eslint-plugin-jsdoc": "^36.0.0",
+    "eslint-plugin-jsdoc": "^37.0.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-markdown": "^2.2.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prefer-import": "^0.0.1",
-    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-promise": "^5.1.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "events.once": "^2.0.2",
@@ -122,7 +122,7 @@
     "tinyify": "^3.0.0",
     "tsd": "^0.17.0",
     "tsify": "^5.0.1",
-    "typescript": "~4.3",
+    "typescript": "~4.4",
     "verdaccio": "^5.1.1",
     "watchify": "^4.0.0"
   },
@@ -193,7 +193,7 @@
     ]
   },
   "resolutions": {
-    "@typescript-eslint/experimental-utils": "5.0.0",
+    "@types/eslint@^7.2.13": "^8.2.0",
     "npm-auth-to-token@1.0.0": "patch:npm-auth-to-token@npm:1.0.0#.yarn/patches/npm-auth-to-token-npm-1.0.0-c288ce201f"
   }
 }

packages/@uppy/angular/package.json

@@ -57,20 +57,20 @@
     "babel-loader": "^8.1.0",
     "eslint": "^8.0.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsdoc": "^36.0.0",
-    "eslint-plugin-prefer-arrow": "latest",
+    "eslint-plugin-jsdoc": "^37.0.0",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
     "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.1.0",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "~6.3.9",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^12.1.0",
+    "ng-packagr": "^13.0.0",
     "protractor": "~7.0.0",
     "redux": "^4.0.5",
     "ts-node": "~8.3.0",
-    "typescript": "~4.3"
+    "typescript": "~4.4"
   },
   "publishConfig": {
     "access": "public"

packages/@uppy/companion-client/src/RequestClient.js

@@ -49,7 +49,7 @@ module.exports = class RequestClient {
     return stripSlash(companion && companion[host] ? companion[host] : host)
   }
 
-  static defaultHeaders ={
+  static defaultHeaders = {
     Accept: 'application/json',
     'Content-Type': 'application/json',
     'Uppy-Versions': `@uppy/companion-client=${RequestClient.VERSION}`,

packages/@uppy/companion-client/src/Socket.js

@@ -72,7 +72,7 @@ module.exports = class UppySocket {
     this.#emitter.once(action, handler)
   }
 
-  #handleMessage= (e) => {
+  #handleMessage = (e) => {
     try {
       const message = JSON.parse(e.data)
       this.emit(message.action, message.payload)

packages/@uppy/companion/package.json

@@ -73,7 +73,7 @@
     "@types/connect-redis": "0.0.7",
     "@types/cookie-parser": "1.4.2",
     "@types/cors": "2.8.6",
-    "@types/eslint": "^7.2.14",
+    "@types/eslint": "^8.2.0",
     "@types/express-session": "1.17.3",
     "@types/jsonwebtoken": "8.3.7",
     "@types/lodash.merge": "4.6.6",
@@ -88,7 +88,7 @@
     "into-stream": "^6.0.0",
     "nock": "^13.1.3",
     "supertest": "3.4.2",
-    "typescript": "~4.3"
+    "typescript": "~4.4"
   },
   "files": [
     "bin/",

packages/@uppy/dashboard/src/components/FileCard/index.js

@@ -6,7 +6,7 @@ const ignoreEvent = require('../../utils/ignoreEvent.js')
 const FilePreview = require('../FilePreview')
 
 class FileCard extends Component {
-  form = document.createElement('form');
+  form = document.createElement('form')
 
   constructor (props) {
     super(props)

packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.js

@@ -1,7 +1,7 @@
 const { h, Fragment } = require('preact')
 const prettierBytes = require('@transloadit/prettier-bytes')
-const MetaErrorMessage = require('../MetaErrorMessage')
 const truncateString = require('@uppy/utils/lib/truncateString')
+const MetaErrorMessage = require('../MetaErrorMessage')
 
 const renderFileName = (props) => {
   const { author, name } = props.file.meta

packages/@uppy/informer/src/FadeIn.js

@@ -3,7 +3,7 @@ const { h, Component, createRef } = require('preact')
 const TRANSITION_MS = 300
 
 module.exports = class FadeIn extends Component {
-  ref = createRef();
+  ref = createRef()
 
   componentWillEnter (callback) {
     this.ref.current.style.opacity = '1'

packages/@uppy/status-bar/src/index.js

@@ -13,7 +13,7 @@ const locale = require('./locale.js')
  */
 module.exports = class StatusBar extends UIPlugin {
   // eslint-disable-next-line global-require
-  static VERSION = require('../package.json').version;
+  static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {
     super(uppy, opts)
@@ -54,7 +54,7 @@ module.exports = class StatusBar extends UIPlugin {
     return this.uppy.upload().catch(() => {
       // Error logged in Core
     })
-  };
+  }
 
   render (state) {
     const {

packages/@uppy/transloadit/src/AssemblyWatcher.js

@@ -41,7 +41,7 @@ class TransloaditAssemblyWatcher extends Emitter {
     return this.#assemblyIDs.indexOf(id) !== -1
   }
 
-  #onAssemblyComplete =(assembly) => {
+  #onAssemblyComplete = (assembly) => {
     if (!this.#watching(assembly.assembly_id)) {
       return
     }
@@ -53,7 +53,7 @@ class TransloaditAssemblyWatcher extends Emitter {
     this.#checkAllComplete()
   }
 
-  #onAssemblyCancel =(assembly) => {
+  #onAssemblyCancel = (assembly) => {
     if (!this.#watching(assembly.assembly_id)) {
       return
     }
@@ -61,7 +61,7 @@ class TransloaditAssemblyWatcher extends Emitter {
     this.#checkAllComplete()
   }
 
-  #onAssemblyError =(assembly, error) => {
+  #onAssemblyError = (assembly, error) => {
     if (!this.#watching(assembly.assembly_id)) {
       return
     }
@@ -74,7 +74,7 @@ class TransloaditAssemblyWatcher extends Emitter {
     this.#checkAllComplete()
   }
 
-  #onImportError =(assembly, fileID, error) => {
+  #onImportError = (assembly, fileID, error) => {
     if (!this.#watching(assembly.assembly_id)) {
       return
     }

packages/@uppy/transloadit/src/index.js

@@ -273,7 +273,7 @@ module.exports = class Transloadit extends BasePlugin {
    * Used when `importFromUploadURLs` is enabled: adds files to the Assembly
    * once they have been fully uploaded.
    */
-  #onFileUploadURLAvailable =(rawFile) => {
+  #onFileUploadURLAvailable = (rawFile) => {
     const file = this.uppy.getFile(rawFile.id)
     if (!file || !file.transloadit || !file.transloadit.assembly) {
       return
@@ -386,7 +386,7 @@ module.exports = class Transloadit extends BasePlugin {
   /**
    * When all files are removed, cancel in-progress Assemblies.
    */
-  #onCancelAll =() => {
+  #onCancelAll = () => {
     const { uploadsAssemblies } = this.getPluginState()
 
     const assemblyIDs = Object.values(uploadsAssemblies).flat(1)
@@ -418,7 +418,7 @@ module.exports = class Transloadit extends BasePlugin {
     })
   }
 
-  #onRestored =(pluginData) => {
+  #onRestored = (pluginData) => {
     const savedState = pluginData && pluginData[this.id] ? pluginData[this.id] : {}
     const previousAssemblies = savedState.assemblies || {}
     const uploadsAssemblies = savedState.uploadsAssemblies || {}
@@ -626,7 +626,7 @@ module.exports = class Transloadit extends BasePlugin {
       })
   }
 
-  #afterUpload =(fileIDs, uploadID) => {
+  #afterUpload = (fileIDs, uploadID) => {
     const files = fileIDs.map(fileID => this.uppy.getFile(fileID))
     // Only use files without errors
     const filteredFileIDs = files.filter((file) => !file.error).map(file => file.id)
@@ -706,7 +706,7 @@ module.exports = class Transloadit extends BasePlugin {
       .catch(sendErrorToConsole(err))
   }
 
-  #onTusError =(err) => {
+  #onTusError = (err) => {
     if (err && /^tus: /.test(err.message)) {
       const xhr = err.originalRequest ? err.originalRequest.getUnderlyingObject() : null
       const url = xhr && xhr.responseURL ? xhr.responseURL : null

packages/@uppy/url/src/index.js

@@ -1,8 +1,8 @@
 const { UIPlugin } = require('@uppy/core')
 const { h } = require('preact')
 const { RequestClient } = require('@uppy/companion-client')
-const UrlUI = require('./UrlUI.js')
 const toArray = require('@uppy/utils/lib/toArray')
+const UrlUI = require('./UrlUI.js')
 const forEachDroppedOrPastedUrl = require('./utils/forEachDroppedOrPastedUrl')
 
 const locale = require('./locale')

packages/@uppy/utils/src/ProgressTimeout.js

@@ -5,13 +5,13 @@
  * Call `timer.done()` when the upload has completed.
  */
 class ProgressTimeout {
-  #aliveTimer;
+  #aliveTimer
 
-  #isDone = false;
+  #isDone = false
 
-  #onTimedOut;
+  #onTimedOut
 
-  #timeout;
+  #timeout
 
   constructor (timeout, timeoutHandler) {
     this.#timeout = timeout