react-on-fly 1.0.0 → 1.1.1

package/README.md

@@ -1,4 +1,4 @@
-# 🦋 react-on-fly
+# 🚀 react-on-fly
 
 **Preview your React components on the fly!**
 
@@ -17,11 +17,11 @@ npx react-on-fly <path-to-file> -p <port-number> -rv <react-version> -w <watch-c
 Using `bunx` (Bun):
 
 ```bash
-bunx react-on-fly <path-to-file> -p <port-number> -rv <react-version> -w <watch-changes-boolean>
+bunx react-on-fly --bun <path-to-file> -p <port-number> -rv <react-version> -w <watch-changes-boolean>
 ```
 
 Using `dx` (Deno):
 
 ```bash
-dx react-on-fly <path-to-file> -p <port-number> -rv <react-version> -w <watch-changes-boolean>
+deno x react-on-fly <path-to-file> -p <port-number> -rv <react-version> -w <watch-changes-boolean>
 ```

package/dist/func/args.d.ts

@@ -0,0 +1,6 @@
+export declare function parseArgs(): {
+    inputFile: string;
+    PORT: number;
+    reactVersion: string;
+    watchMode: boolean;
+};

package/dist/func/args.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseArgs = parseArgs;
+function parseArgs() {
+    const inputFile = process.argv[2];
+    if (!inputFile || inputFile.startsWith('-')) {
+        console.error('❌ Error: You must specify a file to compile as the first argument.');
+        console.log('💡 Usage: react-on-fly <file.js|jsx|ts|tsx> [-p <port>] [-rv <version>] [-w <boolean>]');
+        process.exit(1);
+    }
+    let PORT = 3000;
+    let reactVersion = 'latest';
+    let watchMode = false;
+    const args = process.argv.slice(3);
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        switch (arg) {
+            case '-p':
+                const parsedPort = parseInt(args[++i], 10);
+                if (!isNaN(parsedPort) && parsedPort > 0)
+                    PORT = parsedPort;
+                break;
+            case '-rv':
+                reactVersion = args[++i] || 'latest';
+                break;
+            case '-w':
+                const nextArg = args[i + 1];
+                if (nextArg === 'true' || nextArg === 'false') {
+                    watchMode = nextArg === 'true';
+                    i++;
+                }
+                else
+                    watchMode = true;
+                break;
+        }
+    }
+    return { inputFile, PORT, reactVersion, watchMode };
+}
+//# sourceMappingURL=args.js.map

package/dist/func/args.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"args.js","sourceRoot":"","sources":["../../src/func/args.ts"],"names":[],"mappings":";;AAAA,8BAmCC;AAnCD,SAAgB,SAAS;IACrB,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAElC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;QAC1C,OAAO,CAAC,KAAK,CAAC,oEAAoE,CAAC,CAAC;QACpF,OAAO,CAAC,GAAG,CAAC,wFAAwF,CAAC,CAAC;QACtG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC;IAED,IAAI,IAAI,GAAG,IAAI,CAAC;IAChB,IAAI,YAAY,GAAG,QAAQ,CAAC;IAC5B,IAAI,SAAS,GAAG,KAAK,CAAC;IAEtB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACnC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACnC,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QACpB,QAAQ,GAAG,EAAE,CAAC;YACV,KAAK,IAAI;gBACL,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;gBAC3C,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,UAAU,GAAG,CAAC;oBAAE,IAAI,GAAG,UAAU,CAAC;gBAC5D,MAAM;YACV,KAAK,KAAK;gBACN,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,QAAQ,CAAC;gBACrC,MAAM;YACV,KAAK,IAAI;gBACL,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC5B,IAAI,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;oBAC5C,SAAS,GAAG,OAAO,KAAK,MAAM,CAAC;oBAC/B,CAAC,EAAE,CAAC;gBACR,CAAC;;oBAAM,SAAS,GAAG,IAAI,CAAC;gBACxB,MAAM;QACd,CAAC;IACL,CAAC;IAED,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;AACxD,CAAC"}

package/dist/func/bundle.d.ts

@@ -0,0 +1,2 @@
+import { type BuildContext } from 'esbuild';
+export declare function bundleCode(entryPath: string, bundlePath: string, tempDir: string, watchMode: boolean): Promise<BuildContext | undefined>;

package/dist/func/bundle.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bundleCode = bundleCode;
+const esbuild_1 = require("esbuild");
+const node_path_1 = __importDefault(require("node:path"));
+async function bundleCode(entryPath, bundlePath, tempDir, watchMode) {
+    const buildOptions = {
+        entryPoints: [entryPath],
+        bundle: true,
+        outfile: bundlePath,
+        format: 'iife',
+        loader: { '.js': 'jsx', '.ts': 'tsx', '.jsx': 'jsx', '.tsx': 'tsx' },
+        nodePaths: [node_path_1.default.join(tempDir, 'node_modules')]
+    };
+    let ctx;
+    if (!watchMode)
+        await (0, esbuild_1.build)(buildOptions);
+    else {
+        ctx = await (0, esbuild_1.context)(buildOptions);
+        await ctx.watch();
+    }
+    return ctx;
+}
+//# sourceMappingURL=bundle.js.map

package/dist/func/bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle.js","sourceRoot":"","sources":["../../src/func/bundle.ts"],"names":[],"mappings":";;;;;AAIA,gCAmBC;AAvBD,qCAA+E;AAC/E,0DAA6B;AAGtB,KAAK,UAAU,UAAU,CAAC,SAAiB,EAAE,UAAkB,EAAE,OAAe,EAAE,SAAkB;IAEvG,MAAM,YAAY,GAAiB;QAC/B,WAAW,EAAE,CAAC,SAAS,CAAC;QACxB,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,UAAU;QACnB,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE;QACpE,SAAS,EAAE,CAAC,mBAAI,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;KAClD,CAAC;IAEF,IAAI,GAA6B,CAAC;IAClC,IAAI,CAAC,SAAS;QAAE,MAAM,IAAA,eAAK,EAAC,YAAY,CAAC,CAAC;SACrC,CAAC;QACF,GAAG,GAAG,MAAM,IAAA,iBAAO,EAAC,YAAY,CAAC,CAAC;QAClC,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC;IAED,OAAO,GAAG,CAAC;AACf,CAAC"}

