zhongmeizhi · xiaoxin-sky · Jul 20, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/core/diff.js b/src/core/diff.js
@@ -1,14 +1,15 @@
 import { ShapeFlags } from "../utils/base.js";
-import  {
+import {
   hostSetElementText,
   hostPatchProp,
   hostInsert,
-  hostRemove
-} from './dom.js';
+  hostRemove,
+} from "./dom.js";
+import { patch } from "./renderer";
 
-function isSameVNodeType (n1, n2) {
+function isSameVNodeType(n1, n2) {
   return n1.type === n2.type && n1.key === n2.key;
-};
+}
 
 function patchKeyedChildren(c1, c2, container) {
   let i = 0;
@@ -167,7 +168,4 @@ function patchChildren(oldVnode, vnode, container) {
   }
 }
 
-export {
-  patchProps,
-  patchChildren
-}
+export { patchProps, patchChildren };
diff --git a/src/core/dom.js b/src/core/dom.js
@@ -4,7 +4,11 @@ function hostCreateElement(type) {
 }
 
 function hostSetElementText(el, text) {
-  el.innerText = text;
+  if (el.nodeType === Node.TEXT_NODE) {
+    el.data = text;
+  } else {
+    el.innerText = text;
+  }
 }
 
 function hostPatchProp(el, key, preValue, nextValue) {
@@ -32,9 +36,9 @@ function hostPatchProp(el, key, preValue, nextValue) {
   }
 }
 
-function hostInsert(child, parent, anchor=null) {
+function hostInsert(child, parent, anchor = null) {
   if (anchor) {
-    parent.insertBefore(child,anchor);
+    parent.insertBefore(child, anchor);
   } else {
     parent.appendChild(child);
   }
@@ -52,5 +56,5 @@ export {
   hostSetElementText,
   hostPatchProp,
   hostInsert,
-  hostRemove
-}
+  hostRemove,
+};
diff --git a/src/core/renderer.js b/src/core/renderer.js
@@ -1,23 +1,17 @@
 import { ShapeFlags } from "../utils/base.js";
 import { queueJob } from "./scheduler";
-import { createVNode } from './h';
+import { createVNode } from "./h";
 import { effect } from "./reactive";
-import  {
+import {
   hostCreateElement,
   hostSetElementText,
   hostPatchProp,
   hostInsert,
-} from './dom.js';
+} from "./dom.js";
 
-import {
-  patchProps,
-  patchChildren
-} from './diff.js'
+import { patchProps, patchChildren } from "./diff.js";
 
-import {
-  beforeMount,
-  mounted
-} from './lifecycle.js';
+import { beforeMount, mounted } from "./lifecycle.js";
 
 const render = (vnode, container) => {
   patch(null, vnode, container);
@@ -32,6 +26,8 @@ function patch(oldVnode, vnode, container = null) {
     default:
       if (shapeFlag & ShapeFlags.ELEMENT) {
         processElement(oldVnode, vnode, container);
+      } else if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
+        processElement(oldVnode, vnode, container);
       } else if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
         processComponent(oldVnode, vnode, container);
       }
@@ -61,22 +57,28 @@ function mountElement(vnode, container) {
   const { shapeFlag, props } = vnode;
   // 1. 先创建 element
   // 基于可扩展的渲染 api
-  const el = (vnode.el = hostCreateElement(vnode.type));
+  let el;
+  if (typeof vnode.type === "symbol" && vnode.type.description === "Text") {
+    el = document.createTextNode(vnode.children);
+    vnode.el = el;
+  } else {
+    el = vnode.el = hostCreateElement(vnode.type);
 
-  // 支持单子组件和多子组件的创建
-  if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
-    hostSetElementText(el, vnode.children);
-  } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
-    mountChildren(vnode.children, el);
+    // 支持单子组件和多子组件的创建
+    if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
+      hostSetElementText(el, vnode.children);
+    } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+      mountChildren(vnode.children, el);
+    }
   }
-
   // 处理 props
   if (props) {
     for (const key in props) {
       const nextVal = props[key];
       hostPatchProp(el, key, null, nextVal);
     }
   }
