From 6f2ed6297e95db7f1d0fd3d3bfd0701075cbd663 Mon Sep 17 00:00:00 2001 From: leonard Date: Sun, 30 Oct 2022 22:16:17 +0800 Subject: [PATCH 1/2] hw13 --- src/mini-renderer.js | 89 ++++++++++++++++++++++++-------------------- 1 file changed, 48 insertions(+), 41 deletions(-) diff --git a/src/mini-renderer.js b/src/mini-renderer.js index 874573b..bbf68a8 100644 --- a/src/mini-renderer.js +++ b/src/mini-renderer.js @@ -1,8 +1,8 @@ -import { createRenderer } from '@vue/runtime-core' +import { createRenderer } from "@vue/runtime-core"; const render = createRenderer({ - forcePatchProp(el, key){ - return false + forcePatchProp(el, key) { + return false; }, patchProp( el, @@ -14,61 +14,68 @@ const render = createRenderer({ parentComponent, parentSuspense, unmountChildren - ){ - if(key.startsWith('on')) { - el.addEventListener(key.substr(2).toLowerCase(), nextValue) + ) { + if (key.startsWith("on")) { + el.addEventListener(key.substr(2).toLowerCase(), nextValue); } else { - el.setAttribute(key, nextValue) + el.setAttribute(key, nextValue); } }, - insert(child, parent, anchor){ - parent.insertBefore(child, anchor || null) + insert(child, parent, anchor) { + parent.insertBefore(child, anchor || null); }, - remove(child){ - const parent = child.parentNode - if(parent) { - parent.removeNode(child) + remove(child) { + const parent = child.parentNode; + if (parent) { + parent.removeNode(child); } }, - createElement(type, isSvg, isCustomizedBuiltIn){ - return document.createElement(type) + createElement(type, isSvg, isCustomizedBuiltIn) { + return document.createElement(type); }, - createText(text){ - return document.createTextNode(text) + createText(text) { + return document.createTextNode(text); }, - createComment(text){ - return document.createComment(text) + createComment(text) { + return document.createComment(text); }, - setText(node, text){ - node.nodeValue = text + setText(node, text) { + node.nodeValue = text; }, - setElementText(el, text){ - el.textContent = text + setElementText(el, text) { + el.textContent = text; }, - parentNode(node){ - return node.parentNode + parentNode(node) { + return node.parentNode; }, - nextSibling(node){ - return node.nextSibling + nextSibling(node) { + return node.nextSibling; }, - querySelector(selector){ - return document.querySelector(selector) + querySelector(selector) { + return document.querySelector(selector); }, - setScopeId(el, id){ - el.setAttribute(id, '') + setScopeId(el, id) { + el.setAttribute(id, ""); }, - cloneNode(el){ - return el.cloneNode(true) + cloneNode(el) { + return el.cloneNode(true); }, - insertStaticContent(){ - return [] + insertStaticContent() { + return []; } -}) +}); const createApp = (...args) => { - //TODO -} + const app = render.createApp(...args); -export { - createApp -} + const mount = (selector) => + app.mount( + typeof selector === "string" ? document.querySelector(selector) : selector + ); + + return { + mount + }; +}; + +export { createApp }; From ead0dc36e1f3987440b4da722207b589b89842ba Mon Sep 17 00:00:00 2001 From: leonard Date: Sun, 30 Oct 2022 22:21:22 +0800 Subject: [PATCH 2/2] revert format --- src/mini-renderer.js | 72 ++++++++++++++++++++++---------------------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/src/mini-renderer.js b/src/mini-renderer.js index bbf68a8..2dbc453 100644 --- a/src/mini-renderer.js +++ b/src/mini-renderer.js @@ -1,8 +1,8 @@ -import { createRenderer } from "@vue/runtime-core"; +import { createRenderer } from '@vue/runtime-core' const render = createRenderer({ - forcePatchProp(el, key) { - return false; + forcePatchProp(el, key){ + return false }, patchProp( el, @@ -14,56 +14,56 @@ const render = createRenderer({ parentComponent, parentSuspense, unmountChildren - ) { - if (key.startsWith("on")) { - el.addEventListener(key.substr(2).toLowerCase(), nextValue); + ){ + if(key.startsWith('on')) { + el.addEventListener(key.substr(2).toLowerCase(), nextValue) } else { - el.setAttribute(key, nextValue); + el.setAttribute(key, nextValue) } }, - insert(child, parent, anchor) { - parent.insertBefore(child, anchor || null); + insert(child, parent, anchor){ + parent.insertBefore(child, anchor || null) }, - remove(child) { - const parent = child.parentNode; - if (parent) { - parent.removeNode(child); + remove(child){ + const parent = child.parentNode + if(parent) { + parent.removeNode(child) } }, - createElement(type, isSvg, isCustomizedBuiltIn) { - return document.createElement(type); + createElement(type, isSvg, isCustomizedBuiltIn){ + return document.createElement(type) }, - createText(text) { - return document.createTextNode(text); + createText(text){ + return document.createTextNode(text) }, - createComment(text) { - return document.createComment(text); + createComment(text){ + return document.createComment(text) }, - setText(node, text) { - node.nodeValue = text; + setText(node, text){ + node.nodeValue = text }, - setElementText(el, text) { - el.textContent = text; + setElementText(el, text){ + el.textContent = text }, - parentNode(node) { - return node.parentNode; + parentNode(node){ + return node.parentNode }, - nextSibling(node) { - return node.nextSibling; + nextSibling(node){ + return node.nextSibling }, - querySelector(selector) { - return document.querySelector(selector); + querySelector(selector){ + return document.querySelector(selector) }, - setScopeId(el, id) { - el.setAttribute(id, ""); + setScopeId(el, id){ + el.setAttribute(id, '') }, - cloneNode(el) { - return el.cloneNode(true); + cloneNode(el){ + return el.cloneNode(true) }, - insertStaticContent() { - return []; + insertStaticContent(){ + return [] } -}); +}) const createApp = (...args) => { const app = render.createApp(...args);