@dxos/plugin-debug 0.8.4-main.2e9d522 → 0.8.4-main.3c1ae3b

package/src/components/DebugApp/DebugApp.tsx

@@ -1,84 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type FC, useEffect, useState } from 'react';
-
-import { type Graph } from '@dxos/plugin-graph';
-import { useClient, useConfig } from '@dxos/react-client';
-import { ToggleGroup, ToggleGroupItem, Toolbar, Icon, IconButton } from '@dxos/react-ui';
-
-import { Json, Tree } from './Tree';
-import { Container } from '../Container';
-
-export const DebugApp: FC<{ graph: Graph }> = ({ graph }) => {
-  const [view, setView] = useState<'config' | 'diagnostics' | 'graph'>('graph');
-  const [data, setData] = useState<any>({});
-  const client = useClient();
-  const config = useConfig();
-  const handleRefresh = async () => {
-    const data = await client.diagnostics({ truncate: true });
-    setData(data);
-  };
-  useEffect(() => {
-    void handleRefresh();
-  }, []);
-
-  const handleResetClient = async (force = false) => {
-    if (!force && !window.confirm('Reset storage?')) {
-      return;
-    }
-
-    // TODO(burdon): Throws exception.
-    await client.reset();
-    window.location.href = window.location.origin;
-  };
-
-  const handleOpenDevtools = () => {
-    const vaultUrl = config.values?.runtime?.client?.remoteSource;
-    if (vaultUrl) {
-      window.open(`https://devtools.dev.dxos.org/?target=${vaultUrl}`);
-    }
-  };
-
-  return (
-    <Container
-      toolbar={
-        <Toolbar.Root classNames='p-1'>
-          <ToggleGroup type='single' value={view}>
-            <ToggleGroupItem value={'graph'} onClick={() => setView('graph')} title={'Plugin graph'}>
-              <Icon icon='ph--graph--regular' size={5} />
-            </ToggleGroupItem>
-            <ToggleGroupItem value={'diagnostics'} onClick={() => setView('diagnostics')} title={'Diagnostics'}>
-              <Icon icon='ph--gauge--regular' size={5} />
-            </ToggleGroupItem>
-            <ToggleGroupItem value={'config'} onClick={() => setView('config')} title={'Config'}>
-              <Icon icon='ph--gear--regular' size={5} />
-            </ToggleGroupItem>
-          </ToggleGroup>
-
-          <Toolbar.Separator variant='gap' />
-          <IconButton
-            icon='ph--warning--regular'
-            iconOnly
-            size={5}
-            classNames='text-red-700'
-            onClick={(event) => handleResetClient(event.shiftKey)}
-            label='Reset client'
-          />
-          <IconButton
-            icon='ph--toolbox--duotone'
-            iconOnly
-            size={5}
-            onClick={handleOpenDevtools}
-            label='Open Devtools'
-          />
-        </Toolbar.Root>
-      }
-    >
-      {view === 'graph' && <Tree data={graph.toJSON()} />}
-      {view === 'config' && <Json data={data.diagnostics?.config} />}
-      {view === 'diagnostics' && <Json data={data} />}
-    </Container>
-  );
-};

package/src/components/DebugApp/Tree.tsx

@@ -1,103 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type FC, type HTMLAttributes, useState } from 'react';
-
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/react-ui-theme';
-import { arrayToBuffer } from '@dxos/util';
-
-// TODO(burdon): Copied form devtools.
-
-export const replacer = (key: any, value: any) => {
-  if (typeof value === 'object') {
-    if (value instanceof Uint8Array) {
-      return arrayToBuffer(value).toString('hex');
-    }
-
-    if (value?.type === 'Buffer') {
-      return Buffer.from(value.data).toString('hex');
-    }
-
-    if (key === 'downloaded') {
-      return undefined;
-    }
-  }
-
-  return value;
-};
-
-export const Json: FC<{ data?: object }> = ({ data }) => {
-  return <SyntaxHighlighter language='json'>{JSON.stringify(data, replacer, 2)}</SyntaxHighlighter>;
-};
-
-export const Tree: FC<{ data?: object }> = ({ data }) => {
-  return (
-    <div className='p-2'>
-      <Node data={data} root />
-    </div>
-  );
-};
-
-export const Node: FC<{ data?: any; root?: boolean }> = ({ data, root }) => {
-  if (typeof data !== 'object' || data === undefined || data === null) {
-    return <Scalar value={data} />;
-  }
-
-  if (Array.isArray(data)) {
-    return (
-      <div className='flex flex-col space-y-2'>
-        {data.map((value, index) => (
-          <KeyValue key={index} label={String(index)} data={value} className='bg-teal-50' />
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <div className='flex flex-col space-y-2'>
-      {Object.entries(data).map(([key, value]) => (
-        <KeyValue key={key} label={key} data={value} className='bg-blue-50' />
-      ))}
-    </div>
-  );
-};
-
-export const KeyValue: FC<{ label: string; data?: any; className?: string }> = ({ label, data, className }) => {
-  const [open, setOpen] = useState(true);
-  if (data === undefined) {
-    return null;
-  }
-
-  return (
-    <div className='flex'>
-      <Box
-        className={mx('border-blue-200 text-sm select-none cursor-pointer', className)}
-        onClick={() => setOpen((open) => !open)}
-      >
-        {label}
-      </Box>
-      {open && <Node data={data} />}
-    </div>
-  );
-};
-
-const Scalar: FC<{ value: any }> = ({ value }) => {
-  return (
-    <Box className='bg-green-50 border-green-200 rounded-r text-sm font-thin'>
-      {(value === undefined && 'undefined') ||
-        (value === null && 'null') ||
-        (typeof value === 'string' && value) ||
-        JSON.stringify(value)}
-    </Box>
-  );
-};
-
-const Box: FC<HTMLAttributes<HTMLDivElement>> = ({ children, className, ...props }) => {
-  return (
-    <div className={mx('flex px-2 border border-l-0 font-mono truncate', className)} {...props}>
-      {children}
-    </div>
-  );
-};

package/src/components/DebugApp/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { DebugApp } from './DebugApp';
-
-export default DebugApp;