@rozenite/vite-plugin 1.12.0 → 1.13.0

package/src/dev-host/config.ts

@@ -0,0 +1,107 @@
+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,31 @@
+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;
+
+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

@@ -0,0 +1,297 @@
+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,31 @@
+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) {
+  throw new Error('Rozenite dev host failed to initialize.');
+}
+
+const state = readDevHostState();
+const flows = getDevHostFlows();
+const presets = getDevHostPresets();
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <StyletronProvider value={styletron}>
+      <BaseProvider theme={DarkTheme}>
+        <App {...state} flows={flows} presets={presets} />
+      </BaseProvider>
+    </StyletronProvider>
+  </StrictMode>,
+);

package/src/dev-host/server.ts

@@ -0,0 +1,55 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+type DevHostManifestEntry = {
+  file?: string;
+  css?: string[];
+};
+
+type DevHostBuildManifest = Record<string, DevHostManifestEntry>;
+
+export type DevHostBuiltAssets = {
+  script: string;
+  styles: string[];
+};
+
+const DEV_HOST_BUILD_ENTRY_KEY = 'index.html';
+
+export const getDevHostHtmlTemplate = () => {
+  return `<!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>`;
+};
+
+export const getDevHostSourceEntryFile = (packageDir: string) => {
+  return path.join(packageDir, 'src', 'dev-host', 'main.tsx');
+};
+
+export const getBuiltDevHostAssets = (packageDir: string): DevHostBuiltAssets | null => {
+  const devHostDistDir = path.join(packageDir, 'dist', 'dev-host');
+  const manifestPath = path.join(devHostDistDir, 'manifest.json');
+
+  if (!fs.existsSync(manifestPath)) {
+    return null;
+  }
+
+  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.`);
+  }
+
+  return {
+    script: path.join(devHostDistDir, entry.file),
+    styles: (entry.css ?? []).map((file) => path.join(devHostDistDir, file)),
+  };
+};