/******/ (() => { // 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; // 重新计算后，将_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");

/* 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，注意是基本数据类型！ */