"Convert to Stateful Component" doesn't work with function expressions

[zackkrida]

// Doesn't work
const button = props => (
  <button type="submit" className={props.className}>
    {props.children}
  </button>
)

// Does work
function button(props) {
  return (
    <button type="submit" className={props.className}>
      {props.children}
    </button>
  )
}

[borislit]

@zackkrida thanks for feedback. I was able to reproduce. Ill handle this ASAP and keep you posed

[MitchLillie]

I believe this should be tagged Stateless to Stateful. Also having this issue, seeing the error:

Property body of ClassMethod expected node to be of a type ["BlockStatement"] but instead got "JSXElement"

[borislit]

@MitchLillie can you please provide an example of code you are trying to refactor?

[borislit]

@zackkrida Fixed by https://github.com/wix/vscode-glean/commit/c9361351eb45e55779758d69d163a836bd264caa

[borislit]

I will release the version with the fix as soon as recent Github issues are resolved.

[borislit]

@zackkrida Released https://github.com/wix/vscode-glean/releases/tag/v3.3.3 that includes the fix

[sekoyo]

Hi I have 4.0.2 but have no option to convert the const style of function to a stateful class which is the only reason I installed it!

[borislit]

@DominicTobias the issue the rest in props. The extension code that detects possible actions on selected code seems to have an issue with that. Will fix it ASAP. For now, if you convert the props object to simple destructuring or remove it all together and just use "props" parameters - it should work.

[sekoyo]

Ah ok thanks :)

On Thu, 25 Oct 2018 at 10:05, Boris Litvinsky notifications@github.com wrote:

Reopened #19 https://github.com/wix/vscode-glean/issues/19.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/wix/vscode-glean/issues/19#event-1925622002, or mute the thread https://github.com/notifications/unsubscribe-auth/AAuZ-pHMOf4R4Eb2zcRoB2JNmfhUJh4nks5uoX7fgaJpZM4Xsfgw .

[borislit]

@DominicTobias I've added support for the rest operator in props :) Should be available in v4.0.3 :) Check it out!

[sekoyo]

That was fast! No extra menu option is coming up for me though (in 4.0.3), here's the snippet I'm highlighting:

const Button = ({
  className,
  children,
  isActive,
  size,
  ...otherProps
}) => (
  <button
    className={classNames('Button', `Button--size${size}`, className, {
      'Button--isActive': isActive,
    })}
    type="button"
    {...otherProps}
  >
    {children}
  </button>
);

[borislit]

@DominicTobias works for me on the latest version:

[brownieboy]

@DominicTobias's sample Button code above doesn't work for me with Glean 4.15.2 on VSCode 1.35.1, running on Windows 10.

That "Convert Stateless..." popup menu option simply doesn't appear.

Edited: I originally said it was @borislit's sample code, not @DominicTobias .

[borislit]

@brownieboy please provide a code sample you are trying to refactor and ill have a look :)

[brownieboy]

The Button code in this comment above https://github.com/wix/vscode-glean/issues/19#issuecomment-432989189

[borislit]

@brownieboy I was unable to reproduce the issue. See the attached GIF. Note that the option DOESNT show up if u select the imports too. Tell me if i can be of any help

[brownieboy]

Thanks for investigating, @borislit .

Still not working for me. I've tried on two different machines: Windows 10 and Mac OS X Mojave. I still can't see all the menus. You can see that I am not highlighting the import statement:

[borislit]

@brownieboy Sorry for the delay. havent forgotten about this. Just been a bit busy. Ill have all at this ASAP