Component Tree?

[john-hu]

We can use the React Node and React Children as our component tree. But it is not easy to traverse back and forth among the tree. The most inconvenient parts are:

1. It is hard to find the container of a node. When we try to move a node to another container. We don't know where we should remove the node from.

2. It is impossible to keep the original React Node when we try to re-order its children. If we change any property or the children, we should use React.createElement or React.cloneElement to do it. Once we use it, the original React Node is changed.

The possible solution is to break one promise (solution 1):

We always keep the original node we get to tell users the change of layout.

Another alternative is to introduce an intermediate data format, like the Component/Container class of Java (solution 2).

---

Pros of Solution 1:

• We still keep React Node and React Children as the data structure.
• We can output a React ready Children data structure at the onLayoutChange event. So, users can just use it at the runtime.

Cons of Solution 1:

• The extra key props will be added to the newly created component

---

Pros of Solution 2

• The intermediate data format may have better performance in the future
• The intermediate data format makes it easy to get rid of React.

Cons of Solution 2

• We may need extra effort to convert the data format to React ready Children for the runtime usage.

[john-hu]

I will try to use Solution 1 and create an internal controller to handle the cache, Hierarchy Builder. We will change the interface of onLayoutChange from difference to the ReactChildren component.

[john-hu]

~TODO: we should handle the movement at the same container~

[john-hu]

TODO: the key field of the generated ReactNode is already filled ?!.... For example: a node without key is filled with “.0”, a node with “div” in key is filled with “.$div”. This may be caused by the usage of createElement with apply.

[john-hu]

TODO: We will try to use HierarchyBuilder as the bridge to share the information between DesignPane and ComponentTree. The user can layout ComponentTree and DesignPane by their thought.