@rozenite/vite-plugin 1.8.1 → 1.9.0

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

@@ -0,0 +1,32 @@
+import { JSONTree } from 'react-json-tree';
+import { jsonTreeTheme } from '../constants.js';
+import { isJsonTreeData } from '../utils.js';
+
+type MessagePayloadDetailProps = {
+  payload: unknown;
+};
+
+export const MessagePayloadDetail = ({ payload }: MessagePayloadDetailProps) => {
+  if (typeof payload === 'string') {
+    return <pre className="rz-detail-pre rz-detail-mono">{payload}</pre>;
+  }
+
+  if (typeof payload === 'number' || typeof payload === 'boolean' || payload == null) {
+    return <pre className="rz-detail-pre rz-detail-mono">{String(payload)}</pre>;
+  }
+
+  if (isJsonTreeData(payload)) {
+    return (
+      <div className="rz-detail-json-tree">
+        <JSONTree
+          data={payload}
+          theme={jsonTreeTheme}
+          invertTheme={false}
+          shouldExpandNodeInitially={(keyPath) => keyPath.length <= 2}
+        />
+      </div>
+    );
+  }
+
+  return <pre className="rz-detail-pre rz-detail-mono">{String(payload)}</pre>;
+};

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

@@ -0,0 +1,22 @@
+import type { DevHostPanelEntry } from '../types.js';
+import { Tabs, TabsList, TabsTrigger } from './ui/Tabs.js';
+
+type PanelTabsProps = {
+  panels: DevHostPanelEntry[];
+  activeSource: string;
+  onValueChange: (value: string) => void;
+};
+
+export const PanelTabs = ({ panels, activeSource, onValueChange }: PanelTabsProps) => {
+  return (
+    <Tabs className="rz-tabs-root" value={activeSource} onValueChange={onValueChange}>
+      <TabsList aria-label="Plugin panels">
+        {panels.map((panel) => (
+          <TabsTrigger key={panel.source} value={panel.source}>
+            {panel.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </Tabs>
+  );
+};

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

@@ -0,0 +1,33 @@
+import type { PointerEvent as ReactPointerEvent } from 'react';
+import { cn } from '../utils.js';
+
+type ResizeHandleProps = {
+  className?: string;
+  isDragging: boolean;
+  isHidden?: boolean;
+  orientation: 'horizontal' | 'vertical';
+  label: string;
+  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+};
+
+export const ResizeHandle = ({
+  className,
+  isDragging,
+  isHidden = false,
+  orientation,
+  label,
+  onPointerDown,
+}: ResizeHandleProps) => {
+  return (
+    <div
+      className={cn(className)}
+      data-dragging={isDragging}
+      data-hidden={isHidden}
+      aria-hidden={isHidden}
+      onPointerDown={onPointerDown}
+      role="separator"
+      aria-orientation={orientation}
+      aria-label={label}
+    />
+  );
+};

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

@@ -0,0 +1,27 @@
+export const ClearIcon = () => {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+      <path
+        d="M2.5 3.5H11.5M5.5 1.75H8.5M4 3.5V10.5C4 10.9641 4.18437 11.4092 4.51256 11.7374C4.84075 12.0656 5.28587 12.25 5.75 12.25H8.25C8.71413 12.25 9.15925 12.0656 9.48744 11.7374C9.81563 11.4092 10 10.9641 10 10.5V3.5M5.75 5.5V9.625M8.25 5.5V9.625"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export const SendIcon = () => {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+      <path
+        d="M12.25 1.75L6.75 7.25M12.25 1.75L8.75 12.25L6.75 7.25M12.25 1.75L1.75 5.25L6.75 7.25"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/dev-host/components/ui/ScrollArea.tsx

@@ -0,0 +1,46 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type ReactNode,
+} from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from '../../utils.js';
+
+type ScrollAreaProps = ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+  children: ReactNode;
+};
+
+const ScrollBar = forwardRef<
+  ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, ...props }, ref) => {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      ref={ref}
+      className={cn('rz-scrollbar', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb className="rz-scrollbar-thumb" />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+});
+
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export const ScrollArea = forwardRef<
+  ElementRef<typeof ScrollAreaPrimitive.Root>,
+  ScrollAreaProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <ScrollAreaPrimitive.Root ref={ref} className={cn('rz-scroll-area', className)} {...props}>
+      <ScrollAreaPrimitive.Viewport className="rz-scroll-viewport">
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar orientation="vertical" />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+});
+
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;

package/src/dev-host/components/ui/Tabs.tsx

@@ -0,0 +1,33 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+} from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '../../utils.js';
+
+export const Tabs = TabsPrimitive.Root;
+
+export const TabsList = forwardRef<
+  ElementRef<typeof TabsPrimitive.List>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => {
+  return <TabsPrimitive.List ref={ref} className={cn('rz-tabs-list', className)} {...props} />;
+});
+
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+export const TabsTrigger = forwardRef<
+  ElementRef<typeof TabsPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => {
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn('rz-tabs-trigger', className)}
+      {...props}
+    />
+  );
+});
+
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;

package/src/dev-host/constants.ts

@@ -0,0 +1,29 @@
+export const DEV_HOST_STATE_ELEMENT_ID = '__rozenite-dev-host__';
+
+export const DEFAULT_DEVTOOLS_HEIGHT = 288;
+export const MIN_DEVTOOLS_HEIGHT = 180;
+export const MIN_IFRAME_HEIGHT = 220;
+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;
+
+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/dev-host.html

@@ -0,0 +1,11 @@
+<!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>
+  </body>
+</html>

package/src/dev-host/index.tsx

@@ -0,0 +1,19 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App.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();
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <App {...state} />
+  </StrictMode>,
+);