@rozenite/vite-plugin 1.11.0 → 1.13.0

package/src/dev-host/types.ts

@@ -0,0 +1,61 @@
+import type { DevFlowEntry } from '../load-config.js';
+
+export type DevHostPanelEntry = {
+  label: string;
+  source: string;
+};
+
+export type DevHostPresetEntry = {
+  name: string;
+  displayName: string;
+  type: string;
+  payload: unknown;
+};
+
+export type DevHostFlowEntry = {
+  name: string;
+  displayName: string;
+  autoRun: boolean;
+  run: DevFlowEntry['run'];
+};
+
+export type DevHostState = {
+  packageName: string;
+  packageDescription: string;
+  panels: DevHostPanelEntry[];
+};
+
+export type MessageEntry = {
+  id: string;
+  direction: 'in' | 'out';
+  date: string;
+  type: string;
+  payload: unknown;
+};
+
+export type DevHostFlowRunStatus = 'running' | 'succeeded' | 'failed' | 'aborted';
+
+export type DevHostFlowRunState = {
+  id: string;
+  flowName: string;
+  flowDisplayName: string;
+  status: DevHostFlowRunStatus;
+  result: unknown;
+  error: string | null;
+  autoRun: boolean;
+};
+
+export type PluginMessage = {
+  pluginId: string;
+  type: string;
+  payload: unknown;
+};
+
+export type ResizeHandleId = 'devtools-height' | 'command-width' | 'details-width';
+
+export type ResizeSession = {
+  handleId: ResizeHandleId;
+  pointerId: number;
+  element: HTMLElement;
+  onMove: (event: PointerEvent) => void;
+};

package/src/dev-host/utils.ts

@@ -0,0 +1,96 @@
+import { DEV_HOST_STATE_ELEMENT_ID } from './constants.js';
+import type { DevHostPanelEntry, DevHostState, MessageEntry, PluginMessage } from './types.js';
+
+export const cn = (...parts: Array<string | false | null | undefined>) => {
+  return parts.filter(Boolean).join(' ');
+};
+
+export const formatPayloadPreview = (payload: unknown) => {
+  if (payload == null) {
+    return 'null';
+  }
+
+  if (typeof payload === 'string') {
+    return payload;
+  }
+
+  try {
+    return JSON.stringify(payload);
+  } catch {
+    return String(payload);
+  }
+};
+
+export const isJsonTreeData = (value: unknown): value is Record<string, unknown> | unknown[] => {
+  return Array.isArray(value) || (typeof value === 'object' && value !== null);
+};
+
+export const formatMessageDate = (date: string) => {
+  return new Date(date).toLocaleString();
+};
+
+export const formatMessageTableDate = (date: string) => {
+  return new Date(date).toLocaleString([], {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  });
+};
+
+export const formatPayloadForCommandInput = (payload: unknown) => {
+  try {
+    return JSON.stringify(payload, null, 2);
+  } catch {
+    return String(payload);
+  }
+};
+
+export const isPluginMessage = (value: unknown): value is PluginMessage => {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'pluginId' in value &&
+    'type' in value &&
+    'payload' in value
+  );
+};
+
+export const getInitialPanel = (panels: DevHostPanelEntry[]) => {
+  const requestedPanel = new URLSearchParams(window.location.search).get('panel');
+
+  if (requestedPanel) {
+    const matchedPanel = panels.find((panel) => panel.label === requestedPanel);
+    if (matchedPanel) {
+      return matchedPanel;
+    }
+  }
+
+  return panels[0] ?? null;
+};
+
+export const createMessageEntry = (
+  input: Omit<MessageEntry, 'id' | 'date'>,
+): MessageEntry => {
+  return {
+    id: crypto.randomUUID(),
+    date: new Date().toISOString(),
+    ...input,
+  };
+};
+
+export const clamp = (value: number, min: number, max: number) => {
+  return Math.min(Math.max(value, min), max);
+};
+
+export const readDevHostState = (): DevHostState => {
+  const stateElement = document.getElementById(DEV_HOST_STATE_ELEMENT_ID);
+
+  if (!stateElement?.textContent) {
+    throw new Error('Rozenite dev host failed to initialize.');
+  }
+
+  return JSON.parse(stateElement.textContent) as DevHostState;
+};

