@mickeypause/react-native-preview-cli 2.0.0 → 2.0.1

package/README.md

@@ -3,12 +3,19 @@
 CLI bridge for `@mickeypause/react-native-preview`.
 
 ```bash
+npm install --global @mickeypause/react-native-preview-cli
+cd your-expo-project
+preview init
 preview start --ios
 preview list
 preview select PreviewCard
 preview clear
 ```
 
+`init` detects the current Expo project, installs only `@mickeypause/react-native-preview` locally, and updates Babel and Metro configuration. It intentionally does not modify application source files; add `PreviewHost` and registrations manually.
+
+`init --dry-run` previews the changes without writing files or installing packages.
+
 `start` supports Expo projects on iOS simulators and Android emulators. It writes `.react-native-preview/session.json`, owns the local WebSocket bridge, and passes the selected endpoint through `EXPO_PUBLIC_REACT_NATIVE_PREVIEW_BRIDGE_URL`.
 
 The published `bin/preview.js` file is the executable npm CLI entrypoint. It is intentionally a thin launcher over the compiled `dist` API and is kept executable so npm can expose the `preview` command.

package/bin/preview.js

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 const {
+  initProject,
   requestSnapshot,
   resolvePreview,
   sendCommand,
@@ -10,6 +11,24 @@ async function main() {
   const args = process.argv.slice(2);
   const command = args.shift();
   const value = command === 'select' ? args.shift() : undefined;
+  if (command === 'init') {
+    const packageManagerIndex = args.indexOf('--package-manager');
+    const packageManager = packageManagerIndex === -1 ? undefined : args[packageManagerIndex + 1];
+    const result = initProject({
+      dryRun: args.includes('--dry-run'),
+      packageManager,
+    });
+    console.log(`[react-native-preview] ${result.dryRun ? 'Would initialize' : 'Initialized'} ${result.projectRoot}`);
+    console.log(`[react-native-preview] package manager: ${result.packageManager}`);
+    if (!result.installed) console.log(`[react-native-preview] ${result.dryRun ? 'Would install' : 'Installed'} @mickeypause/react-native-preview locally`);
+    if (result.changedFiles.length > 0) {
+      console.log(`${result.dryRun ? 'Would update' : 'Updated'}:`);
+      for (const file of result.changedFiles) console.log(`  ${file}`);
+    }
+    console.log('Manual steps remaining:');
+    for (const step of result.manualSteps) console.log(`  - ${step}`);
+    return;
+  }
   if (command === 'start') {
     const platform = args.includes('--ios') ? 'ios' : args.includes('--android') ? 'android' : null;
     if (!platform) throw new Error('Choose a platform: preview start --ios or preview start --android');
@@ -45,7 +64,7 @@ async function main() {
     await sendCommand({ type: 'clear' });
     return;
   }
-  throw new Error('Usage: preview start --ios|--android, preview list, preview select <name-or-id>, preview clear');
+  throw new Error('Usage: preview init [--dry-run] [--package-manager <npm|yarn|pnpm|bun>], preview start --ios|--android, preview list, preview select <name-or-id>, preview clear');
 }
 
 main().catch((error) => {

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export * from './protocol';
 export { DEFAULT_PORT, SESSION_FILE, PreviewBridgeServer, findAvailablePort, hostForPlatform, isExpoProject, readSession, startPreviewSession, } from './server';
 export { requestSnapshot, resolvePreview, sendCommand } from './client';
+export { BABEL_PLUGIN, METRO_PACKAGE, RUNTIME_PACKAGE, initProject, type InitOptions, type InitResult, } from './init';
+export { detectPackageManager, findProjectRoot, type PackageManager } from './project';

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sendCommand = exports.resolvePreview = exports.requestSnapshot = exports.startPreviewSession = exports.readSession = exports.isExpoProject = exports.hostForPlatform = exports.findAvailablePort = exports.PreviewBridgeServer = exports.SESSION_FILE = exports.DEFAULT_PORT = void 0;
+exports.findProjectRoot = exports.detectPackageManager = exports.initProject = exports.RUNTIME_PACKAGE = exports.METRO_PACKAGE = exports.BABEL_PLUGIN = exports.sendCommand = exports.resolvePreview = exports.requestSnapshot = exports.startPreviewSession = exports.readSession = exports.isExpoProject = exports.hostForPlatform = exports.findAvailablePort = exports.PreviewBridgeServer = exports.SESSION_FILE = exports.DEFAULT_PORT = void 0;
 __exportStar(require("./protocol"), exports);
 var server_1 = require("./server");
 Object.defineProperty(exports, "DEFAULT_PORT", { enumerable: true, get: function () { return server_1.DEFAULT_PORT; } });
@@ -29,3 +29,11 @@ var client_1 = require("./client");
 Object.defineProperty(exports, "requestSnapshot", { enumerable: true, get: function () { return client_1.requestSnapshot; } });
 Object.defineProperty(exports, "resolvePreview", { enumerable: true, get: function () { return client_1.resolvePreview; } });
 Object.defineProperty(exports, "sendCommand", { enumerable: true, get: function () { return client_1.sendCommand; } });
+var init_1 = require("./init");
+Object.defineProperty(exports, "BABEL_PLUGIN", { enumerable: true, get: function () { return init_1.BABEL_PLUGIN; } });
+Object.defineProperty(exports, "METRO_PACKAGE", { enumerable: true, get: function () { return init_1.METRO_PACKAGE; } });
+Object.defineProperty(exports, "RUNTIME_PACKAGE", { enumerable: true, get: function () { return init_1.RUNTIME_PACKAGE; } });
+Object.defineProperty(exports, "initProject", { enumerable: true, get: function () { return init_1.initProject; } });
+var project_1 = require("./project");
+Object.defineProperty(exports, "detectPackageManager", { enumerable: true, get: function () { return project_1.detectPackageManager; } });
+Object.defineProperty(exports, "findProjectRoot", { enumerable: true, get: function () { return project_1.findProjectRoot; } });

package/dist/init.d.ts

@@ -0,0 +1,19 @@
+import { type PackageManager } from './project';
+export declare const RUNTIME_PACKAGE = "@mickeypause/react-native-preview";
+export declare const BABEL_PLUGIN = "@mickeypause/react-native-preview/babel-plugin";
+export declare const METRO_PACKAGE = "@mickeypause/react-native-preview/metro";
+export interface InitOptions {
+    projectRoot?: string;
+    packageManager?: PackageManager;
+    dryRun?: boolean;
+    runCommand?: (command: string, args: string[], projectRoot: string) => void;
+}
+export interface InitResult {
+    projectRoot: string;
+    packageManager: PackageManager;
+    dryRun: boolean;
+    installed: boolean;
+    changedFiles: string[];
+    manualSteps: string[];
+}
+export declare function initProject(options?: InitOptions): InitResult;

package/dist/init.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.METRO_PACKAGE = exports.BABEL_PLUGIN = exports.RUNTIME_PACKAGE = void 0;
+exports.initProject = initProject;
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
+const node_child_process_1 = require("node:child_process");
+const project_1 = require("./project");
+exports.RUNTIME_PACKAGE = '@mickeypause/react-native-preview';
+exports.BABEL_PLUGIN = `${exports.RUNTIME_PACKAGE}/babel-plugin`;
+exports.METRO_PACKAGE = `${exports.RUNTIME_PACKAGE}/metro`;
+const defaultRunCommand = (command, args, projectRoot) => {
+    const result = (0, node_child_process_1.spawnSync)(command, args, { cwd: projectRoot, stdio: 'inherit' });
+    if (result.error)
+        throw result.error;
+    if (result.status !== 0)
+        throw new Error(`${command} ${args.join(' ')} failed with exit code ${result.status ?? 'unknown'}.`);
+};
+function initProject(options = {}) {
+    const projectRoot = (0, project_1.findProjectRoot)(options.projectRoot);
+    if (!(0, project_1.isExpoProject)(projectRoot)) {
+        throw new Error('preview init currently supports Expo projects only.');
+    }
+    const packageManager = options.packageManager || (0, project_1.detectPackageManager)(projectRoot);
+    if (!['npm', 'yarn', 'pnpm', 'bun'].includes(packageManager)) {
+        throw new Error(`Unsupported package manager: ${packageManager}`);
+    }
+    const packageJson = (0, project_1.readProjectPackageJson)(projectRoot);
+    const installed = Boolean(packageJson.dependencies?.[exports.RUNTIME_PACKAGE] || packageJson.devDependencies?.[exports.RUNTIME_PACKAGE]);
+    const changedFiles = [];
+    const dryRun = options.dryRun === true;
+    const runCommand = options.runCommand || defaultRunCommand;
+    if (!installed) {
+        if (!dryRun)
+            runCommand(packageManager, installArgs(packageManager), projectRoot);
+    }
+    updateConfig((0, node_path_1.join)(projectRoot, 'babel.config.js'), createBabelConfig, updateBabelConfig, changedFiles, dryRun);
+    updateConfig((0, node_path_1.join)(projectRoot, 'metro.config.js'), createMetroConfig, updateMetroConfig, changedFiles, dryRun);
+    return {
+        projectRoot,
+        packageManager,
+        dryRun,
+        installed,
+        changedFiles,
+        manualSteps: [
+            'Add PreviewHost inside your existing provider tree.',
+            'Register a component with registerPreview(...) or create a *.preview.tsx file.',
+            'Run preview start --ios or preview start --android.',
+        ],
+    };
+}
+function installArgs(packageManager) {
+    switch (packageManager) {
+        case 'yarn': return ['add', exports.RUNTIME_PACKAGE];
+        case 'pnpm': return ['add', exports.RUNTIME_PACKAGE];
+        case 'bun': return ['add', exports.RUNTIME_PACKAGE];
+        case 'npm': return ['install', exports.RUNTIME_PACKAGE];
+    }
+}
+function updateConfig(filePath, create, update, changedFiles, dryRun) {
+    const exists = (0, node_fs_1.existsSync)(filePath);
+    const current = exists ? (0, node_fs_1.readFileSync)(filePath, 'utf8') : '';
+    const updated = exists ? update(current) : create();
+    if (exists && updated === current)
+        return;
+    changedFiles.push(filePath);
+    if (!dryRun)
+        (0, node_fs_1.writeFileSync)(filePath, updated, 'utf8');
+}
+function createBabelConfig() {
+    return `module.exports = function (api) {\n  api.cache(true);\n  return {\n    presets: ['babel-preset-expo'],\n    plugins: ['${exports.BABEL_PLUGIN}'],\n  };\n};\n`;
+}
+function updateBabelConfig(content) {
+    if (content.includes(exports.BABEL_PLUGIN))
+        return content;
+    if (content.includes('plugins:')) {
+        const pluginsStart = content.indexOf('[', content.indexOf('plugins:'));
+        const pluginsEnd = findClosingBracket(content, pluginsStart);
+        if (pluginsStart === -1 || pluginsEnd === -1)
+            throw new Error('Could not safely update Babel plugins.');
+        const existing = content.slice(pluginsStart + 1, pluginsEnd).trim();
+        const separator = existing && !existing.endsWith(',') ? ',' : '';
+        const insertion = existing
+            ? `${separator}\n    '${exports.BABEL_PLUGIN}',`
+            : `\n    '${exports.BABEL_PLUGIN}',\n  `;
+        return `${content.slice(0, pluginsEnd)}${insertion}${content.slice(pluginsEnd)}`;
+    }
+    const objectStart = content.indexOf('return {') >= 0
+        ? content.indexOf('return {') + 'return {'.length
+        : content.indexOf('module.exports = {') >= 0
+            ? content.indexOf('module.exports = {') + 'module.exports = {'.length
+            : -1;
+    if (objectStart === -1)
+        throw new Error('Could not safely update Babel config. Add the preview Babel plugin manually.');
+    return `${content.slice(0, objectStart)}\n    plugins: ['${exports.BABEL_PLUGIN}'],${content.slice(objectStart)}`;
+}
+function createMetroConfig() {
+    return `const { getDefaultConfig } = require('expo/metro-config');\nconst { withPreviewDiscovery } = require('${exports.METRO_PACKAGE}');\n\nmodule.exports = withPreviewDiscovery(getDefaultConfig(__dirname));\n`;
+}
+function updateMetroConfig(content) {
+    if (content.includes('withPreviewDiscovery'))
+        return content;
+    const importLine = `const { withPreviewDiscovery } = require('${exports.METRO_PACKAGE}');\n`;
+    const withImport = `${importLine}${content}`;
+    const directConfig = content.match(/module\.exports\s*=\s*([^;]+);/);
+    if (!directConfig)
+        throw new Error('Could not safely update Metro config. Add withPreviewDiscovery(config) manually.');
+    const expression = directConfig[1].trim();
+    return `${withImport.slice(0, importLine.length + directConfig.index)}module.exports = withPreviewDiscovery(${expression});${content.slice(directConfig.index + directConfig[0].length)}`;
+}
+function findClosingBracket(content, openingIndex) {
+    if (openingIndex < 0)
+        return -1;
+    let depth = 0;
+    for (let index = openingIndex; index < content.length; index += 1) {
+        if (content[index] === '[')
+            depth += 1;
+        if (content[index] === ']') {
+            depth -= 1;
+            if (depth === 0)
+                return index;
+        }
+    }
+    return -1;
+}

package/dist/project.d.ts

@@ -0,0 +1,11 @@
+export type PackageManager = 'npm' | 'yarn' | 'pnpm' | 'bun';
+interface ProjectPackageJson {
+    dependencies?: Record<string, string>;
+    devDependencies?: Record<string, string>;
+    packageManager?: string;
+}
+export declare function findProjectRoot(start?: string): string;
+export declare function readProjectPackageJson(projectRoot: string): ProjectPackageJson;
+export declare function isExpoProject(projectRoot: string): boolean;
+export declare function detectPackageManager(projectRoot: string): PackageManager;
+export {};

package/dist/project.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findProjectRoot = findProjectRoot;
+exports.readProjectPackageJson = readProjectPackageJson;
+exports.isExpoProject = isExpoProject;
+exports.detectPackageManager = detectPackageManager;
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
+function findProjectRoot(start = process.cwd()) {
+    let directory = start;
+    while (true) {
+        if ((0, node_fs_1.existsSync)((0, node_path_1.join)(directory, 'package.json')))
+            return directory;
+        const parent = (0, node_path_1.dirname)(directory);
+        if (parent === directory)
+            throw new Error(`No package.json found from ${start}. Run preview init inside a project.`);
+        directory = parent;
+    }
+}
+function readProjectPackageJson(projectRoot) {
+    return JSON.parse((0, node_fs_1.readFileSync)((0, node_path_1.join)(projectRoot, 'package.json'), 'utf8'));
+}
+function isExpoProject(projectRoot) {
+    const packageJson = readProjectPackageJson(projectRoot);
+    return Boolean(packageJson.dependencies?.expo || packageJson.devDependencies?.expo);
+}
+function detectPackageManager(projectRoot) {
+    if ((0, node_fs_1.existsSync)((0, node_path_1.join)(projectRoot, 'pnpm-lock.yaml')))
+        return 'pnpm';
+    if ((0, node_fs_1.existsSync)((0, node_path_1.join)(projectRoot, 'yarn.lock')))
+        return 'yarn';
+    if ((0, node_fs_1.existsSync)((0, node_path_1.join)(projectRoot, 'bun.lock')) || (0, node_fs_1.existsSync)((0, node_path_1.join)(projectRoot, 'bun.lockb')))
+        return 'bun';
+    if ((0, node_fs_1.existsSync)((0, node_path_1.join)(projectRoot, 'package-lock.json')))
+        return 'npm';
+    const packageManager = readProjectPackageJson(projectRoot).packageManager?.split('@')[0];
+    if (packageManager === 'pnpm' || packageManager === 'yarn' || packageManager === 'bun' || packageManager === 'npm') {
+        return packageManager;
+    }
+    return 'npm';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mickeypause/react-native-preview-cli",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "CLI for the React Native preview bridge",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",