@rozenite/vite-plugin 2.1.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/vite-plugin",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "Vite plugin for developing React Native DevTools plugins with hot reload and development tools",
   "keywords": [
     "devtools",
@@ -40,21 +40,21 @@
     "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",
-    "@rozenite/ui": "2.1.0"
+    "@rozenite/tools": "2.3.0",
+    "@rozenite/ui": "2.3.0"
   },
   "devDependencies": {
     "@types/ejs": "^3.1.5",
     "@types/react": "~19.2.3",
     "@types/react-dom": "~19.2.3",
     "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-dom": "19.2.3",
+    "vite-plugin-dts": "~4.5.0"
   },
   "peerDependencies": {
     "react": "*",

package/src/client-plugin.ts

@@ -5,7 +5,8 @@ import process from 'node:process';
 import ejs from 'ejs';
 import { fileURLToPath } from 'node:url';
 import { normalizePath } from 'vite';
-import { loadConfig, RozeniteConfig } from './load-config.js';
+import type { RozeniteIntegration } from '@rozenite/tools';
+import { loadConfig, resolveIntegrations, 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 {
@@ -88,6 +89,14 @@ export const rozeniteClientPlugin = (): Plugin => {
     }));
   };
 
+  // Derived at emission time from the loaded config, like `getManifestPanels`
+  // above, rather than cached into plugin state by the `config` hook: a
+  // cached value would silently emit a manifest claiming the plugin supports
+  // nothing if that hook were ever skipped or reordered.
+  const getManifestIntegrations = (): RozeniteIntegration[] => {
+    return resolveIntegrations(getRozeniteConfig());
+  };
+
   const getDevHostPanels = (): DevHostPanelEntry[] => {
     return getPanels().map((panel) => ({
       label: panel.label,
@@ -166,6 +175,10 @@ export const rozeniteClientPlugin = (): Plugin => {
       }
 
       rozeniteConfig = await loadConfig(getRozeniteConfigPath(projectRoot));
+      // Called for its validation only: a typo'd integration id must fail
+      // the build here, at config-load time, rather than quietly shipping a
+      // manifest that makes the plugin unloadable everywhere.
+      resolveIntegrations(rozeniteConfig);
       const panels = getPanels();
 
       config.server ??= {};
@@ -305,6 +318,7 @@ export const rozeniteClientPlugin = (): Plugin => {
                 version: packageJSON.version,
                 description: packageJSON.description,
                 panels: getManifestPanels(),
+                integrations: getManifestIntegrations(),
               },
               null,
               2,
@@ -362,6 +376,7 @@ export const rozeniteClientPlugin = (): Plugin => {
           version: packageJSON.version,
           description: packageJSON.description,
           panels: getManifestPanels(),
+          integrations: getManifestIntegrations(),
         }),
       });
     },

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

