Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/grinzero/extreme
a extreme frontend framework
https://github.com/grinzero/extreme
extreme framework frontend small typescript vite
Last synced: 27 days ago
JSON representation
a extreme frontend framework
- Host: GitHub
- URL: https://github.com/grinzero/extreme
- Owner: GrinZero
- Created: 2023-11-09T17:41:15.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-03T05:07:22.000Z (10 months ago)
- Last Synced: 2024-04-24T08:14:38.254Z (8 months ago)
- Topics: extreme, framework, frontend, small, typescript, vite
- Language: Less
- Homepage:
- Size: 530 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Extreme
🚀 体积极小的纯运行时框架
🪀 作为一个玩具框架存在，框架源码初学者入门可选
⚙️ Powered by Vite
---
## 📖 介绍
Extreme 是一个极小的运行时框架，它的目标是提供一个极小的框架，让初学者可以快速入门，了解一个框架的基本结构。目前来讲，Extreme更像是一个玩具框架，它的功能非常有限，但是它的代码量非常少，非常适合初学者入门。
## 🎮 TODO
- [ ] 编译时
- [x] 响应性更新
- [ ] 事件系统
- [x] 事件绑定
- [ ] 事件流
- [x] 批量渲染 :for
- [x] 批量更新
- [x] 批量细粒度响应性
- [x] 条件渲染 :if
- [x] 条件渲染
- [x] 条件更新
- [x] 生命周期
- [x] useMount
- [ ] useUpdated
- [ ] ...
- [x] 依赖收集
- [x] 依赖收集
- [x] 依赖更新
- [ ] 调度渲染
- [x] 异步渲染
- [ ] 调度更新
- [ ] 服务端渲染
- [ ] Diff算法
- [ ] 插件系统
- [ ] 路由
- [ ] 状态管理
- [ ] 单元测试
- [x] 性能测试
- [ ] 文档
- [ ] 社区
- [ ] 生态
- [ ] 发布
## 📦 快速开始
### 1. 安装
```bash
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`
```ts
import { defineConfig } from "vite";
import { rawMinifyPlugin } from "@sourcebug/vite-extreme-plugin";
export default defineConfig(() => ({
plugins: [rawMinifyPlugin()],
}));
```
### 3. 使用
首先清理掉所有Vite初始化的代码，然后开始创建目录，现在你的目录应该是这样的：
```ts
- src
- components
- main
- index.ts
- index.html
- index.ts
- main.ts
```
接着我们填内容：
- 在`main.ts`中：
```ts
import { Main } from "./components";
Main(document.getElementById("main")!, {});
```
别急，我们还没有创建`Main`组件，现在我们先创建一个这样的目录：
- 在`components/main/index.ts`中：
```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`中：
```html
Count: {{ count }}
Increment
Decrement
```
- 在`components/index.ts`中：
```ts
export * from "./main";
```
### 4, 点赞
敬佩，我没有做初始化脚手架的工作，而屏幕前的你居然真的手搭了一个启动项目，了不起。
## 🪄 性能
### 1. 体积
[]()
### 2. 渲染性能
[]()