1

caiwuu · Apr 26, 2024 · afb1d6e · afb1d6e
1 parent c57adf7
commit afb1d6e
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 21 deletions.
diff --git a/packages/@typex-core/mappings.js b/packages/@typex-core/mappings.js
@@ -50,6 +50,15 @@ function getVdomOrElm (key) {
   return vdomElmMap.get(key)
 }
 function setVdomOrElm (vn, elm) {
+  // console.log(vn.vnodeType, elm.vnodeType);
+  // if (vn.vnodeType === 2 || elm.vnodeType === 2) {
+  //   console.trace()
+  // }
+  if (vn === elm) {
+    debugger
+    console.log(1213);
+    console.trace()
+  }
   vdomElmMap.set(elm, vn).set(vn, elm)
 }
 function setVnodeOrIns (vn, ins) {

diff --git a/packages/@typex-core/view/vdom/patch.js b/packages/@typex-core/view/vdom/patch.js
@@ -76,7 +76,8 @@ function addVnodes (parentElm, before = null, vnodes, startIdx, endIdx) {
     if (ch != null) {
       const elm = pluginContext.platform.createElm(ch)
       // TODO
-      setVdomOrElm(elm, ch)
+      console.log(ch.tag);
+      setVdomOrElm(ch, getVdomOrElm(elm))
       pluginContext.platform.insertBefore(parentElm, elm, before)
       // execHook(ch, 'onMounted')
     }

diff --git a/packages/@typex-platform/web/createElm.js b/packages/@typex-platform/web/createElm.js
@@ -39,7 +39,7 @@ export default function createElm (vnode) {
 
     // 创建 ins vnode vdom elm 关系映射
     setVdomOrIns(vdom, ins)
-    setVdomOrElm(elm, vdom)
+    // setVdomOrElm(elm, getVdomOrElm(elm))
 
     // 把vdom上面的属性添加到真实dom
     updateProps(vdom)

diff --git a/packages/@typex-platform/web/dom.js b/packages/@typex-platform/web/dom.js
@@ -17,15 +17,16 @@ export function insertBefore (parentNode, newNode, referenceNode) {
 }
 export function replaceChild (parentNode, newNode, oldNode) {
   enqueueMount()
-  onDestoryed(coreContext.core.getVdomOrElm(oldNode))
+  execDestory(oldNode)
   return parentNode.replaceChild(newNode, oldNode)
 }
 export function appendChild (parentNode, newNode) {
   enqueueMount()
   return parentNode.appendChild(newNode)
 }
 export function removeChild (parentNode, referenceNode) {
-  onDestoryed(coreContext.core.getVdomOrElm(referenceNode))
+  execDestory(referenceNode)
+  console.log(1);
   return parentNode.removeChild(referenceNode)
 }
 
@@ -59,20 +60,49 @@ function enqueueMount () {
   }
 }
 
-function onDestoryed (oldVnode) {
-  if (oldVnode.vnodeType === coreContext.core.vnodeType.VTEXT) return
-  if (oldVnode.children?.length) {
-    console.log(oldVnode.children?.length, [oldVnode]);
-    oldVnode.children.forEach(ch => {
-      onDestoryed(ch)
-    })
-  }
-  if (oldVnode.vnodeType === coreContext.core.vnodeType.VCOMPONENT) {
-    const ins = coreContext.core.getVnodeOrIns(oldVnode)
-    if (!ins) return
-    const vdom = coreContext.core.getVdomOrIns(ins)
-    if (!vdom) return
-    onDestoryed(vdom)
+function execDestory (oldElm) {
+  const oldVdom = coreContext.core.getVdomOrElm(oldElm)
+  const ins = coreContext.core.getVdomOrIns(oldVdom)
+  if (ins) {
     execHook(ins, 'onDestoryed')
   }
-}
+  traverseAndDestroy(oldVdom)
+}
+function traverseAndDestroy (oldVdom) {
+  switch (oldVdom.vnodeType) {
+    case coreContext.core.vnodeType.VTEXT:
+    case coreContext.core.vnodeType.VFUNCTION:
+      break;
+
+    case coreContext.core.vnodeType.VCOMPONENT:
+      const ins = coreContext.core.getVnodeOrIns(oldVdom)
+      if (!ins) return
+      const vdom = coreContext.core.getVdomOrIns(ins)
+      if (!vdom) return
+      traverseAndDestroy(vdom)
+      execHook(ins, 'onDestoryed')
+      break
+
+    case coreContext.core.vnodeType.VDOM:
+      oldVdom.children?.forEach(ch => {
+        traverseAndDestroy(ch)
+      })
+      break;
+  }
+  // console.log(11);
+  // if (oldVnode.vnodeType === coreContext.core.vnodeType.VTEXT) return
+
+  // if (oldVnode.children?.length) {
+  //   oldVnode.children.forEach(ch => {
+  //     traverseAndDestroy(ch)
+  //   })
+  // }
+  // if (oldVnode.vnodeType === coreContext.core.vnodeType.VCOMPONENT) {
+  //   const ins = coreContext.core.getVnodeOrIns(oldVnode)
+  //   if (!ins) return
+  //   const vdom = coreContext.core.getVdomOrIns(ins)
+  //   if (!vdom) return
+  //   traverseAndDestroy(vdom)
+  //   execHook(ins, 'onDestoryed')
+  // }
+}
diff --git a/packages/editor/data.js b/packages/editor/data.js
@@ -8,6 +8,24 @@
 // 数据结构说明 path 包含 data和formats；marks 是一个path组成的列表
 export const mockData = {
   data: [
+    {
+      data: [
+        {
+          data: '这是1121一个基于Typex编写的简单富文本编辑器demo',
+          formats: { color: '#666', bold: true, fontSize: '20px' },
+        },
+      ],
+      formats: { paragraph: true },
+    },
+    {
+      data: [
+        {
+          data: '这是1121一个基于Typex编写的简单富文本编辑器demo',
+          formats: { color: '#666', bold: true, fontSize: '20px' },
+        },
+      ],
+      formats: { paragraph: true },
+    },
     {
       data: [
         {

diff --git a/packages/editor/formats/components/Header.js b/packages/editor/formats/components/Header.js
@@ -7,7 +7,12 @@
  */
 import Block from './block'
 export default class Header extends Block {
-  render(h) {
-    return h(`h${this.props.level}`, null, this.$path.render())
+  render (h) {
+    // return h(`h${this.props.level}`, null, this.$path.render())
+    return (
+      <p>
+        {this.$path.render()}
+      </p>
+    )
   }
 }