DuoTS

一个纯面向对象 + 类式组件 + AST 驱动的跨端 TypeScript 前端框架。

零运行时依赖，仅需 TypeScript 编译。核心逻辑与平台完全解耦，同一套 VDOM / 组件 / 响应式系统可运行在 DOM（浏览器）、Canvas（自绘）、字符串（SSR） 三种平台。

模板指令以 d- 为前缀（呼应 DuoTS 之名），事件 #、属性绑定 ^、双向绑定 ^^、插槽 &，另有 d-switch / d-lazy 等一批创意指令。文档站 duopress 由本框架自举实现（SPA + 教学指南 + 实景演示 + 五语言），支持 dev 网页启动与打包后启动。

快速开始

1. 脚手架

npm create duots-neo@latest my-app        # 对话式创建（TS/JS/TSX/JSX + scss/less/css）
cd my-app
npm install
npm run dev                           # 打开 http://localhost:4848/（HMR 热更新）
npm run build:prod                    # 生产打包 → dist/（压缩、可独立部署）

2. 直接用源码

npm install
npm run build        # 编译到 dist/
npm test             # 616 项自动化测试（14 套件：核心/指令/响应式/路由/状态/网络/IoC/AOP/水合/冒烟/回归…）

3. 文档站

node docs/build.mjs && node docs/serve.mjs docs-dist 4175   # 打开 http://localhost:4175/

特性一览

| 维度 | 说明 | | --- | --- | | 🧱 响应式系统 | Dep / Effect / Reactive / Ref / Computed / Watcher，全部面向对象；Map/Set/WeakMap/WeakSet 全类型响应式；computed 支持 setter；Effect 异常安全；批量更新微任务合并（一轮状态变更只触发一次渲染） | | 🌊 深浅响应式 | ref / reactive / computed / watch / watchEffect 之外，支持 shallowRef / shallowReactive（只代理顶层，适合大型对象/第三方实例）；toRaw / unref / $ 前缀字段响应式约定 | | 🏷 类式组件 | class X extends Component，$ 前缀字段才响应式（普通字段静态不触发更新，适合大体量数据），getter 即计算属性；static props 对象格式自动应用默认值；props 支持构造参数 / @Prop / useProps() 三种写法 | | ⚡ 函数式组件 | 轻量函数 (props, ctx) => VNode，可返回 Fragment 多根，可 SSR；支持 useState 等 Hooks 与手动调度器 | | 📄 .duo 单文件 | template / script / style 一体组件：类式糖 / 对象糖 / setup 糖（.duo 内可直接书写类体，类名取自文件名）；compileDuo 或 duots compile | | 🚀 无 VDOM | 组件级 static noVdom / 应用级 { noVdom: true }：细粒度绑定直接更新 DOM | | 🎀 装饰器 | @DuoComponent / @Prop / @Watch / @Emit / @Inject / @Provide，声明式选项 + DI | | ⚛️ JSX / TSX | 零依赖 JSX 工厂 + react-jsx 运行时（tsconfig 标准配置值），render() 返回 JSX | | 🌳 AST 编译器 | 模板字符串 → 词法/语法解析 → 抽象语法树（ElementNode / TextNode / InterpolationNode / 指令节点）→ 渲染函数 | | ⚛️ VDOM | VNode 类 + 4 种 diff 算法自适应（双端+LIS / 双指针 / Keyed Map / 顺序 patch）+ 开发环境自动 benchmark + 编译时静态提升 + ShapeFlags 补丁标记 + 块级动态子节点优化 + VNode 对象池化 + 事件委托 | | 🪄 指令体系 | 事件 #click="fn" · 属性绑定 ^value="x" · 双向绑定 ^^model="x"（含 .trim 修饰）· 插槽 &name · 指令 d-if / d-for / d-show / d-model / d-html / d-text / d-bind / d-on / d-slot / d-ref / d-key / d-transition / d-keep-alive / d-error-boundary / d-lazy / d-cloak；创意指令 d-switch / d-case / d-default、d-teleport、d-suspense | | 🌍 跨端渲染器 | RendererHost 抽象接口，内置 DOM / Canvas / 字符串（SSR）三套宿主 | | 💉 IoC 容器 | useService / provide / inject / @injectable；构造自动装配（emitDecoratorMetadata 类型反射，无需注解自动注入）、@Inject 显式令牌、三种提供者、循环依赖检测 | | 🎭 AOP | 框架级切面：自定义拦截日志 / 持久化 / 控制台输出，与 IoC 联动 | | 🗄 duo-store | 全局状态二合一：组合式 Store（useStore / defineStore）与服务式状态（useService）；持久化（默认关闭，persist 选项开启） | | 🌐 duo-net | 网络服务：方法式 API × 拦截器（请求/响应拦截，基于 fetch 零依赖）；http.request / get / post 等 + createHttp | | ⚡ duo-sse / duo-socket | createSSE 服务端事件流、createSocket WebSocket 封装，覆盖不同网络形态 | | 🧭 duo-router | hash / history 双模式：路径参数、命名路由、导航守卫、RouterView / RouterLink（^to 绑定） | | 🪝 Hooks | useState / useMemo / useCallback / useThrottle / useDebounce / useNow / useTime / useRandom / useCounter / useToggle / useCountdown / useLocalStorage / useClipboard / useEventListener / useInterval / useTimeout / useWatch / useWatchEffect / useNextTick / useForceUpdate / useEl / useRefs / useProps / useSlots / useEmit / useAttrs / useInject / useProvide 等 30+ | | 🧰 工具函数 | formatDate / formatTime / formatDateTime / formatChineseDate / timeAgo / countdown / debounce / throttle / randomInt / clamp / deepClone / deepMerge / pick / omit / uuid / copyText / downloadFile / toQueryString / paginate / paginateRange / isMobile 等 | | 🪄 自定义指令/注解 | 自定义指令注册 + 自定义注解（annotations），框架级扩展点 | | 🔌 插件与全局 | app.use(plugin) 安装第三方/UI 库插件；app.component(name, comp) 全局注册（大驼峰 + 烤串别名）；app.config.globalProperties 全局属性 | | ⚙️ 工程配置 | duots.config.ts：端口自定义 / 本地代理 proxy / 自动打开 / history 回退；duots analyze 依赖分析 + tree-shaking 按需引入（sideEffects: false，未用功能自动移除） | | 📦 打包 | duots build --minify 生产压缩；chunk 分包（多 JS 包，加快首屏）；duots build 可独立部署 dist | | 🏗 duots CLI | duots create（对话式/全参数）TS / JS / TSX / JSX + scss/less/css；duots make 生成组件/页面/Store；duots compile 预编译 .duo；duots analyze 依赖分析；duots duopress 文档站工具；duots plugin 插件管理 | | 📚 duopress | 文档站脚手架（duopress create / page / build / dev / serve）：Markdown 自动发现（frontmatter 元数据）、五语言 i18n、教学指南（左学右练）、实景演示、全文搜索、樱花粉主题、dev 热更新 | | 🔌 VSCode 插件 | duots.duots-vscode（Open VSX 上架）：.duo 语法高亮（含 #/^/^^/&/d-）、! 类式组件模板 / !! 函数式组件模板快捷生成、代码片段、.duo 图标；安装：duots plugin install 或商店搜索 | | ⚡ 调度器 | 手动调度器 + useState 精细化更新；微任务批量刷新 + nextTick | | 🌐 语言 | 文档站五语言：简体中文 / English / 日本語 / 한국어 / Русский，语言持久化 |

