更新element的children

daoyking · Jun 15, 2022 · 9197be5 · 9197be5
1 parent 4a710fe
commit 9197be5
Show file tree

Hide file tree

Showing 9 changed files with 238 additions and 29 deletions.
diff --git a/example/PatchChildren/ArrayToText.js b/example/PatchChildren/ArrayToText.js
@@ -0,0 +1,19 @@
+import { h,ref } from '../../lib/guide-mini-vue.esm.js'
+const nextChildren = 'newChildren'
+const prevChildren = [h('div', {}, 'A'), h('div', {}, 'B')]
+
+export default {
+  name: 'ArrayToText',
+  setup() {
+    const isChange = ref(false)
+    window.isChange = isChange
+
+    return {
+      isChange
+    }
+  },
+  render() {
+    const self = this
+    return self.isChange ? h('div', {}, nextChildren) : h('div', {}, prevChildren)
+  }
+}
diff --git a/example/PatchChildren/TextToArray.js b/example/PatchChildren/TextToArray.js
@@ -0,0 +1,21 @@
+
+
+import { h,ref } from '../../lib/guide-mini-vue.esm.js'
+const prevChildren = 'newChildren'
+const nextChildren = [h('div', {}, 'A'), h('div', {}, 'B')]
+
+export default {
+  name: 'TextToArray',
+  setup() {
+    const isChange = ref(false)
+    window.isChange = isChange
+
+    return {
+      isChange
+    }
+  },
+  render() {
+    const self = this
+    return self.isChange ? h('div', {}, nextChildren) : h('div', {}, prevChildren)
+  }
+}
diff --git a/example/PatchChildren/TextToText.js b/example/PatchChildren/TextToText.js
@@ -0,0 +1,19 @@
+import { h,ref } from '../../lib/guide-mini-vue.esm.js'
+const nextChildren = 'newChildren'
+const prevChildren = 'oldChildren'
+
+export default {
+  name: 'TextToText',
+  setup() {
+    const isChange = ref(false)
+    window.isChange = isChange
+
+    return {
+      isChange
+    }
+  },
+  render() {
+    const self = this
+    return self.isChange ? h('div', {}, nextChildren) : h('div', {}, prevChildren)
+  }
+}
diff --git a/example/PatchChildren/index.html b/example/PatchChildren/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>patch children</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script src="./mian.js" type="module"></script>
+</body>
+
+</html>
diff --git a/example/PatchChildren/mian.js b/example/PatchChildren/mian.js
@@ -0,0 +1,5 @@
+import { createApp } from '../../lib/guide-mini-vue.esm.js'
+import { App } from './App.js'
+
+const rootContainer = document.querySelector('#app')
+createApp(App).mount(rootContainer)
diff --git a/lib/guide-mini-vue.cjs.js b/lib/guide-mini-vue.cjs.js
@@ -431,7 +431,7 @@ function createAppAPI(render) {
 }
 
 function createRenderer(options) {
-    const { createElement: hostCreateElement, patchProp: hostPatchProp, insert: hostInsert, } = options;
+    const { createElement: hostCreateElement, patchProp: hostPatchProp, insert: hostInsert, remove: hostRemove, setElementText: hostSetElementText, } = options;
     function render(vnode, container) {
         patch(null, vnode, container, null);
     }
@@ -496,16 +496,17 @@ function createRenderer(options) {
             mountElement(n2, container, parentComponent);
         }
         else {
-            patchElement(n1, n2);
+            patchElement(n1, n2, container, parentComponent);
         }
     }