package/src/dev-host/vite.config.mts

@@ -0,0 +1,20 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vite';
+
+const HOST_APP_ROOT = fileURLToPath(new URL('./', import.meta.url));
+const PACKAGE_ROOT = fileURLToPath(new URL('../../', import.meta.url));
+
+export default defineConfig({
+  root: HOST_APP_ROOT,
+  base: './',
+  publicDir: false,
+  build: {
+    outDir: path.join(PACKAGE_ROOT, 'dist', 'dev-host'),
+    emptyOutDir: true,
+    manifest: 'manifest.json',
+    // The dev host is served locally during plugin development, so the
+    // default production-oriented chunk warning is just noise here.
+    chunkSizeWarningLimit: 1000,
+  },
+});

package/src/index.ts

@@ -0,0 +1,114 @@
+import type { PluginOption } from '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);
+    },
+  });
+};
+
+export const rozenitePlugin = (): 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 [
+    react(),
+    // @ts-expect-error: TypeScript gets confused by the dual export
+    reactNativeWeb(),
+    rozeniteClientPlugin(),
+  ];
+};

package/src/load-config.ts

@@ -0,0 +1,117 @@
+import { transformWithEsbuild } from 'vite';
+import path from 'node:path';
+import fs from 'node:fs';
+
+export type PanelEntry = {
+  name: string;
+  source: string;
+};
+
+export type DevPresetEntry = {
+  name: string;
+  type: string;
+  payload: unknown;
+};
+
+export type DevFlowMessage = {
+  id: string;
+  direction: 'in' | 'out';
+  date: string;
+  type: string;
+  payload: unknown;
+};
+
+export type DevFlowMessageMatcher =
+  | string
+  | ((message: DevFlowMessage) => boolean)
+  | {
+      type?: string;
+      direction?: DevFlowMessage['direction'];
+      predicate?: (message: DevFlowMessage) => boolean;
+    };
+
+export type DevFlowSubscription = {
+  remove: () => void;
+};
+
+export type DevFlowContext = {
+  signal: AbortSignal;
+  send: (type: string, payload: unknown) => void;
+  onMessage: (
+    matcher: DevFlowMessageMatcher,
+    listener: (message: DevFlowMessage) => void,
+  ) => DevFlowSubscription;
+  waitForMessage: (
+    matcher: DevFlowMessageMatcher,
+    options?: {
+      timeoutMs?: number;
+    },
+  ) => Promise<DevFlowMessage>;
+  getMessages: (matcher?: DevFlowMessageMatcher) => DevFlowMessage[];
+};
+
+export type DevFlowEntry = {
+  name?: string;
+  autoRun?: boolean;
+  run: (context: DevFlowContext) => unknown | Promise<unknown>;
+};
+
+export type DevConfig = {
+  presets?: DevPresetEntry[];
+  flows?: DevFlowEntry[];
+};
+
+export type RozeniteConfig = {
+  panels: PanelEntry[];
+  dev?: DevConfig;
+};
+
+export const loadConfig = async (
+  configPath: string
+): Promise<RozeniteConfig> => {
+  const absoluteConfigPath = path.resolve(process.cwd(), configPath);
+
+  if (!fs.existsSync(absoluteConfigPath)) {
+    throw new Error(`Configuration file not found: ${absoluteConfigPath}`);
+  }
+
+  try {
+    const configContent = await fs.promises.readFile(
+      absoluteConfigPath,
+      'utf-8'
+    );
+
+    const result = await transformWithEsbuild(
+      configContent,
+      absoluteConfigPath,
+      {
+        loader: 'ts',
+        format: 'cjs',
+        target: 'esnext',
+      }
+    );
+
+    const moduleExports: { default?: unknown } = {};
+    const module = { exports: moduleExports };
+    const exports = moduleExports;
+
+    const moduleFunction = new Function('module', 'exports', result.code);
+    moduleFunction(module, exports);
+
+    const configModule = module.exports;
+    const config = configModule.default || configModule;
+
+    if (!config || typeof config !== 'object') {
+      throw new Error('Configuration must export an object');
+    }
+
+    return config as RozeniteConfig;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(
+        `Failed to load configuration from ${configPath}: ${error.message}`
+      );
+    }
+    throw new Error(`Failed to load configuration from ${configPath}`);
+  }
+};

