@rozenite/vite-plugin 1.12.0 → 2.0.0

package/src/dev-host/App.tsx

@@ -0,0 +1,373 @@
+import { useEffect, useRef, useState, type FormEvent } from 'react';
+import { PluginHeader, PluginShell, Split, Tabs } from '@rozenite/ui';
+import type {
+  DevHostFlowEntry,
+  DevHostPanelEntry,
+  DevHostPresetEntry,
+  DevHostState,
+  MessageEntry,
+} from './types.js';
+import { useFlowRunner } from './flow-runtime.js';
+import {
+  createMessageEntry,
+  formatPayloadForCommandInput,
+  getInitialPanel,
+  isPluginMessage,
+} from './utils.js';
+import { DispatchForm } from './components/DispatchForm.js';
+import {
+  MessageDetailsPane,
+  getDispatcherValuesFromMessage,
+} from './components/MessageDetailsPane.js';
+import { MessageLogPane } from './components/MessageLogPane.js';
+import { PanelTabs } from './components/PanelTabs.js';
+import './styles.css';
+
+type AppProps = DevHostState & {
+  flows: DevHostFlowEntry[];
+  presets: DevHostPresetEntry[];
+};
+
+type MobileDevtoolsTab = 'log' | 'actions';
+
+const useNarrowViewport = () => {
+  const [isNarrow, setIsNarrow] = useState(
+    () => window.matchMedia('(max-width: 960px)').matches,
+  );
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(max-width: 960px)');
+    const handleChange = (event: MediaQueryListEvent) => {
+      setIsNarrow(event.matches);
+    };
+
+    setIsNarrow(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  return isNarrow;
+};
+
+export const App = ({
+  packageName,
+  packageDescription,
+  panels,
+  flows,
+  presets,
+}: AppProps) => {
+  const [activePanel, setActivePanel] = useState<DevHostPanelEntry | null>(() =>
+    getInitialPanel(panels),
+  );
+  const [commandType, setCommandType] = useState('');
+  const [commandPayload, setCommandPayload] = useState('');
+  const [messages, setMessages] = useState<MessageEntry[]>([]);
+  const [selectedMessageId, setSelectedMessageId] = useState<string | null>(
+    null,
+  );
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+  const [activeMobileTab, setActiveMobileTab] =
+    useState<MobileDevtoolsTab>('log');
+  const [iframeLoadNonce, setIframeLoadNonce] = useState(0);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const lastAutoRunLoadRef = useRef(0);
+  const isNarrowViewport = useNarrowViewport();
+  const {
+    flowRuns,
+    runFlow,
+    stopFlow,
+    hasRunningFlow,
+    registerMessage,
+    resetMessages,
+  } = useFlowRunner({
+    sendMessage: (type, payload) => {
+      iframeRef.current?.contentWindow?.postMessage(
+        { pluginId: packageName, type, payload },
+        '*',
+      );
+      appendMessage({ direction: 'in', type, payload });
+    },
+  });
+
+  const activeSource = activePanel?.source ?? '';
+  const activeLabel = activePanel?.label ?? '';
+  const selectedMessage =
+    messages.find((message) => message.id === selectedMessageId) ?? null;
+  const panelDescription = packageDescription.trim();
+  const trimmedCommandType = commandType.trim();
+  const trimmedCommandPayload = commandPayload.trim();
+  const canDispatch = (() => {
+    if (!trimmedCommandType || !trimmedCommandPayload) {
+      return false;
+    }
+
+    try {
+      JSON.parse(trimmedCommandPayload);
+      return true;
+    } catch {
+      return false;
+    }
+  })();
+
+  useEffect(() => {
+    document.title = `${packageName} Dev Host`;
+  }, [packageName]);
+
+  useEffect(() => {
+    if (iframeLoadNonce === 0) {
+      return;
+    }
+
+    if (lastAutoRunLoadRef.current === iframeLoadNonce) {
+      return;
+    }
+
+    lastAutoRunLoadRef.current = iframeLoadNonce;
+
+    flows.forEach((flow) => {
+      if (flow.autoRun) {
+        runFlow(flow, { autoRun: true });
+      }
+    });
+  }, [flows, iframeLoadNonce, runFlow]);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.source !== iframeRef.current?.contentWindow) {
+        return;
+      }
+
+      if (
+        typeof event.data !== 'object' ||
+        event.data === null ||
+        event.data.type !== 'rozenite-message' ||
+        !('payload' in event.data) ||
+        !isPluginMessage(event.data.payload)
+      ) {
+        return;
+      }
+
+      const payload = event.data.payload;
+      appendMessage({
+        direction: 'out',
+        type: payload.type,
+        payload: payload.payload,
+      });
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  const appendMessage = (input: Omit<MessageEntry, 'id' | 'date'>) => {
+    const nextEntry = createMessageEntry(input);
+    registerMessage(nextEntry);
+    setMessages((current) => [nextEntry, ...current]);
+  };
+
+  const selectPanel = (value: string) => {
+    const nextPanel = panels.find((panel) => panel.source === value);
+    if (!nextPanel) {
+      return;
+    }
+
+    setActivePanel(nextPanel);
+    const nextUrl = new URL(window.location.href);
+    nextUrl.searchParams.set('panel', nextPanel.label);
+    window.history.replaceState(null, '', nextUrl);
+  };
+
+  const clearMessages = () => {
+    resetMessages();
+    setMessages([]);
+    setSelectedMessageId(null);
+    setIsDetailsOpen(false);
+    setActiveMobileTab('log');
+  };
+
+  const resetForm = () => {
+    setCommandType('');
+    setCommandPayload('');
+  };
+
+  const applyPreset = (preset: DevHostPresetEntry) => {
+    setCommandType(preset.type);
+    setCommandPayload(formatPayloadForCommandInput(preset.payload));
+  };
+
+  const handleDispatch = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!canDispatch) {
+      return;
+    }
+
+    const payload = JSON.parse(trimmedCommandPayload) as unknown;
+    iframeRef.current?.contentWindow?.postMessage(
+      { pluginId: packageName, type: trimmedCommandType, payload },
+      '*',
+    );
+    appendMessage({
+      direction: 'in',
+      type: trimmedCommandType,
+      payload,
+    });
+    resetForm();
+  };
+
+  const handleMessageSelect = (messageId: string) => {
+    setSelectedMessageId(messageId);
+    setIsDetailsOpen(true);
+    if (isNarrowViewport) {
+      setActiveMobileTab('log');
+    }
+  };
+
+  const useMessage = (message: MessageEntry) => {
+    const nextValues = getDispatcherValuesFromMessage(message);
+    setCommandType(nextValues.commandType);
+    setCommandPayload(nextValues.commandPayload);
+    setIsDetailsOpen(false);
+    if (isNarrowViewport) {
+      setActiveMobileTab('actions');
+    }
+  };
+
+  const messageLog = (
+    <MessageLogPane
+      messages={messages}
+      onSelectMessage={handleMessageSelect}
+      onClearMessages={clearMessages}
+    />
+  );
+
+  const actions = (
+    <DispatchForm
+      commandType={commandType}
+      commandPayload={commandPayload}
+      flows={flows}
+      flowRuns={flowRuns}
+      hasRunningFlow={hasRunningFlow}
+      presets={presets}
+      canDispatch={canDispatch}
+      onRunFlow={runFlow}
+      onStopFlow={stopFlow}
+      onCommandTypeChange={setCommandType}
+      onCommandPayloadChange={setCommandPayload}
+      onApplyPreset={applyPreset}
+      onReset={resetForm}
+      onSubmit={handleDispatch}
+    />
+  );
+
+  const devtools = isNarrowViewport ? (
+    <Tabs
+      className="dev-host-mobile-tabs"
+      value={activeMobileTab}
+      onValueChange={(value) => setActiveMobileTab(value as MobileDevtoolsTab)}
+    >
+      <Tabs.List
+        className="dev-host-mobile-tab-list"
+        aria-label="DevTools sections"
+      >
+        <Tabs.Tab value="log">Log</Tabs.Tab>
+        <Tabs.Tab value="actions">Actions</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="log" className="dev-host-mobile-tab-panel">
+        {isDetailsOpen && selectedMessage ? (
+          <MessageDetailsPane
+            selectedMessage={selectedMessage}
+            onClose={() => setIsDetailsOpen(false)}
+            onUseMessage={useMessage}
+          />
+        ) : (
+          messageLog
+        )}
+      </Tabs.Panel>
+      <Tabs.Panel value="actions" className="dev-host-mobile-tab-panel">
+        {actions}
+      </Tabs.Panel>
+    </Tabs>
+  ) : (
+    <Split direction="horizontal" className="dev-host-devtools">
+      <Split.Pane minSize={35}>
+        {isDetailsOpen && selectedMessage ? (
+          <Split direction="horizontal">
+            <Split.Pane minSize={55}>{messageLog}</Split.Pane>
+            <Split.Handle />
+            <Split.Pane defaultSize={30} minSize={20}>
+              <MessageDetailsPane
+                selectedMessage={selectedMessage}
+                onClose={() => setIsDetailsOpen(false)}
+                onUseMessage={useMessage}
+              />
+            </Split.Pane>
+          </Split>
+        ) : (
+          messageLog
+        )}
+      </Split.Pane>
+      <Split.Handle />
+      <Split.Pane defaultSize={28} minSize={20}>
+        {actions}
+      </Split.Pane>
+    </Split>
+  );
+
+  return (
+    <PluginShell className="dev-host">
+      <PluginHeader className="dev-host-header">
+        <div className="dev-host-header-title">
+          <PluginHeader.Title>Rozenite Dev Host</PluginHeader.Title>
+          <PluginHeader.Subtitle
+            className="dev-host-header-subtitle"
+            title={panelDescription}
+          >
+            {packageName}
+          </PluginHeader.Subtitle>
+        </div>
+        <PluginHeader.Actions>
+          <PluginHeader.ThemeSwitcher />
+          <PanelTabs
+            panels={panels}
+            activeSource={activeSource}
+            onValueChange={selectPanel}
+          />
+        </PluginHeader.Actions>
+      </PluginHeader>
+
+      <PluginShell.Body className="dev-host-body">
+        <Split
+          direction="vertical"
+          className="dev-host-main-split"
+          autoSaveId="dev-host"
+        >
+          <Split.Pane
+            defaultSize={64}
+            minSize={30}
+            className="dev-host-preview"
+          >
+            {panels.length === 0 ? (
+              <div className="flex h-full items-center justify-center p-8 text-center text-sm text-muted-foreground">
+                No panels were defined in rozenite.config.ts.
+              </div>
+            ) : (
+              <iframe
+                key={activeSource}
+                ref={iframeRef}
+                title={activeLabel || 'Rozenite panel preview'}
+                src={activeSource}
+                className="dev-host-iframe"
+                onLoad={() => setIframeLoadNonce((value) => value + 1)}
+              />
+            )}
+          </Split.Pane>
+          <Split.Handle />
+          <Split.Pane defaultSize={36} minSize={25}>
+            {devtools}
+          </Split.Pane>
+        </Split>
+      </PluginShell.Body>
+    </PluginShell>
+  );
+};

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