@@ -1,4 +1,4 @@
-import { Button, Input, Select, Tabs, Textarea } from '@rozenite/ui';
+import { IconButton, 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';
@@ -108,24 +108,17 @@ export const DispatchForm = ({
             </label>
 
             <div className="dev-host-actions">
-              <Button
+              <IconButton
+                tone="neutral"
                 variant="outline"
-                size="icon"
                 onClick={onReset}
-                aria-label="Reset dispatcher"
-                title="Reset dispatcher"
+                label="Reset dispatcher"
               >
                 <RotateCcw />
-              </Button>
-              <Button
-                type="submit"
-                size="icon"
-                disabled={!canDispatch}
-                aria-label="Dispatch message"
-                title="Dispatch message"
-              >
+              </IconButton>
+              <IconButton type="submit" disabled={!canDispatch} label="Dispatch message">
                 <Send />
-              </Button>
+              </IconButton>
             </div>
           </form>
         </Tabs.Panel>

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

@@ -52,7 +52,8 @@ export const FlowList = ({
             return (
               <Button
                 key={flow.name}
-                variant={isRunning ? 'secondary' : 'outline'}
+                tone="neutral"
+                variant={isRunning ? 'solid' : 'outline'}
                 className="dev-host-flow-button"
                 onClick={() => onRunFlow(flow)}
                 aria-label={`Run ${flow.displayName}`}
@@ -60,7 +61,11 @@ export const FlowList = ({
                 <span className="dev-host-flow-name">
                   <Play />
                   {flow.displayName}
-                  {flow.autoRun ? <Badge variant="outline">Auto</Badge> : null}
+                  {flow.autoRun ? (
+                    <Badge tone="neutral" variant="outline">
+                      Auto
+                    </Badge>
+                  ) : null}
                 </span>
                 <span className="text-xs text-muted-foreground">
                   {isRunning ? 'Running' : 'Run'}
@@ -80,10 +85,19 @@ export const FlowList = ({
                 <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 tone="neutral" variant="outline">
+                        Auto
+                      </Badge>
+                    ) : null}
                   </span>
                   {flowRun.status === 'running' ? (
-                    <Button variant="ghost" size="compact" onClick={() => onStopFlow(flowRun.id)}>
+                    <Button
+                      tone="neutral"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onStopFlow(flowRun.id)}
+                    >
                       <Square />
                       Stop
                     </Button>

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

@@ -1,4 +1,4 @@
-import { Button, JsonInspector, ScrollArea } from '@rozenite/ui';
+import { IconButton, JsonInspector, ScrollArea } from '@rozenite/ui';
 import { Send, X } from 'lucide-react';
 import type { MessageEntry } from '../types.js';
 import { formatMessageDate, formatPayloadForCommandInput } from '../utils.js';
@@ -19,24 +19,22 @@ export const MessageDetailsPane = ({
       <header className="dev-host-pane-header">
         <h2 className="dev-host-pane-title">Message Details</h2>
         <div className="dev-host-pane-actions">
-          <Button
+          <IconButton
+            tone="neutral"
             variant="ghost"
-            size="icon"
             onClick={() => onUseMessage(selectedMessage)}
-            aria-label="Use message in dispatcher"
-            title="Use message in dispatcher"
+            label="Use message in dispatcher"
           >
             <Send />
-          </Button>
-          <Button
+          </IconButton>
+          <IconButton
+            tone="neutral"
             variant="ghost"
-            size="icon"
             onClick={onClose}
-            aria-label="Close message details"
-            title="Close message details"
+            label="Close message details"
           >
             <X />
-          </Button>
+          </IconButton>
         </div>
       </header>
 

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

@@ -1,4 +1,4 @@
-import { Button, DataTable, ScrollArea } from '@rozenite/ui';
+import { DataTable, IconButton, ScrollArea } from '@rozenite/ui';
 import { Trash2 } from 'lucide-react';
 import { useMemo } from 'react';
 import type { DataTableColumn } from '@rozenite/ui';
@@ -66,16 +66,15 @@ export const MessageLogPane = ({
     <section className="dev-host-pane">
       <header className="dev-host-pane-header">
         <h2 className="dev-host-pane-title">Message Log</h2>
-        <Button
+        <IconButton
+          tone="neutral"
           variant="ghost"
-          size="icon"
           onClick={onClearMessages}
           disabled={messages.length === 0}
-          aria-label="Clear message log"
-          title="Clear message log"
+          label="Clear message log"
         >
           <Trash2 />
-        </Button>
+        </IconButton>
       </header>
 
       <ScrollArea className="dev-host-scroll" viewportClassName="dev-host-scroll-viewport">

package/src/dev-host/styles.css

@@ -219,7 +219,7 @@
 }
 
 .dev-host-flow-state[data-status='failed'] {
-  border-color: var(--destructive);
+  border-color: var(--danger);
 }
 
 .dev-host-flow-state-header {
@@ -246,7 +246,7 @@
 }
 
 .dev-host-flow-state-error {
-  color: var(--destructive);
+  color: var(--danger);
 }
 
 .dev-host-detail-section {

package/src/index.ts

@@ -2,80 +2,16 @@ import type { PluginOption } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import reactNativeWeb from 'vite-plugin-react-native-web';
-import path from 'node:path';
-import { rozeniteServerPlugin } from './server-plugin.js';
 import { rozeniteClientPlugin } from './client-plugin.js';
-import { rozeniteReactNativePlugin } from './react-native-plugin.js';
-import { rozeniteSdkPlugin } from './sdk-plugin.js';
-import maybeDtsPlugin from 'vite-plugin-dts';
-import requirePlugin from './require-plugin.js';
-import { bundleTargetDeclarations } from './bundle-dts.js';
 
-// vite-plugin-dts exports differently in CJS and ESM
-const dtsPlugin =
-  'default' in maybeDtsPlugin ? (maybeDtsPlugin.default as typeof maybeDtsPlugin) : maybeDtsPlugin;
-
-const getDtsPlugin = (target: 'react-native' | 'metro' | 'sdk'): PluginOption => {
-  const projectRoot = process.cwd();
-  const entryRoot =
-    target === 'react-native' ? 'react-native.ts' : target === 'metro' ? 'metro.ts' : 'sdk.ts';
-  const distRoot = path.join(projectRoot, 'dist');
-  const targetRoot = path.join(distRoot, target);
-  const publicEntryPath = path.join(projectRoot, 'dist', target, 'index.d.ts');
-  const sdkBundleEntryPath = path.join(targetRoot, `${target}.d.ts`);
-  const rawSdkEntryPath = path.join(distRoot, `${target}.d.ts`);
-
-  return dtsPlugin({
-    entryRoot,
-    include: [entryRoot, 'src/**/*.ts', 'src/**/*.tsx', 'src/**/*.d.ts'],
-    outDir: `dist/${target}`,
-    strictOutput: false,
-    insertTypesEntry: false,
-    // Preserve package specifiers in published declarations instead of
-    // rewriting workspace imports to source file paths.
-    pathsToAliases: false,
-    tsconfigPath: path.join(projectRoot, 'tsconfig.json'),
-    beforeWriteFile: (filePath, content) => {
-      if (!filePath.endsWith('.d.ts')) {
-        return false;
-      }
-
-      if (
-        filePath === publicEntryPath ||
-        (target !== 'sdk' && filePath.endsWith(`/${target}.d.ts`))
-      ) {
-        return {
-          filePath: publicEntryPath,
-          content,
-        };
-      }
-
-      if (target === 'sdk' && filePath === rawSdkEntryPath) {
-        return {
-          // vite-plugin-dts emits the SDK root declaration at dist/sdk.d.ts.
-          // Move it under dist/sdk/ before API Extractor rolls it up into the
-          // published dist/sdk/index.d.ts.
-          filePath: sdkBundleEntryPath,
-          content,
-        };
-      }
-
-      const relativeToDist = path.relative(distRoot, filePath);
-
-      if (!relativeToDist.startsWith('src/')) {
-        return false;
-      }
-
-      return {
-        filePath: path.join(targetRoot, relativeToDist),
-        content,
-      };
-    },
-    afterBuild: async () => {
-      await bundleTargetDeclarations(projectRoot, target);
-    },
-  });
-};
+// Re-exported so plugin authors can type `rozenite.config.ts` with
+// `satisfies RozeniteConfig`, which is what turns a typo'd integration id
+// into an editor error instead of a build failure later. `RozeniteConfig`
+// is the config file's own shape; `RozeniteIntegration` comes from
+// `@rozenite/tools`, re-exported here so authors need not depend on that
+// package directly for one type.
+export type { RozeniteConfig, PanelEntry } from './load-config.js';
+export type { RozeniteIntegration } from '@rozenite/tools';
 
 export type RozenitePluginOptions = {
   /**
@@ -86,24 +22,14 @@ export type RozenitePluginOptions = {
   tailwind?: boolean;
 };
 
+/**
+ * Builds the DevTools panels of a Rozenite plugin.
+ *
+ * Panels are the only part of a plugin that needs bundling: they ship as a
+ * browser bundle rather than as a resolvable package entry point. The React
+ * Native, Metro and SDK entry points are compiled with tsc by `rozenite build`.
+ */
 export const rozenitePlugin = ({ tailwind = true }: RozenitePluginOptions = {}): PluginOption[] => {
-  const isServer = process.env.VITE_ROZENITE_TARGET === 'server';
-  const isReactNative = process.env.VITE_ROZENITE_TARGET === 'react-native';
-  const isSdk = process.env.VITE_ROZENITE_TARGET === 'sdk';
-
-  if (isServer) {
-    return [rozeniteServerPlugin(), getDtsPlugin('metro')] as PluginOption[];
-  } else if (isReactNative) {
-    return [
-      react(),
-      requirePlugin(),
-      rozeniteReactNativePlugin(),
-      getDtsPlugin('react-native'),
-    ] as PluginOption[];
-  } else if (isSdk) {
-    return [rozeniteSdkPlugin(), getDtsPlugin('sdk')] as PluginOption[];
-  }
-
   return [
     ...(tailwind ? [tailwindcss()] : []),
     react(),

package/src/load-config.ts

@@ -1,6 +1,12 @@
 import { transformWithEsbuild } from 'vite';
 import path from 'node:path';
 import fs from 'node:fs';
+import {
+  type RozeniteIntegration,
+  ROZENITE_INTEGRATIONS,
+  DEFAULT_PLUGIN_INTEGRATIONS,
+  isRozeniteIntegration,
+} from '@rozenite/tools';
 
 export type PanelEntry = {
   name: string;
@@ -64,6 +70,44 @@ export type DevConfig = {
 export type RozeniteConfig = {
   panels: PanelEntry[];
   dev?: DevConfig;
+  /**
+   * The target environments this plugin supports. Reported in the plugin
+   * manifest (`rozenite.json`) so a consumer can refuse to load a plugin on
+   * an integration it doesn't declare, instead of loading it and breaking.
+   *
+   * @default ['react-native']
+   */
+  integrations?: RozeniteIntegration[];
+};
+
+/**
+ * Validates a plugin's declared `integrations` and returns the resolved
+ * list — the declaration, or the default when omitted — so the manifest
+ * always answers "which integrations does this plugin support", even for a
+ * plugin authored before this field existed.
+ *
+ * Called eagerly from `client-plugin.ts`'s `config()` hook, right after the
+ * config is loaded: a typo here must fail the build loudly rather than
+ * silently making the plugin unloadable everywhere that later checks it.
+ */
+export const resolveIntegrations = (config: RozeniteConfig): RozeniteIntegration[] => {
+  const integrations = config.integrations ?? DEFAULT_PLUGIN_INTEGRATIONS;
+
+  if (integrations.length === 0) {
+    throw new Error(
+      `"integrations" in rozenite.config.ts must not be empty. Valid ids: ${ROZENITE_INTEGRATIONS.join(', ')}.`,
+    );
+  }
+
+  for (const integration of integrations) {
+    if (!isRozeniteIntegration(integration)) {
+      throw new Error(
+        `Invalid integration "${integration}" in rozenite.config.ts. Valid ids: ${ROZENITE_INTEGRATIONS.join(', ')}.`,
+      );
+    }
+  }
+
+  return [...integrations];
 };
 
 export const loadConfig = async (configPath: string): Promise<RozeniteConfig> => {

package/dist/bundle-dts.d.ts

@@ -1,5 +0,0 @@
-type Target = 'react-native' | 'metro' | 'sdk';
-export declare const normalizeRolledUpDeclarations: (content: string) => string;
-export declare const bundleTargetDeclarations: (projectRoot: string, target: Target) => Promise<void>;
-export {};
-//# sourceMappingURL=bundle-dts.d.ts.map

package/dist/bundle-dts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"bundle-dts.d.ts","sourceRoot":"","sources":["../src/bundle-dts.ts"],"names":[],"mappings":"AAIA,KAAK,MAAM,GAAG,cAAc,GAAG,OAAO,GAAG,KAAK,CAAC;AAE/C,eAAO,MAAM,6BAA6B,GAAI,SAAS,MAAM,WA2B5D,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAU,aAAa,MAAM,EAAE,QAAQ,MAAM,kBAiFjF,CAAC"}