-    function patchElement(n1, n2, container) {
-        console.log("n1", n1);
-        console.log("n2", n2);
-        console.log("patchElement");
+    function patchElement(n1, n2, container, parentComponent) {
+        // console.log("n1", n1)
+        // console.log("n2", n2)
+        // console.log("patchElement")
         const oldProps = n1.props || EMPTY_OBJ;
         const newProps = n2.props || EMPTY_OBJ;
         const el = (n2.el = n1.el);
+        patchChildren(n1, n2, container, parentComponent);
         patchProps(el, oldProps, newProps);
     }
     function patchProps(el, oldProps, newProps) {
@@ -535,7 +536,7 @@ function createRenderer(options) {
             el.textContent = children;
         }
         else if (shapeFlag & 8 /* ShapeFlags.ARRAY_CHILDREN */) {
-            mountChildren(vnode, el, parentComponent);
+            mountChildren(vnode.children, el, parentComponent);
         }
         // 处理props
         const { props } = vnode;
@@ -547,19 +548,48 @@ function createRenderer(options) {
         // container.append(el)
         hostInsert(el, container);
     }
-    function mountChildren(vnode, container, parentComponent) {
-        vnode.children.forEach(function (v) {
+    function mountChildren(children, container, parentComponent) {
+        children.forEach(function (v) {
             patch(null, v, container, parentComponent);
         });
     }
     function processFragment(n1, n2, container, parentComponent) {
-        mountChildren(n2, container, parentComponent);
+        mountChildren(n2.children, container, parentComponent);
     }
     function processText(n1, n2, container) {
         const { children } = n2;
         const textNode = (n2.el = document.createTextNode(children));
         container.append(textNode);
     }
+    function patchChildren(n1, n2, container, parentComponent) {
+        const prevShapeFlag = n1.shapeFlag;
+        const { shapeFlag, children } = n2;
+        const child1 = n1.children;
+        const child2 = n2.children;
+        if (shapeFlag & 4 /* ShapeFlags.TEXT_CHILDREN */) {
+            if (prevShapeFlag & 8 /* ShapeFlags.ARRAY_CHILDREN */) {
+                // 1.清空old children
+                unmountChildren(n1.children);
+                // 2.设置text
+                // hostSetElementText(container, child2)
+            }
+            if (child1 !== child2) {
+                hostSetElementText(container, child2);
+            }
+        }
+        else {
+            if (prevShapeFlag & 4 /* ShapeFlags.TEXT_CHILDREN */) {
+                hostSetElementText(container, "");
+                mountChildren(child2, container, parentComponent);
+            }
+        }
+    }
+    function unmountChildren(children) {
+        for (let index = 0; index < children.length; index++) {
+            const el = children[index].el;
+            hostRemove(el);
+        }
+    }
     return {
         createApp: createAppAPI(render),
     };
@@ -589,10 +619,21 @@ function patchProp(el, key, prevProp, nextProp) {
 function insert(el, parent) {
     parent.append(el);
 }
+function remove(child) {
+    const parent = child.parentNode;
+    if (parent) {
+        parent.removeChild(child);
+    }
+}
+function setElementText(el, text) {
+    el.textContent = text;
+}
 const renderer = createRenderer({
     createElement,
     patchProp,
     insert,
+    remove,
+    setElementText,
 });
 function createApp(...args) {
     return renderer.createApp(...args);

diff --git a/lib/guide-mini-vue.esm.js b/lib/guide-mini-vue.esm.js
@@ -427,7 +427,7 @@ function createAppAPI(render) {
 }
 
 function createRenderer(options) {
-    const { createElement: hostCreateElement, patchProp: hostPatchProp, insert: hostInsert, } = options;
+    const { createElement: hostCreateElement, patchProp: hostPatchProp, insert: hostInsert, remove: hostRemove, setElementText: hostSetElementText, } = options;
     function render(vnode, container) {
         patch(null, vnode, container, null);
     }
@@ -492,16 +492,17 @@ function createRenderer(options) {
             mountElement(n2, container, parentComponent);
         }
         else {
-            patchElement(n1, n2);
+            patchElement(n1, n2, container, parentComponent);
         }
     }
-    function patchElement(n1, n2, container) {
-        console.log("n1", n1);
-        console.log("n2", n2);
-        console.log("patchElement");
+    function patchElement(n1, n2, container, parentComponent) {
+        // console.log("n1", n1)
+        // console.log("n2", n2)
+        // console.log("patchElement")
         const oldProps = n1.props || EMPTY_OBJ;
         const newProps = n2.props || EMPTY_OBJ;
         const el = (n2.el = n1.el);
+        patchChildren(n1, n2, container, parentComponent);
         patchProps(el, oldProps, newProps);
     }
     function patchProps(el, oldProps, newProps) {
@@ -531,7 +532,7 @@ function createRenderer(options) {
             el.textContent = children;
         }
         else if (shapeFlag & 8 /* ShapeFlags.ARRAY_CHILDREN */) {
-            mountChildren(vnode, el, parentComponent);
+            mountChildren(vnode.children, el, parentComponent);
         }
         // 处理props
         const { props } = vnode;
@@ -543,19 +544,48 @@ function createRenderer(options) {
         // container.append(el)
         hostInsert(el, container);
     }
-    function mountChildren(vnode, container, parentComponent) {
-        vnode.children.forEach(function (v) {
+    function mountChildren(children, container, parentComponent) {
+        children.forEach(function (v) {
             patch(null, v, container, parentComponent);
         });
     }
     function processFragment(n1, n2, container, parentComponent) {
-        mountChildren(n2, container, parentComponent);
+        mountChildren(n2.children, container, parentComponent);
     }
     function processText(n1, n2, container) {
         const { children } = n2;
         const textNode = (n2.el = document.createTextNode(children));
         container.append(textNode);
     }
+    function patchChildren(n1, n2, container, parentComponent) {
+        const prevShapeFlag = n1.shapeFlag;
+        const { shapeFlag, children } = n2;
+        const child1 = n1.children;
+        const child2 = n2.children;
+        if (shapeFlag & 4 /* ShapeFlags.TEXT_CHILDREN */) {
+            if (prevShapeFlag & 8 /* ShapeFlags.ARRAY_CHILDREN */) {
+                // 1.清空old children
+                unmountChildren(n1.children);
+                // 2.设置text
+                // hostSetElementText(container, child2)
+            }
+            if (child1 !== child2) {
+                hostSetElementText(container, child2);
+            }
+        }
+        else {
+            if (prevShapeFlag & 4 /* ShapeFlags.TEXT_CHILDREN */) {
+                hostSetElementText(container, "");
+                mountChildren(child2, container, parentComponent);
+            }
+        }
+    }
+    function unmountChildren(children) {
+        for (let index = 0; index < children.length; index++) {
+            const el = children[index].el;
+            hostRemove(el);
+        }
+    }
     return {
         createApp: createAppAPI(render),
     };
@@ -585,10 +615,21 @@ function patchProp(el, key, prevProp, nextProp) {
 function insert(el, parent) {
     parent.append(el);
 }
+function remove(child) {
+    const parent = child.parentNode;
+    if (parent) {
+        parent.removeChild(child);
+    }
+}
+function setElementText(el, text) {
+    el.textContent = text;
+}
 const renderer = createRenderer({
     createElement,
     patchProp,
     insert,
+    remove,
+    setElementText,
 });
 function createApp(...args) {
     return renderer.createApp(...args);