在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

sveltejs/svelte

菜单

概述

相关源文件

本文档全面介绍了 Svelte 框架仓库，解释了其架构、关键组件以及它们之间的交互方式。Svelte 是一个基于组件的 UI 框架，它将声明式组件编译成高效的 JavaScript，用于渲染 Web 应用程序。与大多数工作在浏览器中的传统框架不同，Svelte 将大部分工作转移到编译步骤，从而生成高度优化的代码。

有关项目文件结构和组织的详细信息，请参阅 项目结构。有关开发入门指南，请参阅 入门指南。

核心架构

Svelte 由几个关键系统组成，它们协同工作，将组件定义转换为高效的 DOM 操作。

编译器和运行时概述

Svelte 框架包含两个主要系统：

  1. 编译器：将 .svelte 组件文件转换为优化的 JavaScript 代码。
  2. 运行时：一个小型库，负责管理响应性、DOM 更新和组件生命周期。

开发人员在 .svelte 文件中编写组件，编译器会将这些文件转换为纯 JavaScript。这些优化的代码使用 Svelte 运行时，在状态更改时高效地更新 DOM。

来源：packages/svelte/package.json，README.md

编译管道

编译器在三个主要阶段进行操作：

  1. 解析阶段：将 .svelte 组件代码转换为抽象语法树 (AST)。
  2. 分析阶段：验证组件，跟踪作用域，并执行静态分析。
  3. 转换阶段：为客户端和服务器环境生成优化的 JavaScript 代码，以及作用域 CSS。

输出包括用于客户端渲染、服务器渲染和带有作用域隔离的优化 CSS 的独立代码。

来源：packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js

响应式系统

Svelte 的响应性系统围绕“runes”构建——类似 `$state`、`$derived`、`$effect` 和 `$props` 的特殊函数，它们编译成精细的响应性系统。当状态发生变化时，更改会流经系统：

  1. 响应式源（状态和属性）触发更新。
  2. 派生值在依赖项更改时重新计算。
  3. 效果在依赖项更改时运行。
  4. 调度程序将 DOM 更新打包以提高效率。

该系统为开发人员提供了简单的思维模型，同时在底层实现了高性能渲染。

来源：packages/svelte/CHANGELOG.md，documentation/docs/02-runes/07-$inspect.md

组件编译和渲染

Svelte 中的组件遵循特定的编译和渲染过程：

  1. 编译：组件被解析为 AST，然后进行验证、分析和转换为优化代码。
  2. 挂载：当组件挂载到 DOM 时，它会创建模板、设置属性、附加事件并设置绑定。
  3. 水合：对于服务器渲染的组件，客户端运行时会“水合”现有的 HTML，附加事件处理程序并重新建立响应性。
  4. 效果：执行效果以设置响应式关系。
  5. 卸载：组件可以干净地移除，并带有可选的过渡效果。

该框架会验证 HTML 结构，确保组件符合标准，同时提供有用的错误消息。

来源：packages/svelte/src/internal/server/payload.js，packages/svelte/src/internal/server/dev.js

服务器端渲染和水合

Svelte 支持服务器端渲染 (SSR) 和客户端水合。

  1. 服务器渲染：组件在服务器上渲染为 HTML 字符串。
  2. 载荷生成：创建包含状态和 CSS 的水合载荷。
  3. 水合：客户端运行时“水合” HTML，附加事件处理程序并重新建立响应性。

该框架在服务器渲染期间跟踪元素命名空间（HTML、SVG、MathML）并验证 HTML 结构，从而防止服务器和客户端渲染之间的水合不匹配。

来源：packages/svelte/src/internal/server/payload.js，packages/svelte/src/internal/server/dev.js，packages/svelte/tests/runtime-runes/samples/svg-namespace-if-block-3/_config.js

基于 Rune 的响应性

Svelte 的响应性建立在一个“runes”系统之上——定义响应式行为的特殊函数。

  1. $state()：声明响应式状态变量。
  2. $derived()：创建当依赖项更改时会自动更新的值。
  3. $effect()：在依赖项更改时运行副作用。
  4. $props()：声明组件属性，这些属性可以是响应式的。
  5. $inspect()：提供调试工具，如 $inspect.trace()。

当组件渲染时，这些 runes 会建立一个响应性图，跟踪依赖关系并在状态更改时高效地更新 DOM。

来源：packages/svelte/CHANGELOG.md，documentation/docs/02-runes/07-$inspect.md

版本和包信息

Svelte 目前版本为 5.27.0，如源代码所示。该框架专为现代浏览器和 Node.js 环境而设计（需要 Node.js 18+）。该包暴露了各种模块：

模块目的
svelte用于客户端和服务器渲染的核心包。
svelte/compiler编译器特定功能。
svelte/reactivity响应性原语（$state、$derived 等）。
svelte/storeStore 管理工具。
svelte/transition过渡效果
svelte/animate动画工具
svelte/motion运动工具（Spring、Tween）。
svelte/server服务器端渲染工具。
svelte/elementsTypeScript 的 HTML 元素类型。

该框架采用基于模块的架构，客户端和服务器代码之间有清晰的划分，允许在打包时进行高效的 tree-shaking。

来源：packages/svelte/package.json，packages/svelte/src/version.js

错误处理与验证

Svelte 在编译和运行时提供全面的错误处理和验证。

  1. 编译错误：捕获无效语法、可访问性问题，并提供修复提示。
  2. 运行时警告：检测潜在问题，如在错误上下文中进行突变。
  3. HTML 验证：确保组件遵循正确的 HTML 嵌套规则。
  4. 可访问性检查：验证 ARIA 属性和语义化 HTML 用法。

对于服务器端渲染，该框架会验证 HTML 结构和命名空间，防止服务器端和客户端渲染之间的水合不匹配。

来源：packages/svelte/src/internal/server/dev.js，packages/svelte/tests/validator/samples/invalid-self-closing-tag/warnings.json

核心理念

Svelte 的架构建立在几个关键原则之上：

  1. 编译时优化：将工作转移到构建时，以减少运行时开销。
  2. 精细响应性：在变量级别跟踪依赖关系，实现精确更新。
  3. 以 DOM 为中心的方法：直接操作 DOM，而不是使用虚拟 DOM diffing。
  4. 开发者体验：专注于清晰的错误消息和直观的 API。
  5. 渐进增强：支持带客户端水合的服务器渲染。

这些原则指导着编译器和运行时设计，创建了一个优先考虑性能同时保持开发人员生产力的框架。

来源：README.md，packages/svelte/README.md