Refactor Command
The refactor command processes the mapped JSON file generated by the map command and outputs the refactored JavaScript files to a specified directory. This is particularly useful for code transformation and restructuring tasks.
Usage
js-recon refactor -t <technology> [options]
Options
| Option | Alias | Description | Default | Required |
|---|---|---|---|---|
--mapped-json <file> | -m | Path to the mapped JSON file generated by the map command. | mapped.json | No |
--output <directory> | -o | Directory where refactored files will be saved. | output_refactored | No |
--tech <tech> | -t | Technology used in the JS files (run with -l/--list to see available options). | Yes | |
--list | -l | List available technologies. | false | No |
--collisions <path> | Path to a CS-MAST collisions.json, a baseline directory (for example js-recon-cs-mast-s/), or a per-feature results directory (for example react-webpack-feature-signatures/results/). When a standard directory is supplied, the right file is resolved automatically based on -t. When a per-feature results directory is supplied (immediate subdirectories each containing <scat>/collisions.json), the tool intersects the max-count signature sets across all feature subdirectories — reading only one file per feature — and uses the intersection as the baseline. See React (webpack) Refactor. | No | ||
--detect-version | Detect the React version used in the bundle and use it in the refactored output's package.json (react-webpack and react-vite only). See React (webpack) Refactor. | false | No |
Examples
Basic Usage
To refactor code using the default mapped.json file and output to the default output_refactored directory:
js-recon refactor -t next-turbopack
Custom Input and Output
Specify a custom input JSON file and output directory:
js-recon refactor -m custom-mapped.json -o refactored_output -t next-turbopack
List Available Technologies
To see all supported technologies:
js-recon refactor --list
Output Structure
The command creates a directory of individual .js files, one per webpack module ID, plus an index.js for the application entrypoint (React only):
output_refactored/
├── index.js ← entrypoint / bootstrap (React only)
├── 1.js
├── 2.js
└── ...
Each numbered .js file corresponds to a webpack module from the input bundle, and every file is formatted with Prettier. Output syntax depends on the technology: react-webpack and the Vite techs use pure ES module import/export throughout, while Next.js techs mix require() calls for inter-module references with an appended export default statement — see How it works (Next.js) below.
How it works (Next.js)
webpack bundles each module as a function with the signature (module, exports, __webpack_require__). The third argument — the __webpack_require__ function — is what one module uses to import another. In the minified bundle this parameter is renamed to a single letter (for example, e, r, t), making the inter-module relationships opaque.
The refactor transform does two things to each chunk:
-
Replaces webpack module calls with
require(): The tool finds the name of the third function parameter and replaces every call<param>(<numeric_id>)withrequire("./<numeric_id>.js"). This restores standard Node.js import semantics, so the chunk can be statically analysed or run withnode. -
Adds
export default: The top-level function or arrow function declaration in each chunk is identified andexport default <name>;is appended. This makes the module consumable as an ES module.
The result is a directory of standalone .js files that can be opened in an IDE, passed to other static-analysis tools, or executed individually.
Technology Reference
For detailed, technology-specific documentation see:
- Next.js (Turbopack) — Next.js Turbopack bundles: module format detection, require hoisting, JSX recovery
- Next.js (webpack) — Next.js webpack bundles: CJS export recovery, require hoisting, interop boilerplate removal
- React (webpack) — webpack 5 React bundles: module splitting, entrypoint extraction, require-helper removal
- React (Vite) — Vite (rolldown) React bundles: CJS interop removal, vendor import rewriting, JSX recovery, build check
- Vue.js (webpack) — Vue webpack 4/5 bundles: webpackJsonp container parsing, per-module extraction, Vue 2 render function recovery
- Vue.js (Vite) — Vue 3 + Vite bundles: export alias fingerprinting, canonical Vue import rewriting, _export_sfc inlining
- Choosing scat categories — how to pick the right
--scatcombination for best library detection - Remote signature stripping — shared cache, config, and flag reference used by all technologies
Automatic detection during run
The run command can invoke this module automatically, without any refactor-specific flags, by detecting the bundler via CS-MAST-S signature matching. See run — Refactor integration for the user-facing flag (--cs-mast-tech-detect-threshold) and output locations.
How bundler detection works
runloads themapped.jsonproduced by the map step and generates CS-MAST-S structural signatures for all chunks.- It fetches a random sample of
collisions.jsonfiles from theshriyanss/cs-mast-s-datasetHuggingFace bucket — the same dataset used byrefactor --remote-collisions. - It counts how many bucket signatures appear in the bundle's signature set for each candidate tech (for example,
react-webpackandreact-vitefor a React target). - The candidate with the most matches wins. If the winner's match count meets
--cs-mast-tech-detect-threshold(default50),refactorruns with the detected tech identifier.
The sampled signatures are cached under ~/.js-recon/refactor/signature_cache/ with a 7-day TTL — the same cache used by the standalone refactor command.
Framework support
| Framework | Bundler detection | Refactor available |
|---|---|---|
| React | Yes (webpack + Vite) | Yes |
| Vue.js | Pending (no bucket data yet) | No (skip) |
| Nuxt.js | Pending (no bucket data yet) | No (skip) |
| Next.js | Pending (no bucket data yet) | No (skip) |
| Svelte | Not applicable | No |
| Angular | Not applicable | No |
When detection fails or the framework has no bucket data, run prints a yellow warning and continues to the next target without error.
Notes
- The command requires a mapped JSON file generated by the
mapcommand. - The technology (
-t/--tech) flag is required to ensure proper refactoring rules are applied. - If the output directory doesn't exist, it will be created automatically.
- Existing files in the output directory with the same names will be overwritten.