@rozenite/vite-plugin 1.12.0 → 2.0.0

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

@@ -0,0 +1,82 @@
+import { Button, JsonInspector, ScrollArea } from '@rozenite/ui';
+import { Send, X } from 'lucide-react';
+import type { MessageEntry } from '../types.js';
+import { formatMessageDate, formatPayloadForCommandInput } from '../utils.js';
+
+type MessageDetailsPaneProps = {
+  selectedMessage: MessageEntry;
+  onClose: () => void;
+  onUseMessage: (message: MessageEntry) => void;
+};
+
+export const MessageDetailsPane = ({
+  selectedMessage,
+  onClose,
+  onUseMessage,
+}: MessageDetailsPaneProps) => {
+  return (
+    <section className="dev-host-pane">
+      <header className="dev-host-pane-header">
+        <h2 className="dev-host-pane-title">Message Details</h2>
+        <div className="dev-host-pane-actions">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onUseMessage(selectedMessage)}
+            aria-label="Use message in dispatcher"
+            title="Use message in dispatcher"
+          >
+            <Send />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onClose}
+            aria-label="Close message details"
+            title="Close message details"
+          >
+            <X />
+          </Button>
+        </div>
+      </header>
+
+      <ScrollArea className="dev-host-scroll">
+        <div className="dev-host-details">
+          <div className="dev-host-detail-section">
+            <span className="dev-host-label">Date</span>
+            <div className="dev-host-detail-value">
+              {formatMessageDate(selectedMessage.date)}
+            </div>
+          </div>
+          <div className="dev-host-detail-section">
+            <span className="dev-host-label">Type</span>
+            <div className="dev-host-detail-value">{selectedMessage.type}</div>
+          </div>
+          <div className="dev-host-detail-section">
+            <span className="dev-host-label">Payload</span>
+            <div className="dev-host-detail-payload">
+              {typeof selectedMessage.payload === 'object' &&
+              selectedMessage.payload !== null ? (
+                <JsonInspector
+                  data={selectedMessage.payload}
+                  defaultExpandedDepth={2}
+                />
+              ) : (
+                <pre className="m-0 whitespace-pre-wrap break-words">
+                  {formatPayloadForCommandInput(selectedMessage.payload)}
+                </pre>
+              )}
+            </div>
+          </div>
+        </div>
+      </ScrollArea>
+    </section>
+  );
+};
+
+export const getDispatcherValuesFromMessage = (message: MessageEntry) => {
+  return {
+    commandType: message.type,
+    commandPayload: formatPayloadForCommandInput(message.payload),
+  };
+};

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

