Merge pull request #3 from bigbinary/4459-print-html-element-in-objec…

…t-format Add support for console.dir
bigbinary · Sep 3, 2024 · fc973df · fc973df
2 parents 82c5468 + 13abe2c
commit fc973df
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 14 deletions.
diff --git a/demo/public/iframe.html b/demo/public/iframe.html
@@ -1,5 +1,5 @@
 <body a="b">
-  demo iframe
+  <p id="test">demo iframe</p>
   <script>
     setTimeout(() => {
       console.log({
@@ -54,6 +54,7 @@
       })
 
       console.log('HTML element', document.body)
+      console.dir(document.getElementById('test'))
 
       console.log('Nested', {
         promise: new Promise(() => {}),

diff --git a/src/Component/react-inspector/index.tsx b/src/Component/react-inspector/index.tsx
@@ -7,6 +7,7 @@ import {
   ObjectName,
   ObjectValue,
   ObjectPreview,
+  ObjectInspector,
 } from 'react-inspector'
 
 import { Context } from '../../definitions/Component'
@@ -29,6 +30,14 @@ function intersperse(arr, sep) {
   return arr.slice(1).reduce((xs, x) => xs.concat([sep, x]), [arr[0]])
 }
 
+const convertToObject = (domObject) => {
+  let obj = {}
+  for (let p in domObject) {
+    obj[p] = domObject[p]
+  }
+  return obj
+}
+
 const getArrayLength = (array: Array<any>) => {
   if (!array || array.length < 1) {
     return 0
@@ -104,10 +113,10 @@ class CustomInspector extends React.PureComponent<Props, any> {
 
     const dom = data instanceof HTMLElement
     const table = method === 'table'
-
-    return (
-      <Root data-type={table ? 'table' : dom ? 'html' : 'object'}>
-        {table ? (
+    const dir = method === 'dir'
+    if (table) {
+      return (
+        <Root data-type="table">
           <table
             style={{ border: '1px solid black', borderCollapse: 'collapse' }}
           >
@@ -119,7 +128,7 @@ class CustomInspector extends React.PureComponent<Props, any> {
             </thead>
             <tbody>
               {Object.keys(data).map((key) => {
-                if (data[key]?.startsWith?.('__console_feed_')) return null
+                if (data[key]?.startsWith?.(REMAINING_KEY)) return null
                 return (
                   <tr key={key}>
                     <td style={{ border: '1px solid black', padding: '8px' }}>
@@ -133,17 +142,36 @@ class CustomInspector extends React.PureComponent<Props, any> {
               })}
             </tbody>
           </table>
-        ) : dom ? (
-          <HTML>
-            <DOMInspector {...this.props} theme={styles} />
-          </HTML>
-        ) : (
-          <Inspector
-            {...this.props}
+        </Root>
+      )
+    } else if (dir) {
+      return (
+        <Root data-type="object">
+          <ObjectInspector
+            name={data?.localName}
             theme={styles}
+            data={convertToObject(data)}
             nodeRenderer={this.nodeRenderer.bind(this)}
           />
-        )}
+        </Root>
+      )
+    } else if (dom) {
+      return (
+        <Root data-type="html">
+          <HTML>
+            <DOMInspector {...this.props} theme={styles} />
+          </HTML>
+        </Root>
+      )
+    }
+
+    return (
+      <Root data-type="object">
+        <Inspector
+          {...this.props}
+          theme={styles}
+          nodeRenderer={this.nodeRenderer.bind(this)}
+        />
       </Root>
     )
   }