Mometa 低码前端编辑器原理学习

interface RangeLocation {
  // 视图头部的位置
  // $POS<div></div>
  start: {
    line: number
    column: number
  }
  // 视图尾部的位置
  // <div></div>$POS
  end: {
    line: number
    column: number
  }
}

interface MometaData extends RangeLocation {
  // 视图 JSX name
  name: string
  // 视图 JSX 完整 text
  text: string
  // 视图 JSX 文件名
  filename: string
  // 视图 JSX 是否无 children, 如 <div></div>
  // 用来控制可视编辑的时候注入 空元素占位符，以便进行操作
  emptyChildren: boolean
  // 相对于 PWD 的相对文件名
  // 可视化编辑后，用于判断是否命中匹配的改动，resolve loading
  relativeFilename: string
  // 根据 mometa 数据 shasum 生成的唯一 id
  hash: string
  // 是否为某作用域内的第一个元素
  // 如 App 组件中，`div` 和 `p` 为其中的第一个元素，`h1` 不是
  // 用于可视化编辑后，控制是否需要前置包裹 <>$CONTENT</>
  // <p></p> => <><p>inserted</p><p></p></>
  isFirst: boolean
  // 视图 JSX 是否 selfClosed, 如 <div />
  // 用来控制可视编辑的时候是否能够插入到 children 中
  selfClosed: boolean

  // 视图内部头部的位置
  // <div>$POS  </div>
  innerStart: {
    line: number
    column: number
  }
  // 视图内部尾部的位置
  // <div>  $POS</div>
  innerEnd: {
    line: number
    column: number
  }

  /**
   * 视图容器信息，在 React 中为被 `{}` 包裹的 JSXElement
   * {list.map((text, i) => (
   *    <p key={i}>{text}</p>
   * ))}
   * 用于可视化编辑时（如删除、移动、插入），控制的是 container 还是 视图本身
   */
  container?: {
    isFirstElement: boolean
    text: string
    hash: string
  } & RangeLocation

  /**
   * 上个兄弟节点的位置信息，用于控制上移
   */
  previousSibling?: {
    text: string
  } & RangeLocation
  /**
   * 下个兄弟节点的位置信息，用于控制下移
   */
  nextSibling?: {
    text: string
  } & RangeLocation
}