package/dist/func/dependency.d.ts

@@ -0,0 +1 @@
+export declare function resolveDependecies(entryPath: string, tempDir: string, reactVersion: string, runtime: string): Promise<void>;

package/dist/func/dependency.js

@@ -0,0 +1,92 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveDependecies = resolveDependecies;
+const esbuild_1 = require("esbuild");
+const node_child_process_1 = require("node:child_process");
+const node_module_1 = require("node:module");
+const node_path_1 = __importDefault(require("node:path"));
+const promises_1 = require("fs/promises");
+async function resolveDependecies(entryPath, tempDir, reactVersion, runtime) {
+    const missingDeps = await scanDependencies(entryPath);
+    if (missingDeps.size > 0) {
+        await installDependencies(missingDeps, tempDir, reactVersion, runtime);
+    }
+}
+async function scanDependencies(entryPath) {
+    const missingDeps = new Set();
+    await (0, esbuild_1.build)({
+        entryPoints: [entryPath],
+        bundle: true,
+        write: false,
+        plugins: [
+            {
+                name: 'scan',
+                setup(build) {
+                    build.onResolve({ filter: /^[^.\/]/ }, async (args) => {
+                        if (args.pluginData?.isInternal)
+                            return null;
+                        if (node_path_1.default.isAbsolute(args.path))
+                            return null;
+                        if (args.path.startsWith('node:') || node_module_1.builtinModules.includes(args.path))
+                            return { external: true };
+                        const result = await build.resolve(args.path, {
+                            resolveDir: args.resolveDir,
+                            kind: args.kind,
+                            pluginData: { isInternal: true },
+                        });
+                        if (result.errors.length > 0) {
+                            const parts = args.path.split('/');
+                            const pkgName = args.path.startsWith('@') ? `${parts[0]}/${parts[1]}` : parts[0];
+                            if (/^(@[a-zA-Z0-9_.-]+\/)?[a-zA-Z0-9_.-]+$/.test(pkgName)) {
+                                missingDeps.add(pkgName);
+                            }
+                            return { external: true };
+                        }
+                        if (/[\/]node_modules[\/]/.test(result.path)) {
+                            return { external: true };
+                        }
+                        return null;
+                    });
+                },
+            },
+        ],
+        loader: { '.js': 'jsx', '.ts': 'tsx', '.jsx': 'jsx', '.tsx': 'tsx' },
+    });
+    return missingDeps;
+}
+async function installDependencies(missingDeps, tempDir, reactVersion, runtime) {
+    const depsObj = {};
+    const depsArray = Array.from(missingDeps).map(dep => {
+        if (dep === 'react' || dep === 'react-dom') {
+            depsObj[dep] = reactVersion === 'latest' ? '*' : reactVersion;
+            return `${dep}@${reactVersion}`;
+        }
+        depsObj[dep] = '*';
+        return dep;
+    });
+    await (0, promises_1.writeFile)(node_path_1.default.join(tempDir, 'package.json'), JSON.stringify({ name: 'react-on-fly-temp', version: '1.0.0', dependencies: depsObj }, null, 2));
+    const installCmd = getInstallCommand(runtime);
+    console.log(`⚛️  Using React version: ${reactVersion}
+📦 Installing missing dependencies with ${installCmd.split(' ')[0]}: ${depsArray.join(', ')}...`);
+    (0, node_child_process_1.execSync)(installCmd, { cwd: tempDir, stdio: 'inherit' });
+}
+function getInstallCommand(runtime) {
+    const userAgent = process.env.npm_config_user_agent || '';
+    if (userAgent.includes('bun'))
+        return 'bun install';
+    if (userAgent.includes('deno'))
+        return 'deno install --node-modules-dir';
+    if (userAgent.includes('pnpm'))
+        return 'pnpm install';
+    if (userAgent.includes('yarn'))
+        return 'yarn install';
+    if (runtime === 'bun')
+        return 'bun install';
+    if (runtime === 'deno')
+        return 'deno install --node-modules-dir';
+    return 'npm install';
+}
+//# sourceMappingURL=dependency.js.map

package/dist/func/dependency.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependency.js","sourceRoot":"","sources":["../../src/func/dependency.ts"],"names":[],"mappings":"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"}

package/dist/func/files.d.ts

@@ -0,0 +1,6 @@
+export declare function ensureFileExists(inputFile: string): Promise<string>;
+export declare function generateEntryFile(userComponentPath: string, reactVersion: string): Promise<{
+    bundlePath: string;
+    tempDir: string;
+    entryPath: string;
+}>;

package/dist/func/files.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ensureFileExists = ensureFileExists;
+exports.generateEntryFile = generateEntryFile;
+const promises_1 = require("node:fs/promises");
+const promises_2 = require("node:fs/promises");
+const node_path_1 = __importDefault(require("node:path"));
+const os_1 = __importDefault(require("os"));
+async function ensureFileExists(inputFile) {
+    const absoluteInputPath = node_path_1.default.resolve(process.cwd(), inputFile).replace(/\\/g, '/');
+    try {
+        await (0, promises_2.access)(absoluteInputPath);
+        return absoluteInputPath;
+    }
+    catch {
+        console.error(`❌ Error: File not found (${absoluteInputPath})`);
+        process.exit(1);
+    }
+}
+async function generateEntryFile(userComponentPath, reactVersion) {
+    const tempDir = await (0, promises_1.mkdtemp)(node_path_1.default.join(os_1.default.tmpdir(), 'react-on-fly-'));
+    const bundlePath = node_path_1.default.join(tempDir, 'bundle.js');
+    const entryPath = node_path_1.default.join(tempDir, 'entry.jsx');
+    const parsedVersion = parseInt(reactVersion.split('.')[0], 10);
+    const isReact18OrLater = reactVersion === 'latest' || isNaN(parsedVersion) || parsedVersion >= 18;
+    const entryCode = `import React from 'react';
+${isReact18OrLater ?
+        `import { createRoot } from 'react-dom/client';
+import UserApp from '${userComponentPath}';
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(React.createElement(UserApp));` :
+        `import ReactDOM from 'react-dom';
+import UserApp from '${userComponentPath}';
+
+const container = document.getElementById('root');
+ReactDOM.render(React.createElement(UserApp), container);
+`}`;
+    await (0, promises_1.writeFile)(entryPath, entryCode);
+    return { bundlePath, tempDir, entryPath };
+}
+//# sourceMappingURL=files.js.map

