@workbench-kit/shell-react 0.0.2-prototype.0.2.6 → 0.0.2-prototype.0.2.8

package/src/{commands-view-data.ts → commands/view-data.ts}

@@ -1,17 +1,17 @@
-export const BUILTIN_COMMANDS_VIEW_RENDER_KIND = 'workbench-kit.builtin.commands.view' as const;
-export const BUILTIN_COMMANDS_VIEW_CONTAINER_ID = 'commands' as const;
-
-export interface BuiltinCommandsViewRenderData {
-  readonly kind: typeof BUILTIN_COMMANDS_VIEW_RENDER_KIND;
-}
-
-export function isBuiltinCommandsViewRenderData(
-  value: unknown,
-): value is BuiltinCommandsViewRenderData {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'kind' in value &&
-    (value as BuiltinCommandsViewRenderData).kind === BUILTIN_COMMANDS_VIEW_RENDER_KIND
-  );
-}
+export const BUILTIN_COMMANDS_VIEW_RENDER_KIND = 'workbench-kit.builtin.commands.view' as const;
+export const BUILTIN_COMMANDS_VIEW_CONTAINER_ID = 'commands' as const;
+
+export interface BuiltinCommandsViewRenderData {
+  readonly kind: typeof BUILTIN_COMMANDS_VIEW_RENDER_KIND;
+}
+
+export function isBuiltinCommandsViewRenderData(
+  value: unknown,
+): value is BuiltinCommandsViewRenderData {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'kind' in value &&
+    (value as BuiltinCommandsViewRenderData).kind === BUILTIN_COMMANDS_VIEW_RENDER_KIND
+  );
+}

package/src/{commands-view.tsx → commands/view.tsx}

@@ -1,43 +1,43 @@
-import {
-  CommandManagementSidebar,
-  buildCommandInspectorUri,
-  findCommandManagementEntry,
-} from '@workbench-kit/react/workbench/management';
-
-import {
-  BUILTIN_COMMANDS_VIEW_RENDER_KIND,
-  isBuiltinCommandsViewRenderData,
-  type BuiltinCommandsViewRenderData,
-} from './commands-view-data.js';
-import { useCommandManagementModel } from './use-command-management.js';
-import { useEditorService } from './use-editor.js';
-
-export type { BuiltinCommandsViewRenderData };
-export { BUILTIN_COMMANDS_VIEW_RENDER_KIND, isBuiltinCommandsViewRenderData };
-
-export function BuiltinCommandsView() {
-  const editorService = useEditorService();
-  const { groups, lastRun, refreshRegistry, runCommand } = useCommandManagementModel();
-
-  const inspectCommand = (commandId: string) => {
-    const entry = findCommandManagementEntry(groups, commandId);
-    editorService.openEditor({
-      icon: 'codicon-terminal',
-      pinned: true,
-      preview: false,
-      resourceUri: buildCommandInspectorUri(commandId),
-      title: entry?.label ?? commandId,
-    });
-  };
-
-  return (
-    <CommandManagementSidebar
-      className="workbench-commands-view"
-      groups={groups}
-      lastRun={lastRun}
-      onInspectCommand={inspectCommand}
-      onRefresh={refreshRegistry}
-      onRunCommand={runCommand}
-    />
-  );
-}
+import {
+  CommandManagementSidebar,
+  buildCommandInspectorUri,
+  findCommandManagementEntry,
+} from '@workbench-kit/react/workbench/management';
+
+import {
+  BUILTIN_COMMANDS_VIEW_RENDER_KIND,
+  isBuiltinCommandsViewRenderData,
+  type BuiltinCommandsViewRenderData,
+} from './view-data.js';
+import { useCommandManagementModel } from '../management/use-command-management.js';
+import { useEditorService } from '../editor/use-editor.js';
+
+export type { BuiltinCommandsViewRenderData };
+export { BUILTIN_COMMANDS_VIEW_RENDER_KIND, isBuiltinCommandsViewRenderData };
+
+export function BuiltinCommandsView() {
+  const editorService = useEditorService();
+  const { groups, lastRun, refreshRegistry, runCommand } = useCommandManagementModel();
+
+  const inspectCommand = (commandId: string) => {
+    const entry = findCommandManagementEntry(groups, commandId);
+    editorService.openEditor({
+      icon: 'codicon-terminal',
+      pinned: true,
+      preview: false,
+      resourceUri: buildCommandInspectorUri(commandId),
+      title: entry?.label ?? commandId,
+    });
+  };
+
+  return (
+    <CommandManagementSidebar
+      className="workbench-commands-view"
+      groups={groups}
+      lastRun={lastRun}
+      onInspectCommand={inspectCommand}
+      onRefresh={refreshRegistry}
+      onRunCommand={runCommand}
+    />
+  );
+}

