@rozenite/vite-plugin 1.13.0 → 2.0.0

package/src/dev-host/components/MessageLogPane.tsx

@@ -1,84 +1,102 @@
+import { Button, DataTable, ScrollArea } from '@rozenite/ui';
+import { Trash2 } from 'lucide-react';
+import { useMemo } from 'react';
+import type { DataTableColumn } from '@rozenite/ui';
 import type { MessageEntry } from '../types.js';
-import { cn, formatMessageTableDate, formatPayloadPreview } from '../utils.js';
-import { ClearIcon } from './icons.js';
-import { ScrollArea } from './ui/ScrollArea.js';
-import { IconButton } from './ui/IconButton.js';
+import { formatMessageTableDate, formatPayloadPreview } from '../utils.js';
 
 type MessageLogPaneProps = {
   messages: MessageEntry[];
-  selectedMessageId: string | null;
   onSelectMessage: (messageId: string) => void;
   onClearMessages: () => void;
 };
 
 export const MessageLogPane = ({
   messages,
-  selectedMessageId,
   onSelectMessage,
   onClearMessages,
 }: MessageLogPaneProps) => {
-  return (
-    <div className="rz-pane">
-      <div className="rz-log-pane">
-        <div className="rz-sidebar-header">
-          <div className="rz-sidebar-title">Message Log</div>
-          <div className="rz-header-actions">
-            <IconButton
-              type="button"
-              onClick={onClearMessages}
-              disabled={messages.length === 0}
-              aria-label="Clear message log"
-              title="Clear message log"
-            >
-              <ClearIcon />
-            </IconButton>
-          </div>
-        </div>
-
-        <ScrollArea className="rz-sidebar-scroll">
-          <div className="rz-message-list">
-            <div className="rz-message-list-header">
-              <div className="rz-message-header-cell">Dir</div>
-              <div className="rz-message-header-cell">Date</div>
-              <div className="rz-message-header-cell">Type</div>
-              <div className="rz-message-header-cell">Payload</div>
-            </div>
-
-            {messages.map((message) => (
-              <button
-                key={message.id}
-                type="button"
-                className="rz-message-row"
-                data-selected={message.id === selectedMessageId}
-                onClick={() => onSelectMessage(message.id)}
-              >
-                <div
-                  className={cn(
-                    'rz-message-cell rz-message-direction',
-                    message.direction === 'in' ? 'rz-message-dir-in' : 'rz-message-dir-out',
-                  )}
-                  aria-label={message.direction === 'in' ? 'Sent message' : 'Received message'}
-                  title={message.direction === 'in' ? 'Sent message' : 'Received message'}
-                >
-                  <span className="rz-message-arrow" aria-hidden="true">
-                    {message.direction === 'in' ? '↑' : '↓'}
-                  </span>
-                </div>
+  const columns = useMemo<DataTableColumn<MessageEntry>[]>(
+    () => [
+      {
+        accessorKey: 'direction',
+        header: 'Dir',
+        cell: ({ getValue }) => {
+          const direction = getValue<MessageEntry['direction']>();
+          const isSent = direction === 'in';
 
-                <div className="rz-message-cell rz-message-date">
-                  {formatMessageTableDate(message.date)}
-                </div>
+          return (
+            <span
+              className={
+                isSent ? 'dev-host-direction-in' : 'dev-host-direction-out'
+              }
+              aria-label={isSent ? 'Sent message' : 'Received message'}
+              title={isSent ? 'Sent message' : 'Received message'}
+            >
+              {isSent ? '↑' : '↓'}
+            </span>
+          );
+        },
+      },
+      {
+        accessorKey: 'date',
+        header: 'Date',
+        cell: ({ row }) => (
+          <span className="text-muted-foreground">
+            {formatMessageTableDate(row.original.date)}
+          </span>
+        ),
+      },
+      {
+        accessorKey: 'type',
+        header: 'Type',
+        cell: ({ getValue }) => (
+          <span className="font-medium">{getValue<string>()}</span>
+        ),
+      },
+      {
+        id: 'payload',
+        accessorFn: (message) => formatPayloadPreview(message.payload),
+        header: 'Payload',
+        cell: ({ getValue }) => (
+          <span className="block max-w-160 truncate font-mono text-xs text-muted-foreground">
+            {getValue<string>()}
+          </span>
+        ),
+      },
+    ],
+    [],
+  );
 
-                <div className="rz-message-cell rz-message-type">{message.type}</div>
+  return (
+    <section className="dev-host-pane">
+      <header className="dev-host-pane-header">
+        <h2 className="dev-host-pane-title">Message Log</h2>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onClearMessages}
+          disabled={messages.length === 0}
+          aria-label="Clear message log"
+          title="Clear message log"
+        >
+          <Trash2 />
+        </Button>
+      </header>
 
-                <pre className="rz-message-cell rz-message-preview">
-                  {formatPayloadPreview(message.payload)}
-                </pre>
-              </button>
-            ))}
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
+      <ScrollArea
+        className="dev-host-scroll"
+        viewportClassName="dev-host-scroll-viewport"
+      >
+        <DataTable
+          className="dev-host-message-table"
+          columns={columns}
+          data={messages}
+          emptyMessage="No messages yet."
+          getRowId={(message) => message.id}
+          onRowClick={(message) => onSelectMessage(message.id)}
+        />
+      </ScrollArea>
+    </section>
   );
 };

