Repository navigation
Expand file tree
/
Copy pathmini-vue.js
More file actions
2008 lines (1716 loc) · 74.4 KB
/
Copy pathmini-vue.js
File metadata and controls
2008 lines (1716 loc) · 74.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/compiler/ast.js":
/*!*****************************!*\
!*** ./src/compiler/ast.js ***!
\*****************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "ElementTypes": () => (/* binding */ ElementTypes),
/* harmony export */ "NodeTypes": () => (/* binding */ NodeTypes),
/* harmony export */ "createRoot": () => (/* binding */ createRoot)
/* harmony export */ });
/* 定义不同的节点类型，如元素节点、属性节点、指令节点、文本节点、插值节点等，共有七种类型 */
const NodeTypes = {
ROOT: "ROOT" /* 根节点 */,
ELEMENT: "ELEMENT" /* 元素节点 */,
TEXT: "TEXT" /* 文本节点 */,
SIMPLE_EXPRESSION: "SIMPLE_EXPRESSION" /* 表达式节点 */,
INTERPOLATION: "INTERPOLATION" /* 插值节点 mustache语法 */,
ATTRIBUTE: "ATTRIBUTE" /* 属性节点 */,
DIRECTIVE: "DIRECTIVE" /* 指令节点 */,
};
const ElementTypes = {
ELEMENT: "ELEMENT" /* 普通标签 */,
COMPONENT: "COMPONENT" /* 组件，自定义标签 */,
};
function createRoot(children) {
return {
type: NodeTypes.ROOT,
children,
};
}
/***/ }),
/***/ "./src/compiler/codegen.js":
/*!*********************************!*\
!*** ./src/compiler/codegen.js ***!
\*********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "generate": () => (/* binding */ generate)
/* harmony export */ });
/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! . */ "./src/compiler/index.js");
/* harmony import */ var _runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../runtime */ "./src/runtime/index.js");
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils */ "./src/utils/index.js");
// 接受一段语法树，返回对应的以h函数代码片段形式表达的虚拟dom树
function generate(ast) {
return traverseNode(ast);
}
/**
* 编译节点树，关注四个基本的节点类型，生成h函数的字符串
* 注意，这些函数都是生成h函数的代码，即一段代码文本，而不是直接执行函数
* 刚开始执行必然是ROOT节点，parent首先是undefined，
* traverseChildren函数是parent参数的真正入口
* @param {*} node
* @returns
*/
function traverseNode(node, parent) {
// debugger;
switch (node.type) {
case ___WEBPACK_IMPORTED_MODULE_0__.NodeTypes.ROOT:
return traverseChildren(node);
case ___WEBPACK_IMPORTED_MODULE_0__.NodeTypes.ELEMENT:
// 指令节点都在元素节点中，处理元素节点的同时也处理指令节点
// 对于v-for v-if 等能够改变dom结构的结构型指令来说，需要配合runtime进行实现
// v-for使用renderList，
// traverseChildren是parent参数的真正入口
return resolveElementVNode(node, parent);
// return createElementVNode(node);
case ___WEBPACK_IMPORTED_MODULE_0__.NodeTypes.INTERPOLATION:
return createInterpolationVNode(node);
case ___WEBPACK_IMPORTED_MODULE_0__.NodeTypes.TEXT:
return createTextVNode(node);
default:
break;
}
}
/* 通过isStatic来判断是否为静态节点，从而生成对应的代码片段，如插值不需要引号，静态文本需要引号，注意是生成可执行的代码片段 */
function createText({ isStatic = true, content = "" } = {}) {
return isStatic ? JSON.stringify(content) : content;
}
function createTextVNode(node) {
return `h(Text, null, ${createText(node)})`;
}
/* 将插值节点也看成是虚拟dom的Text类型 */
function createInterpolationVNode(node) {
// return `h(Text, null, ${node.content.content})`;
return `h(Text, null, ${createText(node.content)})`;
}
function resolveElementVNode(node, parent) {
const { directives } = node;
// 特殊的指令如v-for，v-if处理，而普通的bind，on，v-model(on、bind的语法糖)等在createElementVNode中处理
const forNode = pluck(directives, "for");
if (forNode) {
// <div v-for="(item, index) in items">{{item + index}}</div>
// 编译目标
// h(
// Fragment,
// null,
// renderList(items, (item, index) => h('div', null, item + index))
// );
const [args, sources] = forNode.exp.content.split(/\sin\s|\sof\s/); // in of 相同
return `h(
Fragment,
null,
renderList(
${sources.trim()},
${args.trim()} => ${resolveElementVNode(node, parent)})
)`;
}
const ifNode = pluck(directives, "if") || pluck(directives, "else-if");
if (ifNode) {
// <div v-if="ok"></div>
// v-if编译目标
// ok ? h('div') : h(Text, null, ''); 空文本节点
// <h1 v-if="ok"></h1>
// <h2 v-else></h2>
// <h3></h3>
// v-else编译目标
// [
// ok ? h("h1") : h("h2"),
// h("h3")
// ]
// <h1 v-if="ok"></h1>
// <h2 v-else-if="ok2"></h2>
// v-else-if编译目标
// ok
// ? h('h1')
// : ok2
// ? h('h2')
// : h(Text, null, '');
const condition = ifNode.exp.content;
let ifExp = `${resolveElementVNode(node, parent)}`;
let elseExp = `h(Text, null, '')`; // 默认的else表达式
// 当前node是ifNode的父节点，elseNode存放于当前node的parent的后续children中，需要与当前node相邻，中间可以存在空白字符节点，只需要检查下一个Element类型的节点是否包含else指令，如果是需要删除中间的空白字符节点，不需要一直判断下去
// 需要parent节点才能拿到children，改造函数resolveElementVNode(node, parent)，traverseChildren是parent参数的真正入口
const ifIdx = parent.children.indexOf(node);
let idx = ifIdx;
while (idx < parent.children.length) {
const child = parent.children[++idx];
// 检查下一个ELEMENT节点，而不是下一个节点
if (child?.type === ___WEBPACK_IMPORTED_MODULE_0__.NodeTypes.ELEMENT) {
// 如果存在elseIfNode，删除中间空白节点，但是此时else-if不能删除，可以看成是小范围的if，在ifNode时删除即可
if (pluck(child.directives, "else-if", false)) {
parent.children.splice(ifIdx, idx - ifIdx);
elseExp = `${resolveElementVNode(child, parent)}`;
}
// 如果存在elseNode，删除中间的空白字符节点
if (pluck(child.directives, "else")) {
parent.children.splice(ifIdx, idx - ifIdx); // 需要先删除，否则会重复
elseExp = `${resolveElementVNode(child, parent)}`;
}
break; // 只检查下一个ELEMENT类型的节点
}
}
return `${condition} ? ${ifExp} : ${elseExp}`;
}
return createElementVNode(node);
}
function createElementVNode(node) {
// const tag = createText({ content: node.tag }); //创建文本
// 真实的场景中，还会有自定义组件，即通过components:{} 传入的组件名称，需要在createApp函数中获取组件的名称
let { tag, tagType } = node;
tag = createText({ content: tag }); // 无论是普通标签还是组件对象名称都是字符串
tag =
tagType === ___WEBPACK_IMPORTED_MODULE_0__.ElementTypes.ELEMENT
? tag // 普通类型
: `resolveComponent(${tag})`; // 组件对象类型，使用对应的方法获取
/* 不需要单独的判断子元素的个数，通过遍历即可，但是为了存储的优化，需要进行判断 */
const props = formatProps(node);
const children = traverseChildren(node);
if (props === "null" && children === "[]") {
return `h(${tag})`;
}
if (children === "[]") {
// 此时props不可能为 null
return `h(${tag}, ${props})`;
}
return `h(${tag}, ${props}, ${children})`; // props可能为null，符合正常逻辑
}
function createPropArr(node) {
const { props, directives } = node;
// v-model是一个on+bind的语法糖，使用map不会自动更新length，提前设置
const vModel = pluck(node.directives, "model");
if (vModel) {
directives.push(
{
type: ___WEBPACK_IMPORTED_MODULE_0__.NodeTypes.DIRECTIVE,
name: "bind",
exp: vModel.exp, // 表达式节点
arg: {
type: ___WEBPACK_IMPORTED_MODULE_0__.NodeTypes.SIMPLE_EXPRESSION,
content: "value",
isStatic: true,
}, // 表达式节点
},
{
type: ___WEBPACK_IMPORTED_MODULE_0__.NodeTypes.DIRECTIVE,
name: "on",
exp: {
type: ___WEBPACK_IMPORTED_MODULE_0__.NodeTypes.SIMPLE_EXPRESSION,
content: `($event) => ${vModel.exp.content} = $event.target.value`,
isStatic: false,
}, // 表达式节点
arg: {
type: ___WEBPACK_IMPORTED_MODULE_0__.NodeTypes.SIMPLE_EXPRESSION,
content: "input",
isStatic: true,
}, // 表达式节点
}
);
}
return [
...props.map((prop) => `${prop.name}: ${createText(prop.value)}`),
...directives.map((dir) => {
/* 从ast中抽出dirname */
switch (dir.name) {
case "bind":
return `${dir.arg.content}: ${createText(dir.exp)}`;
case "on":
const event = `on${(0,_utils__WEBPACK_IMPORTED_MODULE_2__.capitalize)(
dir.arg.content
)}`; /* 事件名称格式化，如onClick */
let exp = dir.exp.content;
/* 不包含 => 即不是一个箭头函数 */
if (
(/\([^)]*?\)$/.test(exp) || // 带有括号形式
/\+\+|--|\+=|-=|\*=|\/=|\%=|==|===/.test(exp)) && // ++ -- 形式
!exp.includes("=>") // 不是箭头函数
) {
exp = `$event => {${exp}}`;
}
return `${event}: ${exp}`;
case "html":
return `innerHTML: ${createText(dir.exp)}`;
default:
return `${dir.arg?.content || dir.name}: ${createText(dir.exp)}`;
// return dir; // 没有处理的不能原样返回
}
}),
];
}
function traverseChildren(node) {
const { children } = node;
// 多级嵌套需要使用递归的形式进行解析，h函数中，子元素应该使用中括号包裹
// 特别注意map会返回一个相同长度的数组，可能会返回item === undefined的元素，需要filter去除，或者使用reduce
return (
"[" +
children
.map((child) => traverseNode(child, node))
.filter((child) => child)
.join(", ") +
"]"
);
}
function formatProps(node) {
// 每一个不同的指令节点，不能共用，因为pluck会删除元素
/* 解析属性节点和指令节点，生成对应的字符串格式 */
const propArr = createPropArr(node);
return propArr?.length ? `{${propArr.join(", ")}}` : "null";
}
/**
* 表示接受一个指令集合、指令名称、是否移除指令
* @param {*} directives
* @param {*} name
* @param {Boolean} remove:true
*/
function pluck(directives = [], name, remove = true) {
const idx = directives.findIndex((dir) => dir.name === name); // 找对应名字的指令
const dir = directives[idx];
if (dir && remove) {
directives.splice(idx, 1); // 如果存在，并且需要删除，则删除对应的指令节点
}
return dir;
}
/***/ }),
/***/ "./src/compiler/compile.js":
/*!*********************************!*\
!*** ./src/compiler/compile.js ***!
\*********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "compile": () => (/* binding */ compile)
/* harmony export */ });
/* harmony import */ var _codegen__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./codegen */ "./src/compiler/codegen.js");
/* harmony import */ var _parse__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./parse */ "./src/compiler/parse.js");
function compile(template) {
const ast = (0,_parse__WEBPACK_IMPORTED_MODULE_1__.parse)(template); // 解析模板得到ast
const code = (0,_codegen__WEBPACK_IMPORTED_MODULE_0__.generate)(ast); // 解析ast得到一段可执行的代码
return code;
}
/***/ }),
/***/ "./src/compiler/index.js":
/*!*******************************!*\
!*** ./src/compiler/index.js ***!
\*******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "ElementTypes": () => (/* reexport safe */ _ast__WEBPACK_IMPORTED_MODULE_0__.ElementTypes),
/* harmony export */ "NodeTypes": () => (/* reexport safe */ _ast__WEBPACK_IMPORTED_MODULE_0__.NodeTypes),
/* harmony export */ "compile": () => (/* reexport safe */ _compile__WEBPACK_IMPORTED_MODULE_1__.compile),
/* harmony export */ "createRoot": () => (/* reexport safe */ _ast__WEBPACK_IMPORTED_MODULE_0__.createRoot),
/* harmony export */ "generate": () => (/* reexport safe */ _codegen__WEBPACK_IMPORTED_MODULE_2__.generate),
/* harmony export */ "parse": () => (/* reexport safe */ _parse__WEBPACK_IMPORTED_MODULE_3__.parse)
/* harmony export */ });
/* harmony import */ var _ast__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ast */ "./src/compiler/ast.js");
/* harmony import */ var _compile__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./compile */ "./src/compiler/compile.js");
/* harmony import */ var _codegen__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./codegen */ "./src/compiler/codegen.js");
/* harmony import */ var _parse__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./parse */ "./src/compiler/parse.js");
/***/ }),
/***/ "./src/compiler/parse.js":
/*!*******************************!*\
!*** ./src/compiler/parse.js ***!
\*******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "parse": () => (/* binding */ parse)
/* harmony export */ });
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ "./src/utils/index.js");
/* harmony import */ var _ast__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ast */ "./src/compiler/ast.js");
function parse(content) {
/* 保存原有字符串，并加上一些配置信息 */
const context = createParseContext(content);
/* 通过context及配置信息，编译children的ast */
const children = parseChildren(context);
/* 生成编译后带有根节点的初始抽象语法树 */
return (0,_ast__WEBPACK_IMPORTED_MODULE_1__.createRoot)(children);
}
function createParseContext(content) {
return {
options: {
delimiters: ["{{", "}}"], //分隔符，可配置,
isVoidTag: _utils__WEBPACK_IMPORTED_MODULE_0__.isVoidTag, // 为了跨平台设计的
isNativeTag: _utils__WEBPACK_IMPORTED_MODULE_0__.isNativeTag,
},
source: content, //source保存原有的模板字符串 */
};
}
function parseChildren(context) {
let nodes = [];
while (!isTextEnd(context)) {
const s = context.source;
// 分为三个阶段，
// 1. 解析元素节点，包括解析标签内部属性、指令等
// 2. 解析内部节点：分为两个 文本节点和插值节点
let node = null;
if (s.startsWith(context.options.delimiters[0])) {
// 如果是给定的分割符号
node = parseInterpolation(context);
} else if (s.startsWith("<")) {
// 如果是一个起始的标签
node = parseElement(context);
} else {
// 文本节点，假设给定的内容就是正常的，不含有特殊的符号
node = parseText(context);
}
nodes.push(node);
}
let removedWhiteSpaces = false;
// 对空白字符做优化处理
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
if (node.type === _ast__WEBPACK_IMPORTED_MODULE_1__.NodeTypes.TEXT) {
// 如果是文本节点，区分文本节点内容是否全是空白
// /^[\t\r\n\f ]*$/
// debugger
if (/[^\t\r\n\f ]/.test(node.content)) {
/* 如果文本内容有一些字符 */
node.content = node.content.replace(/[\t\r\n\f ]+/g, " "); // 将多个空格替换成一个空格
} else {
/* 如果全是空白，做出一些判断进行节点的删除 */
const prev = nodes[i - 1];
const next = nodes[i + 1];
// 如果其中一个为undefined或前后一个都是元素节点，并且node带有换行符，删除节点
if (
!prev ||
!next ||
(prev.type === _ast__WEBPACK_IMPORTED_MODULE_1__.NodeTypes.ELEMENT &&
next.type === _ast__WEBPACK_IMPORTED_MODULE_1__.NodeTypes.ELEMENT &&
/[\r\n]/.test(node.content))
) {
/* 删除节点 */
removedWhiteSpaces = true;
nodes[i] = null;
} else {
node.content = " ";
}
}
}
}
return removedWhiteSpaces ? nodes.filter((node) => node) : nodes;
}
function isTextEnd(context) {
const s = context.source;
return s === "" || s.startsWith("</");
}
function parseInterpolation(context) {
// 一种形式：遇到左大括号，即分隔符好的左符号
const [open, close] = context.options.delimiters;
advanceBy(context, open.length); // 移除左边分割符号
advanceSpaces(context);
const len = context.source.indexOf(close); // 不要和数组的方法findIndex混淆了
const content = sliceStr(context, len).trim(); // 获取插值变量，注意需要去除空格
advanceBy(context, close.length); // 移除右边分隔符号
// advanceSpaces(context); 此时不能移除剩余的空格，后续会有空格优化！如{{index}} : {{item}}
return {
type: _ast__WEBPACK_IMPORTED_MODULE_1__.NodeTypes.INTERPOLATION,
content: {
type: _ast__WEBPACK_IMPORTED_MODULE_1__.NodeTypes.SIMPLE_EXPRESSION,
content,
isStatic: false,
},
};
}
// <div id="foo" v-if="show">Text {{name}}</div>
function parseElement(context) {
// 解析分为三部分
// 1. 开始标签
// 2. children
// 3. 结束标签
// debugger;
const element = parseTag(context); // 开始标签
if (element.isSelfClosing) {
// 如果是自闭合的标签，可以返回
return element;
}
// debugger
element.children = parseChildren(context); // children
parseTag(context); // 结束标签
return element;
}
function parseTag(context) {
const match = /^<\/?([a-z][^\t\r\n\f />]*)/i.exec(context.source);
// 正则分组改变优先级, match[0]包含<，而match[1]不包含<，只是标签名
const tag = match[1]; // 标签名
advanceBy(context, match[0].length); // 去除<div
advanceSpaces(context); // 去除空格
/* 属性节点、指令节点 */
const { props, directives } = parseAttributes(context);
// 自闭合形式，但是<br>也是正确的，需要另外一个函数的辅助
const isSelfClosing =
context.source.startsWith("/>") || context.options.isVoidTag(tag);
advanceBy(context, isSelfClosing ? 2 : 1); // 自闭合截取2，非自闭合截取1
advanceSpaces(context); // 每当advanceBy后，需要注意去掉空格，但是不一定是一次advanceBy就一次advanceSpaces()
const tagType = isComponent(context, tag)
? _ast__WEBPACK_IMPORTED_MODULE_1__.ElementTypes.COMPONENT
: _ast__WEBPACK_IMPORTED_MODULE_1__.ElementTypes.ELEMENT;
return {
type: _ast__WEBPACK_IMPORTED_MODULE_1__.NodeTypes.ELEMENT,
tag, // 标签名,
tagType, // 是组件还是原生元素,
props, // 属性节点数组,
directives, // 指令数组
isSelfClosing, // 是否是自闭合标签,
children: [],
};
}
function parseAttributes(context) {
const props = [];
const directives = [];
function isTagEnd(context) {
const s = context.source;
return s === "" || s.startsWith(">") || s.startsWith("/>");
}
while (!isTagEnd(context)) {
const attr = parseSingleAttribute(context);
if (attr.type === _ast__WEBPACK_IMPORTED_MODULE_1__.NodeTypes.DIRECTIVE) {
directives.push(attr);
} else {
props.push(attr);
}
}
return { props, directives };
}
function parseSingleAttribute(context) {
const match = /^[^\t\r\n\f />][^\t\r\n\f />=]*/.exec(context.source);
// 分为两种匹配，第一个key=value结构，如id="app"，第二个没有key=value结构，如checkd
const name = match[0];
advanceBy(context, name.length);
advanceSpaces(context);
let value = null;
const s = context.source;
if (s[0] === "=") {
/* 如果是key=value结构 */
advanceBy(context, 1); // 去除等号
advanceSpaces(context); // 去除多余的空格
value = parseAttributeValue(context);
}
// 指令节点，通过name判断，一定是v-, @, :开头
if (/^(v-|@|:)/.test(name)) {
let dirName = null;
let arg = null;
// 三种形式
if (name[0] === ":") {
dirName = "bind";
arg = name.slice(1);
} else if (name[0] === "@") {
dirName = "on";
arg = name.slice(1);
} else if (name.startsWith("v-")) {
[dirName, arg] = name.slice(2).split(":"); // v-if v-on v-model不存在arg，而v-bind:class存在arg
}
return {
type: _ast__WEBPACK_IMPORTED_MODULE_1__.NodeTypes.DIRECTIVE,
name: dirName,
exp: value && {
//等号之后的内容
type: _ast__WEBPACK_IMPORTED_MODULE_1__.NodeTypes.SIMPLE_EXPRESSION,
content: value.content,
isStatic: false,
},
arg: arg && {
// 等号之前的内容
type: _ast__WEBPACK_IMPORTED_MODULE_1__.NodeTypes.SIMPLE_EXPRESSION,
content: (0,_utils__WEBPACK_IMPORTED_MODULE_0__.camelize)(arg),
isStatic: true,
},
};
}
// 普通的属性节点
return {
type: _ast__WEBPACK_IMPORTED_MODULE_1__.NodeTypes.ATTRIBUTE,
name,
value: value && {
type: _ast__WEBPACK_IMPORTED_MODULE_1__.NodeTypes.TEXT,
content: value.content,
},
};
}
function parseAttributeValue(context) {
// 三种情况：双引号，单引号，没有引号，默认都是带有引号的
const quote = context.source[0];
advanceBy(context, 1); //去除第一个引号
const end = context.source.indexOf(quote);
const content = sliceStr(context, end);
advanceBy(context, 1); // 去除后一个引号
advanceSpaces(context); // 去除空格
return { content };
}
function parseText(context) {
/* 注意：结束的标志不是</，而是<，因为中间还可以子元素节点 */
const endTags = ["<", context.options.delimiters[0]];
// 三种结束方式
// 1. 遇到插值的分隔符{{
// 2. 遇到结束标签</
// 3. 一行的末尾
let textLen = context.source.length;
textLen = endTags.reduce((prev, tag) => {
const idx = context.source.indexOf(tag);
if (idx !== -1) {
prev = Math.min(prev, idx);
}
return prev;
}, textLen);
const content = sliceStr(context, textLen);
return {
type: _ast__WEBPACK_IMPORTED_MODULE_1__.NodeTypes.TEXT,
content,
};
}
function sliceStr(context, textLen) {
const content = context.source.slice(0, textLen);
advanceBy(context, textLen);
advanceSpaces(context);
return content;
}
function advanceBy(context, numberOfCharacters) {
// 指定前进的字符数量，即
context.source = context.source.slice(numberOfCharacters);
}
function advanceSpaces(context) {
// 将下一个非空白字符前的空白字符串去掉
const match = /^[\t\r\n\f ]+/.exec(context.source);
// 如果匹配到相应的空白字符串
if (match) {
advanceBy(context, match[0].length); // 第一个就是匹配成功的空白字符串
}
}
function isComponent(context, tag) {
return !context.options.isNativeTag(tag);
}
/***/ }),
/***/ "./src/reactivity/computed.js":
/*!************************************!*\
!*** ./src/reactivity/computed.js ***!
\************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "computed": () => (/* binding */ computed)
/* harmony export */ });
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ "./src/utils/index.js");
/* harmony import */ var _effect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./effect */ "./src/reactivity/effect.js");
/* 无论是基本数据还是传入的函数，都是放入一个对象中存储，不同的是为了设计computed的缓存特性增加了lazy与scheduler调用
lazy避免第一次运行，通过effect函数保存scheduler，最后在trigger中判断是否有调度器，
如果有调度器调用调度器，否则才是调用传入的函数
通过自身的属性_dirty判断自身的依赖是否更新
通过get捕获中的track，捕获依赖自身的那些函数
通过调度器调用时，进行触发依赖于自身的函数，注意：computed自身的依赖与依赖自身的变量是两个概念！
*/
class ComputedImpl {
constructor(options) {
this._setter = options.setter;
this._value = undefined; /* 当前的值 */
this._dirty = true; /* 表示computed依赖的变量有更新，不是依赖computed的函数！ */
this.effect = (0,_effect__WEBPACK_IMPORTED_MODULE_1__.effect)(options.getter, {
lazy: true,
scheduler: () => {
/* 调度器是为了满足缓存的特性而设计的！trigger只会调用调度器，通过调度器控制_ditry来更新，并且不会直接调用 */
if (!this._dirty) {
// 如果未更新不需要重新计算
this._dirty = true; /* 当scheduler被调用时，表示的变量发生了更新，但是getter不会被调用，而是自身的value被引用即触发get操作时才会判断_dirty并决定是否重新计算 */
(0,_effect__WEBPACK_IMPORTED_MODULE_1__.trigger)(
this,
"value"
); /* 通知依赖自身的函数更新，通过get捕获判断_dirty重新计算，注意和trigger函数中进行区分！ */
}
},
}); /* 修改effect函数，如果传入了lazy初始默认不执行，如果传入了scheduler，则保存在自身上！ */
}
get value() {
if (this._dirty) {
// 通过判断自身依赖的变量是否发生了更新，从而确定自身是否更新
this._dirty = false; // 重新
10BC8
计算后，将_dirty置为false
this._value =
this.effect(); /* 此时调用的函数是从effect函数中返回的，是getter操作被封装成一个effectFn，最后返回的 */
(0,_effect__WEBPACK_IMPORTED_MODULE_1__.track)(this, "value"); /* 第一次默认进行会被收集依赖 */
}
return this._value;
}
set value(value) {
/* 判断是否只读！ */
this._setter(value)
}
}
function computed(getterOrOption) {
let getter = () => {}
let setter = () => {
console.error("The computed is readonly！");
};
let options = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.isFunction)(getterOrOption)
? { getter: getterOrOption, setter }
: { getter: getterOrOption.getter || getter, setter: getterOrOption.set || setter };
return new ComputedImpl(options)
}
/***/ }),
/***/ "./src/reactivity/effect.js":
/*!**********************************!*\
!*** ./src/reactivity/effect.js ***!
\**********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "effect": () => (/* binding */ effect),
/* harmony export */ "track": () => (/* binding */ track),
/* harmony export */ "trigger": () => (/* binding */ trigger)
/* harmony export */ });
let activeEffect;
/**
* 一个对象可以有多个属性
* 一个属性可以在多个effect中使用
* 一个effect可以同时使用多个不同的对象|对象属性
*
* 分析依赖关系，确定是对象|对象属性的变化导致effect，
* 那么应该这样设计依赖关系结构
* AMap：key为target，value为一个BMap 解释：区分不同对象的AMap
* BMap：key为对象的不同属性，value为一个CSet 解释：区分一个对象的不同属性
* CSet：存储effect 解释：存储所有依赖于某个对象的某个属性的effect，可以使用数组，但是需要进行去重，使用Set更合适
* 注意：这些关系结构都是基于：对象|对象属性的变量导致effect的执行
*/
let targetMap = new WeakMap(); /* 区分不同的对象 */
let keyMap; /* 区分同一个对象的不同属性，不同targetMap元素生成不同的keyMap */
let effectSet; /* 存储所有依赖于某个对象的某个属性的effect */
let effectStack = [];
function effect(fn, options = {}) {
const effectFn = () => {
let result;
try {
activeEffect =
effectFn; /* 当前的函数会被标记，在reactive代理对象的get操作收集依赖时，activeEffect会被收集，此时的fn就是对应变量的依赖项 */
effectStack.push(activeEffect);
result = fn();
} catch (error) {
/* watchEffect默认调用，用户的函数可能出错，但是不能影响库代码 */
console.error(error);
} finally {
activeEffect =
undefined; /* 必须要重新置为null或者undefined，否则在进行判断收集使会出错 */
// 为了解决嵌套的effect，需要从effectFns中弹出
// effectStack.pop(); /* 已经被记录过了！ */
// activeEffect = effectStack.length ? effectStack.pop() : undefined;
effectStack.pop();
/* 如果为0，length-1=-1不会报错，而是一个undefined，js数组越界不会报错，访问只会返回undefined */
activeEffect = effectStack[effectStack.length - 1];
return result;
}
};
if (!options.lazy) {
effectFn();
}
effectFn.scheduler = options.scheduler;
return effectFn;
}
/* track 收集依赖 */
function track(target, key) {
/* 如果不存在activeEffect，返回即可 */
if (!activeEffect) {
return;
}
/* ================可以使用三元表达式====================== */
let depsMap = targetMap.get(target);
if (!depsMap) {
targetMap.set(target, (depsMap = new Map())); /* 另外一种写法 */
}
let deps = depsMap.get(key);
if (!deps) {
depsMap.set(key, (deps = new Set()));
}
deps.add(activeEffect);
}
/* trigger 触发依赖 */
function trigger(target, key) {
/* 更新触发，取出targetMap中的target，keyMap中的effectSet */
targetMap
.get(target)
?.get(key)
?.forEach((effect) => {
/* 如果有调度器，应该只调用调度器，其余的操作由调度器来完成。
这是不同于watchEffect的逻辑，通过调用调度器来实现不立即更新，
这是computed依赖的变量更新了，不是要依赖于computed的函数立即更新。
scheduler通知_ditry变化，而后scheduler自身中再调用computed的trigger通知依赖自身的函数，
达到computed的知道自身依赖的变量更新了，但是不马上计算，
只有依赖于自身的函数使用了我，我才判断是否重新计算的功能
如果依赖于computed的变量没有访问，那么computed就不会重新计算，
因为计算的过程在get捕获中！只有访问了才能重新计算！ */
effect.scheduler ? effect.scheduler(effect) : effect();
});
}
/***/ }),
/***/ "./src/reactivity/index.js":
/*!*********************************!*\
!*** ./src/reactivity/index.js ***!
\*********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "computed": () => (/* reexport safe */ _computed__WEBPACK_IMPORTED_MODULE_2__.computed),
/* harmony export */ "effect": () => (/* reexport safe */ _effect__WEBPACK_IMPORTED_MODULE_3__.effect),
/* harmony export */ "reactive": () => (/* reexport safe */ _reactive__WEBPACK_IMPORTED_MODULE_0__.reactive),
/* harmony export */ "ref": () => (/* reexport safe */ _ref__WEBPACK_IMPORTED_MODULE_1__.ref)
/* harmony export */ });
/* harmony import */ var _reactive__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./reactive */ "./src/reactivity/reactive.js");
/* harmony import */ var _ref__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ref */ "./src/reactivity/ref.js");
/* harmony import */ var _computed__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./computed */ "./src/reactivity/computed.js");
/* harmony import */ var _effect__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./effect */ "./src/reactivity/effect.js");
/***/ }),
/***/ "./src/reactivity/reactive.js":
/*!************************************!*\
!*** ./src/reactivity/reactive.js ***!
\************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "isReactive": () => (/* binding */ isReactive),
/* harmony export */ "reactive": () => (/* binding */ reactive)
/* harmony export */ });
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ "./src/utils/index.js");
/* harmony import */ var _effect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./effect */ "./src/reactivity/effect.js");
/**
* 为了能够正确的收集依赖，传入的target对象必须要再包裹一层，
* 因为只适用对象本身则无法触发get操作！再次包裹一层就能够触发外层的get
*
* 但是在尝试后发现：Vue官方也没有做这个处理
*/
class Target {
constructor(target) {
this.value = target;
}
}
const proxyMap = new WeakMap();
// reactive建立了一个响应式对象，即Proxy对象，它一般与effect函数建立联系
function reactive(target) {
/* 如果不是一个对象，不代理即不做任何处理 */
if (!(0,_utils__WEBPACK_IMPORTED_MODULE_0__.isObject)(target)) {
return target;
}
/* 特殊情况一：嵌套使用reactive，只代理一次，reactive(reactive(obj))，给obj添加私有的属性_isReactive */
if (!isReactive(target)) {
target._isReactive = true;
}
/* 特殊情况二：多个依赖依赖于同一个对象，只生成一个代理对象，使用一个WeakMap来存储每一个代理对象 */
if (proxyMap.has(target)) {
return proxyMap.get(target);
}
/* 如果是一个对象，那么就返回一个代理对象 */
const proxy = new Proxy(target, {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
/* 特殊情况六：嵌套的effect，会导致外层的effect丢失！在effect函数中利用栈解决 */
(0,_effect__WEBPACK_IMPORTED_MODULE_1__.track)(target, key);
/* 特殊情况四：深层代理，在vue2中所有的对象都被代理了，但是vue3可以选择哪些被代理 */
// return res;
return (0,_utils__WEBPACK_IMPORTED_MODULE_0__.isObject)(res) ? reactive(res) : res;
},
set(target, key, value, receiver) {
/* 特殊情况三：只有值变化了才更新，如果前后是相同的值，不进行更新 */
if (!(0,_utils__WEBPACK_IMPORTED_MODULE_0__.hasChanged)(target[key], value))
return true; /* 注意set需要返回true代表更新成功，否则报错！ */
const flag = Reflect.set(target, key, value, receiver);
/* 特殊情况五：数组的问题，数组长度的问题 数组的key需要手动触发 */
if ((0,_utils__WEBPACK_IMPORTED_MODULE_0__.isArray)(target) && key === 'length' && (0,_utils__WEBPACK_IMPORTED_MODULE_0__.hasChanged)(target.length, value)) {
(0,_effect__WEBPACK_IMPORTED_MODULE_1__.trigger)(target, "length"); /* 数组的key需要手动触发 */
}
(0,_effect__WEBPACK_IMPORTED_MODULE_1__.trigger)(target, key); /* 必须等对象更新完成后再触发 */
return flag;
},
});
proxyMap.set(target, proxy);
return proxy;
}
function isReactive(target) {
return !!(target && target._isReactive);
}
/***/ }),
/***/ "./src/reactivity/ref.js":
/*!*******************************!*\
!*** ./src/reactivity/ref.js ***!
\*******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "convert": () => (/* binding */ convert),
/* harmony export */ "isRef": () => (/* binding */ isRef),
/* harmony export */ "ref": () => (/* binding */ ref)
/* harmony export */ });
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ "./src/utils/index.js");
/*
3F26
harmony import */ var _effect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./effect */ "./src/reactivity/effect.js");
/* harmony import */ var _reactive__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactive */ "./src/reactivity/reactive.js");
class RefImpl {
constructor(value) {
this._isRef = true;
/* 用私有属性来实现功能，通过简便的写法，即get value() set value()即可完成相应的get set捕获！ */
// 如果是一个对象，则用reactive来实现
// 无论是基本数据类型还是引用数据类型，最终都是存储在一个对象的_value属性中的
this._value = convert(value); /* 需要用convert来转换，否则引用类型的数据无法捕获！ */
}
/* vue3中实现基本数据类型的响应还是Object.definedProperty，注意是基本数据类型！ */