sveltekit

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SvelteKit Development

SvelteKit 开发

You are an expert in SvelteKit, TypeScript, Tailwind CSS, and modern web application development.

您是SvelteKit、TypeScript、Tailwind CSS以及现代Web应用开发领域的专家。

Key Principles

核心原则

Write concise, technical SvelteKit code with accurate TypeScript examples
Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (isLoading, hasError)
Structure files: component logic, markup, styles, helpers, types

编写简洁、技术规范的SvelteKit代码，附带准确的TypeScript示例
使用函数式和声明式编程模式；避免使用类
优先选择迭代和模块化，而非代码重复
使用带有辅助动词的描述性变量名（如isLoading、hasError）
文件结构：组件逻辑、标记、样式、工具函数、类型定义

Project Structure

项目结构

src/
├── lib/
│   ├── components/     # Reusable Svelte components
│   ├── server/         # Server-only utilities
│   ├── stores/         # Svelte stores
│   └── utils/          # Shared utilities
├── routes/
│   ├── +layout.svelte  # Root layout
│   ├── +page.svelte    # Home page
│   └── api/            # API routes
├── app.html            # HTML template
└── app.css             # Global styles

src/
├── lib/
│   ├── components/     # 可复用Svelte组件
│   ├── server/         # 仅服务端工具
│   ├── stores/         # Svelte状态存储
│   └── utils/          # 共享工具函数
├── routes/
│   ├── +layout.svelte  # 根布局
│   ├── +page.svelte    # 首页
│   └── api/            # API路由
├── app.html            # HTML模板
└── app.css             # 全局样式

Component Development

组件开发

Script Setup with TypeScript

TypeScript脚本设置

svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import type { PageData } from './$types';

  export let data: PageData;

  let count = 0;
  $: doubled = count * 2;

  function increment() {
    count += 1;
  }
</script>

svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import type { PageData } from './$types';

  export let data: PageData;

  let count = 0;
  $: doubled = count * 2;

  function increment() {
    count += 1;
  }
</script>

Props and Events

属性与事件

svelte

<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  export let title: string;
  export let disabled = false;

  const dispatch = createEventDispatcher<{
    submit: { value: string };
  }>();

  function handleSubmit() {
    dispatch('submit', { value: title });
  }
</script>

svelte

<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  export let title: string;
  export let disabled = false;

  const dispatch = createEventDispatcher<{
    submit: { value: string };
  }>();

  function handleSubmit() {
    dispatch('submit', { value: title });
  }
</script>

Routing

路由

File-Based Routes

基于文件的路由

routes/
├── +page.svelte          # /
├── about/+page.svelte    # /about
├── blog/
│   ├── +page.svelte      # /blog
│   └── [slug]/
│       └── +page.svelte  # /blog/:slug

routes/
├── +page.svelte          # /
├── about/+page.svelte    # /about
├── blog/
│   ├── +page.svelte      # /blog
│   └── [slug]/
│       └── +page.svelte  # /blog/:slug

Dynamic Routes

动态路由

svelte

<!-- routes/blog/[slug]/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types';
  export let data: PageData;
</script>

<h1>{data.post.title}</h1>

svelte

<!-- routes/blog/[slug]/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types';
  export let data: PageData;
</script>

<h1>{data.post.title}</h1>

Load Functions

加载函数

typescript

// +page.server.ts
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, fetch }) => {
  const response = await fetch(`/api/posts/${params.slug}`);
  const post = await response.json();

  return { post };
};

typescript

// +page.server.ts
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, fetch }) => {
  const response = await fetch(`/api/posts/${params.slug}`);
  const post = await response.json();

  return { post };
};

SSR and SSG

SSR与SSG

Server-Side Rendering

服务端渲染

typescript

// +page.server.ts
export const ssr = true;
export const csr = true;

export const load: PageServerLoad = async ({ locals }) => {
  return {
    user: locals.user
  };
};

typescript

// +page.server.ts
export const ssr = true;
export const csr = true;

export const load: PageServerLoad = async ({ locals }) => {
  return {
    user: locals.user
  };
};

Static Generation

静态生成

typescript

// +page.ts
export const prerender = true;

export async function load() {
  return {
    // Static data
  };
}

typescript

// +page.ts
export const prerender = true;

export async function load() {
  return {
    // 静态数据
  };
}

Prerendering Dynamic Routes

动态路由预渲染

typescript

// +page.server.ts
export const prerender = true;

export async function entries() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

typescript

// +page.server.ts
export const prerender = true;

export async function entries() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

Form Actions

表单操作

typescript

// +page.server.ts
import type { Actions } from './$types';

export const actions: Actions = {
  default: async ({ request, cookies }) => {
    const data = await request.formData();
    const email = data.get('email');

    // Validate and process
    if (!email) {
      return { success: false, error: 'Email required' };
    }

    return { success: true };
  }
};

svelte

<!-- +page.svelte -->
<script lang="ts">
  import { enhance } from '$app/forms';
  import type { ActionData } from './$types';

  export let form: ActionData;
</script>

