Extreme 是一个极小的运行时框架，它的目标是提供一个极小的框架，让初学者可以快速入门，了解一个框架的基本结构。目前来讲，Extreme更像是一个玩具框架，它的功能非常有限，但是它的代码量非常少，非常适合初学者入门。
- 编译时
- 响应性更新
- 事件系统
- 事件绑定
- 事件流
- 批量渲染 :for
- 批量更新
- 批量细粒度响应性
- 条件渲染 :if
- 条件渲染
- 条件更新
- 生命周期
- useMount
- useUpdated
- ...
- 依赖收集
- 依赖收集
- 依赖更新
- 调度渲染
- 异步渲染
- 调度更新
- 服务端渲染
- Diff算法
- 插件系统
- 路由
- 状态管理
- 单元测试
- 性能测试
- 文档
- 社区
- 生态
- 发布
pnpm create vite my-project --template vanilla-ts
pnpm add @sourcebug/extreme
pnpm add @sourcebug/vite-extreme-plugin html-minifier -D- 新增
vite.config.ts
import { defineConfig } from "vite";
import { rawMinifyPlugin } from "@sourcebug/vite-extreme-plugin";
export default defineConfig(() => ({
plugins: [rawMinifyPlugin()],
}));首先清理掉所有Vite初始化的代码，然后开始创建目录，现在你的目录应该是这样的：
- src
- components
- main
- index.ts
- index.html
- index.ts
- main.ts接着我们填内容：
- 在
main.ts中：
import { Main } from "./components";
Main(document.getElementById("main")!, {});别急，我们还没有创建Main组件，现在我们先创建一个这样的目录：
- 在
components/main/index.ts中：
import { createComponent, useState } from "@sourcebug/extreme";
import template from "./index.html?raw";
export const Main = createComponent("Main", () => {
const [count, setCount] = useState(0);
return {
template,
state: {
count,
},
methods: {
increment: () => setCount(count() + 1),
decrement: () => setCount(count() - 1),
},
};
});- 在
components/main/index.html中：
<div>
<h1>Count: {{ count }}</h1>
<button @click="{{increment}}">Increment</button>
<button @click="{{decrement}}">Decrement</button>
</div>- 在
components/index.ts中：
export * from "./main";敬佩，我没有做初始化脚手架的工作，而屏幕前的你居然真的手搭了一个启动项目，了不起。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent