Compiled code contain jsx code.

[IvanovRoman]

Bug Report

Compiled code contain jsx code <Label label='aaaa'/>

🔎 Search Terms

🕗 Version & Regression Information

Typescript version 5.1.0-beta

⏯ Playground Link

Playground link with problem code

Playground link with work code

💻 Code

import * as React from 'react';

const Label: React.FC<{ label: string; }> = props => <label>{props.label}</label>;

interface BindProps<T = any, K extends keyof T = any> {
 bObject: T;
 bKey: K;
 bLabel?: string | React.ReactNode;
}

function bind<T, K extends keyof T>(bObject: T, bKey: K, bLabel?: string | React.ReactNode): BindProps<T, K> {
 return { bObject, bKey, bLabel };
}

function withBind<P extends object, V extends keyof P, C extends keyof P>(
 Component: React.ComponentType<P>,
 pick: (value: P[V], onChange: (value: P[V]) => void) => Pick<P, V | C>
) {
 return class extends React.Component<Omit<P, V | C> & BindProps> {
 private onChange = () => {
 };

 render() {
 const { bObject, bKey, bLabel, ...rest } = this.props;
 const props = { ...pick(bObject[bKey], this.onChange), ...rest } as P;
 const element = <Component {...props} />;
 if (bLabel === undefined) {
 return element;
 }
 
 return (
 <>
 {typeof bLabel === 'string' ? <Label label={bLabel} /> : bLabel}
 {element}
 </>
 );
 }
 }
}

interface TextInputProps {
 value: string;
 onChange: React.ChangeEventHandler<HTMLInputElement>;
}

const TextInput: React.FC<TextInputProps> = props => <input type='text' {...props} />;

export const BTextInput = withBind<TextInputProps, 'value', 'onChange'>(TextInput, (value, onChange) => {
 return { value, onChange: e => onChange(e.currentTarget.value) };
});

const obj = { text: '' };
<BTextInput {...bind(obj, 'text', <Label label='aaaa' />)} />;

🙁 Actual behavior

React.createElement(exports.BTextInput, Object.assign({}, bind(obj, 'text', <Label label='aaaa'/>)));

🙂 Expected behavior

React.createElement(exports.BTextInput, Object.assign({}, bind(obj, 'text', React.createElement(Label, { label: 'aaaa' }))));

[RyanCavanaugh]

Simpler:

// Not transformed
const n1 = <div {...<span />} />;
// Transformed
const n2 = <div {...(() => {})} />;

This is specific to when we need to call Object.assign or __assign to emit the spread. When the emit uses a native JS spread, then we don't see this

[ericrafalovsky]

Once merged, can the fix be cherry picked into a 5.1.x release? This seems like a regression currently in 5.1.2-rc.

[thatsmydoing]

There's a minor variation of this that's not fixed in 5.1.6 or the latest nightly

<div {...{ prop: <span /> }} />

[RyanCavanaugh]

Fixed the variation in the linked issue/PR