refactor: add types to TreeNode (#140)

* refactor: add types to TreeNode

* refactor: add Nullable type

docs/ROADMAP.md

@@ -37,7 +37,7 @@ CI and CD
 - [ ] Add and publish Github Action, modify the version number of the package.json, automatically tag and publish the new version to npm after merging or push to master
 
 Test
-- [ ] Unit test(Optional)
+- [ ] Unit test(P1)
 - [ ] e2e test(Optional)
 
 **June 2020**

lib/block/base/content/index.ts

@@ -128,7 +128,7 @@ abstract class Content extends TreeNode {
   }
 
   arrowHandler(event: Event) {
-    if(!isKeyboardEvent(event)) {
+    if (!isKeyboardEvent(event)) {
       return;
     }
     const previousContentBlock = this.previousContentInContext();
@@ -265,7 +265,7 @@ abstract class Content extends TreeNode {
     this.domNode!.innerHTML = `<span class="mu-syntax-text">${text}</span>`;
   }
 
-  composeHandler (event: Event) {
+  composeHandler(event: Event) {
     if (event.type === "compositionstart") {
       this.isComposed = true;
     } else if (event.type === "compositionend") {
@@ -359,11 +359,12 @@ abstract class Content extends TreeNode {
                 /[*$`~_]{1}/.test(inputChar)))
           ) {
             needRender = true;
-            text = typeof event.data === "string" && BRACKET_HASH[event.data]
-              ? text.substring(0, offset) +
-                BRACKET_HASH[inputChar] +
-                text.substring(offset)
-              : text;
+            text =
+              typeof event.data === "string" && BRACKET_HASH[event.data]
+                ? text.substring(0, offset) +
+                  BRACKET_HASH[inputChar] +
+                  text.substring(offset)
+                : text;
           }
 
           // Delete the last `*` of `**` when you insert one space between `**` to create a bullet list.
@@ -536,10 +537,6 @@ abstract class Content extends TreeNode {
 
   remove() {
     super.remove();
-    if (this.domNode) {
-      this.domNode.remove();
-    }
-    this.domNode = null;
 
     return this;
   }

lib/block/base/parent.ts

@@ -89,21 +89,23 @@ abstract class Parent extends TreeNode {
    * Append node in linkedList, mounted it into the DOM tree, dispatch operation if necessary.
    * @param  {...any} args
    */
-  append(...args) {
+  append(...childrenAndSource: [...Parent[], string]): void;
+  append(...children: Parent[]): void;
+  append(...args: unknown[]) {
     const source =
       typeof args[args.length - 1] === "string" ? args.pop() : "api";
 
-    args.forEach((node) => {
+    (args as Parent[]).forEach((node) => {
       node.parent = this;
       const { domNode } = node;
       this.domNode!.appendChild(domNode!);
     });
 
-    this.children.append(...args);
+    this.children.append(...(args as Parent[]));
 
     // push operations
     if (source === "user") {
-      args.forEach((node) => {
+      (args as Parent[]).forEach((node) => {
         const path = node.getJsonPath();
         const state = node.getState();
         this.jsonState.pushOperation("insertOp", path, state);
@@ -197,6 +199,7 @@ abstract class Parent extends TreeNode {
       const state = this.getState();
       this.jsonState.pushOperation("removeOp", path, state);
     }
+
     super.remove();
 
     return this;
@@ -208,7 +211,7 @@ abstract class Parent extends TreeNode {
     });
   }
 
-  removeChild(node, source = "user") {
+  removeChild(node: Parent | Content, source = "user") {
     if (!this.children.contains(node)) {
       debug.warn(
         "Can not removeChild(node), because node is not child of this block"

lib/block/base/treeNode.ts

@@ -2,6 +2,7 @@ import LinkedNode from "@muya/block/base/linkedList/linkedNode";
 import { BLOCK_DOM_PROPERTY } from "@muya/config";
 import Muya from "@muya/index";
 import type { TState } from "@muya/state/types";
+import { Nullable } from "@muya/types";
 import { createDomNode } from "@muya/utils/dom";
 import type { Attributes, Datasets } from "@muya/utils/types";
 import type { Path } from "../types";
@@ -15,8 +16,8 @@ interface IConstructor<T> {
 }
 
 abstract class TreeNode extends LinkedNode<TreeNode> {
-  public parent: Parent | null = null;
-  public domNode: HTMLElement | null = null;
+  public parent: Nullable<Parent> = null;
+  public domNode: Nullable<HTMLElement> = null;
   public tagName: string = "";
   public classList: string[] = [];
   public attributes: Attributes = {};
@@ -74,9 +75,10 @@ abstract class TreeNode extends LinkedNode<TreeNode> {
    * @returns boolean
    */
   isContent(this: unknown): this is Content {
-    return typeof this.text === "string";
+    return typeof (this as Content).text === "string";
   }
 
+
   /**
    * check this is a Parent block?
    * @param this
@@ -216,7 +218,7 @@ abstract class TreeNode extends LinkedNode<TreeNode> {
     return popItem ? popItem : null;
   }
 
-  insertInto(parent: Parent, refBlock: Parent | null = null) {
+  insertInto(parent: Parent, refBlock: Nullable<Parent> = null) {
     if (this.parent === parent && this.next === refBlock) {
       return;
     }
@@ -225,7 +227,7 @@ abstract class TreeNode extends LinkedNode<TreeNode> {
       this.parent.removeChild(this);
     }
 
-    parent.insertBefore(this, refBlock);
+    parent.insertBefore(this as unknown as Parent, refBlock);
   }
 
   /**
@@ -235,9 +237,12 @@ abstract class TreeNode extends LinkedNode<TreeNode> {
     if (!this.parent) {
       return;
     }
+
     this.parent.children.remove(this);
     this.parent = null;
     this.domNode?.remove();
+
+    return this;
   }
 }
 

lib/block/scrollPage/index.ts

@@ -68,7 +68,7 @@ class ScrollPage extends Parent {
   listenDomEvent() {
     const { eventCenter } = this.muya;
     const { domNode } = this;
-    eventCenter.attachDOMEvent(domNode, "click", this.clickHandler.bind(this));
+    eventCenter.attachDOMEvent(domNode!, "click", this.clickHandler.bind(this));
   }
 
   updateState(state) {

lib/types.ts

@@ -34,3 +34,6 @@ export interface MuyaOptions {
     }
   },
 }
+
+export type Nullable<T> = T | null;
+