rn-studio 0.2.1 → 0.3.1

package/bin/rn-studio-init.js

@@ -0,0 +1,173 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+/**
+ * rn-studio init
+ *
+ * Zero-config bootstrap for consumer apps. Run:
+ *
+ *   npx rn-studio init
+ *
+ * This command:
+ *   1. Adds `rn-studio/babel-plugin` to the project's babel.config.js
+ *      (gated on `process.env.NODE_ENV !== 'production'`)
+ *   2. Adds a `"studio": "rn-studio-server"` script to package.json
+ *   3. Prints the exact snippet to paste into App.tsx
+ */
+const fs = require('fs');
+const path = require('path');
+
+const cwd = process.cwd();
+const INDIGO = '\x1b[38;5;111m';
+const GREEN = '\x1b[32m';
+const GREY = '\x1b[90m';
+const BOLD = '\x1b[1m';
+const RESET = '\x1b[0m';
+
+function log(msg) { console.log(msg); }
+function ok(msg) { console.log(`${GREEN}✓${RESET} ${msg}`); }
+function info(msg) { console.log(`${INDIGO}→${RESET} ${msg}`); }
+function warn(msg) { console.log(`${GREY}! ${msg}${RESET}`); }
+
+function banner() {
+  console.log('');
+  console.log(`  ${INDIGO}${BOLD}rn-studio init${RESET}`);
+  console.log(`  ${GREY}Live UI editor for React Native${RESET}`);
+  console.log('');
+}
+
+/* ───────────────── package.json ───────────────── */
+function patchPackageJson() {
+  const pkgPath = path.join(cwd, 'package.json');
+  if (!fs.existsSync(pkgPath)) {
+    warn('No package.json found — skipping script injection.');
+    return;
+  }
+  const raw = fs.readFileSync(pkgPath, 'utf-8');
+  const pkg = JSON.parse(raw);
+  pkg.scripts = pkg.scripts || {};
+
+  if (pkg.scripts.studio === 'rn-studio-server') {
+    ok('package.json already has a "studio" script.');
+    return;
+  }
+  if (pkg.scripts.studio && pkg.scripts.studio !== 'rn-studio-server') {
+    warn(`package.json has a different "studio" script (${pkg.scripts.studio}). Leaving untouched.`);
+    return;
+  }
+  pkg.scripts.studio = 'rn-studio-server';
+  // Preserve two-space indentation convention.
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n', 'utf-8');
+  ok('Added `"studio": "rn-studio-server"` to package.json scripts.');
+}
+
+/* ───────────────── babel.config.js ───────────────── */
+function patchBabelConfig() {
+  const candidates = [
+    'babel.config.js',
+    'babel.config.cjs',
+    'babel.config.mjs',
+    '.babelrc.js',
+    '.babelrc',
+  ];
+  const found = candidates
+    .map((c) => path.join(cwd, c))
+    .find((p) => fs.existsSync(p));
+
+  if (!found) {
+    warn('No babel.config.js found — creating one.');
+    const fresh = `module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    ...(process.env.NODE_ENV !== 'production' ? ['rn-studio/babel-plugin'] : []),
+  ],
+};
+`;
+    fs.writeFileSync(path.join(cwd, 'babel.config.js'), fresh, 'utf-8');
+    ok('Created babel.config.js with rn-studio plugin registered.');
+    return;
+  }
+
+  const content = fs.readFileSync(found, 'utf-8');
+  if (content.indexOf('rn-studio/babel-plugin') !== -1) {
+    ok(`${path.basename(found)} already references rn-studio/babel-plugin.`);
+    return;
+  }
+
+  // Attempt a light, string-based injection. If the file has a
+  // `plugins: [ ... ]` array, append the spread expression; otherwise
+  // add a new plugins property after the presets line.
+  let patched;
+  if (/plugins\s*:\s*\[/.test(content)) {
+    patched = content.replace(
+      /plugins\s*:\s*\[/,
+      `plugins: [\n    ...(process.env.NODE_ENV !== 'production' ? ['rn-studio/babel-plugin'] : []),`,
+    );
+  } else {
+    patched = content.replace(
+      /presets\s*:\s*\[[^\]]*\]\s*,?/,
+      (m) => `${m.replace(/,?\s*$/, ',')}\n  plugins: [\n    ...(process.env.NODE_ENV !== 'production' ? ['rn-studio/babel-plugin'] : []),\n  ],`,
+    );
+  }
+
+  if (patched === content) {
+    warn(`Could not auto-patch ${path.basename(found)} — add this manually:`);
+    console.log(
+      `    plugins: [\n      ...(process.env.NODE_ENV !== 'production' ? ['rn-studio/babel-plugin'] : []),\n    ],`,
+    );
+    return;
+  }
+
+  fs.writeFileSync(found, patched, 'utf-8');
+  ok(`Patched ${path.basename(found)} to include rn-studio/babel-plugin.`);
+}
+
+/* ───────────────── App.tsx snippet ───────────────── */
+function printAppSnippet() {
+  console.log('');
+  info('Add this to your App.tsx (or wherever you mount the root):');
+  console.log('');
+  console.log(`${GREY}────────────────────────────────────────────────${RESET}`);
+  console.log(`${INDIGO}import${RESET} { StudioProvider } ${INDIGO}from${RESET} 'rn-studio';`);
+  console.log('');
+  console.log(`${INDIGO}export default function${RESET} App() {`);
+  console.log('  return (');
+  console.log(`    <StudioProvider enabled={__DEV__} bubblePosition="bottom-right">`);
+  console.log('      <YourApp />');
+  console.log('    </StudioProvider>');
+  console.log('  );');
+  console.log('}');
+  console.log(`${GREY}────────────────────────────────────────────────${RESET}`);
+  console.log('');
+}
+
+/* ───────────────── run instructions ───────────────── */
+function printRunInstructions() {
+  console.log(`${BOLD}Next steps:${RESET}`);
+  console.log('');
+  console.log(`  ${GREY}#${RESET} Terminal 1 — Metro`);
+  console.log(`  ${INDIGO}npx${RESET} react-native start`);
+  console.log('');
+  console.log(`  ${GREY}#${RESET} Terminal 2 — rn-studio server`);
+  console.log(`  ${INDIGO}npm run${RESET} studio`);
+  console.log('');
+  console.log(
+    `${GREEN}✓ Setup complete.${RESET} Launch your app, tap the floating bubble,\n  then tap any component to edit its styles live.`,
+  );
+  console.log('');
+}
+
+/* ───────────────── main ───────────────── */
+function main() {
+  banner();
+  try {
+    patchPackageJson();
+    patchBabelConfig();
+    printAppSnippet();
+    printRunInstructions();
+  } catch (err) {
+    console.error(`\n${GREY}!${RESET} rn-studio init failed:`, err && err.message);
+    process.exit(1);
+  }
+}
+
+main();

package/bin/rn-studio-server.js

@@ -5,19 +5,23 @@
  *
  * Run alongside Metro:   npm run studio
  *
- * Responsibilities:
- *   1. Listen on ws://localhost:7878 for messages from the rn-studio runtime.
- *   2. On STYLE_CHANGE, dispatch to the AST engine which rewrites the
- *      source file. Metro's Fast Refresh instantly propagates the edit.
+ * Handles:
+ *   - STYLE_CHANGE → AST engine rewrites the source file
+ *   - UNDO / REDO  → pops/pushes the in-memory edit stack
+ *   - STACK_STATE broadcast so clients can enable/disable buttons
  */
 const { WebSocketServer } = require('ws');
 
-let rewriteStyle;
+let AstEngine;
+let UndoStack;
+let PreviewState;
 try {
-  ({ rewriteStyle } = require('../dist/ast/AstEngine'));
+  AstEngine = require('../dist/ast/AstEngine');
+  UndoStack = require('../dist/ast/UndoStack');
+  PreviewState = require('../dist/ast/PreviewState');
 } catch (err) {
   console.error(
-    '[rn-studio] Unable to load dist/ast/AstEngine. Did you run `npm run build`?'
+    '[rn-studio] Unable to load dist modules. Did you run `npm run build`?',
   );
   console.error(err.message);
   process.exit(1);
@@ -29,8 +33,22 @@ const wss = new WebSocketServer({ port: PORT });
 console.log(`[rn-studio] Server running on ws://localhost:${PORT}`);
 console.log('[rn-studio] Waiting for React Native runtime to connect...');
 
+function broadcastStackState(ws) {
+  const state = UndoStack.getStackState();
+  const payload = JSON.stringify({ type: 'STACK_STATE', payload: state });
+  if (ws) {
+    ws.send(payload);
+  } else {
+    wss.clients.forEach((c) => {
+      if (c.readyState === 1) c.send(payload);
+    });
+  }
+}
+
 wss.on('connection', (ws) => {
   console.log('[rn-studio] Client connected');
+  // Sync new clients with the current stack depths.
+  broadcastStackState(ws);
 
   ws.on('message', async (raw) => {
     let msg;
@@ -41,7 +59,7 @@ wss.on('connection', (ws) => {
         JSON.stringify({
           type: 'ERROR',
           payload: { message: 'Invalid JSON payload' },
-        })
+        }),
       );
       return;
     }
@@ -54,7 +72,7 @@ wss.on('connection', (ws) => {
 
       if (msg.type === 'STYLE_CHANGE') {
         const { source, key, value } = msg.payload;
-        await rewriteStyle({
+        await AstEngine.rewriteStyle({
           file: source.file,
           line: source.line,
           column: source.column,
@@ -63,18 +81,119 @@ wss.on('connection', (ws) => {
         });
         ws.send(JSON.stringify({ type: 'ACK', payload: { success: true } }));
         console.log(
-          `[rn-studio] ✓ ${source.componentName} → ${key}: ${value}`
+          `[rn-studio] ✓ ${source.componentName} → ${key}: ${value}`,
+        );
+        broadcastStackState();
+        return;
+      }
+
+      if (msg.type === 'UNDO') {
+        const entry = UndoStack.undo();
+        if (entry) {
+          console.log(`[rn-studio] ↶ undo: ${entry.label} (${entry.file})`);
+          ws.send(
+            JSON.stringify({
+              type: 'ACK',
+              payload: { success: true, message: 'undo' },
+            }),
+          );
+        } else {
+          ws.send(
+            JSON.stringify({
+              type: 'ACK',
+              payload: { success: false, message: 'Nothing to undo' },
+            }),
+          );
+        }
+        broadcastStackState();
+        return;
+      }
+
+      if (msg.type === 'REDO') {
+        const entry = UndoStack.redo();
+        if (entry) {
+          console.log(`[rn-studio] ↷ redo: ${entry.label} (${entry.file})`);
+          ws.send(
+            JSON.stringify({
+              type: 'ACK',
+              payload: { success: true, message: 'redo' },
+            }),
+          );
+        } else {
+          ws.send(
+            JSON.stringify({
+              type: 'ACK',
+              payload: { success: false, message: 'Nothing to redo' },
+            }),
+          );
+        }
+        broadcastStackState();
+        return;
+      }
+
+      if (msg.type === 'BEGIN_PREVIEW') {
+        const file = msg.payload && msg.payload.file;
+        if (file) {
+          PreviewState.begin(file);
+          console.log(`[rn-studio] ⋯ preview begin: ${file}`);
+        }
+        ws.send(JSON.stringify({ type: 'ACK', payload: { success: true } }));
+        return;
+      }
+
+      if (msg.type === 'COMMIT_PREVIEW') {
+        const result = PreviewState.commit();
+        if (result && result.editCount > 0) {
+          console.log(
+            `[rn-studio] ✓ preview commit: ${result.editCount} edit${
+              result.editCount === 1 ? '' : 's'
+            } (${result.file})`,
+          );
+        }
+        ws.send(
+          JSON.stringify({
+            type: 'ACK',
+            payload: {
+              success: true,
+              message: result ? `committed ${result.editCount}` : 'nothing to commit',
+            },
+          }),
+        );
+        broadcastStackState();
+        return;
+      }
+
+      if (msg.type === 'CANCEL_PREVIEW') {
+        const result = PreviewState.cancel();
+        if (result && result.editCount > 0) {
+          console.log(
+            `[rn-studio] ↺ preview cancel: reverted ${result.editCount} edit${
+              result.editCount === 1 ? '' : 's'
+            } (${result.file})`,
+          );
+        }
+        ws.send(
+          JSON.stringify({
+            type: 'ACK',
+            payload: {
+              success: true,
+              message: result ? `reverted ${result.editCount}` : 'nothing to cancel',
+            },
+          }),
         );
+        broadcastStackState();
         return;
       }
 
       if (msg.type === 'PROP_CHANGE') {
-        // Reserved for future prop editing. Ack for now.
         ws.send(
           JSON.stringify({
             type: 'ACK',
-            payload: { success: true, message: 'PROP_CHANGE not yet implemented' },
-          })
+            payload: {
+              success: true,
+              message: 'PROP_CHANGE not yet implemented',
+            },
+          }),
         );
         return;
       }
@@ -84,12 +203,21 @@ wss.on('connection', (ws) => {
         JSON.stringify({
           type: 'ERROR',
           payload: { message: err && err.message ? err.message : String(err) },
-        })
+        }),
       );
     }
   });
 
-  ws.on('close', () => console.log('[rn-studio] Client disconnected'));
+  ws.on('close', () => {
+    console.log('[rn-studio] Client disconnected');
+    // Abandon any in-flight preview so a stale buffer can't bleed
+    // into a later session on a different file.
+    if (PreviewState.isActive()) {
+      PreviewState.cancel();
+      console.log('[rn-studio] (preview auto-cancelled on disconnect)');
+      broadcastStackState();
+    }
+  });
 });
 
 process.on('SIGINT', () => {

package/dist/StudioProvider.d.ts

@@ -1,5 +1,5 @@
 import React, { MutableRefObject } from 'react';
-import type { BubblePosition, StudioConfig, StudioContextValue } from './types';
+import type { BubblePosition, SourceLocation, StudioConfig, StudioContextValue } from './types';
 interface Props extends Partial<StudioConfig> {
     enabled?: boolean;
     serverPort?: number;
@@ -8,26 +8,13 @@ interface Props extends Partial<StudioConfig> {
     children: React.ReactNode;
 }
 /**
- * Shared mutable ref to the app root view. Populated by `<StudioProvider>`
- * and consumed by `<SelectionOverlay>` for hit-testing via the React
- * DevTools `getInspectorDataForViewAtPoint` API. Exposing it at module
- * scope avoids having to thread it through context (and keeps the
- * context value shape unchanged for consumers).
+ * Shared mutable ref to the app root view. Populated by
+ * `<StudioProvider>` and consumed by `<SelectionOverlay>` for
+ * hit-testing via `getInspectorDataForViewAtPoint`.
  */
 export declare const appRootRef: MutableRefObject<any>;
-/**
- * <StudioProvider>
- *
- * Wrap your App.tsx with this provider. When `enabled` is false (the
- * default, intended for production), it renders children verbatim and
- * introduces zero overhead — no context, no bridge, no overlay.
- *
- * When enabled, it manages the studio state machine, opens a WebSocket
- * connection to the CLI server, and renders the floating bubble,
- * selection overlay, and inspector panel above your app.
- */
 export declare function StudioProvider({ children, enabled, serverPort, bubblePosition, }: Props): React.JSX.Element;
+export type { SourceLocation };
 /** Hook for any descendant of `<StudioProvider>` to read studio state. */
 export declare function useStudio(): StudioContextValue;
-export {};
 //# sourceMappingURL=StudioProvider.d.ts.map

package/dist/StudioProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StudioProvider.d.ts","sourceRoot":"","sources":["../src/StudioProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,gBAAgB,EAKjB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EACV,cAAc,EAEd,YAAY,EACZ,kBAAkB,EAEnB,MAAM,SAAS,CAAC;AAEjB,UAAU,KAAM,SAAQ,OAAO,CAAC,YAAY,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,gBAAgB,CAAC,GAAG,CAAqB,CAAC;AAEnE;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAe,EACf,UAAiB,EACjB,cAA+B,GAChC,EAAE,KAAK,qBAUP;AAyFD,0EAA0E;AAC1E,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}
+{"version":3,"file":"StudioProvider.d.ts","sourceRoot":"","sources":["../src/StudioProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,gBAAgB,EAMjB,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EACV,cAAc,EAEd,cAAc,EACd,YAAY,EACZ,kBAAkB,EAEnB,MAAM,SAAS,CAAC;AAEjB,UAAU,KAAM,SAAQ,OAAO,CAAC,YAAY,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;GAIG;AAEH,eAAO,MAAM,UAAU,EAAE,gBAAgB,CAAC,GAAG,CAAqB,CAAC;AAEnE,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAe,EACf,UAAiB,EACjB,cAA+B,GAChC,EAAE,KAAK,qBAYP;AA0QD,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B,0EAA0E;AAC1E,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}