Stacks

Extract a Shared Helper from Duplicated Code in SolidJS with Atlas in 2026

Updated 7 min read

To extract a shared helper from duplicated code in SolidJS, Atlas leverages its semantic search capabilities to identify near-duplicate logic, then uses `write` to create the new module and `apply_patch` to replace each instance with a call, all while integrating with your existing `pnpm`, `vitest (@solidjs/testing-library)`, and `prettier` toolchain for a robust refactoring experience.

How does Atlas find duplicated logic in SolidJS components?

Atlas identifies duplicated logic across SolidJS components by using hybrid semantic and keyword retrieval, which is far more effective than traditional `grep` for finding code that differs only in variable names. In 2026, this capability allows developers to pinpoint near-identical `createSignal` or `createMemo` patterns that would otherwise be missed.

Atlas's `codebase_search` tool is specifically designed to understand the *meaning* of code, not just its textual representation. When working within a SolidJS project, Atlas indexes your code by AST declarations using tree-sitter, allowing it to recognize similar patterns in `createSignal`, `createMemo`, and `createEffect` graphs, even if variable names like `count` versus `itemCount` are different. This semantic understanding is crucial for refactoring SolidJS applications, where the same reactive logic might be copy-pasted across several `.tsx` files or even within different SolidStart routes. Instead of asking for exact code, you describe the *behavior* you want to find, and Atlas surfaces relevant sections. For instance, you might ask Atlas to "find logic that manages a toggle state with a signal and a derived memo," and it will return all instances, regardless of specific variable names. This initial step is vital for ensuring that the refactoring targets genuinely equivalent logic, setting the stage for a successful extraction into a shared helper.

How to create a new shared helper module in SolidJS with Atlas?

After identifying duplicated SolidJS logic, creating a new shared helper module is straightforward with Atlas's `write` tool. This process involves defining a new `.ts` or `.tsx` file, such as `src/utils/useToggle.ts`, and Atlas will present a full diff for approval before creating the file, ensuring transparency in 2026.

Once you've confirmed the duplicated SolidJS logic is suitable for extraction, Atlas's `write` tool facilitates the creation of the new shared helper module. You instruct Atlas to `write` the new file, specifying its path and content. For example, if you're extracting a common toggle pattern, you might ask Atlas to create `src/utils/useToggle.ts` containing a `createSignal` and a `createMemo` for the toggle state. Atlas will draft the code, adhering to SolidJS idioms, such as returning an array or an object containing the signal and its setter. Before any file is written to your SolidJS project, Atlas computes a unified diff and surfaces it for your approval. This permission-gated step ensures that you have complete control over the new file's content and location, allowing you to review the proposed helper and ensure it aligns with your project's coding standards and `prettier` formatting expectations. This proactive review prevents unintended changes and maintains the integrity of your codebase.

How does Atlas replace duplicated SolidJS code with helper calls and run tests?

Replacing duplicated SolidJS code with calls to your new shared helper is handled by Atlas's `apply_patch` tool, which generates one reviewable patch per file. After each replacement, Atlas can immediately run your `vitest (@solidjs/testing-library)` suite using `bash`, providing instant feedback on the refactoring's impact in 2026.

With the shared SolidJS helper module created, the next step is to replace all instances of the duplicated logic with calls to this new helper. Atlas uses its `apply_patch` tool for this, intelligently identifying the code to be replaced and generating a precise diff. Crucially, Atlas performs these replacements one file at a time, creating an independent, reviewable patch for each modification. This granular approach means that if a replacement in `src/components/UserProfile.tsx` introduces an issue, it can be reverted without affecting changes made in `src/pages/Settings.tsx`. After each `apply_patch` operation, Atlas can execute your SolidJS project's test suite using the `bash` tool. You would instruct Atlas to run `pnpm vitest` or `vitest` directly, leveraging `vitest (@solidjs/testing-library)` to ensure that the refactoring has not introduced any regressions. This immediate feedback loop is invaluable, allowing you to confirm the correctness of each change before proceeding to the next, and ultimately finishing by grepping for any surviving copies of the original logic.

How does Atlas ensure safety and review during SolidJS refactoring?

Atlas prioritizes safety and developer control throughout the SolidJS refactoring process, offering multiple layers of review and approval. Every Atlas tool call is permission-gated, and all file edits, including those to `vite.config.ts` or `.tsx` files, are presented as unified diffs for approval before writing, ensuring transparency in 2026.

Atlas is built with a strong emphasis on safety and developer oversight, which is critical when performing significant refactoring tasks like extracting shared helpers in a SolidJS codebase. Before any action is taken, Atlas drafts a plan in a read-only plan agent and asks for your approval before switching to a build agent. This initial planning phase allows you to understand the proposed steps. Every subsequent tool call, whether it's `codebase_search`, `write`, or `apply_patch`, is permission-gated against allow, ask, and deny rules. When Atlas proposes to create a new file, modify an existing `.tsx` component, or even update `vite.config.ts`, it computes a unified diff for every file edit and surfaces it for your explicit approval. This means you see exactly what changes will be made before they are applied. Furthermore, Atlas snapshots file changes as git patches, so edits can be easily diffed and rolled back if necessary. This comprehensive review process, combined with the ability to run `pnpm vitest` after each change, provides a robust safety net, ensuring that your SolidJS project remains stable and functional throughout the refactoring.