package/dist/func/files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"files.js","sourceRoot":"","sources":["../../src/func/files.ts"],"names":[],"mappings":";;;;;AAMA,4CASC;AACD,8CAyBC;AAzCD,+CAAsD;AACtD,+CAA0C;AAC1C,0DAA6B;AAC7B,4CAAoB;AAGb,KAAK,UAAU,gBAAgB,CAAC,SAAiB;IACpD,MAAM,iBAAiB,GAAG,mBAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACrF,IAAI,CAAC;QACD,MAAM,IAAA,iBAAM,EAAC,iBAAiB,CAAC,CAAC;QAChC,OAAO,iBAAiB,CAAC;IAC7B,CAAC;IAAC,MAAM,CAAC;QACL,OAAO,CAAC,KAAK,CAAC,4BAA4B,iBAAiB,GAAG,CAAC,CAAC;QAChE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC;AACL,CAAC;AACM,KAAK,UAAU,iBAAiB,CAAC,iBAAyB,EAAE,YAAoB;IACnF,MAAM,OAAO,GAAG,MAAM,IAAA,kBAAO,EAAC,mBAAI,CAAC,IAAI,CAAC,YAAE,CAAC,MAAM,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC;IACvE,MAAM,UAAU,GAAG,mBAAI,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,mBAAI,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC/D,MAAM,gBAAgB,GAAG,YAAY,KAAK,QAAQ,IAAI,KAAK,CAAC,aAAa,CAAC,IAAI,aAAa,IAAI,EAAE,CAAC;IAElG,MAAM,SAAS,GAAG;EACpB,gBAAgB,CAAC,CAAC;QACR;uBACW,iBAAiB;;;;2CAIG,CAAC,CAAC;QAEjC;uBACW,iBAAiB;;;;CAIvC,EAAE,CAAC;IAEA,MAAM,IAAA,oBAAS,EAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IACtC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;AAC9C,CAAC"}

package/dist/func/server.d.ts

@@ -0,0 +1,4 @@
+import type { BuildContext } from 'esbuild';
+export declare function resolveRuntime(): "bun" | "deno" | "node";
+export declare function createWebServer(PORT: number, bundlePath: string, watchMode: boolean, runtime?: string): Promise<Bun.Server<undefined> | Deno.HttpServer<Deno.NetAddr> | import("node:http").Server<typeof import("node:http").IncomingMessage, typeof import("node:http").ServerResponse>>;
+export declare function setupCleanup(tempDir: string, ctx?: BuildContext): void;

package/dist/func/server.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveRuntime = resolveRuntime;
+exports.createWebServer = createWebServer;
+exports.setupCleanup = setupCleanup;
+const promises_1 = require("node:fs/promises");
+function resolveRuntime() {
+    if (typeof Bun !== 'undefined')
+        return 'bun';
+    if (typeof Deno !== 'undefined')
+        return 'deno';
+    return 'node';
+}
+async function createWebServer(PORT, bundlePath, watchMode, runtime = 'node') {
+    const content = (0, promises_1.readFile)(bundlePath, 'utf8');
+    let server;
+    switch (runtime) {
+        case 'bun': {
+            const { default: bunServer } = await Promise.resolve().then(() => __importStar(require('../server/bun')));
+            server = bunServer(PORT, content);
+            break;
+        }
+        case 'deno': {
+            const { default: denoServer } = await Promise.resolve().then(() => __importStar(require('../server/deno')));
+            server = denoServer(PORT, content);
+            break;
+        }
+        case 'node':
+        default: {
+            const { default: nodeServer } = await Promise.resolve().then(() => __importStar(require('../server/node')));
+            server = nodeServer(PORT, content);
+            break;
+        }
+    }
+    console.log(`🚀 Ready! Your component is served at: http://localhost:${PORT}\n${watchMode ? '👀 Watching for file changes...' : ''}\nPress Ctrl+C to stop the process.`);
+    return server;
+}
+function setupCleanup(tempDir, ctx) {
+    process.on('SIGINT', async () => {
+        console.log('\nShutting down the server and cleaning up temporary files...');
+        if (ctx) {
+            await ctx.dispose();
+        }
+        await (0, promises_1.rm)(tempDir, { recursive: true, force: true });
+        process.exit(0);
+    });
+}
+//# sourceMappingURL=server.js.map

package/dist/func/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../../src/func/server.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wCAIC;AAAC,0CAuBD;AAED,oCASC;AAzCD,+CAAgD;AAGhD,SAAgB,cAAc;IAC1B,IAAI,OAAO,GAAG,KAAK,WAAW;QAAE,OAAO,KAAK,CAAC;IAC7C,IAAI,OAAO,IAAI,KAAK,WAAW;QAAE,OAAO,MAAM,CAAC;IAC/C,OAAO,MAAM,CAAC;AAClB,CAAC;AAAQ,KAAK,UAAU,eAAe,CAAC,IAAY,EAAE,UAAkB,EAAE,SAAkB,EAAE,UAAkB,MAAM;IAClH,MAAM,OAAO,GAAG,IAAA,mBAAQ,EAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IAC7C,IAAI,MAAM,CAAC;IACX,QAAQ,OAAO,EAAE,CAAC;QACd,KAAK,KAAK,CAAC,CAAC,CAAC;YACT,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,wDAAa,eAAe,GAAC,CAAC;YAC7D,MAAM,GAAG,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAClC,MAAM;QACV,CAAC;QACD,KAAK,MAAM,CAAC,CAAC,CAAC;YACV,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,wDAAa,gBAAgB,GAAC,CAAC;YAC/D,MAAM,GAAG,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YACnC,MAAM;QACV,CAAC;QACD,KAAK,MAAM,CAAC;QACZ,OAAO,CAAC,CAAC,CAAC;YACN,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,wDAAa,gBAAgB,GAAC,CAAC;YAC/D,MAAM,GAAG,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YACnC,MAAM;QACV,CAAC;IACL,CAAC;IACD,OAAO,CAAC,GAAG,CAAC,2DAA2D,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE,qCAAqC,CAAC,CAAC;IACzK,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,SAAgB,YAAY,CAAC,OAAe,EAAE,GAAkB;IAC5D,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE;QAC5B,OAAO,CAAC,GAAG,CAAC,+DAA+D,CAAC,CAAC;QAC7E,IAAI,GAAG,EAAE,CAAC;YACN,MAAM,GAAG,CAAC,OAAO,EAAE,CAAC;QACxB,CAAC;QACD,MAAM,IAAA,aAAE,EAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACpD,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;AACP,CAAC"}

