explaingit

shadow-lab228/michelangelo-component-splitter

Analysis updated 2026-05-18

1JavaScriptAudience · developerComplexity · 3/5Setup · easy

TLDR

A CLI tool that automatically splits oversized React Native screens into smaller components with real TypeScript-aware prop types.

Mindmap

mindmap
  root((component splitter))
    What it does
      Splits large RN screens
      Infers real prop types
      Dedupes inline styles
    Tech stack
      TypeScript
      React Native
      Node.js CLI
    Use cases
      Refactor oversized screens
      Safe automatic rollback
      Shared style extraction
    Audience
      React Native developers
    Setup
      npm install
      Run node index.js on file
      Optional config file

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Automatically split an oversized React Native screen file into smaller, cleaner components.

USE CASE 2

Generate accurate prop types for extracted components using a project's real tsconfig.json.

USE CASE 3

Deduplicate inline styles across a React Native project into a shared stylesheet file.

USE CASE 4

Safely refactor large components with automatic rollback if the split introduces a type error.

What is it built with?

JavaScriptTypeScriptReact NativeExpoNode.js

How does it compare?

shadow-lab228/michelangelo-component-splitter0xmukesh/docusaurus-tutoriala15n/andrewscheuermann
Stars111
LanguageJavaScriptJavaScriptJavaScript
Last pushed2021-12-272015-01-11
MaintenanceDormantDormant
Setup difficultyeasyeasymoderate
Complexity3/52/51/5
Audiencedeveloperdevelopergeneral

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Needs a project with a tsconfig.json for accurate prop typing, falls back to heuristics without one.

No license is stated in the README, so reuse terms are unclear.

In plain English

This is a command line tool that automatically breaks up oversized React Native screens into smaller, separate component files. It targets the common problem of a single screen file growing to hundreds or thousands of lines, by finding logical chunks of the code and pulling them out into their own well-formed files. What sets this version apart is that it understands the actual project it is working on. If it finds a tsconfig.json file, meaning the project uses TypeScript, it loads the real type information the same way a code editor would, so the props it generates for each new extracted component have accurate types instead of generic guesses. If a prop's type depends on custom types defined elsewhere, the tool copies or imports those definitions so the new file still works correctly, falling back to a generic type only when it cannot safely resolve something. After splitting a file, the tool runs a real TypeScript type check on exactly the files it touched. If that check finds an error, it automatically undoes the whole operation, restoring the original file and removing the newly created ones, rather than leaving broken code behind. It also saves a backup copy of the original file before making changes. Inline styles used inside the component are pulled out into a shared styles file, with identical style objects reused instead of duplicated. If an extracted piece is still too large, the tool can run itself again on that new file, up to a configurable depth. The README is candid about its limits: shared style matching only catches exact duplicates, recursive splits could in rare cases create duplicate imports, generated test stubs are only basic smoke tests, and it has been tested against a small representative project rather than large-scale real-world Michelangelo-generated code. No license is mentioned in the README, so its reuse terms are not stated.

Copy-paste prompts

Prompt 1
Walk me through running this component splitter on a React Native screen with --dry-run first.
Prompt 2
Explain how this tool infers real prop types from my project's tsconfig.json.
Prompt 3
What does the self-check and rollback feature actually verify before writing files to disk?
Prompt 4
Help me configure rn-splitter.config.json so I don't have to pass flags every run.
Prompt 5
How does the recursive splitting depth option work if an extracted component is still too big?

Frequently asked questions

What is michelangelo-component-splitter?

A CLI tool that automatically splits oversized React Native screens into smaller components with real TypeScript-aware prop types.

What language is michelangelo-component-splitter written in?

Mainly JavaScript. The stack also includes JavaScript, TypeScript, React Native.

What license does michelangelo-component-splitter use?

No license is stated in the README, so reuse terms are unclear.

How hard is michelangelo-component-splitter to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is michelangelo-component-splitter for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.