@rozenite/vite-plugin 1.8.1 → 1.9.0

package/src/dev-host/App.tsx

@@ -0,0 +1,403 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type FormEvent,
+  type PointerEvent as ReactPointerEvent,
+} from 'react';
+import {
+  DEFAULT_COMMAND_WIDTH,
+  DEFAULT_DEVTOOLS_HEIGHT,
+  DETAILS_PANEL_WIDTH,
+  MIN_COMMAND_WIDTH,
+  MIN_DETAILS_WIDTH,
+  MIN_DEVTOOLS_HEIGHT,
+  MIN_IFRAME_HEIGHT,
+  SPLITTER_SIZE,
+} from './constants.js';
+import type {
+  DevHostPanelEntry,
+  DevHostState,
+  MessageEntry,
+  ResizeHandleId,
+  ResizeSession,
+} from './types.js';
+import { clamp, createMessageEntry, 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 { ResizeHandle } from './components/ResizeHandle.js';
+
+type CSSVariables = CSSProperties & Record<`--${string}`, string>;
+
+const getViewportMatch = () => {
+  return window.matchMedia('(max-width: 960px)').matches;
+};
+
+export const App = ({ packageName, packageDescription, panels }: DevHostState) => {
+  const [activePanel, setActivePanel] = useState<DevHostPanelEntry | null>(() => {
+    return 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 [devToolsHeight, setDevToolsHeight] = useState(DEFAULT_DEVTOOLS_HEIGHT);
+  const [commandWidth, setCommandWidth] = useState(DEFAULT_COMMAND_WIDTH);
+  const [detailsWidth, setDetailsWidth] = useState(DETAILS_PANEL_WIDTH);
+  const [activeResizeHandle, setActiveResizeHandle] = useState<ResizeHandleId | null>(null);
+  const [isNarrowViewport, setIsNarrowViewport] = useState(getViewportMatch);
+  const workspaceRef = useRef<HTMLElement | null>(null);
+  const logWorkspaceRef = useRef<HTMLDivElement | null>(null);
+  const devtoolsRef = useRef<HTMLElement | null>(null);
+  const resizeSessionRef = useRef<ResizeSession | null>(null);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  const activeSource = activePanel?.source ?? '';
+  const activeLabel = activePanel?.label ?? '';
+  const emptyState = panels.length === 0;
+  const selectedMessage = messages.find((message) => message.id === selectedMessageId) ?? null;
+  const trimmedCommandType = commandType.trim();
+  const trimmedCommandPayload = commandPayload.trim();
+  const hasCommandType = trimmedCommandType.length > 0;
+  const hasValidCommandPayload = (() => {
+    if (!trimmedCommandPayload) {
+      return false;
+    }
+
+    try {
+      JSON.parse(commandPayload);
+      return true;
+    } catch {
+      return false;
+    }
+  })();
+  const canDispatch = hasCommandType && hasValidCommandPayload;
+  const panelDescription = packageDescription.trim();
+
+  useEffect(() => {
+    document.title = `${packageName} Dev Host`;
+  }, [packageName]);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(max-width: 960px)');
+
+    const handleChange = (event: MediaQueryListEvent) => {
+      setIsNarrowViewport(event.matches);
+    };
+
+    setIsNarrowViewport(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+
+  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 appendMessage = (input: Omit<MessageEntry, 'id' | 'date'>) => {
+    const nextEntry = createMessageEntry(input);
+
+    setMessages((current) => [nextEntry, ...current]);
+    setSelectedMessageId(nextEntry.id);
+    setIsDetailsOpen(true);
+  };
+
+  useEffect(() => {
+    const handlePointerMove = (event: PointerEvent) => {
+      resizeSessionRef.current?.onMove(event);
+    };
+
+    const stopDragging = () => {
+      const session = resizeSessionRef.current;
+      if (!session) {
+        return;
+      }
+
+      if (session.element.hasPointerCapture(session.pointerId)) {
+        session.element.releasePointerCapture(session.pointerId);
+      }
+
+      resizeSessionRef.current = null;
+      setActiveResizeHandle(null);
+    };
+
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', stopDragging);
+    window.addEventListener('pointercancel', stopDragging);
+
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', stopDragging);
+      window.removeEventListener('pointercancel', stopDragging);
+    };
+  }, []);
+
+  const startResize = (
+    handleId: ResizeHandleId,
+    event: ReactPointerEvent<HTMLDivElement>,
+    onMove: (event: PointerEvent) => void,
+  ) => {
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    resizeSessionRef.current = {
+      handleId,
+      pointerId: event.pointerId,
+      element: event.currentTarget,
+      onMove,
+    };
+    setActiveResizeHandle(handleId);
+  };
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.source !== iframeRef.current?.contentWindow) {
+        return;
+      }
+
+      if (
+        typeof event.data !== 'object' ||
+        event.data === null ||
+        !('type' in event.data) ||
+        event.data.type !== 'rozenite-message' ||
+        !('payload' in event.data)
+      ) {
+        return;
+      }
+
+      const payload = event.data.payload;
+
+      if (!isPluginMessage(payload)) {
+        return;
+      }
+
+      appendMessage({
+        direction: 'out',
+        type: payload.type,
+        payload: payload.payload,
+      });
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+
+  const resetForm = () => {
+    setCommandType('');
+    setCommandPayload('');
+  };
+
+  const clearMessages = () => {
+    setMessages([]);
+    setSelectedMessageId(null);
+    setIsDetailsOpen(false);
+  };
+
+  const resizeDevtoolsHeight = (event: PointerEvent) => {
+    const workspace = workspaceRef.current;
+    if (!workspace) {
+      return;
+    }
+
+    const bounds = workspace.getBoundingClientRect();
+    const nextHeight = bounds.bottom - event.clientY;
+    const maxHeight = Math.max(MIN_DEVTOOLS_HEIGHT, bounds.height - MIN_IFRAME_HEIGHT - 12);
+
+    setDevToolsHeight(clamp(nextHeight, MIN_DEVTOOLS_HEIGHT, maxHeight));
+  };
+
+  const resizeCommandPane = (event: PointerEvent) => {
+    const devtools = devtoolsRef.current;
+    if (!devtools) {
+      return;
+    }
+
+    const bounds = devtools.getBoundingClientRect();
+    const nextWidth = isNarrowViewport
+      ? bounds.bottom - event.clientY
+      : bounds.right - event.clientX;
+    const maxWidth = Math.max(MIN_COMMAND_WIDTH, bounds.width - 280);
+
+    setCommandWidth(clamp(nextWidth, MIN_COMMAND_WIDTH, maxWidth));
+  };
+
+  const resizeDetailsPane = (event: PointerEvent) => {
+    const logWorkspace = logWorkspaceRef.current;
+    if (!logWorkspace || !isDetailsOpen || !selectedMessage) {
+      return;
+    }
+
+    const bounds = logWorkspace.getBoundingClientRect();
+    const nextWidth = isNarrowViewport
+      ? bounds.bottom - event.clientY
+      : bounds.right - event.clientX;
+    const maxWidth = Math.max(MIN_DETAILS_WIDTH, bounds.width - 280 - SPLITTER_SIZE);
+
+    setDetailsWidth(clamp(nextWidth, MIN_DETAILS_WIDTH, maxWidth));
+  };
+
+  const handleDispatch = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!canDispatch) {
+      return;
+    }
+
+    const type = trimmedCommandType;
+
+    let payload: unknown;
+
+    try {
+      payload = JSON.parse(commandPayload);
+    } catch (error) {
+      window.alert(
+        error instanceof Error
+          ? `Payload must be valid JSON. ${error.message}`
+          : 'Payload must be valid JSON.',
+      );
+      return;
+    }
+
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        pluginId: packageName,
+        type,
+        payload,
+      },
+      '*',
+    );
+
+    appendMessage({
+      direction: 'in',
+      type,
+      payload,
+    });
+
+    resetForm();
+  };
+
+  return (
+    <div className="rz-shell">
+      <header className="rz-topbar">
+        <div title={panelDescription || undefined}>
+          <PanelTabs panels={panels} activeSource={activeSource} onValueChange={selectPanel} />
+        </div>
+      </header>
+
+      <main
+        ref={workspaceRef}
+        className="rz-workspace"
+        style={{ '--rz-devtools-height': `${devToolsHeight}px` } as CSSVariables}
+      >
+        <section className="rz-card">
+          {emptyState ? (
+            <div className="rz-empty-state">No panels were defined in rozenite.config.ts.</div>
+          ) : (
+            <iframe
+              key={activeSource}
+              ref={iframeRef}
+              title={activeLabel || 'Rozenite panel preview'}
+              src={activeSource}
+              className="rz-iframe"
+              data-resizing={activeResizeHandle === 'devtools-height'}
+            />
+          )}
+        </section>
+
+        <ResizeHandle
+          className="rz-resize-handle"
+          isDragging={activeResizeHandle === 'devtools-height'}
+          orientation="horizontal"
+          label="Resize DevTools"
+          onPointerDown={(event) => startResize('devtools-height', event, resizeDevtoolsHeight)}
+        />
+
+        <section
+          ref={devtoolsRef}
+          className="rz-devtools"
+          style={
+            {
+              '--rz-command-width': `${commandWidth}px`,
+              '--rz-command-splitter-width': `${SPLITTER_SIZE}px`,
+            } as CSSVariables
+          }
+        >
+          <div
+            ref={logWorkspaceRef}
+            className="rz-log-workspace"
+            style={
+              {
+                '--rz-details-width':
+                  isDetailsOpen && selectedMessage ? `${detailsWidth}px` : '0px',
+                '--rz-details-splitter-width':
+                  isDetailsOpen && selectedMessage ? `${SPLITTER_SIZE}px` : '0px',
+              } as CSSVariables
+            }
+          >
+            <MessageLogPane
+              messages={messages}
+              selectedMessageId={selectedMessageId}
+              onSelectMessage={(messageId) => {
+                setSelectedMessageId(messageId);
+                setIsDetailsOpen(true);
+              }}
+              onClearMessages={clearMessages}
+            />
+
+            <MessageDetailsPane
+              selectedMessage={selectedMessage}
+              isOpen={isDetailsOpen}
+              isNarrowViewport={isNarrowViewport}
+              activeResizeHandle={activeResizeHandle}
+              onClose={() => setIsDetailsOpen(false)}
+              onUseMessage={(message) => {
+                const nextValues = getDispatcherValuesFromMessage(message);
+                setCommandType(nextValues.commandType);
+                setCommandPayload(nextValues.commandPayload);
+              }}
+              onResizeStart={(event) => startResize('details-width', event, resizeDetailsPane)}
+            />
+          </div>
+
+          <ResizeHandle
+            className="rz-column-resize-handle"
+            isDragging={activeResizeHandle === 'command-width'}
+            orientation={isNarrowViewport ? 'horizontal' : 'vertical'}
+            label="Resize command dispatcher"
+            onPointerDown={(event) => startResize('command-width', event, resizeCommandPane)}
+          />
+
+          <DispatchForm
+            commandType={commandType}
+            commandPayload={commandPayload}
+            canDispatch={canDispatch}
+            onCommandTypeChange={setCommandType}
+            onCommandPayloadChange={setCommandPayload}
+            onReset={resetForm}
+            onSubmit={handleDispatch}
+          />
+        </section>
+      </main>
+    </div>
+  );
+};

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

