/extreme

a extreme frontend framework

Primary LanguageLess


Extreme

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

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

⚙️ Powered by Vite

TypeScript 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. 体积

extreme

2. 渲染性能

extreme