{"id":22474853,"url":"https://github.com/grinzero/extreme","last_synced_at":"2025-10-16T11:31:35.773Z","repository":{"id":206548714,"uuid":"716705886","full_name":"GrinZero/extreme","owner":"GrinZero","description":"a extreme frontend framework","archived":false,"fork":false,"pushed_at":"2024-03-03T05:07:22.000Z","size":543,"stargazers_count":5,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-06T13:12:46.692Z","etag":null,"topics":["extreme","framework","frontend","small","typescript","vite"],"latest_commit_sha":null,"homepage":"","language":"Less","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GrinZero.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-09T17:41:15.000Z","updated_at":"2024-11-11T05:53:10.000Z","dependencies_parsed_at":"2023-11-13T18:29:55.682Z","dependency_job_id":"437fbabe-510d-40fd-af53-2d3f8d6f2d1b","html_url":"https://github.com/GrinZero/extreme","commit_stats":null,"previous_names":["grinzero/extreme"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrinZero%2Fextreme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrinZero%2Fextreme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrinZero%2Fextreme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrinZero%2Fextreme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GrinZero","download_url":"https://codeload.github.com/GrinZero/extreme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236715450,"owners_count":19193418,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["extreme","framework","frontend","small","typescript","vite"],"created_at":"2024-12-06T13:12:13.992Z","updated_at":"2025-10-16T11:31:35.769Z","avatar_url":"https://github.com/GrinZero.png","language":"Less","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1 align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/GrinZero/extreme/assets/70185413/a10b90e8-8ddf-4aef-b32c-4fb773b4f3c1\" width=\"100\" /\u003e\n    \u003cbr\u003eExtreme\u003c/h1\u003e\n\n \u003ch3 align=\"center\"\u003e🚀 体积极小的纯运行时框架 \u003c/h3\u003e\n \u003ch3 align=\"center\"\u003e🪀 作为一个玩具框架存在，框架源码初学者入门可选\u003c/h3\u003e\n \u003ch3 align=\"center\"\u003e⚙️  Powered by Vite\u003c/h3\u003e\n  \u003cp align=\"center\"\u003e\n   \u003cimg src=\"https://img.shields.io/badge/TypeScript-3178C6.svg?style=for-the-badge\u0026logo=TypeScript\u0026logoColor=white\" alt=\"TypeScript\" /\u003e\n   \u003cimg src=\"https://img.shields.io/badge/Vite-B73BFE?style=for-the-badge\u0026logo=vite\u0026logoColor=FFD62E\" alt=\"Vite\"/\u003e\n    \u003ca href=\"https://deepwiki.com/GrinZero/extreme\"\u003e\u003cimg src=\"https://deepwiki.com/badge.svg\" alt=\"Ask DeepWiki\"\u003e\u003c/a\u003e\n \u003c/p\u003e\n\n\u003c/div\u003e\n\n---\n\n## 📖 介绍\n\nExtreme 是一个极小的运行时框架，它的目标是提供一个极小的框架，让初学者可以快速入门，了解一个框架的基本结构。目前来讲，Extreme更像是一个玩具框架，它的功能非常有限，但是它的代码量非常少，非常适合初学者入门。\n\n## 🎮 TODO\n\n- [ ] 编译时\n- [x] 响应性更新  \n- [ ] 事件系统\n  - [x] 事件绑定\n  - [ ] 事件流\n- [x] 批量渲染 :for\n  - [x] 批量更新\n  - [x] 批量细粒度响应性\n- [x] 条件渲染 :if\n  - [x] 条件渲染\n  - [x] 条件更新\n- [x] 生命周期\n  - [x] useMount\n  - [ ] useUpdated\n  - [ ] ...\n- [x] 依赖收集\n  - [x] 依赖收集\n  - [x] 依赖更新\n- [ ] 调度渲染\n  - [x] 异步渲染\n  - [ ] 调度更新\n- [ ] 服务端渲染\n- [ ] Diff算法\n- [ ] 插件系统\n- [ ] 路由\n- [ ] 状态管理\n- [ ] 单元测试\n- [x] 性能测试\n- [ ] 文档\n- [ ] 社区\n- [ ] 生态\n- [ ] 发布\n\n## 📦 快速开始\n\n### 1. 安装\n\n```bash\npnpm create vite my-project --template vanilla-ts\npnpm add @sourcebug/extreme \npnpm add @sourcebug/vite-extreme-plugin html-minifier -D\n```\n\n### 2. 配置\n\n- 新增`vite.config.ts`\n\n```ts\nimport { defineConfig } from \"vite\";\nimport { rawMinifyPlugin } from \"@sourcebug/vite-extreme-plugin\";\n\nexport default defineConfig(() =\u003e ({\n  plugins: [rawMinifyPlugin()],\n}));\n```\n\n### 3. 使用\n\n首先清理掉所有Vite初始化的代码，然后开始创建目录，现在你的目录应该是这样的：\n\n```ts\n- src\n  - components\n    - main\n      - index.ts\n      - index.html\n    - index.ts\n  - main.ts\n```\n\n接着我们填内容：\n\n- 在`main.ts`中：\n\n```ts\nimport { Main } from \"./components\";\n\nMain(document.getElementById(\"main\")!, {});\n```\n\n别急，我们还没有创建`Main`组件，现在我们先创建一个这样的目录：\n\n- 在`components/main/index.ts`中：\n\n```ts\nimport { createComponent, useState } from \"@sourcebug/extreme\";\nimport template from \"./index.html?raw\";\n\nexport const Main = createComponent(\"Main\", () =\u003e {\n  const [count, setCount] = useState(0);\n\n  return {\n    template,\n    state: {\n      count,\n    },\n    methods: {\n      increment: () =\u003e setCount(count() + 1),\n      decrement: () =\u003e setCount(count() - 1),\n    },\n  };\n});\n\n```\n\n- 在`components/main/index.html`中：\n\n```html\n\u003cdiv\u003e\n  \u003ch1\u003eCount: {{ count }}\u003c/h1\u003e\n  \u003cbutton @click=\"{{increment}}\"\u003eIncrement\u003c/button\u003e\n  \u003cbutton @click=\"{{decrement}}\"\u003eDecrement\u003c/button\u003e\n\u003c/div\u003e\n```\n\n- 在`components/index.ts`中：\n\n```ts\nexport * from \"./main\";\n```\n\n### 4, 点赞\n\n敬佩，我没有做初始化脚手架的工作，而屏幕前的你居然真的手搭了一个启动项目，了不起。\n\n## 🪄 性能\n\n### 1. 体积\n\n[![extreme](https://github.com/GrinZero/extreme/assets/70185413/183d554b-a72f-4905-9c3c-00f4e0fa947a)]()\n\n### 2. 渲染性能\n\n[![extreme](https://github.com/GrinZero/extreme/assets/70185413/59693c7c-456e-4239-aded-c2521af3c3e8)]()\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrinzero%2Fextreme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrinzero%2Fextreme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrinzero%2Fextreme/lists"}