Step by step

  1. 01Ask Atlas to `codebase_search` for the behavior of the duplicated SolidJS logic, such as "find logic that manages a counter with a `createSignal` and a `createMemo`."
  2. 02`read` each search hit to confirm the SolidJS code snippets are genuinely equivalent and suitable for extraction into a shared helper.
  3. 03Instruct Atlas to `write` the new shared SolidJS helper module, for example, `src/hooks/useCounter.ts`, reviewing the full diff before creation.
  4. 04Use Atlas's `apply_patch` tool to replace the first instance of duplicated SolidJS logic in a `.tsx` file with a call to the new helper, reviewing the patch.
  5. 05Run the SolidJS test suite with `bash pnpm vitest` to ensure the change has not introduced any regressions, leveraging `vitest (@solidjs/testing-library)`.
  6. 06Repeat steps 4 and 5 for each remaining instance of duplicated SolidJS logic, applying one patch per file and running `pnpm vitest` after each.
  7. 07After all replacements, use `bash grep -r "oldDuplicatedLogicPattern"` to confirm no surviving copies of the original SolidJS logic remain.
  8. 08Finally, ask Atlas to run `bash pnpm prettier --write .` on the touched `.tsx` files to ensure consistent formatting.

Frequently asked questions

How does Atlas handle SolidJS reactivity when refactoring shared logic?
Atlas understands SolidJS's reactivity model, including `createSignal`, `createMemo`, and `createEffect`. When extracting logic, it ensures the new helper maintains reactivity by correctly encapsulating signals and derived states, preventing common SolidJS bugs like broken reactivity from destructured props.
Can Atlas refactor SolidJS components that use SolidStart routes?
Yes, Atlas reads your SolidStart routes and can refactor duplicated logic within components used across those routes. Its AST-based indexing allows it to understand the structure of your SolidJS application, regardless of whether it's a standalone component or part of a SolidStart project.
What if the duplicated SolidJS code has slightly different variable names?
Atlas's `codebase_search` uses hybrid semantic and keyword retrieval, indexing code by AST declarations. This means it can identify near-duplicate SolidJS logic even if variable names differ, a significant advantage over simple text-based `grep` for finding patterns like `count` vs. `itemCount`.
How does Atlas ensure my SolidJS tests still pass after refactoring?
Atlas integrates directly with your SolidJS test runner. After each `apply_patch` operation, you can instruct Atlas to run `bash pnpm vitest`. This leverages `vitest (@solidjs/testing-library)` to provide immediate feedback, ensuring that the refactoring has not introduced any regressions.
Can I review the changes Atlas makes to my SolidJS `.tsx` files?
Absolutely. Every file edit Atlas proposes, including changes to `.tsx` files or the creation of new SolidJS helper modules, is presented as a unified diff for your explicit approval. This permission-gated process ensures you have full control over all modifications.
Does Atlas support `pnpm` for SolidJS projects?
Yes, Atlas fully supports `pnpm` as your package manager for SolidJS projects. You can use `bash pnpm install` or `bash pnpm vitest` directly through Atlas's `bash` tool, integrating direct with your existing development workflow.
How does Atlas handle code formatting in SolidJS after refactoring?
After refactoring, you can instruct Atlas to run your preferred formatter. For SolidJS projects, this means using `bash pnpm prettier --write .` to automatically format all touched `.tsx` files, ensuring your codebase remains consistent and adheres to your project's style guidelines.

Try Atlas in your terminal

The terminal-native AI coding agent. Free core, single binary.

Install Atlas

Related guides

Extract a Shared Helper from Duplicated Code with Atlas (2026 Workflow)

How to extract a shared helper from duplicated code with Atlas in 2026: codebase_search finds the copies by meaning, write creates the module, apply_patch swaps each call.

Atlas for SolidJS: A Terminal-Native AI Coding Agent Built on Solid, for Solid, in 2026

Atlas is a terminal-native AI coding agent for SolidJS in 2026. It reads your createSignal and createMemo graph, fixes destructured props that break reactivity, and runs vitest.

Diagnose a hanging or long-running command in SolidJS with Atlas in 2026

Pinpoint why your SolidJS builds or scripts are stuck or slow in 2026. Atlas, the terminal-native AI agent, uses its bash tool to diagnose interactive input blocks or genuine performance bottlenecks in your pnpm

Run the test suite and triage failures in SolidJS with Atlas in 2026

Streamline SolidJS test failure triage in 2026 with Atlas. Quickly turn `vitest` output into a prioritized list of distinct root causes, leveraging `pnpm` and `prettier` for efficient debugging and fixes.

Upgrade a Dependency and Fix Breakage in SolidJS with Atlas in 2026

SolidJS developers in 2026 can use Atlas to efficiently upgrade major dependencies, automatically fixing compile and test failures. Atlas integrates with pnpm, vitest, and prettier to streamline your workflow.

Document a SolidJS Module with a README in 2026 using Atlas

In 2026, Atlas helps SolidJS developers generate accurate READMEs for modules by analyzing live code, ensuring documentation reflects current implementation, not outdated plans. It integrates with your existing SolidJS

Automate GitHub Issue and Pull Request Triage in SolidJS with Atlas in 2026

Streamline GitHub issue and pull request triage in your SolidJS projects using Atlas. Configure workflows to safely automate responses, enforce trusted user permissions, and integrate with your `pnpm` and `vitest`

Locate where a behavior is implemented in SolidJS with Atlas in 2026

In 2026, SolidJS developers use Atlas to pinpoint exact file and symbol implementations. Leverage semantic search, grep, and LSP for `createSignal` and component behaviors.

Browse this resource hub