@@ -0,0 +1,155 @@
+import { Button, Input, Select, Tabs, Textarea } from '@rozenite/ui';
+import { RotateCcw, Send } from 'lucide-react';
+import { useState, type FormEvent } from 'react';
+import type {
+  DevHostFlowEntry,
+  DevHostFlowRunState,
+  DevHostPresetEntry,
+} from '../types.js';
+import { FlowList } from './FlowList.js';
+
+type DispatchFormProps = {
+  commandType: string;
+  commandPayload: string;
+  flows: DevHostFlowEntry[];
+  flowRuns: DevHostFlowRunState[];
+  hasRunningFlow: (flowName: string) => boolean;
+  presets: DevHostPresetEntry[];
+  canDispatch: boolean;
+  onRunFlow: (flow: DevHostFlowEntry) => void;
+  onStopFlow: (runId: string) => void;
+  onCommandTypeChange: (value: string) => void;
+  onCommandPayloadChange: (value: string) => void;
+  onApplyPreset: (preset: DevHostPresetEntry) => void;
+  onReset: () => void;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+};
+
+export const DispatchForm = ({
+  commandType,
+  commandPayload,
+  flows,
+  flowRuns,
+  hasRunningFlow,
+  presets,
+  canDispatch,
+  onRunFlow,
+  onStopFlow,
+  onCommandTypeChange,
+  onCommandPayloadChange,
+  onApplyPreset,
+  onReset,
+  onSubmit,
+}: DispatchFormProps) => {
+  const [activeTab, setActiveTab] = useState<'dispatch' | 'flows'>('dispatch');
+
+  return (
+    <section className="dev-host-pane">
+      <header className="dev-host-pane-header">
+        <h2 className="dev-host-pane-title">Actions</h2>
+      </header>
+
+      <Tabs
+        className="flex min-h-0 flex-1 flex-col"
+        value={activeTab}
+        onValueChange={(value) => setActiveTab(value as 'dispatch' | 'flows')}
+      >
+        <div className="dev-host-tabs-header">
+          <Tabs.List aria-label="Action modes">
+            <Tabs.Tab value="dispatch">Dispatch</Tabs.Tab>
+            <Tabs.Tab value="flows">Flows</Tabs.Tab>
+          </Tabs.List>
+
+          {activeTab === 'dispatch' ? (
+            <Select
+              value={null}
+              onValueChange={(value) => {
+                const preset = presets.find((item) => item.name === value);
+                if (preset) {
+                  onApplyPreset(preset);
+                }
+              }}
+            >
+              <Select.Trigger
+                className="w-auto"
+                aria-label={
+                  presets.length > 0 ? 'Open presets' : 'No presets available'
+                }
+                disabled={presets.length === 0}
+                title={presets.length > 0 ? 'Presets' : 'No presets available'}
+              >
+                <Select.Value>Presets</Select.Value>
+              </Select.Trigger>
+              <Select.Content align="end">
+                {presets.map((preset) => (
+                  <Select.Item key={preset.name} value={preset.name}>
+                    {preset.displayName}
+                  </Select.Item>
+                ))}
+              </Select.Content>
+            </Select>
+          ) : null}
+        </div>
+
+        <Tabs.Panel value="dispatch" className="dev-host-tab-panel">
+          <form className="dev-host-form" onSubmit={onSubmit}>
+            <label className="dev-host-field">
+              <span className="dev-host-label">Command</span>
+              <Input
+                value={commandType}
+                onChange={(event) =>
+                  onCommandTypeChange(event.currentTarget.value)
+                }
+                placeholder="get-snapshot"
+                spellCheck={false}
+              />
+            </label>
+
+            <label className="dev-host-field">
+              <span className="dev-host-label">Payload</span>
+              <Textarea
+                value={commandPayload}
+                onChange={(event) =>
+                  onCommandPayloadChange(event.currentTarget.value)
+                }
+                placeholder='{"example": true}'
+                spellCheck={false}
+              />
+            </label>
+
+            <div className="dev-host-actions">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={onReset}
+                aria-label="Reset dispatcher"
+                title="Reset dispatcher"
+              >
+                <RotateCcw />
+              </Button>
+              <Button
+                type="submit"
+                size="icon"
+                disabled={!canDispatch}
+                aria-label="Dispatch message"
+                title="Dispatch message"
+              >
+                <Send />
+              </Button>
+            </div>
+          </form>
+        </Tabs.Panel>
+
+        <Tabs.Panel value="flows" className="dev-host-tab-panel">
+          <FlowList
+            flows={flows}
+            flowRuns={flowRuns}
+            hasRunningFlow={hasRunningFlow}
+            onRunFlow={onRunFlow}
+            onStopFlow={onStopFlow}
+          />
+        </Tabs.Panel>
+      </Tabs>
+    </section>
+  );
+};

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

