ReactPy in the Browser #1096

rmorshea · 2023-07-11T07:10:51Z

rmorshea
Jul 11, 2023
Maintainer

It's not pretty, but the fact that I was able to hack together a prototype of ReactPy running in the browser using PyScript in just a few hours is kind of amazing. https://guileless-monstera-ca2caa.netlify.app/

For posterity, here's the source:

<html>
  <head>
    <!-- HTML Meta Tags -->
    <title>ReactPy + PyScript</title>
    <meta name="description" content="A demo of ReactPy running in the browser with PyScript">

    <!-- Facebook Meta Tags -->
    <meta property="og:url" content="https://guileless-monstera-ca2caa.netlify.app/">
    <meta property="og:type" content="website">
    <meta property="og:title" content="ReactPy + PyScript">
    <meta property="og:description" content="A demo of ReactPy running in the browser with PyScript">
    <meta property="og:image" content="https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/png/reactpy-logo-landscape-padded.png">

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta property="twitter:domain" content="guileless-monstera-ca2caa.netlify.app">
    <meta property="twitter:url" content="https://guileless-monstera-ca2caa.netlify.app/">
    <meta name="twitter:title" content="ReactPy + PyScript">
    <meta name="twitter:description" content="A demo of ReactPy running in the browser with PyScript">
    <meta name="twitter:image" content="https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/png/reactpy-logo-landscape-padded.png">

    <!-- Actual Header -->
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
  </head>
  <body>
    <main class="container">
        <h1>Simple Counter App</h1>
        <div id="root">
            <article aria-busy="true"></article>
        </div>
        <h1>Source Code</h1>
        <a href="https://github.com/reactive-python/reactpy"><img src="https://github-link-card.s3.ap-northeast-1.amazonaws.com/reactive-python/reactpy.png" width="460px"></a>
        <pre id="source-code-view"></pre>
    </main>
    <py-config>
      packages = ["reactpy", "ssl", "jsonpointer"]
      
      [splashscreen]
      enabled = false
    </py-config>
    <py-script id="source-code-content">
        import js
        import asyncio
        from reactpy import html, component, use_state
        from reactpy.core.layout import Layout
        from jsonpointer import set_pointer
        from pyodide.ffi.wrappers import add_event_listener

        # --- Application Code ---------------------------------------------------------

        @component
        def app():
            value, set_value = use_state(0)
            return html.article(
                html.div(
                    {"class": "grid"},
                    html.button({"on_click": lambda event: set_value(value + 1)}, "+"),
                    html.button({"on_click": lambda event: set_value(value - 1)}, "-"),
                ),
                "Current value",
                html.pre({"style": {"font-style": "bold"}}, str(value)),
            )

        # --- Framework Code ---------------------------------------------------------

        model = {}

        def apply_update(update):
            if update["path"]:
                set_pointer(model, update["path"], update["model"])
            else:
                model.update(update["model"])

        def render_model(layout, model):
            root = js.document.getElementById("root")
            root.innerHTML = ""
            _render_model(layout, root, model)

        def _render_model(layout, parent, model):
            if isinstance(model, str):
                parent.appendChild(js.document.createTextNode(model))
            elif isinstance(model, dict):
                if not model["tagName"]:
                    for child in model.get("children", []):
                        _render_model(layout, parent, child)
                    return
                tag = model["tagName"]
                attributes = model.get("attributes", {})
                children = model.get("children", [])
                element = js.document.createElement(tag)
                for key, value in attributes.items():
                    if key == "style":
                        for style_key, style_value in value.items():
                            setattr(element.style, style_key, style_value)
                    else:
                        element.setAttribute(key, value)
                for event_name, event_handler_model in model.get("eventHandlers", {}).items():
                    _create_event_handler(layout, element, event_name, event_handler_model)
                for child in children:
                    _render_model(layout, element, child)
                parent.appendChild(element)
            else:
                raise ValueError(f"Unknown model type: {type(model)}")

        def _create_event_handler(layout, element, event_name, event_handler_model):
            target = event_handler_model["target"]

            def event_handler(*args):
                asyncio.create_task(layout.deliver({
                    "type": "layout-event",
                    "target": target,
                    "data": args,
                }))

            event_name = event_name.lstrip("on_").lower().replace("_", "")
            add_event_listener(element, event_name, event_handler)

        async def main():
            async with Layout(app()) as layout:
                while True:
                    update = await layout.render()
                    apply_update(update)
                    render_model(layout, model)

        asyncio.create_task(main())
    </py-script>
    <script>
        const sourceCodeView = document.getElementById("source-code-view");
        const sourceCodeContent = document.getElementById("source-code-content");
        sourceCodeView.innerText = sourceCodeContent.innerText;
    </script>
  </body>
</html>

yessycedeno84 · 2024-04-23T23:13:30Z

yessycedeno84
Apr 23, 2024

I tested this code running locally in pyscript 2024.4.1 configured with pyodide-0.26.0a4 as the interpreter and everything OK, but I got the following error when I tried to use reactpy_router to create routes RuntimeError: No backend established a connection. Are there plans to fully support pyscript? Or how can I workaorund this to make routing work when using pyscript?

6 replies

bitnom Oct 18, 2024

This would make a lot of sense to put on the roadmap, don't you think? Suggestion though: pyodide is probably much better supported and into the future. Cloudflare are using it for their Workers. I think wasmer are using it for their edge solution as well.

https://wasmer.io/posts/py2wasm-a-python-to-wasm-compiler
https://developers.cloudflare.com/workers/languages/python/

ReactPy Router currently doesn't take pyscript into account. We'd need to make a few compatibility changes to get this working.

If you make a comprehensive explanation of what needs to be done to make it work, geared towards someone who has not yet contributed to reactpy, I wouldn't mind taking a crack at a PR.

Archmonger Oct 18, 2024
Maintainer

I just finished rewriting ReactPy-Router today, which resolves all major issues.

In all likelihood, I will create another minor release to ReactPy-Router in the next two weeks which includes pyscript support and scroll_restoration.

As a reminder, right now the only officially support PyScript environment is contained within ReactPy-Django.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ReactPy in the Browser #1096

{{title}}

Replies: 1 comment 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

ReactPy in the Browser #1096

rmorshea Jul 11, 2023 Maintainer

Replies: 1 comment · 6 replies

yessycedeno84 Apr 23, 2024

bitnom Oct 18, 2024

bitnom Oct 18, 2024

bitnom Oct 18, 2024

bitnom Oct 18, 2024

Archmonger Oct 18, 2024 Maintainer

rmorshea
Jul 11, 2023
Maintainer

Replies: 1 comment 6 replies

yessycedeno84
Apr 23, 2024

Archmonger Oct 18, 2024
Maintainer