Component name filter misses common Provider patterns (e.g., ThemeProvider, StyleCacheProvider)

[pastelsky]

Issue

The checkIsSourceComponentName function in packages/react-grab/src/core/context.ts uses an AND condition to filter out Provider/Context wrapper components:

if (name.includes("Provider") && name.includes("Context")) return false;

This requires both "Provider" AND "Context" to be present in the component name. However, many common wrapper components only contain "Provider":

Examples that slip through (not filtered):

• ThemeProvider
• StyleCacheProvider
• IntlProvider
• ReduxProvider
• ApolloProvider
• QueryClientProvider

Examples that ARE filtered (as intended):

• ThemeContextProvider
• AuthContextProvider

Suggestion

Change the condition from && to ||:

if (name.includes("Provider") || name.includes("Context")) return false;

Or perhaps use endsWith for more precision:

if (name.endsWith("Provider") || name.endsWith("Context")) return false;

Context

When selecting a UI element, react-grab walks up the component tree to find the "nearest" component name. Wrapper components like StyleCacheProvider are typically not the component users want to modify - they want the actual UI component that renders the element.

This was discovered while integrating react-grab with an internal tool where StyleCacheProvider was being returned instead of the actual component rendering the <a> element.

Related Code

• File: packages/react-grab/src/core/context.ts
• Function: checkIsSourceComponentName
• Introduced in commit: 0666e22

[pastelsky]

Would you be willing to accept a PR to make the ignore list configurable?

[aidenybai]

yes please do so! @pastelsky