From 7635c81a110d9b646c235e53a88a42c9193b335a Mon Sep 17 00:00:00 2001 From: istan Date: Mon, 22 Jun 2026 23:01:06 +0300 Subject: [PATCH 01/13] AI workflow for it now --- .yarnrc.yml | 1 + workflow.yaml | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 107 insertions(+) create mode 100644 workflow.yaml diff --git a/.yarnrc.yml b/.yarnrc.yml index 00a2d6a..a325345 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -1 +1,2 @@ yarnPath: .yarn/releases/yarn-3.5.0.cjs +nodeLinker: node-modules diff --git a/workflow.yaml b/workflow.yaml new file mode 100644 index 0000000..4cb0e98 --- /dev/null +++ b/workflow.yaml @@ -0,0 +1,106 @@ +version: "1" + +params: + autoAiReview: + name: "Auto AI Review" + description: "Whether to use AI to review the transformed React components (requires LLM_API_KEY environment variable)" + type: boolean + default: false + +nodes: + - id: apply-transforms + name: Apply AST Transformations + type: automatic + steps: + - name: "Transform React class components to function components" + exec: "npx -y @codemod/cli --plugin ./dist/index.js '**/*.tsx' '**/*.ts' '**/*.jsx' '**/*.js' --ignore-pattern 'node_modules/**' --ignore-pattern 'dist/**' --ignore-pattern 'build/**' --ignore-pattern 'cjs/**'" + - id: ai-review + name: "AI Review" + type: automatic + if: "params.autoAiReview == true" + depends_on: + - apply-transforms + steps: + - name: "AI Code Review" + ai: + model: "gpt-4o-mini" + max_tokens: 8000 + prompt: | + IMPORTANT: A codemod has ALREADY transformed React class components to function components in this repository. + The transformation is COMPLETE. Your job is NOT to transform - only to REVIEW and FIX issues. + + CRITICAL: You MUST provide verbose output explaining what you're doing at each step! + Output your progress as you work so users can see what's happening. + + Step 1: Find the transformed files (and SAY what you're doing) + - Use tools to search for files containing: "React.useState", "React.useEffect", "useRef", etc. + - Look for .tsx, .jsx, .ts, .js files anywhere in the project (not just src/) + - Check the git status to see which files were modified + + Step 2: Review common transformation issues (and SAY which files you're checking) + Read the transformed files and look for problems like: + - useEffect with missing dependency arrays + - State updates that should use functional form (prev => ...) + - Any leftover "this." references + - Missing cleanup functions in useEffect + + Step 3: Fix issues you find + Only modify files that have actual problems. Don't change files that are already correct. + + Step 4: ALWAYS output a clear summary + You MUST provide a detailed summary at the end including: + - Total files reviewed + - Number of files with issues found + - List of ACTUAL files you modified (use real file paths from this repository!) + - Specific changes made to each file + - If no issues found, explicitly state "No issues found - all transformations look good!" + + Output format (use REAL file paths, not these examples): + ``` + 📊 AI Review Summary + ================== + Files reviewed: [actual number] + Files with issues: [actual number] + Files modified: [actual number] + + Changes made: + 1. [ACTUAL FILE PATH from this repo] + - [specific change made] + - [specific change made] + + 2. [ACTUAL FILE PATH from this repo] + - [specific change made] + + OR if no issues: + "✅ No issues found - all transformations look good!" + ``` + + Specifically, review and FIX these common issues: + + **Critical Fixes:** + - Fix missing or incorrect dependency arrays in useEffect hooks + - Fix stale closures and incorrect state references + - Fix any remaining this.props, this.state, or this.context references + - Ensure all setState calls use the functional updater when depending on previous state + - Add missing cleanup functions in useEffect where needed + + **Code Quality:** + - Run the project's code formatter (prettier/eslint) with --fix if available + - Fix any linter errors introduced by the transformation + - Ensure proper TypeScript types are maintained/improved + - Optimize with useCallback/useMemo only where truly beneficial + + **Efficient Review Strategy:** + - First, run: git diff --name-only --diff-filter=M | head -20 + This shows the first 20 modified files - review these first + - If that times out, run: grep -r "React.useState" --include="*.js" --include="*.jsx" --include="*.tsx" --include="*.ts" | head -10 + This finds files with useState hooks + - Read those files and check for the issues listed above + - Focus on the most critical issues first (missing deps, stale closures) + - Limit yourself to reviewing ~10-20 files at a time to avoid timeouts + + **Validation:** + - Verify the code compiles without errors + - Check that the transformed code maintains the same behavior as the original + + ONLY make changes if you find actual issues. If the transformation is already correct, don't modify the files. From a55d7f1d871b49e42ebe126f77a18020a267ae1a Mon Sep 17 00:00:00 2001 From: istan Date: Mon, 22 Jun 2026 23:02:55 +0300 Subject: [PATCH 02/13] justfile --- justfile | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 justfile diff --git a/justfile b/justfile new file mode 100644 index 0000000..51f42ee --- /dev/null +++ b/justfile @@ -0,0 +1,10 @@ +default: + just -l + +install: + yarn install + +build: + yarn build +test: + yarn test From afff602a8053b2d41eaccd9c9cd352cc7a190561 Mon Sep 17 00:00:00 2001 From: istan Date: Mon, 22 Jun 2026 23:47:31 +0300 Subject: [PATCH 03/13] run and package it --- justfile | 33 +++++++++++++++++++++++++-------- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/justfile b/justfile index 51f42ee..25ad542 100644 --- a/justfile +++ b/justfile @@ -1,10 +1,27 @@ -default: - just -l +# Build the project +build: + yarn install + yarn build -install: - yarn install +# Run tests +test: build + yarn test -build: - yarn build -test: - yarn test +# Create an npm tarball (equivalent to a Python wheel) +pack: build + npm pack + +# Run the codemod locally using the built plugin against a target directory +# Usage: just run-local ../my-project/src +run-local target_dir: build + npx @codemod/cli --plugin ./dist/index.js '{{target_dir}}/**/*.tsx' '{{target_dir}}/**/*.ts' '{{target_dir}}/**/*.jsx' '{{target_dir}}/**/*.js' + +# Run the codemod using the packaged tarball against a target directory +# Usage: just run-tarball ../my-project/src +run-tarball target_dir: pack + @echo "Running via tarball..." + npx @codemod/cli --plugin ./react-declassify-0.2.0.tgz '{{target_dir}}/**/*.tsx' '{{target_dir}}/**/*.ts' '{{target_dir}}/**/*.jsx' '{{target_dir}}/**/*.js' + +# Run the Codemod AI Workflow (runs the codemod + AI review) +run-workflow target_dir: build + npx codemod@latest run . --target {{target_dir}} From d2db111a22b8d23813dc857b34cab12ac8e57d10 Mon Sep 17 00:00:00 2001 From: istan Date: Tue, 23 Jun 2026 00:01:00 +0300 Subject: [PATCH 04/13] made the prompt specifically tailored to the failure-points of declassify --- workflow.yaml | 77 +++++++++++++-------------------------------------- 1 file changed, 20 insertions(+), 57 deletions(-) diff --git a/workflow.yaml b/workflow.yaml index 4cb0e98..af3caac 100644 --- a/workflow.yaml +++ b/workflow.yaml @@ -26,81 +26,44 @@ nodes: model: "gpt-4o-mini" max_tokens: 8000 prompt: | - IMPORTANT: A codemod has ALREADY transformed React class components to function components in this repository. - The transformation is COMPLETE. Your job is NOT to transform - only to REVIEW and FIX issues. + IMPORTANT: A codemod (`react-declassify`) has ALREADY attempted to transform React class components to function components in this repository. + Most files are COMPLETE, but `react-declassify` has known limitations and leaves markers where it fails. Your job is to REVIEW, FIX, and FINISH the transformations. CRITICAL: You MUST provide verbose output explaining what you're doing at each step! Output your progress as you work so users can see what's happening. - Step 1: Find the transformed files (and SAY what you're doing) - - Use tools to search for files containing: "React.useState", "React.useEffect", "useRef", etc. - - Look for .tsx, .jsx, .ts, .js files anywhere in the project (not just src/) - - Check the git status to see which files were modified + Step 1: Search for Hard Errors and Soft Errors + - Search the project for `react-declassify-disable Cannot perform transformation`. This indicates a HARD ERROR where the tool gave up. You MUST manually convert this entire class to a function component with Hooks yourself! + - Search the project for `TODO_this`. This indicates a SOFT ERROR where the tool didn't know how to bind or resolve `this`. Fix the scoping and state/prop references. - Step 2: Review common transformation issues (and SAY which files you're checking) - Read the transformed files and look for problems like: - - useEffect with missing dependency arrays - - State updates that should use functional form (prev => ...) - - Any leftover "this." references - - Missing cleanup functions in useEffect + Step 2: Address react-declassify's Known Limitations + - Class Refs: If the old class was receiving refs or being instantiated via `useRef`, the new functional component will break. You MUST wrap the component in `React.forwardRef` and use `useImperativeHandle` to expose the necessary methods/properties! + - Stricter Render Types: If the component returns a bare string/number and TypeScript complains about `FC`, wrap the return statement in a fragment `<> ... `. - Step 3: Fix issues you find - Only modify files that have actual problems. Don't change files that are already correct. + Step 3: Review common transformation issues + - Fix missing or incorrect dependency arrays in useEffect hooks + - Ensure all setState calls use the functional updater when depending on previous state + - Add missing cleanup functions in useEffect where needed Step 4: ALWAYS output a clear summary You MUST provide a detailed summary at the end including: - Total files reviewed - - Number of files with issues found - - List of ACTUAL files you modified (use real file paths from this repository!) - - Specific changes made to each file - - If no issues found, explicitly state "No issues found - all transformations look good!" + - List of ACTUAL files you modified (use real file paths) + - Specific changes made to each file (e.g., "Resolved TODO_this", "Added forwardRef") - Output format (use REAL file paths, not these examples): + Output format: ``` 📊 AI Review Summary ================== Files reviewed: [actual number] - Files with issues: [actual number] Files modified: [actual number] Changes made: - 1. [ACTUAL FILE PATH from this repo] - - [specific change made] - - [specific change made] - - 2. [ACTUAL FILE PATH from this repo] - - [specific change made] - - OR if no issues: - "✅ No issues found - all transformations look good!" + 1. [ACTUAL FILE PATH] + - [specific change] ``` - Specifically, review and FIX these common issues: - - **Critical Fixes:** - - Fix missing or incorrect dependency arrays in useEffect hooks - - Fix stale closures and incorrect state references - - Fix any remaining this.props, this.state, or this.context references - - Ensure all setState calls use the functional updater when depending on previous state - - Add missing cleanup functions in useEffect where needed - - **Code Quality:** - - Run the project's code formatter (prettier/eslint) with --fix if available - - Fix any linter errors introduced by the transformation - - Ensure proper TypeScript types are maintained/improved - - Optimize with useCallback/useMemo only where truly beneficial - **Efficient Review Strategy:** - - First, run: git diff --name-only --diff-filter=M | head -20 - This shows the first 20 modified files - review these first - - If that times out, run: grep -r "React.useState" --include="*.js" --include="*.jsx" --include="*.tsx" --include="*.ts" | head -10 - This finds files with useState hooks - - Read those files and check for the issues listed above - - Focus on the most critical issues first (missing deps, stale closures) - - Limit yourself to reviewing ~10-20 files at a time to avoid timeouts - - **Validation:** - - Verify the code compiles without errors - - Check that the transformed code maintains the same behavior as the original - - ONLY make changes if you find actual issues. If the transformation is already correct, don't modify the files. + - Run: grep -r "TODO_this" --include="*.js" --include="*.jsx" --include="*.tsx" --include="*.ts" . + - Run: grep -r "react-declassify-disable" --include="*.js" --include="*.jsx" --include="*.tsx" --include="*.ts" . + - Only modify files that have actual problems. If the transformation is already correct, don't modify the files. From ab9379217daa19c0d3158248e0b464ba4397bd55 Mon Sep 17 00:00:00 2001 From: istan Date: Tue, 23 Jun 2026 00:01:35 +0300 Subject: [PATCH 05/13] added default justfile --- justfile | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/justfile b/justfile index 25ad542..254f679 100644 --- a/justfile +++ b/justfile @@ -1,27 +1,30 @@ +default: + just -l + # Build the project build: - yarn install - yarn build + yarn install + yarn build # Run tests test: build - yarn test + yarn test # Create an npm tarball (equivalent to a Python wheel) pack: build - npm pack + npm pack # Run the codemod locally using the built plugin against a target directory # Usage: just run-local ../my-project/src run-local target_dir: build - npx @codemod/cli --plugin ./dist/index.js '{{target_dir}}/**/*.tsx' '{{target_dir}}/**/*.ts' '{{target_dir}}/**/*.jsx' '{{target_dir}}/**/*.js' + npx @codemod/cli --plugin ./dist/index.js '{{ target_dir }}/**/*.tsx' '{{ target_dir }}/**/*.ts' '{{ target_dir }}/**/*.jsx' '{{ target_dir }}/**/*.js' # Run the codemod using the packaged tarball against a target directory # Usage: just run-tarball ../my-project/src run-tarball target_dir: pack - @echo "Running via tarball..." - npx @codemod/cli --plugin ./react-declassify-0.2.0.tgz '{{target_dir}}/**/*.tsx' '{{target_dir}}/**/*.ts' '{{target_dir}}/**/*.jsx' '{{target_dir}}/**/*.js' + @echo "Running via tarball..." + npx @codemod/cli --plugin ./react-declassify-0.2.0.tgz '{{ target_dir }}/**/*.tsx' '{{ target_dir }}/**/*.ts' '{{ target_dir }}/**/*.jsx' '{{ target_dir }}/**/*.js' # Run the Codemod AI Workflow (runs the codemod + AI review) run-workflow target_dir: build - npx codemod@latest run . --target {{target_dir}} + npx codemod@latest run . --target {{ target_dir }} From 216630630438542ab50177cb68475eeecc2681be Mon Sep 17 00:00:00 2001 From: istan Date: Tue, 23 Jun 2026 00:05:13 +0300 Subject: [PATCH 06/13] everything is just yarn oops --- justfile | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/justfile b/justfile index 254f679..ba48e7a 100644 --- a/justfile +++ b/justfile @@ -10,21 +10,23 @@ build: test: build yarn test -# Create an npm tarball (equivalent to a Python wheel) +# Create a yarn tarball (equivalent to a Python wheel) pack: build - npm pack + yarn pack --filename package.tgz # Run the codemod locally using the built plugin against a target directory # Usage: just run-local ../my-project/src run-local target_dir: build - npx @codemod/cli --plugin ./dist/index.js '{{ target_dir }}/**/*.tsx' '{{ target_dir }}/**/*.ts' '{{ target_dir }}/**/*.jsx' '{{ target_dir }}/**/*.js' + yarn dlx @codemod/cli --plugin ./dist/index.js '{{target_dir}}/**/*.tsx' '{{target_dir}}/**/*.ts' '{{target_dir}}/**/*.jsx' '{{target_dir}}/**/*.js' -# Run the codemod using the packaged tarball against a target directory -# Usage: just run-tarball ../my-project/src -run-tarball target_dir: pack - @echo "Running via tarball..." - npx @codemod/cli --plugin ./react-declassify-0.2.0.tgz '{{ target_dir }}/**/*.tsx' '{{ target_dir }}/**/*.ts' '{{ target_dir }}/**/*.jsx' '{{ target_dir }}/**/*.js' -# Run the Codemod AI Workflow (runs the codemod + AI review) + +# Run the Codemod AI Workflow WITHOUT the AI step +# Usage: just run-workflow ../my-project/src run-workflow target_dir: build - npx codemod@latest run . --target {{ target_dir }} + yarn dlx codemod@latest run . --target {{target_dir}} + +# Run the Codemod AI Workflow WITH the AI step turned on +# Usage: just run-workflow-ai ../my-project/src +run-workflow-ai target_dir: build + yarn dlx codemod@latest run . --target {{target_dir}} --autoAiReview=true From be3a69f643661b4b17c5f0f9da8146ef0c6ef711 Mon Sep 17 00:00:00 2001 From: istan Date: Tue, 23 Jun 2026 00:47:42 +0300 Subject: [PATCH 07/13] install globally --- justfile | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/justfile b/justfile index ba48e7a..f222d6a 100644 --- a/justfile +++ b/justfile @@ -6,6 +6,12 @@ build: yarn install yarn build +# Install the packaged tarball globally on your machine +# Example of how to use afterwords: +# yarn dlx @codemod/cli --plugin react-declassify +install-global: pack + npm install -g ./package.tgz + # Run tests test: build yarn test @@ -17,16 +23,14 @@ pack: build # Run the codemod locally using the built plugin against a target directory # Usage: just run-local ../my-project/src run-local target_dir: build - yarn dlx @codemod/cli --plugin ./dist/index.js '{{target_dir}}/**/*.tsx' '{{target_dir}}/**/*.ts' '{{target_dir}}/**/*.jsx' '{{target_dir}}/**/*.js' - - + yarn dlx @codemod/cli --plugin ./dist/index.js '{{ target_dir }}/**/*.tsx' '{{ target_dir }}/**/*.ts' '{{ target_dir }}/**/*.jsx' '{{ target_dir }}/**/*.js' # Run the Codemod AI Workflow WITHOUT the AI step # Usage: just run-workflow ../my-project/src run-workflow target_dir: build - yarn dlx codemod@latest run . --target {{target_dir}} + yarn dlx codemod@latest run . --target {{ target_dir }} # Run the Codemod AI Workflow WITH the AI step turned on # Usage: just run-workflow-ai ../my-project/src run-workflow-ai target_dir: build - yarn dlx codemod@latest run . --target {{target_dir}} --autoAiReview=true + yarn dlx codemod@latest run . --target {{ target_dir }} --autoAiReview=true From 9d93580256c68a2c4491acef042056bbc88b9d2b Mon Sep 17 00:00:00 2001 From: istan Date: Tue, 23 Jun 2026 03:32:32 +0300 Subject: [PATCH 08/13] made this work with AII lol --- codemod.yaml | 7 +++++++ workflow.yaml | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 codemod.yaml diff --git a/codemod.yaml b/codemod.yaml new file mode 100644 index 0000000..1d06c56 --- /dev/null +++ b/codemod.yaml @@ -0,0 +1,7 @@ +schema_version: "1.0.0" +name: react-declassify-workflow +version: 1.0.0 +description: "React Class to Hook Codemod with AI review" +author: "istan" +engine: workflow +arguments: [] diff --git a/workflow.yaml b/workflow.yaml index af3caac..49543a5 100644 --- a/workflow.yaml +++ b/workflow.yaml @@ -13,7 +13,7 @@ nodes: type: automatic steps: - name: "Transform React class components to function components" - exec: "npx -y @codemod/cli --plugin ./dist/index.js '**/*.tsx' '**/*.ts' '**/*.jsx' '**/*.js' --ignore-pattern 'node_modules/**' --ignore-pattern 'dist/**' --ignore-pattern 'build/**' --ignore-pattern 'cjs/**'" + run: "npx -y @codemod/cli@3.3.0 --plugin ../../../react-declassify/cjs/dist/index.js src/" - id: ai-review name: "AI Review" type: automatic From 153256b5f536940aece37da2f4fad1de1d3f93a0 Mon Sep 17 00:00:00 2001 From: istan Date: Tue, 23 Jun 2026 03:37:48 +0300 Subject: [PATCH 09/13] try npm run building --- workflow.yaml | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/workflow.yaml b/workflow.yaml index 49543a5..81a26f1 100644 --- a/workflow.yaml +++ b/workflow.yaml @@ -50,7 +50,10 @@ nodes: - Total files reviewed - List of ACTUAL files you modified (use real file paths) - Specific changes made to each file (e.g., "Resolved TODO_this", "Added forwardRef") - + + try `npm run build`-ing to validate. + + Output format: ``` 📊 AI Review Summary From 2b3e1690eea42fbdaca73b122f26708744bb0044 Mon Sep 17 00:00:00 2001 From: istan Date: Tue, 23 Jun 2026 03:37:50 +0300 Subject: [PATCH 10/13] just fmt --- workflow.yaml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/workflow.yaml b/workflow.yaml index 81a26f1..2588dfa 100644 --- a/workflow.yaml +++ b/workflow.yaml @@ -23,28 +23,28 @@ nodes: steps: - name: "AI Code Review" ai: - model: "gpt-4o-mini" + model: "gpt-4o-mini" max_tokens: 8000 prompt: | IMPORTANT: A codemod (`react-declassify`) has ALREADY attempted to transform React class components to function components in this repository. Most files are COMPLETE, but `react-declassify` has known limitations and leaves markers where it fails. Your job is to REVIEW, FIX, and FINISH the transformations. - + CRITICAL: You MUST provide verbose output explaining what you're doing at each step! Output your progress as you work so users can see what's happening. - + Step 1: Search for Hard Errors and Soft Errors - Search the project for `react-declassify-disable Cannot perform transformation`. This indicates a HARD ERROR where the tool gave up. You MUST manually convert this entire class to a function component with Hooks yourself! - Search the project for `TODO_this`. This indicates a SOFT ERROR where the tool didn't know how to bind or resolve `this`. Fix the scoping and state/prop references. - + Step 2: Address react-declassify's Known Limitations - Class Refs: If the old class was receiving refs or being instantiated via `useRef`, the new functional component will break. You MUST wrap the component in `React.forwardRef` and use `useImperativeHandle` to expose the necessary methods/properties! - Stricter Render Types: If the component returns a bare string/number and TypeScript complains about `FC`, wrap the return statement in a fragment `<> ... `. - + Step 3: Review common transformation issues - Fix missing or incorrect dependency arrays in useEffect hooks - Ensure all setState calls use the functional updater when depending on previous state - Add missing cleanup functions in useEffect where needed - + Step 4: ALWAYS output a clear summary You MUST provide a detailed summary at the end including: - Total files reviewed @@ -60,12 +60,12 @@ nodes: ================== Files reviewed: [actual number] Files modified: [actual number] - + Changes made: 1. [ACTUAL FILE PATH] - [specific change] ``` - + **Efficient Review Strategy:** - Run: grep -r "TODO_this" --include="*.js" --include="*.jsx" --include="*.tsx" --include="*.ts" . - Run: grep -r "react-declassify-disable" --include="*.js" --include="*.jsx" --include="*.tsx" --include="*.ts" . From 98c0e4aed6b1f6be362db4150f7dc93fdba997bd Mon Sep 17 00:00:00 2001 From: istan Date: Tue, 23 Jun 2026 11:20:41 +0300 Subject: [PATCH 11/13] shorted prompt cuz otherwise it keeps on hallucinating --- workflow.yaml | 48 ++++-------------------------------------------- 1 file changed, 4 insertions(+), 44 deletions(-) diff --git a/workflow.yaml b/workflow.yaml index 2588dfa..b47d54e 100644 --- a/workflow.yaml +++ b/workflow.yaml @@ -13,7 +13,7 @@ nodes: type: automatic steps: - name: "Transform React class components to function components" - run: "npx -y @codemod/cli@3.3.0 --plugin ../../../react-declassify/cjs/dist/index.js src/" + run: "npx -y @codemod/cli@3.3.0 --plugin ../../../react-declassify/cjs/dist/index.js ${TARGET:-src/} || true" - id: ai-review name: "AI Review" type: automatic @@ -26,47 +26,7 @@ nodes: model: "gpt-4o-mini" max_tokens: 8000 prompt: | - IMPORTANT: A codemod (`react-declassify`) has ALREADY attempted to transform React class components to function components in this repository. - Most files are COMPLETE, but `react-declassify` has known limitations and leaves markers where it fails. Your job is to REVIEW, FIX, and FINISH the transformations. + You are reviewing React component migrations. + Only if you see `react-declassify-disable` or `TODO_this` in the provided files, fix the component to use Hooks. + If the file looks fine and does not have these markers, return immediately with no changes. Do not output any verbose explanations. - CRITICAL: You MUST provide verbose output explaining what you're doing at each step! - Output your progress as you work so users can see what's happening. - - Step 1: Search for Hard Errors and Soft Errors - - Search the project for `react-declassify-disable Cannot perform transformation`. This indicates a HARD ERROR where the tool gave up. You MUST manually convert this entire class to a function component with Hooks yourself! - - Search the project for `TODO_this`. This indicates a SOFT ERROR where the tool didn't know how to bind or resolve `this`. Fix the scoping and state/prop references. - - Step 2: Address react-declassify's Known Limitations - - Class Refs: If the old class was receiving refs or being instantiated via `useRef`, the new functional component will break. You MUST wrap the component in `React.forwardRef` and use `useImperativeHandle` to expose the necessary methods/properties! - - Stricter Render Types: If the component returns a bare string/number and TypeScript complains about `FC`, wrap the return statement in a fragment `<> ... `. - - Step 3: Review common transformation issues - - Fix missing or incorrect dependency arrays in useEffect hooks - - Ensure all setState calls use the functional updater when depending on previous state - - Add missing cleanup functions in useEffect where needed - - Step 4: ALWAYS output a clear summary - You MUST provide a detailed summary at the end including: - - Total files reviewed - - List of ACTUAL files you modified (use real file paths) - - Specific changes made to each file (e.g., "Resolved TODO_this", "Added forwardRef") - - try `npm run build`-ing to validate. - - - Output format: - ``` - 📊 AI Review Summary - ================== - Files reviewed: [actual number] - Files modified: [actual number] - - Changes made: - 1. [ACTUAL FILE PATH] - - [specific change] - ``` - - **Efficient Review Strategy:** - - Run: grep -r "TODO_this" --include="*.js" --include="*.jsx" --include="*.tsx" --include="*.ts" . - - Run: grep -r "react-declassify-disable" --include="*.js" --include="*.jsx" --include="*.tsx" --include="*.ts" . - - Only modify files that have actual problems. If the transformation is already correct, don't modify the files. From 0073fceaa10aadd4d1356a3ccdd167f4a69753b4 Mon Sep 17 00:00:00 2001 From: istan Date: Tue, 23 Jun 2026 11:46:10 +0300 Subject: [PATCH 12/13] ooh it was assuming the model wayy to early --- workflow.yaml | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/workflow.yaml b/workflow.yaml index b47d54e..ac7fb3a 100644 --- a/workflow.yaml +++ b/workflow.yaml @@ -23,10 +23,17 @@ nodes: steps: - name: "AI Code Review" ai: - model: "gpt-4o-mini" max_tokens: 8000 prompt: | - You are reviewing React component migrations. - Only if you see `react-declassify-disable` or `TODO_this` in the provided files, fix the component to use Hooks. - If the file looks fine and does not have these markers, return immediately with no changes. Do not output any verbose explanations. + You are an expert React migration codemod. + Your job is to fix any remaining issues in this file after an automatic class-to-function component transform. + Look specifically for any `TODO_this` references or `react-declassify-disable` comments. + 1. If `TODO_this.shouldComponentUpdate` is used, rewrite the component export to use `React.memo(ComponentName, (prevProps, nextProps) => { ... })`. Make sure to convert any `props` variables and maintain identical behavior. Return `true` if it shouldn't update, `false` if it should update. Wait, `shouldComponentUpdate` returns `true` to update. `React.memo` returns `true` to SKIP update (if props are equal). Keep this in mind! + 2. If there are refs exposed via `TODO_this.something`, refactor the functional component to use `React.forwardRef` and expose those elements using `useImperativeHandle(ref, () => ({ get something() { return refName.current; } }))`. + 3. Fix any eslint errors you might create (use implicit arrow returns where possible, no trailing commas missing). + + OUTPUT INSTRUCTIONS: + If you made changes, output the full updated file content wrapped in a single ```javascript code block. + If the file needs absolutely no changes, you MUST output the exact original file content wrapped in a ```javascript code block. + Do not provide any explanations or markdown other than the code block. From 93ef0494c8a7f0e1cc2a64969c6ef234cf105677 Mon Sep 17 00:00:00 2001 From: istan Date: Tue, 23 Jun 2026 15:52:36 +0300 Subject: [PATCH 13/13] maybe mor useful prompt --- workflow.yaml | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/workflow.yaml b/workflow.yaml index ac7fb3a..971243f 100644 --- a/workflow.yaml +++ b/workflow.yaml @@ -22,18 +22,19 @@ nodes: - apply-transforms steps: - name: "AI Code Review" + glob: "src/**/*.js" ai: max_tokens: 8000 prompt: | - You are an expert React migration codemod. - Your job is to fix any remaining issues in this file after an automatic class-to-function component transform. - Look specifically for any `TODO_this` references or `react-declassify-disable` comments. - 1. If `TODO_this.shouldComponentUpdate` is used, rewrite the component export to use `React.memo(ComponentName, (prevProps, nextProps) => { ... })`. Make sure to convert any `props` variables and maintain identical behavior. Return `true` if it shouldn't update, `false` if it should update. Wait, `shouldComponentUpdate` returns `true` to update. `React.memo` returns `true` to SKIP update (if props are equal). Keep this in mind! - 2. If there are refs exposed via `TODO_this.something`, refactor the functional component to use `React.forwardRef` and expose those elements using `useImperativeHandle(ref, () => ({ get something() { return refName.current; } }))`. - 3. Fix any eslint errors you might create (use implicit arrow returns where possible, no trailing commas missing). + You are an expert React migration codemod agent. + Your job is to fix the remaining issues in the React codebase after an automatic class-to-function component transform. + Please search for all .js files in the src/ directory (especially src/components/ and src/reducers/ and src/control/) that contain the string `TODO_this` or `react-declassify-disable`. + For each file you find, you must edit it to fix the issues: + 1. If `TODO_this.shouldComponentUpdate` is used, remove it completely and rewrite the component export to use `React.memo(ComponentName, (prevProps, nextProps) => { ... })`. Make sure to convert any `props` variables and maintain identical behavior. WARNING: `shouldComponentUpdate` returns `true` to update. `React.memo` returns `true` to SKIP update. Invert the boolean logic! + 2. For component refs (like dom_rotate, dom_down, etc.), if they are accessed dynamically via `TODO_this[\`dom_${key}\`].dom`, replace that access with `eval(\`dom_${key}\`).current` or create a local object mapping keys to refs and use that. Make sure `TODO_this` is completely removed. + 3. Fix any eslint errors you might create: + - Ensure spaces before function parentheses (e.g., `function () {}` not `function(){}`). + - Ensure there are no missing trailing commas. + - If there are camelcase errors for variables like `dom_rotate`, either fix them to `domRotate` (and update all usages including string interpolation like `` \`dom_${key}\` ``) or add `/* eslint-disable camelcase */` at the top of the file to ignore them. - OUTPUT INSTRUCTIONS: - If you made changes, output the full updated file content wrapped in a single ```javascript code block. - If the file needs absolutely no changes, you MUST output the exact original file content wrapped in a ```javascript code block. - Do not provide any explanations or markdown other than the code block. - + Edit the files directly using your available tools. Do not stop until all instances of `TODO_this` are removed from the src/ directory.