prevent dollars to be passed to another function

[jantimon]

there was a bug which caused invalid prop forwarding

this pr adds the following test and ensures that it passes:

it("should filter out properties starting with $ when passing to custom", () => {
  let forwardedProps = null;
  const Component = ({ className, style, ...props}) => {
    forwardedProps = props;
    return null;
  };
  const StyledComponent = styled(Component)``;
  const { container } = render(<StyledComponent $forwardedProp="notForwarded" />);

  expect(forwardedProps).toEqual({});
});

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
yacijs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 21, 2024 7:26pm

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #71 will improve performances by 23.57%

_{Comparing feature/remove-dollars (3c2388d) with main (1844d86)}

Summary

⚡ 1 improvements ✅ 1 untouched benchmarks

Benchmarks breakdown

	Benchmark	main	feature/remove-dollars	Change
⚡	render KanjiLetterComponentYak	295.4 ms	239.1 ms	+23.57%

[jantimon]

Generally the change looks good and I don't know where the -24% execution time comes in, but I like it 😄

I think the approach of not forwarding the props if it's not a yak-component is generally good, but we have to think about the case with the theme.

What do you think?

Maybe I found a fix - lets see if the pipeline is happy

[jantimon]

The performance gain is that it now finally detects nested yak components and calls them directly without telling react 🤣