├── README.md
├── tiny-react
├── README.md
├── class01
│ ├── .gitignore
│ ├── App.jsx
│ ├── README.md
│ ├── core
│ │ ├── React.js
│ │ └── ReactDom.js
│ ├── index.html
│ ├── main.jsx
│ ├── package.json
│ └── pnpm-lock.yaml
├── class02
│ ├── .gitignore
│ ├── README.md
│ └── demo
│ │ ├── index.html
│ │ ├── index.js
│ │ └── main.js
├── class03
│ ├── .gitignore
│ ├── App.jsx
│ ├── README.md
│ ├── core
│ │ ├── React.js
│ │ └── ReactDOM.js
│ ├── index.html
│ ├── main.jsx
│ ├── package.json
│ └── pnpm-lock.yaml
└── class04
│ ├── .gitignore
│ ├── App.jsx
│ ├── README.md
│ ├── core
│ ├── React.js
│ └── ReactDOM.js
│ ├── index.html
│ ├── main.jsx
│ ├── package.json
│ └── pnpm-lock.yaml
├── tiny-vue3
├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── packages
│ ├── compiler-core
│ │ ├── __test__
│ │ │ ├── __snapshots__
│ │ │ │ └── codegen.spec.ts.snap
│ │ │ ├── codegen.spec.ts
│ │ │ ├── parse.spec.ts
│ │ │ └── transform.spec.ts
│ │ ├── package.json
│ │ └── src
│ │ │ ├── ast.ts
│ │ │ ├── codegen.ts
│ │ │ ├── compile.ts
│ │ │ ├── index.ts
│ │ │ ├── parse.ts
│ │ │ ├── runtimeHelpers.ts
│ │ │ ├── transform.ts
│ │ │ ├── transforms
│ │ │ ├── transformElement.ts
│ │ │ ├── transformExpression.ts
│ │ │ └── transformText.ts
│ │ │ └── utils.ts
│ ├── reactivity
│ │ ├── __tests__
│ │ │ ├── computed.spec.ts
│ │ │ ├── effect.spec.ts
│ │ │ ├── reactive.spec.ts
│ │ │ ├── readonly.spec.ts
│ │ │ ├── ref.spec.ts
│ │ │ └── shallowReadonly.spec.ts
│ │ ├── package.json
│ │ └── src
│ │ │ ├── baseHandlers.ts
│ │ │ ├── computed.ts
│ │ │ ├── effect.ts
│ │ │ ├── index.ts
│ │ │ ├── reactive.ts
│ │ │ └── ref.ts
│ ├── runtime-core
│ │ ├── __tests__
│ │ │ └── apiWatch.spec.ts
│ │ ├── package.json
│ │ └── src
│ │ │ ├── apiInject.ts
│ │ │ ├── apiWatch.ts
│ │ │ ├── component.ts
│ │ │ ├── componentEmit.ts
│ │ │ ├── componentProps.ts
│ │ │ ├── componentPublicInstance.ts
│ │ │ ├── componentSlots.ts
│ │ │ ├── componentUpdateUtils.ts
│ │ │ ├── createApp.ts
│ │ │ ├── h.ts
│ │ │ ├── helpers
│ │ │ └── renderSlots.ts
│ │ │ ├── index.ts
│ │ │ ├── renderer.ts
│ │ │ ├── scheduler.ts
│ │ │ └── vnode.ts
│ ├── runtime-dom
│ │ ├── package.json
│ │ └── src
│ │ │ └── index.ts
│ ├── shared
│ │ ├── package.json
│ │ └── src
│ │ │ ├── ShapeFlags.ts
│ │ │ ├── demo.ts
│ │ │ ├── index.ts
│ │ │ └── toDisplayString.ts
│ └── vue
│ │ ├── examples
│ │ ├── apiInject
│ │ │ ├── App.js
│ │ │ └── index.html
│ │ ├── compiler-base
│ │ │ ├── App.js
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── componentEmit
│ │ │ ├── App.js
│ │ │ ├── Foo.js
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── componentSlot
│ │ │ ├── App.js
│ │ │ ├── Foo.js
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── componentUpdate
│ │ │ ├── App.js
│ │ │ ├── Child.js
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── currentInstance
│ │ │ ├── App.js
│ │ │ ├── Foo.js
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── customRenderer
│ │ │ ├── App.js
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── helloworld
│ │ │ ├── App.js
│ │ │ ├── Foo.js
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── nextTicker
│ │ │ ├── App.js
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── patchChildren
│ │ │ ├── App.js
│ │ │ ├── ArrayToArray.js
│ │ │ ├── ArrayToText.js
│ │ │ ├── TextToArray.js
│ │ │ ├── TextToText.js
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ └── update
│ │ │ ├── App.js
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── package.json
│ │ └── src
│ │ └── index.ts
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── rollup.config.js
├── tsconfig.json
├── vitest.config.ts
└── yarn.lock
└── tiny-webpack
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # tiny-series
2 |
3 | 关于 web 前端技术的一些实践。
4 |
5 | ## tiny-react
6 |
7 | 关于 react 一些基本原理的实现
8 |
--------------------------------------------------------------------------------
/tiny-react/README.md:
--------------------------------------------------------------------------------
1 | # 实现统一提交和 FunctionComponent
2 |
3 | ### 前言
4 |
5 | 回顾上一节，我们通过实现任务调度器 `requestIdleCallback` 利用了空余时间去完成每个 task。
6 | 通过`Firber`结构，`React` 可以灵活地遍历和操作组件树。
7 |
8 | 但是，这种方式存在一个问题，就是当中途没有空余时间时，用户可能会看到渲染一半的 dom。我们可以采用统一提交的方式去解决这个问题，先处理链表，最后再统一添加到屏幕中。
9 |
10 | ### 统一提交
11 |
12 | 其本质就是**将 DOM 的挂载操作统一放到最后执行，一次性完成所有 DOM 的挂载**。这种方式可以有效解决因某个 DOM 挂载时出现动画或任务插入导致的页面显示不完整问题，提升用户体验。
13 |
14 | #### 实现思路
15 |
16 | ##### 1. **创建挂载函数**
17 |
18 | 将挂载DOM的内容抽取到一个新的函数`commitWork(fiber)`中，用于挂载单个DOM节点。
19 |
20 | ```js
21 | // 提交任务
22 | function commitWork(fiber) {
23 | if (!fiber) return;
24 | let fiberParent = fiber.parent;
25 | // ...
26 | }
27 | ```
28 |
29 | ##### 2. **遍历 fiber 架构**
30 |
31 | 通过`commitWork`遍历 fiber 树，递归挂载所有节点。
32 |
33 | ```js
34 | // 提交任务
35 | function commitWork(fiber) {
36 | if (!fiber) return;
37 | let fiberParent = fiber.parent;
38 | // 递归挂载所有节点
39 | while (!fiberParent.dom) {
40 | fiberParent = fiberParent.parent;
41 | }
42 | if (fiber.dom) {
43 | fiberParent.dom.append(fiber.dom);
44 | }
45 | commitWork(fiber.child);
46 | commitWork(fiber.sibling);
47 | }
48 | ```
49 |
50 | ##### 3.**统一提交入口**
51 |
52 | 提供一个总的入口函数`commitRoot`，在函数中调用`commitWork`完成所有 DOM 的挂载。
53 |
54 | ```js
55 | // 任务调度
56 | function workLoop(deadline) {
57 | // 是否中断
58 | let shouldYeild = false;
59 | while (!shouldYeild && nextUnitOfWork) {
60 | nextUnitOfWork = performWorkOfUnit(nextUnitOfWork);
61 | shouldYeild = deadline.timeRemaining() < 1;
62 | }
63 | // 统一提交
64 | if (!nextUnitOfWork && root) {
65 | console.log(root);
66 | commitRoot();
67 | }
68 | // 任务放到下次执行
69 | requestIdleCallback(workLoop);
70 | }
71 | function commitRoot() {
72 | // 统一提交任务
73 | commitWork(root.child);
74 | root = null;
75 | }
76 | ```
77 |
78 | #### 优势
79 |
80 | - `统一提交`的处理可以在页面渲染前完成所有 DOM 的挂载，避免用户看到不完整的页面内容。
81 | - 通过一次性挂载所有 DOM，减少了浏览器重绘和重排的次数，提高页面渲染性能。
82 |
83 | ### FunctionComponent
84 |
85 | 自 `React 16.8` 引入 `Hooks` 以来，`函数式组件（FunctionComponent）`彻底改变了 `React` 开发的格局。Function Component 就是以 Function 的形式创建的 React 组件。它不再是简单的无状态组件，而是通过 `Hooks` 机制融合了**状态管理**、**生命周期和副作用处理**，成为 `React` 官方推荐的组件开发范式。
86 |
87 | #### 实现流程图解
88 |
89 | ```js
90 | 1. 调用函数组件 (props) → 生成 JSX
91 | |
92 | 2. 转换为 React Element（虚拟 DOM 节点）
93 | |
94 | 3. 调和阶段（Reconciliation）：
95 | - 创建/更新 Fiber 节点
96 | - 处理 Hooks，记录状态和副作用到 Fiber
97 | |
98 | 4. Diff 算法 → 生成更新计划
99 | |
100 | 5. 提交阶段（Commit）：
101 | - 更新 DOM
102 | - 执行副作用（useEffect）
103 | ```
104 |
105 | #### 实现思路
106 |
107 | ##### 1. 在处理 Firbe 节点时，判断节点的类型，区分函数组件和原生组件，分别处理。
108 |
109 | ```js
110 | /**
111 | * 执行当前工作单元的工作
112 | * @param {*} fiber
113 | */
114 | function performWorkOfUnit(fiber) {
115 | // 判断节点是否为函数组件
116 | const isFunctionComponent = typeof fiber.type === "function";
117 | if (isFunctionComponent) {
118 | // 函数组件
119 | updateFunctionComponent(fiber);
120 | } else {
121 | updateHostComponent(fiber);
122 | }
123 | //...
124 | }
125 | function updateFunctionComponent(fiber) {...}
126 | function updateHostComponent(fiber) {...}
127 | ```
128 |
129 | ##### 2. 递归生成链表结构
130 |
131 | -
132 | - 采用深度优先遍历：优先处理子节点，再兄弟节点，最后回溯父节点。
133 | - **流程**：子节点 → 兄弟节点 → 叔节点（父节点的兄弟），符合 Fiber 遍历顺序。
134 |
135 | 
136 |
137 | ```js
138 | function performWorkOfUnit(fiber) {
139 | // 判断节点是否为函数类型
140 | const isFunctionComponent = typeof fiber.type === "function";
141 | if (isFunctionComponent) {
142 | updateFunctionComponent(fiber);
143 | } else {
144 | updateHostComponent(fiber);
145 | }
146 |
147 | // 4. 返回下一个要执行的任务
148 | if (fiber.child) {
149 | return fiber.child;
150 | }
151 |
152 | let nextFiber = fiber;
153 | while (nextFiber) {
154 | if (nextFiber.sibling) return nextFiber.sibling;
155 | nextFiber = nextFiber.parent;
156 | }
157 | }
158 |
159 | function updateFunctionComponent(fiber) {
160 | const children = [fiber.type(fiber.props)];
161 | // 3. 转换链表，设置好指针
162 | initChildren(fiber, children);
163 | }
164 |
165 | function updateHostComponent(fiber) {
166 | if (!fiber.dom) {
167 | // 1. 创建dom
168 | const dom = (fiber.dom = createDom(fiber.type));
169 | // 2. 处理props
170 | updateProps(dom, fiber.props);
171 | }
172 |
173 | const children = fiber.props.children;
174 | // 3. 转换链表，设置好指针
175 | initChildren(fiber, children);
176 | }
177 | ```
178 |
179 | #### 优势
180 |
181 | `React` 通过 `函数直接调用`、`Fiber 架构的状态管理` 和 `Hooks 的链表顺序追踪`，实现了`函数组件`的轻量化与高效更新。相较于类组件，函数组件避免了实例化开销，更契合 React 的声明式设计理念，同时 `Hooks` 提供了灵活的状态与副作用管理能力。
182 |
183 | ### 小结
184 |
185 | - 本文主要实现将组件树转换为 `Fiber` 链表，通过迭代方式分步处理每个节点，实现可中断的渲染过程。
186 | - 实现了简易的`统一提交`和`FunctionComponent`的实现思路，省略了 `props`的特殊处理、`DOM` 创建细节和复杂子结构支持。
187 | - 展示了任务分片和链表构建的核心思想，但实际应用中需处理更多`边界情况`和`React`特性。
188 |
189 | ### 系列文章
190 |
191 | - [实现`createElement`和`render`函数](https://juejin.cn/post/7326093660705128460)
192 | - [实现`任务调度器requestIdleCallback`和简易的`Fiber`](https://juejin.cn/post/7471968780866338843)
193 |
--------------------------------------------------------------------------------
/tiny-react/class01/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | .vscode
15 |
16 | # Editor directories and files
17 | .idea
18 | .DS_Store
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
--------------------------------------------------------------------------------
/tiny-react/class01/App.jsx:
--------------------------------------------------------------------------------
1 | import React from "./core/React.js";
2 | const App = React.createElement("div", { id: "app" }, "hihihihi~ ", "hello world, my first mini react demo!");
3 | export default App;
--------------------------------------------------------------------------------
/tiny-react/class01/README.md:
--------------------------------------------------------------------------------
1 | # 实现`createElement`和`render`函数
2 |
3 | ### 前言
4 |
5 | 最近参加了 [崔效瑞老师](https://space.bilibili.com/175301983) 的 7 天 mini-react 训练营，虽然每天工作很忙，但还是抽出一两个小时跟进学习，坚持了 7 天，还是得给坚持到最后的自己点个赞！
6 |
7 | 虽然之前没有接触过 React 的源码，但是通过学习任务的拆分，将复杂模块的任务拆分成一个个小任务，小步走实现，再逐步优化代码。
8 |
9 | 时间虽短，内容却不少。先开始浅浅地记录下我的学习成果，先起个好头，希望今年能顺利更新完这个系列，给 2024 的自己先立第一个 flag！！
10 |
11 | 在这 7 天的 mini-react 训练营中，我学到了：
12 |
13 | - [x] 实现`createElement`和`render`函数
14 | - [x] 实现`任务调度器requestIdleCallback`和简易的`fiber`
15 | - [x] 实现`functionComponent`
16 | - [x] 实现`事件绑定`
17 | - [x] 实现`props`
18 | - [x] 实现`diff更新`
19 | - [x] 实现`useState`
20 | - [x] 实现`useEffect`
21 |
22 | 话不多说，进入今天的主题，先开始`React的初始化`，实现`createElement`和`render`函数
23 |
24 | ### createElement 函数
25 |
26 | `createElement` 函数是用于创建虚拟 DOM 元素的函数。它通常被 JSX 编译器所使用，用来将 JSX 语法转换为对 `React.createElement` 的调用。
27 |
28 | ```js
29 | function createTextNode(text) {
30 | return {
31 | type: "TEXT_ELEMENT",
32 | props: {
33 | nodeValue: text,
34 | children: [],
35 | },
36 | };
37 | }
38 |
39 | function createElement(type, props, ...children) {
40 | return {
41 | type,
42 | props: {
43 | ...props,
44 | children: children.map((child) => {
45 | const isTextNode = typeof child === "string" || typeof child === "number";
46 | return isTextNode ? createTextNode(child) : child;
47 | }),
48 | },
49 | };
50 | }
51 | ```
52 |
53 | `createElement` 函数接受三个参数：`type` 表示元素的类型（例如 `'div'`），`props` 表示元素的属性（例如 `{ className: 'my-class' }`），以及 `children` 表示元素的子元素。在实现中，它返回一个包含 `type` 和 `props` 属性的对象。
54 |
55 | 为了处理文本节点，我们还定义了 `createTextNode` 函数，它创建一个特殊的类型为 `'TEXT_ELEMENT'` 的对象，用于表示文本节点。
56 |
57 | 在实际使用中，React 会递归地处理这些虚拟 DOM 对象，最终将它们转换为实际的 DOM 元素并渲染到页面上。
58 |
59 | ```
60 | 注意： 上述代码只是一个简化版的实现，真实的 React 源码中应该更加复杂，并包含更多的功能和优化。
61 | ```
62 |
63 | ### render 函数
64 |
65 | `render` 函数是 React 中用于将虚拟 DOM 渲染到实际 DOM 的核心函数。
66 |
67 | ```js
68 | function render(el, container) {
69 | const dom = el.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(el.type);
70 |
71 | // id class
72 | Object.keys(el.props).forEach((key) => {
73 | if (key !== "children") {
74 | dom[key] = el.props[key];
75 | }
76 | });
77 | const children = el.props.children;
78 | children.forEach((child) => {
79 | render(child, dom);
80 | });
81 | container.append(dom);
82 | }
83 | ```
84 |
85 | `render` 函数接受两个参数：`element` 表示要渲染的虚拟 DOM 元素，`container` 表示要渲染到的实际 DOM 容器。
86 | 首先，根据虚拟 DOM 的类型创建对应的实际 DOM 元素（文本节点和普通元素分别处理）。然后，将虚拟 DOM 元素的属性设置到实际 DOM 元素上，遍历子元素并递归调用 `render` 函数。最后，将创建好的实际 DOM 元素添加到容器中。
87 |
88 | ### 导出 render 函数
89 |
90 | 在`ReactDom`文件导出`render`函数之后， 调用`ReactDOM.createRoot(element).render` 函数。这样，就可以使用 React 的渲染功能了。
91 |
92 | ```js
93 | import React from "./React.js";
94 | const ReactDOM = {
95 | createRoot(container) {
96 | return {
97 | render(App) {
98 | React.render(App, container);
99 | },
100 | };
101 | },
102 | };
103 |
104 | export default ReactDOM;
105 | ```
106 |
107 | ### 示例解析
108 |
109 | #### 简单的渲染代码
110 |
111 | ```jsx
112 | function App() {
113 | return (
114 |
115 | hello world, my mini react!
116 |
befend
117 |
count:{num}
6 | }
7 |
8 | function CounterContainer() {
9 | return
10 | }
11 |
12 | function App() {
13 | return (
14 |
15 | hello world, my mini react!
16 |
17 |
18 |
befend
19 |
hi,{{message}}
")
29 | transform(ast, {
30 | nodeTransforms: [transformExpression, transformText, transformElement]
31 | })
32 |
33 | const { code } = generate(ast)
34 | expect(code).toMatchSnapshot()
35 | })
36 | })
--------------------------------------------------------------------------------
/tiny-vue3/packages/compiler-core/__test__/parse.spec.ts:
--------------------------------------------------------------------------------
1 | import { baseParse } from "../src/parse"
2 | import { NodeTypes } from "../src/ast"
3 |
4 | describe("Parse", () => {
5 | describe("interpolation", () => {
6 | test("simple interpolation", () => {
7 | const ast = baseParse("{{message}}")
8 | // root
9 | expect(ast.children[0]).toStrictEqual({
10 | type: NodeTypes.INTERPOLATION,
11 | content: {
12 | type: NodeTypes.SIMPLE_EXPRESSION,
13 | content: "message"
14 | }
15 | })
16 | })
17 | })
18 |
19 | describe("element", () => {
20 | it("simple element div", () => {
21 | const ast = baseParse("")
22 |
23 | expect(ast.children[0]).toStrictEqual({
24 | type: NodeTypes.ELEMENT,
25 | tag: "div",
26 | children: []
27 | })
28 | })
29 | })
30 |
31 | describe("text", () => {
32 | it("simple text", () => {
33 | const ast = baseParse("some text")
34 |
35 | expect(ast.children[0]).toStrictEqual({
36 | type: NodeTypes.TEXT,
37 | content: "some text"
38 | })
39 | })
40 | })
41 |
42 | test("hello world", () => {
43 | const ast = baseParse("hi,{{message}}
")
44 |
45 | expect(ast.children[0]).toStrictEqual({
46 | type: NodeTypes.ELEMENT,
47 | tag: "div",
48 | children: [
49 | {
50 | type: NodeTypes.TEXT,
51 | content: "hi,",
52 | },
53 | {
54 | type: NodeTypes.INTERPOLATION,
55 | content: {
56 | type: NodeTypes.SIMPLE_EXPRESSION,
57 | content: "message",
58 | },
59 | }
60 | ]
61 | })
62 | })
63 |
64 | test("Nested element", () => {
65 | const ast = baseParse("")
66 |
67 | expect(ast.children[0]).toStrictEqual({
68 | type: NodeTypes.ELEMENT,
69 | tag: "div",
70 | children: [
71 | {
72 | type: NodeTypes.ELEMENT,
73 | tag: "p",
74 | children: [
75 | {
76 | type: NodeTypes.TEXT,
77 | content: "hi",
78 | },
79 | ],
80 | },
81 | {
82 | type: NodeTypes.INTERPOLATION,
83 | content: {
84 | type: NodeTypes.SIMPLE_EXPRESSION,
85 | content: "message",
86 | },
87 | }
88 | ]
89 | })
90 | })
91 |
92 | test("should throw error when lack end tag", () => {
93 | expect(() => {
94 | baseParse("
")
95 | }).toThrow(`缺少结束标签：span`)
96 | })
97 | })
--------------------------------------------------------------------------------
/tiny-vue3/packages/compiler-core/__test__/transform.spec.ts:
--------------------------------------------------------------------------------
1 | import { NodeTypes } from "../src/ast";
2 | import { baseParse } from "../src/parse";
3 | import { transform } from "../src/transform";
4 |
5 | describe("transform", () => {
6 | it("happy path", () => {
7 | const ast = baseParse("hi,{{message}}
");
8 |
9 | const plugin = (node) => {
10 | if (node.type === NodeTypes.TEXT) {
11 | node.content = node.content + " mini-vue";
12 | }
13 | };
14 |
15 | transform(ast, {
16 | nodeTransforms: [plugin],
17 | });
18 |
19 | const nodeText = ast.children[0].children[0];
20 | expect(nodeText.content).toBe("hi, mini-vue");
21 | });
22 | });
--------------------------------------------------------------------------------
/tiny-vue3/packages/compiler-core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@tiny-vue/compiler-core",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "@tiny-vue/shared": "workspace:^1.0.0"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/compiler-core/src/ast.ts:
--------------------------------------------------------------------------------
1 | import { CREATE_ELEMENT_VNODE } from "./runtimeHelpers";
2 |
3 | export const enum NodeTypes {
4 | INTERPOLATION,
5 | SIMPLE_EXPRESSION,
6 | ELEMENT,
7 | TEXT,
8 | ROOT,
9 | COMPOUND_EXPRESSION
10 | }
11 |
12 | export function createVNodeCall(context, tag, props, children) {
13 | context.helper(CREATE_ELEMENT_VNODE)
14 | return {
15 | type: NodeTypes.ELEMENT,
16 | tag,
17 | props,
18 | children
19 | }
20 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/compiler-core/src/codegen.ts:
--------------------------------------------------------------------------------
1 | import { isString } from "@tiny-vue/shared"
2 | import { NodeTypes } from "./ast"
3 | import { CREATE_ELEMENT_VNODE, helperMapName, TO_DISPLAY_STRING } from "./runtimeHelpers"
4 |
5 | export function generate(ast) {
6 | const context = createCodegenContext()
7 | const { push } = context
8 |
9 | genFunctionPreamble(ast, context)
10 |
11 | const functionName = "render"
12 | const args = ["_ctx", "_cache"]
13 | const signature = args.join(", ")
14 |
15 | push(`function ${functionName}(${signature}){`)
16 | push("return ")
17 | genNode(ast.codegenNode, context)
18 | push("}")
19 |
20 | return {
21 | code: context.code
22 | }
23 | }
24 |
25 | function genFunctionPreamble(ast: any, context: any) {
26 | const { push } = context
27 | const VueBinging = "Vue"
28 | const aliasHelper = (s) => `${helperMapName[s]}:_${helperMapName[s]}`
29 | if (ast.helpers.length > 0) {
30 | push(`const { ${ast.helpers.map(aliasHelper).join(", ")} } = ${VueBinging}`)
31 | }
32 | push("\n")
33 | push("return ")
34 | }
35 |
36 | function createCodegenContext(): any {
37 | const context = {
38 | code: "",
39 | push(source) {
40 | context.code += source
41 | },
42 | helper(key) {
43 | return `_${helperMapName[key]}`
44 | }
45 | }
46 |
47 | return context
48 | }
49 |
50 | function genNode(node: any, context) {
51 | switch (node.type) {
52 | case NodeTypes.TEXT:
53 | genText(node, context)
54 | break
55 | case NodeTypes.INTERPOLATION:
56 | genInterpolation(node, context)
57 | break
58 | case NodeTypes.SIMPLE_EXPRESSION:
59 | genExpression(node, context)
60 | break
61 | case NodeTypes.ELEMENT:
62 | genElement(node, context)
63 | break
64 | case NodeTypes.COMPOUND_EXPRESSION:
65 | genCompoundExpression(node, context)
66 | break
67 | default:
68 | break
69 | }
70 | }
71 |
72 | function genCompoundExpression(node: any, context: any) {
73 | const { push } = context
74 | const children = node.children
75 | for (let i = 0; i < children.length; i++) {
76 | const child = children[i];
77 | if (isString(child)) {
78 | push(child)
79 | } else {
80 | genNode(child, context)
81 | }
82 | }
83 | }
84 |
85 | function genElement(node: any, context: any) {
86 | const { push, helper } = context
87 | const { tag, children, props } = node
88 | push(`${helper(CREATE_ELEMENT_VNODE)}(`)
89 | // genNode(children, context)
90 | genNodeList(genNullable([tag, props, children]), context)
91 | push(')')
92 | }
93 |
94 | function genNodeList(nodes, context) {
95 | const { push } = context
96 | for (let i = 0; i < nodes.length; i++) {
97 | const node = nodes[i];
98 | if (isString(node)) {
99 | push(node)
100 | } else {
101 | genNode(node, context)
102 | }
103 |
104 | if (i < nodes.length - 1) {
105 | push(", ")
106 | }
107 | }
108 | }
109 |
110 | function genNullable(args: any) {
111 | return args.map((arg) => arg || "null")
112 | }
113 |
114 | function genText(node: any, context: any) {
115 | const { push } = context
116 | push(`'${node.content}'`)
117 | }
118 |
119 | function genExpression(node: any, context: any) {
120 | const { push } = context
121 | push(`${node.content}`)
122 | }
123 |
124 | function genInterpolation(node: any, context: any) {
125 | // Implement
126 | const { push, helper } = context
127 | push(`${helper(TO_DISPLAY_STRING)}(`)
128 | genNode(node.content, context)
129 | push(')')
130 | }
131 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/compiler-core/src/compile.ts:
--------------------------------------------------------------------------------
1 | import { generate } from "./codegen"
2 | import { baseParse } from "./parse"
3 | import { transform } from "./transform"
4 | import { transformElement } from "./transforms/transformElement"
5 | import { transformExpression } from "./transforms/transformExpression"
6 | import { transformText } from "./transforms/transformText"
7 |
8 | export function baseCompile(template) {
9 | const ast: any = baseParse(template)
10 | transform(ast, {
11 | nodeTransforms: [transformExpression, transformElement, transformText],
12 | })
13 |
14 | return generate(ast)
15 | }
16 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/compiler-core/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./compile"
2 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/compiler-core/src/parse.ts:
--------------------------------------------------------------------------------
1 | import { NodeTypes } from "./ast"
2 |
3 | const enum TagType {
4 | Start,
5 | End
6 | }
7 | export function baseParse(content: string) {
8 | const context = createParseContext(content)
9 | return createRoot(parseChildren(context, []))
10 | }
11 |
12 | function parseChildren(context, ancestors) {
13 | let nodes: any = []
14 |
15 | while(!isEnd(context, ancestors)) {
16 | let node
17 | const s = context.source
18 | if (s.startsWith("{{")) {
19 | node = parseInterpolation(context)
20 | } else if (s[0] === "<") {
21 | if (/[a-z]/i.test(s[1])) {
22 | node = parseElement(context, ancestors)
23 | }
24 | }
25 |
26 | if (!node) {
27 | node = parseText(context)
28 | }
29 | nodes.push(node)
30 | }
31 | return nodes
32 | }
33 |
34 | function isEnd(context, ancestors) {
35 | // 2.当遇到结束标签的时候
36 | const s = context.source
37 | if (s.startsWith("= 0; i--) {
39 | const tag = ancestors[i].tag;
40 | if (startsWithEndTagOpen(s, tag)) {
41 | return true
42 | }
43 | }
44 | }
45 | // 1. source 有值的时候
46 | return !s
47 | }
48 |
49 | function parseText(context: any) {
50 | let endIndex = context.source.length
51 | let endTokens = ["<", "{{"]
52 |
53 | for (let i = 0; i < endTokens.length; i++) {
54 | const index = context.source.indexOf(endTokens[i]);
55 | if (index !== -1 && endIndex > index) {
56 | endIndex = index;
57 | }
58 | }
59 |
60 | // 1. 获取content
61 | const content = parseTextData(context, endIndex)
62 |
63 | return {
64 | type: NodeTypes.TEXT,
65 | content,
66 | }
67 | }
68 |
69 | function parseTextData(context: any, length: number) {
70 | const content = context.source.slice(0, length)
71 |
72 | // 2. 推进
73 | advanceBy(context, length)
74 | return content
75 | }
76 |
77 | function parseElement(context: any, ancestors) {
78 | // Implement
79 | // 1. 解析 tag
80 | const element:any = parseTag(context, TagType.Start)
81 | ancestors.push(element)
82 | element.children = parseChildren(context, ancestors)
83 | ancestors.pop()
84 |
85 | if (startsWithEndTagOpen(context.source, element.tag)) {
86 | parseTag(context, TagType.End)
87 | } else {
88 | throw new Error(`缺少结束标签：${element.tag}`)
89 | }
90 | return element
91 | }
92 |
93 | function startsWithEndTagOpen(source, tag) {
94 | return (
95 | source.startsWith(" {
6 | // 中间处理层
7 | // tag
8 | const vnodeTag = `'${node.tag}'`
9 |
10 | // props
11 | let vnodeProps
12 |
13 | // children
14 | const children = node.children
15 | let vnodeChildren = children[0]
16 |
17 | node.codegenNode = createVNodeCall(
18 | context,
19 | vnodeTag,
20 | vnodeProps,
21 | vnodeChildren
22 | )
23 | }
24 | }
25 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/compiler-core/src/transforms/transformExpression.ts:
--------------------------------------------------------------------------------
1 | import { NodeTypes } from "../ast";
2 |
3 |
4 | export function transformExpression(node) {
5 | if (node.type === NodeTypes.INTERPOLATION) {
6 | node.content = processExpression(node.content)
7 | }
8 | }
9 |
10 | function processExpression(node: any) {
11 | node.content = `_ctx.${node.content}`
12 | return node
13 | }
14 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/compiler-core/src/transforms/transformText.ts:
--------------------------------------------------------------------------------
1 | import { NodeTypes } from "../ast";
2 | import { isText } from "../utils";
3 |
4 | export function transformText(node) {
5 | if (node.type === NodeTypes.ELEMENT) {
6 | return () => {
7 | const { children } = node
8 |
9 | let currentContainer
10 | for (let i = 0; i < children.length; i++) {
11 | const child = children[i];
12 |
13 | if (isText(child)) {
14 | for (let j = i + 1; j < children.length; j++) {
15 | const next = children[j];
16 |
17 | if (isText(next)) {
18 | if (!currentContainer) {
19 | currentContainer = children[i] = {
20 | type: NodeTypes.COMPOUND_EXPRESSION,
21 | children: [child]
22 | }
23 | }
24 |
25 | currentContainer.children.push(" + ")
26 | currentContainer.children.push(next)
27 | children.splice(j, 1)
28 | j--
29 | } else {
30 | currentContainer = undefined
31 | break
32 | }
33 | }
34 | }
35 | }
36 | }
37 | }
38 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/compiler-core/src/utils.ts:
--------------------------------------------------------------------------------
1 | import { NodeTypes } from "./ast"
2 | export function isText(node) {
3 | return (
4 | node.type === NodeTypes.TEXT || node.type === NodeTypes.INTERPOLATION
5 | )
6 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/reactivity/__tests__/computed.spec.ts:
--------------------------------------------------------------------------------
1 | import { computed } from "../src/computed"
2 | import { reactive } from "../src/reactive"
3 | import { vi } from 'vitest'
4 |
5 | describe('reactivity/computed', () => {
6 | it('happy path', () => {
7 | // ref
8 | // .value
9 | // 1. 缓存
10 | const user = reactive({
11 | age: 1
12 | })
13 | const age = computed(() => {
14 | return user.age
15 | })
16 | expect(age.value).toBe(1)
17 | })
18 |
19 | it('should compute lazily', () => {
20 | const value = reactive({
21 | foo: 1
22 | })
23 | const getter = vi.fn(() => {
24 | return value.foo
25 | })
26 | const cValue = computed(getter)
27 |
28 | // lazy
29 | expect(getter).not.toHaveBeenCalled()
30 | expect(cValue.value).toBe(1)
31 | expect(getter).toHaveBeenCalledTimes(1)
32 |
33 | // should not compute again
34 | cValue.value
35 | expect(getter).toHaveBeenCalledTimes(1)
36 |
37 | // should not compute until needed
38 | value.foo = 2 // 触发trigger -> effect -> set 重新执行了
39 | expect(getter).toHaveBeenCalledTimes(1)
40 |
41 | // now it should compute
42 | expect(cValue.value).toBe(2)
43 | expect(getter).toHaveBeenCalledTimes(2)
44 |
45 | // should not compute again
46 | cValue.value
47 | expect(getter).toHaveBeenCalledTimes(2)
48 | })
49 | })
--------------------------------------------------------------------------------
/tiny-vue3/packages/reactivity/__tests__/effect.spec.ts:
--------------------------------------------------------------------------------
1 | import { reactive } from '../src/reactive'
2 | import { effect, stop } from '../src/effect'
3 | import { vi } from 'vitest'
4 |
5 | describe('effect', () => {
6 | it('happy path', () => {
7 | const user = reactive({
8 | age: 10
9 | })
10 |
11 | let nextAge
12 | effect(() => {
13 | nextAge = user.age + 1
14 | })
15 |
16 | expect(nextAge).toBe(11)
17 |
18 | // update
19 | user.age++
20 | expect(nextAge).toBe(12)
21 | })
22 |
23 | it('should return runner when you call effect', () => {
24 | // 1. effect(fn) -> function(runner) -> fn -> return
25 | let foo = 10
26 | const runner = effect(() => {
27 | foo++
28 | return 'foo'
29 | })
30 |
31 | expect(foo).toBe(11)
32 | const r = runner()
33 | expect(foo).toBe(12)
34 | expect(r).toBe('foo')
35 | })
36 |
37 | it('scheduler', () => {
38 | // 1. 通过 effect 的第二参数给定的一个 scheduler 的 fn
39 | // 2. effect 第一次执行的时候还会执行 fn
40 | // 3. 当响应式对象 set update 不会执行 fn 而是执行 scheduler
41 | // 4. 如果说当执行 runner 的时候，会再次执行 fn
42 | let dummy
43 | let run: any
44 | const scheduler = vi.fn(() => {
45 | run = runner
46 | })
47 | const obj = reactive({ foo: 1 })
48 | const runner = effect(
49 | () => {
50 | dummy = obj.foo
51 | },
52 | { scheduler }
53 | )
54 | expect(scheduler).not.toHaveBeenCalled()
55 | expect(dummy).toBe(1)
56 | // should be called on first trigger
57 | // TODO 下面的有误
58 | obj.foo++
59 | expect(scheduler).toHaveBeenCalledTimes(1)
60 | // should not run yet
61 | expect(dummy).toBe(1)
62 | // manually run
63 | run()
64 | // should have run
65 | expect(dummy).toBe(2)
66 | })
67 |
68 | it('stop', () => {
69 | let dummy
70 | const obj = reactive({ prop: 1 })
71 | const runner = effect(() => {
72 | dummy = obj.prop
73 | })
74 | obj.prop = 2
75 | expect(dummy).toBe(2)
76 | stop(runner)
77 | // obj.prop = 3
78 | obj.prop++
79 | expect(dummy).toBe(2)
80 |
81 | // stopped effect should still be manually callable
82 | runner()
83 | expect(dummy).toBe(3)
84 | })
85 |
86 | it('onStop', () => {
87 | const obj = reactive({ foo: 1 })
88 | const onStop = vi.fn()
89 | let dummy
90 | const runner = effect(
91 | () => {
92 | dummy = obj.foo
93 | },
94 | {
95 | onStop
96 | }
97 | )
98 |
99 | stop(runner)
100 | expect(onStop).toBeCalledTimes(1)
101 | })
102 | })
--------------------------------------------------------------------------------
/tiny-vue3/packages/reactivity/__tests__/reactive.spec.ts:
--------------------------------------------------------------------------------
1 | import { reactive, isReactive, isProxy } from '../src/reactive'
2 |
3 | describe("reactive", () => {
4 | it("happy path", () => {
5 | const original = { foo: 1}
6 | const observed = reactive(original)
7 | expect(observed).not.toBe(original)
8 | expect(observed.foo).toBe(1)
9 | expect(isReactive(observed)).toBe(true)
10 | expect(isReactive(original)).toBe(false)
11 | expect(isProxy(original)).toBe(false)
12 | })
13 |
14 | test("nested reactive", () => {
15 | const original = {
16 | nested: {
17 | foo: 1
18 | },
19 | array: [{ bar: 2}]
20 | }
21 | const observed = reactive(original)
22 | expect(isReactive(observed.nested)).toBe(true)
23 | expect(isReactive(observed.array)).toBe(true)
24 | expect(isReactive(observed.array[0])).toBe(true)
25 |
26 | })
27 | })
--------------------------------------------------------------------------------
/tiny-vue3/packages/reactivity/__tests__/readonly.spec.ts:
--------------------------------------------------------------------------------
1 | import { isReadonly, readonly, isProxy } from '../src/reactive'
2 | import { vi } from 'vitest'
3 | describe('readonly', () => {
4 | it("happy path", () => {
5 | // no set
6 | const original = { foo: 1, bar: { baz: 2 } }
7 | const wrapped = readonly(original)
8 | expect(wrapped).not.toBe(original)
9 | expect(isReadonly(wrapped)).toBe(true)
10 | expect(isReadonly(original)).toBe(false)
11 | expect(isReadonly(wrapped.bar)).toBe(true)
12 | expect(isReadonly(original.bar)).toBe(false)
13 | expect(isProxy(wrapped)).toBe(true)
14 | })
15 |
16 | it("should call console.warn when set", () => {
17 | // console.warn()
18 | // mock
19 | console.warn = vi.fn()
20 |
21 | const user = readonly({
22 | age: 10
23 | })
24 |
25 | user.age = 11
26 | expect(console.warn).toBeCalled()
27 | })
28 | })
--------------------------------------------------------------------------------
/tiny-vue3/packages/reactivity/__tests__/ref.spec.ts:
--------------------------------------------------------------------------------
1 | import { effect } from "../src/effect"
2 | import { reactive } from "../src/reactive"
3 | import { ref, isRef, unRef, proxyRefs } from "../src/ref"
4 |
5 | describe("ref", () => {
6 | it('happy path', () => {
7 | const a = ref(1)
8 | expect(a.value).toBe(1)
9 | // a.value = 2
10 | // expect(a.value).toBe(2)
11 | })
12 |
13 | it('should be reactive', () => {
14 | const a = ref(1)
15 | let dummy
16 | let calls = 0
17 | effect(() => {
18 | calls++
19 | dummy = a.value
20 | })
21 | expect(calls).toBe(1)
22 | expect(dummy).toBe(1)
23 | a.value = 2
24 | expect(calls).toBe(2)
25 | expect(dummy).toBe(2)
26 | // same value should not trigger
27 | a.value = 2
28 | expect(calls).toBe(2)
29 | expect(dummy).toBe(2)
30 | })
31 |
32 | it('should make nested properties reactive', () => {
33 | const a = ref({
34 | count: 1
35 | })
36 | let dummy
37 | effect(() => {
38 | dummy = a.value.count
39 | })
40 | expect(dummy).toBe(1)
41 | a.value.count = 2
42 | expect(dummy).toBe(2)
43 | })
44 |
45 | it("isRef", () => {
46 | const a = ref(1)
47 | const user = reactive({
48 | age: 1
49 | })
50 | expect(isRef(a)).toBe(true)
51 | expect(isRef(1)).toBe(false)
52 | expect(isRef(user)).toBe(false)
53 | })
54 |
55 | it("unRef", () => {
56 | const a = ref(1)
57 | expect(unRef(a)).toBe(1)
58 | expect(unRef(1)).toBe(1)
59 | })
60 |
61 | it("proxyRefs", () => {
62 | const user = {
63 | age: ref(10),
64 | name: "chan"
65 | }
66 | // get -> age
67 | // ref -> 那么给他返回.value
68 | // not ref -> value
69 | const proxyUser = proxyRefs(user)
70 | expect(user.age.value).toBe(10)
71 | expect(proxyUser.age).toBe(10)
72 | expect(proxyUser.name).toBe('chan')
73 |
74 | // set -> ref .value
75 | proxyUser.age = 20
76 | expect(proxyUser.age).toBe(20)
77 | expect(user.age.value).toBe(20)
78 |
79 | proxyUser.age = ref(10)
80 | expect(user.age.value).toBe(10)
81 | expect(proxyUser.age).toBe(10)
82 | })
83 | })
--------------------------------------------------------------------------------
/tiny-vue3/packages/reactivity/__tests__/shallowReadonly.spec.ts:
--------------------------------------------------------------------------------
1 | import { isReadonly, shallowReadonly } from '../src/reactive'
2 | import { vi } from 'vitest'
3 |
4 | describe("shallowReadonly", () => {
5 | test("should not make non-reactive properties reactive", () => {
6 | const props = shallowReadonly({ n: { foo: 1} })
7 | expect(isReadonly(props)).toBe(true)
8 | expect(isReadonly(props.n)).toBe(true)
9 | })
10 | it("should call console.warn when set", () => {
11 | // console.warn()
12 | // mock
13 | console.warn = vi.fn()
14 |
15 | const user = shallowReadonly({
16 | age: 10
17 | })
18 |
19 | user.age = 11
20 | expect(console.warn).toHaveBeenCalled()
21 | })
22 | })
--------------------------------------------------------------------------------
/tiny-vue3/packages/reactivity/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@tiny-vue/reactivity",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "@tiny-vue/shared": "workspace:^1.0.0"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/reactivity/src/baseHandlers.ts:
--------------------------------------------------------------------------------
1 | import { track, trigger } from "./effect"
2 | import { reactive, readonly, ReactiveFlags } from "./reactive"
3 | import { extend, isObject } from "@tiny-vue/shared"
4 |
5 | const get = createGetter()
6 | const set = createSetter()
7 | const readonlyGet = createGetter(true)
8 | const shallowReadonlyGet = createGetter(true)
9 |
10 | function createGetter(isReadonly = false, shallow = false) {
11 | return function get(target, key) {
12 | if (key === ReactiveFlags.IS_REACTIVE) {
13 | return !isReadonly
14 | } else if (key === ReactiveFlags.IS_READONLY) {
15 | return isReadonly
16 | }
17 | const res = Reflect.get(target, key)
18 |
19 | if (shallow) {
20 | return res
21 | }
22 |
23 | // 看看res是不是object
24 | if (isObject(res)) {
25 | return isReadonly ? readonly(res) : reactive(res)
26 | }
27 |
28 | if (!isReadonly) {
29 | // 依赖收集
30 | track(target, key)
31 | }
32 | return res
33 | }
34 | }
35 |
36 | function createSetter() {
37 | return function set(target, key, value) {
38 | const res = Reflect.set(target, key, value)
39 |
40 | // 触发依赖
41 | trigger(target, key)
42 | return res
43 | }
44 | }
45 |
46 | export const mutableHandler = {
47 | get,
48 | set
49 | }
50 |
51 | export const readonlyHandlers = {
52 | get: readonlyGet,
53 | set(target, key, value) {
54 | console.warn(`key: ${key} set 失败，因为 target 是 readonly`, target)
55 | return true
56 | }
57 | }
58 |
59 | export const shallowReadonlyHandlers = extend({}, readonlyHandlers, {
60 | get: shallowReadonlyGet
61 | })
--------------------------------------------------------------------------------
/tiny-vue3/packages/reactivity/src/computed.ts:
--------------------------------------------------------------------------------
1 | import { ReactiveEffect } from './effect';
2 |
3 | class ComputedRefImpl {
4 | private _getter:any
5 | private _dirty:boolean = true
6 | private _value:any
7 | private _effect:any
8 | constructor(getter) {
9 | this._getter = getter
10 | this._effect = new ReactiveEffect(getter, () => {
11 | if (!this._dirty) {
12 | this._dirty = true
13 | }
14 | })
15 | }
16 | get value() {
17 | // get
18 | // get value -> dirty(true)
19 | // 当依赖的响应式对象的值发生改变的时候
20 | // effect
21 | if (this._dirty) {
22 | this._dirty = false
23 | this._value = this._effect.run()
24 | }
25 | return this._value
26 | }
27 | }
28 |
29 |
30 | export function computed(getter) {
31 | return new ComputedRefImpl(getter)
32 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/reactivity/src/effect.ts:
--------------------------------------------------------------------------------
1 | import { extend } from "@tiny-vue/shared"
2 |
3 |
4 | let activeEffect
5 | let shouldTrack
6 | export class ReactiveEffect {
7 | private _fn: any
8 | deps = []
9 | active = true
10 | onStop?:() => void
11 | constructor(fn, public scheduler?) {
12 | this._fn = fn
13 | }
14 |
15 | run() {
16 | activeEffect = this
17 | // 1. 会收集依赖
18 | // shouldTrack 来做区分
19 | if (!this.active) {
20 | return this._fn()
21 | }
22 | shouldTrack = true
23 | activeEffect = this
24 |
25 | const result = this._fn()
26 | // reset
27 | shouldTrack = false
28 | return result
29 | }
30 | stop() {
31 | if (this.active) {
32 | cleanupEffect(this)
33 | if (this.onStop) {
34 | this.onStop()
35 | }
36 | this.active = false
37 | }
38 | }
39 | }
40 |
41 | function cleanupEffect(effect) {
42 | effect.deps.forEach((dep: any) => {
43 | dep.delete(effect)
44 | });
45 | effect.deps.length = 0
46 | }
47 |
48 | const targetMap = new Map()
49 | export function track(target, key) {
50 | // 判断是否处于收集状态
51 | if (!isTracking()) return
52 |
53 | // target -> key -> dep
54 | let desMap = targetMap.get(target)
55 | if (!desMap) {
56 | desMap = new Map()
57 | targetMap.set(target, desMap)
58 | }
59 |
60 | let dep = desMap.get(key)
61 | if(!dep) {
62 | dep = new Set()
63 | desMap.set(key, dep)
64 | }
65 |
66 | trackEffects(dep)
67 | }
68 |
69 | export function trackEffects(dep) {
70 | // 看看dep之前有没有添加过，添加过就不添加了
71 | if (dep.has(activeEffect)) return
72 | dep.add(activeEffect)
73 | activeEffect.deps.push(dep)
74 | }
75 |
76 | export function isTracking() {
77 | return shouldTrack && activeEffect !== undefined
78 | }
79 |
80 | export function trigger(target, key) {
81 | let desMap = targetMap.get(target)
82 | let dep = desMap.get(key)
83 | triggerEffects(dep)
84 | }
85 |
86 | export function triggerEffects(dep) {
87 | for(const effect of dep) {
88 | if (effect.scheduler) {
89 | effect.scheduler()
90 | } else {
91 | effect.run()
92 | }
93 | }
94 | }
95 |
96 | export function effect(fn, options:any = {}) {
97 | // fn
98 | const _effect = new ReactiveEffect(fn, options.scheduler)
99 |
100 | extend(_effect, options)
101 |
102 | _effect.run()
103 |
104 | const runner:any = _effect.run.bind(_effect)
105 | runner.effect = _effect
106 |
107 | return runner
108 | }
109 |
110 | export function stop(runner) {
111 | runner.effect.stop()
112 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/reactivity/src/index.ts:
--------------------------------------------------------------------------------
1 | // 创建第一个测试用例
2 | // export function add(a, b) {
3 | // return a + b
4 | // }
5 |
6 | export {
7 | effect,
8 | stop
9 | } from "./effect";
10 |
11 | export {
12 | isReactive,
13 | isReadonly,
14 | isProxy,
15 | reactive,
16 | readonly,
17 | shallowReadonly,
18 | } from "./reactive";
19 |
20 | export { ref, proxyRefs, unRef, isRef } from "./ref";
--------------------------------------------------------------------------------
/tiny-vue3/packages/reactivity/src/reactive.ts:
--------------------------------------------------------------------------------
1 | import { isObject } from "@tiny-vue/shared"
2 | import { mutableHandler, readonlyHandlers, shallowReadonlyHandlers } from "./baseHandlers"
3 |
4 | export const enum ReactiveFlags{
5 | IS_REACTIVE = "__v_isReactive",
6 | IS_READONLY = "__v_isReadonly"
7 | }
8 |
9 | export function reactive(raw) {
10 | return createReactiveObject(raw, mutableHandler)
11 | }
12 |
13 | export function readonly(raw) {
14 | return createReactiveObject(raw, readonlyHandlers)
15 | }
16 |
17 | export function shallowReadonly(raw) {
18 | return createReactiveObject(raw, shallowReadonlyHandlers)
19 | }
20 |
21 | export function isReactive(value) {
22 | return !!value[ReactiveFlags.IS_REACTIVE]
23 | }
24 |
25 | export function isReadonly(value) {
26 | return !!value[ReactiveFlags.IS_READONLY]
27 | }
28 |
29 | export function isProxy(value) {
30 | return isReactive(value) || isReadonly(value)
31 | }
32 |
33 | function createReactiveObject(target:any, baseHandlers) {
34 | if (!isObject(target)) {
35 | console.warn(`target ${target} 必须是一个对象`)
36 | return target
37 | }
38 | return new Proxy(target, baseHandlers)
39 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/reactivity/src/ref.ts:
--------------------------------------------------------------------------------
1 | import { hasChanged, isObject } from "@tiny-vue/shared"
2 | import { reactive } from "./reactive"
3 | import { isTracking, trackEffects, triggerEffects } from "./effect"
4 |
5 | class RefImpl {
6 | private _value: any
7 | public dep
8 | private _rawValue: any
9 | public __v_isRef = true
10 | constructor(value) {
11 | this._rawValue = value
12 | this._value = convert(value)
13 | // value -> reactive
14 | // 1. 看看value是不是对象
15 | this.dep = new Set()
16 | }
17 | get value() {
18 | trackRefValue(this)
19 | return this._value
20 | }
21 | set value(newValue) {
22 | // 判断新旧值是否相等，相等返回
23 | // 不相等，修改旧值
24 | // newValue -> this._value
25 | if (hasChanged(this._value, newValue)) {
26 | this._rawValue = newValue
27 | this._value = convert(newValue)
28 | triggerEffects(this.dep)
29 | }
30 | }
31 | }
32 |
33 | function convert(value) {
34 | return isObject(value) ? reactive(value) : value
35 | }
36 |
37 | export function trackRefValue(ref) {
38 | if(isTracking()) {
39 | trackEffects(ref.dep)
40 | }
41 | }
42 |
43 | export function ref(value) {
44 | return new RefImpl(value)
45 | }
46 |
47 | export function isRef(ref) {
48 | return !!ref.__v_isRef
49 | }
50 |
51 | export function unRef(ref) {
52 | // 判断是否 ref -> ref.value
53 | return isRef(ref) ? ref.value : ref
54 | }
55 |
56 | export function proxyRefs(objectWithRefs) {
57 | return new Proxy(objectWithRefs, {
58 | get(target, key) {
59 | // get -> age
60 | // ref -> 那么给他返回.value
61 | // not ref -> value
62 | return unRef(Reflect.get(target, key))
63 | },
64 | set(target, key, value) {
65 | // set -> ref .value
66 | if (isRef(target[key]) && !isRef(value)) {
67 | return target[key].value = value
68 | } else {
69 | return Reflect.set(target, key, value)
70 | }
71 | }
72 | })
73 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/__tests__/apiWatch.spec.ts:
--------------------------------------------------------------------------------
1 | import { reactive } from "@tiny-vue/reactivity";
2 | import { nextTick } from "../src/scheduler";
3 | import { vi } from "vitest";
4 | import { watchEffect } from "../src/apiWatch";
5 |
6 | describe("api: watch", () => {
7 | it("effect",async () => {
8 | const state = reactive({ count: 0 })
9 | let dummy
10 | watchEffect(() => {
11 | dummy = state.count
12 | })
13 | expect(dummy).toBe(0)
14 |
15 | state.count++
16 | await nextTick()
17 | expect(dummy).toBe(1)
18 | })
19 |
20 | it.todo("stopping the watcher (effect)", async () => {
21 | const state = reactive({ count: 0})
22 | let dummy
23 | const stop: any = watchEffect(() => {
24 | dummy = state.count
25 | })
26 | expect(dummy).toBe(0)
27 |
28 | stop()
29 | state.count++
30 | await nextTick()
31 | // should not update
32 | expect(dummy).toBe(0)
33 | })
34 |
35 | it.todo("cleanup registration (effect)", async () => {
36 | const state = reactive({ count: 0 })
37 | const cleanup = vi.fn()
38 | let dummy
39 | const stop: any = watchEffect((onCleanup) => {
40 | onCleanup(cleanup)
41 | dummy = state.count
42 | })
43 | expect(dummy).toBe(0)
44 |
45 | state.count++
46 | await nextTick()
47 | // should not update
48 | expect(cleanup).toHaveBeenCalledTimes(1)
49 | expect(dummy).toBe(1)
50 |
51 | stop()
52 | expect(cleanup).toHaveBeenCalledTimes(2)
53 | })
54 | })
55 |
56 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@tiny-vue/runtime-core",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "@tiny-vue/reactivity": "workspace:^1.0.0",
14 | "@tiny-vue/shared": "workspace:^1.0.0"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/apiInject.ts:
--------------------------------------------------------------------------------
1 | import { getCurrentInstance } from "./component";
2 |
3 |
4 | export function provide(key, value) {
5 | // 存
6 | // key value
7 | const currentInstance:any = getCurrentInstance()
8 | if(currentInstance) {
9 | let { provides } = currentInstance
10 | const parentProvides = currentInstance.parent.provides
11 |
12 | // init
13 | if (provides === parentProvides) {
14 | provides = currentInstance.provides = Object.create(parentProvides)
15 | }
16 | provides[key] = value
17 | }
18 | }
19 |
20 | export function inject(key, defaultValue) {
21 | // 取
22 | const currentInstance:any = getCurrentInstance()
23 | if(currentInstance) {
24 | const parentProvides = currentInstance.parent.provides
25 | if (key in parentProvides) {
26 | return parentProvides[key]
27 | } else if (defaultValue) {
28 | if (typeof defaultValue === "function") {
29 | return defaultValue()
30 | }
31 | return defaultValue
32 | }
33 | }
34 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/apiWatch.ts:
--------------------------------------------------------------------------------
1 | import { ReactiveEffect } from "../../reactivity/src/effect"
2 | import { queuePreFlushCb } from "./scheduler"
3 |
4 | export function watchEffect(source) {
5 | function job() {
6 | effect.run()
7 | }
8 |
9 | let cleanup
10 | const onCleanup = function(fn) {
11 | cleanup = effect.onStop = () => {
12 | fn()
13 | }
14 | }
15 |
16 | function getter() {
17 | if (cleanup) {
18 | cleanup()
19 | }
20 |
21 | source(onCleanup)
22 | }
23 | const effect = new ReactiveEffect(getter, () => {
24 | queuePreFlushCb(job)
25 | })
26 |
27 | effect.run()
28 |
29 | return () => {
30 | effect.stop()
31 | }
32 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/component.ts:
--------------------------------------------------------------------------------
1 | import { PublicInstanceProxyHandlers } from "./componentPublicInstance"
2 | import { initProps } from "./componentProps"
3 | import { emit } from "./componentEmit"
4 | import { initSlots } from "./componentSlots"
5 | import { proxyRefs, shallowReadonly } from "@tiny-vue/reactivity"
6 |
7 | export function createComponentInstance(vnode, parent) {
8 | console.log("createComponentInstance", parent)
9 | const component = {
10 | vnode,
11 | type: vnode.type,
12 | next: null,
13 | setupState: {},
14 | props: {},
15 | slots: {},
16 | provides: parent ? parent.provides : {},
17 | parent,
18 | isMounted: false,
19 | subTree: {},
20 | emit: () => {}
21 | }
22 | component.emit = emit.bind(null, component) as any
23 | return component
24 | }
25 |
26 | export function setupComponents(instance) {
27 | initProps(instance, instance.vnode.props)
28 | initSlots(instance, instance.vnode.children)
29 | setupStatefulComponent(instance)
30 | }
31 |
32 | function setupStatefulComponent(instance: any) {
33 | const Component = instance.type
34 |
35 | // ctx
36 | instance.proxy = new Proxy({_: instance}, PublicInstanceProxyHandlers)
37 |
38 | const { setup } = Component
39 |
40 | if (setup) {
41 | setCurrentInstance(instance)
42 | const setupResult = setup(shallowReadonly(instance.props), {
43 | emit: instance.emit
44 | })
45 | setCurrentInstance(null)
46 |
47 | handleSetupResult(instance, setupResult)
48 | }
49 | }
50 |
51 | function handleSetupResult(instance, setupResult: any) {
52 | if (typeof setupResult === "object") {
53 | instance.setupState = proxyRefs(setupResult)
54 | }
55 |
56 | finishComponentSetup(instance)
57 | }
58 |
59 | function finishComponentSetup(instance: any) {
60 | const Component = instance.type
61 | if (compiler && !Component.render) {
62 | if (Component.template) {
63 | Component.render = compiler(Component.template)
64 | }
65 | }
66 |
67 | // template
68 | instance.render = Component.render
69 | }
70 |
71 | let currentInstance = null
72 | export function getCurrentInstance() {
73 | return currentInstance
74 | }
75 |
76 | export function setCurrentInstance(instance) {
77 | currentInstance = instance
78 | }
79 |
80 | let compiler
81 | export function registerRuntimeCompiler(_compiler) {
82 | compiler = _compiler
83 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/componentEmit.ts:
--------------------------------------------------------------------------------
1 | import { toHandlerKey, camelize } from "@tiny-vue/shared";
2 |
3 | export function emit(instance, event, ...args) {
4 | console.log("emit", event);
5 |
6 | // instance.props -> event
7 | const { props } = instance
8 |
9 | // TPP
10 | // 先去写一个特定的行为 -> 重构成通用的行为
11 | // add
12 | // const handler = props["onAdd"]
13 |
14 | // 重构
15 | // add -> Add
16 | // add-foo -> addFoo
17 | const handlerName = toHandlerKey(camelize(event))
18 | const handler = props[handlerName]
19 | handler && handler(...args)
20 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/componentProps.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 | export function initProps(instance, rawProps) {
4 | instance.props = rawProps || {}
5 | // attrs
6 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/componentPublicInstance.ts:
--------------------------------------------------------------------------------
1 | import { hasOwn } from "@tiny-vue/shared"
2 |
3 | const publicPropertiesMap = {
4 | $el: (i) => i.vnode.el,
5 | $slots: (i) => i.slots,
6 | $props: (i) => i.props
7 | }
8 |
9 |
10 | export const PublicInstanceProxyHandlers = {
11 | get({ _: instance }, key) {
12 | // setupState
13 | const { setupState, props } = instance
14 |
15 | if (hasOwn(setupState, key)) {
16 | return setupState[key]
17 | } else if (hasOwn(props, key)) {
18 | return props[key]
19 | }
20 |
21 | const publicGetter = publicPropertiesMap[key]
22 | if (publicGetter) {
23 | return publicGetter(instance)
24 | }
25 | }
26 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/componentSlots.ts:
--------------------------------------------------------------------------------
1 | import { ShapeFlags } from "@tiny-vue/shared"
2 |
3 | export function initSlots(instance, children) {
4 | // slots
5 | const { vnode } = instance
6 | if (vnode.shapeFlag & ShapeFlags.SLOT_CHILDREN) {
7 | normalizeObjectSlots(children, instance.slots)
8 | }
9 | }
10 |
11 | function normalizeObjectSlots(children: any, slots: any) {
12 | for (const key in children) {
13 | const value = children[key]
14 | slots[key] = (props) => normalizeSlotValue(value(props))
15 | }
16 | }
17 |
18 | function normalizeSlotValue(value) {
19 | return Array.isArray(value) ? value : [value]
20 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/componentUpdateUtils.ts:
--------------------------------------------------------------------------------
1 | export function shouldUpdateComponent(prevVNode, nextVNode) {
2 | const { props: prevProps } = prevVNode
3 | const { props: nextProps } = nextVNode
4 | for (const key in nextProps) {
5 | if (nextProps[key] !== prevProps[key]) {
6 | return true
7 | }
8 | }
9 | return false
10 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/createApp.ts:
--------------------------------------------------------------------------------
1 | import { createVNode } from "./vnode"
2 |
3 | // render
4 | export function createAppAPI(render) {
5 | return function createApp(rootComponent) {
6 | return {
7 | mount(rootContainer) {
8 | // 先转换为 vnode
9 | // component -> vnode
10 | // 后续所有的逻辑操作都会基于 vnode 处理
11 | const vnode = createVNode(rootComponent)
12 | render(vnode, rootContainer)
13 | }
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/h.ts:
--------------------------------------------------------------------------------
1 | import { createVNode } from "./vnode";
2 |
3 | export function h(type, props?, children?) {
4 | return createVNode(type, props, children)
5 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/helpers/renderSlots.ts:
--------------------------------------------------------------------------------
1 | import { createVNode, Fragment } from "../vnode";
2 |
3 | export function renderSlots(slots, name, props) {
4 | const slot = slots[name]
5 | if (slot) {
6 | // function
7 | if (typeof slot === "function") {
8 | // children 是不可以有 array
9 | // 只需要把 children
10 | return createVNode(Fragment, {}, slot(props))
11 | }
12 | }
13 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/index.ts:
--------------------------------------------------------------------------------
1 | export { h } from "./h"
2 | export { renderSlots } from "./helpers/renderSlots"
3 | export { createTextVNode, createElementVNode } from "./vnode"
4 | export { getCurrentInstance, registerRuntimeCompiler } from "./component"
5 | export { provide, inject } from "./apiInject"
6 | export { createRenderer } from "./renderer"
7 | export { nextTick } from "./scheduler"
8 | export { toDisplayString } from "@tiny-vue/shared";
9 | export * from "@tiny-vue/reactivity";
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/renderer.ts:
--------------------------------------------------------------------------------
1 | import { createComponentInstance, setupComponents } from "./component"
2 | import { ShapeFlags, EMPTY_OBJ } from "@tiny-vue/shared"
3 | import { Fragment, Text } from "./vnode"
4 | import { createAppAPI } from "./createApp"
5 | import { effect } from "@tiny-vue/reactivity"
6 | import { shouldUpdateComponent } from "./componentUpdateUtils"
7 | import { queueJobs } from "./scheduler"
8 |
9 | export function createRenderer(options) {
10 | const {
11 | createElement: hostCreateElement,
12 | patchProp: hostPatchProp,
13 | insert: hostInsert,
14 | remove: hostRemove,
15 | setElementText: hostSetElementText
16 | } = options
17 |
18 | function render(vnode, container) {
19 | // patch
20 | patch(null, vnode, container, null, null)
21 | }
22 |
23 | // n1 -> 老的
24 | // n2 -> 新的
25 | function patch(n1, n2, container, parentComponent, anchor) {
26 | // ShapeFlags
27 | // vnode -> flag
28 | // 判断vnode是 element 和 component 类型\
29 |
30 | const { type, shapeFlag } = n2
31 |
32 | // Fragment -> 只渲染 children
33 | switch (type) {
34 | case Fragment:
35 | processFragment(n1, n2, container, parentComponent, anchor)
36 | break
37 | case Text:
38 | processText(n1, n2, container)
39 | break
40 | default:
41 | if (shapeFlag & ShapeFlags.ELEMENT) { // element
42 | processElement(n1, n2, container, parentComponent, anchor)
43 | } else if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) { // STATEFUL_COMPONENT
44 | // 处理组件
45 | processComponent(n1, n2, container, parentComponent, anchor)
46 | }
47 | break
48 | }
49 | }
50 |
51 | function processText(n1, n2:any, container:any) {
52 | const { children } = n2
53 | const textNode = (n2.el = document.createTextNode(children))
54 | container.append(textNode)
55 | }
56 |
57 | function processFragment(n1, n2:any, container:any, parentComponent, anchor) {
58 | // Implement
59 | mountChildren(n2.children, container, parentComponent, anchor)
60 | }
61 |
62 | function processElement(n1, n2: any, container: any, parentComponent, anchor) {
63 | if (!n1) {
64 | mountElement(n2, container, parentComponent, anchor)
65 | } else {
66 | patchElement(n1, n2, container, parentComponent, anchor)
67 | }
68 | }
69 |
70 | function patchElement(n1, n2, container, parentComponent, anchor) {
71 | console.log("patchElement");
72 | console.log("n1", n1);
73 | console.log("n2", n2);
74 |
75 | // props
76 | // children
77 | const oldProps = n1.props || EMPTY_OBJ
78 | const newProps = n2.props || EMPTY_OBJ
79 |
80 | const el = (n2.el = n1.el)
81 |
82 | patchChildren(n1, n2, el, parentComponent, anchor)
83 | patchProps(el, oldProps, newProps)
84 | }
85 |
86 | function patchChildren(n1, n2, container, parentComponent, anchor) {
87 | const prevShapeFlag = n1.shapeFlag
88 | const c1 = n1.children
89 | const { shapeFlag } = n2
90 | const c2 = n2.children
91 |
92 | if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
93 | // children
94 | if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
95 | // 1. 把老的 children 清空
96 | unmountChildren(n1.children)
97 | // 2. 设置 text
98 | // hostSetElementText(container, c2)
99 | }
100 | // text
101 | if (c1 !== c2) {
102 | hostSetElementText(container, c2)
103 | }
104 | } else {
105 | // new array
106 | if (prevShapeFlag & ShapeFlags.TEXT_CHILDREN) {
107 | hostSetElementText(container, "")
108 | mountChildren(c2, container, parentComponent, anchor)
109 | } else {
110 | // array diff array
111 | patchKeyedChildren(c1, c2, container, parentComponent, anchor)
112 | }
113 | }
114 | }
115 |
116 | function patchKeyedChildren(c1, c2, container, parentComponent, parentAnchor) {
117 | let i = 0
118 | const l2 = c2.length
119 | let e1 = c1.length - 1
120 | let e2 = l2 - 1
121 |
122 | function isSomeVNodeType(n1, n2) {
123 | // type
124 | // key
125 | return n1.type === n2.type && n1.key === n2.key
126 | }
127 |
128 | // 左侧
129 | while (i <= e1 && i <= e2) {
130 | const n1 = c1[i]
131 | const n2 = c2[i]
132 | if (isSomeVNodeType(n1, n2)) {
133 | patch(n1, n2, container, parentComponent, parentAnchor)
134 | } else {
135 | break
136 | }
137 | i++
138 | }
139 |
140 | // 右侧
141 | while (i <= e1 && i <= e2) {
142 | const n1 = c1[e1]
143 | const n2 = c2[e2]
144 | if (isSomeVNodeType(n1, n2)) {
145 | patch(n1, n2, container, parentComponent, parentAnchor)
146 | } else {
147 | break
148 | }
149 | e1--
150 | e2--
151 | }
152 |
153 | // 3. 新的比老的多 创建
154 | if (i > e1) {
155 | if (i <= e2) {
156 | const nextPos = e2 + 1
157 | const anchor = nextPos < l2 ? c2[nextPos].el : null
158 | while(i <= e2) {
159 | patch(null, c2[i], container, parentComponent, anchor)
160 | i++
161 | }
162 | }
163 | } else if (i > e2) { // 4. 老的比新的多 删除
164 | while (i <= e1) {
165 | hostRemove(c1[i].el)
166 | i++
167 | }
168 | } else {
169 | // 中间对比
170 | let s1 = i
171 | let s2 = i
172 |
173 | const toBePatched = e2 - s2 + 1
174 | let patched = 0
175 | // 存储新表的映射关系
176 | const keyToNewIndexMap = new Map()
177 | // 新序列索引映射关系表
178 | const newIndexToOldIndexMap = new Array(toBePatched)
179 | let moved = false
180 | let maxNewIndexSoFar = 0
181 |
182 | for (let i = 0; i < toBePatched; i++) {
183 | // 初始化
184 | newIndexToOldIndexMap[i] = 0
185 | }
186 |
187 | for (let i = s2; i <= e2; i++) {
188 | const nextChild = c2[i]
189 | // 设置新表的映射关系
190 | keyToNewIndexMap.set(nextChild.key, i)
191 | }
192 |
193 | for (let i = s1; i <= e1; i++) {
194 | const preChild = c1[i]
195 |
196 | if (patched >= toBePatched) {
197 | hostRemove(preChild.el)
198 | continue
199 | }
200 |
201 | // null undefined
202 | let newIndex;
203 | if (preChild.key !== null) {
204 | // 获取新表的映射关系
205 | newIndex = keyToNewIndexMap.get(preChild.key)
206 | } else {
207 | for (let j = s2; j <= e2; j++) {
208 | if (isSomeVNodeType(preChild, c2[j])) {
209 | newIndex = j
210 | break
211 | }
212 | }
213 | }
214 |
215 | if (newIndex === undefined) {
216 | hostRemove(preChild.el)
217 | } else {
218 | if (newIndex >= maxNewIndexSoFar) {
219 | maxNewIndexSoFar = newIndex
220 | } else {
221 | moved = true
222 | }
223 |
224 | newIndexToOldIndexMap[newIndex - s2] = i + 1
225 | patch(preChild, c2[newIndex], container, parentComponent, null)
226 | patched++
227 | }
228 | }
229 |
230 | const increasingNewIndexSequence = moved ? getSequence(newIndexToOldIndexMap) : []
231 | let j = increasingNewIndexSequence.length - 1
232 |
233 | for (let i = toBePatched - 1; i >= 0; i--) {
234 | const nextIndex = i + s2
235 | const nextChild = c2[nextIndex]
236 | const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : null
237 |
238 | if (newIndexToOldIndexMap[i] === 0) {
239 | patch(null, nextChild, container, parentComponent, anchor)
240 | } else if (moved) {
241 | if (j < 0 || i !== increasingNewIndexSequence[j]) {
242 | console.log("移动位置");
243 | hostInsert(nextChild.el, container, anchor)
244 | } else {
245 | j--
246 | }
247 | }
248 | }
249 | }
250 | }
251 |
252 | function unmountChildren(children) {
253 | for (let i = 0; i < children.length; i++) {
254 | const el = children[i].el
255 | // remove
256 | hostRemove(el)
257 | }
258 | }
259 |
260 | function patchProps(el, oldProps, newProps) {
261 | if (oldProps !== newProps) {
262 | for (const key in newProps) {
263 | const prevProp = oldProps[key]
264 | const nextProp = newProps[key]
265 |
266 | if (prevProp !== nextProp) {
267 | hostPatchProp(el, key, prevProp, nextProp)
268 | }
269 | }
270 |
271 | if (oldProps !== EMPTY_OBJ) {
272 | for (const key in oldProps) {
273 | if (!(key in newProps)) {
274 | hostPatchProp(el, key, oldProps[key], null)
275 | }
276 | }
277 | }
278 | }
279 | }
280 |
281 | function mountElement(vnode: any, container: any, parentComponent, anchor) {
282 | // vnode -> element - div
283 |
284 | // canvas -> new Element
285 | const el = (vnode.el = hostCreateElement(vnode.type))
286 |
287 | // string array
288 | const { children, shapeFlag } = vnode
289 | if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
290 | // text_children
291 | el.textContent = children
292 | } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
293 | // array_children
294 | mountChildren(vnode.children, el, parentComponent, anchor)
295 | }
296 |
297 | // props
298 | const { props } = vnode
299 | for (const key in props) {
300 | const val = props[key]
301 |
302 | hostPatchProp(el, key, null, val)
303 | }
304 |
305 | // container.append(el)
306 |
307 | // canvas -> addChild()
308 | hostInsert(el, container, anchor)
309 | }
310 |
311 | function mountChildren(children, container, parentComponent, anchor) {
312 | children.forEach((v) => {
313 | patch(null, v, container, parentComponent, anchor)
314 | })
315 | }
316 |
317 | function processComponent(n1, n2: any, container: any, parentComponent, anchor) {
318 | if (!n1) {
319 | mountComponent(n2, container, parentComponent, anchor)
320 | } else {
321 | updateComponent(n1, n2)
322 | }
323 | }
324 |
325 | function updateComponent(n1, n2) {
326 | const instance = (n2.component = n1.component)
327 | if (shouldUpdateComponent(n1, n2)) {
328 | instance.next = n2
329 | instance.update()
330 | } else {
331 | n2.el = n1.el
332 | }
333 | }
334 |
335 | function mountComponent(initialVNode: any, container: any, parentComponent, anchor) {
336 | const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent))
337 | setupComponents(instance)
338 | setupRenderEffect(instance, initialVNode, container, anchor)
339 | }
340 |
341 | function setupRenderEffect(instance: any, initialVNode: any, container: any, anchor) {
342 | instance.update = effect(() => {
343 | if (!instance.isMounted) {
344 | // init
345 | console.log("init");
346 | const { proxy } = instance
347 | const subTree = (instance.subTree = instance.render.call(proxy, proxy))
348 | console.log(subTree);
349 | // vnode -> patch
350 | // vnode -> element -> mountElement
351 | patch(null, subTree, container, instance, anchor)
352 |
353 | // element -> mount
354 | initialVNode.el = subTree.el
355 |
356 | instance.isMounted = true
357 | } else {
358 | // update
359 | console.log("update");
360 | // 需要一个新的 vnode
361 | const { next, vnode } = instance
362 | if (next) {
363 | next.el = vnode.el
364 | updateComponentPreRender(instance, next)
365 | }
366 |
367 | const { proxy } = instance
368 | const subTree = instance.render.call(proxy, proxy)
369 | const preSubTree = instance.subTree
370 | instance.subTree = subTree
371 |
372 | patch(preSubTree, subTree, container, instance, anchor)
373 | }
374 | }, {
375 | scheduler() {
376 | console.log("update - scheduler");
377 | queueJobs(instance.update)
378 | }
379 | })
380 | }
381 |
382 | return {
383 | createApp: createAppAPI(render)
384 | }
385 | }
386 |
387 | function updateComponentPreRender(instance, nextVNode) {
388 | instance.vnode = nextVNode
389 | instance.next = null
390 | instance.props = nextVNode.props
391 | }
392 |
393 | // 最长递增子序列算法
394 | function getSequence(arr) {
395 | const p = arr.slice();
396 | const result = [0];
397 | let i, j, u, v, c;
398 | const len = arr.length;
399 | for (i = 0; i < len; i++) {
400 | const arrI = arr[i];
401 | if (arrI !== 0) {
402 | j = result[result.length - 1];
403 | if (arr[j] < arrI) {
404 | p[i] = j;
405 | result.push(i);
406 | continue;
407 | }
408 | u = 0;
409 | v = result.length - 1;
410 | while (u < v) {
411 | c = (u + v) >> 1;
412 | if (arr[result[c]] < arrI) {
413 | u = c + 1;
414 | } else {
415 | v = c;
416 | }
417 | }
418 | if (arrI < arr[result[u]]) {
419 | if (u > 0) {
420 | p[i] = result[u - 1];
421 | }
422 | result[u] = i;
423 | }
424 | }
425 | }
426 | u = result.length;
427 | v = result[u - 1];
428 | while (u-- > 0) {
429 | result[u] = v;
430 | v = p[v];
431 | }
432 | return result;
433 | }
434 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/scheduler.ts:
--------------------------------------------------------------------------------
1 |
2 | const queue: any[] = []
3 | const activePreFlushCbs: any[] = []
4 | const p = Promise.resolve()
5 | let isFlushPending = false
6 |
7 | export function nextTick(fn?) {
8 | return fn ? p.then(fn) : p
9 | }
10 |
11 | export function queueJobs(job) {
12 | if (!queue.includes(job)) {
13 | queue.push(job)
14 | }
15 |
16 | queueFlush()
17 | }
18 |
19 | export function queuePreFlushCb(job) {
20 | activePreFlushCbs.push(job)
21 | queueFlush()
22 | }
23 |
24 | function queueFlush() {
25 | if (isFlushPending) return
26 | isFlushPending = true
27 | nextTick(flushJobs)
28 | }
29 |
30 | function flushJobs() {
31 | isFlushPending = false
32 |
33 | //
34 | flushPreFlushCbs()
35 |
36 | // components render
37 | let job
38 | while((job = queue.shift())) {
39 | job && job()
40 | }
41 | }
42 |
43 | function flushPreFlushCbs() {
44 | for (let i = 0; i < activePreFlushCbs.length; i++) {
45 | activePreFlushCbs[i]()
46 | }
47 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-core/src/vnode.ts:
--------------------------------------------------------------------------------
1 | import { ShapeFlags } from "@tiny-vue/shared"
2 |
3 | export const Fragment = Symbol("Fragment")
4 | export const Text = Symbol("Text")
5 | export { createVNode as createElementVNode }
6 |
7 | export function createVNode(type, props?, children?) {
8 | const vnode = {
9 | type,
10 | props,
11 | children,
12 | component: null,
13 | key: props && props.key,
14 | shapeFlag: getShapeFlag(type),
15 | el: null
16 | }
17 |
18 | // children
19 | if (typeof children === "string") {
20 | vnode.shapeFlag |= ShapeFlags.TEXT_CHILDREN
21 | } else if (Array.isArray(children)) {
22 | vnode.shapeFlag |= ShapeFlags.ARRAY_CHILDREN
23 | }
24 |
25 | // 组件 + children object
26 | if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
27 | if (typeof children === "object") {
28 | vnode.shapeFlag |= ShapeFlags.SLOT_CHILDREN
29 | }
30 | }
31 |
32 | return vnode
33 | }
34 |
35 | export function createTextVNode(text: string) {
36 | return createVNode(Text, {}, text)
37 | }
38 |
39 | function getShapeFlag(type) {
40 | return typeof type === "string"
41 | ? ShapeFlags.ELEMENT
42 | : ShapeFlags.STATEFUL_COMPONENT
43 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-dom/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@tiny-vue/runtime-dom",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "@tiny-vue/runtime-core": "workspace:^1.0.0"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/runtime-dom/src/index.ts:
--------------------------------------------------------------------------------
1 | import { createRenderer } from "@tiny-vue/runtime-core";
2 |
3 | function createElement(type) {
4 | console.log("createElement========");
5 | return document.createElement(type)
6 | }
7 |
8 | function patchProp(el, key, preVal, nextVal) {
9 | // 具体的 click -> 通用
10 | // on + Event name -> onMousedown
11 | const isOn = (key:string) => /^on[A-Z]/.test(key)
12 | if (isOn(key)) {
13 | const event = key.slice(2).toLowerCase()
14 | el.addEventListener(event, nextVal)
15 | } else {
16 | if (nextVal === undefined || nextVal === null) {
17 | el.removeAttribute(key)
18 | } else {
19 | el.setAttribute(key, nextVal)
20 | }
21 | }
22 | }
23 |
24 | function insert(child, parent, anchor = null) {
25 | // parent.append(el)
26 | parent.insertBefore(child, anchor)
27 | }
28 |
29 | function remove(child) {
30 | const parent = child.parentNode
31 | if (parent) {
32 | parent.removeChild(child)
33 | }
34 | }
35 |
36 | function setElementText(el, text) {
37 | el.textContent = text
38 | }
39 |
40 | const renderer:any = createRenderer({
41 | createElement,
42 | patchProp,
43 | insert,
44 | remove,
45 | setElementText
46 | })
47 |
48 | export function createApp(...args) {
49 | return renderer.createApp(...args)
50 | }
51 |
52 | export * from "@tiny-vue/runtime-core";
53 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/shared/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@tiny-vue/shared",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC"
12 | }
13 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/shared/src/ShapeFlags.ts:
--------------------------------------------------------------------------------
1 | export const enum ShapeFlags {
2 | ELEMENT = 1, // 0001
3 | STATEFUL_COMPONENT = 1 << 1, // 0010
4 | TEXT_CHILDREN = 1 << 2, // 0100
5 | ARRAY_CHILDREN = 1 << 3, // 1000
6 | SLOT_CHILDREN = 1 << 4, // 10000
7 | }
8 |
9 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/shared/src/demo.ts:
--------------------------------------------------------------------------------
1 | const ShapeFlags = {
2 | element: 0,
3 | stateful_component: 0,
4 | text_children: 0,
5 | array_children: 0
6 | }
7 |
8 | // vnode -> stateful_component ->
9 | // key-value(不够高效)
10 | // 1. 可以设置 修改
11 | // ShapeFlags.stateful_component = 1;
12 | // ShapeFlags.array_children = 1
13 |
14 |
15 | // if (ShapeFlags.element)
16 | // if (ShapeFlags.stateful_component)
17 |
18 | // 不够高效 -> 位运算的方式
19 | // | 两位都为0， 才为0
20 | // & 两位都为1， 才为1
21 |
22 | // 0000
23 | // 0001 -> element
24 | // 0010 -> stateful
25 | // 0100 -> text_children
26 | // 1000 -> array_children
27 |
28 | // 修改
29 | // 0000 |
30 | // 0001
31 | // ————
32 | // 0001
33 |
34 | // 查找
35 | // 0001 &
36 | // 0001
37 | // ————
38 | // 0001
39 |
40 | // 0010
41 | // 0001
42 | // ————
43 | // 0000
44 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/shared/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./toDisplayString";
2 |
3 | export const extend = Object.assign
4 |
5 | export const EMPTY_OBJ = {}
6 |
7 | export const isObject = (value) => {
8 | return value !== null && typeof value === "object"
9 | }
10 |
11 | export const isString = (value) => {
12 | return typeof value === "string"
13 | }
14 |
15 | export const hasChanged = (oldValue, newValue) => {
16 | return !Object.is(oldValue, newValue)
17 | }
18 |
19 | export const hasOwn = (val, key) => {
20 | return Object.prototype.hasOwnProperty.call(val, key)
21 | }
22 |
23 | export const camelize = (str: string) => {
24 | return str.replace(/-(\w)/g, (_, c:string) => {
25 | return c ? c.toUpperCase() : ""
26 | })
27 | }
28 |
29 | const capitalize = (str: string) => {
30 | return str.charAt(0).toUpperCase() + str.slice(1)
31 | }
32 |
33 | export const toHandlerKey = (str: string) => {
34 | return str ? `on${capitalize(str)}` : ""
35 | }
36 |
37 | export { ShapeFlags } from "./ShapeFlags";
--------------------------------------------------------------------------------
/tiny-vue3/packages/shared/src/toDisplayString.ts:
--------------------------------------------------------------------------------
1 | export function toDisplayString(value) {
2 | return String(value);
3 | }
4 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/apiInject/App.js:
--------------------------------------------------------------------------------
1 | // 组件 provide 和 inject 功能
2 | import { h, provide, inject } from "../../dist/tiny-vue3.esm.js";
3 |
4 | const Provider = {
5 | name: "Provider",
6 | setup() {
7 | provide("foo", "fooVal");
8 | provide("bar", "barVal");
9 | },
10 | render() {
11 | return h("div", {}, [h("p", {}, "Provider"), h(ProviderTwo)]);
12 | },
13 | };
14 |
15 | const ProviderTwo = {
16 | name: "ProviderTwo",
17 | setup() {
18 | provide("foo", "fooTwo");
19 | const foo = inject("foo");
20 |
21 | return {
22 | foo,
23 | };
24 | },
25 | render() {
26 | return h("div", {}, [
27 | h("p", {}, `ProviderTwo foo:${this.foo}`),
28 | h(Consumer),
29 | ]);
30 | },
31 | };
32 |
33 | const Consumer = {
34 | name: "Consumer",
35 | setup() {
36 | const foo = inject("foo");
37 | const bar = inject("bar");
38 | // const baz = inject("baz", "bazDefault");
39 | const baz = inject("baz", () => "bazDefault");
40 |
41 | return {
42 | foo,
43 | bar,
44 | baz,
45 | };
46 | },
47 |
48 | render() {
49 | return h("div", {}, `Consumer: - ${this.foo} - ${this.bar}-${this.baz}`);
50 | },
51 | };
52 |
53 | export default {
54 | name: "App",
55 | setup() {},
56 | render() {
57 | return h("div", {}, [h("p", {}, "apiInject"), h(Provider)]);
58 | },
59 | };
60 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/apiInject/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
16 |
17 |
18 |
19 |
26 |
27 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/compiler-base/App.js:
--------------------------------------------------------------------------------
1 | import { ref } from "../../dist/tiny-vue3.esm.js";
2 |
3 | export const App = {
4 | name: "App",
5 | template: `hi, {{message}}, {{count}}
`,
6 | setup() {
7 | const count = (window.count = ref(1));
8 | return {
9 | count,
10 | message: 'tiny-vue3'
11 | };
12 | },
13 | };
14 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/compiler-base/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/compiler-base/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "../../dist/tiny-vue3.esm.js";
2 | import { App } from "./App.js";
3 |
4 | const rootContainer = document.querySelector("#app");
5 | createApp(App).mount(rootContainer);
6 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/componentEmit/App.js:
--------------------------------------------------------------------------------
1 | import { h } from "../../dist/tiny-vue3.esm.js"
2 | import { Foo } from "./Foo.js"
3 |
4 | export const App = {
5 | name: "App",
6 | render() {
7 | // emit
8 | return h("div", {}, [h("div", {}, "App"), h(Foo, {
9 | // on + Event
10 | onAdd(a, b) {
11 | console.log("Add", a, b);
12 | },
13 | // add-foo -> addFoo
14 | onAddFoo() {
15 | console.log("onAddFoo");
16 | }
17 | })])
18 | },
19 | setup() {
20 | return {
21 | }
22 | }
23 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/componentEmit/Foo.js:
--------------------------------------------------------------------------------
1 | import { h } from "../../dist/tiny-vue3.esm.js"
2 |
3 | export const Foo = {
4 | setup(props, {emit}) {
5 | const emitAdd = () => {
6 | emit("add", 1, 2)
7 | emit("add-foo")
8 | }
9 |
10 | return {
11 | emitAdd
12 | }
13 | },
14 | render() {
15 | const btn = h("button", {
16 | onClick: this.emitAdd
17 | }, "emitAdd")
18 |
19 | const foo = h("p", {}, "foo")
20 | return h("div", {}, [foo, btn])
21 | }
22 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/componentEmit/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/componentEmit/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "../../dist/tiny-vue3.esm.js"
2 | import { App } from "./App.js"
3 |
4 | const rootContainer = document.querySelector("#app")
5 | // vue3
6 | createApp(App).mount(rootContainer)
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/componentSlot/App.js:
--------------------------------------------------------------------------------
1 | import { h, createTextVNode } from "../../dist/tiny-vue3.esm.js"
2 | import { Foo } from "./Foo.js"
3 |
4 | export const App = {
5 | name: "App",
6 | render() {
7 | const app = h("div", {}, "App")
8 | // object key
9 | const foo = h(
10 | Foo,
11 | {},
12 | {
13 | header: ({age}) => [
14 | h("p", {}, "header" + age),
15 | createTextVNode("你好，世界！")
16 | ],
17 | footer: () => h("p", {}, "footer")
18 | }
19 | )
20 | // 数组 vnode
21 | // const foo = h(Foo, {}, h("p", {}, "123"))
22 |
23 | return h("div", {}, [app, foo])
24 | },
25 | setup() {
26 | return {
27 | }
28 | }
29 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/componentSlot/Foo.js:
--------------------------------------------------------------------------------
1 | import { h, renderSlots } from "../../dist/tiny-vue3.esm.js"
2 |
3 | export const Foo = {
4 | setup() {
5 | return {}
6 | },
7 | render() {
8 | const foo = h("p", {}, "foo")
9 |
10 | // Foo .vnode .children
11 | console.log(this.$slots);
12 | // children -> vnode
13 | //
14 | // renderSlots
15 | // 具名插槽
16 | // 1. 获取到要渲染的元素 1
17 | // 2. 要获取到渲染的位置
18 | // 作用域插槽
19 | const age = 18
20 | return h("div", {}, [
21 | renderSlots(this.$slots, "header", {
22 | age
23 | }),
24 | foo,
25 | renderSlots(this.$slots, "footer"),
26 | ])
27 | }
28 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/componentSlot/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/componentSlot/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "../../lib/tiny-vue3.esm.js"
2 | import { App } from "./App.js"
3 |
4 | const rootContainer = document.querySelector("#app")
5 | // vue3
6 | createApp(App).mount(rootContainer)
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/componentUpdate/App.js:
--------------------------------------------------------------------------------
1 | import { h, ref } from "../../dist/tiny-vue3.esm.js";
2 | import Child from "./Child.js";
3 |
4 | export const App = {
5 | name: "App",
6 | setup() {
7 | const msg = ref("123");
8 | const count = ref(1);
9 |
10 | window.msg = msg;
11 |
12 | const changeChildProps = () => {
13 | msg.value = "456";
14 | };
15 |
16 | const changeCount = () => {
17 | count.value++;
18 | };
19 |
20 | return { msg, changeChildProps, changeCount, count };
21 | },
22 |
23 | render() {
24 | return h("div", {}, [
25 | h("div", {}, "你好"),
26 | h(
27 | "button",
28 | {
29 | onClick: this.changeChildProps,
30 | },
31 | "change child props"
32 | ),
33 | h(Child, {
34 | msg: this.msg,
35 | }),
36 | h(
37 | "button",
38 | {
39 | onClick: this.changeCount,
40 | },
41 | "change self count"
42 | ),
43 | h("p", {}, "count: " + this.count),
44 | ]);
45 | },
46 | };
47 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/componentUpdate/Child.js:
--------------------------------------------------------------------------------
1 | import { h } from "../../dist/tiny-vue3.esm.js";
2 | export default {
3 | name: "Child",
4 | setup(props, { emit }) {},
5 | render(proxy) {
6 | return h("div", {}, [h("div", {}, "child - props - msg: " + this.$props.msg)]);
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/componentUpdate/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/componentUpdate/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "../../dist/tiny-vue3.esm.js";
2 | import { App } from "./App.js";
3 |
4 | const rootContainer = document.querySelector("#app");
5 | createApp(App).mount(rootContainer);
6 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/currentInstance/App.js:
--------------------------------------------------------------------------------
1 | import { h, getCurrentInstance } from "../../dist/tiny-vue3.esm.js"
2 | import { Foo } from "./Foo.js"
3 |
4 | export const App = {
5 | name: "App",
6 | render() {
7 | return h("div", {}, [h("p", {}, "currentInstance demo"), h(Foo)])
8 | },
9 | setup() {
10 | const instance = getCurrentInstance()
11 | console.log("App:", instance);
12 | }
13 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/currentInstance/Foo.js:
--------------------------------------------------------------------------------
1 | import { h, getCurrentInstance } from "../../dist/tiny-vue3.esm.js"
2 |
3 | export const Foo = {
4 | name: "Foo",
5 | render() {
6 | return h("div", {}, "foo")
7 | },
8 | setup() {
9 | const instance = getCurrentInstance()
10 | console.log("App:", instance);
11 | return {}
12 | }
13 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/currentInstance/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/currentInstance/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "../../dist/tiny-vue3.esm.js"
2 | import { App } from "./App.js"
3 |
4 | const rootContainer = document.querySelector("#app")
5 | // vue3
6 | createApp(App).mount(rootContainer)
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/customRenderer/App.js:
--------------------------------------------------------------------------------
1 | import { h } from "../../dist/tiny-vue3.esm.js"
2 |
3 | export const App = {
4 | setup() {
5 | return {
6 | x: 100,
7 | y: 100
8 | }
9 | },
10 | render() {
11 | return h("rect", {x: this.x, y: this.y})
12 | }
13 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/customRenderer/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/customRenderer/main.js:
--------------------------------------------------------------------------------
1 | import { createRenderer } from "../../dist/tiny-vue3.esm.js"
2 | import { App } from "./App.js"
3 |
4 | console.log(PIXI);
5 | const game = new PIXI.Application({
6 | width: 500,
7 | height: 500
8 | })
9 | document.body.append(game.view)
10 | const renderer = createRenderer({
11 | createElement(type) {
12 | const rect = new PIXI.Graphics()
13 | rect.beginFill(0xff0000)
14 | rect.drawRect(0, 0, 100, 100)
15 | rect.endFill()
16 | return rect
17 | },
18 | patchProp(el, key, val) {
19 | el[key] = val
20 | },
21 | insert(el, parent) {
22 | parent.addChild(el)
23 | }
24 | })
25 | // const rootContainer = document.querySelector("#app")
26 | // // vue3
27 | renderer.createApp(App).mount(game.stage)
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/helloworld/App.js:
--------------------------------------------------------------------------------
1 | import { h } from "../../dist/tiny-vue3.esm.js"
2 | import { Foo } from "./Foo.js"
3 |
4 | export const App = {
5 | name: "App",
6 | // .vue
7 | //
8 | // 必须要写 render
9 | render() {
10 | // ui
11 | window.self = this
12 | return h(
13 | "div", {
14 | id: "root",
15 | class: ["red", "test"],
16 | onClick() {
17 | console.log('click')
18 | },
19 | onMousedown() {
20 | console.log('mousedown')
21 | }
22 | },
23 | [h("div", {}, "hi," + this.msg), h(Foo, {
24 | count: 1
25 | })]
26 | // setupState
27 | // this.$el -> get root element
28 | // "hi, " + this.msg
29 | // string
30 | // "hi, tiny-vue3"
31 |
32 | // array
33 | // [h("p", { class: "red"}, "hi"), h("p", { class: "blue"}, "tiny-vue3")]
34 | )
35 | },
36 | setup() {
37 | // 可参考composition api
38 |
39 | return {
40 | msg: "tiny-vue3"
41 | }
42 | }
43 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/helloworld/Foo.js:
--------------------------------------------------------------------------------
1 | import { h } from "../../dist/tiny-vue3.esm.js"
2 |
3 | export const Foo = {
4 | setup(props) {
5 | // 1. 在setup中接收props
6 | // props.count
7 | console.log(props);
8 |
9 | // 3. props不可修改 shallow readonly
10 | props.count++
11 | console.log(props);
12 | },
13 | render() {
14 | // 2. 在render中可以访问props的属性
15 | return h("div", {}, "foo:" + this.count)
16 | }
17 | }
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/helloworld/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/helloworld/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "../../dist/tiny-vue3.esm.js"
2 | import { App } from "./App.js"
3 |
4 | const rootContainer = document.querySelector("#app")
5 | // vue3
6 | createApp(App).mount(rootContainer)
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/nextTicker/App.js:
--------------------------------------------------------------------------------
1 | import { h, ref, getCurrentInstance, nextTick } from "../../dist/tiny-vue3.esm.js";
2 |
3 | export const App = {
4 | name: "App",
5 |
6 | setup() {
7 | const count = ref(1);
8 | const instance = getCurrentInstance()
9 |
10 | function onClick(){
11 | for (let i = 0; i < 100; i++) {
12 | console.log("update");
13 | count.value = i
14 | }
15 |
16 | console.log(instance);
17 | nextTick(() => {
18 | console.log(instance);
19 | })
20 |
21 | // await nextTick()
22 | // console.log(instance);
23 | }
24 |
25 |
26 | return {
27 | count,
28 | onClick
29 | };
30 | },
31 | render() {
32 | const button = h("button", { onClick: this.onClick }, "update")
33 | const p = h("p", {}, "count: " + this.count)
34 | return h("div", {}, [button, p])
35 | },
36 | };
37 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/nextTicker/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/nextTicker/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "../../dist/tiny-vue3.esm.js";
2 | import { App } from "./App.js";
3 |
4 | const rootContainer = document.querySelector("#app");
5 | createApp(App).mount(rootContainer);
6 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/patchChildren/App.js:
--------------------------------------------------------------------------------
1 | import { h } from "../../dist/tiny-vue3.esm.js";
2 |
3 | import ArrayToText from "./ArrayToText.js";
4 | import TextToText from "./TextToText.js";
5 | import TextToArray from "./TextToArray.js";
6 | import ArrayToArray from "./ArrayToArray.js";
7 |
8 | export default {
9 | name: "App",
10 | setup() {},
11 |
12 | render() {
13 | return h("div", { tId: 1 }, [
14 | h("p", {}, "主页"),
15 | // 老的是 array 新的是 text
16 | // h(ArrayToText),
17 | // 老的是 text 新的是 text
18 | // h(TextToText),
19 | // 老的是 text 新的是 array
20 | // h(TextToArray)
21 | // 老的是 array 新的是 array
22 | h(ArrayToArray),
23 | ]);
24 | },
25 | };
26 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/patchChildren/ArrayToArray.js:
--------------------------------------------------------------------------------
1 | // 老的是 array
2 | // 新的是 array
3 |
4 | import { ref, h } from "../../dist/tiny-vue3.esm.js";
5 |
6 | // 1. 左侧的对比
7 | // (a b) c
8 | // (a b) d e
9 | // const prevChildren = [
10 | // h("p", { key: "A" }, "A"),
11 | // h("p", { key: "B" }, "B"),
12 | // h("p", { key: "C" }, "C"),
13 | // ];
14 | // const nextChildren = [
15 | // h("p", { key: "A" }, "A"),
16 | // h("p", { key: "B" }, "B"),
17 | // h("p", { key: "D" }, "D"),
18 | // h("p", { key: "E" }, "E"),
19 | // ];
20 |
21 | // 2. 右侧的对比
22 | // a (b c)
23 | // d e (b c)
24 | // const prevChildren = [
25 | // h("p", { key: "A" }, "A"),
26 | // h("p", { key: "B" }, "B"),
27 | // h("p", { key: "C" }, "C"),
28 | // ];
29 | // const nextChildren = [
30 | // h("p", { key: "D" }, "D"),
31 | // h("p", { key: "E" }, "E"),
32 | // h("p", { key: "B" }, "B"),
33 | // h("p", { key: "C" }, "C"),
34 | // ];
35 |
36 | // 3. 新的比老的长
37 | // 创建新的
38 | // 左侧
39 | // (a b)
40 | // (a b) c
41 | // i = 2, e1 = 1, e2 = 2
42 | // const prevChildren = [h("p", { key: "A" }, "A"), h("p", { key: "B" }, "B")];
43 | // const nextChildren = [
44 | // h("p", { key: "A" }, "A"),
45 | // h("p", { key: "B" }, "B"),
46 | // h("p", { key: "C" }, "C"),
47 | // h("p", { key: "D" }, "D"),
48 | // ];
49 |
50 | // 右侧
51 | // (a b)
52 | // c (a b)
53 | // i = 0, e1 = -1, e2 = 0
54 | // const prevChildren = [h("p", { key: "A" }, "A"), h("p", { key: "B" }, "B")];
55 | // const nextChildren = [
56 | // h("p", { key: "D" }, "D"),
57 | // h("p", { key: "C" }, "C"),
58 | // h("p", { key: "A" }, "A"),
59 | // h("p", { key: "B" }, "B"),
60 | // ];
61 |
62 | // 4. 老的比新的长
63 | // 删除老的
64 | // 左侧
65 | // (a b) c
66 | // (a b)
67 | // i = 2, e1 = 2, e2 = 1
68 | // const prevChildren = [
69 | // h("p", { key: "A" }, "A"),
70 | // h("p", { key: "B" }, "B"),
71 | // h("p", { key: "C" }, "C"),
72 | // ];
73 | // const nextChildren = [h("p", { key: "A" }, "A"), h("p", { key: "B" }, "B")];
74 |
75 | // 右侧
76 | // a (b c)
77 | // (b c)
78 | // i = 0, e1 = 0, e2 = -1
79 |
80 | // const prevChildren = [
81 | // h("p", { key: "A" }, "A"),
82 | // h("p", { key: "B" }, "B"),
83 | // h("p", { key: "C" }, "C"),
84 | // ];
85 | // const nextChildren = [h("p", { key: "B" }, "B"), h("p", { key: "C" }, "C")];
86 |
87 | // 5. 对比中间的部分
88 | // 删除老的 (在老的里面存在，新的里面不存在)
89 | // 5.1
90 | // a,b,(c,d),f,g
91 | // a,b,(e,c),f,g
92 | // D 节点在新的里面是没有的 - 需要删除掉
93 | // C 节点 props 也发生了变化
94 |
95 | // const prevChildren = [
96 | // h("p", { key: "A" }, "A"),
97 | // h("p", { key: "B" }, "B"),
98 | // h("p", { key: "C", id: "c-prev" }, "C"),
99 | // h("p", { key: "D" }, "D"),
100 | // h("p", { key: "F" }, "F"),
101 | // h("p", { key: "G" }, "G"),
102 | // ];
103 |
104 | // const nextChildren = [
105 | // h("p", { key: "A" }, "A"),
106 | // h("p", { key: "B" }, "B"),
107 | // h("p", { key: "E" }, "E"),
108 | // h("p", { key: "C", id:"c-next" }, "C"),
109 | // h("p", { key: "F" }, "F"),
110 | // h("p", { key: "G" }, "G"),
111 | // ];
112 |
113 | // 5.1.1
114 | // a,b,(c,e,d),f,g
115 | // a,b,(e,c),f,g
116 | // 中间部分，老的比新的多， 那么多出来的直接就可以被干掉(优化删除逻辑)
117 | // const prevChildren = [
118 | // h("p", { key: "A" }, "A"),
119 | // h("p", { key: "B" }, "B"),
120 | // h("p", { key: "C", id: "c-prev" }, "C"),
121 | // h("p", { key: "E" }, "E"),
122 | // h("p", { key: "D" }, "D"),
123 | // h("p", { key: "F" }, "F"),
124 | // h("p", { key: "G" }, "G"),
125 | // ];
126 |
127 | // const nextChildren = [
128 | // h("p", { key: "A" }, "A"),
129 | // h("p", { key: "B" }, "B"),
130 | // h("p", { key: "E" }, "E"),
131 | // h("p", { key: "C", id:"c-next" }, "C"),
132 | // h("p", { key: "F" }, "F"),
133 | // h("p", { key: "G" }, "G"),
134 | // ];
135 |
136 | // 2 移动 (节点存在于新的和老的里面，但是位置变了)
137 |
138 | // 2.1
139 | // a,b,(c,d,e),f,g
140 | // a,b,(e,c,d),f,g
141 | // 最长子序列： [1,2]
142 |
143 | // const prevChildren = [
144 | // h("p", { key: "A" }, "A"),
145 | // h("p", { key: "B" }, "B"),
146 | // h("p", { key: "C" }, "C"),
147 | // h("p", { key: "D" }, "D"),
148 | // h("p", { key: "E" }, "E"),
149 | // h("p", { key: "F" }, "F"),
150 | // h("p", { key: "G" }, "G"),
151 | // ];
152 |
153 | // const nextChildren = [
154 | // h("p", { key: "A" }, "A"),
155 | // h("p", { key: "B" }, "B"),
156 | // h("p", { key: "E" }, "E"),
157 | // h("p", { key: "C" }, "C"),
158 | // h("p", { key: "D" }, "D"),
159 | // h("p", { key: "F" }, "F"),
160 | // h("p", { key: "G" }, "G"),
161 | // ];
162 |
163 | // 3. 创建新的节点
164 | // a,b,(c,e),f,g
165 | // a,b,(e,c,d),f,g
166 | // d 节点在老的节点中不存在，新的里面存在，所以需要创建
167 | // const prevChildren = [
168 | // h("p", { key: "A" }, "A"),
169 | // h("p", { key: "B" }, "B"),
170 | // h("p", { key: "C" }, "C"),
171 | // h("p", { key: "E" }, "E"),
172 | // h("p", { key: "F" }, "F"),
173 | // h("p", { key: "G" }, "G"),
174 | // ];
175 |
176 | // const nextChildren = [
177 | // h("p", { key: "A" }, "A"),
178 | // h("p", { key: "B" }, "B"),
179 | // h("p", { key: "E" }, "E"),
180 | // h("p", { key: "C" }, "C"),
181 | // h("p", { key: "D" }, "D"),
182 | // h("p", { key: "F" }, "F"),
183 | // h("p", { key: "G" }, "G"),
184 | // ];
185 |
186 | // 综合例子
187 | // a,b,(c,d,e,z),f,g
188 | // a,b,(d,c,y,e),f,g
189 |
190 | // const prevChildren = [
191 | // h("p", { key: "A" }, "A"),
192 | // h("p", { key: "B" }, "B"),
193 | // h("p", { key: "C" }, "C"),
194 | // h("p", { key: "D" }, "D"),
195 | // h("p", { key: "E" }, "E"),
196 | // h("p", { key: "Z" }, "Z"),
197 | // h("p", { key: "F" }, "F"),
198 | // h("p", { key: "G" }, "G"),
199 | // ];
200 |
201 | // const nextChildren = [
202 | // h("p", { key: "A" }, "A"),
203 | // h("p", { key: "B" }, "B"),
204 | // h("p", { key: "D" }, "D"),
205 | // h("p", { key: "C" }, "C"),
206 | // h("p", { key: "Y" }, "Y"),
207 | // h("p", { key: "E" }, "E"),
208 | // h("p", { key: "F" }, "F"),
209 | // h("p", { key: "G" }, "G"),
210 | // ];
211 |
212 | // fix
213 | const prevChildren = [
214 | h("p", { key: "A" }, "A"),
215 | h("p", {}, "C"),
216 | h("p", { key: "B" }, "B"),
217 | h("p", { key: "D" }, "D"),
218 | ];
219 |
220 | const nextChildren = [
221 | h("p", { key: "A" }, "A"),
222 | h("p", { key: "B" }, "B"),
223 | h("p", {}, "C"),
224 | h("p", { key: "D" }, "D"),
225 | ];
226 |
227 | export default {
228 | name: "ArrayToArray",
229 | setup() {
230 | const isChange = ref(false);
231 | window.isChange = isChange;
232 |
233 | return {
234 | isChange,
235 | };
236 | },
237 | render() {
238 | const self = this;
239 |
240 | return self.isChange === true
241 | ? h("div", {}, nextChildren)
242 | : h("div", {}, prevChildren);
243 | },
244 | };
245 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/patchChildren/ArrayToText.js:
--------------------------------------------------------------------------------
1 | // 老的是 array
2 | // 新的是 text
3 |
4 | import { ref, h } from "../../dist/tiny-vue3.esm.js";
5 | const nextChildren = "newChildren";
6 | const prevChildren = [h("div", {}, "A"), h("div", {}, "B")];
7 |
8 | export default {
9 | name: "ArrayToText",
10 | setup() {
11 | const isChange = ref(false);
12 | window.isChange = isChange;
13 |
14 | return {
15 | isChange,
16 | };
17 | },
18 | render() {
19 | const self = this;
20 |
21 | return self.isChange === true
22 | ? h("div", {}, nextChildren)
23 | : h("div", {}, prevChildren);
24 | },
25 | };
26 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/patchChildren/TextToArray.js:
--------------------------------------------------------------------------------
1 | // 新的是 array
2 | // 老的是 text
3 | import { ref, h } from "../../dist/tiny-vue3.esm.js";
4 |
5 | const prevChildren = "oldChild";
6 | const nextChildren = [h("div", {}, "A"), h("div", {}, "B")];
7 |
8 | export default {
9 | name: "TextToArray",
10 | setup() {
11 | const isChange = ref(false);
12 | window.isChange = isChange;
13 |
14 | return {
15 | isChange,
16 | };
17 | },
18 | render() {
19 | const self = this;
20 |
21 | return self.isChange === true
22 | ? h("div", {}, nextChildren)
23 | : h("div", {}, prevChildren);
24 | },
25 | };
26 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/patchChildren/TextToText.js:
--------------------------------------------------------------------------------
1 | // 新的是 text
2 | // 老的是 text
3 | import { ref, h } from "../../dist/tiny-vue3.esm.js";
4 |
5 | const prevChildren = "oldChild";
6 | const nextChildren = "newChild";
7 |
8 | export default {
9 | name: "TextToText",
10 | setup() {
11 | const isChange = ref(false);
12 | window.isChange = isChange;
13 |
14 | return {
15 | isChange,
16 | };
17 | },
18 | render() {
19 | const self = this;
20 |
21 | return self.isChange === true
22 | ? h("div", {}, nextChildren)
23 | : h("div", {}, prevChildren);
24 | },
25 | };
26 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/patchChildren/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/patchChildren/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "../../dist/tiny-vue3.esm.js";
2 | import App from "./App.js";
3 |
4 | const rootContainer = document.querySelector("#root");
5 | createApp(App).mount(rootContainer);
6 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/update/App.js:
--------------------------------------------------------------------------------
1 | import { h, ref } from "../../dist/tiny-vue3.esm.js";
2 |
3 | export const App = {
4 | name: "App",
5 |
6 | setup() {
7 | const count = ref(0);
8 |
9 | const onClick = () => {
10 | count.value++;
11 | };
12 |
13 | const props = ref({
14 | foo: "foo",
15 | bar: "bar",
16 | });
17 | const onChangePropsDemo1 = () => {
18 | props.value.foo = "new-foo";
19 | };
20 |
21 | const onChangePropsDemo2 = () => {
22 | props.value.foo = undefined;
23 | };
24 |
25 | const onChangePropsDemo3 = () => {
26 | props.value = {
27 | foo: "foo",
28 | };
29 | };
30 |
31 | return {
32 | count,
33 | onClick,
34 | onChangePropsDemo1,
35 | onChangePropsDemo2,
36 | onChangePropsDemo3,
37 | props,
38 | };
39 | },
40 | render() {
41 | return h(
42 | "div",
43 | {
44 | id: "root",
45 | ...this.props,
46 | },
47 | [
48 | h("div", {}, "count:" + this.count),
49 |
50 | h(
51 | "button",
52 | {
53 | onClick: this.onClick,
54 | },
55 | "click"
56 | ),
57 |
58 | h(
59 | "button",
60 | {
61 | onClick: this.onChangePropsDemo1,
62 | },
63 | "changeProps - 值改变了 - 修改"
64 | ),
65 |
66 | h(
67 | "button",
68 | {
69 | onClick: this.onChangePropsDemo2,
70 | },
71 | "changeProps - 值变成了 undefined - 删除"
72 | ),
73 |
74 | h(
75 | "button",
76 | {
77 | onClick: this.onChangePropsDemo3,
78 | },
79 | "changeProps - key 在新的里面没有了 - 删除"
80 | )
81 | ]
82 | )
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/update/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/examples/update/main.js:
--------------------------------------------------------------------------------
1 |
2 | import { createApp } from "../../dist/tiny-vue3.esm.js"
3 | import { App } from "./App.js"
4 |
5 | const rootContainer = document.querySelector("#app")
6 | // vue3
7 | createApp(App).mount(rootContainer)
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@tiny-vue/vue",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "@tiny-vue/compiler-core": "workspace:^1.0.0",
14 | "@tiny-vue/runtime-dom": "workspace:^1.0.0"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/tiny-vue3/packages/vue/src/index.ts:
--------------------------------------------------------------------------------
1 | // mini-vue 出口
2 | export * from "@tiny-vue/runtime-dom"
3 | import { baseCompile } from "@tiny-vue/compiler-core"
4 | import * as runtimeDom from "@tiny-vue/runtime-dom"
5 | import { registerRuntimeCompiler } from "@tiny-vue/runtime-dom"
6 |
7 | function compileToFunction(template) {
8 | const { code } = baseCompile(template)
9 | const render = new Function("Vue", code)(runtimeDom)
10 | return render
11 | }
12 |
13 | registerRuntimeCompiler(compileToFunction)
14 |
--------------------------------------------------------------------------------
/tiny-vue3/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "packages/*"
--------------------------------------------------------------------------------
/tiny-vue3/rollup.config.js:
--------------------------------------------------------------------------------
1 | import pkg from './package.json'
2 | import typescript from "@rollup/plugin-typescript"
3 | export default {
4 | input: './packages/vue/src/index.ts',
5 | output: [
6 | // 1. cjs -> commonjs
7 | // 2. esm
8 | {
9 | format: "cjs",
10 | file: pkg.main
11 | },
12 | {
13 | format: "es",
14 | file: pkg.module
15 | }
16 | ],
17 | plugins: [
18 | typescript()
19 | ]
20 | }
--------------------------------------------------------------------------------
/tiny-vue3/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */
4 |
5 | /* Projects */
6 | // "incremental": true, /* Enable incremental compilation */
7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
8 | // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
12 |
13 | /* Language and Environment */
14 | "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
15 | "lib": ["DOM", "ES6", "ES2016"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
16 | // "jsx": "preserve", /* Specify what JSX code is generated. */
17 | // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
22 | // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
25 |
26 | /* Modules */
27 | "module": "esnext", /* Specify what module code is generated. */
28 | // "rootDir": "./", /* Specify the root folder within your source files. */
29 | "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
30 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
31 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
32 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
33 | // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */
34 | "types": ["vitest/globals"], /* Specify type package names to be included without being referenced in a source file. */
35 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
36 | // "resolveJsonModule": true, /* Enable importing .json files */
37 | // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */
38 |
39 | /* JavaScript Support */
40 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
41 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
42 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
43 |
44 | /* Emit */
45 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
46 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */
47 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
48 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */
49 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
50 | // "outDir": "./", /* Specify an output folder for all emitted files. */
51 | // "removeComments": true, /* Disable emitting comments. */
52 | // "noEmit": true, /* Disable emitting files from a compilation. */
53 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
54 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */
55 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
56 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
57 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
58 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
59 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
60 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
61 | // "newLine": "crlf", /* Set the newline character for emitting files. */
62 | // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
63 | // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */
64 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
65 | // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */
66 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */
67 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
68 |
69 | /* Interop Constraints */
70 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
71 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
72 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
73 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
74 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
75 |
76 | /* Type Checking */
77 | "strict": true, /* Enable all strict type-checking options. */
78 | "noImplicitAny": false, /* Enable error reporting for expressions and declarations with an implied `any` type.. */
79 | // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */
80 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
81 | // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
82 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
83 | // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */
84 | // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */
85 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
86 | // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */
87 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */
88 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
89 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
90 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
91 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
92 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
93 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */
94 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
95 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
96 |
97 | /* Completeness */
98 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
99 | "skipLibCheck": true, /* Skip type checking all .d.ts files. */
100 | "paths": {
101 | "@tiny-vue/*": [
102 | "./packages/*/src"
103 | ]
104 | }
105 | },
106 | "include": [
107 | "packages/*/src",
108 | "packages/*/__tests__"
109 | ]
110 | }
111 |
--------------------------------------------------------------------------------
/tiny-vue3/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vitest/config'
2 | import path from 'path'
3 |
4 | export default defineConfig({
5 | test: {
6 | globals: true
7 | },
8 | resolve: {
9 | alias: [
10 | {
11 | find: /@tiny-vue\/(\w*)/,
12 | replacement: path.resolve(__dirname, "packages") + "/$1/src"
13 | }
14 | ]
15 | }
16 | })
--------------------------------------------------------------------------------
/tiny-webpack/index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Befend/tiny-series/e9a65d6a22c5f5ba30a32a67dcda0413556893ed/tiny-webpack/index.html
--------------------------------------------------------------------------------