React Generator Adds Ref Props to TS Comp Props

[crutchcorn]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• All
• Angular
• HTML
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

Reproduction case

https://mitosis.builder.io/?outputTab=E4UwhgxgLkA%3D&code=C4TwDgpgBACgTgezAZygXigbwFBShAGwCUIAzALigEMA7EAbmwF9HsIAPMBOYKAEzJUArgV6khNAMbAAlghpQAwggEBRPjODcAFGEQpK8JMgCUWXFDgRgQuAu0W8AHg0A3S2TSY9xgHSESUiYoAHoAPgsTRiZsIA

Expected Behaviour

You'll need to select TypeScript in the Repro case

When provided the following in Mitosis:

type Props = {
  elRef: any;
};

export default function CodeEditor(props: Props) {
  return (
    <div ref={props.elRef} />
  );
}

You get the following React output:

import * as React from "react";
import { forwardRef } from "react";

type Props = {
  elRef: any;
};

const CodeEditor = forwardRef<Props["elRef"]>(function CodeEditor(
  props: Props,
  elRef
) {
  return <div ref={elRef} />;
});

export default CodeEditor;

However, this leads to the TypeScript error of:

dist/react/src/CodeEditor.tsx:8:56 - error TS2345: Argument of type '(props: Props, elRef: ForwardedRef<any>) => Element' is not assignable to parameter of type 'ForwardRefRenderFunction<any, {}>'.
  Types of parameters 'props' and 'props' are incompatible.
    Property 'elRef' is missing in type '{}' but required in type 'Props'.

8 const CodeEditor = forwardRef<Props["elRef"]>(function CodeEditor(
                                                         ~~~~~~~~~~

  dist/react/src/CodeEditor.tsx:5:3
    5   elRef: any;
        ~~~~~
    'elRef' is declared here.

Actual Behaviour

To solve this TS error, we need to Omit the key from the props ref usage:

import * as React from "react";
import { forwardRef } from "react";

type Props = {
  elRef: any;
};

const CodeEditor = forwardRef<Props["elRef"]>(function CodeEditor(
  props: Omit<Props, "elRef">,
  elRef
) {
  return <div ref={elRef} />;
});

export default CodeEditor;

Additional Information

No response

[samijaber]

You can manipulate the prop type generation here:

mitosis/packages/core/src/generators/react/generator.ts

Lines 339 to 343 in 67d4a51

	const propType = json.propsTypeRef || 'any';
	const componentArgs = [`props${options.typescript ? `:${propType}` : ''}`, options.forwardRef]
	.filter(Boolean)
	.join(',');

[crutchcorn]

Yup!

I'd like to hold off until this PR is resolved before working on this:

#1172