tiny-anything

KO | EN

gitlite — search

#javascript #python #ai #typescript #android #rust #deep-learning #nodejs #macos #cli #vue #pytorch #mcp #ios

(★ 126)

🚀 Explore the source code of the front-end library and implement a super mini version 前端轮子库，包含框架及其周边生态、工具链、插件迷你源码实现

tiny-anything Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">Welcome to tiny-anything 👋</h1>
<p>
  <img alt="Version" src="https://img.shields.io/badge/version-0.0.1-blue.svg?cacheSeconds=2592000" />
  <a href="https://sunny-117.github.io/tiny-anything/" target="_blank">
    <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
  </a>
  <a href="https://opensource.org/licenses/MIT" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
  </a>
</p>

> 🚀 tiny-anything 是一个集合了前端领域的各种迷你版本的库，方便前端学习者学习，探索前端源码。里面的库是原库的超级迷你版本，只包含原库的主流程，不包含边界 case，所以建议仅学习使用，请勿用于生产环境

<h2>💼 repo</h2>
<table>
  <thead align="center">
    <tr>
      <th>logo</th>
      <th>迷你项目名称</th>
      <th>简述</th>
      <th>技术</th>
    </tr>
  </thead>
  <tbody align="center">
    <tr>
      <th>
        <a href="http://github.com/sunny-117/tiny-vue" target="_blank">
        <img src="./img/mini-vue.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="http://github.com/sunny-117/tiny-vue" target="_blank">mini-vue3</a>
      </th>
      <th>⚡️ vue3 核心包: reactivity, compile, runtime</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="http://github.com/sunny-117/tiny-react" target="_blank">
        <img src="./img/mini-react.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="http://github.com/sunny-117/tiny-react" target="_blank">mini-react</a>
      </th>
      <th>🦋 React 核心包: core, scheduler, reconciler</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Babel-F9DC3e?style=for-the-badge&amp;logo=babel&amp;logoColor=black" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-vue-router3" target="_blank">
         <img src="./img/mini-vue.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-vue-router3" target="_blank">Vue Router3</a>
      </th>
      <th>🐝 Vue 路由 version: 3</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="#" target="_blank">
         <img src="./img/mini-vue.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-vuex4" target="_blank">Vuex</a>
      </th>
      <th>✨ Vuex 迷你实现</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-pinia" target="_blank">
        <img src="./img/pinia.svg" width="50" align="center" height="50"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-pinia" target="_blank">mini-pinia</a>
      </th>
      <th>🌸 Pinia 您将喜欢使用的 Vue 存储库</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-react-hooks" target="_blank">
        <img src="./img/ahooks.svg" width="50" align="center" height="50"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-react-hooks" target="_blank">ahooks</a>
      </th>
      <th>🦄 一套高质量可靠的 React Hooks 库</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
        <img src="https://img.shields.io/badge/React_Router-CA4245?style=flat-square&amp;logo=react-router&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Redux-593D88?style=flat-square&amp;logo=redux&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-swr" target="_blank">
        <img src="https://img0.baidu.com/it/u=3730138805,2315749868&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=232" width="50" align="center" height="50"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-swr" target="_blank">mini-swr</a>
      </th>
      <th>⚡️ 用于数据请求的 React Hooks 库</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
        <img src="https://img.shields.io/badge/React_Router-CA4245?style=flat-square&amp;logo=react-router&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-react-router4" target="_blank">
        <img src="./img/react-router.png" width="50"  alt=""/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-react-router4" target="_blank">react-router</a>
      </th>
      <th>🏎 React 中的路由</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-redux" target="_blank">
        <img src="./img/redux.svg" width="50" height="50" />
        </a>
      </th>
      <th>
        <a href="./packages/mini-redux" target="_blank">Redux</a>
      </th>
      <th>🎸 JavaScript 状态容器，提供可预测化的状态管理</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Next.js-black?style=flat-square&amp;logo=next.js&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=flat-square&amp;logo=tailwind-css&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-redux-thunk" target="_blank">
            <img src="./img/redux.svg" width="50" height="50" alt=""/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-redux-thunk" target="_blank">redux-thunk</a>
      </th>
      <th>🌍 Thunk middleware for Redux^_^</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-vuex4" target="_blank">
        <img src="./img/mini-vue.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-vuex4" target="_blank">mini-vuex4</a>
      </th>
      <th>📦 Vuex 4 状态管理库的简约实现</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-mini-vuex3" target="_blank">
        <img src="./img/mini-vue.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-mini-vuex3" target="_blank">mini-mini-vuex3</a>
      </th>
      <th>📦 100行实现的极简Vuex3</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-mini-pinia" target="_blank">
        <img src="./img/pinia.svg" width="50" align="center" height="50"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-mini-pinia" target="_blank">mini-mini-pinia</a>
      </th>
      <th>🌸 40行实现的极简Pinia</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-pinia-ts" target="_blank">
        <img src="./img/pinia.svg" width="50" align="center" height="50"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-pinia-ts" target="_blank">mini-pinia-ts</a>
      </th>
      <th>🌸 最接近官方的TypeScript版Pinia实现</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Vue.js-35495E?style=flat-square&amp;logo=vue.js&amp;logoColor=4FC08D" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-react-router4" target="_blank">
        <img src="./img/react-router.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-react-router4" target="_blank">mini-react-router4</a>
      </th>
      <th>🛣️ React Router 4的简约实现</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-react-router5" target="_blank">
        <img src="./img/react-router.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-react-router5" target="_blank">mini-react-router5</a>
      </th>
      <th>🛣️ React Router 5的简约实现</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-redux-saga" target="_blank">
        <img src="./img/redux.svg" width="50" height="50" alt=""/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-redux-saga" target="_blank">mini-redux-saga</a>
      </th>
      <th>🎭 Redux中间件，用于处理异步操作</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/Redux-593D88?style=flat-square&amp;logo=redux&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-redux-promise" target="_blank">
        <img src="./img/redux.svg" width="50" height="50" alt=""/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-redux-promise" target="_blank">mini-redux-promise</a>
      </th>
      <th>🔄 处理Redux中的Promise action</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/Redux-593D88?style=flat-square&amp;logo=redux&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-react-hooks" target="_blank">
        <img src="./img/mini-react.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-react-hooks" target="_blank">mini-react-hooks</a>
      </th>
      <th>🔧 React Hooks的简约实现</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-reactivity" target="_blank">
        <img src="./img/mini-vue.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-reactivity" target="_blank">mini-reactivity</a>
      </th>
      <th>⚡️ Vue响应式系统的核心实现</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-recoil" target="_blank">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA-MMtyJUqXsef5qOLoSIdShoEzOehoXZ7JQ&s" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-recoil" target="_blank">mini-recoil</a>
      </th>
      <th>🧪 React状态管理库Recoil的简约实现</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-zustand" target="_blank">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRpHj4UwTW4ANSlNjzQOiiOqfDa6kal9RpF0A&s" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-zustand" target="_blank">mini-zustand</a>
      </th>
      <th>🐻 基于hooks的简约状态管理库</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-mobx" target="_blank">
        <img src="./img/mini-react.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-mobx" target="_blank">mini-mobx</a>
      </th>
      <th>🚀 响应式状态管理库MobX的简约实现</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-use-immer" target="_blank">
        <img src="https://avatars.githubusercontent.com/u/45853199?s=200&v=4" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-use-immer" target="_blank">mini-use-immer</a>
      </th>
      <th>✍️ 在Hooks中简化状态更新的方式</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-dva" target="_blank">
        <img src="https://avatars.githubusercontent.com/u/20552239?s=280&v=4" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-dva" target="_blank">mini-dva</a>
      </th>
      <th>🚀 基于Redux和Redux-saga的数据流方案</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
        <img src="https://img.shields.io/badge/Redux-593D88?style=flat-square&amp;logo=redux&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-create-vue" target="_blank">
        <img src="./img/mini-vue.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-create-vue" target="_blank">mini-create-vue</a>
      </th>
      <th>🛠️ Vue项目脚手架工具</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-axios" target="_blank">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Axios_logo_%282020%29.svg/1280px-Axios_logo_%282020%29.svg.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-axios" target="_blank">mini-axios</a>
      </th>
      <th>📡 基于Promise的HTTP客户端</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/axios-ts" target="_blank">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Axios_logo_%282020%29.svg/1280px-Axios_logo_%282020%29.svg.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/axios-ts" target="_blank">axios-ts</a>
      </th>
      <th>📡 TypeScript版HTTP客户端</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-lodash" target="_blank">
        <img src="https://images.icon-icons.com/2699/PNG/512/lodash_logo_icon_169010.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-lodash" target="_blank">mini-lodash</a>
      </th>
      <th>📡 lodash</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
      </th>
    </tr>
     <tr>
      <th>
        <a href="./packages/mini-rollup" target="_blank">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZ9brFyYAVc_AjPVff3SZsPVANai1_5ovZiA&s" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-rollup" target="_blank">mini-rollup</a>
      </th>
      <th>📦 模块打包工具 Rollup 核心实现</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-webpack" target="_blank">
        <img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/webpack-icon.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-webpack" target="_blank">mini-webpack</a>
      </th>
      <th>📦 模块打包工具Webpack的核心实现</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
    <tr>
      <th>
        <a href="./packages/mini-module-federation-plugin" target="_blank">
        <img src="https://module-federation.io/svg.svg" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-module-federation-plugin" target="_blank">mini-module-federation-plugin</a>
      </th>
      <th>📦 Webpack模块联邦插件的迷你实现</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-jest" target="_blank">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5hv13xWYrg_Usxww9OTPx3FdKaIukCcCwrA&s" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-jest" target="_blank">mini-jest</a>
      </th>
      <th>🧪 JavaScript测试框架Jest的简约实现</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-vitest" target="_blank">
        <img src="https://vitest.dev/logo.svg" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-vitest" target="_blank">mini-vitest</a>
      </th>
      <th>⚡️ 极速单元测试框架Vitest的简约实现</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Vite-646CFF?style=flat-square&amp;logo=vite&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-nodemon" target="_blank">
        <img src="https://user-images.githubusercontent.com/13700/35731649-652807e8-080e-11e8-88fd-1b2f6d553b2d.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-nodemon" target="_blank">mini-nodemon</a>
      </th>
      <th>🔄 监视文件变化并自动重启应用</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-pm2" target="_blank">
        <img src="https://logowik.com/content/uploads/images/pm2-js1721215889.logowik.com.webp" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-pm2" target="_blank">mini-pm2</a>
      </th>
      <th>🔧 Node.js应用进程管理器</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-pnpm" target="_blank">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4JOMtRgMSMkF1NQncj0obZXGdvrvFSJw7Wg&s" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-pnpm" target="_blank">mini-pnpm</a>
      </th>
      <th>⚡️ 高性能Node.js包管理器</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-tapable" target="_blank">
        <img src="https://webpack.js.org/icon-pwa-512x512.934507c816afbcdb.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-tapable" target="_blank">mini-tapable</a>
      </th>
      <th>🔌 Webpack的插件系统核心</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-umi" target="_blank">
        <img src="https://avatars.githubusercontent.com/u/33895495?s=200&v=4" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-umi" target="_blank">mini-umi</a>
      </th>
      <th>🚀 可扩展的企业级前端应用框架</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/pinia-source" target="_blank">
        <img src="./img/pinia.svg" width="50" align="center" height="50"/>
        </a>
      </th>
      <th>
        <a href="./packages/pinia-source" target="_blank">pinia-source</a>
      </th>
      <th>🌸 Pinia源码解读与实现</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/Vue.js-35495E?style=flat-square&amp;logo=vue.js&amp;logoColor=4FC08D" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-connected-react-router" target="_blank">
        <img src="./img/react-router.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-connected-react-router" target="_blank">mini-connected-react-router</a>
      </th>
      <th>🔄 将React Router与Redux状态同步</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
        <img src="https://img.shields.io/badge/Redux-593D88?style=flat-square&amp;logo=redux&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-create-react-app-template" target="_blank">
        <img src="./img/mini-react.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-create-react-app-template" target="_blank">mini-create-react-app-template</a>
      </th>
      <th>🛠️ React项目脚手架模板</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-express-template" target="_blank">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Expressjs.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-express-template" target="_blank">mini-express-template</a>
      </th>
      <th>🌐 Express.js服务器模板</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-koa-template" target="_blank">
        <img src="https://www.koajs.net/img/logo.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-koa-template" target="_blank">mini-koa-template</a>
      </th>
      <th>🌐 Koa.js服务器模板</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-mobx-template" target="_blank">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfOXJmTfcLKkB2NeMjs264MLs9Y7K6sUzGHg&s" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-mobx-template" target="_blank">mini-mobx-template</a>
      </th>
      <th>📋 MobX项目模板</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-react-redux" target="_blank">
        <img src="./img/redux.svg" width="50" height="50" alt=""/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-react-redux" target="_blank">mini-react-redux</a>
      </th>
      <th>🔄 React与Redux的连接库</th>
      <th>
        <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
        <img src="https://img.shields.io/badge/Redux-593D88?style=flat-square&amp;logo=redux&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-webpack-loader-plugins" target="_blank">
        <img src="https://webpack.js.org/icon-pwa-512x512.934507c816afbcdb.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-webpack-loader-plugins" target="_blank">mini-webpack-loader-plugins</a>
      </th>
      <th>🔌 Webpack加载器和插件的简化实现</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/lit-html" target="_blank">
        <img src="https://avatars.githubusercontent.com/u/18489846?v=4" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/lit-html" target="_blank">lit-html</a>
      </th>
      <th>lit-html</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-formily" target="_blank">
        <img src="https://img.alicdn.com/tfs/TB1fHhZu4D1gK0jSZFyXXciOVXa-2500-1200.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-formily" target="_blank">mini-formily</a>
      </th>
      <th>mini-formily</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/Node.js-43853D?style=flat-square&amp;logo=node.js&amp;logoColor=white" alt="badge">
      </th>
    </tr>
    <tr>
      <th>
        <a href="./packages/mini-rxjs" target="_blank">
        <img src="https://rxjs.dev/assets/images/logos/Rx_Logo_S.png" width="50" align="center"/>
        </a>
      </th>
      <th>
        <a href="./packages/mini-rxjs" target="_blank">mini-rxjs</a>
      </th>
      <th>🔄 响应式编程库 RxJS 核心实现</th>
      <th>
        <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&amp;logo=javascript&amp;logoColor=black" alt="badge">
        <img src="https://img.shields.io/badge/React-20232A?style=flat-square&amp;logo=react&amp;logoColor=61DAFB" alt="badge">
      </th>
    </tr>

