Properties editor does not support JSX syntax

[jordanarldt]

Describe the bug

When previewing a component with a children property, the properties editor does not allow supplying any simple JSX syntax. It's common when writing React components to have child props, or props that render other JSX elements.

Reproduction

1. Create a React component
2. Make the component render its children prop:

const TestComponent = ({ children }) => {
  return (
    <>
      {children}
    </>
  );
};

3. Open the component with Preview.js
4. Add the children prop to the Preview.js properties object:

properties = {
    children: <>Test</>
};

5. See that Preview.js will error and will not display the children.

Preview.js version

v1.5.1

System Info

System:
    OS: macOS 12.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 67.74 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.6.1 - ~/.nvm/versions/node/v16.6.1/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v16.6.1/bin/yarn
    npm: 8.1.4 - ~/.nvm/versions/node/v16.6.1/bin/npm
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    Sublime Text: Build 3114
    Vim: 8.2 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Browsers:
    Chrome: 100.0.4896.60
    Firefox: 98.0.2
    Safari: 15.3

Used Package Manager

npm

Extension logs (useful for crashes)

No response

Preview logs (useful for rendering errors)

No response

Anything else?

No response

[fwouts]

Thanks! That's a good point.

In the meantime, you should be able to at least pass a string.

[jordanarldt]

Thanks! That's a good point.

In the meantime, you should be able to at least pass a string.

Thanks for the reply! I did try passing as a string, but the HTML characters were escaped unfortunately. I'm sure I'll be able to find a workaround - just figured I'd point this out since it's such a common thing to do in React :-)

On a side note, this is great! Loving it so far. Thanks for creating this.

[kylerjensen]

It would be really cool to have something similar to react-live in the properties editor so we can just edit the raw code and immediately see the results.

[fwouts]

Preview.js v1.20 now supports JSX in the properties editor 🥳

@jordanarldt @kylerjensen let me know if you try it out!