优化工程结构

packages/@typex-core/constDefine.js

@@ -0,0 +1,7 @@
+// vnodeType 1 函数组件 2 类组件 3 文本节点 4 dom节点
+export const vnodeType = {
+    VFUNCTION :1,
+    VCOMPONENT :2, 
+    VTEXT :3, 
+    VDOM :4, 
+}

packages/@typex-core/core.js

@@ -11,6 +11,7 @@ import { createRef, createVnode, patch, Component } from './view'
 import { SplitText } from './transform/step'
 import { setFormat, deleteText } from './transform/transaction'
 import * as utils from './utils.js'
+import { vnodeType } from './constDefine'
 import {
   setVdomOrElm,
   setVnodeOrIns,
@@ -42,6 +43,7 @@ const core = {
   setVdomOrIns,
   getVdomOrIns,
   SplitText,
+  vnodeType
 }
 
 export default core

packages/@typex-core/mappings.js

@@ -9,6 +9,8 @@ const vdomElmMap = new WeakMap() // 记录虚拟dom和真实dom的映射
 const vnodeInsMap = new WeakMap() // 记录组件实例和组件虚拟节点的映射
 const vdomInsMap = new WeakMap() // 记录组件实例和虚拟dom的映射
 const vdomPathMap = new WeakMap() // 记录虚拟dom和Path的映射
+import { vnodeType } from "./constDefine"
+const { VFUNCTION, VCOMPONENT, VTEXT} =  vnodeType
 
 function getVdomOrIns(key) {
   return vdomInsMap.get(key)
@@ -19,11 +21,11 @@ function getVdomOrPath(key) {
     const res = vdomPathMap.get(key)
     if (res) return res
     // 如果是文本节点 没找到 那说明这个文本是没有被内容管理器管理的内容
-    if (key.vnodeType === 3) return null
+    if (key.vnodeType === VTEXT) return null
     // 如果没找到 可能是组件类型的vdom 需要先找到vnode
     const ins = getVdomOrIns(key)
     const componentVnode = getVnodeOrIns(ins)
-    if (ins.vnodeType === 1) {
+    if (ins.vnodeType === VFUNCTION) {
       return vdomPathMap.get(ins)
     } else {
       return vdomPathMap.get(componentVnode)
@@ -39,10 +41,10 @@ function getVnodeOrIns(key) {
   return vnodeInsMap.get(key)
 }
 function getVdomOrElm(key) {
-  if (key.vnodeType === 1) {
+  if (key.vnodeType === VFUNCTION) {
     return vdomElmMap.get(vdomInsMap.get(key))
   }
-  if (key.vnodeType === 2) {
+  if (key.vnodeType === VCOMPONENT) {
     return vdomElmMap.get(vdomInsMap.get(vnodeInsMap.get(key)))
   }
   return vdomElmMap.get(key)

packages/@typex-core/view/vdom/createVnode.js

@@ -1,7 +1,8 @@
 import { isPrimitive, isUndef, styleToObj, uuid, mergeObj, isClass, isFunction } from '../../utils'
+import { vnodeType } from '../../constDefine'
 const BUILTINPROPSKEY = ['ref', 'key', 'ns'] //不包含在props中的属性
 const INHERITPROPSKEY = ['ns'] // 需要继承的属性
-
+const { VFUNCTION, VCOMPONENT,VTEXT, VDOM} =  vnodeType
 /**
  * @description 创建虚拟dom
  * @export
@@ -38,7 +39,7 @@ const _genChildren = (children, inherit) => {
         return {
           _uuid: uuid(),
           type: 'text',
-          vnodeType: 3,
+          vnodeType: VTEXT,
           children: ele,
         }
       } else {
@@ -48,27 +49,19 @@ const _genChildren = (children, inherit) => {
     })
 }
 
-/**
- * @description 虚拟节点工厂函数
- * @param {*} type
- * @param {*} builtinProps
- * @param {*} props
- * @param {*} children
- * @returns {*}
- */
 function Element(type, builtinProps, props, children) {
   let element
   if (type === 'text') {
     element = {
       _uuid: uuid(),
-      vnodeType: 3,
+      vnodeType: VTEXT,
       type: 'text',
       children: children.join(''),
     }
   } else {
     element = {
       _uuid: uuid(),
-      vnodeType: isClass(type) ? 2 : isFunction(type) ? 1 : 4,
+      vnodeType: isClass(type) ? VCOMPONENT : isFunction(type) ? VFUNCTION : VDOM,
       type,
       ...builtinProps,
       props,
@@ -78,7 +71,7 @@ function Element(type, builtinProps, props, children) {
     for (let propName of INHERITPROPSKEY) {
       inherit[propName] = element[propName]
     }
-    if (element.vnodeType === 1 || element.vnodeType === 2) {
+    if (element.vnodeType === VFUNCTION || element.vnodeType === VCOMPONENT) {
       element.props.children = _genChildren(children, inherit)
     } else {
       element.children = _genChildren(children, inherit)

packages/@typex-core/view/vdom/patch.js

@@ -16,6 +16,8 @@ import {
   setVdomOrIns,
 } from '../../mappings'
 import { isUndef, isDef } from '../../utils'
+import { vnodeType } from '../../constDefine'
+const { VFUNCTION, VCOMPONENT, VTEXT} =  vnodeType
 
 /**
  * @description 判断是否相同节点
@@ -241,7 +243,7 @@ function updateChildren(parentElm, newCh, oldCh) {
   }
 }
 function getVdomByComponentVnode(componentVnode) {
-  return componentVnode.vnodeType === 1
+  return componentVnode.vnodeType === VFUNCTION
     ? getVdomOrIns(componentVnode)
     : getVdomOrIns(getVnodeOrIns(componentVnode))
 }
@@ -252,13 +254,13 @@ function getVdomByComponentVnode(componentVnode) {
  */
 function patchVnode(vnode, oldVnode) {
   if (oldVnode === vnode) return
-  if (vnode.vnodeType === 1) {
+  if (vnode.vnodeType === VFUNCTION) {
     // 函数组件
     const oldVdom = getVdomByComponentVnode(oldVnode)
     const newVdom = vnode.type(h, vnode.props)
     setVdomOrIns(newVdom, vnode)
     patchVnode(newVdom, oldVdom)
-  } else if (vnode.vnodeType === 2) {
+  } else if (vnode.vnodeType === VCOMPONENT) {
     // 常规组件
     const oldVdom = getVdomByComponentVnode(oldVnode)
     const ins = getVnodeOrIns(oldVnode)
@@ -268,7 +270,7 @@ function patchVnode(vnode, oldVnode) {
     setVdomOrIns(ins, newVdom)
     setVnodeOrIns(ins, vnode)
     patchVnode(newVdom, oldVdom)
-  } else if (vnode.vnodeType === 3) {
+  } else if (vnode.vnodeType === VTEXT) {
     const elm = getVdomOrElm(oldVnode)
     setVdomOrElm(elm, vnode)
     pluginContext.platform.updateProps(vnode, oldVnode)

packages/@typex-platform/web/createElm.js

@@ -2,38 +2,47 @@ import coreContext from '../coreContext'
 import updateProps from './updateProps'
 export default function createElm(vnode) {
   // vnodeType 1 函数组件 2 类组件 3 文本节点 4 dom节点
+  const { createVnode, setVdomOrIns, setVnodeOrIns, setVdomOrElm,vnodeType:{
+    VFUNCTION,
+    VCOMPONENT, 
+    VTEXT
+  }  } = coreContext.core
   let elm
-  if (vnode.vnodeType === 1) {
-    const vdom = vnode.type(coreContext.core.createVnode, vnode.props)
+  if (vnode.vnodeType === VFUNCTION) {
+    const vdom = vnode.type(createVnode, vnode.props)
     elm = createElm(vdom)
     if (vnode.ref) vnode.ref.current = elm
-    coreContext.core.setVdomOrIns(vdom, vnode)
-    coreContext.core.setVdomOrElm(elm, vdom)
+    setVdomOrIns(vdom, vnode)
+    setVdomOrElm(elm, vdom)
     updateProps(vdom)
-  } else if (vnode.vnodeType === 2) {
+  } else if (vnode.vnodeType === VCOMPONENT) {
     const ins = new vnode.type(vnode.props)
-    const vdom = ins.generateVdom(coreContext.core.createVnode)
-    elm = createElm(vdom)
-
-    // 执行 onCreated 钩子
-    if (typeof ins.onCreated === 'function') ins.onCreated()
     // 给ref赋值
     if (vnode.ref) vnode.ref.current = ins
+    // 执行 onCreated 钩子
+    if (typeof ins.onCreated === 'function') ins.onCreated()
 
-    coreContext.core.setVdomOrIns(vdom, ins)
-    coreContext.core.setVnodeOrIns(ins, vnode)
-    coreContext.core.setVdomOrElm(elm, vdom)
+    // 执行render创建虚拟dom
+    const vdom = ins.generateVdom(createVnode)
+    elm = createElm(vdom)
+
+    // 创建 ins vnode vdom elm 关系映射
+    setVdomOrIns(vdom, ins)
+    setVnodeOrIns(ins, vnode)
+    setVdomOrElm(elm, vdom)
+
+    // 把vdom上面的属性添加到真实dom
     updateProps(vdom)
-  } else if (vnode.vnodeType === 3) {
+  } else if (vnode.vnodeType === VTEXT) {
     elm = document.createTextNode(vnode.children)
-    coreContext.core.setVdomOrElm(elm, vnode)
+    setVdomOrElm(elm, vnode)
     return elm
   } else {
     elm = vnode.ns
       ? document.createElementNS(vnode.ns, vnode.type)
       : document.createElement(vnode.type)
     if (vnode.ref) vnode.ref.current = elm
-    coreContext.core.setVdomOrElm(elm, vnode)
+    setVdomOrElm(elm, vnode)
     updateProps(vnode)
   }
 

packages/editor/formats/components/Paragraph.js

@@ -25,4 +25,10 @@ export default class Paragraph extends Block {
       </p>
     )
   }
+  onMounted(){
+    console.log('Paragraph  onMounted');
+  }
+  onCreated(){
+    console.log('Paragraph  onCreated');
+  }
 }