package/dist/main.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const dependency_1 = require("./func/dependency");
+const args_1 = require("./func/args");
+const files_1 = require("./func/files");
+const bundle_1 = require("./func/bundle");
+const server_1 = require("./func/server");
+async function main() {
+    const { inputFile, PORT, reactVersion, watchMode } = (0, args_1.parseArgs)();
+    const absoluteInputPath = await (0, files_1.ensureFileExists)(inputFile);
+    const { entryPath, bundlePath, tempDir } = await (0, files_1.generateEntryFile)(absoluteInputPath, reactVersion);
+    console.log('🔍 Scanning for missing dependencies...');
+    const runtime = (0, server_1.resolveRuntime)();
+    await (0, dependency_1.resolveDependecies)(entryPath, tempDir, reactVersion, runtime);
+    console.log('⚡ Compiling...');
+    const ctx = await (0, bundle_1.bundleCode)(entryPath, bundlePath, tempDir, watchMode);
+    console.log(`⚙️  Starting server using ${runtime} runtime`);
+    (0, server_1.createWebServer)(PORT, bundlePath, watchMode, runtime).
+        finally(() => (0, server_1.setupCleanup)(tempDir, ctx));
+}
+main().catch(console.error);
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":";;;AACA,kDAAuD;AACvD,sCAAwC;AACxC,wCAAmE;AACnE,0CAA2C;AAC3C,0CAA8E;AAE9E,KAAK,UAAU,IAAI;IACf,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,IAAA,gBAAS,GAAE,CAAC;IACjE,MAAM,iBAAiB,GAAG,MAAM,IAAA,wBAAgB,EAAC,SAAS,CAAC,CAAC;IAC5D,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,MAAM,IAAA,yBAAiB,EAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;IACpG,OAAO,CAAC,GAAG,CAAC,yCAAyC,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,IAAA,uBAAc,GAAE,CAAA;IAChC,MAAM,IAAA,+BAAkB,EAAC,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC;IACpE,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC9B,MAAM,GAAG,GAAG,MAAM,IAAA,mBAAU,EAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;IACxE,OAAO,CAAC,GAAG,CAAC,6BAA6B,OAAO,UAAU,CAAC,CAAA;IAC3D,IAAA,wBAAe,EAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC;QACjD,OAAO,CAAC,GAAG,EAAE,CAAC,IAAA,qBAAY,EAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;AAClD,CAAC;AAED,IAAI,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC"}

package/dist/server/bun.d.ts

@@ -0,0 +1 @@
+export default function bunServer(PORT: number, content: Promise<string>): Bun.Server<undefined>;

package/dist/server/bun.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = bunServer;
+function bunServer(PORT, content) {
+    const server = Bun.serve({
+        port: PORT,
+        async fetch(req) {
+            const url = new URL(req.url);
+            if (url.pathname === '/favicon.ico') {
+                return new Response(null, { status: 204 });
+            }
+            if (url.pathname === '/bundle.js') {
+                try {
+                    return new Response(await content, {
+                        headers: { 'Content-Type': 'application/javascript' }
+                    });
+                }
+                catch (err) {
+                    if (err.code === 'ENOENT') {
+                        return new Response('console.error("Bundle not found. Check the terminal for build errors.");', {
+                            status: 404,
+                            headers: { 'Content-Type': 'application/javascript' }
+                        });
+                    }
+                    else {
+                        return new Response(`console.error("Error reading bundle: ${err instanceof Error ? err.message : String(err)}");`, {
+                            status: 500,
+                            headers: { 'Content-Type': 'application/javascript' }
+                        });
+                    }
+                }
+            }
+            else {
+                let usesTailwind = false;
+                try {
+                    usesTailwind = /["'`][^"'`]*\b(bg-[a-z]+-\d+|text-[a-z]+-\d+|border-[a-z]+-\d+|[pm][trblxy]?-[0-9]+|w-[0-9]+|h-[0-9]+|flex|grid|rounded(?:-(?:sm|md|lg|xl|2xl|3xl|full|none))?)\b[^"'`]*["'`]/.test(await content);
+                }
+                catch (err) { }
+                const tailwindScript = usesTailwind ? '<script src="https://cdn.tailwindcss.com"></script>' : '';
+                return new Response(`
+                <!DOCTYPE html>
+                <html lang="en">
+                  <head>
+                    <meta charset="UTF-8" />
+                    <title>React On The Fly</title>
+                    <link rel="icon" href="data:," />
+                    ${tailwindScript}
+                  </head>
+                  <body>
+                    <div id="root"></div>
+                    <script src="/bundle.js"></script>
+                  </body>
+                </html>
+              `, {
+                    headers: { 'Content-Type': 'text/html' }
+                });
+            }
+        }
+    });
+    return server;
+}
+//# sourceMappingURL=bun.js.map

