Convert Renamer to React

[madebyisaacr]

Description

This pull request converts the Renamer plugin from Svelte to React.

It's the only plugin made with Svelte, and no one on the plugins team knows Svelte, so this helps make it easier to maintain and removes Svelte as a dependency.

Closes #303

Updates

• Converted from Svelte to React (Cursor basically one shotted it in 5 min 🤯)
• Fixed text nodes - previously text nodes did not appear in the results list
• Added support for renaming layers inside components - previously only layers in pages could be renamed
• Added success and error notifications

• Replica layers inside variants/breakpoints are now filtered out. Because all replicas of a layer share the same name, there is no benefit to showing each replicated layer in the list.
  Before & after for a component with 3 variants:

UI changes

• Updated component and text icon colors to match layers panel
  • Vector set instances use the component icon. See Add isVectorSet property to ComponentInstanceNode #358
• Reduced padding around arrow icon in layers list

Testing

None yet

Testing

• Rename layers in search mode
• Rename layers in clean mode
• Switch between multiple pages and components and ensure the content in the results list changes
• Rename layers inside a page
• Rename layers inside a component
• Make sure frames, text layers, and component instances are all renamed as expected.
• To test permissions, open the plugin in a project where you are a viewer and do not have edit access. You should be able to search layers, but the rename button should be disabled.
• Test the same processes in the current production version of Renamer and this PR version, and make sure they work exactly the same (or better).

[Copilot]

Pull Request Overview

This PR converts the Renamer plugin from Svelte to React to improve maintainability and remove Svelte as a dependency. The conversion includes several functional improvements such as text node support, component layer renaming, and better replica filtering.

Key changes:

• Complete framework migration from Svelte to React
• Added text node support and component layer renaming capabilities
• Enhanced replica filtering and UI improvements with success/error notifications

Reviewed Changes

Copilot reviewed 35 out of 56 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
vite.config.ts	Removed Svelte configuration
svelte.config.js	Removed Svelte configuration file
src/search/indexer.ts	Added text node support and component indexing
src/search/batch_process_results.ts	Added notification support and improved tracking
src/main.tsx	New React entry point
src/main.ts	Removed Svelte entry point
src/components/*.svelte	Removed all Svelte components
src/components/*.tsx	Added React component implementations
src/App.tsx	Main React application component
src/App.css	Consolidated styles for React components
package.json	Updated dependencies for React migration
index.html	Updated entry point and root element

Comments suppressed due to low confidence (3)

plugins/renamer/src/search/indexer.ts:62

• The parameter name 'pages' is misleading since it now includes both WebPageNode and ComponentNode types. Consider renaming to 'canvasRoots' or 'rootNodes' to better reflect the actual content.

    private async *crawl(pages: CanvasRootNode[]): AsyncGenerator<IndexEntry[]> {

plugins/renamer/src/search/indexer.ts:105

• The method name 'getPages' is misleading since it now returns both pages and components. Consider renaming to 'getCanvasRoots' or 'getRootNodes' to accurately describe what it returns.

    private async getPages(): Promise<CanvasRootNode[]> {

plugins/renamer/src/components/Results.tsx:56

• [nitpick] The outer div has className 'results' but the component is also named 'Results'. This creates confusion between the component and the CSS class. Consider renaming the CSS class to 'results-container' or similar.

        <div className="results">

[madebyisaacr]

Search icon copied from here:

[elmarburke]

Great work on this migration, looks like moving from Svelte to React went pretty smoothly!

I focused my review mostly on the new and changed code, rather than the existing implementation, and left some comments around patterns, naming, and separation of concerns that might help with future maintainability.

Overall, nice job 🚀

[elmarburke]

I didn't saw a virtual list anywhere anymore. Do large sets of results not cause issues now?

[madebyisaacr]

Good catch, I missed that part.

In most cases it will show a lot less results because replica layers are filtered out now. For example on a page with 3 breakpoints, it will show about 1/3 as many results as before.

Yesterday I tried converting the virtual list to React with Cursor. It failed spectacularly (so many bugs), so I'm going to try again later without AI.

[madebyisaacr]

@elmarburke I added a virtual list. It's in Results.tsx now instead of a separate component.

[elmarburke]

I think we can improve how the plugin communicates insufficient edit rights. In other cases, hiding action elements makes sense, but since renaming is the core function here, that approach doesn’t fit. Maybe we could display a banner instead?

[madebyisaacr]

I think we can improve how the plugin communicates insufficient edit rights. In other cases, hiding action elements makes sense, but since renaming is the core function here, that approach doesn’t fit. Maybe we could display a banner instead?

Disabling the button and adding an "Insufficient permissions" tooltip is how all of our other plugins handle permissions. It already shows this banner if you don't have edit access, so does it really need a second banner?

[elmarburke]

Disabling the button and adding an "Insufficient permissions" tooltip is how all of our other plugins handle permissions. It already shows this banner if you don't have edit access, so does it really need a second banner?

I'm undecided. But, from a user flow perspective, why would you open the Renamer plugin when you're not allowed to edit (and know that through banners). On a second thought, this is fine 👍

[elmarburke]

Looks good to me, great work 👍

QA passed ✅

[madebyisaacr]

Changes since approval:

• Using result.id for row keys.
• Added title to before and after text so you can hover to view the full value of long text.