@rozenite/vite-plugin 2.0.0 → 2.1.0

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,yBAAyB,GACpC,WAAW,MAAM,EACjB,UAAU,MAAM,KACf,MAAM,GAAG,IAYX,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,CAAC,EAAE,IAAI,MAAM,CAAC,KAAG,CAAC,MAAM,CAAC,CAU7C,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,yBAAyB,GAAI,WAAW,MAAM,EAAE,UAAU,MAAM,KAAG,MAAM,GAAG,IAYxF,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,CAAC,EAAE,IAAI,MAAM,CAAC,KAAG,CAAC,MAAM,CAAC,CAU7C,CAAC"}

package/package.json

@@ -1,35 +1,32 @@
 {
   "name": "@rozenite/vite-plugin",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Vite plugin for developing React Native DevTools plugins with hot reload and development tools",
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "src",
-    "templates"
-  ],
   "keywords": [
-    "react-native",
     "devtools",
-    "vite",
-    "plugin"
+    "plugin",
+    "react-native",
+    "vite"
   ],
   "homepage": "https://github.com/callstackincubator/rozenite#readme",
   "bugs": {
     "url": "https://github.com/callstackincubator/rozenite/issues"
   },
+  "license": "MIT",
+  "author": "Szymon Chmal <szymon.chmal@callstack.com>",
   "repository": {
     "type": "git",
     "url": "https://github.com/callstackincubator/rozenite.git"
   },
-  "author": "Szymon Chmal <szymon.chmal@callstack.com>",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
+  "files": [
+    "dist",
+    "src",
+    "templates"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -39,20 +36,18 @@
       "default": "./dist/index.cjs"
     }
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
     "@microsoft/api-extractor": "^7.50.1",
     "@tailwindcss/vite": "4.2.2",
     "@vitejs/plugin-react": "^4.3.4",
     "ejs": "^3.1.9",
+    "lucide-react": "^0.263.1",
     "vite-plugin-dts": "~4.5.0",
     "vite-plugin-react-native-web": "^2.1.1",
-    "lucide-react": "^0.263.1",
-    "@rozenite/ui": "2.0.0"
-  },
-  "peerDependencies": {
-    "react": "*",
-    "react-dom": "*",
-    "vite": "^7.3.1"
+    "@rozenite/ui": "2.1.0"
   },
   "devDependencies": {
     "@types/ejs": "^3.1.5",
@@ -61,6 +56,11 @@
     "react": "19.2.3",
     "react-dom": "19.2.3"
   },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "vite": "^7.3.1"
+  },
   "engines": {
     "node": ">=20"
   },

package/src/bundle-dts.ts

@@ -1,10 +1,6 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import {
-  Extractor,
-  ExtractorConfig,
-  ExtractorLogLevel,
-} from '@microsoft/api-extractor';
+import { Extractor, ExtractorConfig, ExtractorLogLevel } from '@microsoft/api-extractor';
 
 type Target = 'react-native' | 'metro' | 'sdk';
 
@@ -37,16 +33,11 @@ export const normalizeRolledUpDeclarations = (content: string) => {
     );
 };
 