package/dist/server/bun.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bun.js","sourceRoot":"","sources":["../../src/server/bun.ts"],"names":[],"mappings":";;AAAA,4BAyDC;AAzDD,SAAwB,SAAS,CAAC,IAAY,EAAE,OAAwB;IACpE,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC;QACrB,IAAI,EAAE,IAAI;QACV,KAAK,CAAC,KAAK,CAAC,GAAY;YACpB,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAE7B,IAAI,GAAG,CAAC,QAAQ,KAAK,cAAc,EAAE,CAAC;gBAClC,OAAO,IAAI,QAAQ,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;YAC/C,CAAC;YAED,IAAI,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;gBAChC,IAAI,CAAC;oBACD,OAAO,IAAI,QAAQ,CAAC,MAAM,OAAO,EAAE;wBAC/B,OAAO,EAAE,EAAE,cAAc,EAAE,wBAAwB,EAAE;qBACxD,CAAC,CAAC;gBACP,CAAC;gBAAC,OAAO,GAAQ,EAAE,CAAC;oBAChB,IAAI,GAAG,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;wBACxB,OAAO,IAAI,QAAQ,CAAC,0EAA0E,EAAE;4BAC5F,MAAM,EAAE,GAAG;4BACX,OAAO,EAAE,EAAE,cAAc,EAAE,wBAAwB,EAAE;yBACxD,CAAC,CAAC;oBACP,CAAC;yBAAM,CAAC;wBACJ,OAAO,IAAI,QAAQ,CAAC,wCAAwC,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE;4BAC/G,MAAM,EAAE,GAAG;4BACX,OAAO,EAAE,EAAE,cAAc,EAAE,wBAAwB,EAAE;yBACxD,CAAC,CAAC;oBACP,CAAC;gBACL,CAAC;YACL,CAAC;iBAAM,CAAC;gBACJ,IAAI,YAAY,GAAG,KAAK,CAAC;gBACzB,IAAI,CAAC;oBACD,YAAY,GAAG,+KAA+K,CAAC,IAAI,CAAC,MAAM,OAAO,CAAC,CAAC;gBACvN,CAAC;gBAAC,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC;gBACjB,MAAM,cAAc,GAAG,YAAY,CAAC,CAAC,CAAC,qDAAqD,CAAC,CAAC,CAAC,EAAE,CAAC;gBAEjG,OAAO,IAAI,QAAQ,CAAC;;;;;;;sBAOd,cAAc;;;;;;;eAOrB,EAAE;oBACG,OAAO,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE;iBAC3C,CAAC,CAAC;YACP,CAAC;QACL,CAAC;KACJ,CAAC,CAAA;IAEF,OAAO,MAAM,CAAA;AACjB,CAAC"}

package/dist/server/deno.d.ts

@@ -0,0 +1 @@
+export default function denoServer(PORT: number, content: Promise<string>): Promise<Deno.HttpServer<Deno.NetAddr>>;

package/dist/server/deno.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = denoServer;
+async function denoServer(PORT, content) {
+    const server = Deno.serve({ port: PORT }, async (req) => {
+        const url = new URL(req.url);
+        if (url.pathname === '/favicon.ico') {
+            return new Response(null, { status: 204 });
+        }
+        if (url.pathname === '/bundle.js') {
+            try {
+                return new Response(await content, {
+                    headers: { 'Content-Type': 'application/javascript' }
+                });
+            }
+            catch (err) {
+                if (err.code === 'ENOENT') {
+                    return new Response('console.error("Bundle not found. Check the terminal for build errors.");', {
+                        status: 404,
+                        headers: { 'Content-Type': 'application/javascript' }
+                    });
+                }
+                else {
+                    return new Response(`console.error("Error reading bundle: ${err instanceof Error ? err.message : String(err)}");`, {
+                        status: 500,
+                        headers: { 'Content-Type': 'application/javascript' }
+                    });
+                }
+            }
+        }
+        else {
+            let usesTailwind = false;
+            try {
+                usesTailwind = /["'`][^"'`]*\b(bg-[a-z]+-\d+|text-[a-z]+-\d+|border-[a-z]+-\d+|[pm][trblxy]?-[0-9]+|w-[0-9]+|h-[0-9]+|flex|grid|rounded(?:-(?:sm|md|lg|xl|2xl|3xl|full|none))?)\b[^"'`]*["'`]/.test(await content);
+            }
+            catch (err) { }
+            const tailwindScript = usesTailwind ? '<script src="https://cdn.tailwindcss.com"></script>' : '';
+            return new Response(`
+                <!DOCTYPE html>
+                <html lang="en">
+                  <head>
+                    <meta charset="UTF-8" />
+                    <title>React On The Fly</title>
+                    <link rel="icon" href="data:," />
+                    ${tailwindScript}
+                  </head>
+                  <body>
+                    <div id="root"></div>
+                    <script src="/bundle.js"></script>
+                  </body>
+                </html>
+              `, {
+                headers: { 'Content-Type': 'text/html' }
+            });
+        }
+    });
+    return server;
+}
+//# sourceMappingURL=deno.js.map

package/dist/server/deno.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deno.js","sourceRoot":"","sources":["../../src/server/deno.ts"],"names":[],"mappings":";;AAAA,6BAsDC;AAtDc,KAAK,UAAU,UAAU,CAAC,IAAY,EAAE,OAAuB;IAC1E,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,GAAY,EAAE,EAAE;QACzD,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAE7B,IAAI,GAAG,CAAC,QAAQ,KAAK,cAAc,EAAE,CAAC;YAClC,OAAO,IAAI,QAAQ,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;QAC/C,CAAC;QAED,IAAI,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;YAChC,IAAI,CAAC;gBACD,OAAO,IAAI,QAAQ,CAAC,MAAM,OAAO,EAAE;oBAC/B,OAAO,EAAE,EAAE,cAAc,EAAE,wBAAwB,EAAE;iBACxD,CAAC,CAAC;YACP,CAAC;YAAC,OAAO,GAAQ,EAAE,CAAC;gBAChB,IAAI,GAAG,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;oBACxB,OAAO,IAAI,QAAQ,CAAC,0EAA0E,EAAE;wBAC5F,MAAM,EAAE,GAAG;wBACX,OAAO,EAAE,EAAE,cAAc,EAAE,wBAAwB,EAAE;qBACxD,CAAC,CAAC;gBACP,CAAC;qBAAM,CAAC;oBACJ,OAAO,IAAI,QAAQ,CAAC,wCAAwC,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE;wBAC/G,MAAM,EAAE,GAAG;wBACX,OAAO,EAAE,EAAE,cAAc,EAAE,wBAAwB,EAAE;qBACxD,CAAC,CAAC;gBACP,CAAC;YACL,CAAC;QACL,CAAC;aAAM,CAAC;YACJ,IAAI,YAAY,GAAG,KAAK,CAAC;YACzB,IAAI,CAAC;gBACD,YAAY,GAAG,+KAA+K,CAAC,IAAI,CAAC,MAAM,OAAO,CAAC,CAAC;YACvN,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC;YACjB,MAAM,cAAc,GAAG,YAAY,CAAC,CAAC,CAAC,qDAAqD,CAAC,CAAC,CAAC,EAAE,CAAC;YAEjG,OAAO,IAAI,QAAQ,CAAC;;;;;;;sBAOd,cAAc;;;;;;;eAOrB,EAAE;gBACG,OAAO,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE;aAC3C,CAAC,CAAC;QACP,CAAC;IACT,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAA;AACjB,CAAC"}

