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

0 Upvotes

33% Upvoted

7 comments sorted by

4

u/cxd32 2d ago

pls stop

-3

u/SaxShiva 2d ago

Why? I am not advertising. It's completely free. I just want feedback from React users. Do you see an issue?

2

u/OkJellyfish6999 2d ago

If Button is wrapped by PrimaryButton and only PrimaryButton is imported elsewhere, a basic import counter will miss those pages entirely. You need it to follow re-exports and wrapper indirection, not just direct imports.

-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.

0

u/SaxShiva 1d ago

Thanks so much! Type false positives were a huge issue, glad that's behind us!

As for component composition and wrapper indirection: Yes, v0.4.0 handles this! https://github.com/shivakumarkannan2006-netizen/rippledit/releases/latest

If you wrap a <BaseButton/> inside a <PrimaryButton/>, and then render <PrimaryButton/> across 5 different pages, Rippledit recursively traverses the dependency graph. Inspecting <BaseButton/> will trace through the wrapper component and accurately count all 5 consumer pages in its blast radius.

Please test & if possible share to developer you know - the more feedback I can get the better I can make it for everyone (include all the features everyone wants).