@rozenite/vite-plugin 1.0.0-alpha.0 → 1.0.0-alpha.3

package/README.md

@@ -0,0 +1,82 @@
+![rozenite-baner](https://github.com/user-attachments/assets/6d21839f-e624-4d8b-85a2-5f7ef1600b28)
+
+### A Vite plugin for developing React Native DevTools plugins with hot reload and development tools.
+
+[![mit licence][license-badge]][license] [![npm downloads][npm-downloads-badge]][npm-downloads] [![Chat][chat-badge]][chat] [![PRs Welcome][prs-welcome-badge]][prs-welcome]
+
+The Rozenite Vite Plugin provides a complete development environment for React Native DevTools plugins. It handles multiple build targets (client panels and React Native entry points), provides hot reload during development, and generates optimized production builds with proper manifest files.
+
+## Features
+
+- **Multi-Target Building**: Build for client panels and React Native
+- **Hot Reload Development**: Instant updates during plugin development
+- **React Native Web Support**: Seamless React Native component development
+- **Automatic Manifest Generation**: Creates `rozenite.json` manifest files
+- **Panel HTML Generation**: Automatically generates HTML for plugin panels
+- **TypeScript Support**: Full TypeScript support with type generation
+- **Development Server**: Built-in development server with CORS support
+- **Production Optimization**: Optimized builds for production deployment
+
+## Installation
+
+Install the Vite plugin as a development dependency:
+
+```bash
+npm install --save-dev @rozenite/vite-plugin
+```
+
+## Quick Start
+
+### Basic Configuration
+
+Add the Rozenite plugin to your Vite configuration:
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { rozenitePlugin } from '@rozenite/vite-plugin';
+
+export default defineConfig({
+  plugins: rozenitePlugin(),
+});
+```
+
+## Build Targets
+
+The Vite plugin automatically handles different build targets based on environment variables:
+
+### Client Panels (Default)
+
+For plugin panels that run in the browser:
+
+```bash
+# Build panels
+npm run build
+```
+
+### React Native Entry Points
+
+For React Native integration:
+
+```bash
+# Build React Native target
+VITE_ROZENITE_TARGET=react-native npm run build
+```
+
+## Made with ❤️ at Callstack
+
+`rozenite` is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.
+
+[Callstack][callstack-readme-with-love] is a group of React and React Native geeks, contact us at [hello@callstack.com](mailto:hello@callstack.com) if you need any help with these or just want to say hi!
+
+Like the project? ⚛️ [Join the team](https://callstack.com/careers/?utm_campaign=Senior_RN&utm_source=github&utm_medium=readme) who does amazing stuff for clients and drives React Native Open Source! 🔥
+
+[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=rozenite&utm_term=readme-with-love
+[license-badge]: https://img.shields.io/npm/l/rozenite?style=for-the-badge
+[license]: https://github.com/callstackincubator/rozenite/blob/main/LICENSE
+[npm-downloads-badge]: https://img.shields.io/npm/dm/rozenite?style=for-the-badge
+[npm-downloads]: https://www.npmjs.com/package/@rozenite/vite-plugin
+[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge
+[prs-welcome]: https://github.com/callstackincubator/rozenite/blob/main/CONTRIBUTING.md
+[chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=for-the-badge
+[chat]: https://discord.gg/xgGt7KAjxv

package/dist/client-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client-plugin.d.ts","sourceRoot":"","sources":["../src/client-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,MAAM,CAAC;AAyBlD,eAAO,MAAM,oBAAoB,QAAO,MA4KvC,CAAC"}
+{"version":3,"file":"client-plugin.d.ts","sourceRoot":"","sources":["../src/client-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,MAAM,CAAC;AAyBlD,eAAO,MAAM,oBAAoB,QAAO,MAwLvC,CAAC"}

package/dist/index.cjs

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("@vitejs/plugin-react");
-const viteRequire = require("vite-require");
 const reactNativeWeb = require("vite-plugin-react-native-web");
 const process$1 = require("node:process");
 const fs = require("node:fs");
@@ -10,7 +9,8 @@ const ejs = require("ejs");
 const node_url = require("node:url");
 const vite = require("vite");
 const fs$1 = require("node:fs/promises");
-const dtsPlugin = require("vite-plugin-dts");
+const maybeDtsPlugin = require("vite-plugin-dts");
+const assert = require("node:assert");
 var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
 const resolveFileWithExtensions = (directory, baseName) => {
   const extensions = [".tsx", ".ts", ".jsx", ".js"];
@@ -168,8 +168,14 @@ const rozeniteClientPlugin = () => {
       const packageJSON = await getPackageJSON(projectRoot);
       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;
           res.end();
@@ -179,15 +185,21 @@ const rozeniteClientPlugin = () => {
         const url = req.url || "/";
         if (url === "/rozenite.json") {
           res.setHeader("Content-Type", "application/json");
-          res.end(JSON.stringify({
-            name: packageJSON.name,
-            version: packageJSON.version,
-            description: packageJSON.description,
-            panels: panels.map((panel2) => ({
-              name: panel2.label,
-              source: panel2.htmlFile
-            }))
-          }, null, 2));
+          res.end(
+            JSON.stringify(
+              {
+                name: packageJSON.name,
+                version: packageJSON.version,
+                description: packageJSON.description,
+                panels: panels.map((panel2) => ({
+                  name: panel2.label,
+                  source: "/" + panel2.htmlFile
+                }))
+              },
+              null,
+              2
+            )
+          );
           return;
         }
         const panel = panels.find((panel2) => "/" + panel2.htmlFile === url);
@@ -229,7 +241,7 @@ const rozeniteClientPlugin = () => {
           description: packageJSON.description,
           panels: panels.map((panel) => ({
             name: panel.label,
-            source: panel.htmlFile
+            source: "/" + panel.htmlFile
           }))
         })
       });
@@ -259,6 +271,103 @@ const rozeniteReactNativePlugin = () => {
     }
   };
 };
+function requirePlugin() {
+  let input = "";
+  let inputName = "";
+  let isDevMode = false;
+  const moduleToChunkMap = /* @__PURE__ */ new Map();
+  return {
+    name: "vite-require-plugin",
+    configResolved(config) {
+      isDevMode = config.command === "serve";
+    },
+    transform(code, id) {
+      if (!isDevMode || id !== input) {
+        return null;
+      }
+      let transformedCode = code;
+      const imports = [];
+      const importMap = /* @__PURE__ */ new Map();
+      const requireRegex = /require\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g;
+      let match;
+      while ((match = requireRegex.exec(code)) !== null) {
+        const moduleName = match[1];
+        if (moduleName && !importMap.has(moduleName)) {
+          const importName = `__import_${importMap.size}`;
+          importMap.set(moduleName, importName);
+          imports.push(`import * as ${importName} from '${moduleName}';`);
+        }
+      }
+      transformedCode = transformedCode.replace(
+        /require\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g,
+        (match2, moduleName) => {
+          const importName = importMap.get(moduleName);
+          return importName || match2;
+        }
+      );
+      if (imports.length > 0) {
+        transformedCode = imports.join("\n") + "\n" + transformedCode;
+      }
+      return {
+        code: transformedCode,
+        map: null
+      };
+    },
+    async buildStart(options) {
+      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 = path.basename(input).replace(/\.[^/.]+$/, "");
+      const code = fs.readFileSync(input, "utf-8");
+      const requires = /* @__PURE__ */ new Set();
+      const requireRegex = /require\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g;
+      let match;
+      while ((match = requireRegex.exec(code)) !== null) {
+        const moduleName = match[1];
+        if (moduleName) {
+          requires.add(moduleName);
+        }
+      }
+      for (const req of requires) {
+        const resolved = await this.resolve(req, input);
+        if (resolved) {
+          const fileName = path.basename(resolved.id).replace(/\.[^/.]+$/, "") + ".js";
+          this.addWatchFile(resolved.id);
+          this.emitFile({
+            type: "chunk",
+            id: resolved.id,
+            fileName
+          });
+          moduleToChunkMap.set(req, fileName);
+        }
+      }
+    },
+    renderChunk(code, chunk) {
+      if (chunk.name !== inputName) {
+        return null;
+      }
+      let transformedCode = code;
+      transformedCode = transformedCode.replace(
+        /require\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g,
+        (match, moduleName) => {
+          const chunkName = moduleToChunkMap.get(moduleName);
+          if (chunkName) {
+            return `require('./${chunkName}')`;
+          }
+          return match;
+        }
+      );
+      return {
+        code: transformedCode,
+        map: null
+      };
+    }
+  };
+}
+const dtsPlugin = "default" in maybeDtsPlugin ? maybeDtsPlugin.default : maybeDtsPlugin;
 const rozenitePlugin = () => {
   const isServer = process.env.VITE_ROZENITE_TARGET === "server";
   const isReactNative = process.env.VITE_ROZENITE_TARGET === "react-native";
@@ -267,7 +376,7 @@ const rozenitePlugin = () => {
   } else if (isReactNative) {
     return [
       react(),
-      viteRequire.viteRequire(),
+      requirePlugin(),
       rozeniteReactNativePlugin(),
       dtsPlugin({ rollupTypes: true })
     ];

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AASzC,eAAO,MAAM,cAAc,QAAO,YAAY,EAqB7C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAezC,eAAO,MAAM,cAAc,QAAO,YAAY,EAqB7C,CAAC"}

package/dist/index.js

@@ -1,14 +1,14 @@
 import react from "@vitejs/plugin-react";
-import { viteRequire } from "vite-require";
 import reactNativeWeb from "vite-plugin-react-native-web";
 import process$1 from "node:process";
-import fs from "node:fs";
+import fs, { readFileSync } from "node:fs";
 import path from "node:path";
 import ejs from "ejs";
 import { fileURLToPath } from "node:url";
 import { transformWithEsbuild } from "vite";
 import fs$1 from "node:fs/promises";
-import dtsPlugin from "vite-plugin-dts";
+import maybeDtsPlugin from "vite-plugin-dts";
+import assert from "node:assert";
 const resolveFileWithExtensions = (directory, baseName) => {
   const extensions = [".tsx", ".ts", ".jsx", ".js"];
   for (const ext of extensions) {
@@ -165,8 +165,14 @@ const rozeniteClientPlugin = () => {
       const packageJSON = await getPackageJSON(projectRoot);
       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;
           res.end();
@@ -176,15 +182,21 @@ const rozeniteClientPlugin = () => {
         const url = req.url || "/";
         if (url === "/rozenite.json") {
           res.setHeader("Content-Type", "application/json");
-          res.end(JSON.stringify({
-            name: packageJSON.name,
-            version: packageJSON.version,
-            description: packageJSON.description,
-            panels: panels.map((panel2) => ({
-              name: panel2.label,
-              source: panel2.htmlFile
-            }))
-          }, null, 2));
+          res.end(
+            JSON.stringify(
+              {
+                name: packageJSON.name,
+                version: packageJSON.version,
+                description: packageJSON.description,
+                panels: panels.map((panel2) => ({
+                  name: panel2.label,
+                  source: "/" + panel2.htmlFile
+                }))
+              },
+              null,
+              2
+            )
+          );
           return;
         }
         const panel = panels.find((panel2) => "/" + panel2.htmlFile === url);
@@ -226,7 +238,7 @@ const rozeniteClientPlugin = () => {
           description: packageJSON.description,
           panels: panels.map((panel) => ({
             name: panel.label,
-            source: panel.htmlFile
+            source: "/" + panel.htmlFile
           }))
         })
       });
@@ -256,6 +268,103 @@ const rozeniteReactNativePlugin = () => {
     }
   };
 };
+function requirePlugin() {
+  let input = "";
+  let inputName = "";
+  let isDevMode = false;
+  const moduleToChunkMap = /* @__PURE__ */ new Map();
+  return {
+    name: "vite-require-plugin",
+    configResolved(config) {
+      isDevMode = config.command === "serve";
+    },
+    transform(code, id) {
+      if (!isDevMode || id !== input) {
+        return null;
+      }
+      let transformedCode = code;
+      const imports = [];
+      const importMap = /* @__PURE__ */ new Map();
+      const requireRegex = /require\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g;
+      let match;
+      while ((match = requireRegex.exec(code)) !== null) {
+        const moduleName = match[1];
+        if (moduleName && !importMap.has(moduleName)) {
+          const importName = `__import_${importMap.size}`;
+          importMap.set(moduleName, importName);
+          imports.push(`import * as ${importName} from '${moduleName}';`);
+        }
+      }
+      transformedCode = transformedCode.replace(
+        /require\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g,
+        (match2, moduleName) => {
+          const importName = importMap.get(moduleName);
+          return importName || match2;
+        }
+      );
+      if (imports.length > 0) {
+        transformedCode = imports.join("\n") + "\n" + transformedCode;
+      }
+      return {
+        code: transformedCode,
+        map: null
+      };
+    },
+    async buildStart(options) {
+      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 = path.basename(input).replace(/\.[^/.]+$/, "");
+      const code = readFileSync(input, "utf-8");
+      const requires = /* @__PURE__ */ new Set();
+      const requireRegex = /require\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g;
+      let match;
+      while ((match = requireRegex.exec(code)) !== null) {
+        const moduleName = match[1];
+        if (moduleName) {
+          requires.add(moduleName);
+        }
+      }
+      for (const req of requires) {
+        const resolved = await this.resolve(req, input);
+        if (resolved) {
+          const fileName = path.basename(resolved.id).replace(/\.[^/.]+$/, "") + ".js";
+          this.addWatchFile(resolved.id);
+          this.emitFile({
+            type: "chunk",
+            id: resolved.id,
+            fileName
+          });
+          moduleToChunkMap.set(req, fileName);
+        }
+      }
+    },
+    renderChunk(code, chunk) {
+      if (chunk.name !== inputName) {
+        return null;
+      }
+      let transformedCode = code;
+      transformedCode = transformedCode.replace(
+        /require\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g,
+        (match, moduleName) => {
+          const chunkName = moduleToChunkMap.get(moduleName);
+          if (chunkName) {
+            return `require('./${chunkName}')`;
+          }
+          return match;
+        }
+      );
+      return {
+        code: transformedCode,
+        map: null
+      };
+    }
+  };
+}
+const dtsPlugin = "default" in maybeDtsPlugin ? maybeDtsPlugin.default : maybeDtsPlugin;
 const rozenitePlugin = () => {
   const isServer = process.env.VITE_ROZENITE_TARGET === "server";
   const isReactNative = process.env.VITE_ROZENITE_TARGET === "react-native";
@@ -264,7 +373,7 @@ const rozenitePlugin = () => {
   } else if (isReactNative) {
     return [
       react(),
-      viteRequire(),
+      requirePlugin(),
       rozeniteReactNativePlugin(),
       dtsPlugin({ rollupTypes: true })
     ];

package/dist/package-json.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"package-json.d.ts","sourceRoot":"","sources":["../src/package-json.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAU,aAAa,MAAM,KAAG,OAAO,CAAC,WAAW,CAI7E,CAAC"}
+{"version":3,"file":"package-json.d.ts","sourceRoot":"","sources":["../src/package-json.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,aAAa,MAAM,KAClB,OAAO,CAAC,WAAW,CAIrB,CAAC"}

package/dist/require-plugin.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from 'vite';
+export default function requirePlugin(): Plugin;
+//# sourceMappingURL=require-plugin.d.ts.map

package/dist/require-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"require-plugin.d.ts","sourceRoot":"","sources":["../src/require-plugin.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,aAAa,IAAI,MAAM,CAsH9C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/vite-plugin",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.3",
   "description": "Vite plugin for developing React Native DevTools plugins with hot reload and development tools",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -39,8 +39,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "ejs": "^3.1.9",
     "vite-plugin-dts": "~4.5.0",
-    "vite-plugin-react-native-web": "^2.1.1",
-    "vite-require": "^0.2.3"
+    "vite-plugin-react-native-web": "^2.1.1"
   },
   "peerDependencies": {
     "vite": "^6.0.0"
@@ -50,8 +49,5 @@
   },
   "engines": {
     "node": ">=22"
-  },
-  "scripts": {
-    "build": "vite build"
   }
 }