package/dist/server/node.d.ts

@@ -0,0 +1,2 @@
+import http from 'http';
+export default function nodeServer(PORT: number, content: Promise<string>): http.Server;

package/dist/server/node.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = nodeServer;
+const http_1 = __importDefault(require("http"));
+function nodeServer(PORT, content) {
+    const server = http_1.default.createServer(async (req, res) => {
+        req.on('error', () => { });
+        if (req.url === '/favicon.ico') {
+            if (!res.headersSent)
+                res.writeHead(204);
+            return res.end();
+        }
+        if (req.url === '/bundle.js') {
+            try {
+                if (!res.headersSent)
+                    res.writeHead(200, { 'Content-Type': 'application/javascript' });
+                res.end(await content);
+            }
+            catch (err) {
+                if (err.code === 'ENOENT') {
+                    if (!res.headersSent)
+                        res.writeHead(404, { 'Content-Type': 'application/javascript' });
+                    res.end('console.error("Bundle not found. Check the terminal for build errors.");');
+                }
+                else {
+                    if (!res.headersSent)
+                        res.writeHead(500, { 'Content-Type': 'application/javascript' });
+                    return res.end(`console.error("Error reading bundle: ${err instanceof Error ? err.message : String(err)}");`);
+                }
+            }
+        }
+        else {
+            let usesTailwind = false;
+            try {
+                usesTailwind = /["'`][^"'`]*\b(bg-[a-z]+-\d+|text-[a-z]+-\d+|border-[a-z]+-\d+|[pm][trblxy]?-[0-9]+|w-[0-9]+|h-[0-9]+|flex|grid|rounded(?:-(?:sm|md|lg|xl|2xl|3xl|full|none))?)\b[^"'`]*["'`]/.test(await content);
+            }
+            catch (err) { }
+            const tailwindScript = usesTailwind ? '<script src="https://cdn.tailwindcss.com"></script>' : '';
+            if (!res.headersSent)
+                res.writeHead(200, { 'Content-Type': 'text/html' });
+            res.end(`
+        <!DOCTYPE html>
+        <html lang="en">
+          <head>
+            <meta charset="UTF-8" />
+            <title>React On The Fly</title>
+            <link rel="icon" href="data:," />
+            ${tailwindScript}
+          </head>
+          <body>
+            <div id="root"></div>
+            <script src="/bundle.js"></script>
+          </body>
+        </html>
+      `);
+        }
+    });
+    server.listen(PORT);
+    return server;
+}
+//# sourceMappingURL=node.js.map

