[Bug]: Multiple lines of Python within <PyScript> tags treated as 1 line of Python

[AlteriusOmega]

What happened?

Trying to do some very basic Python in my React project with pyscript-react, but it appears that if you have multiple lines of Python between the <PyScript> tags, it is treated as all 1 line of Python causing syntax errors. For example, the follow code throws a syntax error:

import React from 'react';
import PyScriptProvider from 'pyscript-react/umd/components/py-script-provider'
import PyScript from 'pyscript-react/umd/components/py-script/py-script'

const Home: React.FC = () => {
    return (
        <div>
            <PyScriptProvider>
                <PyScript>
                    x=5
                    display(x)
                </PyScript>
            </PyScriptProvider>
        </div>
    );
};

export default Home;

Vanilla PyScript can handle having multiple lines of Python between the tags just fine.

Version

0.0.4

Relevant log output

Uncaught (in promise) PythonError: Traceback (most recent call last):
  File "/home/pyodide/pyscript/_internal.py", line 64, in uses_top_level_await
    return TopLevelAwaitFinder().is_source_top_level_await(source)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/pyodide/pyscript/_internal.py", line 46, in is_source_top_level_await
    node = ast.parse(source)
           ^^^^^^^^^^^^^^^^^
  File "/lib/python311.zip/ast.py", line 50, in parse
    return compile(source, filename, mode, flags,
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "<unknown>", line 1
    x=5 display(x)
        ^^^^^^^
SyntaxError: invalid syntax

How to reproduce?

Simply install and import pyscript-react into a React project and try to write more than 1 line of Python code between the <PyScript> and </PyScript> tags

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[kaurelia]

Hi, your example is written wrongly. It's normal behavior of react's jsx elements, that the new line character is intentionally omitted. To make it work as intended you have to make that as example below:

return (
        <div>
            <PyScriptProvider>
                <PyScript>
                    {`x=5
display(x)`}
                </PyScript>
            </PyScriptProvider>
        </div>
    );

[AlteriusOmega]

Thank you, it would be greatly appreciated if you could add an example of writing multi-line python to your README file. I know that React normally omits the new line character, I just would have thought your library would counteract that so that people could use the same syntax as vanilla PyScript. Since there is no documentation, there was nothing to show the correct syntax.