package/src/package-json.ts

@@ -0,0 +1,16 @@
+import path from 'node:path';
+import fs from 'node:fs/promises';
+
+export type PackageJSON = {
+  name: string;
+  description: string;
+  version: string;
+};
+
+export const getPackageJSON = async (
+  projectRoot: string
+): Promise<PackageJSON> => {
+  const packageJSONPath = path.join(projectRoot, 'package.json');
+  const packageJSON = await fs.readFile(packageJSONPath, 'utf8');
+  return JSON.parse(packageJSON);
+};

package/src/react-native-plugin.ts

@@ -0,0 +1,49 @@
+import { Plugin } from 'vite';
+import path from 'node:path';
+
+export const rozeniteReactNativePlugin = (): Plugin => {
+  return {
+    name: 'rozenite-react-native-plugin',
+    config(config) {
+      const projectRoot = config.root ?? process.cwd();
+
+      config.build ??= {};
+      config.build.rollupOptions ??= {};
+
+      config.build.lib = {
+        entry: path.resolve(projectRoot, 'react-native.ts'),
+        fileName: (format) =>
+          `react-native/index.${format === 'es' ? 'js' : 'cjs'}`,
+      };
+
+      config.build.rollupOptions.external = (id) => {
+        if (id.startsWith('node:')) {
+          return true;
+        }
+
+        return !id.startsWith('.') && !path.isAbsolute(id);
+      };
+
+      config.build.rollupOptions.output = [
+        {
+          format: 'es',
+          exports: 'named',
+          interop: 'auto',
+          entryFileNames: 'react-native/index.js',
+          chunkFileNames: 'react-native/chunks/[name].js',
+          ...(config.build.rollupOptions.output ?? {}),
+        },
+        {
+          format: 'cjs',
+          exports: 'named',
+          interop: 'auto',
+          entryFileNames: 'react-native/index.cjs',
+          chunkFileNames: 'react-native/chunks/[name].cjs',
+          ...(config.build.rollupOptions.output ?? {}),
+        },
+      ];
+
+      delete config.build.rollupOptions.input;
+    },
+  };
+};

package/src/require-plugin.ts