@@ -0,0 +1,122 @@
+import { Badge, Button, EmptyState } from '@rozenite/ui';
+import { Play, Square } from 'lucide-react';
+import { formatPayloadForCommandInput } from '../utils.js';
+import type { DevHostFlowEntry, DevHostFlowRunState } from '../types.js';
+
+type FlowListProps = {
+  flows: DevHostFlowEntry[];
+  flowRuns: DevHostFlowRunState[];
+  hasRunningFlow: (flowName: string) => boolean;
+  onRunFlow: (flow: DevHostFlowEntry) => void;
+  onStopFlow: (runId: string) => void;
+};
+
+const getStatusLabel = (status: DevHostFlowRunState['status']) => {
+  switch (status) {
+    case 'running':
+      return 'Running';
+    case 'succeeded':
+      return 'Completed';
+    case 'failed':
+      return 'Failed';
+    case 'aborted':
+      return 'Stopped';
+  }
+};
+
+export const FlowList = ({
+  flows,
+  flowRuns,
+  hasRunningFlow,
+  onRunFlow,
+  onStopFlow,
+}: FlowListProps) => {
+  if (flows.length === 0) {
+    return (
+      <EmptyState
+        className="h-full"
+        title="No flows configured"
+        description="Add flows to rozenite.config.ts to run them here."
+      />
+    );
+  }
+
+  return (
+    <div className="dev-host-flow-list">
+      <div className="dev-host-field">
+        <span className="dev-host-label">Available flows</span>
+        <div className="grid gap-2">
+          {flows.map((flow) => {
+            const isRunning = hasRunningFlow(flow.name);
+
+            return (
+              <Button
+                key={flow.name}
+                variant={isRunning ? 'secondary' : 'outline'}
+                className="dev-host-flow-button"
+                onClick={() => onRunFlow(flow)}
+                aria-label={`Run ${flow.displayName}`}
+              >
+                <span className="dev-host-flow-name">
+                  <Play />
+                  {flow.displayName}
+                  {flow.autoRun ? <Badge variant="outline">Auto</Badge> : null}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {isRunning ? 'Running' : 'Run'}
+                </span>
+              </Button>
+            );
+          })}
+        </div>
+      </div>
+
+      {flowRuns.length > 0 ? (
+        <div className="dev-host-field">
+          <span className="dev-host-label">Flow runs</span>
+          <div className="dev-host-flow-runs">
+            {flowRuns.map((flowRun) => (
+              <div
+                key={flowRun.id}
+                className="dev-host-flow-state"
+                data-status={flowRun.status}
+              >
+                <div className="dev-host-flow-state-header">
+                  <span className="dev-host-flow-title">
+                    {flowRun.flowDisplayName}
+                    {flowRun.autoRun ? (
+                      <Badge variant="outline">Auto</Badge>
+                    ) : null}
+                  </span>
+                  {flowRun.status === 'running' ? (
+                    <Button
+                      variant="ghost"
+                      size="compact"
+                      onClick={() => onStopFlow(flowRun.id)}
+                    >
+                      <Square />
+                      Stop
+                    </Button>
+                  ) : null}
+                </div>
+                <span className="text-xs text-muted-foreground">
+                  {getStatusLabel(flowRun.status)}
+                </span>
+                {flowRun.error ? (
+                  <div className="dev-host-flow-state-error">
+                    {flowRun.error}
+                  </div>
+                ) : null}
+                {flowRun.result != null ? (
+                  <pre className="dev-host-flow-state-result">
+                    {formatPayloadForCommandInput(flowRun.result)}
+                  </pre>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};