@uppy/svelte: remove UMD output and make it use newer types (#5023)

Author: aduh95

Diff for: 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",

Diff for: packages/@uppy/svelte/.npmignore

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

Diff for: 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"
@@ -18,11 +23,15 @@
     "type": "git",
     "url": "git+https://github.com/transloadit/uppy.git"
   },
+  "dependencies": {
+    "@uppy/utils": "workspace:^"
+  },
   "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",
+    "rollup-plugin-svelte-types": "^1.0.6",
     "svelte": "^4.0.0",
     "svelte-check": "^3.0.0",
     "svelte-preprocess": "^5.0.0"
@@ -33,7 +42,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 +55,7 @@
   ],
   "files": [
     "src",
-    "dist"
+    "lib",
+    "typings"
   ]
 }

Diff for: packages/@uppy/svelte/rollup.config.js

@@ -1,12 +1,7 @@
 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())
+import svelteDts from 'rollup-plugin-svelte-types';
 
 const globals = {
   '@uppy/dashboard': 'Dashboard',
@@ -16,19 +11,13 @@ const globals = {
 }
 
 export default {
-  input: 'src/index.js',
+  input: 'src/index.ts',
   output: [
     {
-      file: pkg.module,
+      file: 'lib/index.js',
       format: 'es',
       globals,
     },
-    {
-      file: pkg.main,
-      format: 'umd',
-      name,
-      globals,
-    },
   ],
   plugins: [
     svelte({
@@ -38,5 +27,8 @@ export default {
     resolve({
       resolveOnly: ['svelte'],
     }),
+    svelteDts.default({
+      declarationDir: './lib/'
+    })
   ],
 }

Diff for: packages/@uppy/svelte/src/components/Dashboard.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
+<script lang="ts" generics="M extends import('@uppy/utils/lib/UppyFile').Meta, B extends import('@uppy/utils/lib/UppyFile').Body">
   import { onMount, onDestroy } from 'svelte'
   import type { Uppy } from '@uppy/core';
   import DashboardPlugin from '@uppy/dashboard'
 
   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 +20,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);
   }
 

Diff for: packages/@uppy/svelte/src/components/DashboardModal.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
+<script lang="ts" generics="M extends import('@uppy/utils/lib/UppyFile').Meta, B extends import('@uppy/utils/lib/UppyFile').Body">
   import { onMount, onDestroy } from 'svelte'
   import type { Uppy } from '@uppy/core';
   import DashboardPlugin from '@uppy/dashboard'
 
   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 +22,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);
   }
 

Diff for: packages/@uppy/svelte/src/components/DragDrop.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
+<script lang="ts" generics="M extends import('@uppy/utils/lib/UppyFile').Meta, B extends import('@uppy/utils/lib/UppyFile').Body">
   import { onMount, onDestroy } from 'svelte'
   import type { Uppy } from '@uppy/core';
   import DragDropPlugin from '@uppy/drag-drop'
 
   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 +18,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);
   }
 

Diff for: packages/@uppy/svelte/src/components/ProgressBar.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
+<script lang="ts" generics="M extends import('@uppy/utils/lib/UppyFile').Meta, B extends import('@uppy/utils/lib/UppyFile').Body">
   import { onMount, onDestroy } from 'svelte'
   import type { Uppy } from '@uppy/core';
   import ProgressBarPlugin from '@uppy/progress-bar'
-
+  
   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 +18,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);
   }
 

Diff for: packages/@uppy/svelte/src/components/StatusBar.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
+<script lang="ts" generics="M extends import('@uppy/utils/lib/UppyFile').Meta, B extends import('@uppy/utils/lib/UppyFile').Body">
   import { onMount, onDestroy } from 'svelte'
   import type { Uppy } from '@uppy/core';
   import StatusBarPlugin from '@uppy/status-bar'
-
+  
   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 = () => {
@@ -18,9 +18,9 @@
     }
 
     uppy.use(StatusBarPlugin, options);
-    plugin = uppy.getPlugin(options.id) as StatusBarPlugin;
+    plugin = uppy.getPlugin(options.id) as StatusBarPlugin<M, B>;
   }
-  const uninstallPlugin = (uppyInstance: Uppy = uppy) => {
+  const uninstallPlugin = (uppyInstance: Uppy<M, B> = uppy) => {
     uppyInstance.removePlugin(plugin);
   }
 

Diff for: packages/@uppy/svelte/src/empty.ts

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

Diff for: packages/@uppy/svelte/src/index.js renamed to packages/@uppy/svelte/src/index.ts

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