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><metaname="description" content="A demo of ReactPy running in the browser with PyScript"><!-- Facebook Meta Tags --><metaproperty="og:url" content="https://guileless-monstera-ca2caa.netlify.app/"><metaproperty="og:type" content="website"><metaproperty="og:title" content="ReactPy + PyScript"><metaproperty="og:description" content="A demo of ReactPy running in the browser with PyScript"><metaproperty="og:image" content="https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/png/reactpy-logo-landscape-padded.png"><!-- Twitter Meta Tags --><metaname="twitter:card" content="summary_large_image"><metaproperty="twitter:domain" content="guileless-monstera-ca2caa.netlify.app"><metaproperty="twitter:url" content="https://guileless-monstera-ca2caa.netlify.app/"><metaname="twitter:title" content="ReactPy + PyScript"><metaname="twitter:description" content="A demo of ReactPy running in the browser with PyScript"><metaname="twitter:image" content="https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/png/reactpy-logo-landscape-padded.png"><!-- Actual Header --><linkrel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /><scriptdefersrc="https://pyscript.net/latest/pyscript.js"></script><linkrel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"></head><body><mainclass="container"><h1>Simple Counter App</h1><divid="root"><articlearia-busy="true"></article></div><h1>Source Code</h1><ahref="https://github.com/reactive-python/reactpy"><imgsrc="https://github-link-card.s3.ap-northeast-1.amazonaws.com/reactive-python/reactpy.png" width="460px"></a><preid="source-code-view"></pre></main><py-config> packages = ["reactpy", "ssl", "jsonpointer"] [splashscreen] enabled = false </py-config><py-scriptid="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>constsourceCodeView=document.getElementById("source-code-view");constsourceCodeContent=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

Uh oh!

Uh oh!

ReactPy in the Browser #1096

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 6 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

ReactPy in the Browser #1096

Uh oh!

rmorsheaJul 11, 2023 Maintainer

Replies: 1 comment · 6 replies

Uh oh!

yessycedeno84Apr 23, 2024

Uh oh!

bitnomOct 18, 2024

Uh oh!

bitnomOct 18, 2024

Uh oh!

bitnomOct 18, 2024

Uh oh!

bitnomOct 18, 2024

Uh oh!

Uh oh!

ArchmongerOct 18, 2024 Maintainer

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