Fix boolean values not displayed

Author: jdeniau

packages/devtools/demo/demo.js

@@ -83,3 +83,16 @@ console.log(
 );
 
 console.log('Range', Immutable.Range(0, 10, 2));
+
+console.log(
+  'List of scalars',
+  Immutable.List([
+    true,
+    false,
+    1,
+    'a',
+    Symbol('sym'),
+    new Date(),
+    BigInt(12345),
+  ])
+);

packages/devtools/src/createFormatter.test.ts

@@ -7,7 +7,7 @@ describe('List', () => {
     const list = List();
 
     const { ListFormatter } = createFormatters({ List, isList });
-    
+
     const formatted = ListFormatter.header(list);
     expect(formatted).toEqual([
       'span',
@@ -23,4 +23,77 @@ describe('List', () => {
     ]);
     expect(ListFormatter.hasBody(list)).toBe(false);
   });
+
+  test('List with scalar values', () => {
+    const list = List([true, false, 1, 'a']);
+
+    const { ListFormatter } = createFormatters({ List, isList });
+
+    const formatted = ListFormatter.header(list);
+    expect(formatted).toEqual([
+      'span',
+      [
+        'span',
+        {
+          style:
+            'color: light-dark(rgb(232,98,0), rgb(255, 150, 50)); position: relative',
+        },
+        'List',
+      ],
+      ['span', `[${list.size}]`],
+    ]);
+    expect(ListFormatter.hasBody(list)).toBe(true);
+
+    expect(ListFormatter.body!(list)).toEqual([
+      'ol',
+      {
+        style:
+          'list-style-type: none; padding: 0; margin: 0 0 0 12px; font-style: normal; position: relative',
+      },
+      [
+        'li',
+        ['span', { style: 'color: light-dark( #881391, #D48CE6)' }, '0: '],
+        [
+          'span',
+          {
+            style: 'color: light-dark(rgb(28, 128, 28), rgb(50, 200, 50))',
+          },
+          'true',
+        ],
+      ],
+      [
+        'li',
+        ['span', { style: 'color: light-dark( #881391, #D48CE6)' }, '1: '],
+        [
+          'span',
+          {
+            style: 'color: light-dark(rgb(28, 128, 28), rgb(50, 200, 50))',
+          },
+          'false',
+        ],
+      ],
+      [
+        'li',
+        ['span', { style: 'color: light-dark( #881391, #D48CE6)' }, '2: '],
+        [
+          'span',
+          {
+            style: 'color: light-dark(rgb(28, 128, 28), rgb(50, 200, 50))',
+          },
+          1,
+        ],
+      ],
+      [
+        'li',
+        ['span', { style: 'color: light-dark( #881391, #D48CE6)' }, '3: '],
+        [
+          'object',
+          {
+            config: undefined,
+            object: 'a',
+          },
+        ],
+      ],
+    ]);
+  });
 });

packages/devtools/src/createFormatters.ts

@@ -1,6 +1,7 @@
 const orange = 'light-dark(rgb(232,98,0), rgb(255, 150, 50))';
 const purple = 'light-dark( #881391, #D48CE6)';
 const gray = 'light-dark(rgb(119,119,119), rgb(201, 201, 201))';
+const green = 'light-dark(rgb(28, 128, 28), rgb(50, 200, 50))';
 
 const listStyle = {
   style:
@@ -16,6 +17,7 @@ const inlineValuesStyle = {
   style: `color: ${gray}; font-style: italic; position: relative`,
 };
 const nullStyle = { style: `color: ${gray}` };
+const numberBooleanStyle = { style: `color: ${green}` };
 
 export type DevToolsFormatter = {
   header: (object: any, config?: any) => any;
@@ -63,8 +65,16 @@ export default function createFormatters(
   };
 
   const reference = (object: any, config?: any) => {
-    if (typeof object === 'undefined') return ['span', nullStyle, 'undefined'];
-    else if (object === null) return ['span', nullStyle, 'null'];
+    if (typeof object === 'undefined') {
+      return ['span', nullStyle, 'undefined'];
+    } else if (object === null) {
+      return ['span', nullStyle, 'null'];
+    } else if (typeof object === 'boolean') {
+      return ['span', numberBooleanStyle, object ? 'true' : 'false'];
+    } else if (typeof object === 'number') {
+      return ['span', numberBooleanStyle, object];
+    }
+
     return ['object', { object, config }];
   };
 
@@ -163,7 +173,10 @@ export default function createFormatters(
 
   const ListFormatter: DevToolsFormatter = {
     header(o: any) {
-      if (!Immutable.isList(o)) return null;
+      if (!Immutable.isList(o)) {
+        return null;
+      }
+
       return renderIterableHeader(o, 'List');
     },
     hasBody,