console: iterable printing improvements (#4472)

1. Array elements are now grouped the same as in Node.js
2. Limit to 100 (Node.js default) elements to display in iterable
3. Print each element in new line if excessing max line length (same as in Node.js)
4. Print length of the TypedArray
5. Print information about empty items in Array

1 files changed, 299 insertions, 2 deletions

diff --git a/cli/js/tests/console_test.ts b/cli/js/tests/console_test.ts
index b4848332f..c49c941f4 100644
--- a/cli/js/tests/console_test.ts
+++ b/cli/js/tests/console_test.ts
@@ -181,8 +181,11 @@ unitTest(function consoleTestStringifyCircular(): void {
     stringify(async function* agf() {}),
     "[AsyncGeneratorFunction: agf]"
   );
-  assertEquals(stringify(new Uint8Array([1, 2, 3])), "Uint8Array [ 1, 2, 3 ]");
-  assertEquals(stringify(Uint8Array.prototype), "TypedArray []");
+  assertEquals(
+    stringify(new Uint8Array([1, 2, 3])),
+    "Uint8Array(3) [ 1, 2, 3 ]"
+  );
+  assertEquals(stringify(Uint8Array.prototype), "TypedArray {}");
   assertEquals(
     stringify({ a: { b: { c: { d: new Set([1]) } } } }),
     "{ a: { b: { c: { d: [Set] } } } }"
@@ -283,6 +286,300 @@ unitTest(function consoleTestStringifyLargeObject(): void {
   );
 });
 
+unitTest(function consoleTestStringifyIterable() {
+  const shortArray = [1, 2, 3, 4, 5];
+  assertEquals(stringify(shortArray), "[ 1, 2, 3, 4, 5 ]");
+
+  const longArray = new Array(200).fill(0);
+  assertEquals(
+    stringify(longArray),
+    `[
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  ... 100 more items
+]`
+  );
+
+  const obj = { a: "a", longArray };
+  assertEquals(
+    stringify(obj),
+    `{
+ a: "a",
+ longArray: [
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+    ... 100 more items
+  ]
+}`
+  );
+
+  const shortMap = new Map([
+    ["a", 0],
+    ["b", 1],
+  ]);
+  assertEquals(stringify(shortMap), `Map { "a" => 0, "b" => 1 }`);
+
+  const longMap = new Map();
+  for (const key of Array(200).keys()) {
+    longMap.set(`${key}`, key);
+  }
+  assertEquals(
+    stringify(longMap),
+    `Map {
+ "0" => 0,
+ "1" => 1,
+ "2" => 2,
+ "3" => 3,
+ "4" => 4,
+ "5" => 5,
+ "6" => 6,
+ "7" => 7,
+ "8" => 8,
+ "9" => 9,
+ "10" => 10,
+ "11" => 11,
+ "12" => 12,
+ "13" => 13,
+ "14" => 14,
+ "15" => 15,
+ "16" => 16,
+ "17" => 17,
+ "18" => 18,
+ "19" => 19,
+ "20" => 20,
+ "21" => 21,
+ "22" => 22,
+ "23" => 23,
+ "24" => 24,
+ "25" => 25,
+ "26" => 26,
+ "27" => 27,
+ "28" => 28,
+ "29" => 29,
+ "30" => 30,
+ "31" => 31,
+ "32" => 32,
+ "33" => 33,
+ "34" => 34,
+ "35" => 35,
+ "36" => 36,
+ "37" => 37,
+ "38" => 38,
+ "39" => 39,
+ "40" => 40,
+ "41" => 41,
+ "42" => 42,
+ "43" => 43,
+ "44" => 44,
+ "45" => 45,
+ "46" => 46,
+ "47" => 47,
+ "48" => 48,
+ "49" => 49,
+ "50" => 50,
+ "51" => 51,
+ "52" => 52,
+ "53" => 53,
+ "54" => 54,
+ "55" => 55,
+ "56" => 56,
+ "57" => 57,
+ "58" => 58,
+ "59" => 59,
+ "60" => 60,
+ "61" => 61,
+ "62" => 62,
+ "63" => 63,
+ "64" => 64,
+ "65" => 65,
+ "66" => 66,
+ "67" => 67,
+ "68" => 68,
+ "69" => 69,
+ "70" => 70,
+ "71" => 71,
+ "72" => 72,
+ "73" => 73,
+ "74" => 74,
+ "75" => 75,
+ "76" => 76,
+ "77" => 77,
+ "78" => 78,
+ "79" => 79,
+ "80" => 80,
+ "81" => 81,
+ "82" => 82,
+ "83" => 83,
+ "84" => 84,
+ "85" => 85,
+ "86" => 86,
+ "87" => 87,
+ "88" => 88,
+ "89" => 89,
+ "90" => 90,
+ "91" => 91,
+ "92" => 92,
+ "93" => 93,
+ "94" => 94,
+ "95" => 95,
+ "96" => 96,
+ "97" => 97,
+ "98" => 98,
+ "99" => 99,
+ ... 100 more items
+}`
+  );
+
+  const shortSet = new Set([1, 2, 3]);
+  assertEquals(stringify(shortSet), `Set { 1, 2, 3 }`);
+  const longSet = new Set();
+  for (const key of Array(200).keys()) {
+    longSet.add(key);
+  }
+  assertEquals(
+    stringify(longSet),
+    `Set {
+ 0,
+ 1,
+ 2,
+ 3,
+ 4,
+ 5,
+ 6,
+ 7,
+ 8,
+ 9,
+ 10,
+ 11,
+ 12,
+ 13,
+ 14,
+ 15,
+ 16,
+ 17,
+ 18,
+ 19,
+ 20,
+ 21,
+ 22,
+ 23,
+ 24,
+ 25,
+ 26,
+ 27,
+ 28,
+ 29,
+ 30,
+ 31,
+ 32,
+ 33,
+ 34,
+ 35,
+ 36,
+ 37,
+ 38,
+ 39,
+ 40,
+ 41,
+ 42,
+ 43,
+ 44,
+ 45,
+ 46,
+ 47,
+ 48,
+ 49,
+ 50,
+ 51,
+ 52,
+ 53,
+ 54,
+ 55,
+ 56,
+ 57,
+ 58,
+ 59,
+ 60,
+ 61,
+ 62,
+ 63,
+ 64,
+ 65,
+ 66,
+ 67,
+ 68,
+ 69,
+ 70,
+ 71,
+ 72,
+ 73,
+ 74,
+ 75,
+ 76,
+ 77,
+ 78,
+ 79,
+ 80,
+ 81,
+ 82,
+ 83,
+ 84,
+ 85,
+ 86,
+ 87,
+ 88,
+ 89,
+ 90,
+ 91,
+ 92,
+ 93,
+ 94,
+ 95,
+ 96,
+ 97,
+ 98,
+ 99,
+ ... 100 more items
+}`
+  );
+
+  const withEmptyEl = Array(10);
+  withEmptyEl.fill(0, 4, 6);
+  assertEquals(
+    stringify(withEmptyEl),
+    `[ <4 empty items>, 0, 0, <4 empty items> ]`
+  );
+
+  const lWithEmptyEl = Array(200);
+  lWithEmptyEl.fill(0, 50, 80);
+  assertEquals(
+    stringify(lWithEmptyEl),
+    `[
+  <50 empty items>, 0,                 0,
+  0,                0,                 0,
+  0,                0,                 0,
+  0,                0,                 0,
+  0,                0,                 0,
+  0,                0,                 0,
+  0,                0,                 0,
+  0,                0,                 0,
+  0,                0,                 0,
+  0,                0,                 0,
+  0,                <120 empty items>
+]`
+  );
+});
+
 unitTest(function consoleTestWithCustomInspector(): void {
   class A {
     [customInspect](): string {