🚀 一个简单、易上手、数据驱动的前端框架。

Languages: English

为什么要开发 Viewfly？现在前端开发基本都围绕三大框架，也有一些更多的新星框架在圈内引起了大量关注，要在这种基础之上再推陈出新，无疑是非常困难的事情。

不过，它们都太复杂了，有的创建组件要写很多样板代码，有的需要特殊的语法或编译，有的不方便与 TypeScript 集成，有的有闭包陷阱等等。这给了 Viewfly 推出的契机。

• 官方文档：https://viewfly.org
• 文档源码（VitePress）：位于 packages/docs；克隆仓库后可用 npm run docs:dev 本地阅读，npm run docs:build 构建静态站点（产物在 packages/docs/.vitepress/dist）。
• 本仓库：Viewfly 各 npm 包与示例工程的源码（pnpm monorepo）。若你只想做业务开发，通常只需安装下方 npm 包，不必克隆本仓库。

• 在本仓库中开发：Node ^20.19.0 || >=22.12.0，包管理器 pnpm（版本见根目录 package.json 的 packageManager）。
• 在业务项目中：以满足 Vite / TypeScript 与所安装的 @viewfly/* 版本为准。

npm install -g @viewfly/cli
viewfly create my-app
cd my-app
npm run dev

说明见 @viewfly/cli（English）。也可用 npx @viewfly/cli create my-app 避免全局安装。

npm install @viewfly/core @viewfly/platform-browser

JSX / TSX：在 tsconfig.json 中启用 automatic JSX runtime，并将来源指向 Viewfly（与 React 的 jsxImportSource 用法相同，仅包名不同）：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@viewfly/core"
  }
}

使用 Babel 时，将 @babel/preset-react 设为 runtime: "automatic" 且 importSource: "@viewfly/core"。

依赖注入相关能力依赖 reflect-metadata。从 @viewfly/core 主入口导入时会随模块加载初始化；若拆包导致异常，可在应用入口最前增加 import 'reflect-metadata'（详见 @viewfly/core，English）。

最小挂载示例：

import { reactive } from '@viewfly/core'
import { createApp } from '@viewfly/platform-browser'

const model = reactive({ count: 0 })

function App() {
  return () => <div>{model.count}</div>
}

createApp(<App />).mount(document.getElementById('app')!)

（英文说明：仓库根 README.en.md；各 @viewfly/* 包见对应目录下的 README.en.md。）

路由与 scoped CSS 均为可选；scoped CSS 需 @viewfly/core（如 withMark）与 @viewfly/devtools 配合，细节见 devtools 包 README。

本仓库为 pnpm workspace，请先安装 pnpm，再执行：

pnpm install
pnpm dev

默认启动 @viewfly/playground。构建全部可发布的子包：

pnpm run build

其余脚本见根目录 package.json 的 scripts。

若你愿意支持 Viewfly 的持续维护，可通过下方二维码表达支持。

MIT