package/dist/server/node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node.js","sourceRoot":"","sources":["../../src/server/node.ts"],"names":[],"mappings":";;;;;AAEA,6BAmDC;AArDD,gDAAwB;AAExB,SAAwB,UAAU,CAAC,IAAY,EAAE,OAAwB;IACrE,MAAM,MAAM,GAAG,cAAI,CAAC,YAAY,CAAC,KAAK,EAAE,GAAyB,EAAE,GAAwB,EAAE,EAAE;QAC3F,GAAG,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QAE3B,IAAI,GAAG,CAAC,GAAG,KAAK,cAAc,EAAE,CAAC;YAC7B,IAAI,CAAC,GAAG,CAAC,WAAW;gBAAE,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;YACzC,OAAO,GAAG,CAAC,GAAG,EAAE,CAAC;QACrB,CAAC;QAED,IAAI,GAAG,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YAC3B,IAAI,CAAC;gBACD,IAAI,CAAC,GAAG,CAAC,WAAW;oBAAE,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,EAAE,cAAc,EAAE,wBAAwB,EAAE,CAAC,CAAC;gBACvF,GAAG,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;YAC3B,CAAC;YAAC,OAAO,GAAQ,EAAE,CAAC;gBAChB,IAAI,GAAG,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;oBACxB,IAAI,CAAC,GAAG,CAAC,WAAW;wBAAE,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,EAAE,cAAc,EAAE,wBAAwB,EAAE,CAAC,CAAC;oBACvF,GAAG,CAAC,GAAG,CAAC,0EAA0E,CAAC,CAAC;gBACxF,CAAC;qBAAM,CAAC;oBACJ,IAAI,CAAC,GAAG,CAAC,WAAW;wBAAE,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,EAAE,cAAc,EAAE,wBAAwB,EAAE,CAAC,CAAC;oBACvF,OAAO,GAAG,CAAC,GAAG,CAAC,wCAAwC,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBAClH,CAAC;YACL,CAAC;QACL,CAAC;aAAM,CAAC;YACJ,IAAI,YAAY,GAAG,KAAK,CAAC;YACzB,IAAI,CAAC;gBACD,YAAY,GAAG,+KAA+K,CAAC,IAAI,CAAC,MAAM,OAAO,CAAC,CAAC;YACvN,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC;YACjB,MAAM,cAAc,GAAG,YAAY,CAAC,CAAC,CAAC,qDAAqD,CAAC,CAAC,CAAC,EAAE,CAAC;YAEjG,IAAI,CAAC,GAAG,CAAC,WAAW;gBAAE,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC,CAAC;YAC1E,GAAG,CAAC,GAAG,CAAC;;;;;;;cAON,cAAc;;;;;;;OAOrB,CAAC,CAAC;QACD,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAEpB,OAAO,MAAM,CAAC;AAClB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-fly",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Compile and serve a react file on the fly",
   "engines": {
     "node": ">=18.0.0",
@@ -11,9 +11,10 @@
   "bugs": {
     "url": "https://github.com/zMattew/react-fly/issues"
   },
-  "main": "dist/cli.js",
+  "main": "dist/main.js",
   "author": "zMattew_",
   "license": "MIT",
+  "type": "commonjs",
   "repository": "zMattew/react-fly",
   "keywords": [
     "react",
@@ -31,9 +32,11 @@
     "dev-server"
   ],
   "bin": {
-    "react-on-fly": "./dist/cli.js"
+    "react-on-fly": "./dist/main.js"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsc",
     "prepublishOnly": "npm run build",
@@ -43,6 +46,8 @@
     "esbuild": "^0.27.4"
   },
   "devDependencies": {
+    "@types/bun": "^1.3.11",
+    "@types/deno": "^2.5.0",
     "@types/node": "^25.5.0",
     "typescript": "^6.0.1-rc"
   }

package/dist/cli.js

@@ -1,261 +0,0 @@
-#!/usr/bin/env node
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const path_1 = __importDefault(require("path"));
-const promises_1 = __importDefault(require("fs/promises"));
-const http_1 = __importDefault(require("http"));
-const esbuild_1 = require("esbuild");
-const os_1 = __importDefault(require("os"));
-const module_1 = require("module");
-const child_process_1 = require("child_process");
-async function main() {
-    const { inputFile, PORT, reactVersion, watchMode } = parseArgs();
-    const absoluteInputPath = await ensureFileExists(inputFile);
-    const { entryPath, bundlePath, tempDir } = await generateEntryFile(absoluteInputPath, reactVersion);
-    console.log('🔍 Scanning for missing dependencies...');
-    await resolveDependecies(entryPath, tempDir, reactVersion);
-    console.log('⚡ Compiling...');
-    const ctx = await bundleCode(entryPath, bundlePath, tempDir, watchMode);
-    createWebServer(PORT, bundlePath, watchMode);
-    setupCleanup(tempDir, ctx);
-}
-function parseArgs() {
-    const inputFile = process.argv[2];
-    if (!inputFile || inputFile.startsWith('-')) {
-        console.error('❌ Error: You must specify a file to compile as the first argument.');
-        console.log('💡 Usage: react-on-fly <file.js|jsx|ts|tsx> [-p <port>] [-rv <version>] [-w <boolean>]');
-        process.exit(1);
-    }
-    let PORT = 3000;
-    let reactVersion = 'latest';
-    let watchMode = false;
-    const args = process.argv.slice(3);
-    for (let i = 0; i < args.length; i++) {
-        const arg = args[i];
-        switch (arg) {
-            case '-p':
-                const parsedPort = parseInt(args[++i], 10);
-                if (!isNaN(parsedPort) && parsedPort > 0)
-                    PORT = parsedPort;
-                break;
-            case '-rv':
-                reactVersion = args[++i] || 'latest';
-                break;
-            case '-w':
-                const nextArg = args[i + 1];
-                if (nextArg === 'true' || nextArg === 'false') {
-                    watchMode = nextArg === 'true';
-                    i++;
-                }
-                else
-                    watchMode = true;
-                break;
-        }
-    }
-    return { inputFile, PORT, reactVersion, watchMode };
-}
-async function ensureFileExists(inputFile) {
-    const absoluteInputPath = path_1.default.resolve(process.cwd(), inputFile).replace(/\\/g, '/');
-    try {
-        await promises_1.default.access(absoluteInputPath);
-        return absoluteInputPath;
-    }
-    catch {
-        console.error(`❌ Error: File not found (${absoluteInputPath})`);
-        process.exit(1);
-    }
-}
-async function generateEntryFile(userComponentPath, reactVersion) {
-    const tempDir = await promises_1.default.mkdtemp(path_1.default.join(os_1.default.tmpdir(), 'react-on-fly-'));
-    const bundlePath = path_1.default.join(tempDir, 'bundle.js');
-    const entryPath = path_1.default.join(tempDir, 'entry.jsx');
-    const parsedVersion = parseInt(reactVersion.split('.')[0], 10);
-    const isReact18OrLater = reactVersion === 'latest' || isNaN(parsedVersion) || parsedVersion >= 18;
-    const entryCode = `import React from 'react';
-${isReact18OrLater ?
-        `import { createRoot } from 'react-dom/client';
-import UserApp from '${userComponentPath}';
-
-const container = document.getElementById('root');
-const root = createRoot(container);
-root.render(React.createElement(UserApp));` :
-        `import ReactDOM from 'react-dom';
-import UserApp from '${userComponentPath}';
-
-const container = document.getElementById('root');
-ReactDOM.render(React.createElement(UserApp), container);
-`}`;
-    await promises_1.default.writeFile(entryPath, entryCode);
-    return { bundlePath, tempDir, entryPath };
-}
-async function resolveDependecies(entryPath, tempDir, reactVersion) {
-    const missingDeps = await scanDependencies(entryPath);
-    if (missingDeps.size > 0) {
-        await installDependencies(missingDeps, tempDir, reactVersion);
-    }
-}
-async function scanDependencies(entryPath) {
-    const missingDeps = new Set();
-    await (0, esbuild_1.build)({
-        entryPoints: [entryPath],
-        bundle: true,
-        write: false,
-        plugins: [
-            {
-                name: 'scan',
-                setup(build) {
-                    build.onResolve({ filter: /^[^.\/]/ }, async (args) => {
-                        if (args.pluginData?.isInternal)
-                            return null;
-                        if (path_1.default.isAbsolute(args.path))
-                            return null;
-                        if (args.path.startsWith('node:') || module_1.builtinModules.includes(args.path))
-                            return { external: true };
-                        const result = await build.resolve(args.path, {
-                            resolveDir: args.resolveDir,
-                            kind: args.kind,
-                            pluginData: { isInternal: true },
-                        });
-                        if (result.errors.length > 0) {
-                            const parts = args.path.split('/');
-                            const pkgName = args.path.startsWith('@') ? `${parts[0]}/${parts[1]}` : parts[0];
-                            if (/^(@[a-zA-Z0-9_.-]+\/)?[a-zA-Z0-9_.-]+$/.test(pkgName)) {
-                                missingDeps.add(pkgName);
-                            }
-                            return { external: true };
-                        }
-                        if (/[\/]node_modules[\/]/.test(result.path)) {
-                            return { external: true };
-                        }
-                        return null;
-                    });
-                },
-            },
-        ],
-        loader: { '.js': 'jsx', '.ts': 'tsx', '.jsx': 'jsx', '.tsx': 'tsx' },
-    });
-    return missingDeps;
-}
-async function installDependencies(missingDeps, tempDir, reactVersion) {
-    const depsObj = {};
-    const depsArray = Array.from(missingDeps).map(dep => {
-        if (dep === 'react' || dep === 'react-dom') {
-            depsObj[dep] = reactVersion === 'latest' ? '*' : reactVersion;
-            return `${dep}@${reactVersion}`;
-        }
-        depsObj[dep] = '*';
-        return dep;
-    });
-    console.log(`⚛️  Using React version: ${reactVersion}
-📦 Installing missing dependencies: ${depsArray.join(', ')}...`);
-    await promises_1.default.writeFile(path_1.default.join(tempDir, 'package.json'), JSON.stringify({ name: 'react-on-fly-temp', version: '1.0.0', dependencies: depsObj }, null, 2));
-    let installCmd = 'npm install';
-    const userAgent = process.env.npm_config_user_agent || '';
-    // @ts-ignore
-    if (typeof Bun !== 'undefined' || userAgent.includes('bun')) {
-        installCmd = 'bun install';
-        // @ts-ignore
-    }
-    else if (typeof Deno !== 'undefined') {
-        installCmd = 'deno install --node-modules-dir';
-    }
-    else if (userAgent.includes('pnpm')) {
-        installCmd = 'pnpm install';
-    }
-    else if (userAgent.includes('yarn')) {
-        installCmd = 'yarn install';
-    }
-    (0, child_process_1.execSync)(installCmd, { cwd: tempDir, stdio: 'inherit' });
-}
-async function bundleCode(entryPath, bundlePath, tempDir, watchMode) {
-    const buildOptions = {
-        entryPoints: [entryPath],
-        bundle: true,
-        outfile: bundlePath,
-        format: 'iife',
-        loader: { '.js': 'jsx', '.ts': 'tsx', '.jsx': 'jsx', '.tsx': 'tsx' },
-        nodePaths: [path_1.default.join(tempDir, 'node_modules')]
-    };
-    let ctx;
-    if (!watchMode)
-        await (0, esbuild_1.build)(buildOptions);
-    else {
-        ctx = await (0, esbuild_1.context)(buildOptions);
-        await ctx.watch();
-    }
-    return ctx;
-}
-function createWebServer(PORT, bundlePath, watchMode) {
-    const server = http_1.default.createServer(async (req, res) => {
-        req.on('error', () => { });
-        if (req.url === '/favicon.ico') {
-            if (!res.headersSent)
-                res.writeHead(204);
-            return res.end();
-        }
-        if (req.url === '/bundle.js') {
-            try {
-                const content = await promises_1.default.readFile(bundlePath);
-                if (!res.headersSent)
-                    res.writeHead(200, { 'Content-Type': 'application/javascript' });
-                res.end(content);
-            }
-            catch (err) {
-                if (err.code === 'ENOENT') {
-                    if (!res.headersSent)
-                        res.writeHead(404, { 'Content-Type': 'application/javascript' });
-                    res.end('console.error("Bundle not found. Check the terminal for build errors.");');
-                }
-                else {
-                    if (!res.headersSent)
-                        res.writeHead(500, { 'Content-Type': 'application/javascript' });
-                    return res.end(`console.error("Error reading bundle: ${err instanceof Error ? err.message : String(err)}");`);
-                }
-            }
-        }
-        else {
-            let usesTailwind = false;
-            try {
-                const bundleCode = await promises_1.default.readFile(bundlePath, 'utf8');
-                usesTailwind = /["'`][^"'`]*\b(bg-[a-z]+-\d+|text-[a-z]+-\d+|border-[a-z]+-\d+|[pm][trblxy]?-[0-9]+|w-[0-9]+|h-[0-9]+|flex|grid|rounded(?:-(?:sm|md|lg|xl|2xl|3xl|full|none))?)\b[^"'`]*["'`]/.test(bundleCode);
-            }
-            catch (err) { }
-            const tailwindScript = usesTailwind ? '<script src="https://cdn.tailwindcss.com"></script>' : '';
-            if (!res.headersSent)
-                res.writeHead(200, { 'Content-Type': 'text/html' });
-            res.end(`
-        <!DOCTYPE html>
-        <html lang="en">
-          <head>
-            <meta charset="UTF-8" />
-            <title>React On The Fly</title>
-            <link rel="icon" href="data:," />
-            ${tailwindScript}
-          </head>
-          <body>
-            <div id="root"></div>
-            <script src="/bundle.js"></script>
-          </body>
-        </html>
-      `);
-        }
-    });
-    server.listen(PORT, () => {
-        console.log(`🚀 Ready! Your component is served at: http://localhost:${PORT}\n${watchMode ? '👀 Watching for file changes...' : ''}\nPress Ctrl+C to stop the process.`);
-    });
-    return server;
-}
-function setupCleanup(tempDir, ctx) {
-    process.on('SIGINT', async () => {
-        console.log('\nShutting down the server and cleaning up temporary files...');
-        if (ctx) {
-            await ctx.dispose();
-        }
-        await promises_1.default.rm(tempDir, { recursive: true, force: true });
-        process.exit(0);
-    });
-}
-main().catch(console.error);