{"body":"","parents":["c1363b7e171b247c00a8499d6e46dd9d7d287a15"],"patch":"diff --git a\/OVERVIEW.md b\/OVERVIEW.md\nindex af1535faa8..f151512ee9 100644\n--- a\/OVERVIEW.md\n+++ b\/OVERVIEW.md\n@@ -14,10 +14,39 @@ The old DevTools also rendered the entire application tree in the form of a larg\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 two entries are numbers that identify which renderer and root the update belongs to (for multi-root support). The rest of the array depends on the operations being made to the tree.\n+The payload for each message is a typed array. The first two entries are numbers that identify which renderer and root the update belongs to (for multi-root support). Then the strings are encoded in a string table. The rest of the array depends on the operations being made to the tree.\n \n No updates are required for many commits because 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+#### String table\n+\n+The string table is encoded right after the first two numbers.\n+\n+It consists of:\n+\n+1. the total length of next items that belong to string table\n+2. for each string in a table:\n+ 1. encoded size\n+ 2. a list of its codepoints\n+\n+For example, for `Foo` and `Bar` we would see:\n+\n+```\n+[\n+ 8, \/\/ string table length\n+ 3, \/\/ encoded display name size\n+ 70, \/\/ \"F\"\n+ 111, \/\/ \"o\"\n+ 111, \/\/ \"o\"\n+ 3, \/\/ encoded display name size\n+ 66, \/\/ \"B\"\n+ 97, \/\/ \"a\"\n+ 114, \/\/ \"r\"\n+]\n+```\n+\n+Later operations will reference strings by a one-based index. For example, `1` would mean `\"Foo\"`, and `2` would mean `\"Bar\"`. The `0` string id always represents `null` and isn't explicitly encoded in the table.\n+\n #### Adding a root node\n \n Adding a root to the tree requires sending 4 numbers:\n@@ -46,10 +75,8 @@ Adding a leaf node takes a variable number of numbers since we need to decode th\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+1. string table id for `displayName`\n+1. string table id for `key`\n \n For example, adding a function component `` with an id 2:\n ```js\n@@ -60,10 +87,8 @@ For example, adding a function component `` with an id 2:\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+ 1, \/\/ id of \"Foo\" displayName in the string table\n+ 0, \/\/ id of null key in the string table (always zero for null)\n ]\n ```\n \ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex 07be08f9d1..89facf5165 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -590,6 +590,9 @@ export function attach(\n let pendingRealUnmountedIDs: Array = [];\n let pendingSimulatedUnmountedIDs: Array = [];\n let pendingOperationsQueue: Array | null = [];\n+ let pendingStringTable: Map = new Map();\n+ let pendingStringTableLength = 0;\n+ let pendingStringTableCounter = 0;\n \n function pushOperation(op: number): void {\n if (__DEV__) {\n@@ -620,6 +623,10 @@ export function attach(\n const ops = new Uint32Array(\n \/\/ Identify which renderer this update is coming from.\n 2 + \/\/ [rendererID, rootFiberID]\n+ \/\/ How big is the string table?\n+ 1 + \/\/ [stringTableLength]\n+ \/\/ Then goes the actual string table.\n+ pendingStringTableLength +\n \/\/ All unmounts are batched in a single message.\n 2 + \/\/ [TREE_OPERATION_REMOVE, removedIDLength]\n pendingRealUnmountedIDs.length +\n@@ -635,6 +642,15 @@ export function attach(\n ops[i++] = rendererID;\n ops[i++] = getFiberID(getPrimaryFiber(root.current));\n \n+ \/\/ Now fill in the string table.\n+ \/\/ [stringTableLength, str1Length, ...str1, str2Length, ...str2, ...]\n+ ops[i++] = pendingStringTableLength;\n+ pendingStringTable.forEach((value, key) => {\n+ ops[i++] = key.length;\n+ ops.set(utfEncodeString(key), i);\n+ i += key.length;\n+ });\n+\n \/\/ All unmounts except roots are batched in a single message.\n ops[i++] = TREE_OPERATION_REMOVE;\n \/\/ The first number is how many unmounted IDs we're gonna send.\n@@ -672,6 +688,26 @@ export function attach(\n pendingOperations.length = 0;\n pendingRealUnmountedIDs.length = 0;\n pendingSimulatedUnmountedIDs.length = 0;\n+ pendingStringTable.clear();\n+ pendingStringTableLength = 0;\n+ pendingStringTableCounter = 0;\n+ }\n+\n+ function getStringID(str: string | null): number {\n+ if (str === null) {\n+ return 0;\n+ }\n+ const existingID = pendingStringTable.get(str);\n+ if (existingID !== undefined) {\n+ return existingID;\n+ }\n+ let id = ++pendingStringTableCounter;\n+ pendingStringTable.set(str, id);\n+ \/\/ The string table total length needs to account\n+ \/\/ both for the string length, and for the array item\n+ \/\/ that contains the length itself. Hence + 1.\n+ pendingStringTableLength += str.length + 1;\n+ return id;\n }\n \n function recordMount(fiber: Fiber, parentFiber: Fiber | null) {\n@@ -700,41 +736,15 @@ export function attach(\n _debugOwner != null ? getFiberID(getPrimaryFiber(_debugOwner)) : 0;\n const parentID = getFiberID(getPrimaryFiber(parentFiber));\n \n- let encodedDisplayName = ((null: any): Uint8Array);\n- let encodedKey = ((null: any): Uint8Array);\n-\n- if (displayName !== null) {\n- encodedDisplayName = utfEncodeString(displayName);\n- }\n-\n- if (key !== null) {\n- \/\/ React$Key supports string and number types as inputs,\n- \/\/ But React converts numeric keys to strings, so we only have to handle that type here.\n- \/\/ https:\/\/github.com\/facebook\/react\/blob\/0e67969cb1ad8c27a72294662e68fa5d7c2c9783\/packages\/react\/src\/ReactElement.js#L187\n- encodedKey = utfEncodeString(((key: any): string));\n- }\n-\n- const encodedDisplayNameSize =\n- displayName === null ? 0 : encodedDisplayName.length;\n- const encodedKeySize = key === null ? 0 : encodedKey.length;\n-\n+ let displayNameStringID = getStringID(displayName);\n+ let keyStringID = getStringID(key);\n pushOperation(TREE_OPERATION_ADD);\n pushOperation(id);\n pushOperation(type);\n pushOperation(parentID);\n pushOperation(ownerID);\n- pushOperation(encodedDisplayNameSize);\n- if (displayName !== null) {\n- for (let i = 0; i < encodedDisplayName.length; i++) {\n- pushOperation(encodedDisplayName[i]);\n- }\n- }\n- pushOperation(encodedKeySize);\n- if (key !== null) {\n- for (let i = 0; i < encodedKey.length; i++) {\n- pushOperation(encodedKey[i]);\n- }\n- }\n+ pushOperation(displayNameStringID);\n+ pushOperation(keyStringID);\n }\n \n if (isProfiling) {\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex 130ba146de..85ece39dd9 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -630,6 +630,22 @@ export default class Store extends EventEmitter {\n \/\/ We'll use the parent ID to adjust selection if it gets deleted.\n \n let i = 2;\n+\n+ \/\/ Reassemble the string table.\n+ let stringTable = [\n+ null, \/\/ ID = 0 corresponds to the null string.\n+ ];\n+ const stringTableSize = operations[i++];\n+ const stringTableEnd = i + stringTableSize;\n+ while (i < stringTableEnd) {\n+ let nextLength = operations[i++];\n+ let nextString = utfDecodeString(\n+ (operations.slice(i, i + nextLength): any)\n+ );\n+ stringTable.push(nextString);\n+ i += nextLength;\n+ }\n+\n while (i < operations.length) {\n const operation = operations[i];\n switch (operation) {\n@@ -686,23 +702,13 @@ export default class Store extends EventEmitter {\n ownerID = ((operations[i]: any): number);\n i++;\n \n- const displayNameLength = operations[i];\n+ const displayNameStringID = operations[i];\n+ const displayName = stringTable[displayNameStringID];\n i++;\n- const displayName =\n- displayNameLength === 0\n- ? null\n- : utfDecodeString(\n- (operations.slice(i, i + displayNameLength): any)\n- );\n- i += displayNameLength;\n-\n- const keyLength = operations[i];\n+\n+ const keyStringID = operations[i];\n+ const key = stringTable[keyStringID];\n i++;\n- const key =\n- keyLength === 0\n- ? null\n- : utfDecodeString((operations.slice(i, i + keyLength): any));\n- i += +keyLength;\n \n if (__DEBUG__) {\n debug(\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\nindex a91c7f0ab3..4e02f912fe 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n@@ -167,6 +167,22 @@ function updateTree(\n };\n \n let i = 2;\n+\n+ \/\/ Reassemble the string table.\n+ let stringTable = [\n+ null, \/\/ ID = 0 corresponds to the null string.\n+ ];\n+ const stringTableSize = operations[i++];\n+ const stringTableEnd = i + stringTableSize;\n+ while (i < stringTableEnd) {\n+ let nextLength = operations[i++];\n+ let nextString = utfDecodeString(\n+ (operations.slice(i, i + nextLength): any)\n+ );\n+ stringTable.push(nextString);\n+ i += nextLength;\n+ }\n+\n while (i < operations.length) {\n const operation = operations[i];\n \n@@ -209,23 +225,13 @@ function updateTree(\n \n i++; \/\/ ownerID\n \n- const displayNameLength = operations[i];\n+ const displayNameStringID = operations[i];\n+ const displayName = stringTable[displayNameStringID];\n i++;\n- const displayName =\n- displayNameLength === 0\n- ? null\n- : utfDecodeString(\n- (operations.slice(i, i + displayNameLength): any)\n- );\n- i += displayNameLength;\n-\n- const keyLength = operations[i];\n+\n+ const keyStringID = operations[i];\n+ const key = stringTable[keyStringID];\n i++;\n- const key =\n- keyLength === 0\n- ? null\n- : utfDecodeString((operations.slice(i, i + keyLength): any));\n- i += +keyLength;\n \n if (__DEBUG__) {\n debug(\n","files":[{"path":"OVERVIEW.md","status":"M"},{"path":"src\/backend\/renderer.js","status":"M"},{"path":"src\/devtools\/store.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/CommitTreeBuilder.js","status":"M"}],"commit":{"authorEmail":"dan.abramov@gmail.com","revision":"c8f8943c9ad60a5416cf1a5c57f9c0e966a49b4e","authorName":"Dan Abramov","authoredAt":"2019-04-25T17:11:24+01:00","shortRevision":"c8f8943c9a","subject":"Transfer strings in a string table"}}

dillon1000/react

Files changed