diff --git a/.prettierignore b/.prettierignore
index ce46d1cd4..d8404c980 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -4,5 +4,6 @@ node_modules/
*.cjs
*.mjs
!private/js2ts/*
+!examples/svelte-example/*
*.lock
CHANGELOG.md
diff --git a/examples/svelte-example/.gitignore b/examples/svelte-example/.gitignore
index 97888f66c..8c39b2ae7 100644
--- a/examples/svelte-example/.gitignore
+++ b/examples/svelte-example/.gitignore
@@ -1,6 +1,12 @@
/node_modules/
/uploads/
-/public/build/
.DS_Store
-package-lock.json
\ No newline at end of file
+/build/
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/examples/svelte-example/README.md b/examples/svelte-example/README.md
index 2e1b7e12e..957e96796 100644
--- a/examples/svelte-example/README.md
+++ b/examples/svelte-example/README.md
@@ -13,5 +13,5 @@ corepack yarn build
Then, again in the **repository root**, start this example by doing:
```sh
-corepack yarn workspace @uppy-example/svelte-app start
+corepack yarn workspace @uppy-example/svelte-app dev
```
diff --git a/examples/svelte-example/package.json b/examples/svelte-example/package.json
index 767bfba0a..003d7ed23 100644
--- a/examples/svelte-example/package.json
+++ b/examples/svelte-example/package.json
@@ -2,41 +2,36 @@
"name": "@uppy-example/svelte-app",
"version": "0.0.0",
"scripts": {
- "build": "rollup -c",
- "serve": "sirv public",
- "start:client": "rollup -c -w",
- "start:server": "node ./server.mjs",
- "start": "npm-run-all --parallel start:client start:server",
- "validate": "svelte-check"
+ "dev": "npm-run-all --parallel dev:frontend dev:backend",
+ "dev:frontend": "vite dev",
+ "dev:backend": "node --watch ./server.js",
+ "build": "vite build",
+ "preview": "vite preview",
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
},
"devDependencies": {
- "@rollup/plugin-commonjs": "^22.0.0",
- "@rollup/plugin-json": "^4.1.0",
- "@rollup/plugin-node-resolve": "^13.0.0",
- "@rollup/plugin-typescript": "^8.0.0",
- "@tsconfig/svelte": "^1.0.0",
+ "@sveltejs/adapter-static": "^3.0.1",
+ "@sveltejs/kit": "^2.0.0",
+ "@sveltejs/vite-plugin-svelte": "^3.0.0",
+ "@types/formidable": "^3",
"npm-run-all": "^4.1.5",
- "postcss": "^8.4.31",
- "postcss-import": "^13.0.0",
- "postcss-load-config": "^3.0.0",
- "rollup": "^2.60.2",
- "rollup-plugin-css-only": "^3.0.0",
- "rollup-plugin-livereload": "^2.0.0",
- "rollup-plugin-svelte": "^7.0.0",
- "rollup-plugin-terser": "^7.0.0",
- "svelte": ">=3.24.0",
- "svelte-check": "^1.6.0",
- "svelte-preprocess": "^5.0.0",
- "tslib": "^2.0.0",
- "typescript": "~5.4"
+ "svelte": "^4.2.7",
+ "svelte-check": "^3.6.0",
+ "tslib": "^2.4.1",
+ "typescript": "~5.4",
+ "vite": "^5.0.0"
},
"dependencies": {
"@uppy/core": "workspace:*",
+ "@uppy/dashboard": "workspace:*",
+ "@uppy/drag-drop": "workspace:*",
+ "@uppy/progress-bar": "workspace:*",
"@uppy/svelte": "workspace:*",
"@uppy/webcam": "workspace:*",
"@uppy/xhr-upload": "workspace:*",
- "formidable": "^2.0.1",
- "sirv-cli": "^1.0.0"
+ "formidable": "^3.5.1"
},
+ "type": "module",
"private": true
}
diff --git a/examples/svelte-example/postcss.config.js b/examples/svelte-example/postcss.config.js
deleted file mode 100644
index 0483ffe0b..000000000
--- a/examples/svelte-example/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
- plugins: [
- // eslint-disable-next-line global-require
- require('postcss-import')(),
- ],
-}
diff --git a/examples/svelte-example/public/global.css b/examples/svelte-example/public/global.css
deleted file mode 100644
index 619a92f33..000000000
--- a/examples/svelte-example/public/global.css
+++ /dev/null
@@ -1,68 +0,0 @@
-html,
-body {
- position: relative;
- width: 100%;
- height: 100%;
-}
-
-body {
- color: #333;
- margin: 0;
- padding: 8px;
- box-sizing: border-box;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
- Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
-}
-
-a {
- color: rgb(0, 100, 200);
- text-decoration: none;
-}
-
-a:hover {
- text-decoration: underline;
-}
-
-a:visited {
- color: rgb(0, 80, 160);
-}
-
-label {
- display: block;
-}
-
-input,
-button,
-select,
-textarea {
- font-family: inherit;
- font-size: inherit;
- -webkit-padding: 0.4em 0;
- padding: 0.4em;
- margin: 0 0 0.5em 0;
- box-sizing: border-box;
- border: 1px solid #ccc;
- border-radius: 2px;
-}
-
-input:disabled {
- color: #ccc;
-}
-
-button {
- color: #333;
- background-color: #f4f4f4;
- outline: none;
-}
-
-button:disabled {
- color: #999;
-}
-
-button:not(:disabled):active {
- background-color: #ddd;
-}
-
-button:focus {
- border-color: #666;
-}
diff --git a/examples/svelte-example/public/index.html b/examples/svelte-example/public/index.html
deleted file mode 100644
index 2b86c9286..000000000
--- a/examples/svelte-example/public/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
-
-
- Svelte app
-
-
-
-
-
-
-
-
-
diff --git a/examples/svelte-example/rollup.config.js b/examples/svelte-example/rollup.config.js
deleted file mode 100644
index 848c0d0e4..000000000
--- a/examples/svelte-example/rollup.config.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import svelte from 'rollup-plugin-svelte'
-import commonjs from '@rollup/plugin-commonjs'
-import resolve from '@rollup/plugin-node-resolve'
-import livereload from 'rollup-plugin-livereload'
-import { terser } from 'rollup-plugin-terser'
-import sveltePreprocess from 'svelte-preprocess'
-import typescript from '@rollup/plugin-typescript'
-import css from 'rollup-plugin-css-only'
-
-const production = !process.env.ROLLUP_WATCH
-
-function serve () {
- let server
-
- function toExit () {
- if (server) server.kill(0)
- }
-
- return {
- writeBundle () {
- if (server) return
- // eslint-disable-next-line global-require
- server = require('node:child_process').spawn('npm', ['run', 'serve', '--', '--dev'], {
- stdio: ['ignore', 'inherit', 'inherit'],
- shell: true,
- })
-
- process.on('SIGTERM', toExit)
- process.on('exit', toExit)
- },
- }
-}
-
-export default {
- input: 'src/main.ts',
- output: {
- sourcemap: true,
- format: 'iife',
- name: 'app',
- file: 'public/build/bundle.js',
- },
- plugins: [
- svelte({
- preprocess: sveltePreprocess({
- postcss: true,
- }),
- compilerOptions: {
- // enable run-time checks when not in production
- dev: !production,
- },
- }),
- // we'll extract any component CSS out into
- // a separate file - better for performance
- css({ output: 'bundle.css' }),
-
- // If you have external dependencies installed from
- // npm, you'll most likely need these plugins. In
- // some cases you'll need additional configuration -
- // consult the documentation for details:
- // https://github.com/rollup/plugins/tree/master/packages/commonjs
- resolve({
- browser: true,
- dedupe: ['svelte', '@uppy/core'],
- }),
- commonjs(),
- typescript({
- sourceMap: !production,
- inlineSources: !production,
- }),
-
- // In dev mode, call `npm run start` once
- // the bundle has been generated
- !production && serve(),
-
- // Watch the `public` directory and refresh the
- // browser on changes when not in production
- !production && livereload('public'),
-
- // If we're building for production (npm run build
- // instead of npm run dev), minify
- production && terser(),
- ],
- watch: {
- clearScreen: false,
- },
-}
diff --git a/examples/svelte-example/server.js b/examples/svelte-example/server.js
new file mode 100755
index 000000000..c86090335
--- /dev/null
+++ b/examples/svelte-example/server.js
@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+
+/* eslint-disable no-console */
+
+import http from 'node:http'
+import { fileURLToPath } from 'node:url'
+import { mkdir } from 'node:fs/promises'
+
+import formidable from 'formidable'
+
+const UPLOAD_DIR = new URL('./uploads/', import.meta.url)
+
+await mkdir(UPLOAD_DIR, { recursive: true })
+
+http
+ .createServer((req, res) => {
+ const headers = {
+ 'Content-Type': 'application/json',
+ 'Access-Control-Allow-Origin': '*',
+ 'Access-Control-Allow-Methods': 'OPTIONS, POST, GET',
+ 'Access-Control-Max-Age': 2592000, // 30 days
+ /** add other headers as per requirement */
+ }
+
+ if (req.method === 'OPTIONS') {
+ res.writeHead(204, headers)
+ res.end()
+ return
+ }
+ if (req.url === '/upload' && req.method.toLowerCase() === 'post') {
+ // parse a file upload
+ const form = formidable({
+ keepExtensions: true,
+ uploadDir: fileURLToPath(UPLOAD_DIR),
+ })
+
+ form.parse(req, (err, fields, files) => {
+ res.writeHead(200, headers)
+ if (err) {
+ console.log('some error', err)
+ res.write(JSON.stringify(err))
+ } else {
+ for (const {
+ filepath,
+ originalFilename,
+ mimetype,
+ size,
+ } of files.files) {
+ console.log('saved file', {
+ filepath,
+ originalFilename,
+ mimetype,
+ size,
+ })
+ }
+ res.write(JSON.stringify({ fields, files }))
+ }
+ res.end()
+ })
+ }
+ })
+ .listen(9967, () => {
+ console.log('server started')
+ })
diff --git a/examples/svelte-example/server.mjs b/examples/svelte-example/server.mjs
deleted file mode 100755
index 2cfbd9556..000000000
--- a/examples/svelte-example/server.mjs
+++ /dev/null
@@ -1,52 +0,0 @@
-#!/usr/bin/env node
-
-/* eslint-disable no-console */
-
-import http from 'node:http'
-import { fileURLToPath } from 'node:url'
-import { mkdir } from 'node:fs/promises'
-
-import formidable from 'formidable'
-
-const UPLOAD_DIR = new URL('./uploads/', import.meta.url)
-
-await mkdir(UPLOAD_DIR, { recursive: true })
-
-http.createServer((req, res) => {
- const headers = {
- 'Content-Type': 'application/json',
- 'Access-Control-Allow-Origin': '*',
- 'Access-Control-Allow-Methods': 'OPTIONS, POST, GET',
- 'Access-Control-Max-Age': 2592000, // 30 days
- /** add other headers as per requirement */
- }
-
- if (req.method === 'OPTIONS') {
- res.writeHead(204, headers)
- res.end()
- return
- }
- if (req.url === '/upload' && req.method.toLowerCase() === 'post') {
- // parse a file upload
- const form = formidable({
- keepExtensions: true,
- uploadDir: fileURLToPath(UPLOAD_DIR),
- })
-
- form.parse(req, (err, fields, files) => {
- if (err) {
- console.log('some error', err)
- res.writeHead(200, headers)
- res.write(JSON.stringify(err))
- return res.end()
- }
- const { files: { filepath, originalFilename, mimetype, size } } = files
- console.log('saved file', { filepath, originalFilename, mimetype, size })
- res.writeHead(200, headers)
- res.write(JSON.stringify({ fields, files }))
- return res.end()
- })
- }
-}).listen(9967, () => {
- console.log('server started')
-})
diff --git a/examples/svelte-example/src/app.d.ts b/examples/svelte-example/src/app.d.ts
new file mode 100644
index 000000000..367926a58
--- /dev/null
+++ b/examples/svelte-example/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+ namespace App {
+ // interface Error {}
+ // interface Locals {}
+ // interface PageData {}
+ // interface PageState {}
+ // interface Platform {}
+ }
+}
+
+export {}
diff --git a/examples/svelte-example/src/app.html b/examples/svelte-example/src/app.html
new file mode 100644
index 000000000..e39ebf140
--- /dev/null
+++ b/examples/svelte-example/src/app.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+ %sveltekit.head%
+
+
+ %sveltekit.body%
+
+
diff --git a/examples/svelte-example/src/main.ts b/examples/svelte-example/src/main.ts
deleted file mode 100644
index d6bce1ad7..000000000
--- a/examples/svelte-example/src/main.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import App from './App.svelte'
-
-const app = new App({
- target: document.body,
-})
-
-export default app
diff --git a/examples/svelte-example/src/routes/+layout.ts b/examples/svelte-example/src/routes/+layout.ts
new file mode 100644
index 000000000..7f52afb88
--- /dev/null
+++ b/examples/svelte-example/src/routes/+layout.ts
@@ -0,0 +1,6 @@
+import '@uppy/core/dist/style.min.css'
+import '@uppy/dashboard/dist/style.min.css'
+import '@uppy/drag-drop/dist/style.min.css'
+import '@uppy/progress-bar/dist/style.min.css'
+
+export const ssr = false
diff --git a/examples/svelte-example/src/App.svelte b/examples/svelte-example/src/routes/+page.svelte
similarity index 79%
rename from examples/svelte-example/src/App.svelte
rename to examples/svelte-example/src/routes/+page.svelte
index daf1450ee..90c2753d0 100644
--- a/examples/svelte-example/src/App.svelte
+++ b/examples/svelte-example/src/routes/+page.svelte
@@ -14,7 +14,7 @@
}
let uppy1 = createUppy()
- let uppy2 = createUppy()
+ let uppy2 = createUppy()
let open = false;
let showInlineDashboard = true;
@@ -31,7 +31,7 @@
Show Dashboard
{#if showInlineDashboard}
-
@@ -39,23 +39,23 @@
Modal Dashboard
- open = false,
plugins: ['Webcam']
- }}
+ }}
/>
Drag Drop Area
-
Progress Bar
-