PYX - python-based realtime frontend framework
Project description
PYX
A python-based realtime frontend framework
examples
pages: first, second, third
composed: tabs
use
# tests/test_1.py
from pyx import Tag
@Tag
def name(*, attr):
return 'Child'
def __pyx__():
"""entrypoint for pyx"""
return name(attr=1, only_view_attr=True)
will render
...
<body>
<pyx>
<name attr="1" only_view_attr>
Child
</name>
</pyx>
</body>
...
and
# tests/test_2.py
from pyx import cached_tag, state, button, style, br, div
@cached_tag.update(title='div')
def func(tag):
tag.count = state(0)
def increment():
tag.count += 1
def decrement():
tag.count -= 1
return [
div(_class='text', children=f'Count: {tag.count}'),
br(),
button(_class='button', on_click=increment, children="++"),
br(),
button(_class='button', on_click=decrement, children="––"),
style(scoped=True, children='''
.text, .button {
font-size: 1rem;
}
.button {
background: none;
border: 1px solid red;
border-radius: .1rem;
}
''')
]
# can be simplified as __pyx__ = func
def __pyx__():
"""entrypoint for pyx"""
return func()
will render
...
<body>
<pyx>
<div pyx-style="<random style>">
<div class="text">Count: -5</div>
<br>
<button on_click="<fn hash>" class="button">++</button>
<br>
<button on_click="<fn hash>" class="button">––</button>
<style>[pyx-style="<random style>"] .text, [pyx-style="<random style>"] .button {
font-size: 1rem;
}
[pyx-style="<random style>"] .button {
background: none;
border: 1px solid red;
border-radius: .1rem;
}</style>
</div>
</pyx>
<error>
<render_error></render_error>
<!-- place for error from request -->
</error>
<script>
$('[pyx-id="<tag hash>"]').parent().attr('pyx-style', '<random style>')
</script>
</body>
...
and with parser .pyx
# tests/test_3.pyx
from pyx import Tag, state, select, p # not necessary, really
@cached_tag.update(title='div')
def func(tag):
tag.selected = state(1)
items = {0: 'first', 1: 'second', 2: 'third'}
def _select(value):
tag.selected = int(value)
return <>
<p>Key: {tag.selected}</p>
<p @click.right:prevent={lambda: 'GOT IT'}>Value: {items[tag.selected]}</p>
<select
items={items}
@change:prevent={_select}
value={tag.selected}
/>
</>
__pyx__ = func
will render
...
<body>
<div>
<p>Key: 0</p>
<!-- will be called on contextmenu event with .preventDefault() -->
<p @click.right:prevent="<fn hash>">Value: first</p>
<!-- will be called on change event with .preventDefault() -->
<select @change:prevent="<fn hash>" value="0">
<option label="first" value="0" selected>first</option>
<option label="second" value="1">second</option>
<option label="third" value="2">third</option>
</select>
</div>
</body>
...
or merge them with tabs component
# tests/test_tabs.py
from pyx import tabs, tab, style, __APP__ as app
from pyx.utils.app import utils
from tests import test_1, test_2, test_3
def main():
query = utils.query
tabs_list = [
dict(name='page 1', children=test_1.__pyx__, url='/?page=1'),
dict(name='page 2', children=test_2.__pyx__, url='/?page=2'),
dict(name='page 3', children=test_3.__pyx__, url='/?page=3')
]
return [
tabs(
selected='page ' + query['page'] if 'page' in query else None,
_class='content',
children=[tab(**kw) for kw in tabs_list],
),
style(scoped=True, head=True, children='''
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
}
/* Float the list items side by side */
tab {
float: left;
}
/* Change background color of links on hover */
tabs tab:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
tabs tab:focus, tabs tab[active] li {
background-color: #ccc;
}
/* Style the links inside the list items */
li {
font-family: "Lato", sans-serif;
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Style the tab content */
.content {
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
'''),
]
__pyx__ = main
or you can render all three at once
# tests/app_fastapi.py
from pyx import render, run_app, __APP__
from tests import test_1, test_2, test_3, test_tabs
@__APP__.get('/1')
def test_1_route():
return render(test_1)
@__APP__.get('/2')
def test_2_route():
return render(test_2)
@__APP__.get('/3')
def test_3_route():
return render(test_3)
@__APP__.get('/tabs')
def test_tabs_route():
return render(test_tabs)
if __name__ == '__main__':
run_app(name='tests.app_fastapi')
else:
app = __APP__ # for uvicorn / vercel
__PYX__=modulename python -m pyx.app
install
now PYX use Flask for render
pip install -r requirements.txt
.pyx
File watcher for Intellij Idea family:
Editor -> File Types -> New -> .pyx
Settings -> Tools -> File Watchers -> New ->
File type: .pyx
Program: python
Arguments: /pyx/pyx_parser.py
#TODO: cli file watcher && other IDE support
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
pyx-framework-0.2.0.tar.gz
(21.8 kB
view details)
File details
Details for the file pyx-framework-0.2.0.tar.gz.
File metadata
- Download URL: pyx-framework-0.2.0.tar.gz
- Upload date:
- Size: 21.8 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.3.0 pkginfo/1.7.0 requests/2.25.1 setuptools/51.1.2 requests-toolbelt/0.9.1 tqdm/4.58.0 CPython/3.9.1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
f1ad43c761ea94b7d5489fea915e2e73c469e7c9f3d69cc1f4c90d585768ab6c
|
|
| MD5 |
eb02c93906e0248c39b6426ce997b8fd
|
|
| BLAKE2b-256 |
f5a6880f7a2b350c7b475bd6092342ad1fa0f9d0e8c3ee0ab39a3112da878a1e
|
