docs: todo list

.vscode/settings.json

@@ -35,5 +35,8 @@
     "json",
     "jsonc",
     "yaml"
-  ]
+  ],
+  "yaml.schemas": {
+    "https://json.schemastore.org/github-workflow.json": "file:///Users/qinguanghui/Desktop/markdown/vuepress/.github/workflows/deploy.yml"
+  }
 }

README.md

@@ -83,3 +83,82 @@
 - require on demand
 - playground runtime
 - micro-frontend / module-federation
+
+## 规划
+
+- 组件库
+  - 组件库规范
+    - 组件边界
+    - 组件分层
+    - api 规范
+    - 代码规范
+    - 提交规范
+    - 组件库建设体系
+      - lint 规范
+      - commit 规范
+      - 打包产物
+        - umd/esm/cjs
+        - 按需
+        - 私有 npm
+    - 未来趋势与发展
+  - 组件库测试
+  - 组件测试 id
+  - 组件库主题、token 制定等。
+  - 组件库样式覆盖、样式前缀
+  - 组件库版本管理
+  - hooks 改造
+  - 按需加载
+  - 设计同步
+  - 尝试
+    - monorepo
+    - 自动化引入
+    -
+- 组件库衍生问题
+  - 自动化测试脚本
+    - babel / tsx
+- 组件库管理平台
+  - nest.js
+  - next.js
+  - 组件运行时
+  - md react demo
+- 复杂组件
+  - UiSearch/UiTable/SearchTable
+  - 范围选择
+- 微前端
+  - 原理
+  - 实现
+  - 问题
+  - 内存泄露与排查
+- Electron
+  - 通信
+  - 窗口
+  - 与 web 开发的不同点。
+- 项目
+  - 兼容性处理
+  - 页面卡顿
+  - 打包优化
+  - sourcemap 调试
+- 性能优化
+  - 重排、重绘
+  - 图层
+  - 内存泄露与排查
+  - CPU 占用
+  - chrome devtools
+- react
+  - 合成事件
+  - 更新机制
+  - 组件缓存
+  - jsx 编译解析
+
+## 思路
+
+- 思考
+  - 项目背景是怎样的？遇到的问题？
+  - 该问题自己的角色与职责？
+  - 已有的解决方案是什么？为什么不行？
+  - 自己的解决方案是什么？为什么能行？
+  - 具体怎么实现的？有哪些难点？又是如何解决的？
+  - 最终带来什么样的价值？
+  - 从中学习到了什么？有哪些收获？
+  - 如果再来一次，有没有更好的实现方式？有哪些地方是可以优化的？
+

TODO.md

@@ -0,0 +1,54 @@
+# TODO
+
+## 微前端
+
+- 背景、现状、问题。
+- 当前解决方案（联邦模块）优点及不足。
+- 业界解决方案，优点及不足。
+- 新的解决方案
+  - 保底方案
+  - 基于 qiankun 改造的微前端方案。
+- 实现思路
+- 遇到的问题及难点、解决方案。
+- 总结优劣，以及可以优化的地方。
+
+## 组件库
+
+## 关于 hooks
+- 
+
+## 组件库管理平台
+
+- 背景、问题
+- 解决方案
+- 实现
+  - nest.js
+  - next.js
+- 难点
+  - 基于 bytemd 改造组件库运行时。
+  - 组件库运行时。
+  - rsc 技术的理解。
+
+## Electron
+
+- 架构实现
+- 通信方式及再封装 => 通信原理
+- 注意点
+- 窗口
+- 打包更新
+- 模板构建
+
+- 其他
+  - 安全性
+  - 兼容性
+  - 性能优化
+
+## 复杂组件开发
+
+## 浏览器插件（选）
+
+## 打包优化（选）
+
+## 区块链入门（选）=> web3
+
+## ?

docs/.vitepress/navbar.ts

