Extreme

🚀 体积极小的纯运行时框架

🪀 作为一个玩具框架存在，框架源码初学者入门可选

⚙️ Powered by Vite

---

📖 介绍

Extreme 是一个极小的运行时框架，它的目标是提供一个极小的框架，让初学者可以快速入门，了解一个框架的基本结构。目前来讲，Extreme更像是一个玩具框架，它的功能非常有限，但是它的代码量非常少，非常适合初学者入门。

🎮 TODO

• 编译时
• 响应性更新
• 事件系统
  • 事件绑定
  • 事件流
• 批量渲染 :for
  • 批量更新
  • 批量细粒度响应性
• 条件渲染 :if
  • 条件渲染
  • 条件更新
• 生命周期
  • useMount
  • useUpdated
  • ...
• 依赖收集
  • 依赖收集
  • 依赖更新
• 调度渲染
  • 异步渲染
  • 调度更新
• 服务端渲染
• Diff算法
• 插件系统
• 路由
• 状态管理
• 单元测试
• 性能测试
• 文档
• 社区
• 生态
• 发布

📦 快速开始

1. 安装

pnpm create vite my-project --template vanilla-ts
pnpm add @sourcebug/extreme 
pnpm add @sourcebug/vite-extreme-plugin html-minifier -D

2. 配置

• 新增vite.config.ts

import { defineConfig } from "vite";
import { rawMinifyPlugin } from "@sourcebug/vite-extreme-plugin";

export default defineConfig(() => ({
  plugins: [rawMinifyPlugin()],
}));

3. 使用

首先清理掉所有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";

4, 点赞

敬佩，我没有做初始化脚手架的工作，而屏幕前的你居然真的手搭了一个启动项目，了不起。

🪄 性能

1. 体积

2. 渲染性能