examples: add SvelteKit example (#5181)

.prettierignore

@@ -4,5 +4,6 @@ node_modules/
 *.cjs
 *.mjs
 !private/js2ts/*
+!examples/svelte-example/*
 *.lock
 CHANGELOG.md

examples/svelte-example/.gitignore

@@ -1,6 +1,12 @@
 /node_modules/
 /uploads/
-/public/build/
 
 .DS_Store
-package-lock.json
+/build/
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

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
 ```

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
 }

examples/svelte-example/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: [
-    // eslint-disable-next-line global-require
-    require('postcss-import')(),
-  ],
-}

examples/svelte-example/public/global.css

@@ -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;
-}

examples/svelte-example/public/index.html

@@ -1,16 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-
-    <title>Svelte app</title>
-
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/build/bundle.css" />
-    <script defer src="/build/bundle.js"></script>
-  </head>
-
-  <body></body>
-</html>

examples/svelte-example/rollup.config.js

@@ -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,
-  },
-}

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')
+  })

examples/svelte-example/server.mjs

@@ -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')
-})

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 {}

examples/svelte-example/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <app style="display: contents">%sveltekit.body%</app>
+  </body>
+</html>

examples/svelte-example/src/main.ts

@@ -1,7 +0,0 @@
-import App from './App.svelte'
-
-const app = new App({
-  target: document.body,
-})
-
-export default app

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

examples/svelte-example/src/App.svelte → 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
 	</label>
 	{#if showInlineDashboard}
-		<Dashboard 
+		<Dashboard
 			uppy={uppy1}
 			plugins={['Webcam']}
 		/>
@@ -39,23 +39,23 @@
 	<h2>Modal Dashboard</h2>
 	<div>
 		<button on:click={() => open = true}>Show Dashboard</button>
-		<DashboardModal 
-			uppy={uppy2} 
-			open={open} 
+		<DashboardModal
+			uppy={uppy2}
+			open={open}
 			props={{
 				onRequestCloseModal: () => open = false,
 				plugins: ['Webcam']
-			}} 
+			}}
 		/>
 	</div>
 
 	<h2>Drag Drop Area</h2>
-	<DragDrop 
+	<DragDrop
 		uppy={uppy1}
 	/>
 
 	<h2>Progress Bar</h2>
-	<ProgressBar 
+	<ProgressBar
 		uppy={uppy1}
 		props={{
 			hideAfterFinish: false
@@ -63,10 +63,6 @@
 	/>
 </main>
 <style global>
-	@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";
 	input[type="checkbox"] {
 		user-select: none;
 	}

examples/svelte-example/svelte.config.js

@@ -0,0 +1,20 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import adapter from '@sveltejs/adapter-static'
+// eslint-disable-next-line import/no-unresolved
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+
+  kit: {
+    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    adapter: adapter(),
+  },
+}
+
+export default config

examples/svelte-example/tsconfig.json

@@ -1,7 +1,20 @@
 {
-  "extends": "@tsconfig/svelte/tsconfig.json",
-  "compilerOptions": {},
-  "esModuleInterop": true,
-  "include": ["src/**/*"],
-  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+  },
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+  // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
 }

examples/svelte-example/vite.config.ts

@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/no-unresolved
+import { sveltekit } from '@sveltejs/kit/vite'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [sveltekit()],
+})