@@ -0,0 +1,87 @@
+import type { FormEvent } from 'react';
+import { ClearIcon, SendIcon } from './icons.js';
+import { ScrollArea } from './ui/ScrollArea.js';
+
+type DispatchFormProps = {
+  commandType: string;
+  commandPayload: string;
+  canDispatch: boolean;
+  onCommandTypeChange: (value: string) => void;
+  onCommandPayloadChange: (value: string) => void;
+  onReset: () => void;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+};
+
+export const DispatchForm = ({
+  commandType,
+  commandPayload,
+  canDispatch,
+  onCommandTypeChange,
+  onCommandPayloadChange,
+  onReset,
+  onSubmit,
+}: DispatchFormProps) => {
+  return (
+    <div className="rz-pane">
+      <div className="rz-sidebar">
+        <div className="rz-sidebar-header">
+          <div className="rz-sidebar-title">Dispatch Message</div>
+        </div>
+
+        <ScrollArea className="rz-sidebar-scroll">
+          <form className="rz-command-form" onSubmit={onSubmit}>
+            <div className="rz-field">
+              <label className="rz-label" htmlFor="command-type">
+                Command
+              </label>
+              <input
+                id="command-type"
+                className="rz-input"
+                value={commandType}
+                onChange={(event) => onCommandTypeChange(event.currentTarget.value)}
+                placeholder="get-snapshot"
+                spellCheck={false}
+              />
+            </div>
+
+            <div className="rz-field">
+              <label className="rz-label" htmlFor="command-payload">
+                Payload
+              </label>
+              <textarea
+                id="command-payload"
+                className="rz-textarea"
+                value={commandPayload}
+                onChange={(event) => onCommandPayloadChange(event.currentTarget.value)}
+                placeholder='{"example": true}'
+                spellCheck={false}
+              />
+            </div>
+
+            <div className="rz-button-row">
+              <button
+                type="button"
+                className="rz-sidebar-close"
+                aria-label="Reset dispatcher"
+                title="Reset dispatcher"
+                onClick={onReset}
+              >
+                <ClearIcon />
+              </button>
+
+              <button
+                type="submit"
+                className="rz-sidebar-close rz-sidebar-action-primary"
+                aria-label="Dispatch message"
+                title="Dispatch message"
+                disabled={!canDispatch}
+              >
+                <SendIcon />
+              </button>
+            </div>
+          </form>
+        </ScrollArea>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,108 @@
+import type { PointerEvent as ReactPointerEvent } from 'react';
+import type { MessageEntry, ResizeHandleId } from '../types.js';
+import { formatMessageDate, formatPayloadForCommandInput } from '../utils.js';
+import { MessagePayloadDetail } from './MessagePayloadDetail.js';
+import { ResizeHandle } from './ResizeHandle.js';
+import { ScrollArea } from './ui/ScrollArea.js';
+import { SendIcon } from './icons.js';
+
+type MessageDetailsPaneProps = {
+  selectedMessage: MessageEntry | null;
+  isOpen: boolean;
+  isNarrowViewport: boolean;
+  activeResizeHandle: ResizeHandleId | null;
+  onClose: () => void;
+  onUseMessage: (message: MessageEntry) => void;
+  onResizeStart: (event: ReactPointerEvent<HTMLDivElement>) => void;
+};
+
+export const MessageDetailsPane = ({
+  selectedMessage,
+  isOpen,
+  isNarrowViewport,
+  activeResizeHandle,
+  onClose,
+  onUseMessage,
+  onResizeStart,
+}: MessageDetailsPaneProps) => {
+  const isHidden = !isOpen || !selectedMessage;
+
+  return (
+    <>
+      <ResizeHandle
+        className="rz-column-resize-handle"
+        isDragging={activeResizeHandle === 'details-width'}
+        isHidden={isHidden}
+        orientation={isNarrowViewport ? 'horizontal' : 'vertical'}
+        label="Resize message details"
+        onPointerDown={onResizeStart}
+      />
+
+      <div className="rz-pane" data-hidden={isHidden} aria-hidden={isHidden}>
+        <div className="rz-sidebar">
+          <div className="rz-sidebar-header">
+            <div className="rz-sidebar-title">Message Details</div>
+            <div className="rz-header-actions">
+              <button
+                type="button"
+                className="rz-sidebar-close"
+                aria-label="Use message in dispatcher"
+                title="Use message in dispatcher"
+                onClick={() => {
+                  if (selectedMessage) {
+                    onUseMessage(selectedMessage);
+                  }
+                }}
+              >
+                <SendIcon />
+              </button>
+
+              <button
+                type="button"
+                className="rz-sidebar-close"
+                aria-label="Close message details"
+                onClick={onClose}
+              >
+                ×
+              </button>
+            </div>
+          </div>
+
+          <ScrollArea className="rz-sidebar-scroll">
+            {selectedMessage ? (
+              <div className="rz-message-detail">
+                <div className="rz-detail-section">
+                  <div className="rz-label">Date</div>
+                  <div className="rz-detail-value rz-detail-mono">
+                    {formatMessageDate(selectedMessage.date)}
+                  </div>
+                </div>
+
+                <div className="rz-detail-section">
+                  <div className="rz-label">Type</div>
+                  <div className="rz-detail-value rz-detail-mono">{selectedMessage.type}</div>
+                </div>
+
+                <div className="rz-detail-section">
+                  <div className="rz-label">Payload</div>
+                  <div className="rz-detail-payload">
+                    <MessagePayloadDetail payload={selectedMessage.payload} />
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="rz-empty-state">Select a message to inspect its details.</div>
+            )}
+          </ScrollArea>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export const getDispatcherValuesFromMessage = (message: MessageEntry) => {
+  return {
+    commandType: message.type,
+    commandPayload: formatPayloadForCommandInput(message.payload),
+  };
+};

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

@@ -0,0 +1,84 @@
+import type { MessageEntry } from '../types.js';
+import { cn, formatMessageTableDate, formatPayloadPreview } from '../utils.js';
+import { ScrollArea } from './ui/ScrollArea.js';
+import { ClearIcon } from './icons.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">
+            <button
+              type="button"
+              className="rz-sidebar-close"
+              onClick={onClearMessages}
+              disabled={messages.length === 0}
+              aria-label="Clear message log"
+              title="Clear message log"
+            >
+              <ClearIcon />
+            </button>
+          </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>
+
+                <div className="rz-message-cell rz-message-date">
+                  {formatMessageTableDate(message.date)}
+                </div>
+
+                <div className="rz-message-cell rz-message-type">{message.type}</div>
+
+                <pre className="rz-message-cell rz-message-preview">
+                  {formatPayloadPreview(message.payload)}
+                </pre>
+              </button>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  );
+};