Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compiled code contain jsx code. #54411

Closed
IvanovRoman opened this issue May 26, 2023 · 4 comments Β· Fixed by #54425
Closed

Compiled code contain jsx code. #54411

IvanovRoman opened this issue May 26, 2023 · 4 comments Β· Fixed by #54425
Assignees
Labels
Bug A bug in TypeScript Fix Available A PR has been opened for this issue

Comments

@IvanovRoman
Copy link

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 RyanCavanaugh added the Bug A bug in TypeScript label May 26, 2023
@RyanCavanaugh RyanCavanaugh added this to the TypeScript 5.2.0 milestone May 26, 2023
@RyanCavanaugh
Copy link
Member

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

@typescript-bot typescript-bot added the Fix Available A PR has been opened for this issue label May 27, 2023
@ericrafalovsky
Copy link

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
Copy link

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

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

@RyanCavanaugh
Copy link
Member

Fixed the variation in the linked issue/PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug A bug in TypeScript Fix Available A PR has been opened for this issue
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants