cykim8811 / pyx-react Goto Github PK

License: MIT License

JavaScript 0.87% HTML 1.22% TypeScript 17.83% Python 74.08% Cython 6.01%

pyx-react's Introduction

PyX Framework

Introduction

PyX Framework is a framework that enables Python objects to be easily rendered on a web server. This allows Python developers to integrate their backend logic with web interfaces seamlessly.

Features

Automatic Rendering: Implement __render__(self, user) in Python objects to display them as web components.
Event Handling: Easily handle user interactions with Python methods.
Dynamic Updates: Changes in Python object states are automatically reflected in the web interface.

Installation

To install PyX Framework, use pip:

pip install pyx-react

or clone this repository:

git clone https://github.com/cykim8811/pyx-react.git
cd pyx-react
python setup.py install

To install vscode extension, search for pyx-react in vscode extension marketplace.

Usage

Here's a simple example of how to use PyX Framework:

Create a .pyx file

from pyx import createElement, App

class Counter:
    def __init__(self):
        self.count = 8

    def increment(self, e):
        if e.button == 0:
            self.count += 1

    def __render__(self, user):
        return (
            <div>
                <div>count: {self.count}</div>
                <button onClick={self.increment}>Increment</button>
            </div>
        )


app = App(Counter())
app.run(host='0.0.0.0', port=8080)

Run pyx transpiler

pyx file.pyx

Run transpiled .py file

python3 file.x.py

Result

Documentation

No documentation is available at the moment. Please refer to the examples for more information.

Contributing

Contributions to PyX Framework are welcome!

License

PyX Framework is licensed under MIT License.

Contact

[email protected]

pyx-react's People

Contributors

Stargazers

Watchers

pyx-react's Issues

Raise error when recursive render occurs

Fix function preloading cache detection

In case of function defined inside render, ex)

...
    def __render__(self, user):
        async def ftn(e):
            v = await e.attr
        return <div onEvent={ftn}></div>
...

Cache and use old function on the frontend if the ftn name is equal.

Or, use same preloading attributes for all functions in each render function

Add hot reloading

ex)

[email protected]:~/path# pyx -r -w example.pyx
[Pyx Server running on 0.0.0.0:8080]
[Detected file change. Reload complete(0.4s)]
...

Add e.preventDefault(), e.stopPropagation()

Add e.preventDefault(), e.stopPropagation() to function calling.
Add return false; when creating event handler at frontend
and if the e.preventDefault() or e.stopPropagation() has not been called, dispatch event.

Add hot reloading

Add pyx watch script to hot-reload application

Fix user connection to new server

Add a way to execute javascript

ex)

user.execute("alert('Hello World')")

Fix failing to hit cache on re-generating function on re-rendering

def __render__(self, user):
    async def onMouseMove(e):
        cx, cy = await e.clientX, await e.clientY
        self.cursors[user.sid].onMove(cx, cy)
        ...

    return createElement('div', {
        'onMouseMove': onMouseMove,
        ...

The above code can't keep cache to render..onMouseMove, since the repr value is always different.

Memory leak on too many clients

When too many clients connect, or visit(disconnect after connection), the server gets too laggy.

Support JSX-like syntax

    # JSX-like syntax (Not supported yet)
    def __render__(self, user):
        return (
            <div>
                <div>count: {self.count}</div>
                <button onClick={self.increment}>Increment</button>
            </div>
        )

Remove App class

Instead of using App class and onConnect etc, use Hooks

def __render__(self, app):
    # app.users
    # app.req.user
    # app.req.query

Instead of class MyApp(pyx.App): ...,

from pyx import useUser, useEffect, useState
class MyApp:
    def __render__(self, app):
        @useUser
        def onConnect(user):
            print(f"User {user.sid} connected")
            def onDisconnect(user):
                print(f"User {user.sid} disconnected")
            return onDisconnect

        @useEffect(self.state1, self.state2)
        def onStateChange():
            print("State Changed")
            def clenup():
                print("Cleanup")
            return cleanup

        state, setState = useState("Initial Value")

        return <p>Element here</p>

class App(pyx.App):
    def __init__(self):
        super(App, self).__init__(title="Pyx Example")

Add Renderables without render

For some unmutable classes, we need a new way to register renderable

Add empty tag

ex)

...
    return <>Hello, World!</>

Fix input issue

<input>
<textarea>

does not work as expected, and have lots of delay.

Also solve issues for composable characters(such as Korean ㄱ+ㅏ+ㅁ=감)

Change render implementation

Currently fetching used attributes at calling render
Give control to render

...
    def render(renderable):
        register_getattr()
        renderable.__render__(user)
        handle_getattrs()
...

...
    def render(renderable):
        ctx.rendering = renderable
        renderable.__render__(user)
...

Use old function if the ref is equal

Do not create new function link, cache it if the reference is equal

createElement props whitespace parsing

<div prop1={data1}
        prop2={data2}>
...

The above code not parsed - whitespace doesn't include newline

KeyError on test_0

Test 0 works, but it raises error at decrementRefCount

...
  File "/root/repos/pyx-react/src/pyx/app.py", line 137, in update
    self.decrementRefCount(child)
  File "/root/repos/pyx-react/src/pyx/app.py", line 93, in decrementRefCount
    self.decrementRefCount(child)
  File "/root/repos/pyx-react/src/pyx/app.py", line 90, in decrementRefCount
    self.resources[resourceId].refCount -= 1
    ~~~~~~~~~~~~~~^^^^^^^^^^^^
KeyError: '71Ffwu3434CLsHi75akMlj'