@uppy/svelte: use SvelteKit as the build tool (#5484)

.eslintrc.js

@@ -500,6 +500,14 @@ module.exports = {
         'no-unused-vars': 'off',
       },
     },
+    {
+      files: [
+        'packages/@uppy/svelte/**',
+      ],
+      parserOptions: {
+        sourceType: 'module',
+      },
+    },
     {
       files: ['e2e/**/*.ts'],
       extends: ['plugin:cypress/recommended'],

.gitignore

@@ -19,6 +19,8 @@ tsconfig.build.tsbuildinfo
 
 dist/
 lib/
+# @uppy/svelte needs lib inside src
+!src/lib
 coverage/
 examples/dev/bundle.js
 examples/aws-php/vendor/*

package.json

@@ -118,7 +118,7 @@
     "build:angular": "yarn workspace angular build",
     "build:js:typeless": "npm-run-all build:lib build:companion build:svelte",
     "build:js": "npm-run-all build:js:typeless build:locale-pack build:angular build:bundle",
-    "build:ts": "yarn workspaces list --no-private --json | yarn tsc -b && yarn workspace @uppy/svelte validate",
+    "build:ts": "yarn workspaces list --no-private --json | yarn tsc -b && yarn workspace @uppy/svelte check",
     "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.ts --fix && yarn workspace @uppy-dev/locale-pack test unused",
     "build": "npm-run-all --serial build:ts --parallel build:js build:css --serial size",

packages/@uppy/svelte/.gitignore

@@ -1,3 +1,5 @@
 .DS_Store
 /dist/
 /src/empty.*
+.svelte-kit
+!src/lib

packages/@uppy/svelte/package.json

@@ -1,20 +1,11 @@
 {
   "name": "@uppy/svelte",
+  "version": "4.0.2",
   "description": "Uppy plugin that helps integrate Uppy into your Svelte project.",
   "type": "module",
-  "version": "4.0.2",
-  "scripts": {
-    "build": "rollup -c",
-    "prepublishOnly": "yarn run build",
-    "validate": "svelte-check"
-  },
-  "exports": {
-    ".": {
-      "types": "./lib/index.d.ts",
-      "svelte": "./lib/index.js"
-    },
-    "./package.json": "./package.json"
-  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
   "homepage": "https://uppy.io",
   "bugs": {
     "url": "https://github.com/transloadit/uppy/issues"
@@ -23,18 +14,37 @@
     "type": "git",
     "url": "git+https://github.com/transloadit/uppy.git"
   },
-  "dependencies": {
-    "@uppy/utils": "workspace:^"
+  "keywords": [
+    "file uploader",
+    "uppy",
+    "uppy-plugin",
+    "svelte"
+  ],
+  "files": [
+    "src",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "svelte-kit sync && svelte-package",
+    "prepublishOnly": "yarn run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@tsconfig/svelte": "^5.0.0",
-    "rollup": "^4.22.4",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-svelte-types": "^1.0.6",
-    "svelte": "^4.2.19",
-    "svelte-check": "^3.0.0",
-    "svelte-preprocess": "^5.0.0"
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.0",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.11"
   },
   "peerDependencies": {
     "@uppy/core": "workspace:^",
@@ -46,16 +56,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "keywords": [
-    "file uploader",
-    "uppy",
-    "uppy-plugin",
-    "svelte"
-  ],
-  "files": [
-    "src",
-    "lib",
-    "typings"
-  ]
+  }
 }

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

@@ -1,29 +1,32 @@
-<script lang="ts" generics="M extends import('@uppy/utils/lib/UppyFile').Meta, B extends import('@uppy/utils/lib/UppyFile').Body">
+<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 type { Uppy } from '@uppy/core'
   import DashboardPlugin from '@uppy/dashboard'
 
-  let container: HTMLElement;
-  let plugin: DashboardPlugin<M, B>;
+  let container: HTMLElement
+  let plugin: DashboardPlugin<M, B>
 
-  export let uppy: Uppy<M, B>;
-  export let props: Object | undefined = {};
-  export let plugins: string[] = [];
+  export let uppy: Uppy<M, B>
+  export let props: Object | undefined = {}
+  export let plugins: string[] = []
 
   const installPlugin = () => {
     const options = {
       id: 'svelte:Dashboard',
       inline: true,
       plugins,
       ...props,
-      target: container
+      target: container,
     }
 
-    uppy.use(DashboardPlugin, options);
-    plugin = uppy.getPlugin(options.id) as DashboardPlugin<M, B>;
+    uppy.use(DashboardPlugin, options)
+    plugin = uppy.getPlugin(options.id) as DashboardPlugin<M, B>
   }
   const uninstallPlugin = (uppyInstance: Uppy<M, B> = uppy) => {
-    if (plugin != null) uppyInstance.removePlugin(plugin);
+    if (plugin != null) uppyInstance.removePlugin(plugin)
   }
 
   onMount(() => installPlugin())
@@ -35,9 +38,10 @@
       inline: true,
       plugins,
       ...props,
-      target: container
+      target: container,
     }
     uppy.setOptions(options)
   }
 </script>
-<div class="uppy-Container" bind:this={container} />
+
+<div class="uppy-Container" bind:this={container}></div>

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

@@ -0,0 +1,58 @@
+<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<M, B>
+
+  export let uppy: Uppy<M, B>
+  export let props: Object | undefined = {}
+  export let open: boolean
+  let lastOpen: boolean = open
+
+  export let plugins: string[] = []
+
+  const installPlugin = () => {
+    const options = {
+      id: 'svelte:DashboardModal',
+      plugins,
+      ...props,
+      target: container,
+    }
+
+    uppy.use(DashboardPlugin, options)
+    plugin = uppy.getPlugin(options.id) as DashboardPlugin<M, B>
+    if (open) plugin.openModal()
+  }
+  const uninstallPlugin = (uppyInstance: Uppy<M, B> = uppy) => {
+    if (plugin != null) uppyInstance.removePlugin(plugin)
+  }
+
+  onMount(() => installPlugin())
+
+  onDestroy(() => uninstallPlugin())
+  $: {
+    const options = {
+      id: 'svelte:DashboardModal',
+      plugins,
+      ...props,
+      target: container,
+    }
+    uppy.setOptions(options)
+  }
+  $: {
+    if (open && !lastOpen) {
+      plugin.openModal()
+    }
+    if (!open && lastOpen) {
+      plugin.closeModal()
+    }
+    lastOpen = open
+  }
+</script>
+
+<div class="uppy-Container" bind:this={container}></div>