Skip to main content
Version: 1.4.4

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​

OptionAliasDescriptionDefaultRequired
--mapped-json <file>-mPath to the mapped JSON file generated by the map command.mapped.jsonNo
--output <directory>-oDirectory where refactored files will be saved.output_refactoredNo
--tech <tech>-tTechnology used in the JS files (run with -l/--list to see available options).Yes
--list-lList available technologies.falseNo
--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-versionDetect 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.falseNo

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:

  1. Replaces webpack module calls with require(): The tool finds the name of the third function parameter and replaces every call <param>(<numeric_id>) with require("./<numeric_id>.js"). This restores standard Node.js import semantics, so the chunk can be statically analysed or run with node.

  2. Adds export default: The top-level function or arrow function declaration in each chunk is identified and export 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 --scat combination 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​

  1. run loads the mapped.json produced by the map step and generates CS-MAST-S structural signatures for all chunks.
  2. It fetches a random sample of collisions.json files from the shriyanss/cs-mast-s-dataset HuggingFace bucket — the same dataset used by refactor --remote-collisions.
  3. It counts how many bucket signatures appear in the bundle's signature set for each candidate tech (for example, react-webpack and react-vite for a React target).
  4. The candidate with the most matches wins. If the winner's match count meets --cs-mast-tech-detect-threshold (default 50), refactor runs 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​

FrameworkBundler detectionRefactor available
ReactYes (webpack + Vite)Yes
Vue.jsPending (no bucket data yet)No (skip)
Nuxt.jsPending (no bucket data yet)No (skip)
Next.jsPending (no bucket data yet)No (skip)
SvelteNot applicableNo
AngularNot applicableNo

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 map command.
  • 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.