Getting started =============== Installation ------------ Transcrypt is currently tested under Windows, Linux and OSX, with Chrome, Internet Explorer and Firefox. To be able to use it, Python 3.9 has to be installed. After that, install *virtualenv* as explained in `Jamie Matthews very clear and brief introduction `_. Be sure to install virtualenv for the right Python version, by using the right *pip*. For each Transcrypt project (or group of projects using the same Transcrypt version) create an environment as described in the referenced introduction. To install Trancrypt into that environment, *activate* the environment as also described there, and then type: *pip install transcrypt* from the command prompt. This is the recommended way to install Transcrypt. It is flexible and sets the proper access rights. Alternatively, for manual installation under Windows or Linux, follow the steps below: 1. Download the Transcrypt zip and unpack it anywhere you like 2. Add *../Transcrypt-/transcrypt* to your system path To enable minification, additionally the Java Runtime Environment 6 or later has to be installed. .. note:: If you install Transcrypt manually, Trancrypt is started by typing *run_transcrypt* rather than *transcrypt*. This allows a pip installed Transcrypt and a manually installed Transcrypt to be used side by side selectively. .. note:: If you also use Numscrypt under Linux or OSX, use the MiniConda installer rather than *virtualenv*, as described in the Numscrypt documentation, since it will allow you to obtain the right version of NumPy. You can test your installation as follows (replacing *transcrypt* by *run_transcrypt* if you installed manually rather than with pip): 1. Go to directory *../Transcrypt-/transcrypt/development/automated_tests/transcrypt* 2. From the command prompt run *transcrypt -b -c -da autotest*. This will compile the autotests into a number of .js files and put them into the *__target__* subdirectory. Do NOT go to that directory (there's no need, stay where you went at point 4) 3. From the command prompt run *transcrypt -r -c autotest*. This will run the autotests with CPython creating file *autotest.html* that refers to the generated *autotest.js* file 4. Start a http server from the command prompt by typing *python -m http.server*, or, dependent on your installation *python3 -m http.server*. In the address bar of your browser, type *localhost:8000/animals.html*. This will load the autotest, run it and compare the output with what was generated by CPython. It should report no errors To experiment with Transcrypt yourself: 1. Create a directory for your experiments 2. Make your own thing there, e.g. *experiment1.py* 3. Compile with *transcrypt -b experiment1* 4. Make an HTML page that will load your code in the browser. Use the HTML file generated by the autotest as an example of how to do that 5. Load and run the HTML + JS in the same way as indicated earlier. You may also want to try the demo's. Installation troubleshooting checklist ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. Transcrypt was installed using *pip*, but *import transcrypt* fails. Transcrypt isn't a library but a compiler. Install and run it as described in this chapter. 2. Transcrypt reports an error containing the word 'java'. Transcrypt produces both prettyfied and minified JavaScript output. For the minification it makes use of the Google Closure Compiler, which is included in the distribution and requires Java to run. You can check proper installation of Java by typing the word *java* on the command line. This should give you a list of options: *Usage: java [-options] class []args...]* and so on. If you can't or won't install Java, you can run Transcrypt without minification by using the *-n* command line switch. 3. The static checker doesn't find all errors it could. The static checks, performed by the PyFlakes package that's part of the distribution, are of a 'light' variety. Style checks and false positives are avoided. The accent is on finding undefined identifiers and unused variables. Your first Transcrypt program ----------------------------- Open a command prompt in the *demos/hello* directory and type *transcrypt hello*. Then start a http server from the command prompt by typing *python -m http.server* or *python3 -m http.server*, dependent on your installation and type *localhost:8000/hello* in the address bar to load the result into your browser. After clicking on both buttons a few times, take a look at *hello.html*. As you can see, eventhandlers are connected to the buttons exactly as you would do with JavaScript. Then look at *hello.py*. Note that JavaScript functions like document.getElementById can be called from Python exactly as you would call them from JavaScript, but with Python data. The minified JavaScript files *including the Transcrypt runtime* are only around 50kB. With non-trivial programs this overhead becomes negligible. Transcrypt applications in themselves don't need any external files. Of course you can use extensive JavaScript libraries served by content delivery networks as you normally would. But you can also make very compact stand alone applications. The most efficient thing to do is pack all functionality for a page in a single Transcrypt program. Note that the source can consist of many modules if needed and many callback entrypoints can be provided. But it is *one* stateful application, just like it would be on the desktop. .. literalinclude:: ../../demos/hello/hello.html :tab-width: 4 :caption: In hello.html, Python handlers are attached directly to the onclick events .. literalinclude:: ../../demos/hello/hello.py :tab-width: 4 :linenos: :caption: In hello.py, JavaScript function document.getElementById is called directly from Python, using plain Python values .. _command_line_switches: Available command line switches ------------------------------- The available command line switches will be shown if you run transcrypt -h. They are specified in the source code of Transcrypt as follows: .. literalinclude:: ../../modules/org/transcrypt/utils.py :pyobject: CommandArgs :tab-width: 4 :caption: Transcrypt command line switches as specified in module/orgs/transcrypt/utils.py If static checking is enabled, insert dummy definitions of global JavaScript variables between :ref:`__pragma__ ('skip') and __pragma__ ('noskip') ` to prevent needless complaints of the checker. The static checks are geared towards avoiding false alarms, and mainly check undefined names and unused variables. Style checks are deliberately avoided. Compiling to JavaScript 6 ------------------------- Transcrypt generates JavaScript 6, that is by default minimized by the Google Closure compiler. Since multilevel sourcemaps are provided, the minified code can be easily debugged, because it directly links back to the original Python sourcecode. Using the *-n* command line switch turns off minification and results in human readable JavaScript output. Compiling for node.js --------------------- Transcrypt will allow you to target *node.js* while writing your server code in Python. This opens up the exploding world of node.js libraries from your favorite programming language. In the *demo/nodejs_demo* subdirectory of the installation, you'll find the following trivial example of a node.js server app: .. literalinclude:: ../../demos/nodejs_demo/nodejs_demo.py :tab-width: 4 :caption: Using node.js from Transcrypt is trivial, including the use of 'require' to tap into a vast set of libraries Follow the steps below to run this demo: - Install node.js from *https://nodejs.org* - Open a node.js command prompt - Go to the *demo/nodejs_demo* directory - Compile the demo with *transcrypt -b -p .none nodejs_demo*, to generate an orphan module rather than a child of *window* - Go to *demo/nodejs_demo/__target__* directory - Type *node nodejs_demo.js* - In your browser, view the result at *http://localhost:8080* - Repeatedly reload the page to see the text change (Google Chrome may actually reload twice) Using sourcemaps and annotated target code ------------------------------------------ Sourcemaps ~~~~~~~~~~ Sourcemaps enable debugging from the original Python source code rather then from the generated JavaScript. Transcrypt supports the use of single- and multi-level sourcemaps, using the *-m* switch. This means that you can source-level debug both non-minified and minified JavaScript target code. Sourcemaps are routinely tested for Google Chrome only, both under Windows and Linux, but they also have been observed to work for Firefox. Combined with the high readability of the JavaScript code generated by Transcrypt, this enables efficient debugging for real-world projects consisting of many modules. Annotated target code ~~~~~~~~~~~~~~~~~~~~~ In addition to generating sourcemaps, you can use the *-a* switch to annotate non-minified JavaScript files with comments, referring to the original Python file names and line numbers. So even if your browser doesn't support sourcemaps, it's easy to find back the original Python source code location from any JavaScript statement. .. literalinclude:: ../code/hello_anno.js :tab-width: 4 :caption: Annotated target code for hello.py Source code annotation only happens for Python sources, not for JavaScript-only modules, that have a trivial correspondence between non-minified target code and source code. .. role:: raw-html(raw) :format: html Static type validation ---------------------- Static type validation is both a powerful method to catch a variety of bugs and a way to add clear, automatically checked documentation to your source code. Transcrypt includes an experimental version of `Jukka Lehtosalo's mypy static type validator `_ This validator uses :raw-html:`type hints` to rigorously cross-check correct use of datatypes all through your application. To activate static type validation use the *-ds* switch. You can combine static type validation with lightweight consistency checking using both the *-ds* and *-dc* switches. Below is an example of code with type hints and deliberate inconsistencies, and the output of both the static type validator and the lightweight consistency checker. As can be seen, many errors can be caught in this way. .. literalinclude:: ../../development/manual_tests/static_types/static_types.py :tab-width: 4 :linenos: :caption: manual_tests/static_types/static_types.py .. literalinclude:: ../../development/manual_tests/static_types/mod1.py :tab-width: 4 :linenos: :caption: manual_tests/static_types/mod1.py .. literalinclude:: ../../development/manual_tests/static_types/mod2/__init__.py :tab-width: 4 :linenos: :caption: manual_tests/static_types/mod2/__init__.py .. literalinclude:: ../../development/manual_tests/static_types/__target__/static_types.out :tab-width: 4 :caption: Results of the static type validation and the lightweight consistency check Getting help and giving feedback -------------------------------- If you have coding questions with regard to Transcrypt applications, the best place to ask for help is `StackOverflow (tag: Transcrypt) `_. For bugs and feature requests use the `Transcrypt issue list on GitHub `_. For any matters with regard to Transcrypt you'd like to ask or discuss you can also send a email to info@transcrypt.org.