package/src/dev-host/components/PanelTabs.tsx

@@ -1,5 +1,5 @@
+import { Select } from '@rozenite/ui';
 import type { DevHostPanelEntry } from '../types.js';
-import { ToggleGroup } from './ui/ToggleGroup.js';
 
 type PanelTabsProps = {
   panels: DevHostPanelEntry[];
@@ -7,16 +7,35 @@ type PanelTabsProps = {
   onValueChange: (value: string) => void;
 };
 
-export const PanelTabs = ({ panels, activeSource, onValueChange }: PanelTabsProps) => {
+export const PanelTabs = ({
+  panels,
+  activeSource,
+  onValueChange,
+}: PanelTabsProps) => {
+  if (panels.length === 0) {
+    return null;
+  }
+
+  const activePanel = panels.find((panel) => panel.source === activeSource);
+
   return (
-    <ToggleGroup
-      aria-label="Plugin panels"
+    <Select
       value={activeSource}
-      onChange={onValueChange}
-      options={panels.map((panel) => ({
-        key: panel.source,
-        label: panel.label,
-      }))}
-    />
+      onValueChange={(value) => onValueChange(String(value))}
+    >
+      <Select.Trigger
+        className="dev-host-panel-select"
+        aria-label="Plugin panel"
+      >
+        <Select.Value>{activePanel?.label}</Select.Value>
+      </Select.Trigger>
+      <Select.Content align="end">
+        {panels.map((panel) => (
+          <Select.Item key={panel.source} value={panel.source}>
+            {panel.label}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select>
   );
 };

package/src/dev-host/config.ts

@@ -19,7 +19,9 @@ const getEntryDisplayName = (value: unknown, fallback: string) => {
 };
 
 const getDevHostConfig = () => {
-  const value = (window as unknown as Record<string, unknown>)[DEV_HOST_CONFIG_GLOBAL_KEY];
+  const value = (window as unknown as Record<string, unknown>)[
+    DEV_HOST_CONFIG_GLOBAL_KEY
+  ];
 
   if (typeof value !== 'object' || value === null) {
     return {} as { presets?: unknown; flows?: unknown };
@@ -28,7 +30,9 @@ const getDevHostConfig = () => {
   return value as { presets?: unknown; flows?: unknown };
 };
 
-const isDevHostPresetSource = (value: unknown): value is DevHostPresetSource => {
+const isDevHostPresetSource = (
+  value: unknown,
+): value is DevHostPresetSource => {
   return (
     typeof value === 'object' &&
     value !== null &&

package/src/dev-host/constants.ts

@@ -10,22 +10,3 @@ export const MIN_DETAILS_WIDTH = 280;
 export const DEFAULT_COMMAND_WIDTH = 320;
 export const MIN_COMMAND_WIDTH = 260;
 export const SPLITTER_SIZE = 6;
-
-export const jsonTreeTheme = {
-  base00: 'transparent',
-  base01: '#374151',
-  base02: '#4b5563',
-  base03: '#6b7280',
-  base04: '#9ca3af',
-  base05: '#d1d5db',
-  base06: '#e5e7eb',
-  base07: '#f9fafb',
-  base08: '#ef4444',
-  base09: '#f59e0b',
-  base0A: '#10b981',
-  base0B: '#3b82f6',
-  base0C: '#06b6d4',
-  base0D: '#8b5cf6',
-  base0E: '#ec4899',
-  base0F: '#f97316',
-};

package/src/dev-host/flow-runtime.ts

@@ -1,6 +1,14 @@
 import { useEffect, useRef, useState } from 'react';
-import type { DevFlowContext, DevFlowMessage, DevFlowMessageMatcher } from '../load-config.js';
-import type { DevHostFlowEntry, DevHostFlowRunState, MessageEntry } from './types.js';
+import type {
+  DevFlowContext,
+  DevFlowMessage,
+  DevFlowMessageMatcher,
+} from '../load-config.js';
+import type {
+  DevHostFlowEntry,
+  DevHostFlowRunState,
+  MessageEntry,
+} from './types.js';
 
 type FlowRunnerOptions = {
   sendMessage: (type: string, payload: unknown) => void;
@@ -138,12 +146,12 @@ export const useFlowRunner = ({ sendMessage }: FlowRunnerOptions) => {
       }
     };
 
-      const cleanupRun = () => {
-        activeRun.cleanups.forEach((cleanup) => cleanup());
-        activeRun.cleanups.clear();
-        activeRun.listeners.clear();
-        activeRunsRef.current.delete(runId);
-      };
+    const cleanupRun = () => {
+      activeRun.cleanups.forEach((cleanup) => cleanup());
+      activeRun.cleanups.clear();
+      activeRun.listeners.clear();
+      activeRunsRef.current.delete(runId);
+    };
 
     const onMessage: DevFlowContext['onMessage'] = (matcher, listener) => {
       throwIfAborted();
@@ -203,13 +211,17 @@ export const useFlowRunner = ({ sendMessage }: FlowRunnerOptions) => {
             resolve(message);
           });
 
-          controller.signal.addEventListener('abort', handleAbort, { once: true });
+          controller.signal.addEventListener('abort', handleAbort, {
+            once: true,
+          });
 
           if (options?.timeoutMs != null) {
             timeoutId = window.setTimeout(() => {
               cleanup();
               reject(
-                new Error(`Timed out waiting for a matching message after ${options.timeoutMs}ms.`),
+                new Error(
+                  `Timed out waiting for a matching message after ${options.timeoutMs}ms.`,
+                ),
               );
             }, options.timeoutMs);
           }
@@ -238,7 +250,14 @@ export const useFlowRunner = ({ sendMessage }: FlowRunnerOptions) => {
       ...current,
     ]);
 
-    const updateRunState = (nextState: Partial<Omit<DevHostFlowRunState, 'id' | 'flowName' | 'flowDisplayName' | 'autoRun'>>) => {
+    const updateRunState = (
+      nextState: Partial<
+        Omit<
+          DevHostFlowRunState,
+          'id' | 'flowName' | 'flowDisplayName' | 'autoRun'
+        >
+      >,
+    ) => {
       setFlowRuns((current) =>
         current.map((run) =>
           run.id === runId
@@ -283,7 +302,9 @@ export const useFlowRunner = ({ sendMessage }: FlowRunnerOptions) => {
   };
 
   const hasRunningFlow = (flowName: string) => {
-    return flowRuns.some((run) => run.flowName === flowName && run.status === 'running');
+    return flowRuns.some(
+      (run) => run.flowName === flowName && run.status === 'running',
+    );
   };
 
   return {

package/src/dev-host/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

package/src/dev-host/main.tsx

@@ -1,15 +1,10 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { BaseProvider, DarkTheme } from 'baseui';
-import { Client as Styletron } from 'styletron-engine-monolithic';
-import { Provider as StyletronProvider } from 'styletron-react';
 import { App } from './App.js';
 import { getDevHostFlows, getDevHostPresets } from './config.js';
 import './styles.css';
 import { readDevHostState } from './utils.js';
 
-const styletron = new Styletron();
-
 const rootElement = document.getElementById('root');
 
 if (!rootElement) {
@@ -22,10 +17,6 @@ const presets = getDevHostPresets();
 
 createRoot(rootElement).render(
   <StrictMode>
-    <StyletronProvider value={styletron}>
-      <BaseProvider theme={DarkTheme}>
-        <App {...state} flows={flows} presets={presets} />
-      </BaseProvider>
-    </StyletronProvider>
+    <App {...state} flows={flows} presets={presets} />
   </StrictMode>,
 );

package/src/dev-host/server.ts

@@ -33,7 +33,9 @@ export const getDevHostSourceEntryFile = (packageDir: string) => {
   return path.join(packageDir, 'src', 'dev-host', 'main.tsx');
 };
 
-export const getBuiltDevHostAssets = (packageDir: string): DevHostBuiltAssets | null => {
+export const getBuiltDevHostAssets = (
+  packageDir: string,
+): DevHostBuiltAssets | null => {
   const devHostDistDir = path.join(packageDir, 'dist', 'dev-host');
   const manifestPath = path.join(devHostDistDir, 'manifest.json');
 
@@ -41,11 +43,15 @@ export const getBuiltDevHostAssets = (packageDir: string): DevHostBuiltAssets |
     return null;
   }
 
-  const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8')) as DevHostBuildManifest;
+  const manifest = JSON.parse(
+    fs.readFileSync(manifestPath, 'utf8'),
+  ) as DevHostBuildManifest;
   const entry = manifest[DEV_HOST_BUILD_ENTRY_KEY];
 
   if (!entry?.file) {
-    throw new Error(`Missing ${DEV_HOST_BUILD_ENTRY_KEY} entry in dev host manifest.`);
+    throw new Error(
+      `Missing ${DEV_HOST_BUILD_ENTRY_KEY} entry in dev host manifest.`,
+    );
   }
 
   return {