指令速查

| 语法 | 说明 | 示例 | | --- | --- | --- | | #事件 | 事件绑定 | <button #click="inc()">+1</button> | | ^属性 | 单向属性绑定 | <input ^value="name" /> | | ^^model | 双向绑定（modelValue 协议） | <input ^^model="name" />，支持 ^^model.trim | | &插槽 | 具名插槽 | <template &header>…</template> | | d-if / d-else-if / d-else | 条件渲染 | <div d-if="$ok">…</div> | | d-for | 列表渲染 | <li d-for="item in list" ^key="item.id"> | | d-show | 显隐切换 | <div d-show="$open"> | | d-model | 表单双向 | <input d-model="form.name" /> | | d-switch / d-case / d-default | 多分支切换 | <div d-switch="$state">…<div d-case="'a'"> | | d-html / d-text | 富文本 / 文本插值 | <p d-html="$html"> | | d-lazy / d-cloak | 懒挂载 / 防闪烁 | <img d-lazy="url"> | | d-transition / d-keep-alive / d-error-boundary / d-teleport / d-suspense | 高级能力 | 见文档站对应章节 | | {{ }} | 插值 | <span>{{ $count * 2 }}</span> |

目录结构

duots-neo/
├── src/                # 框架核心（compiler / vdom / runtime / reactivity / hooks / router / store / net / ioc / aop / duo / jsx / no-vdom / css-preprocessor / security）
├── cli/                # duots CLI + duopress（含脚手架模板 cli/templates/）
├── docs/               # 文档站源码（duopress SPA，五语言）
├── tests/              # 14 套件 616 项自动化测试
├── vscode-extension/   # .duo 语法高亮插件（Open VSX: duots.duots-vscode）
└── scripts/            # 文档 API 审计等工具脚本

安装

# npmjs 官方（默认 registry）
npm i duots-neo

# 私库（国内/内网加速）
npm i duots --registry=http://npm.duogong.top

CLI 安装（duots create 等）会自动按当前 registry 选择对应包名：私库 → duots，其余（npmjs/镜像）→ duots-neo。

发布与仓库

• npmjs 官方：duots-neo（仅 minor 版本升级发布，如 2.4.0；patch 如 2.3.24 不发布）
• npm 私库：http://npm.duogong.top（npm i duots --registry=http://npm.duogong.top，每次升级都发布）
• Gitee：https://gitee.com/jhtools/duots-neo.git（master 源码分支 / docs 分支仅存 docs-dist 打包产物）
• 文档站在线版：构建产物部署自 docs 分支

参与与测试

npm install
npx tsc -p tsconfig.json   # 0 错误
node tests/run-all.mjs     # 616 项全绿

修复或新增功能后：更新 docs/pages/* 与本文档保持同步，再 node docs/build.mjs 重建文档站。