</tbody>
</table>

![mmexport1728274142812](https://github.com/user-attachments/assets/40098184-7947-48e4-90c9-160e2d62c587)

### 🏠 [Homepage](https://sunny-117.github.io/mini-anything)

# documentation

## 框架

> 由于 Vue, React 较为复杂，mini-vue 和 mini-react 在其他仓库

✅ mini-vue3

https://github.com/sunny-117/tiny-vue

✅ mini-vue2

https://github.com/sunny-117/mini-vue2

✅ mini-react

https://github.com/sunny-117/tiny-react

✅ mini-react-hooks

✅ mini-vue-reactivity

## Vue 生态

✅ mini-vue-router3

✅ mini-vuex4

✅ mini-mini-vuex3 100 行写一个 vuex

✅ mini-pinia

✅ mini-mini-pinia 40 行写一个 pinia

✅ mini-pinia-ts 最接近官方的 pinia 实现

## React 生态

✅ mini-react-router4

✅ mini-react-router5

✅ mini-redux

✅ connected-react-router

✅ mini-react-redux

✅ mini-redux-promise

✅ mini-redux-thunk

✅ mini-redux-saga

✅ mini-recoil

✅ mini-swr

## 工具链

✅ mini-create-react-app-template

✅ [mini-rspack](https://github.com/Sunny-117/mini-rspack)

✅ mini-pnpm

## 上层框架

✅ mini-dva

✅ mini-umi

✅ mini-plugin-dva-loading

## 工程化

✅ mini-webpack

- 最接近源码的实现：https://github.com/sunny-117/jspack

- 简化版 mini-webpack-loader-plugins

- 极简版（适合新手）：https://github.com/Sunny-117/mini-webpack

✅ mini-vite

- 最接近源码的实现：https://github.com/Sunny-117/tiny-vite

- 简化版：https://github.com/Sunny-117/mini-vite

✅ mini-rollup

详见：https://github.com/Sunny-117/cherry

✅ mini-vitest

✅ mini-jest

迷你单元测试框架

## 工具库

✅ mini-rxjs

✅ mini-pm2

✅ mini-axios

✅ mini-nodemon

✅ mini-express

✅ mini-koa

TODO: [mini-mitt](https://github.com/developit/mitt)

## 插件

✅ vite 插件

https://github.com/sunny-117/vite-plugins

✅ rollup plugin

https://github.com/Sunny-117/rollup-core-plugins

✅ esbuild plugin

https://github.com/Sunny-117/esbuild-book

✅ webpack MF plugin

## 状态管理

✅ mini-mobx

✅ mini-zustand

## 编译器

✅ parse&codegen&compiler

https://github.com/Sunny-117/tiny-complier

🖥 Environment Suppor

- Modern browsers
- NodeJS

## Author

👤 **sunny-117**

- Website: https://sunny-117.github.io/blog/
- Github: [@sunny-117](https://github.com/sunny-117)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/Sunny-117/tiny-anything/issues). You can also take a look at the [contributing guide](https://github.com/Sunny-117/tiny-anything/blob/main/CONTRIBUTING.md).

## Show your support

Give a ⭐️ if this project helped you!

## 📝 License

---

_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_

tiny-anything

tiny-anything Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

tiny-anything

tiny-anything Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README