@@ -7,27 +7,31 @@ export const navbar = [
   //   text: 'AI',
   //   link: '/ai/index',
   // },
-   {
-    text: 'Electron',
-    link: '/electron/index',
-  },
   {
-    text: '框架系列',
+    text: '框架源码',
     items: [
       { text: 'Vue v2 源码', link: '/vue/' },
       { text: 'Vue v3 源码', link: '/vue3/' },
       { text: 'React v17 源码', link: '/react/' },
     ],
   },
   {
-    text: '基建系列',
+    text: '基建',
     items: [
       { text: 'Webpack 系列', link: '/webpack/' },
       { text: 'Rollup 系列', link: '/rollup/' },
       { text: 'Vite 系列', link: '/vite/' },
       { text: 'Babel 系列', link: '/babel/' },
     ],
   },
+  {
+    text: '微前端',
+    link: '/micro-frontend/index',
+  },
+  {
+    text: 'Electron',
+    link: '/electron/index',
+  },
   {
     text: 'JS 系列',
     items: [

docs/.vitepress/sidebar.ts

@@ -19,6 +19,7 @@ const ai = [
   },
 ]
 
+// Electron
 const electron = [
   {
     text: 'Electron',
@@ -29,7 +30,17 @@ const electron = [
   },
 ]
 
-// 框架系列
+// 微前端
+const microFrontend = [
+  {
+    text: '微前端',
+    items: [
+      { text: '背景', link: '/micro-frontend/background' },
+    ],
+  },
+]
+
+// 框架源码
 const vue3 = [
   {
     text: 'Vue3原理',
@@ -368,6 +379,7 @@ export const sidebar = {
   '/articles/': articles,
   '/ai/': ai,
   '/electron/': electron,
+  '/micro-frontend/': microFrontend,
   '/vue/': vue,
   '/vue3/': vue3,
   '/react/': react,

docs/component/index.md

@@ -0,0 +1,36 @@
+# qt-design
+
+## 背景
+
+## 怎么解决
+
+## 如果从零构建一个组件库
+
+## 有哪些难点
+
+- 规范
+  - 组件库版本、分支规范、文档规范（开发者内部的统一）
+  - 组件库 api 规范（开发者和使用者间的统一）
+  - 设计规范一致性问题（开发者与设计间的统一）
+- 流程
+  - 问题抛出到解决的流程
+  - 开发贡献流程
+- 技术
+  - 分层
+  - 组件库整体技术
+    - 样式 token 设计统一
+    - 样式隔离方案
+    - 按需加载方案
+    - 组件库测试
+  - 其他尝试
+    - 自动引入方案预研
+    - monorepo 方案
+    - class => hooks
+    - 自动化测试 id 问题
+  - 组件开发心得
+  - 组件库管理平台
+  - 组件运行时
+    - 基于 bytemd 的运行时改造
+
+- 还有哪些内容可以做
+

docs/index.md

@@ -22,7 +22,7 @@ hero:
 
 # navbar: false
 features:
-  - title: 框架系列
+  - title: 框架源码
     details: 学习前端框架源码：Vue、React、Svelte 等。
   - title: 基建系列
     details: 学习前端基础构建工具： Webpack、Rollup、Vite、Esbuild、Babel 等。

docs/javascript/TypeScript.md

@@ -1,4 +1,3 @@
 # TypeScript
 
- - [TypeScript Deep Dive](https://basarat.gitbook.io/typescript/)
-
+- [TypeScript Deep Dive](https://basarat.gitbook.io/typescript/)

docs/javascript/事件循环机制.md

@@ -1,6 +1,7 @@
 # 事件循环、微任务与宏任务
 
 **知识要点：**
+
 - 单线程的优缺点，以及为什么需要事件循环机制？
 - 调用栈和任务队列是怎样的？
 - 事件循环机制究竟是怎样的？
@@ -137,6 +138,7 @@ setTimeout
 至此，浏览器里的事件循环机制就学得差不多了。这里需要引起注意的一点是，**每次取的是一个宏任务，而宏任务与宏任务之间是一个微任务队列，可能具有多个微任务。而且微任务里如果执行了微任务，同样会将新的微任务添加到当前微任务队列最后面，所以新添加的微任务是优先于下一个宏任务执行的。**
 
 ## node 事件循环
+
 ``` javascript
 const fs = require('fs')
 
@@ -173,9 +175,11 @@ setImmediate(() => {
 setTimeout(() => {
   console.log(1)
 }, 0)
-``` 
+```
+
 运行结果为`123456789`或`234567819`：
 事件循环过程为：
+
 1. setTimeout队列 => IO callback队列 => setImmediate队列 => setTimeout队列 => ...
 2. 过程中穿插 nextTick 队列 => promise 队列
 

docs/micro-frontend/index.md

@@ -0,0 +1,8 @@
+# 微前端
+
+- [背景](./background.md)
+- [方案调研](./background.md)
+- [保守方案](./background.md)
+- [激进方案](./background.md)
+- [实现原理](./background.md)
+- [问题](./background.md)

docs/react/note/event-change.md

@@ -14,8 +14,6 @@ document.body.addEventListener('click', xxx)  // 原生事件
 
 在 `React17`/18 时，执行顺序为 `div => body => document`
 
-# 不同版本React事件触发顺序不一致问题
-
 ## 原因
 
 `React 16` 事件委托到 `document` 上，`react 17+` 委托到 `rootNode` 上：
@@ -26,16 +24,12 @@ document.body.addEventListener('click', xxx)  // 原生事件
 
 在 17+ 的情况下，先冒泡到 `rootNode`，触发合成事件，再冒泡到 `body => document` 。
 
-# 不同版本React事件触发顺序不一致问题
-
 ## React 为什么要将事件从 document 改为 rootNode？
 
 如果存在多个版本的 `React` 组件嵌套时，如果冒泡到 `document`，可能存在一个版本的组件 `e.stopPropagation()` 影响到另外一个版本组件（其他的事件行为可能也会被影响）。
 
 如果改为 `rootNode`，不同版本的 `react` 组件间事件就不会相互影响。
 
-# 不同版本React事件触发顺序不一致问题
-
 ## 为什么需要合成事件？
 
 1. 内部做了浏览器事件兼容。

docs/react/todo.md

@@ -0,0 +1,6 @@
+# TODO
+
+- [ ] React 源码解析
+- [ ] React 更新机制、批量更新
+- [ ] React 事件机制
+- [ ] React Hooks 陷阱、class 对比