mirror of
https://github.com/transloadit/uppy.git
synced 2026-01-23 18:35:54 +00:00
examples: add SvelteKit example (#5181)
This commit is contained in:
Antoine du Hamel
GitHub
parent
469490cf8f
commit
30725ced4d
19 changed files with 383 additions and 713 deletions
|
|
@ -4,5 +4,6 @@ node_modules/
|
|||
*.cjs
|
||||
*.mjs
|
||||
!private/js2ts/*
|
||||
!examples/svelte-example/*
|
||||
*.lock
|
||||
CHANGELOG.md
|
||||
|
|
|
|||
10
examples/svelte-example/.gitignore
vendored
10
examples/svelte-example/.gitignore
vendored
|
|
@ -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-*
|
||||
|
|
|
|||
|
|
@ -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
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
module.exports = {
|
||||
plugins: [
|
||||
// eslint-disable-next-line global-require
|
||||
require('postcss-import')(),
|
||||
],
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
},
|
||||
}
|
||||
64
examples/svelte-example/server.js
Executable file
64
examples/svelte-example/server.js
Executable file
|
|
@ -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')
|
||||
})
|
||||
|
|
@ -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')
|
||||
})
|
||||
13
examples/svelte-example/src/app.d.ts
vendored
Normal file
13
examples/svelte-example/src/app.d.ts
vendored
Normal file
|
|
@ -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 {}
|
||||
11
examples/svelte-example/src/app.html
Normal file
11
examples/svelte-example/src/app.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import App from './App.svelte'
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
})
|
||||
|
||||
export default app
|
||||
6
examples/svelte-example/src/routes/+layout.ts
Normal file
6
examples/svelte-example/src/routes/+layout.ts
Normal file
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
20
examples/svelte-example/svelte.config.js
Normal file
20
examples/svelte-example/svelte.config.js
Normal file
|
|
@ -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
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
8
examples/svelte-example/vite.config.ts
Normal file
8
examples/svelte-example/vite.config.ts
Normal file
|
|
@ -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()],
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue