Skip to content

Commit ae1cdac

Browse files
WesleyBatistaWesleyBatista
authored
Add SvelteKit Example (#684)
* Add SvelteKit Example * package-lock.json
1 parent 0e90726 commit ae1cdac

24 files changed

+18983
-15267
lines changed

‎apps/sveltekit-app/.eslintignore

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
10+
# Ignore files for PNPM, NPM and YARN
11+
pnpm-lock.yaml
12+
package-lock.json
13+
yarn.lock

‎apps/sveltekit-app/.eslintrc.cjs

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/** @type { import("eslint").Linter.Config } */
2+
module.exports = {
3+
root: true,
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'plugin:svelte/recommended',
8+
'prettier'
9+
],
10+
parser: '@typescript-eslint/parser',
11+
plugins: ['@typescript-eslint'],
12+
parserOptions: {
13+
sourceType: 'module',
14+
ecmaVersion: 2020,
15+
extraFileExtensions: ['.svelte']
16+
},
17+
env: {
18+
browser: true,
19+
es2017: true,
20+
node: true
21+
},
22+
overrides: [
23+
{
24+
files: ['*.svelte'],
25+
parser: 'svelte-eslint-parser',
26+
parserOptions: {
27+
parser: '@typescript-eslint/parser'
28+
}
29+
}
30+
]
31+
};

‎apps/sveltekit-app/.gitignore

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
vite.config.js.timestamp-*
10+
vite.config.ts.timestamp-*

‎apps/sveltekit-app/.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
engine-strict=true

‎apps/sveltekit-app/.prettierignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Ignore files for PNPM, NPM and YARN
2+
pnpm-lock.yaml
3+
package-lock.json
4+
yarn.lock

‎apps/sveltekit-app/.prettierrc

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"useTabs": true,
3+
"singleQuote": true,
4+
"trailingComma": "none",
5+
"printWidth": 100,
6+
"plugins": ["prettier-plugin-svelte"],
7+
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
8+
}

‎apps/sveltekit-app/README.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# create-svelte
2+
3+
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
4+
5+
## Creating a project
6+
7+
If you're seeing this, you've probably already done this step. Congrats!
8+
9+
```bash
10+
# create a new project in the current directory
11+
npm create svelte@latest
12+
13+
# create a new project in my-app
14+
npm create svelte@latest my-app
15+
```
16+
17+
## Developing
18+
19+
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20+
21+
```bash
22+
npm run dev
23+
24+
# or start the server and open the app in a new browser tab
25+
npm run dev -- --open
26+
```
27+
28+
## Building
29+
30+
To create a production version of your app:
31+
32+
```bash
33+
npm run build
34+
```
35+
36+
You can preview the production build with `npm run preview`.
37+
38+
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

‎apps/sveltekit-app/package.json

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "sveltekit-app",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite dev",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"test": "npm run test:integration && npm run test:unit",
10+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
11+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
12+
"lint": "prettier --check . && eslint .",
13+
"format": "prettier --write .",
14+
"test:integration": "playwright test",
15+
"test:unit": "vitest"
16+
},
17+
"devDependencies": {
18+
"@ffmpeg/ffmpeg": "*",
19+
"@ffmpeg/util": "*",
20+
"@playwright/test": "^1.41.2",
21+
"@sveltejs/adapter-auto": "^3.1.1",
22+
"@sveltejs/kit": "^2.5.0",
23+
"@sveltejs/vite-plugin-svelte": "^3.0.2",
24+
"@tsconfig/node18": "^18.2.2",
25+
"@types/eslint": "8.56.2",
26+
"@typescript-eslint/eslint-plugin": "^6.21.0",
27+
"@typescript-eslint/parser": "^6.21.0",
28+
"eslint": "^8.56.0",
29+
"eslint-config-prettier": "^9.1.0",
30+
"eslint-plugin-svelte": "^2.35.1",
31+
"prettier": "^3.2.5",
32+
"prettier-plugin-svelte": "^3.1.2",
33+
"svelte": "^4.2.10",
34+
"svelte-check": "^3.6.4",
35+
"tslib": "^2.6.2",
36+
"typescript": "^5.3.3",
37+
"vite": "^5.1.1",
38+
"vitest": "^1.2.2"
39+
},
40+
"type": "module"
41+
}

‎apps/sveltekit-app/playwright.config.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import type { PlaywrightTestConfig } from '@playwright/test';
2+
3+
const config: PlaywrightTestConfig = {
4+
webServer: {
5+
command: 'npm run build && npm run preview',
6+
port: 4173
7+
},
8+
testDir: 'tests',
9+
testMatch: /(.+\.)?(test|spec)\.[jt]s/
10+
};
11+
12+
export default config;

‎apps/sveltekit-app/src/app.d.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// See https://kit.svelte.dev/docs/types#app
2+
// for information about these interfaces
3+
declare global {
4+
namespace App {
5+
// interface Error {}
6+
// interface Locals {}
7+
// interface PageData {}
8+
// interface PageState {}
9+
// interface Platform {}
10+
}
11+
}
12+
13+
export {};

‎apps/sveltekit-app/src/app.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
%sveltekit.head%
8+
</head>
9+
<body data-sveltekit-preload-data="hover">
10+
<div style="display: contents">%sveltekit.body%</div>
11+
</body>
12+
</html>

‎apps/sveltekit-app/src/index.test.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { describe, it, expect } from 'vitest';
2+
3+
describe('sum test', () => {
4+
it('adds 1 + 2 to equal 3', () => {
5+
expect(1 + 2).toBe(3);
6+
});
7+
});