package/src/devtools/WorkbenchDevtoolsPanel.tsx

@@ -1,124 +1,124 @@
-import { useMemo, useState } from 'react';
-
-import { Button, ScrollArea } from '@workbench-kit/react/primitives';
-
-import { useWorkbenchDevtoolsSnapshot } from './use-workbench-devtools-snapshot.js';
-
-type DevtoolsSectionId =
-  | 'commands'
-  | 'menus'
-  | 'keybindings'
-  | 'contextKeys'
-  | 'capabilities'
-  | 'layout'
-  | 'editor'
-  | 'views'
-  | 'transactions'
-  | 'diagnostics';
-
-const DEVTOOLS_SECTIONS: readonly {
-  readonly id: DevtoolsSectionId;
-  readonly label: string;
-}[] = [
-  { id: 'commands', label: 'Commands' },
-  { id: 'menus', label: 'Menus' },
-  { id: 'keybindings', label: 'Keybindings' },
-  { id: 'contextKeys', label: 'Context keys' },
-  { id: 'capabilities', label: 'Capabilities' },
-  { id: 'layout', label: 'Layout' },
-  { id: 'editor', label: 'Editor' },
-  { id: 'views', label: 'Views' },
-  { id: 'transactions', label: 'Transactions' },
-  { id: 'diagnostics', label: 'Diagnostics' },
-];
-
-function formatSectionValue(
-  sectionId: DevtoolsSectionId,
-  snapshot: ReturnType<typeof useWorkbenchDevtoolsSnapshot>,
-): string {
-  switch (sectionId) {
-    case 'commands':
-      return JSON.stringify(snapshot.commands, null, 2);
-    case 'menus':
-      return JSON.stringify(snapshot.menus, null, 2);
-    case 'keybindings':
-      return JSON.stringify(snapshot.keybindings, null, 2);
-    case 'contextKeys':
-      return JSON.stringify(snapshot.contextKeys, null, 2);
-    case 'capabilities':
-      return JSON.stringify(
-        {
-          activeExtensions: snapshot.activeExtensions,
-          capabilities: snapshot.capabilities,
-        },
-        null,
-        2,
-      );
-    case 'layout':
-      return JSON.stringify(snapshot.layout, null, 2);
-    case 'editor':
-      return JSON.stringify(snapshot.editor, null, 2);
-    case 'views':
-      return JSON.stringify(
-        {
-          activities: snapshot.activities,
-          viewContainers: snapshot.viewContainers,
-          views: snapshot.views,
-        },
-        null,
-        2,
-      );
-    case 'transactions':
-      return JSON.stringify(snapshot.transactions, null, 2);
-    case 'diagnostics':
-      return JSON.stringify(snapshot.dependencyDiagnostics, null, 2);
-    default:
-      return '';
-  }
-}
-
-export function WorkbenchDevtoolsPanel() {
-  const snapshot = useWorkbenchDevtoolsSnapshot();
-  const [activeSection, setActiveSection] = useState<DevtoolsSectionId>('commands');
-  const sectionValue = useMemo(
-    () => formatSectionValue(activeSection, snapshot),
-    [activeSection, snapshot],
-  );
-
-  return (
-    <aside
-      aria-label="Workbench devtools"
-      className="workbench-devtools-panel"
-      data-testid="workbench-devtools-panel"
-    >
-      <header className="workbench-devtools-panel__header">
-        <strong>Workbench Devtools</strong>
-        <span className="workbench-devtools-panel__meta">Read-only</span>
-      </header>
-      <p className="workbench-devtools-panel__timestamp">Updated {snapshot.capturedAt}</p>
-      <nav aria-label="Devtools sections" className="workbench-devtools-panel__tabs">
-        {DEVTOOLS_SECTIONS.map((section) => (
-          <Button
-            key={section.id}
-            aria-pressed={activeSection === section.id}
-            compact
-            className="workbench-devtools-panel__tab"
-            onClick={() => {
-              setActiveSection(section.id);
-            }}
-          >
-            {section.label}
-          </Button>
-        ))}
-      </nav>
-      <ScrollArea
-        as="pre"
-        className="workbench-devtools-panel__output"
-        gutter="stable"
-        orientation="vertical"
-      >
-        {sectionValue}
-      </ScrollArea>
-    </aside>
-  );
-}
+import { useMemo, useState } from 'react';
+
+import { Button, ScrollArea } from '@workbench-kit/react/primitives';
+
+import { useWorkbenchDevtoolsSnapshot } from './use-workbench-devtools-snapshot.js';
+
+type DevtoolsSectionId =
+  | 'commands'
+  | 'menus'
+  | 'keybindings'
+  | 'contextKeys'
+  | 'capabilities'
+  | 'layout'
+  | 'editor'
+  | 'views'
+  | 'transactions'
+  | 'diagnostics';
+
+const DEVTOOLS_SECTIONS: readonly {
+  readonly id: DevtoolsSectionId;
+  readonly label: string;
+}[] = [
+  { id: 'commands', label: 'Commands' },
+  { id: 'menus', label: 'Menus' },
+  { id: 'keybindings', label: 'Keybindings' },
+  { id: 'contextKeys', label: 'Context keys' },
+  { id: 'capabilities', label: 'Capabilities' },
+  { id: 'layout', label: 'Layout' },
+  { id: 'editor', label: 'Editor' },
+  { id: 'views', label: 'Views' },
+  { id: 'transactions', label: 'Transactions' },
+  { id: 'diagnostics', label: 'Diagnostics' },
+];
+
+function formatSectionValue(
+  sectionId: DevtoolsSectionId,
+  snapshot: ReturnType<typeof useWorkbenchDevtoolsSnapshot>,
+): string {
+  switch (sectionId) {
+    case 'commands':
+      return JSON.stringify(snapshot.commands, null, 2);
+    case 'menus':
+      return JSON.stringify(snapshot.menus, null, 2);
+    case 'keybindings':
+      return JSON.stringify(snapshot.keybindings, null, 2);
+    case 'contextKeys':
+      return JSON.stringify(snapshot.contextKeys, null, 2);
+    case 'capabilities':
+      return JSON.stringify(
+        {
+          activeExtensions: snapshot.activeExtensions,
+          capabilities: snapshot.capabilities,
+        },
+        null,
+        2,
+      );
+    case 'layout':
+      return JSON.stringify(snapshot.layout, null, 2);
+    case 'editor':
+      return JSON.stringify(snapshot.editor, null, 2);
+    case 'views':
+      return JSON.stringify(
+        {
+          activities: snapshot.activities,
+          viewContainers: snapshot.viewContainers,
+          views: snapshot.views,
+        },
+        null,
+        2,
+      );
+    case 'transactions':
+      return JSON.stringify(snapshot.transactions, null, 2);
+    case 'diagnostics':
+      return JSON.stringify(snapshot.dependencyDiagnostics, null, 2);
+    default:
+      return '';
+  }
+}
+
+export function WorkbenchDevtoolsPanel() {
+  const snapshot = useWorkbenchDevtoolsSnapshot();
+  const [activeSection, setActiveSection] = useState<DevtoolsSectionId>('commands');
+  const sectionValue = useMemo(
+    () => formatSectionValue(activeSection, snapshot),
+    [activeSection, snapshot],
+  );
+
+  return (
+    <aside
+      aria-label="Workbench devtools"
+      className="workbench-devtools-panel"
+      data-testid="workbench-devtools-panel"
+    >
+      <header className="workbench-devtools-panel__header">
+        <strong>Workbench Devtools</strong>
+        <span className="workbench-devtools-panel__meta">Read-only</span>
+      </header>
+      <p className="workbench-devtools-panel__timestamp">Updated {snapshot.capturedAt}</p>
+      <nav aria-label="Devtools sections" className="workbench-devtools-panel__tabs">
+        {DEVTOOLS_SECTIONS.map((section) => (
+          <Button
+            key={section.id}
+            aria-pressed={activeSection === section.id}
+            compact
+            className="workbench-devtools-panel__tab"
+            onClick={() => {
+              setActiveSection(section.id);
+            }}
+          >
+            {section.label}
+          </Button>
+        ))}
+      </nav>
+      <ScrollArea
+        as="pre"
+        className="workbench-devtools-panel__output"
+        gutter="stable"
+        orientation="vertical"
+      >
+        {sectionValue}
+      </ScrollArea>
+    </aside>
+  );
+}

