@nhonh/react-debugger 1.0.0

package/README.md

@@ -0,0 +1,67 @@
+# ⚛️ React Debugger
+
+Advanced debugging & performance optimization tool for ReactJS applications.
+
+## Quick Install
+
+```bash
+npx react-debugger
+```
+
+This will download the Chrome extension to your local machine.
+
+## Usage
+
+### Interactive Mode
+
+```bash
+npx react-debugger
+```
+
+Follow the prompts to choose installation directory.
+
+### Direct Install
+
+```bash
+npx react-debugger ./my-extension
+```
+
+### Options
+
+```
+-v, --version    Show version number
+-h, --help       Show help
+```
+
+## Loading the Extension in Chrome
+
+After installation:
+
+1. Open `chrome://extensions/` in Chrome
+2. Enable **Developer mode** (toggle in top right)
+3. Click **Load unpacked**
+4. Select the folder where you installed the extension
+
+## Features
+
+- 🎯 **UI & State Issues** - Detect direct state mutation, missing keys, index as key
+- ⚡ **Performance Analysis** - Track re-renders, identify excessive renders
+- 🔄 **Side Effects** - Find missing cleanup, dependency issues in useEffect
+- 📐 **CLS Monitor** - Track Cumulative Layout Shift in real-time
+- 🗄️ **Redux DevTools** - View state tree, dispatch actions manually
+- 📊 **Timeline** - Visual timeline of all React events
+- 💾 **Memory** - Monitor memory usage and detect leaks
+
+## Requirements
+
+- Node.js >= 18.0.0
+- Chrome, Brave, or any Chromium-based browser
+
+## Links
+
+- [GitHub Repository](https://github.com/nhonh/react-debugger-extension)
+- [Report Issues](https://github.com/nhonh/react-debugger-extension/issues)
+
+## License
+
+MIT © NhoNH

package/bin/cli.js

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+
+import { intro, outro, text, spinner, confirm, isCancel } from '@clack/prompts';
+import pc from 'picocolors';
+import { downloadAndExtract } from '../src/install.js';
+import path from 'node:path';
+import fs from 'node:fs';
+
+const VERSION = '1.0.0';
+const EXTENSION_NAME = 'React Debugger';
+
+async function main() {
+  const args = process.argv.slice(2);
+
+  if (args.includes('--version') || args.includes('-v')) {
+    console.log(`${EXTENSION_NAME} v${VERSION}`);
+    process.exit(0);
+  }
+
+  if (args.includes('--help') || args.includes('-h')) {
+    console.log(`
+${pc.cyan(EXTENSION_NAME)} - Chrome Extension Installer
+
+${pc.yellow('Usage:')}
+  npx react-debugger [destination]
+
+${pc.yellow('Options:')}
+  -v, --version    Show version number
+  -h, --help       Show help
+
+${pc.yellow('Examples:')}
+  npx react-debugger                    # Interactive mode
+  npx react-debugger ./my-extension     # Direct install to folder
+`);
+    process.exit(0);
+  }
+
+  console.log();
+  intro(pc.bgCyan(pc.black(` ${EXTENSION_NAME} Extension Installer `)));
+
+  let destination = args[0];
+
+  if (!destination) {
+    const destInput = await text({
+      message: 'Where should we install the extension?',
+      placeholder: './react-debugger',
+      initialValue: './react-debugger',
+      validate: (value) => {
+        if (!value || value.trim() === '') {
+          return 'Please enter a destination path';
+        }
+      },
+    });
+
+    if (isCancel(destInput)) {
+      outro(pc.yellow('Installation cancelled.'));
+      process.exit(0);
+    }
+
+    destination = destInput;
+  }
+
+  const fullPath = path.resolve(destination);
+
+  if (fs.existsSync(fullPath)) {
+    const files = fs.readdirSync(fullPath);
+    if (files.length > 0) {
+      const shouldOverwrite = await confirm({
+        message: `Directory ${pc.yellow(fullPath)} is not empty. Overwrite?`,
+        initialValue: false,
+      });
+
+      if (isCancel(shouldOverwrite) || !shouldOverwrite) {
+        outro(pc.yellow('Installation cancelled.'));
+        process.exit(0);
+      }
+    }
+  }
+
+  const s = spinner();
+  s.start('Downloading React Debugger extension...');
+
+  try {
+    await downloadAndExtract(fullPath);
+    s.stop(pc.green('Download complete!'));
+
+    console.log();
+    console.log(pc.dim('─'.repeat(50)));
+    console.log();
+    console.log(pc.bold('Next steps to load the extension in Chrome:'));
+    console.log();
+    console.log(`  ${pc.cyan('1.')} Open ${pc.yellow('chrome://extensions/')} in Chrome`);
+    console.log(`  ${pc.cyan('2.')} Enable ${pc.yellow('Developer mode')} (toggle in top right)`);
+    console.log(`  ${pc.cyan('3.')} Click ${pc.yellow('Load unpacked')}`);
+    console.log(`  ${pc.cyan('4.')} Select the folder:`);
+    console.log(`     ${pc.green(fullPath)}`);
+    console.log();
+    console.log(pc.dim('─'.repeat(50)));
+    console.log();
+
+    outro(pc.green('✓ Installation successful!'));
+  } catch (err) {
+    s.stop(pc.red('Download failed!'));
+    console.error();
+    console.error(pc.red('Error:'), err.message);
+    console.error();
+    console.error(pc.dim('If this persists, please report at:'));
+    console.error(pc.dim('https://github.com/nhonh/react-debugger-extension/issues'));
+    process.exit(1);
+  }
+}
+
+main().catch((err) => {
+  console.error(pc.red('Unexpected error:'), err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@nhonh/react-debugger",
+  "version": "1.0.0",
+  "description": "Advanced debugging & performance optimization tool for ReactJS applications - Chrome Extension",
+  "author": "NhoNH",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "react-debugger": "bin/cli.js"
+  },
+  "files": [
+    "bin/",
+    "src/"
+  ],
+  "keywords": [
+    "react",
+    "debugger",
+    "devtools",
+    "chrome-extension",
+    "performance",
+    "redux",
+    "profiler",
+    "developer-tools"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nhonh/react-debugger-extension.git"
+  },
+  "homepage": "https://github.com/nhonh/react-debugger-extension#readme",
+  "bugs": {
+    "url": "https://github.com/nhonh/react-debugger-extension/issues"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.9.1",
+    "picocolors": "^1.1.1",
+    "decompress": "^4.2.1"
+  }
+}

package/src/install.js

@@ -0,0 +1,94 @@
+import { Buffer } from 'node:buffer';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import decompress from 'decompress';
+
+const GITHUB_REPO = 'nhonh/react-debugger-extension';
+const RELEASE_TAG = 'latest';
+
+async function getLatestReleaseUrl() {
+  const apiUrl = `https://api.github.com/repos/${GITHUB_REPO}/releases/${RELEASE_TAG}`;
+  
+  const response = await fetch(apiUrl, {
+    headers: {
+      'Accept': 'application/vnd.github.v3+json',
+      'User-Agent': 'react-debugger-cli',
+    },
+  });
+
+  if (!response.ok) {
+    if (response.status === 404) {
+      return getFallbackUrl();
+    }
+    throw new Error(`Failed to fetch release info: ${response.statusText}`);
+  }
+
+  const release = await response.json();
+  const asset = release.assets?.find(a => a.name === 'react-debugger.zip');
+  
+  if (asset) {
+    return asset.browser_download_url;
+  }
+
+  return getFallbackUrl();
+}
+
+function getFallbackUrl() {
+  return `https://github.com/${GITHUB_REPO}/releases/latest/download/react-debugger.zip`;
+}
+
+async function downloadFromUrl(url) {
+  const response = await fetch(url, {
+    headers: {
+      'User-Agent': 'react-debugger-cli',
+    },
+    redirect: 'follow',
+  });
+
+  if (!response.ok) {
+    throw new Error(`Download failed: ${response.status} ${response.statusText}`);
+  }
+
+  const arrayBuffer = await response.arrayBuffer();
+  return Buffer.from(arrayBuffer);
+}
+
+export async function downloadAndExtract(dest) {
+  await fs.mkdir(dest, { recursive: true });
+
+  const existingFiles = await fs.readdir(dest);
+  for (const file of existingFiles) {
+    await fs.rm(path.join(dest, file), { recursive: true, force: true });
+  }
+
+  let downloadUrl;
+  try {
+    downloadUrl = await getLatestReleaseUrl();
+  } catch {
+    downloadUrl = getFallbackUrl();
+  }
+
+  const buffer = await downloadFromUrl(downloadUrl);
+
+  await decompress(buffer, dest, {
+    strip: 0,
+  });
+
+  const files = await fs.readdir(dest);
+  if (!files.includes('manifest.json')) {
+    const subDirs = files.filter(async (f) => {
+      const stat = await fs.stat(path.join(dest, f));
+      return stat.isDirectory();
+    });
+    
+    if (subDirs.length === 1) {
+      const subDir = path.join(dest, subDirs[0]);
+      const subFiles = await fs.readdir(subDir);
+      
+      for (const file of subFiles) {
+        await fs.rename(path.join(subDir, file), path.join(dest, file));
+      }
+      await fs.rmdir(subDir);
+    }
+  }
+}