Get Started

Create the project structure

Clone the prune repo into your folder:
Terminal window
```
git clone https://github.com/darikoko/prunepy
```
Now create 3 files index.html, pyscript.json and counter.py:
Terminal window
```
touch index.html pyscript.json counter.py
```

Finally your project should look like this :

index.html
counter.py
pyscript.json
Directoryprunepy/
- …

Add some logic in python

The counter.py previously created will store the logic of the front.

In this example we will see how to create a simple counter app (Yes I know… for the 1000th time, but this time it will be different, I swear).

Here you write your logic like in a normal python file.

from prune import Prune, notify #we need to import prune stuff

class Counter:
    def __init__(self):
        self.value = 0

    @notify #functions decorated by notify will trigger a new render in the DOM
    def increment(self):
        self.value += 1

    @notify
    def decrement(self):
        self.value -= 1

    @notify
    def reset(self):
        self.value = 0


#prune instanciation gives access to a global store
#from anywhere in the HTML.
Prune(counter=Counter())

Setup pyscript.json

The pyscript.json file is just a mapping between the URL location of your python files and their location in the python virtual filetree.

{
    "files": {
        "/prunepy/prune.py" : "./prune.py"
    }
}

The left part is the URL of the file on the server and the right part is the location in python filetree. Now in counter.py we are able to import prune.py as if it was at the same level in the filetree even if prune.py is into prunepy/prune.py

Nothing really important here.

Plug the logic into the HTML

Now it’s the most interesting part, we will plug the logic into the HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://pyscript.net/releases/2024.11.1/core.css" />
    <script type="module" src="https://pyscript.net/releases/2024.11.1/core.js"></script>
    <title>Counter</title>
  </head>
  <body>
    <h3 p-text="store.counter.value"></h3>
    <button @click="store.counter.increment()">Increment</button>
    <button @click="store.counter.decrement()">Decrement</button>
    <button @click="store.counter.reset()">Reset</button>
    <script type="mpy" src="./counter.py" config="./pyscript.json"></script>
  </body>
</html>

The result 🥳

About the import

The first two marked lines are symply the pyscript import, thanks to pyscript we can run python in the browser.

The last marked line is the link to the counter.py file,

type="mpy" tells to pyscript to use micropython, a lightweight python interpreter.
src is the URL path to the python file we want to link.
config is the URL path to pyscript.json, which solves import in our python files.

About the templating

As you can see we use p-... attribute to plug our logic into the HTML.

Let’s see what happens here :

p-text will change the text of the element to the given expression, in this case it’s store.counter.value but it could be any valid python expressions
@click is run when a click event happens on the element