@uppy/svelte: remove UMD output and make it use newer types

package.json

@@ -120,7 +120,7 @@
     "build:svelte": "yarn workspace @uppy/svelte build",
     "build:angular": "yarn workspace angular build",
     "build:js": "npm-run-all build:lib build:companion build:locale-pack build:svelte build:bundle",
-    "build:ts": "yarn workspaces list --no-private --json | yarn node ./bin/build-ts.mjs",
+    "build:ts": "yarn workspaces list --no-private --json | yarn node ./bin/build-ts.mjs && yarn workspace @uppy/svelte validate",
     "build:lib": "yarn node ./bin/build-lib.js",
     "build:locale-pack": "yarn workspace @uppy-dev/locale-pack build && eslint packages/@uppy/locales/src/en_US.js --fix && yarn workspace @uppy-dev/locale-pack test unused",
     "build": "npm-run-all --parallel build:ts build:js build:css --serial size",
@@ -153,7 +153,7 @@
     "test:locale-packs:warnings": "yarn workspace @uppy-dev/locale-pack test warnings",
     "test:unit": "yarn run build:lib && yarn test:watch --run",
     "test:watch": "vitest --environment jsdom --dir packages/@uppy",
-    "test": "npm-run-all lint test:locale-packs:unused test:unit test:type test:companion",
+    "test": "npm-run-all lint test:locale-packs:unused test:unit test:companion",
     "uploadcdn": "yarn node ./bin/upload-to-cdn.js",
     "version": "yarn node ./bin/after-version-bump.js",
     "watch:css": "onchange 'packages/{@uppy/,}*/src/*.scss' --initial --verbose -- yarn run build:css",

packages/@uppy/core/src/Uppy.ts

@@ -1676,7 +1676,8 @@ export class Uppy<M extends Meta, B extends Body> {
       this.calculateTotalProgress()
     })
 