@@ -0,0 +1,221 @@
+import assert from 'node:assert';
+import path from 'node:path';
+import { readFileSync } from 'node:fs';
+import { normalizePath, Plugin } from 'vite';
+
+const REQUIRE_REGEX = /require\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g;
+const IMPORT_PREFIX = '__import_';
+const VIRTUAL_REQUIRE_PREFIX = '\0virtual:rozenite-rn-require:';
+const REQUIRE_WRAPPER_SUFFIX = '.require';
+
+interface ModuleInfo {
+  referenceId: string;
+  virtualId: string;
+}
+
+interface TransformResult {
+  code: string;
+}
+
+const extractModuleName = (filePath: string): string => {
+  return path.basename(filePath).replace(/\.[^/.]+$/, '');
+};
+
+const sanitizeChunkName = (value: string): string => {
+  return value.replace(/[^a-zA-Z0-9_-]/g, '-');
+};
+
+const findRequireStatements = (code: string): Set<string> => {
+  const requires = new Set<string>();
+  let match: RegExpExecArray | null;
+
+  REQUIRE_REGEX.lastIndex = 0;
+
+  while ((match = REQUIRE_REGEX.exec(code)) !== null) {
+    const moduleName = match[1];
+    if (moduleName && moduleName.trim()) {
+      requires.add(moduleName.trim());
+    }
+  }
+
+  return requires;
+};
+
+const transformRequireToImports = (
+  code: string,
+  moduleInfoMap: Map<string, ModuleInfo>,
+): TransformResult => {
+  const imports: string[] = [];
+  const importMap = new Map<string, string>();
+  const requires = findRequireStatements(code);
+
+  requires.forEach((moduleName, index) => {
+    const moduleInfo = moduleInfoMap.get(moduleName);
+
+    if (!moduleInfo) {
+      return;
+    }
+
+    const importName = `${IMPORT_PREFIX}${index}`;
+    importMap.set(moduleName, importName);
+    imports.push(`import * as ${importName} from '${moduleInfo.virtualId}';`);
+  });
+
+  let transformedCode = code.replace(REQUIRE_REGEX, (match, moduleName) => {
+    const importName = importMap.get(moduleName.trim());
+    return importName || match;
+  });
+
+  if (imports.length > 0) {
+    transformedCode = imports.join('\n') + '\n' + transformedCode;
+  }
+
+  return { code: transformedCode };
+};
+
+const transformRequireToChunkReferences = (
+  code: string,
+  moduleInfoMap: Map<string, ModuleInfo>,
+  getFileName: (referenceId: string) => string,
+): string => {
+  return code.replace(REQUIRE_REGEX, (match, moduleName) => {
+    const moduleInfo = moduleInfoMap.get(moduleName.trim());
+
+    if (!moduleInfo) {
+      return match;
+    }
+
+    const outFileName = getFileName(moduleInfo.referenceId);
+    const relPath = normalizePath(
+      path.posix.relative('react-native', outFileName),
+    );
+    const requirePath = relPath.startsWith('.') ? relPath : `./${relPath}`;
+
+    return `require('${requirePath}')`;
+  });
+};
+
+export default function requirePlugin(): Plugin {
+  let input = '';
+  let inputName = '';
+  let isDevMode = false;
+
+  const moduleInfoMap = new Map<string, ModuleInfo>();
+  const virtualModuleSources = new Map<string, string>();
+
+  return {
+    name: 'vite-require-plugin',
+
+    configResolved(config) {
+      isDevMode = config.command === 'serve';
+    },
+
+    resolveId(id) {
+      if (virtualModuleSources.has(id)) {
+        return id;
+      }
+
+      return null;
+    },
+
+    load(id) {
+      return virtualModuleSources.get(id) ?? null;
+    },
+
+    transform(code, id) {
+      if (!isDevMode || id !== input) {
+        return null;
+      }
+
+      try {
+        const result = transformRequireToImports(code, moduleInfoMap);
+
+        return {
+          code: result.code,
+          map: null,
+        };
+      } catch (error) {
+        console.error('Error transforming require statements:', error);
+        return null;
+      }
+    },
+
+    async buildStart(options) {
+      try {
+        assert(Array.isArray(options.input), 'input must be an array');
+        assert(
+          options.input.length === 1,
+          'input must be an array with one entry',
+        );
+
+        input = options.input[0];
+        inputName = extractModuleName(input);
+        moduleInfoMap.clear();
+        virtualModuleSources.clear();
+
+        const code = readFileSync(input, 'utf-8');
+        const requires = findRequireStatements(code);
+
+        for (const req of requires) {
+          try {
+            const resolved = await this.resolve(req, input, { skipSelf: true });
+
+            if (!resolved) {
+              console.warn(`Could not resolve module: ${req}`);
+              continue;
+            }
+
+            this.addWatchFile(resolved.id);
+
+            const exportName = sanitizeChunkName(
+              extractModuleName(resolved.id),
+            );
+            const wrapperName = `${exportName}${REQUIRE_WRAPPER_SUFFIX}`;
+            const virtualId = `${VIRTUAL_REQUIRE_PREFIX}${wrapperName}`;
+
+            virtualModuleSources.set(
+              virtualId,
+              `export * from ${JSON.stringify(req)};`,
+            );
+
+            const referenceId = this.emitFile({
+              type: 'chunk',
+              id: virtualId,
+              name: wrapperName,
+            });
+
+            moduleInfoMap.set(req, {
+              referenceId,
+              virtualId,
+            });
+          } catch (error) {
+            console.error(`Error resolving module ${req}:`, error);
+          }
+        }
+      } catch (error) {
+        console.error('Error in buildStart:', error);
+        throw error;
+      }
+    },
+
+    renderChunk(code, chunk) {
+      try {
+        if (chunk.name !== inputName) {
+          return null;
+        }
+
+        return {
+          code: transformRequireToChunkReferences(
+            code,
+            moduleInfoMap,
+            (referenceId) => normalizePath(this.getFileName(referenceId)),
+          ),
+          map: null,
+        };
+      } catch (error) {
+        console.error('Error in renderChunk:', error);
+        return null;
+      }
+    },
+  };
+}