@@ -0,0 +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 { formatMessageTableDate, formatPayloadPreview } from '../utils.js';
+
+type MessageLogPaneProps = {
+  messages: MessageEntry[];
+  onSelectMessage: (messageId: string) => void;
+  onClearMessages: () => void;
+};
+
+export const MessageLogPane = ({
+  messages,
+  onSelectMessage,
+  onClearMessages,
+}: MessageLogPaneProps) => {
+  const columns = useMemo<DataTableColumn<MessageEntry>[]>(
+    () => [
+      {
+        accessorKey: 'direction',
+        header: 'Dir',
+        cell: ({ getValue }) => {
+          const direction = getValue<MessageEntry['direction']>();
+          const isSent = direction === 'in';
+
+          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>
+        ),
+      },
+    ],
+    [],
+  );
+
+  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>
+
+      <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

@@ -0,0 +1,41 @@
+import { Select } from '@rozenite/ui';
+import type { DevHostPanelEntry } from '../types.js';
+
+type PanelTabsProps = {
+  panels: DevHostPanelEntry[];
+  activeSource: string;
+  onValueChange: (value: string) => void;
+};
+
+export const PanelTabs = ({
+  panels,
+  activeSource,
+  onValueChange,
+}: PanelTabsProps) => {
+  if (panels.length === 0) {
+    return null;
+  }
+
+  const activePanel = panels.find((panel) => panel.source === activeSource);
+
+  return (
+    <Select
+      value={activeSource}
+      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

@@ -0,0 +1,111 @@
+import type { DevFlowEntry, DevPresetEntry } from '../load-config.js';
+import { DEV_HOST_CONFIG_GLOBAL_KEY } from './constants.js';
+import type { DevHostFlowEntry, DevHostPresetEntry } from './types.js';
+
+type DevHostPresetSource = Omit<DevPresetEntry, 'name'> & {
+  name?: string;
+};
+
+type DevHostFlowSource = Omit<DevFlowEntry, 'name'> & {
+  name?: string;
+};
+
+const getEntryDisplayName = (value: unknown, fallback: string) => {
+  if (typeof value === 'string' && value.trim()) {
+    return value.trim();
+  }
+
+  return fallback;
+};
+
+const getDevHostConfig = () => {
+  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 };
+  }
+
+  return value as { presets?: unknown; flows?: unknown };
+};
+
+const isDevHostPresetSource = (
+  value: unknown,
+): value is DevHostPresetSource => {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    (!('name' in value) || typeof value.name === 'string') &&
+    'type' in value &&
+    typeof value.type === 'string' &&
+    'payload' in value
+  );
+};
+
+const isDevHostFlowSource = (value: unknown): value is DevHostFlowSource => {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    (!('name' in value) || typeof value.name === 'string') &&
+    (!('autoRun' in value) || typeof value.autoRun === 'boolean') &&
+    'run' in value &&
+    typeof value.run === 'function'
+  );
+};
+
+const toDevHostPresetEntry = (value: unknown): DevHostPresetEntry | null => {
+  if (!isDevHostPresetSource(value)) {
+    return null;
+  }
+
+  const displayName = getEntryDisplayName(value.name, 'Untitled preset');
+
+  return {
+    name: displayName,
+    displayName,
+    type: value.type,
+    payload: value.payload,
+  };
+};
+
+const toDevHostFlowEntry = (value: unknown): DevHostFlowEntry | null => {
+  if (!isDevHostFlowSource(value)) {
+    return null;
+  }
+
+  const displayName = getEntryDisplayName(value.name, 'Untitled flow');
+
+  return {
+    name: displayName,
+    displayName,
+    autoRun: value.autoRun ?? false,
+    run: value.run,
+  };
+};
+
+export const getDevHostPresets = (): DevHostPresetEntry[] => {
+  const presets = getDevHostConfig().presets;
+
+  if (!Array.isArray(presets)) {
+    return [];
+  }
+
+  return presets.flatMap((preset) => {
+    const entry = toDevHostPresetEntry(preset);
+    return entry ? [entry] : [];
+  });
+};
+
+export const getDevHostFlows = (): DevHostFlowEntry[] => {
+  const flows = getDevHostConfig().flows;
+
+  if (!Array.isArray(flows)) {
+    return [];
+  }
+
+  return flows.flatMap((flow) => {
+    const entry = toDevHostFlowEntry(flow);
+    return entry ? [entry] : [];
+  });
+};

package/src/dev-host/constants.ts

@@ -0,0 +1,12 @@
+export const DEV_HOST_STATE_ELEMENT_ID = '__rozenite-dev-host__';
+export const DEV_HOST_CONFIG_GLOBAL_KEY = '__rozenite-dev-config__';
+
+export const DEFAULT_DEVTOOLS_HEIGHT = 288;
+export const MIN_DEVTOOLS_HEIGHT = 180;
+export const MIN_IFRAME_HEIGHT = 220;
+export const MIN_NARROW_IFRAME_HEIGHT = 140;
+export const DETAILS_PANEL_WIDTH = 360;
+export const MIN_DETAILS_WIDTH = 280;
+export const DEFAULT_COMMAND_WIDTH = 320;
+export const MIN_COMMAND_WIDTH = 260;
+export const SPLITTER_SIZE = 6;

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

