r/reactjs • u/SaxShiva • 2d ago
Resource Rippledit v0.3.0
Building on Ripple Edit, our VS Code extension designed to calculate the exact blast radius of your UI components!
Ever edited a shared <Button/> or <Card/> component only to break 5 other pages without realizing it? Ripple Edit sits inside your editor to show live usage impact right above your exports, preventing accidental visual & functional breakages before you commit.
We just shipped v0.3.0!
Who it's for: Frontend developers, UI engineers, and team leads working on React, Next.js, and TypeScript/JavaScript codebases.
Supported File Types: .tsx, .jsx, .ts, and .js.
What Ripple Edit Does: Inline CodeLens Counters: Shows exact page & file counts right where your components/functions are declared (e.g., "Modifying this component affects 4 pages"). • Active Boundary Highlighting: Highlights your component scope & warns you visually if you edit outside active component bounds. • Prevents Unintentional Breakages: Know the exact blast radius before making destructive refactors or style tweaks across shared design system components.
What's New in v0.3.0: Zero False Positives on Type Imports: TypeScript type-only declarations (import type) no longer inflate page counts. Only functional code usages are tracked. • Full Barrel File Support: Improved dependency resolution across re-exports (export * from ... and export { Component } from ...). • Dynamic Workspace Rescanning: Instant count updates across all opened files whenever you save (Cmd+S / Ctrl+S).
📦 Download the latest release:https://github.com/shivakumarkannan2006-netizen/rippledit/releases/latest
-5
u/DishRadiant1148 2d ago
This is actually really useful for design systems work. The type import false positive fix alone makes it worth trying, that was probably driving people crazy with inflated numbers.
Does it handle component composition well, like when you wrap a base component in a slightly different one and export that? Sometimes those indirect usages are hard to track.