brue 2021.11.15

modern web gui using python

brue

---

write in python, transpile to js, run in browser

Install

using pip(stable)

pip3 install brue

using git(dev)

pip3 install https://github.com/eseunghwan/brue.git

Cli

create project with cli

brue-cli --init [dest]

// example
brue-cli --init ./test2
[output]
extracting files...
brue project initialized in [dest]

run with server

brue-cli --serve [port]

// example
brue-cli --serve 8080
[output]
Serving HTTP on 0.0.0.0 port 8080 (http://0.0.0.0:8080/) ...

build project file to standalone .html and .js

brue-cli --build [dest]

// example
brue-cli --build ./build
[output]
copying public files...
copying asset files...
compiling component files...
...
Compiled file [dest]

Component define

component python file

from brue import brueElement
from brue.decorators import defineElement

@defineElement("app-elm")# register element as [name]
class App(brueElement):
    def __init__(self):
        super().__init__()# must be called

    def created(self):# evalute when component created(initialized)
        print("created")

    def mounted(self):# evalute when componet rendered in html
        print("mounted")

    def render(self):# define render template as html-string
        return """
        <div>
            <div>
                <router-link url="/">Welcome</router-link>
                <router-link url="/counter">Counter</router-link>
                <router-link url="/datagrid">DataGrid</router-link>
            </div>
            <router-view />
        </div>
        """

repeat(for)

...
state = {
    "columns": [ "A", "B", "C", "D" ]
}
...
{repeat(self.state.columns, lambda c: f"<th>{c}</th>")}
...

[expected output]
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>