package/src/devtools/WorkbenchDevtoolsShell.tsx

@@ -1,17 +1,17 @@
-import type { ReactNode } from 'react';
-
-import { WorkbenchDevtoolsPanel } from './WorkbenchDevtoolsPanel.js';
-import './workbench-devtools.css';
-
-export interface WorkbenchDevtoolsShellProps {
-  readonly children: ReactNode;
-}
-
-export function WorkbenchDevtoolsShell({ children }: WorkbenchDevtoolsShellProps) {
-  return (
-    <div className="workbench-devtools-shell" data-testid="workbench-devtools-shell">
-      <div className="workbench-devtools-shell__main">{children}</div>
-      <WorkbenchDevtoolsPanel />
-    </div>
-  );
-}
+import type { ReactNode } from 'react';
+
+import { WorkbenchDevtoolsPanel } from './WorkbenchDevtoolsPanel.js';
+import './workbench-devtools.css';
+
+export interface WorkbenchDevtoolsShellProps {
+  readonly children: ReactNode;
+}
+
+export function WorkbenchDevtoolsShell({ children }: WorkbenchDevtoolsShellProps) {
+  return (
+    <div className="workbench-devtools-shell" data-testid="workbench-devtools-shell">
+      <div className="workbench-devtools-shell__main">{children}</div>
+      <WorkbenchDevtoolsPanel />
+    </div>
+  );
+}