-    // @ts-expect-error should fix itself when dashboard it typed (also this doesn't belong here)
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore This event is defined in @uppy/dashboard
     this.on('dashboard:file-edit-complete', (file) => {
       if (file) {
         this.#checkRequiredMetaFieldsOnFile(file)

packages/@uppy/svelte/.npmignore

@@ -1 +1 @@
-# This file need to be there so .gitignored files are still uploaded to the npm registry.
+tsconfig.*

packages/@uppy/svelte/package.json

@@ -1,15 +1,20 @@
 {
   "name": "@uppy/svelte",
   "description": "Uppy plugin that helps integrate Uppy into your Svelte project.",
-  "svelte": "src/index.js",
-  "module": "dist/index.mjs",
-  "main": "dist/index.js",
+  "type": "module",
   "version": "3.1.3",
   "scripts": {
     "build": "rollup -c",
     "prepublishOnly": "yarn run build",
     "validate": "svelte-check"
   },
+  "exports": {
+    ".": {
+      "svelte": "./src/index.js",
+      "default": "./lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "homepage": "https://uppy.io",
   "bugs": {
     "url": "https://github.com/transloadit/uppy/issues"
@@ -21,7 +26,7 @@
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@tsconfig/svelte": "^5.0.0",
-    "rollup": "^2.60.2",
+    "rollup": "^4.0.0",
     "rollup-plugin-svelte": "^7.0.0",
     "svelte": "^4.0.0",
     "svelte-check": "^3.0.0",
@@ -33,7 +38,7 @@
     "@uppy/drag-drop": "workspace:^",
     "@uppy/progress-bar": "workspace:^",
     "@uppy/status-bar": "workspace:^",
-    "svelte": "^3.0.0 || ^4.0.0"
+    "svelte": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -46,6 +51,7 @@
   ],
   "files": [
     "src",
-    "dist"
+    "lib",
+    "typings"
   ]
 }

packages/@uppy/svelte/rollup.config.js

@@ -1,12 +1,6 @@
 import svelte from 'rollup-plugin-svelte'
 import resolve from '@rollup/plugin-node-resolve'
 import preprocess from 'svelte-preprocess'
-import pkg from './package.json'
-
-const name = pkg.name
-  .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
-  .replace(/^\w/, m => m.toUpperCase())
-  .replace(/-\w/g, m => m[1].toUpperCase())
 
 const globals = {
   '@uppy/dashboard': 'Dashboard',
@@ -19,16 +13,10 @@ export default {
   input: 'src/index.js',
   output: [
     {
-      file: pkg.module,
+      file: 'lib/index.js',
       format: 'es',
       globals,
     },
-    {
-      file: pkg.main,
-      format: 'umd',
-      name,
-      globals,
-    },
   ],
   plugins: [
     svelte({

packages/@uppy/svelte/src/components/Dashboard.svelte

@@ -3,10 +3,13 @@
   import type { Uppy } from '@uppy/core';
   import DashboardPlugin from '@uppy/dashboard'
 
+  type M = any
+  type B = any
+
   let container: HTMLElement;
-  let plugin: DashboardPlugin;
+  let plugin: DashboardPlugin<M, B>;
 
-  export let uppy: Uppy;
+  export let uppy: Uppy<M, B>;
   export let props: Object | undefined = {};
   export let plugins: string[] = [];
 
@@ -20,9 +23,9 @@
     }
 
     uppy.use(DashboardPlugin, options);
-    plugin = uppy.getPlugin(options.id) as DashboardPlugin;
+    plugin = uppy.getPlugin(options.id) as DashboardPlugin<M, B>;
   }
-  const uninstallPlugin = (uppyInstance: Uppy = uppy) => {
+  const uninstallPlugin = (uppyInstance: Uppy<M, B> = uppy) => {
     uppyInstance.removePlugin(plugin);
   }
 

packages/@uppy/svelte/src/components/DashboardModal.svelte

@@ -3,10 +3,13 @@
   import type { Uppy } from '@uppy/core';
   import DashboardPlugin from '@uppy/dashboard'
 
+  type M = any
+  type B = any
+
   let container: HTMLElement;
-  let plugin: DashboardPlugin;
+  let plugin: DashboardPlugin<M, B>;
 
-  export let uppy: Uppy;
+  export let uppy: Uppy<M, B>;
   export let props: Object | undefined = {};
   export let open: boolean;
   let lastOpen: boolean = open;
@@ -22,10 +25,10 @@
     }
 
     uppy.use(DashboardPlugin, options);
-    plugin = uppy.getPlugin(options.id) as DashboardPlugin;
+    plugin = uppy.getPlugin(options.id) as DashboardPlugin<M, B>;
     if(open) plugin.openModal();
   }
-  const uninstallPlugin = (uppyInstance: Uppy = uppy) => {
+  const uninstallPlugin = (uppyInstance: Uppy<M, B> = uppy) => {
     uppyInstance.removePlugin(plugin);
   }
 

packages/@uppy/svelte/src/components/DragDrop.svelte

@@ -2,11 +2,14 @@
   import { onMount, onDestroy } from 'svelte'
   import type { Uppy } from '@uppy/core';
   import DragDropPlugin from '@uppy/drag-drop'
+
+  type M = any
+  type B = any
 
   let container: HTMLElement;
-  let plugin: DragDropPlugin; 
+  let plugin: DragDropPlugin<M, B>; 
 
-  export let uppy: Uppy;
+  export let uppy: Uppy<M, B>;
   export let props: Object | undefined = {};
 
   const installPlugin = () => {
@@ -18,9 +21,9 @@
     }
 
     uppy.use(DragDropPlugin, options);
-    plugin = uppy.getPlugin(options.id) as DragDropPlugin;
+    plugin = uppy.getPlugin(options.id) as DragDropPlugin<M, B>;
   }
-  const uninstallPlugin = (uppyInstance: Uppy = uppy) => {
+  const uninstallPlugin = (uppyInstance: Uppy<M, B> = uppy) => {
     uppyInstance.removePlugin(plugin);
   }
 

packages/@uppy/svelte/src/components/ProgressBar.svelte

@@ -2,11 +2,14 @@
   import { onMount, onDestroy } from 'svelte'
   import type { Uppy } from '@uppy/core';
   import ProgressBarPlugin from '@uppy/progress-bar'
+
+  type M = any
+  type B = any
 
   let container: HTMLElement;
-  let plugin: ProgressBarPlugin; 
+  let plugin: ProgressBarPlugin<M, B>; 
 
-  export let uppy: Uppy;
+  export let uppy: Uppy<M, B>;
   export let props: Object | undefined = {};
 
   const installPlugin = () => {
@@ -18,9 +21,9 @@
     }
 
     uppy.use(ProgressBarPlugin, options);
-    plugin = uppy.getPlugin(options.id) as ProgressBarPlugin;
+    plugin = uppy.getPlugin(options.id) as ProgressBarPlugin<M, B>;
   }
-  const uninstallPlugin = (uppyInstance: Uppy = uppy) => {
+  const uninstallPlugin = (uppyInstance: Uppy<M, B> = uppy) => {
     uppyInstance.removePlugin(plugin);
   }
 

packages/@uppy/svelte/src/components/StatusBar.svelte

@@ -2,11 +2,14 @@
   import { onMount, onDestroy } from 'svelte'
   import type { Uppy } from '@uppy/core';
   import StatusBarPlugin from '@uppy/status-bar'
+
+  type M = any
+  type B = any
 
   let container: HTMLElement;
-  let plugin: StatusBarPlugin; 
+  let plugin: StatusBarPlugin<M, B>;
 
-  export let uppy: Uppy;
+  export let uppy: Uppy<M, B>;
   export let props: Object | undefined = {};
 
   const installPlugin = () => {
@@ -17,10 +20,10 @@
       target: container
     }
 
-    uppy.use(StatusBarPlugin, options);
-    plugin = uppy.getPlugin(options.id) as StatusBarPlugin;
+    uppy.use(StatusBarPlugin as new(uppy: any, opts: typeof options) => StatusBarPlugin<M, B>, options);
+    plugin = uppy.getPlugin(options.id) as StatusBarPlugin<M, B>;
   }
-  const uninstallPlugin = (uppyInstance: Uppy = uppy) => {
+  const uninstallPlugin = (uppyInstance: Uppy<M, B> = uppy) => {
     uppyInstance.removePlugin(plugin);
   }
 

packages/@uppy/svelte/src/index.js → packages/@uppy/svelte/src/index.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../typings/index.d.ts"/>
 export { default as Dashboard } from './components/Dashboard.svelte'
 export { default as DashboardModal } from './components/DashboardModal.svelte'
 export { default as DragDrop } from './components/DragDrop.svelte'

packages/@uppy/svelte/tsconfig.json

@@ -1,9 +1,13 @@
 {
-  "extends": "@tsconfig/svelte/tsconfig.json",
+  "extends": [
+    "../../../tsconfig.shared.json",
+    "@tsconfig/svelte/tsconfig.json",
+  ],
   "compilerOptions": {
-    "esModuleInterop": true,
-    "sourceMap": true,
+    "emitDeclarationOnly": true,
+    "rootDir": "./src",
+    "outDir": "./lib",
   },
-  "include": ["src/**/*"],
+  "include": ["./src/**/*.*", "src/**/*.svelte"],
   "exclude": ["node_modules/*"],
 }

packages/@uppy/svelte/typings/index.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svelte' {
+  import { SvelteComponent } from 'svelte'
+
+  export default class extends SvelteComponent<any> {}
+}