-export const bundleTargetDeclarations = async (
-  projectRoot: string,
-  target: Target,
-) => {
+export const bundleTargetDeclarations = async (projectRoot: string, target: Target) => {
   const targetRoot = path.join(projectRoot, 'dist', target);
   const publicEntryPath = path.join(targetRoot, 'index.d.ts');
   const bundleEntryPath =
-    target === 'sdk'
-      ? path.join(targetRoot, `${target}.d.ts`)
-      : publicEntryPath;
+    target === 'sdk' ? path.join(targetRoot, `${target}.d.ts`) : publicEntryPath;
   const entryPath = await fs
     .access(bundleEntryPath)
     .then(() => bundleEntryPath)

package/src/client-plugin.ts

@@ -7,10 +7,7 @@ import { fileURLToPath } from 'node:url';
 import { normalizePath } from 'vite';
 import { loadConfig, RozeniteConfig } from './load-config.js';
 import { getPackageJSON } from './package-json.js';
-import {
-  DEV_HOST_CONFIG_GLOBAL_KEY,
-  DEV_HOST_STATE_ELEMENT_ID,
-} from './dev-host/constants.js';
+import { DEV_HOST_CONFIG_GLOBAL_KEY, DEV_HOST_STATE_ELEMENT_ID } from './dev-host/constants.js';
 import {
   getBuiltDevHostAssets,
   getDevHostHtmlTemplate,
@@ -46,12 +43,7 @@ type DevHostState = {
   panels: DevHostPanelEntry[];
 };
 
-const TEMPLATES_DIR = path.resolve(
-  fileURLToPath(import.meta.url),
-  '..',
-  '..',
-  'templates',
-);
+const TEMPLATES_DIR = path.resolve(fileURLToPath(import.meta.url), '..', '..', 'templates');
 
 const PACKAGE_DIR = path.resolve(fileURLToPath(import.meta.url), '..', '..');
 
@@ -178,9 +170,7 @@ export const rozeniteClientPlugin = (): Plugin => {
 
       config.server ??= {};
       config.server.open =
-        config.server.open === true
-          ? DEV_HOST_ROUTE
-          : (config.server.open ?? DEV_HOST_ROUTE);
+        config.server.open === true ? DEV_HOST_ROUTE : (config.server.open ?? DEV_HOST_ROUTE);
       // Keep in sync with `DEV_SERVER_URL` in packages/runtime/src/dev-mode.ts
       config.server.port = 8888;
 
@@ -192,10 +182,7 @@ export const rozeniteClientPlugin = (): Plugin => {
       config.build.rollupOptions.input = {
         ...(config.build.rollupOptions.input as Record<string, string>),
         ...Object.fromEntries(
-          panels.map((panel) => [
-            panel.name,
-            `${DEVTOOLS_DIR}/${panel.htmlFile}`,
-          ]),
+          panels.map((panel) => [panel.name, `${DEVTOOLS_DIR}/${panel.htmlFile}`]),
         ),
       };
       config.build.rollupOptions.output = {
@@ -213,9 +200,7 @@ export const rozeniteClientPlugin = (): Plugin => {
         return devConfigModuleId;
       }
 
-      const isPanel = getPanels().some(
-        (panel) => `${DEVTOOLS_DIR}/${panel.htmlFile}` === id,
-      );
+      const isPanel = getPanels().some((panel) => `${DEVTOOLS_DIR}/${panel.htmlFile}` === id);
 
       if (isPanel) {
         return id;
@@ -231,9 +216,7 @@ export const rozeniteClientPlugin = (): Plugin => {
         return devConfigModule;
       }
 
-      const panel = getPanels().find(
-        (panel) => `${DEVTOOLS_DIR}/${panel.htmlFile}` === id,
-      );
+      const panel = getPanels().find((panel) => `${DEVTOOLS_DIR}/${panel.htmlFile}` === id);
 
       if (panel) {
         return generatePanelHtmlContent(panel);
@@ -287,14 +270,8 @@ export const rozeniteClientPlugin = (): Plugin => {
 
       server.middlewares.use((req, res, next) => {
         res.setHeader('Access-Control-Allow-Origin', '*');
-        res.setHeader(
-          'Access-Control-Allow-Methods',
-          'GET, POST, PUT, DELETE, OPTIONS',
-        );
-        res.setHeader(
-          'Access-Control-Allow-Headers',
-          'Content-Type, Authorization',
-        );
+        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+        res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
 
         if (req.method === 'OPTIONS') {
           res.statusCode = 200;
@@ -336,9 +313,7 @@ export const rozeniteClientPlugin = (): Plugin => {
           return;
         }
 
-        const panel = panels.find(
-          (panel) => `/${DEVTOOLS_DIR}/` + panel.htmlFile === url,
-        );
+        const panel = panels.find((panel) => `/${DEVTOOLS_DIR}/` + panel.htmlFile === url);
 
         if (panel) {
           const htmlContent = generatePanelHtmlContent(panel);

package/src/dev-config-module.ts

@@ -18,10 +18,7 @@ export const resolveRozeniteDevConfigModuleId = (id: string) => {
   return null;
 };
 
-export const loadRozeniteDevConfigModule = (
-  id: string,
-  projectRoot: string,
-) => {
+export const loadRozeniteDevConfigModule = (id: string, projectRoot: string) => {
   if (id !== RESOLVED_ROZENITE_DEV_CONFIG_MODULE_ID) {
     return null;
   }

package/src/dev-host/App.tsx

@@ -31,9 +31,7 @@ type AppProps = DevHostState & {
 type MobileDevtoolsTab = 'log' | 'actions';
 
 const useNarrowViewport = () => {
-  const [isNarrow, setIsNarrow] = useState(
-    () => window.matchMedia('(max-width: 960px)').matches,
-  );
+  const [isNarrow, setIsNarrow] = useState(() => window.matchMedia('(max-width: 960px)').matches);
 
   useEffect(() => {
     const mediaQuery = window.matchMedia('(max-width: 960px)');
@@ -50,50 +48,34 @@ const useNarrowViewport = () => {
   return isNarrow;
 };
 
-export const App = ({
-  packageName,
-  packageDescription,
-  panels,
-  flows,
-  presets,
-}: AppProps) => {
+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 [selectedMessageId, setSelectedMessageId] = useState<string | null>(null);
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-  const [activeMobileTab, setActiveMobileTab] =
-    useState<MobileDevtoolsTab>('log');
+  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 { 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 selectedMessage = messages.find((message) => message.id === selectedMessageId) ?? null;
   const panelDescription = packageDescription.trim();
   const trimmedCommandType = commandType.trim();
   const trimmedCommandPayload = commandPayload.trim();
@@ -266,10 +248,7 @@ export const App = ({
       value={activeMobileTab}
       onValueChange={(value) => setActiveMobileTab(value as MobileDevtoolsTab)}
     >
-      <Tabs.List
-        className="dev-host-mobile-tab-list"
-        aria-label="DevTools sections"
-      >
+      <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>
@@ -319,34 +298,19 @@ export const App = ({
       <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}
-          >
+          <PluginHeader.Subtitle className="dev-host-header-subtitle" title={panelDescription}>
             {packageName}
           </PluginHeader.Subtitle>
         </div>
         <PluginHeader.Actions>
           <PluginHeader.ThemeSwitcher />
-          <PanelTabs
-            panels={panels}
-            activeSource={activeSource}
-            onValueChange={selectPanel}
-          />
+          <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"
-          >
+        <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.

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

@@ -1,11 +1,7 @@
 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 type { DevHostFlowEntry, DevHostFlowRunState, DevHostPresetEntry } from '../types.js';
 import { FlowList } from './FlowList.js';
 
 type DispatchFormProps = {
@@ -72,9 +68,7 @@ export const DispatchForm = ({
             >
               <Select.Trigger
                 className="w-auto"
-                aria-label={
-                  presets.length > 0 ? 'Open presets' : 'No presets available'
-                }
+                aria-label={presets.length > 0 ? 'Open presets' : 'No presets available'}
                 disabled={presets.length === 0}
                 title={presets.length > 0 ? 'Presets' : 'No presets available'}
               >
@@ -97,9 +91,7 @@ export const DispatchForm = ({
               <span className="dev-host-label">Command</span>
               <Input
                 value={commandType}
-                onChange={(event) =>
-                  onCommandTypeChange(event.currentTarget.value)
-                }
+                onChange={(event) => onCommandTypeChange(event.currentTarget.value)}
                 placeholder="get-snapshot"
                 spellCheck={false}
               />
@@ -109,9 +101,7 @@ export const DispatchForm = ({
               <span className="dev-host-label">Payload</span>
               <Textarea
                 value={commandPayload}
-                onChange={(event) =>
-                  onCommandPayloadChange(event.currentTarget.value)
-                }
+                onChange={(event) => onCommandPayloadChange(event.currentTarget.value)}
                 placeholder='{"example": true}'
                 spellCheck={false}
               />

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

@@ -76,24 +76,14 @@ export const FlowList = ({
           <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 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}
+                    {flowRun.autoRun ? <Badge variant="outline">Auto</Badge> : null}
                   </span>
                   {flowRun.status === 'running' ? (
-                    <Button
-                      variant="ghost"
-                      size="compact"
-                      onClick={() => onStopFlow(flowRun.id)}
-                    >
+                    <Button variant="ghost" size="compact" onClick={() => onStopFlow(flowRun.id)}>
                       <Square />
                       Stop
                     </Button>
@@ -103,9 +93,7 @@ export const FlowList = ({
                   {getStatusLabel(flowRun.status)}
                 </span>
                 {flowRun.error ? (
-                  <div className="dev-host-flow-state-error">
-                    {flowRun.error}
-                  </div>
+                  <div className="dev-host-flow-state-error">{flowRun.error}</div>
                 ) : null}
                 {flowRun.result != null ? (
                   <pre className="dev-host-flow-state-result">

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

@@ -44,9 +44,7 @@ export const MessageDetailsPane = ({
         <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 className="dev-host-detail-value">{formatMessageDate(selectedMessage.date)}</div>
           </div>
           <div className="dev-host-detail-section">
             <span className="dev-host-label">Type</span>
@@ -55,12 +53,8 @@ export const MessageDetailsPane = ({
           <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}
-                />
+              {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)}

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

@@ -27,9 +27,7 @@ export const MessageLogPane = ({
 
           return (
             <span
-              className={
-                isSent ? 'dev-host-direction-in' : 'dev-host-direction-out'
-              }
+              className={isSent ? 'dev-host-direction-in' : 'dev-host-direction-out'}
               aria-label={isSent ? 'Sent message' : 'Received message'}
               title={isSent ? 'Sent message' : 'Received message'}
             >
@@ -42,17 +40,13 @@ export const MessageLogPane = ({
         accessorKey: 'date',
         header: 'Date',
         cell: ({ row }) => (
-          <span className="text-muted-foreground">
-            {formatMessageTableDate(row.original.date)}
-          </span>
+          <span className="text-muted-foreground">{formatMessageTableDate(row.original.date)}</span>
         ),
       },
       {
         accessorKey: 'type',
         header: 'Type',
-        cell: ({ getValue }) => (
-          <span className="font-medium">{getValue<string>()}</span>
-        ),
+        cell: ({ getValue }) => <span className="font-medium">{getValue<string>()}</span>,
       },
       {
         id: 'payload',
@@ -84,10 +78,7 @@ export const MessageLogPane = ({
         </Button>
       </header>
 
-      <ScrollArea
-        className="dev-host-scroll"
-        viewportClassName="dev-host-scroll-viewport"
-      >
+      <ScrollArea className="dev-host-scroll" viewportClassName="dev-host-scroll-viewport">
         <DataTable
           className="dev-host-message-table"
           columns={columns}

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

@@ -7,11 +7,7 @@ type PanelTabsProps = {
   onValueChange: (value: string) => void;
 };
 
-export const PanelTabs = ({
-  panels,
-  activeSource,
-  onValueChange,
-}: PanelTabsProps) => {
+export const PanelTabs = ({ panels, activeSource, onValueChange }: PanelTabsProps) => {
   if (panels.length === 0) {
     return null;
   }
@@ -19,14 +15,8 @@ export const PanelTabs = ({
   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={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">

package/src/dev-host/config.ts

@@ -19,9 +19,7 @@ const getEntryDisplayName = (value: unknown, fallback: string) => {
 };
 
 const getDevHostConfig = () => {
-  const value = (window as unknown as Record<string, unknown>)[
-    DEV_HOST_CONFIG_GLOBAL_KEY
-  ];
+  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 };
@@ -30,9 +28,7 @@ const getDevHostConfig = () => {
   return value as { presets?: unknown; flows?: unknown };
 };
 
-const isDevHostPresetSource = (
-  value: unknown,
-): value is DevHostPresetSource => {
+const isDevHostPresetSource = (value: unknown): value is DevHostPresetSource => {
   return (
     typeof value === 'object' &&
     value !== null &&

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

@@ -1,14 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
-import type {
-  DevFlowContext,
-  DevFlowMessage,
-  DevFlowMessageMatcher,
-} from '../load-config.js';
-import type {
-  DevHostFlowEntry,
-  DevHostFlowRunState,
-  MessageEntry,
-} from './types.js';
+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;
@@ -44,10 +36,7 @@ const toFlowMessage = (message: MessageEntry): DevFlowMessage => {
   };
 };
 
-const matchesMessage = (
-  message: DevFlowMessage,
-  matcher?: DevFlowMessageMatcher,
-) => {
+const matchesMessage = (message: DevFlowMessage, matcher?: DevFlowMessageMatcher) => {
   if (!matcher) {
     return true;
   }
@@ -219,9 +208,7 @@ export const useFlowRunner = ({ sendMessage }: FlowRunnerOptions) => {
             timeoutId = window.setTimeout(() => {
               cleanup();
               reject(
-                new Error(
-                  `Timed out waiting for a matching message after ${options.timeoutMs}ms.`,
-                ),
+                new Error(`Timed out waiting for a matching message after ${options.timeoutMs}ms.`),
               );
             }, options.timeoutMs);
           }
@@ -252,10 +239,7 @@ export const useFlowRunner = ({ sendMessage }: FlowRunnerOptions) => {
 
     const updateRunState = (
       nextState: Partial<
-        Omit<
-          DevHostFlowRunState,
-          'id' | 'flowName' | 'flowDisplayName' | 'autoRun'
-        >
+        Omit<DevHostFlowRunState, 'id' | 'flowName' | 'flowDisplayName' | 'autoRun'>
       >,
     ) => {
       setFlowRuns((current) =>
@@ -302,9 +286,7 @@ export const useFlowRunner = ({ sendMessage }: FlowRunnerOptions) => {
   };
 
   const hasRunningFlow = (flowName: string) => {
-    return flowRuns.some(
-      (run) => run.flowName === flowName && run.status === 'running',
-    );
+    return flowRuns.some((run) => run.flowName === flowName && run.status === 'running');
   };
 
   return {

package/src/dev-host/server.ts

@@ -33,9 +33,7 @@ export const getDevHostSourceEntryFile = (packageDir: string) => {
   return path.join(packageDir, 'src', 'dev-host', 'main.tsx');
 };
 
-export const getBuiltDevHostAssets = (
-  packageDir: string,
-): DevHostBuiltAssets | null => {
+export const getBuiltDevHostAssets = (packageDir: string): DevHostBuiltAssets | null => {
   const devHostDistDir = path.join(packageDir, 'dist', 'dev-host');
   const manifestPath = path.join(devHostDistDir, 'manifest.json');
 
@@ -43,15 +41,11 @@ export const getBuiltDevHostAssets = (
     return null;
   }
 
-  const manifest = JSON.parse(
-    fs.readFileSync(manifestPath, 'utf8'),
-  ) as DevHostBuildManifest;
+  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.`,
-    );
+    throw new Error(`Missing ${DEV_HOST_BUILD_ENTRY_KEY} entry in dev host manifest.`);
   }
 
   return {