Skip to content

Add SvelteKit Example #684

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions apps/sveltekit-app/.eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example

# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock
31 changes: 31 additions & 0 deletions apps/sveltekit-app/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/** @type { import("eslint").Linter.Config } */
module.exports = {
root: true,
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:svelte/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
extraFileExtensions: ['.svelte']
},
env: {
browser: true,
es2017: true,
node: true
},
overrides: [
{
files: ['*.svelte'],
parser: 'svelte-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser'
}
}
]
};
10 changes: 10 additions & 0 deletions apps/sveltekit-app/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
1 change: 1 addition & 0 deletions apps/sveltekit-app/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
engine-strict=true
4 changes: 4 additions & 0 deletions apps/sveltekit-app/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock
8 changes: 8 additions & 0 deletions apps/sveltekit-app/.prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}
38 changes: 38 additions & 0 deletions apps/sveltekit-app/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# create-svelte

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
41 changes: 41 additions & 0 deletions apps/sveltekit-app/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
{
"name": "sveltekit-app",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"test": "npm run test:integration && npm run test:unit",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write .",
"test:integration": "playwright test",
"test:unit": "vitest"
},
"devDependencies": {
"@ffmpeg/ffmpeg": "*",
"@ffmpeg/util": "*",
"@playwright/test": "^1.41.2",
"@sveltejs/adapter-auto": "^3.1.1",
"@sveltejs/kit": "^2.5.0",
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"@tsconfig/node18": "^18.2.2",
"@types/eslint": "8.56.2",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
"prettier": "^3.2.5",
"prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.10",
"svelte-check": "^3.6.4",
"tslib": "^2.6.2",
"typescript": "^5.3.3",
"vite": "^5.1.1",
"vitest": "^1.2.2"
},
"type": "module"
}
12 changes: 12 additions & 0 deletions apps/sveltekit-app/playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
webServer: {
command: 'npm run build && npm run preview',
port: 4173
},
testDir: 'tests',
testMatch: /(.+\.)?(test|spec)\.[jt]s/
};

export default config;
13 changes: 13 additions & 0 deletions apps/sveltekit-app/src/app.d.ts
Original file line number Diff line number Diff line change
@@ -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 {};
12 changes: 12 additions & 0 deletions apps/sveltekit-app/src/app.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
7 changes: 7 additions & 0 deletions apps/sveltekit-app/src/index.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { describe, it, expect } from 'vitest';

describe('sum test', () => {
it('adds 1 + 2 to equal 3', () => {
expect(1 + 2).toBe(3);
});
});
44 changes: 44 additions & 0 deletions apps/sveltekit-app/src/lib/FFmpegDemo.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<script lang="ts">
import { FFmpeg } from '@ffmpeg/ffmpeg';
// @ts-ignore
import type { LogEvent } from '@ffmpeg/ffmpeg/dist/esm/types';
import { fetchFile, toBlobURL } from '@ffmpeg/util';

let videoEl: HTMLVideoElement;

const baseURL = 'https://unpkg.com/@ffmpeg/[email protected]/dist/esm';
const videoURL = 'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi';

let message = 'Click Start to Transcode';

async function transcode() {
const ffmpeg = new FFmpeg();
message = 'Loading ffmpeg-core.js';
ffmpeg.on('log', ({ message: msg }: LogEvent) => {
message = msg;
console.log(message);
});
await ffmpeg.load({
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript')
});
message = 'Start transcoding';
await ffmpeg.writeFile('test.avi', await fetchFile(videoURL));
await ffmpeg.exec(['-i', 'test.avi', 'test.mp4']);
message = 'Complete transcoding';
const data = await ffmpeg.readFile('test.mp4');
console.log('done');
videoEl.src = URL.createObjectURL(
new Blob([(data as Uint8Array).buffer], { type: 'video/mp4' })
);
}
</script>

<div>
<!-- svelte-ignore a11y-media-has-caption -->
<video bind:this={videoEl} controls />
<br />
<button on:click={transcode}>Start</button>
<p>{message}</p>
</div>
1 change: 1 addition & 0 deletions apps/sveltekit-app/src/lib/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.
7 changes: 7 additions & 0 deletions apps/sveltekit-app/src/routes/+page.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<script lang="ts">
import FFmpegDemo from '../lib/FFmpegDemo.svelte';
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<FFmpegDemo></FFmpegDemo>
Binary file added apps/sveltekit-app/static/favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions apps/sveltekit-app/svelte.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import adapter from '@sveltejs/adapter-auto';
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;
6 changes: 6 additions & 0 deletions apps/sveltekit-app/tests/test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { expect, test } from '@playwright/test';

test('index page has expected h1', async ({ page }) => {
await page.goto('/');
await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
});
18 changes: 18 additions & 0 deletions apps/sveltekit-app/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"moduleResolution": "bundler"
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//
// 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
}
42 changes: 42 additions & 0 deletions apps/sveltekit-app/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vitest/config';

/** @type {import('vite').Plugin} */
const viteServerConfig = {
name: 'log-request-middleware',
configureServer(server) {
server.middlewares.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "GET");
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
next();
});
}
};


export default defineConfig({
plugins: [sveltekit(), viteServerConfig],
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
optimizeDeps: {
exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util']
},
server: {
headers: {
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp'
},
fs: {
allow: ['../..']
}
}
});
Binary file added apps/website/assets/sveltekit-vite.xcf
Binary file not shown.
8 changes: 8 additions & 0 deletions apps/website/docs/getting-started/examples.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,5 +53,13 @@ any of the examples.
url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/nextjs-app"
/>
</Grid>
<Grid xs={12} sm={6} md={6} lg={6} xl={4}>
<ExampleCard
img="/img/sveltekit-vite.png"
title="SvelteKit + Vite"
desc="SvelteKit with Vite (multithread version)"
url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/sveltekit-vite-app"
/>
</Grid>
</Grid>
</MuiThemeProvider>
Binary file added apps/website/static/img/sveltekit-vite.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading