{"body":"","commit":{"shortRevision":"d6a2ba2616","authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","authoredAt":"2019-02-28T08:52:54-08:00","revision":"d6a2ba261674f2d1103a6cfb7ca5c44aeac809c9","subject":"Added OVERVIEW doc"},"parents":["bcb6c2fd9fba652fefb3b529f602ba7e92dfae1c"],"patch":"diff --git a\/OVERVIEW.md b\/OVERVIEW.md\nnew file mode 100644\nindex 0000000000..0a5ec2f5a7\n--- \/dev\/null\n+++ b\/OVERVIEW.md\n@@ -0,0 +1,154 @@\n+# Overview\n+\n+## Serializing the tree\n+\n+Every React commit that changes the tree in a way DevTools cares about results in an \"_operations_\" message being sent across the bridge. These messages are lightweight patches that describe the changes that were made. (We don't resend the full tree structure like in legacy DevTools.)\n+\n+The payload for each message is a typed array. The first entry is a number identifying which renderer the update belongs to (for multi-root support). The rest of the array depends on the operations being made to the tree.\n+\n+We only send the following bits of information: element type, id, parent id, owner id, name, and key. Additional information (e.g. props, state) requires a separate \"_inspectElement_\" message.\n+\n+### Adding a root node\n+\n+Adding a root to the tree requires sending 3 numbers:\n+\n+1. add operation constant (`1`)\n+1. fiber id\n+1. element type constant (`8 === ElementTypeRoot`)\n+\n+For example, adding a root fiber with an id of 1:\n+```js\n+[\n+ 1, \/\/ add operation\n+ 1, \/\/ fiber id\n+ 8, \/\/ ElementTypeRoot\n+]\n+```\n+\n+### Adding a leaf node\n+\n+Adding a leaf node takes a variable number of numbers since we need to decode the name (and potentially the key):\n+\n+1. add operation constant (`1`)\n+1. fiber id\n+1. element type constant (e.g. `1 === ElementTypeClass`)\n+1. parent fiber id\n+1. owner fiber id\n+1. UTF encoded display name size\n+ * (followed by this number of encoded values)\n+1. UTF encoded key size\n+ * (followed by this number of encoded values)\n+\n+For example, adding a function component `` with an id 2:\n+```js\n+[\n+ 1, \/\/ add operation\n+ 2, \/\/ fiber id\n+ 2, \/\/ ElementTypeFunction\n+ 1, \/\/ parent id\n+ 0, \/\/ owner id\n+ 3, \/\/ encoded display name size\n+ 70, \/\/ \"F\"\n+ 111, \/\/ \"o\"\n+ 111, \/\/ \"o\"\n+ 0, \/\/ encoded key (null)\n+]\n+```\n+\n+### Removing a node\n+\n+Removing a fiber from the tree (a root or a leaf) only requires sending 2 numbers:\n+\n+1. remove operation constant (`2`)\n+1. fiber id\n+\n+For example, removing a root fiber with an id of 1:\n+```js\n+[\n+ 2, \/\/ remove operation\n+ 1, \/\/ fiber id\n+]\n+```\n+\n+### Re-ordering children\n+\n+1. re-order children constant (`3`)\n+1. fiber id\n+1. number of children\n+ * (followed by an ordered list of child fiber ids)\n+\n+For example:\n+```js\n+[\n+ 3, \/\/ re-order operation\n+ 15, \/\/ fiber id\n+ 2, \/\/ number of children\n+ 35, \/\/ first chlid id\n+ 21, \/\/ second chlid id\n+]\n+```\n+\n+## Reconstructing the tree\n+\n+The frontend stores its information about the tree in a map of id to objects with the following keys:\n+\n+* id: `number`\n+* parentID: `number`\n+* children: `Array`\n+* type: `number` (constant)\n+* displayName: `string | null`\n+* key: `number | string | null`\n+* ownerID: `number`\n+* depth: `number` ^{1<\/sup>\n+* weight: `number` ^{2<\/sup>\n+\n+^{1<\/sup> The `weight` of an element is the number of elements (including itself) below it in the tree. We cache this property so that we can quickly determine the total number of Elements as well as to find the Nth element within that set. (This enables us to use windowing.) This value needs to be adjusted each time elements are added or removed from the tree, but we amortize this over time to avoid any big performance hits when rendering the tree.\n+\n+The `depth` value determines how much padding\/indentation to use for the element when rendering it in the Elements panel. (This preserves the appearance of a nested tree, even though the view is a flat list.)\n+\n+### Finding the element at index N\n+\n+The tree data structure lets us impose an order on elements and \"quickly\" find the Nth one using the `weight` attribute.\n+\n+First we find which root contains the index:\n+```js\n+let rootID;\n+let root;\n+let rootWeight = 0;\n+for (let i = 0; i < this._roots.length; i++) {\n+ rootID = this._roots[i];\n+ root = this._idToElement.get(rootID);\n+ if (root.children.length === 0) {\n+ continue;\n+ } else if (rootWeight + root.weight > index) {\n+ break;\n+ } else {\n+ rootWeight += root.weight;\n+ }\n+}\n+```\n+\n+We skip the root itself because don't display them in the tree:\n+```js\n+const firstChildID = root.children[0];\n+```\n+\n+Then we traverse the tree to find the element:\n+```js\n+let currentElement = this._idToElement.get(firstChildID);\n+let currentWeight = rootWeight;\n+while (index !== currentWeight) {\n+ for (let i = 0; i < currentElement.children.length; i++) {\n+ const childID = currentElement.children[i];\n+ const child = this._idToElement.get(childID);\n+ const { weight } = child;\n+ if (index <= currentWeight + weight) {\n+ currentWeight++;\n+ currentElement = child;\n+ break;\n+ } else {\n+ currentWeight += weight;\n+ }\n+ }\n+}\n+```\n\\ No newline at end of file\n","files":[{"status":"A","path":"OVERVIEW.md"}]}}}}

dillon1000/react

Files changed