how to setup transcrypt

Question

I am following the Get started part provided by transcrypt, created a folder named hello and then created the two files hello.py,hello.html

My goal is to run a function on the client side and output the results to the webpage

hello.py

from datetime import datetime
import time
import random

def FUN():
    for i in range(random.randrange(1, 9)):
        time.sleep(random.randrange(10 , 30 ))
        print (f"Current time {datetime.now()} , Number {i}")

hello.html

<script type="module">import * as hello from './__target__/hello.js'; window.hello = hello;</script>
    <p>
    <div id = "FUN">...</div>
    <button onclick="hello.FUN()">Do code</button>

Started the server with python3 -m http.server and surfed to hello.html

When i press the button do code I get nothing

[08/May/2021 04:30:16] "GET /hello.html HTTP/1.1" 200 -
127.0.0.1 - - [08/May/2021 04:30:17] code 404, message File not found
127.0.0.1 - - [08/May/2021 04:30:17] "GET /__target__/hello.js HTTP/1.1" 404 -
127.0.0.1 - - [08/May/2021 04:30:17] code 404, message File not found
127.0.0.1 - - [08/May/2021 04:30:17] "GET /favicon.ico HTTP/1.1" 404 -

I Install transcrypt with the command pip3 install transcrypt

But when I ran this command python -m transcrypt -b -m -n hello.py

it aborted with this output

Saving target code in: /home/kali/n3w/__target__/org.transcrypt.__runtime__.js
Saving target code in: /home/kali/n3w/__target__/re.translate.js
Saving target code in: /home/kali/n3w/__target__/re.js
Saving target code in: /home/kali/n3w/__target__/warnings.js

Error while compiling (offending file last):
        File '/home/kali/n3w/hello.py', line 1, at import of:
        File '/home/kali/.local/lib/python3.9/site-packages/wget.py', line 562, at import of:
        File '/usr/lib/python3.9/optparse.py', line 90, at import of:
        File '/usr/lib/python3.9/gettext.py', line 718, at import of:
        File '/usr/lib/python3.9/locale.py', line 658, at import of:
        File '_bootlocale', line 8, namely:

        Import error, can't find any of:
                /home/kali/n3w/locale.py
                /home/kali/n3w/locale.js
                /home/kali/.local/lib/python3.9/site-packages/transcrypt/modules/locale.py
                /home/kali/.local/lib/python3.9/site-packages/transcrypt/modules/locale.js
                /home/kali/n3w/locale.py
                /home/kali/n3w/locale.js
                /home/kali/n3w/_bootlocale.py
                /home/kali/n3w/_bootlocale.js
                /home/kali/.local/lib/python3.9/site-packages/transcrypt/modules/_bootlocale.py
                /home/kali/.local/lib/python3.9/site-packages/transcrypt/modules/_bootlocale.js
                /home/kali/n3w/_bootlocale.py
                /home/kali/n3w/_bootlocale.js
                /home/kali/n3w/_locale.py
                /home/kali/n3w/_locale.js
                /home/kali/.local/lib/python3.9/site-packages/transcrypt/modules/_locale.py
                /home/kali/.local/lib/python3.9/site-packages/transcrypt/modules/_locale.js
                /home/kali/n3w/_locale.py
                /home/kali/n3w/_locale.js
                /usr/lib/python3.9/_locale.py
                /usr/lib/python3.9/_locale.js
                /usr/lib/python3.9/lib-dynload/_locale.py
                /usr/lib/python3.9/lib-dynload/_locale.js
                /home/kali/.local/lib/python3.9/site-packages/_locale.py
                /home/kali/.local/lib/python3.9/site-packages/_locale.js
                /home/kali/testing_0505/npm_socket/batavia/_locale.py
                /home/kali/testing_0505/npm_socket/batavia/_locale.js
                /usr/local/lib/python3.9/dist-packages/_locale.py
                /usr/local/lib/python3.9/dist-packages/_locale.js
                /usr/lib/python3/dist-packages/_locale.py
                /usr/lib/python3/dist-packages/_locale.js
                /usr/lib/python3.9/dist-packages/_locale.py
                /usr/lib/python3.9/dist-packages/_locale.js

Transcrypt site has the steps on how to setup the little demo but does not go into detail on what each command does

Answer 1

Transcrypt currently works with Python 3.7. A new version is in the making, but it may be some time. Kind regards, Jacques de Hooge

Answer 2

Here's some info, maybe helpful.

• Your system also has Python 3.9 installed and it's taking preference when you type 'python'.

  To use version 3.7 you may have to type 'python3.7' or similar depending on what operating system you're using. To see what version it's using when you type 'python', you can use:

    python --version
  

  To see where python is located (where you can probably also find the 3.7 version), use this:

    whereis python  # depends on your OS
  

• Use a python virtual env to save yourself from unnecessary issues.

  e.g.: Using the built in 'venv' module:

    # within your project folder:
    python3.7 -m venv package_dir
  
    # The above creates a directory called package_dir,
    # where local project python packages can go.
    # Then 'activate', after which you can use 'python'
    # to refer to the version of python in the package_dir,
    # and 'pip' to refer to pip3 etc.:
    source package_dir/bin/activate
  
    # Will now install transcrypt in package_dir, not globally.
    pip install transcrypt
  

• Transcrypt doesn't include much of the standard library, you can use js in those cases. This SO question weighs up pro's and con's of various python-in-browser options.

  For example, i noticed that random.randrange isn't implemented, but randint is. For interest, see randrange in the CPython source code, this hints at why it's not in Transcrypt. randint(a, b) is the same as randrange(a, b + 1).

  Looking at Transcrypt's time implementation, sleep was excluded because at the time, handling it in the browser would require a loop (blocking).

So, let's say you wanted to use Transcrypt because of the performance and small footprint and decided that randint was fine for your needs and that you'd like to use a non-blocking js version of sleep, here's how that could look:

from datetime import datetime
import random

# Add a js function that can be called by your python code.
__pragma__ ('js', '{}', '''
// Will not block main thread.
function async_sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms * 1000));
}
''')

# We're using async / await to avoid blocking the main thread.
async def FUN():
    for i in range(random.randint(1, 9 - 1)):
        await async_sleep(random.randint(10 , 30 - 1))
        current_time = f"Current time {datetime.now()} , Number {i}"
        # To output to the DOM, use js DOM functions.
        document.getElementById('FUN').innerHTML += current_time + '<br>'

By way of comparison, a thread-blocking version of sleep might look like this.

from datetime import datetime
import random

__pragma__ ('js', '{}', '''
// Bad, will block main thread.
function blocking_sleep(sec) {
    var unixtime_ms = new Date().getTime();
    while(new Date().getTime() < unixtime_ms + sec * 1000) {}
}
''')

def FUN():
    for i in range(random.randint(1, 9 - 1)):
        blocking_sleep(random.randint(10 , 30 - 1))
        current_time = f"Current time {datetime.now()} , Number {i}"
        # print() outputs to the dev console.
        print (current_time)
        document.getElementById('FUN').innerHTML += current_time + '<br>'