# PuePy — PyScript Frontend Framework
➡️ [https://puepy.dev](https://puepy.dev)
PuePy is an attempt to create a frontend framework using [PyScript](https://pyscript.net). PuePy is partially inspired by Vue. It runs entirely in your browser, though server-side rendering is likely feasible. PuePy aims to support two runtime environments: PyScript Pyodide or PyScript Micropython. The Micropython option foregoes some features found in the CPython, but offers a far, far smaller runtime, making it a better option for websites. Line-of-business or scientific webapp developers may prefer the CPython version, which is heavier but more functional.
Without further ado, here's a taste:
```python
from puepy import Page, Application, t
app = Application()
@app.page()
class Hello(Page):
def initial(self):
return dict(name="")
def populate(self):
with t.div(classes=["container", "mx-auto", "p-4"]):
t.h1("Welcome to PyScript", classes=["text-xl", "pb-4"])
if self.state["name"]:
t.p(f"Why hello there, {self.state['name']}")
else:
t.p("Why don't you tell me your name?")
t.input(placeholder="Enter your name", bind="name")
t.button("Continue", classes="btn btn-lg", on_click=self.on_button_click)
def on_button_click(self, event):
print("Button clicked") # This logs to console
app.mount("#app")
```
A few things to note:
- The `.state` dictionary, which is populated by `initial()`, is reactive. As it changes, populate is called as necessary and the page is redrawn.
- Events are simply and Python, but use JavaScript events under the hood (including custom events)
- You layout your page with context managers.
## Components, Props, Slots
You can define reusable components with PuePy, which also use slots (similar to Vue, Web Components, etc). Here's a simple Card component:
```python
from puepy import Component, Prop, t
# This registers the component
@t.component()
class Card(Component):
default_role = "card"
props = ["help_text", Prop("show_buttons", "whether to show buttons", bool, False)]
def populate(self):
with t.div(classes="card-header"):
self.insert_slot("card-header")
with t.div(classes="card-body"):
self.insert_slot()
if self.show_buttons:
with t.div(classes="card-footer"):
t.button("Button 1")
t.button("Button 2")
```
Using the component is simple:
```python
@app.page("/my-page")
class MyPage(Page):
def populate(self):
with t.card(show_buttons=True) as card:
with card.slot("card-header"):
t("Show header here")
with card.slot():
t("This is the card body")
```
## Where to go from here...
A few things to note:
- PuePy is not fully documented yet
- I haven't figured out exactly what is permanent and what isn't
- You can examine, in git, the `/examples` directory and view them with `python3 ./serve_examples.py`
Raw data
{
"_id": null,
"home_page": "https://puepy.dev/",
"name": "puepy",
"maintainer": null,
"docs_url": null,
"requires_python": "<4.0,>=3.9",
"maintainer_email": null,
"keywords": "pyscript, webassembly, frontend, framework, reactive",
"author": "Ken Kinder",
"author_email": "ken+github@kkinder.com",
"download_url": "https://files.pythonhosted.org/packages/68/21/fadd54e5c000ee4df2dd1b187f2ad4153314c999e6aef9b126c7340111e5/puepy-0.3.1.tar.gz",
"platform": null,
"description": "# PuePy \u2014 PyScript Frontend Framework\n\n\u27a1\ufe0f [https://puepy.dev](https://puepy.dev)\n\nPuePy is an attempt to create a frontend framework using [PyScript](https://pyscript.net). PuePy is partially inspired by Vue. It runs entirely in your browser, though server-side rendering is likely feasible. PuePy aims to support two runtime environments: PyScript Pyodide or PyScript Micropython. The Micropython option foregoes some features found in the CPython, but offers a far, far smaller runtime, making it a better option for websites. Line-of-business or scientific webapp developers may prefer the CPython version, which is heavier but more functional.\n\nWithout further ado, here's a taste:\n\n```python\nfrom puepy import Page, Application, t\n\napp = Application()\n\n\n@app.page()\nclass Hello(Page):\n def initial(self):\n return dict(name=\"\")\n\n def populate(self):\n with t.div(classes=[\"container\", \"mx-auto\", \"p-4\"]):\n t.h1(\"Welcome to PyScript\", classes=[\"text-xl\", \"pb-4\"])\n if self.state[\"name\"]:\n t.p(f\"Why hello there, {self.state['name']}\")\n else:\n t.p(\"Why don't you tell me your name?\")\n t.input(placeholder=\"Enter your name\", bind=\"name\")\n t.button(\"Continue\", classes=\"btn btn-lg\", on_click=self.on_button_click)\n\n def on_button_click(self, event):\n print(\"Button clicked\") # This logs to console\n\n\napp.mount(\"#app\")\n```\n\nA few things to note:\n\n- The `.state` dictionary, which is populated by `initial()`, is reactive. As it changes, populate is called as necessary and the page is redrawn.\n- Events are simply and Python, but use JavaScript events under the hood (including custom events)\n- You layout your page with context managers.\n\n## Components, Props, Slots\n\nYou can define reusable components with PuePy, which also use slots (similar to Vue, Web Components, etc). Here's a simple Card component:\n\n```python\nfrom puepy import Component, Prop, t\n\n# This registers the component\n@t.component()\nclass Card(Component):\n default_role = \"card\"\n props = [\"help_text\", Prop(\"show_buttons\", \"whether to show buttons\", bool, False)]\n\n def populate(self):\n with t.div(classes=\"card-header\"):\n self.insert_slot(\"card-header\")\n with t.div(classes=\"card-body\"):\n self.insert_slot()\n if self.show_buttons:\n with t.div(classes=\"card-footer\"):\n t.button(\"Button 1\")\n t.button(\"Button 2\")\n```\n\nUsing the component is simple:\n\n```python\n@app.page(\"/my-page\")\nclass MyPage(Page):\n def populate(self):\n with t.card(show_buttons=True) as card:\n with card.slot(\"card-header\"):\n t(\"Show header here\")\n with card.slot():\n t(\"This is the card body\")\n```\n\n## Where to go from here...\n\nA few things to note:\n\n- PuePy is not fully documented yet\n- I haven't figured out exactly what is permanent and what isn't\n- You can examine, in git, the `/examples` directory and view them with `python3 ./serve_examples.py`\n\n\n",
"bugtrack_url": null,
"license": "Apache-2.0",
"summary": "Frontend Framework for PyScript",
"version": "0.3.1",
"project_urls": {
"Documentation": "https://docs.puepy.dev/",
"Homepage": "https://puepy.dev/",
"Repository": "https://github.com/kkinder/puepy"
},
"split_keywords": [
"pyscript",
" webassembly",
" frontend",
" framework",
" reactive"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "0bc6b1500d82979d7db1a54c3e3a9e4394fe35dc3fafda0410427b369609cf35",
"md5": "e1370b5d523bbea8ba15883aeb30aaca",
"sha256": "9c1e538c01ab405aaa5c1148a8922f1e20c5b04336852b94ad4b29a2c62314e4"
},
"downloads": -1,
"filename": "puepy-0.3.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "e1370b5d523bbea8ba15883aeb30aaca",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": "<4.0,>=3.9",
"size": 18287,
"upload_time": "2024-06-23T11:51:56",
"upload_time_iso_8601": "2024-06-23T11:51:56.475283Z",
"url": "https://files.pythonhosted.org/packages/0b/c6/b1500d82979d7db1a54c3e3a9e4394fe35dc3fafda0410427b369609cf35/puepy-0.3.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "6821fadd54e5c000ee4df2dd1b187f2ad4153314c999e6aef9b126c7340111e5",
"md5": "65cdcd1150d3efd68805b73631a22e30",
"sha256": "1f6c3c42c2a52f5e2f43cb68f5b2285a6a5a7f169304355e40dfd16f282dc69d"
},
"downloads": -1,
"filename": "puepy-0.3.1.tar.gz",
"has_sig": false,
"md5_digest": "65cdcd1150d3efd68805b73631a22e30",
"packagetype": "sdist",
"python_version": "source",
"requires_python": "<4.0,>=3.9",
"size": 16330,
"upload_time": "2024-06-23T11:51:57",
"upload_time_iso_8601": "2024-06-23T11:51:57.618714Z",
"url": "https://files.pythonhosted.org/packages/68/21/fadd54e5c000ee4df2dd1b187f2ad4153314c999e6aef9b126c7340111e5/puepy-0.3.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-06-23 11:51:57",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "kkinder",
"github_project": "puepy",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "puepy"
}
JSON