@@ -0,0 +1,318 @@
+import { useEffect, useRef, useState } from 'react';
+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;
+};
+
+type ActiveFlowRun = {
+  id: string;
+  flowName: string;
+  flowDisplayName: string;
+  autoRun: boolean;
+  controller: AbortController;
+  listeners: Map<number, (message: DevFlowMessage) => void>;
+  cleanups: Set<() => void>;
+};
+
+const createAbortError = () => {
+  return new DOMException('Flow execution was stopped.', 'AbortError');
+};
+
+const isAbortError = (error: unknown) => {
+  return error instanceof DOMException
+    ? error.name === 'AbortError'
+    : error instanceof Error && error.name === 'AbortError';
+};
+
+const toFlowMessage = (message: MessageEntry): DevFlowMessage => {
+  return {
+    id: message.id,
+    direction: message.direction,
+    date: message.date,
+    type: message.type,
+    payload: message.payload,
+  };
+};
+
+const matchesMessage = (
+  message: DevFlowMessage,
+  matcher?: DevFlowMessageMatcher,
+) => {
+  if (!matcher) {
+    return true;
+  }
+
+  if (typeof matcher === 'string') {
+    return message.type === matcher;
+  }
+
+  if (typeof matcher === 'function') {
+    return matcher(message);
+  }
+
+  return (
+    (matcher.type == null || message.type === matcher.type) &&
+    (matcher.direction == null || message.direction === matcher.direction) &&
+    (matcher.predicate == null || matcher.predicate(message))
+  );
+};
+
+const formatFlowError = (error: unknown) => {
+  if (isAbortError(error)) {
+    return 'Flow execution was stopped.';
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return String(error);
+};
+
+export const useFlowRunner = ({ sendMessage }: FlowRunnerOptions) => {
+  const [flowRuns, setFlowRuns] = useState<DevHostFlowRunState[]>([]);
+  const messagesRef = useRef<MessageEntry[]>([]);
+  const activeRunsRef = useRef<Map<string, ActiveFlowRun>>(new Map());
+  const listenerIdRef = useRef(0);
+
+  useEffect(() => {
+    return () => {
+      activeRunsRef.current.forEach((run) => {
+        run.controller.abort();
+        run.cleanups.forEach((cleanup) => cleanup());
+      });
+      activeRunsRef.current.clear();
+    };
+  }, []);
+
+  const stopFlow = (runId: string) => {
+    const activeRun = activeRunsRef.current.get(runId);
+    if (!activeRun) {
+      return;
+    }
+
+    activeRun.controller.abort();
+  };
+
+  const registerMessage = (message: MessageEntry) => {
+    messagesRef.current = [message, ...messagesRef.current];
+
+    const flowMessage = toFlowMessage(message);
+    activeRunsRef.current.forEach((activeRun) => {
+      activeRun.listeners.forEach((listener) => {
+        listener(flowMessage);
+      });
+    });
+  };
+
+  const resetMessages = () => {
+    messagesRef.current = [];
+  };
+
+  const runFlow = (flow: DevHostFlowEntry, options?: { autoRun?: boolean }) => {
+    const duplicateRun = [...activeRunsRef.current.values()].find(
+      (run) => run.flowName === flow.name,
+    );
+
+    if (duplicateRun) {
+      return duplicateRun.id;
+    }
+
+    const runId = crypto.randomUUID();
+    const controller = new AbortController();
+    const activeRun: ActiveFlowRun = {
+      id: runId,
+      flowName: flow.name,
+      flowDisplayName: flow.displayName,
+      autoRun: options?.autoRun ?? flow.autoRun,
+      controller,
+      listeners: new Map(),
+      cleanups: new Set(),
+    };
+
+    const throwIfAborted = () => {
+      if (controller.signal.aborted) {
+        throw createAbortError();
+      }
+    };
+
+    const cleanupRun = () => {
+      activeRun.cleanups.forEach((cleanup) => cleanup());
+      activeRun.cleanups.clear();
+      activeRun.listeners.clear();
+      activeRunsRef.current.delete(runId);
+    };
+
+    const onMessage: DevFlowContext['onMessage'] = (matcher, listener) => {
+      throwIfAborted();
+
+      const listenerId = listenerIdRef.current + 1;
+      listenerIdRef.current = listenerId;
+
+      const wrappedListener = (message: DevFlowMessage) => {
+        if (matchesMessage(message, matcher)) {
+          listener(message);
+        }
+      };
+
+      activeRun.listeners.set(listenerId, wrappedListener);
+
+      const remove = () => {
+        activeRun.listeners.delete(listenerId);
+        controller.signal.removeEventListener('abort', remove);
+        activeRun.cleanups.delete(remove);
+      };
+
+      controller.signal.addEventListener('abort', remove, { once: true });
+      activeRun.cleanups.add(remove);
+
+      return { remove };
+    };
+
+    const flowContext: DevFlowContext = {
+      signal: controller.signal,
+      send: (type, payload) => {
+        throwIfAborted();
+        sendMessage(type, payload);
+      },
+      onMessage,
+      waitForMessage: (matcher, options) => {
+        throwIfAborted();
+
+        return new Promise((resolve, reject) => {
+          let timeoutId: number | null = null;
+
+          const cleanup = () => {
+            subscription.remove();
+            controller.signal.removeEventListener('abort', handleAbort);
+
+            if (timeoutId !== null) {
+              window.clearTimeout(timeoutId);
+            }
+          };
+
+          const handleAbort = () => {
+            cleanup();
+            reject(createAbortError());
+          };
+
+          const subscription = onMessage(matcher, (message) => {
+            cleanup();
+            resolve(message);
+          });
+
+          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.`,
+                ),
+              );
+            }, options.timeoutMs);
+          }
+        });
+      },
+      getMessages: (matcher) => {
+        throwIfAborted();
+
+        return messagesRef.current
+          .map(toFlowMessage)
+          .filter((message) => matchesMessage(message, matcher));
+      },
+    };
+
+    activeRunsRef.current.set(runId, activeRun);
+    setFlowRuns((current) => [
+      {
+        id: runId,
+        flowName: flow.name,
+        flowDisplayName: flow.displayName,
+        status: 'running',
+        result: null,
+        error: null,
+        autoRun: activeRun.autoRun,
+      },
+      ...current,
+    ]);
+
+    const updateRunState = (
+      nextState: Partial<
+        Omit<
+          DevHostFlowRunState,
+          'id' | 'flowName' | 'flowDisplayName' | 'autoRun'
+        >
+      >,
+    ) => {
+      setFlowRuns((current) =>
+        current.map((run) =>
+          run.id === runId
+            ? {
+                ...run,
+                ...nextState,
+              }
+            : run,
+        ),
+      );
+    };
+
+    Promise.resolve(flow.run(flowContext))
+      .then((result) => {
+        if (controller.signal.aborted) {
+          updateRunState({
+            status: 'aborted',
+            result: null,
+            error: 'Flow execution was stopped.',
+          });
+          return;
+        }
+
+        updateRunState({
+          status: 'succeeded',
+          result,
+          error: null,
+        });
+      })
+      .catch((error) => {
+        updateRunState({
+          status: isAbortError(error) ? 'aborted' : 'failed',
+          result: null,
+          error: formatFlowError(error),
+        });
+      })
+      .finally(() => {
+        cleanupRun();
+      });
+
+    return runId;
+  };
+
+  const hasRunningFlow = (flowName: string) => {
+    return flowRuns.some(
+      (run) => run.flowName === flowName && run.status === 'running',
+    );
+  };
+
+  return {
+    flowRuns,
+    runFlow,
+    stopFlow,
+    hasRunningFlow,
+    registerMessage,
+    resetMessages,
+  };
+};

package/src/dev-host/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rozenite Dev Host</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/src/dev-host/main.tsx

@@ -0,0 +1,22 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App.js';
+import { getDevHostFlows, getDevHostPresets } from './config.js';
+import './styles.css';
+import { readDevHostState } from './utils.js';
+
+const rootElement = document.getElementById('root');
+
+if (!rootElement) {
+  throw new Error('Rozenite dev host failed to initialize.');
+}
+
+const state = readDevHostState();
+const flows = getDevHostFlows();
+const presets = getDevHostPresets();
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <App {...state} flows={flows} presets={presets} />
+  </StrictMode>,
+);