<form method="POST" use:enhance>
  <input name="email" type="email" />
  <button type="submit">Subscribe</button>
  {#if form?.error}
    <p class="error">{form.error}</p>
  {/if}
</form>

typescript

// +page.server.ts
import type { Actions } from './$types';

export const actions: Actions = {
  default: async ({ request, cookies }) => {
    const data = await request.formData();
    const email = data.get('email');

    // 验证与处理
    if (!email) {
      return { success: false, error: '需要填写邮箱' };
    }

    return { success: true };
  }
};

svelte

<!-- +page.svelte -->
<script lang="ts">
  import { enhance } from '$app/forms';
  import type { ActionData } from './$types';

  export let form: ActionData;
</script>

<form method="POST" use:enhance>
  <input name="email" type="email" />
  <button type="submit">订阅</button>
  {#if form?.error}
    <p class="error">{form.error}</p>
  {/if}
</form>

State Management

状态管理

Svelte Stores

Svelte状态存储

typescript

// lib/stores/counter.ts
import { writable, derived } from 'svelte/store';

export const count = writable(0);
export const doubled = derived(count, ($count) => $count * 2);

export function increment() {
  count.update((n) => n + 1);
}

typescript

// lib/stores/counter.ts
import { writable, derived } from 'svelte/store';

export const count = writable(0);
export const doubled = derived(count, ($count) => $count * 2);

export function increment() {
  count.update((n) => n + 1);
}

Page Store

页面存储

svelte

<script lang="ts">
  import { page } from '$app/stores';

  $: currentPath = $page.url.pathname;
  $: params = $page.params;
</script>

svelte

<script lang="ts">
  import { page } from '$app/stores';

  $: currentPath = $page.url.pathname;
  $: params = $page.params;
</script>

API Routes

API路由

typescript

// routes/api/posts/+server.ts
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ url }) => {
  const limit = url.searchParams.get('limit') ?? '10';
  const posts = await getPosts(Number(limit));

  return json(posts);
};

export const POST: RequestHandler = async ({ request }) => {
  const body = await request.json();
  const post = await createPost(body);

  return json(post, { status: 201 });
};

typescript

// routes/api/posts/+server.ts
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ url }) => {
  const limit = url.searchParams.get('limit') ?? '10';
  const posts = await getPosts(Number(limit));

  return json(posts);
};

export const POST: RequestHandler = async ({ request }) => {
  const body = await request.json();
  const post = await createPost(body);

  return json(post, { status: 201 });
};

Styling with Tailwind

使用Tailwind进行样式设计

svelte

<div class="flex flex-col gap-4 p-6">
  <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
    {title}
  </h1>
  <p class="text-gray-600 dark:text-gray-300">
    {description}
  </p>
</div>

<style>
  /* Scoped styles when needed */
  :global(.prose) {
    @apply max-w-none;
  }
</style>

svelte

<div class="flex flex-col gap-4 p-6">
  <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
    {title}
  </h1>
  <p class="text-gray-600 dark:text-gray-300">
    {description}
  </p>
</div>

<style>
  <!-- 需要时使用作用域样式 -->
  :global(.prose) {
    @apply max-w-none;
  }
</style>

Error Handling

错误处理

svelte

<!-- +error.svelte -->
<script lang="ts">
  import { page } from '$app/stores';
</script>

<h1>{$page.status}</h1>
<p>{$page.error?.message}</p>

typescript

// +page.server.ts
import { error } from '@sveltejs/kit';

export const load: PageServerLoad = async ({ params }) => {
  const post = await getPost(params.slug);

  if (!post) {
    throw error(404, 'Post not found');
  }

  return { post };
};

svelte

<!-- +error.svelte -->
<script lang="ts">
  import { page } from '$app/stores';
</script>

<h1>{$page.status}</h1>
<p>{$page.error?.message}</p>

typescript

// +page.server.ts
import { error } from '@sveltejs/kit';

export const load: PageServerLoad = async ({ params }) => {
  const post = await getPost(params.slug);

  if (!post) {
    throw error(404, '文章未找到');
  }

  return { post };
};

Performance Optimization

性能优化

Use
```
{#key}
```
blocks for component recreation
Implement lazy loading with dynamic imports
Use
```
$effect.pre
```
for DOM measurements
Optimize images with
```
@sveltejs/enhanced-img
```
Prefetch links with
```
data-sveltekit-preload-data
```

使用
```
{#key}
```
块实现组件重建
通过动态导入实现懒加载
使用
```
$effect.pre
```
进行DOM测量
使用
```
@sveltejs/enhanced-img
```
优化图片
使用
```
data-sveltekit-preload-data
```
预加载链接

Testing

测试

typescript

// Component testing with Vitest
import { render, screen } from '@testing-library/svelte';
import { expect, test } from 'vitest';
import Button from './Button.svelte';

test('renders button with text', () => {
  render(Button, { props: { label: 'Click me' } });
  expect(screen.getByRole('button')).toHaveTextContent('Click me');
});

typescript

// 使用Vitest进行组件测试
import { render, screen } from '@testing-library/svelte';
import { expect, test } from 'vitest';
import Button from './Button.svelte';

test('渲染带文本的按钮', () => {
  render(Button, { props: { label: '点击我' } });
  expect(screen.getByRole('button')).toHaveTextContent('点击我');
});

Accessibility

可访问性

Use semantic HTML elements
Add ARIA labels where needed
Ensure keyboard navigation
Test with screen readers
Maintain focus management

使用语义化HTML元素
必要时添加ARIA标签
确保键盘可导航
使用屏幕阅读器测试
维护焦点管理