Guide

架构总览

本章从整体视角介绍 TSone 的分层架构与运行时数据流，帮助您在深入各子系统之前建立全局认识。

设计目标

轻量：核心包运行时零外部依赖，只依赖浏览器标准 DOM 接口
面向对象：以类组件与明确的对象关系组织框架与业务代码
策略化渲染：渲染行为按 VNode 类型分发到独立策略，新增能力只需扩展策略
Bun 原生：开发、测试、构建与文档均由 Bun 驱动

分层架构

TSone 运行时自顶向下分为应用层、组件层、渲染层与运行时基础设施，并配套独立的 Bun 原生工具链：

应用层（App Layer）

createApp() 创建 OneApp 实例，是应用的唯一入口，负责：

挂载根组件，并把 AppContext（config、version、router）注入根组件
通过 use(plugin) 安装插件，并在应用生命周期内回调插件钩子
提供全局 provide/inject 与全局状态、配置
通过 renderHtmlDocument() 生成 HTML 文档壳，供 CLI 的 dev/build 产出入口页面

组件层（Component Layer）

所有 UI 通过继承 Component<Props, State> 的类组件表达。组件持有响应式 state、局部 styleManager 与 templateEngine，在 render(): VNode 中声明 UI 结构，并接入完整生命周期、事件（emit/on）、依赖注入与错误边界。

渲染层（Render Layer）

RendererContext 按策略模式把 VNode 分发给文本、元素、组件、插槽与过渡组五种渲染策略，统一提供 mount / patch / unmount 入口。组件更新时对新旧 VNode 执行差异更新，把变化收敛为最小 DOM 操作。

运行时基础设施（Runtime Infrastructure）

ReactiveSystem：基于 Proxy 的依赖收集与派发，配合 ReactiveScheduler 将同一批状态变更合并为一次重渲染
Router：路由匹配、history/hash 模式、重定向与导航守卫，RouterView 渲染匹配到的组件
StyleManager：每个组件一个实例，把样式规则编译为 CSS 文本并注入 <style> 元素

工具链（Toolchain）

@geektech/tsone-cli 提供 tsone dev、tsone build 与开发代理，通过 tsone.config.ts 配置。它复用框架的 renderHtmlDocument() 生成入口页面，并借助 DOM-like document 在服务端完成组件树的首次渲染。

运行时数据流

挂载流程

createApp 创建 OneApp，mount() 解析挂载点并创建根组件实例
根组件初始化响应式 state、样式与模板引擎，调用 beforeMount 后执行 render() 得到 VNode
RendererContext 按策略把 VNode 挂载到真实 DOM，随后触发 onMounted
插件与全局状态在应用层注入，组件通过 getContext() 与 router getter 访问全局能力

更新流程

组件 state 是响应式对象，render 期间访问的属性会被收集为组件 updateEffect 的依赖。修改 state 时，ReactiveScheduler 将 updateEffect 放入微任务队列批量执行：重跑 render() 得到新 VNode，再由 RendererContext 完成 DOM 差异更新。需要同步读取最新 DOM 时使用 flushSync()，或在异步代码中 await nextTick()。

卸载流程

unmount 沿 VNode 树递归执行：先触发 beforeUnmount，再卸载子组件、清理事件与插槽、销毁 styleManager 与模板绑定、停止 updateEffect，最后触发 onUnmounted。

设计模式与对象关系

框架按 SOLID 原则组织，类与模块之间保持了明确的对象关系：

模式	位置	说明
策略模式	RendererContext → RenderStrategy	渲染行为按 VNode 类型分发，新增渲染能力只需实现策略
单例模式	ReactiveSystem.getInstance()	全局唯一的依赖收集与派发中心
观察者模式	effect / updateEffect + ReactiveScheduler	状态变化自动调度组件重渲染
组合	Component 持有 StyleManager、TemplateEngine	样式与模板能力按需组合进组件
依赖注入	app.provide / component.provide + inject	能力沿组件父链向上解析，组件与提供方解耦
实现	RenderStrategy 接口 + 五个策略类	渲染策略依赖抽象接口而非具体实现

发布面与包结构

TSone 的发布面保持小而清晰：

@geektech/tsone：核心 API（createApp、Component、reactive 系列、VNode、renderHtmlDocument、StyleSheet、Transition、TransitionGroup、KeepAlive）
@geektech/tsone/router：createRouter、Router、RouterView、RouterLink、useRouter
@geektech/tsone-cli：defineConfig、tsone dev、tsone build 与开发代理

总结

TSone 用「应用 → 组件 → 渲染」的纵向分层组织运行时，用响应式、路由与样式管理三个基础设施横向支撑各层。接下来可继续阅读核心概念、组件系统、响应式系统、路由系统与样式管理查看具体实现。