Switched UTF string encoding approach to handle multibyte characters

Also removed LRU cache since the caching approach seems to slow things down overall, based on benchmarking.

Author: Brian Vaughn

packages/react-devtools-shared/src/__tests__/setupEnv.js

@@ -24,6 +24,3 @@ global.process.env.DARK_MODE_DIMMED_LOG_COLOR = DARK_MODE_DIMMED_LOG_COLOR;
 global.process.env.LIGHT_MODE_DIMMED_WARNING_COLOR = LIGHT_MODE_DIMMED_WARNING_COLOR;
 global.process.env.LIGHT_MODE_DIMMED_ERROR_COLOR = LIGHT_MODE_DIMMED_ERROR_COLOR;
 global.process.env.LIGHT_MODE_DIMMED_LOG_COLOR = LIGHT_MODE_DIMMED_LOG_COLOR;
-
-global.TextEncoder = require('util').TextEncoder;
-global.TextDecoder = require('util').TextDecoder;

packages/react-devtools-shared/src/utils.js

@@ -7,7 +7,6 @@
  * @flow
  */
 
-import LRU from 'lru-cache';
 import {
   isElement,
   typeOf,
@@ -50,19 +49,9 @@ import {localStorageGetItem, localStorageSetItem} from './storage';
 import {meta} from './hydration';
 
 import type {ComponentFilter, ElementType} from './types';
-import type {LRUCache} from 'react-devtools-shared/src/types';
 
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
 
-// On large trees, encoding takes significant time.
-// Try to reuse the already encoded strings.
-const encodedStringCache: LRUCache<
-  string,
-  Array<number> | Uint8Array,
-> = new LRU({
-  max: 1000,
-});
-
 export function alphaSortKeys(
   a: string | number | Symbol,
   b: string | number | Symbol,
@@ -128,47 +117,44 @@ export function getUID(): number {
   return ++uidCounter;
 }
 
-const isTextEncoderSupported =
-  typeof TextDecoder === 'function' && typeof TextEncoder === 'function';
-
 export function utfDecodeString(array: Array<number>): string {
-  if (isTextEncoderSupported) {
-    // Handles multi-byte characters; use if available.
-    return new TextDecoder().decode(new Uint8Array(array));
-  } else {
-    // Avoid spreading the array (e.g. String.fromCodePoint(...array))
-    // Functions arguments are first placed on the stack before the function is called
-    // which throws a RangeError for large arrays.
-    // See github.com/facebook/react/issues/22293
-    let string = '';
-    for (let i = 0; i < array.length; i++) {
-      const char = array[i];
-      string += String.fromCodePoint(char);
-    }
-    return string;
+  // Avoid spreading the array (e.g. String.fromCodePoint(...array))
+  // Functions arguments are first placed on the stack before the function is called
+  // which throws a RangeError for large arrays.
+  // See github.com/facebook/react/issues/22293
+  let string = '';
+  for (let i = 0; i < array.length; i++) {
+    const char = array[i];
+    string += String.fromCodePoint(char);
   }
+  return string;
 }
 
-export function utfEncodeString(string: string): Array<number> | Uint8Array {
-  const cached = encodedStringCache.get(string);
-  if (cached !== undefined) {
-    return cached;
-  }
+function surrogatePairToCodePoint(
+  charCode1: number,
+  charCode2: number,
+): number {
+  return ((charCode1 & 0x3ff) << 10) + (charCode2 & 0x3ff) + 0x10000;
+}
 
-  let encoded;
-  if (isTextEncoderSupported) {
-    // Handles multi-byte characters; use if available.
-    encoded = new TextEncoder().encode(string);
-  } else {
-    encoded = new Array(string.length);
-    for (let i = 0; i < string.length; i++) {
-      encoded[i] = string.codePointAt(i);
+// Credit for this encoding approach goes to Tim Down:
+// https://stackoverflow.com/questions/4877326/how-can-i-tell-if-a-string-contains-multibyte-characters-in-javascript
+export function utfEncodeString(string: string): Array<number> {
+  const codePoints = [];
+  let i = 0;
+  let charCode;
+  while (i < string.length) {
+    charCode = string.charCodeAt(i);
+    if ((charCode & 0xf800) === 0xd800) {
+      codePoints.push(
+        surrogatePairToCodePoint(charCode, string.charCodeAt(++i)),
+      );
+    } else {
+      codePoints.push(charCode);
     }
+    ++i;
   }
-
-  encodedStringCache.set(string, encoded);
-
-  return encoded;
+  return codePoints;
 }
 
 export function printOperationsArray(operations: Array<number>) {