@thinksharpe/react-compiler-unmemo 0.5.5 → 0.6.0

package/README.md

@@ -3,7 +3,7 @@
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
 [![Node.js](https://img.shields.io/badge/node-%3E%3D18-brightgreen?style=flat-square)](https://nodejs.org)
-[![Tests](https://img.shields.io/badge/tests-69%20passing-brightgreen?style=flat-square)](./tests)
+[![Tests](https://img.shields.io/badge/tests-74%20passing-brightgreen?style=flat-square)](./tests)
 
 A codemod that removes `useMemo` and `useCallback` from your React codebase so you can adopt [React Compiler](https://react.dev/learn/react-compiler) without the manual cleanup.
 

package/helpers/remove-hooks.mjs

@@ -24,6 +24,20 @@ import path from "path";
 
 // ─── Core Parsing Helpers ────────────────────────────────────────────────────
 
+/**
+ * Check if the character at idx is escaped by counting consecutive
+ * backslashes before it. Odd count means escaped, even means not.
+ */
+export function isEscaped(str, idx) {
+  let count = 0;
+  let pos = idx - 1;
+  while (pos >= 0 && str[pos] === "\\") {
+    count++;
+    pos--;
+  }
+  return count % 2 === 1;
+}
+
 /**
  * Find the matching closing paren for an opening paren at startIdx.
  * Counts nested parens/brackets/braces and respects strings and template literals.
@@ -37,10 +51,9 @@ export function findClosingParen(content, startIdx) {
 
   for (let i = startIdx; i < content.length; i++) {
     const ch = content[i];
-    const prev = i > 0 ? content[i - 1] : "";
 
     // Handle escape sequences
-    if ((inString || inTemplate) && ch === "\\" && prev !== "\\") {
+    if ((inString || inTemplate) && ch === "\\" && !isEscaped(content, i)) {
       i++; // skip next char
       continue;
     }
@@ -124,7 +137,7 @@ export function stripDepsArray(inner) {
     const ch = inner[i];
 
     // Simple string tracking
-    if ((ch === '"' || ch === "'" || ch === "`") && (i === 0 || inner[i - 1] !== "\\")) {
+    if ((ch === '"' || ch === "'" || ch === "`") && !isEscaped(inner, i)) {
       if (!inString) {
         inString = true;
         stringChar = ch;
@@ -178,7 +191,7 @@ export function unwrapArrowFn(inner) {
   for (let i = 0; i < inner.length - 1; i++) {
     const ch = inner[i];
 
-    if ((ch === '"' || ch === "'" || ch === "`") && (i === 0 || inner[i - 1] !== "\\")) {
+    if ((ch === '"' || ch === "'" || ch === "`") && !isEscaped(inner, i)) {
       if (!inString) {
         inString = true;
         stringChar = ch;
@@ -312,6 +325,8 @@ export function processFile(filePath, { dryRun = false } = {}) {
   const transformations = [];
 
   // Phase 1: Strip generic type params like useMemo<ColumnsType<Foo>>( -> useMemo(
+  // Store stripped generics so Phase 2 can apply them as type annotations
+  const strippedGenerics = new Map();
   const hookNames = [
     "React.useMemo",
     "React.useCallback",
@@ -360,6 +375,8 @@ export function processFile(filePath, { dryRun = false } = {}) {
       const genericType = content.slice(angleStart + 1, angleEnd);
       content =
         content.slice(0, angleStart) + content.slice(angleEnd + 1);
+      // After stripping, the hook call starts at hookIdx — store the generic
+      strippedGenerics.set(hookIdx, genericType);
       changed = true;
       transformations.push({
         type: "strip-generic",
@@ -456,15 +473,23 @@ export function processFile(filePath, { dryRun = false } = {}) {
         replacement = withoutDeps;
       }
 
-      const beforeMatch = content.slice(
-        Math.max(0, idx - 50),
-        idx,
-      );
       const lineNum =
         content.slice(0, idx).split("\n").length;
 
+      // If Phase 1 stripped a generic type, inject it as a type annotation
+      const genericType = strippedGenerics.get(idx);
+      let prefix = content.slice(0, idx);
+      if (genericType) {
+        const declMatch = prefix.match(/((?:const|let|var)\s+\w+)\s*=\s*$/);
+        if (declMatch) {
+          const insertPos = prefix.length - declMatch[0].length + declMatch[1].length;
+          prefix = prefix.slice(0, insertPos) + ": " + genericType + prefix.slice(insertPos);
+        }
+        strippedGenerics.delete(idx);
+      }
+
       content =
-        content.slice(0, idx) +
+        prefix +
         replacement +
         content.slice(closeParenIdx + 1);
       changed = true;
@@ -482,8 +507,8 @@ export function processFile(filePath, { dryRun = false } = {}) {
     if (!found) break;
   }
 
-  // Phase 3: Clean up imports (skip matches inside strings/comments)
-  if (changed) {
+  // Phase 3: Clean up imports (always run — hooks are unnecessary with React Compiler)
+  {
     const importPatterns = [
       {
         regex: /import React, \{([^}]*)\} from (["'])react\2[^\S\n]*;?/g,
@@ -534,6 +559,11 @@ export function processFile(filePath, { dryRun = false } = {}) {
     content = content.replace(/\n\n\n+/g, "\n\n");
   }
 
+  // Track if imports were cleaned even without hook call changes
+  if (content !== original) {
+    changed = true;
+  }
+
   if (changed && !dryRun) {
     fs.writeFileSync(filePath, content);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thinksharpe/react-compiler-unmemo",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "description": "Remove useMemo and useCallback hooks from React codebases to leverage React Compiler automatic optimization",
   "license": "MIT",
   "type": "module",
@@ -25,7 +25,8 @@
     "automatic-memoization"
   ],
   "bin": {
-    "react-compiler-unmemo": "react-compiler-unmemo.mjs"
+    "react-compiler-unmemo": "react-compiler-unmemo.mjs",
+    "unmemo": "react-compiler-unmemo.mjs"
   },
   "main": "./react-compiler-unmemo.mjs",
   "exports": {

package/react-compiler-unmemo.mjs

@@ -34,7 +34,7 @@ import { run as removeHooks } from "./helpers/remove-hooks.mjs";
 
 const args = process.argv.slice(2);
 
-if (args.includes("--version") || args.includes("-v")) {
+if (args.includes("--version") || args.includes("-v") || args[0] === "version") {
   const __dirname = path.dirname(fileURLToPath(import.meta.url));
   const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, "package.json"), "utf8"));
   console.log(pkg.version);
@@ -63,7 +63,7 @@ if (!targetDir) {
   console.log("  --verbose       Show detailed output per transformation");
   console.log("  --files <glob>  File glob pattern (default: src/**/*.{tsx,ts})");
   console.log("  --skip-fix      Skip the type annotation fix step");
-  console.log("  --version, -v   Show version number");
+  console.log("  --version, -v   Show version number (use 'version' subcommand with npx)");
   console.log();
   console.log("Examples:");
   console.log("  npx react-compiler-unmemo ./my-react-app                # preview (safe default)");