+
   hostInsert(el, container);
 }
 
@@ -102,9 +104,8 @@ function processComponent(n1, n2, container) {
 }
 
 function mountComponent(initialVNode, container) {
-  const instance = (initialVNode.component = createComponentInstance(
-    initialVNode
-  ));
+  const instance = (initialVNode.component =
+    createComponentInstance(initialVNode));
 
   setupComponent(instance);
   setupRenderEffect(instance, container);
@@ -123,7 +124,6 @@ function createComponentInstance(vnode) {
 }
 
 function setupComponent(instance) {
-
   initProps();
   initSlots();
 
@@ -145,7 +145,6 @@ function setupStatefulComponent(instance) {
   instance.render = render;
 }
 
-
 function setupRenderEffect(instance, container) {
   /* 
     经过 sfc 后的代码应该是这样的
@@ -178,25 +177,22 @@ function setupRenderEffect(instance, container) {
     {
       scheduler: (effect) => {
         // 把 effect 推到微任务的时候在执行
-        queueJob(effect)
+        queueJob(effect);
       },
     }
   );
 }
 
 const createApp = (rootComponent, rootProps = null) => {
-	const app = {
-		mount(rootDom) {
-			// 此时 rootComponent = {setup, render}
-			const vnode = createVNode(rootComponent, rootProps);
-			app._container = rootDom;
-			render(vnode, rootDom);
-		},
-	};
-	return app;
+  const app = {
+    mount(rootDom) {
+      // 此时 rootComponent = {setup, render}
+      const vnode = createVNode(rootComponent, rootProps);
+      app._container = rootDom;
+      render(vnode, rootDom);
+    },
+  };
+  return app;
 };
 
-export {
-  createApp,
-  render
-}
+export { createApp, render, patch };
diff --git a/uuzpack/example/demo/demo-reactive.uuz b/uuzpack/example/demo/demo-reactive.uuz
@@ -1,6 +1,7 @@
 <template>
-  <div class="abc" @click="addCount">
+  <div class="abc" @click="addCount" >
     {{count.num}}
+    <div>123sss</div>
   </div>
 </template>
 
@@ -9,7 +10,7 @@ import { reactive } from '../uuz.esm.js';
 
 export default {
   setup() {
-    let count = reactive({ num: 10 })
+    let count = reactive({ num: 10,age:18 })
 
     const addCount = () => {
       count.num += 10;

diff --git a/uuzpack/example/main.js b/uuzpack/example/main.js
@@ -1,15 +1,15 @@
-import { createApp } from './uuz.esm.js';
-import './styles/reset.css'
+import { createApp } from "./uuz.esm.js";
+import "./styles/reset.css";
 
 // demo-ref
 // import App from './demo/demo-ref.js';
 
 // demo-reactive
-import App from './demo/demo-reactive.uuz';
+import App from "./demo/demo-reactive.uuz";
 
 // demo-computed
 // import App from './demo/demo-computed.js';
 
+const ele = document.querySelector("#app");
 
-const ele = document.querySelector('#app');
-createApp(App).mount(ele);
+createApp(App).mount(ele);
diff --git a/uuzpack/example/uuz.esm.js b/uuzpack/example/uuz.esm.js
@@ -1,3 +1,4 @@
+const isArr = Array.isArray;
 const isObject = val => val !== null && typeof val === 'object';
 const Text = Symbol('Text');
 const ShapeFlags = {
@@ -12,8 +13,10 @@ const getShapeFlag = type => {
 
 const blockStack = [];
 let currentBlock = null;
+const EMPTY_ARR = [];
 
 function createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) {
+  // TODO: Block相关
   const vnode = {
     el: null,
     component: null,
@@ -24,7 +27,7 @@ function createVNode(type, props = null, children = null, patchFlag = 0, dynamic
     shapeFlag: getShapeFlag(type)
   };
 
-  if (Array.isArray(children)) {
+  if (isArr(children)) {
     vnode.shapeFlag |= ShapeFlags.ARRAY_CHILDREN;
   } else if (typeof children === "string") {
     vnode.shapeFlag |= ShapeFlags.TEXT_CHILDREN;
@@ -56,7 +59,7 @@ function createBlock(type, props, children, patchFlag, dynamicProps) {
   return vnode;
 }
 
-function createTextVNode(text = ' ', flag = 0) {
+function createTextVNode(text = '', flag = 0) {
   return createVNode(Text, null, text, flag);
 }
 
@@ -230,7 +233,11 @@ function hostCreateElement(type) {
 }
 
 function hostSetElementText(el, text) {
-  el.innerText = text;
+  if (el.nodeType === Node.TEXT_NODE) {
+    el.data = text;
+  } else {
+    el.innerText = text;
+  }
 }
 
 function hostPatchProp(el, key, preValue, nextValue) {
@@ -456,10 +463,10 @@ function mounted() {
 }
 
 const render = (vnode, container) => {
-  patch$1(null, vnode, container);
+  patch(null, vnode, container);
 };
 
-function patch$1(oldVnode, vnode, container = null) {
+function patch(oldVnode, vnode, container = null) {
   const {
     type,
     shapeFlag
@@ -473,6 +480,8 @@ function patch$1(oldVnode, vnode, container = null) {
     default:
       if (shapeFlag & ShapeFlags.ELEMENT) {
         processElement(oldVnode, vnode, container);
+      } else if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
+        processElement(oldVnode, vnode, container);
       } else if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
         processComponent(oldVnode, vnode, container);
       }
@@ -505,12 +514,19 @@ function mountElement(vnode, container) {
   } = vnode; // 1. 先创建 element
   // 基于可扩展的渲染 api
 
-  const el = vnode.el = hostCreateElement(vnode.type); // 支持单子组件和多子组件的创建
+  let el;
 
-  if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
-    hostSetElementText(el, vnode.children);
-  } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
-    mountChildren(vnode.children, el);
+  if (typeof vnode.type === "symbol" && vnode.type.description === "Text") {
+    el = document.createTextNode(vnode.children);
+    vnode.el = el;
+  } else {
+    el = vnode.el = hostCreateElement(vnode.type); // 支持单子组件和多子组件的创建
+
+    if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
+      hostSetElementText(el, vnode.children);
+    } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+      mountChildren(vnode.children, el);
+    }
   } // 处理 props
 
 
@@ -530,7 +546,7 @@ function mountChildren(children, container) {
     // 这里应该需要处理一下 vnodeChild
     // 因为有可能不是 vnode 类型
     console.log("mountChildren:", VNodeChild);
-    patch$1(null, VNodeChild, container);
+    patch(null, VNodeChild, container);
   });
 }
 
@@ -577,7 +593,7 @@ function setupStatefulComponent(instance) {
 function setupRenderEffect(instance, container) {
   /* 
     经过 sfc 后的代码应该是这样的
-      export function render(_ctx, _cache) {
+     export function render(_ctx, _cache) {
       return (_openBlock(), _createBlock("div", {
         class: "abc",
         onClick: _ctx.addCount
@@ -588,15 +604,15 @@ function setupRenderEffect(instance, container) {
     if (!instance.isMounted) {
       const subTree = instance.subTree = instance.render(instance.proxy);
       beforeMount();
-      patch$1(null, subTree, container);
+      patch(null, subTree, container);
       mounted();
       instance.isMounted = true;
     } else {
       const nextTree = instance.render(instance.proxy);
       const prevTree = instance.subTree;
       instance.subTree = nextTree;
       beforeMount();
-      patch$1(prevTree, nextTree, prevTree.el);
+      patch(prevTree, nextTree, prevTree.el);
       mounted();
     }
   }, {
@@ -620,4 +636,4 @@ const createApp = (rootComponent, rootProps = null) => {
   return app;
 };
 
-export { computed, createApp, createBlock, createTextVNode, createVNode, effect, nextTick, openBlock, queueJob, reactive, ref, render, toDisplayString };
+export { computed, createApp, createBlock, createTextVNode, createVNode, effect, nextTick, openBlock, patch, queueJob, reactive, ref, render, toDisplayString };