Transcrypt - Transpiling Python to Javascript

While most of the code in a Dash app is Python, i tend to always end up writing at least a few lines of JavaScript. Either as client side callbacks, or for mapping of Dash arguments (string, numbers, etc.) into the data types expected by the underlying React component (most often function handles). Looking for a way to avoid this, i stumbled upon the transcrypt project, which transpiles Python to JavaScript.

After playing around with it a little (it works surprising good), i decided to write some bindings to Dash (they are available in dash-extensions==0.0.30) to ease the integration. As a small example, consider a (simple) calculator that adds two numbers. The clientside function(s) must by placed in a separate file, say calculator_csf.py,

def add(a, b):
    return a + b

Before the add function can be used as a clientside callback, the calculator_csf module must be passed through the to_clientside_functions function. In addition to transpiling the module into JavaScript, it replaces the functional attributes of the module with appropriate ClientsideFunction objects so that they can be used in clientside callbacks,

import calculator_csf
from dash_extensions.transpile import module_to_clientside_functions, inject_js
...
js_index = module_to_clientside_functions(calculator_csf)  # the call generates the js
app.clientside_callback(calculator_csf.add, ...)  # pass the functions as you would normally do
inject_js(app, js_index)  # the call adds the js to the app

The to_clientside_functions returns the path to a JavaScript index file, which must be made available by the app (that’s what inject_js does). For completeness, here is the full example app,

import dash
import dash_core_components as dcc
import dash_html_components as html

import calculator_csf
from dash.dependencies import Output, Input
from dash_extensions.transpile import module_to_clientside_functions, inject_js

# Create example app.
app = dash.Dash()
app.layout = html.Div([
    dcc.Input(id="a", value=2, type="number"), html.Div("+"),
    dcc.Input(id="b", value=2, type="number"), html.Div("="), html.Div(id="c"),
])
# Create clientside callback.
inject_js(app, module_to_clientside_functions(calculator_csf))
app.clientside_callback(calculator_csf.add, Output("c", "children"), [Input("a", "value"), Input("b", "value")])

if __name__ == '__main__':
    app.run_server()

Have others played with something like this? What is your experience?

1 post - 1 participant

Read full topic