Improve extract meta

[T4rk1n]

Improve extract-meta errors by include file/propPath/line where the error originates.

Restart of #3364, fixes #3362

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[AnnMarieW]

This is a huge improvement! It's now possible to see which component/prop is generating the error:

Here's an example:

Error with path node_modules/@types/react/index.d.ts:2402:13

ERROR: "sections.dangerouslySetInnerHTML.__html" matches reserved word pattern: /^_.*$/

However, this isn't something I can fix in the component. In this case, the sections prop type is defined in Mantine:

export interface RingProgressSection extends React.ComponentProps<'circle'>, DataAttributes {
  value: number;
  color: MantineColor;
  tooltip?: React.ReactNode;
}

It looks like the parser is recursing into React.ComponentProps<'circle'>, eventually reaching dangerouslySetInnerHTML.__html.

Would it make sense to skip the React DOM types?

As a workaround, I can get the component to build by using prop type any, but I'd rather use the original type information if possible.

[T4rk1n]

Would it make sense to skip the React DOM types?

Not for this case, it trigger the error of named _ because we reserved those for internal props and Python class attributes. But in the case of nested it doesn't matter, so the proper fix would be to apply that ignore only on the components and let the nested types do whatever. Could also remove the base _ in the ignore parameter of the builder cli, since it would be applied all the time for the base props and leave that ignore to the component dev.

Otherwise, there is always typescript Omit to remove any unwanted prop:

type OmitHtmlMerge<
  HtmlTag extends keyof React.JSX.IntrinsicElements,
  Params extends keyof React.ComponentProps<HtmlTag> = never,
> = Omit<React.ComponentProps<HtmlTag>, "dangerouslySetInnerHTML" | Params>;

// No extra keys omitted — Params defaults to never
type Cleaned = OmitHtmlMerge<"circle">;

// Also omit some real props of <circle>
type Cleaned2 = OmitHtmlMerge<"circle", "onClick" | "cx">;