Playground support for the object syntax (ie. use without JSX)

[Angush]

Feature Request

Description

Per the readme, Satori supports JSX (with a transpiler enabled), and also a React-like object syntax with type, props.children, and props.style fields. It would be nice if this syntax was usable on the playground as a toggle.

Additional Context

Using Satori without a transpiler, you end up needing to constantly tweak your structure, rerun the script, and re-check the output, in order to iteratively develop and tinker on Satori-made images. When I was previously using Satori with a transpiler, this was easy, thanks to the playground.

[multipletwigs]

Hey @shuding! I'd love to try out this feature request, and so far I have a wonky solution here that works like this.

However I think I might be overcomplicating things? After all it's labelled as a Good first Issue.

1. Based on my understanding of the code, LiveSatori takes in the live object from withLive() HOC but calls render() on the live?.element.prototype property to pass onto satori().
2. Since React-Live only accepts JSX, and "creates" the element for you, it doesn't understand react-like objects? Hence live?.element actually gives null when using react-like objects, which caused Satori (not the editor) to throw an error at the start of the demo where .length is called on an undefined object.
3. What I did was basically just transforming the code into valid JSX that React-Live can parse that feels very hacky because of the outer div.

<LiveProvider
  code={editedCards[activeCard]}
  transformCode={(newCode) =>
    objNotation
      ? `<div style={{width: '100%', height: '100%', display: 'flex', backgroundColor:'#fff'}}>{${newCode}}</div>`
      : newCode
  }
>
  {hydrated ? (
    <PanelGroup
      autoSaveId='og-playground'
      direction={isMobileView ? 'vertical' : 'horizontal'}
    >
      {isMobileView ? previewPanel : editorPanel}
      <PanelResizeHandle />
      {isMobileView ? editorPanel : previewPanel}
    </PanelGroup>
  ) : null}
</LiveProvider>

4. On a side note, trying to understand index.ts was actually a bit difficult for someone new 😅, is there a reason why everything is in one big file?

Any pointers are appreciated!

[shuding]

@multipletwigs Thanks for taking this and I like your solution! I think one nice thing we can do is to remove the checkbox with a try { JSON.parse(content) }. If it's a JSX element it should fail, but an object will pass. Hence we can detect that automatically.

is there a reason why everything is in one big file?

That's mostly because we added many things to the playground incrementally and didn't re-organize it. Feel free to do good refactoring to the project!