‎apps/sveltekit-app/src/lib/FFmpegDemo.svelte

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<script lang="ts">
2+
import { FFmpeg } from '@ffmpeg/ffmpeg';
3+
// @ts-ignore
4+
import type { LogEvent } from '@ffmpeg/ffmpeg/dist/esm/types';
5+
import { fetchFile, toBlobURL } from '@ffmpeg/util';
6+
7+
let videoEl: HTMLVideoElement;
8+
9+
const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/esm';
10+
const videoURL = 'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi';
11+
12+
let message = 'Click Start to Transcode';
13+
14+
async function transcode() {
15+
const ffmpeg = new FFmpeg();
16+
message = 'Loading ffmpeg-core.js';
17+
ffmpeg.on('log', ({ message: msg }: LogEvent) => {
18+
message = msg;
19+
console.log(message);
20+
});
21+
await ffmpeg.load({
22+
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
23+
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
24+
workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript')
25+
});
26+
message = 'Start transcoding';
27+
await ffmpeg.writeFile('test.avi', await fetchFile(videoURL));
28+
await ffmpeg.exec(['-i', 'test.avi', 'test.mp4']);
29+
message = 'Complete transcoding';
30+
const data = await ffmpeg.readFile('test.mp4');
31+
console.log('done');
32+
videoEl.src = URL.createObjectURL(
33+
new Blob([(data as Uint8Array).buffer], { type: 'video/mp4' })
34+
);
35+
}
36+
</script>
37+
38+
<div>
39+
<!-- svelte-ignore a11y-media-has-caption -->
40+
<video bind:this={videoEl} controls />
41+
<br />
42+
<button on:click={transcode}>Start</button>
43+
<p>{message}</p>
44+
</div>

‎apps/sveltekit-app/src/lib/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// place files you want to import through the `$lib` alias in this folder.

‎apps/sveltekit-app/src/routes/+page.svelte

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script lang="ts">
2+
import FFmpegDemo from '../lib/FFmpegDemo.svelte';
3+
</script>
4+
5+
<h1>Welcome to SvelteKit</h1>
6+
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
7+
<FFmpegDemo></FFmpegDemo>

‎apps/sveltekit-app/static/favicon.png

1.53 KB
Loading

‎apps/sveltekit-app/svelte.config.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import adapter from '@sveltejs/adapter-auto';
2+
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
3+
4+
/** @type {import('@sveltejs/kit').Config} */
5+
const config = {
6+
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
7+
// for more information about preprocessors
8+
preprocess: vitePreprocess(),
9+
10+
kit: {
11+
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
12+
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
13+
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
14+
adapter: adapter()
15+
}
16+
};
17+
18+
export default config;

‎apps/sveltekit-app/tests/test.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { expect, test } from '@playwright/test';
2+
3+
test('index page has expected h1', async ({ page }) => {
4+
await page.goto('/');
5+
await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
6+
});

‎apps/sveltekit-app/tsconfig.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"extends": "./.svelte-kit/tsconfig.json",
3+
"compilerOptions": {
4+
"allowJs": true,
5+
"checkJs": true,
6+
"esModuleInterop": true,
7+
"forceConsistentCasingInFileNames": true,
8+
"resolveJsonModule": true,
9+
"skipLibCheck": true,
10+
"sourceMap": true,
11+
"strict": true,
12+
"moduleResolution": "bundler"
13+
}
14+
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
15+
//
16+
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
17+
// from the referenced tsconfig.json - TypeScript does not merge them in
18+
}

‎apps/sveltekit-app/vite.config.ts

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { sveltekit } from '@sveltejs/kit/vite';
2+
import { fileURLToPath, URL } from 'node:url'
3+
import { defineConfig } from 'vitest/config';
4+
5+
/** @type {import('vite').Plugin} */
6+
const viteServerConfig = {
7+
name: 'log-request-middleware',
8+
configureServer(server) {
9+
server.middlewares.use((req, res, next) => {
10+
res.setHeader("Access-Control-Allow-Origin", "*");
11+
res.setHeader("Access-Control-Allow-Methods", "GET");
12+
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
13+
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
14+
next();
15+
});
16+
}
17+
};
18+
19+
20+
export default defineConfig({
21+
plugins: [sveltekit(), viteServerConfig],
22+
test: {
23+
include: ['src/**/*.{test,spec}.{js,ts}']
24+
},
25+
resolve: {
26+
alias: {
27+
'@': fileURLToPath(new URL('./src', import.meta.url))
28+
}
29+
},
30+
optimizeDeps: {
31+
exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util']
32+
},
33+
server: {
34+
headers: {
35+
'Cross-Origin-Opener-Policy': 'same-origin',
36+
'Cross-Origin-Embedder-Policy': 'require-corp'
37+
},
38+
fs: {
39+
allow: ['../..']
40+
}
41+
}
42+
});

‎apps/website/assets/sveltekit-vite.xcf

53.5 KB
Binary file not shown.

‎apps/website/docs/getting-started/examples.md

+8
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,13 @@ any of the examples.
5353
url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/nextjs-app"
5454
/>
5555
</Grid>
56+
<Grid xs={12} sm={6} md={6} lg={6} xl={4}>
57+
<ExampleCard
58+
img="/img/sveltekit-vite.png"
59+
title="SvelteKit + Vite"
60+
desc="SvelteKit with Vite (multithread version)"
61+
url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/sveltekit-vite-app"
62+
/>
63+
</Grid>
5664
</Grid>
5765
</MuiThemeProvider>

‎apps/website/static/img/sveltekit-vite.png

22.1 KB
Loading

0 commit comments

Comments
 (0)