add react-inspector

package.json

@@ -56,7 +56,8 @@
     "@phosphor/coreutils": "^1.3.1",
     "@phosphor/disposable": "^1.2.0",
     "@phosphor/widgets": "^1.8.0",
-    "vscode-debugprotocol": "1.35.0"
+    "vscode-debugprotocol": "1.35.0",
+    "react-inspector": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",

src/service.ts

@@ -67,6 +67,7 @@ export class DebugService {
         scopes: values
       });
       if (index === 0) {
+        console.log({ values });
         this._model.sidebar.variables.model.scopes = values;
       }
     });

src/variables/body/index.ts → src/variables/body/index.tsx

@@ -8,6 +8,7 @@ import { Variables } from '../index';
 import { Table } from './table';
 
 import { Search } from './search';
+
 import { Message } from '@phosphor/messaging';
 
 export class Body extends Panel {

src/variables/body/table.tsx

@@ -3,14 +3,18 @@
 
 import { ReactWidget } from '@jupyterlab/apputils';
 
-import { ArrayExt } from '@phosphor/algorithm';
+// import { ArrayExt } from '@phosphor/algorithm';
 
 import { Widget, PanelLayout } from '@phosphor/widgets';
 
-import React, { useEffect, useState } from 'react';
+// import React, { useEffect, useState } from 'react';
+
+import React from 'react';
 
 import { Variables } from '../index';
 
+// import { ObjectInspector } from 'react-inspector';
+
 export class Table extends ReactWidget {
   constructor(model: Variables.IModel) {
     super();
@@ -21,7 +25,7 @@ export class Table extends ReactWidget {
   }
 
   render() {
-    return <TableComponent model={this.model} />;
+    return <VariableComponent model={this.model} />;
   }
 
   private model: Variables.IModel;
@@ -56,99 +60,103 @@ export class Table extends ReactWidget {
   }
 }
 
-const TableComponent = ({ model }: { model: Variables.IModel }) => {
-  const [variables, setVariables] = useState(model.variables);
-  const [longHeader, setLongHeader] = useState('value');
-  const [variable, TableBody] = useTbody(
-    variables,
-    model.currentVariable,
-    longHeader
-  );
-
-  useEffect(() => {
-    const updateVariables = (
-      _: Variables.IModel,
-      updates: Variables.IVariable[]
-    ) => {
-      if (ArrayExt.shallowEqual(variables, updates)) {
-        return;
-      }
-      setVariables(updates);
-    };
-    model.variablesChanged.connect(updateVariables);
-
-    return () => {
-      model.variablesChanged.disconnect(updateVariables);
-    };
-  });
-
-  const setWidth = (headerName: string): string => {
-    return headerName === longHeader ? '75%' : '25%';
-  };
-
-  model.currentVariable = variable;
-
-  return (
-    <div>
-      <table>
-        <thead>
-          <tr>
-            <th
-              onClick={() => setLongHeader('name')}
-              style={{ width: setWidth('name') }}
-            >
-              Name
-            </th>
-            <th
-              onClick={() => setLongHeader('value')}
-              style={{ width: setWidth('value') }}
-            >
-              Value
-            </th>
-          </tr>
-        </thead>
-      </table>
-      <TableBody />
-    </div>
-  );
+const VariableComponent = ({ model }: { model: Variables.IModel }) => {
+  return <></>;
 };
 
-const useTbody = (items: Array<any>, defaultState: any, header: any) => {
-  const [state, setState] = useState(defaultState);
-
-  const setClassIcon = (typeOf: string) => {
-    return typeOf === 'class' ? 'jp-ClassIcon' : 'jp-VariableIcon';
-  };
-
-  const setWidth = (headerName: string): string => {
-    return headerName === header ? '75%' : '25%';
-  };
-
-  const List = () => (
-    <div style={{ overflow: 'auto' }}>
-      <table>
-        <tbody>
-          {items.map(item => (
-            <tr
-              key={item.name}
-              onClick={e => setState(item)}
-              className={state === item ? ' selected' : ''}
-            >
-              <td style={{ paddingLeft: `${12}px`, width: setWidth('name') }}>
-                <span
-                  className={`jp-Icon jp-Icon-16 ${setClassIcon(item.type)}`}
-                ></span>
-                {item.name}
-              </td>
-              <td style={{ paddingLeft: `${12}px`, width: setWidth('value') }}>
-                {item.value}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-
-  return [state, List, setState];
-};
+// const TableComponent = ({ model }: { model: Variables.IModel }) => {
+//   const [variables, setVariables] = useState(model.variables);
+//   const [longHeader, setLongHeader] = useState('value');
+//   const [variable, TableBody] = useTbody(
+//     variables,
+//     model.currentVariable,
+//     longHeader
+//   );
+
+//   useEffect(() => {
+//     const updateVariables = (
+//       _: Variables.IModel,
+//       updates: Variables.IVariable[]
+//     ) => {
+//       if (ArrayExt.shallowEqual(variables, updates)) {
+//         return;
+//       }
+//       setVariables(updates);
+//     };
+//     model.variablesChanged.connect(updateVariables);
+
+//     return () => {
+//       model.variablesChanged.disconnect(updateVariables);
+//     };
+//   });
+
+//   const setWidth = (headerName: string): string => {
+//     return headerName === longHeader ? '75%' : '25%';
+//   };
+
+//   model.currentVariable = variable;
+
+//   return (
+//     <div>
+//       <table>
+//         <thead>
+//           <tr>
+//             <th
+//               onClick={() => setLongHeader('name')}
+//               style={{ width: setWidth('name') }}
+//             >
+//               Name
+//             </th>
+//             <th
+//               onClick={() => setLongHeader('value')}
+//               style={{ width: setWidth('value') }}
+//             >
+//               Value
+//             </th>
+//           </tr>
+//         </thead>
+//       </table>
+//       <TableBody />
+//     </div>
+//   );
+// };
+
+// const useTbody = (items: Array<any>, defaultState: any, header: any) => {
+//   const [state, setState] = useState(defaultState);
+
+//   const setClassIcon = (typeOf: string) => {
+//     return typeOf === 'class' ? 'jp-ClassIcon' : 'jp-VariableIcon';
+//   };
+
+//   const setWidth = (headerName: string): string => {
+//     return headerName === header ? '75%' : '25%';
+//   };
+
+//   const List = () => (
+//     <div style={{ overflow: 'auto' }}>
+//       <table>
+//         <tbody>
+//           {items.map(item => (
+//             <tr
+//               key={item.name}
+//               onClick={e => setState(item)}
+//               className={state === item ? ' selected' : ''}
+//             >
+//               <td style={{ paddingLeft: `${12}px`, width: setWidth('name') }}>
+//                 <span
+//                   className={`jp-Icon jp-Icon-16 ${setClassIcon(item.type)}`}
+//                 ></span>
+//                 {item.name}
+//               </td>
+//               <td style={{ paddingLeft: `${12}px`, width: setWidth('value') }}>
+//                 {item.value}
+//               </td>
+//             </tr>
+//           ))}
+//         </tbody>
+//       </table>
+//     </div>
+//   );
+
+//   return [state, List, setState];
+// };

src/variables/index.ts

@@ -13,7 +13,7 @@ export class Variables extends Panel {
   constructor(options: Variables.IOptions = {}) {
     super();
 
-    this.model = new Variables.IModel();
+    this.model = new Variables.IModel(demoDATA);
     this.addClass('jp-DebuggerVariables');
     this.title.label = 'Variables';
 
@@ -153,3 +153,88 @@ export namespace Variables {
 
   export interface IOptions extends Panel.IOptions {}
 }
+
+const demoDATA = [
+  {
+    name: 'Locals',
+    variables: [
+      {
+        evaluateName: 'display',
+        name: 'display',
+        type: 'builtin_function_or_method',
+        value:
+          '<built-in method display of PyCapsule object at 0x7f1423490480>',
+        variablesReference: 4,
+        description: ''
+      },
+      {
+        evaluateName: 'ptvsd',
+        name: 'ptvsd',
+        type: 'module',
+        value:
+          "<module 'ptvsd' from '/home/codete-bp/anaconda3/envs/jupyterlab-debugger/lib/python3.7/site-packages/ptvsd/__init__.py'>",
+        variablesReference: 5,
+        description: ''
+      },
+      {
+        evaluateName: '__annotations__',
+        name: '__annotations__',
+        type: 'dict',
+        value: '{}',
+        variablesReference: 6,
+        description: ''
+      },
+      {
+        evaluateName: '__builtins__',
+        name: '__builtins__',
+        type: 'module',
+        value: "<module 'builtins' (built-in)>",
+        variablesReference: 7,
+        description: ''
+      },
+      {
+        evaluateName: '__doc__',
+        name: '__doc__',
+        type: 'NoneType',
+        value: 'None',
+        variablesReference: 0,
+        description: ''
+      },
+      {
+        evaluateName: '__loader__',
+        name: '__loader__',
+        type: 'type',
+        value: "<class '_frozen_importlib.BuiltinImporter'>",
+        variablesReference: 8,
+        description: ''
+      },
+      {
+        evaluateName: '__name__',
+        name: '__name__',
+        presentationHint: {
+          attributes: ['rawString']
+        },
+        type: 'str',
+        value: "'__main__'",
+        variablesReference: 0,
+        description: ''
+      },
+      {
+        evaluateName: '__package__',
+        name: '__package__',
+        type: 'NoneType',
+        value: 'None',
+        variablesReference: 0,
+        description: ''
+      },
+      {
+        evaluateName: '__spec__',
+        name: '__spec__',
+        type: 'NoneType',
+        value: 'None',
+        variablesReference: 0,
+        description: ''
+      }
+    ]
+  }
+];

tsconfig.json

@@ -9,7 +9,7 @@
     "module": "esnext",
     "moduleResolution": "node",
     "noEmitOnError": true,
-    "noImplicitAny": true,
+    "noImplicitAny": false,
     "noUnusedLocals": true,
     "outDir": "lib",
     "rootDir": "src",