package/src/devtools/index.ts

@@ -1,11 +1,11 @@
-export { WorkbenchDevtoolsPanel } from './WorkbenchDevtoolsPanel.js';
-export {
-  WorkbenchDevtoolsShell,
-  type WorkbenchDevtoolsShellProps,
-} from './WorkbenchDevtoolsShell.js';
-export {
-  collectWorkbenchDevtoolsSnapshot,
-  type CollectWorkbenchDevtoolsSnapshotInput,
-  type WorkbenchDevtoolsSnapshot,
-} from './workbench-devtools-snapshot.js';
-export { useWorkbenchDevtoolsSnapshot } from './use-workbench-devtools-snapshot.js';
+export { WorkbenchDevtoolsPanel } from './WorkbenchDevtoolsPanel.js';
+export {
+  WorkbenchDevtoolsShell,
+  type WorkbenchDevtoolsShellProps,
+} from './WorkbenchDevtoolsShell.js';
+export {
+  collectWorkbenchDevtoolsSnapshot,
+  type CollectWorkbenchDevtoolsSnapshotInput,
+  type WorkbenchDevtoolsSnapshot,
+} from './workbench-devtools-snapshot.js';
+export { useWorkbenchDevtoolsSnapshot } from './use-workbench-devtools-snapshot.js';

package/src/devtools/use-workbench-devtools-snapshot.ts

@@ -1,84 +1,84 @@
-import { useMemo, useSyncExternalStore } from 'react';
-
-import {
-  collectWorkbenchDevtoolsSnapshot,
-  type WorkbenchDevtoolsSnapshot,
-} from './workbench-devtools-snapshot.js';
-import { useWorkbench } from '../provider.js';
-import type { WorkbenchWorkspaceHostPort as WorkspaceHostPort } from '@workbench-kit/workspace';
-
-export function useWorkbenchDevtoolsSnapshot(): WorkbenchDevtoolsSnapshot {
-  const { editorService, extensionRegistry, layoutService, workspaceHostPort } = useWorkbench();
-
-  const store = useMemo(() => {
-    const collectSnapshot = () =>
-      collectWorkbenchDevtoolsSnapshot({
-        editorService,
-        extensionRegistry,
-        layoutService,
-        workspaceHostPort,
-      });
-    let snapshot = collectSnapshot();
-
-    const notifyChange = (onStoreChange: () => void) => {
-      snapshot = collectSnapshot();
-      onStoreChange();
-    };
-
-    return {
-      getSnapshot: () => snapshot,
-      subscribe: (onStoreChange: () => void) => {
-        const disposables = [
-          layoutService.onDidChangeLayout(() => {
-            notifyChange(onStoreChange);
-          }),
-          editorService.onDidChangeEditors(() => {
-            notifyChange(onStoreChange);
-          }),
-          extensionRegistry.commands.onDidRegisterCommand(() => {
-            notifyChange(onStoreChange);
-          }),
-          extensionRegistry.menus.onDidRegisterMenuItem(() => {
-            notifyChange(onStoreChange);
-          }),
-          extensionRegistry.keybindings.onDidRegisterKeybinding(() => {
-            notifyChange(onStoreChange);
-          }),
-          extensionRegistry.views.onDidRegisterView(() => {
-            notifyChange(onStoreChange);
-          }),
-          extensionRegistry.views.onDidRegisterViewContainer(() => {
-            notifyChange(onStoreChange);
-          }),
-          extensionRegistry.views.onDidRegisterViewProvider(() => {
-            notifyChange(onStoreChange);
-          }),
-          extensionRegistry.activities.onDidRegisterActivity(() => {
-            notifyChange(onStoreChange);
-          }),
-          extensionRegistry.onDidActivateExtension(() => {
-            notifyChange(onStoreChange);
-          }),
-          extensionRegistry.onDidDeactivateExtension(() => {
-            notifyChange(onStoreChange);
-          }),
-        ];
-
-        const workspacePort = workspaceHostPort as WorkspaceHostPort | undefined;
-        const unsubscribeWorkspace = workspacePort?.service.onDidChangeWorkspace(() => {
-          notifyChange(onStoreChange);
-        });
-
-        return () => {
-          for (const disposable of disposables) {
-            disposable.dispose();
-          }
-
-          unsubscribeWorkspace?.();
-        };
-      },
-    };
-  }, [editorService, extensionRegistry, layoutService, workspaceHostPort]);
-
-  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
-}
+import { useMemo, useSyncExternalStore } from 'react';
+
+import {
+  collectWorkbenchDevtoolsSnapshot,
+  type WorkbenchDevtoolsSnapshot,
+} from './workbench-devtools-snapshot.js';
+import { useWorkbench } from '../shell/provider.js';
+import type { WorkbenchWorkspaceHostPort as WorkspaceHostPort } from '@workbench-kit/workspace';
+
+export function useWorkbenchDevtoolsSnapshot(): WorkbenchDevtoolsSnapshot {
+  const { editorService, extensionRegistry, layoutService, workspaceHostPort } = useWorkbench();
+
+  const store = useMemo(() => {
+    const collectSnapshot = () =>
+      collectWorkbenchDevtoolsSnapshot({
+        editorService,
+        extensionRegistry,
+        layoutService,
+        workspaceHostPort,
+      });
+    let snapshot = collectSnapshot();
+
+    const notifyChange = (onStoreChange: () => void) => {
+      snapshot = collectSnapshot();
+      onStoreChange();
+    };
+
+    return {
+      getSnapshot: () => snapshot,
+      subscribe: (onStoreChange: () => void) => {
+        const disposables = [
+          layoutService.onDidChangeLayout(() => {
+            notifyChange(onStoreChange);
+          }),
+          editorService.onDidChangeEditors(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.commands.onDidRegisterCommand(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.menus.onDidRegisterMenuItem(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.keybindings.onDidRegisterKeybinding(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.views.onDidRegisterView(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.views.onDidRegisterViewContainer(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.views.onDidRegisterViewProvider(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.activities.onDidRegisterActivity(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.onDidActivateExtension(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.onDidDeactivateExtension(() => {
+            notifyChange(onStoreChange);
+          }),
+        ];
+
+        const workspacePort = workspaceHostPort as WorkspaceHostPort | undefined;
+        const unsubscribeWorkspace = workspacePort?.service.onDidChangeWorkspace(() => {
+          notifyChange(onStoreChange);
+        });
+
+        return () => {
+          for (const disposable of disposables) {
+            disposable.dispose();
+          }
+
+          unsubscribeWorkspace?.();
+        };
+      },
+    };
+  }, [editorService, extensionRegistry, layoutService, workspaceHostPort]);
+
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+}