JS transpiler tutorial
Since version 1.5, k1lib has the ability to transpile clisfrom Python into JS code, ready to be built into an interface. Here’re some examples:
Basic example
Source code
data = repeatF(lambda: random.randint(10, 99), 20) | deref()
jsFunc = data | (toJsFunc(("term", int, 5)) | head("term"))
jsFunc
Compiled JS function
<JsFunc _jsF_877_10_1709448426>Generated JS function:
const _jsD_749_373_1709448426 = [13, 94, 10, 75, 95, 16, 30, 68, 58, 33, 29, 56, 11, 12, 45, 52, 74, 53, 57, 71];
async function _jsF_877_10_1709448426(term) {
const _jsF_877_9 = (_jsD_749_371) => _jsD_749_371.head(term, false)
const _jsF_877_8 = (_jsD_749_370) => { return _jsF_877_9(_jsD_749_370); };
return _jsF_877_8(_jsD_749_373_1709448426);
}
Source code
jsFunc.interface("jsone")
Html output
In this example, data is a list of 20 random numbers. You can then pipe
it into a toJsFunc-captured block (review capturing concept here).
Every operation that’s captured will be transpiled into JS. and bundled into a
JsFunc. Then you can inject that function anywhere you
want in your application. A lot of times, you’d want to display a search interface
right away, so you can use the JsFunc.interface() function, which can
display the interface right within your notebook. If you want to inject into your
custom site, then the entire html can be accessed at jsFunc._repr_html_()
The arguments of toJsFunc are the argument names for the JS function that
you can use anywhere within the Python clis. Try playing around with the search
box of the “Html output” section.
Clis that take in functions
This also works with clis that are expected to take in a function, like
apply or filt:
Source code
jsFunc = range(10) | deref() | (toJsFunc() | apply("x**2"))
jsFunc
Compiled JS function
<JsFunc _jsF_877_15_1709448426>Generated JS function:
const _jsD_749_379_1709448426 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
async function _jsF_877_15_1709448426() {
const _jsF_877_14 = (x) => {
return Math.pow(x, 2);
}
const _jsD_749_376 = {};
const _jsF_877_13 = (_jsD_749_375) => _jsD_749_375.apply((_jsD_749_377) => _jsF_877_14(_jsD_749_377), null, _jsD_749_376, false)
const _jsF_877_12 = (_jsD_749_374) => { return _jsF_877_13(_jsD_749_374); };
return _jsF_877_12(_jsD_749_379_1709448426);
}
Source code
jsFunc.interface("json")
Html output
More example, this time taking in a js argument:
Source code
jsFunc = range(10) | deref() | (toJsFunc(("divisor", int, 3)) | filt("x % divisor == 1"))
jsFunc
Compiled JS function
<JsFunc _jsF_877_20_1709448426>Generated JS function:
const _jsD_749_385_1709448426 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
async function _jsF_877_20_1709448426(divisor) {
const _jsF_877_19 = (x) => {
return ((x%divisor)===1);
}
const _jsF_877_18 = (_jsD_749_382) => _jsD_749_382.filt((_jsD_749_383) => (_jsF_877_19(_jsD_749_383)), null)
const _jsF_877_17 = (_jsD_749_381) => { return _jsF_877_18(_jsD_749_381); };
return _jsF_877_17(_jsD_749_385_1709448426);
}
Source code
jsFunc.interface("json")
Html output
It can be crazy complicated, yet still works:
Source code
c = 6 * 2
jsFunc = range(10) | deref() | (toJsFunc() | apply("parseFloat((x//3 + c) ** 4)"))
jsFunc
Compiled JS function
<JsFunc _jsF_877_25_1709448426>Generated JS function:
const _jsD_749_391_1709448426 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
async function _jsF_877_25_1709448426() {
const c = 12;
const _jsF_877_24 = (x) => {
return parseFloat(Math.pow((Math.floor(x/3)+c), 4));
}
const _jsD_749_388 = {};
const _jsF_877_23 = (_jsD_749_387) => _jsD_749_387.apply((_jsD_749_389) => _jsF_877_24(_jsD_749_389), null, _jsD_749_388, false)
const _jsF_877_22 = (_jsD_749_386) => { return _jsF_877_23(_jsD_749_386); };
return _jsF_877_22(_jsD_749_391_1709448426);
}
Source code
jsFunc.interface("json")
Html output
If you noticed, the transpiled JS code for (x//3 + 6) ** 4 is actually
Math.pow((Math.floor(x/3)+6), 4). The transpiler understands your code
written in Python, and translates operations like a ** b into Math.pow(a, b)
automatically. How cool is that! And as demonstrated in the previous example,
you can also use JS variables too (divisor), instead of just Python variables.
Notice how it also figures out that c must be a Python variable, so the
transpiler will auto convert that to json and injects it into the JS code. Also
notice how you can freely mix JS and Python code a little bit. For basic operations,
use Python syntax, while for function calling, you can use JS functions.
Lambda functions with lots of variables and op works too:
Source code
jsFunc = range(10) | deref() | (toJsFunc() | insertIdColumn() | ~apply("lambda x,y: x*y"))
jsFunc
Compiled JS function
<JsFunc _jsF_877_31_1709448426>Generated JS function:
const _jsD_749_398_1709448426 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
async function _jsF_877_31_1709448426() {
const _jsF_877_28 = (_jsD_749_393) => _jsD_749_393.insertIdColumn(false, true)
const _jsF_877_30 = (x, y) => {
return (x*y);
}
const _jsD_749_395 = {};
const _jsF_877_29 = (_jsD_749_394) => _jsD_749_394.apply((_jsD_749_396) => _jsF_877_30(..._jsD_749_396), null, _jsD_749_395, false)
const _jsF_877_27 = (_jsD_749_392) => { return _jsF_877_29(_jsF_877_28(_jsD_749_392)); };
return _jsF_877_27(_jsD_749_398_1709448426);
}
Source code
jsFunc.interface("json")
Html output
Source code
jsFunc = range(10) | deref() | (toJsFunc() | apply(op()**2))
jsFunc
Compiled JS function
<JsFunc _jsF_877_36_1709448426>Generated JS function:
const _jsD_749_406_1709448426 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
async function _jsF_877_36_1709448426() {
const _jsF_877_35 = (_jsD_749_404) => {
return Math.pow(_jsD_749_404, 2);
}
const _jsD_749_402 = {};
const _jsF_877_34 = (_jsD_749_401) => _jsD_749_401.apply((_jsD_749_403) => _jsF_877_35(_jsD_749_403), null, _jsD_749_402, false)
const _jsF_877_33 = (_jsD_749_400) => { return _jsF_877_34(_jsD_749_400); };
return _jsF_877_33(_jsD_749_406_1709448426);
}
Source code
jsFunc.interface("json")
Html output
Let’s see a more complex example:
Lots of moving parts
Source code
data = repeatF(lambda: random.randint(1000, 9999), 100) | deref()
f1 = grep("${term}") | apply(str) | batched(5, True) | head(10)
f2 = pretty() | join("\n") | aS(fmt.pre)
jsFunc = data | (toJsFunc("term") | f1 | f2)
jsFunc
Compiled JS function
<JsFunc _jsF_877_49_1709448426>Generated JS function:
const _jsD_749_424_1709448426 = [2331, 9130, 1297, 1596, 2673, 5107, 8848, 8837, 3104, 7352, 4635, 7740, 7390, 2975, 1512, 1889, 7002, 9317, 2884, 3674, 2323, 1403, 4635, 6904, 3746, 8672, 8655, 2972, 4664, 1105, 7930, 9284, 9920, 8688, 7030, 9519, 8151, 2387, 1701, 5486, 4379, 3414, 3428, 1991, 1330, 7208, 2354, 2012, 6809, 4296, 4232, 5062, 3048, 1716, 3350, 6992, 6183, 6863, 9813, 3809, 6903, 4928, 1740, 2184, 1862, 3245, 9078, 2917, 7494, 8875, 7886, 9027, 7257, 8541, 5588, 4908, 9057, 5355, 4061, 6293, 2424, 9053, 6304, 9851, 5289, 3510, 7423, 2797, 4732, 9652, 4917, 6359, 7298, 3653, 8123, 6973, 2591, 1170, 1092, 9914];
async function _jsF_877_49_1709448426(term) {
const _jsF_877_40 = (_jsD_749_410) => _jsD_749_410.grep(`${term}`, {col: null, inv: false})
const _jsD_749_413 = {};
const _jsF_877_41 = (_jsD_749_412) => _jsD_749_412.apply((_jsD_749_414) => String(_jsD_749_414), null, _jsD_749_413, false)
const _jsF_877_42 = (_jsD_749_415) => _jsD_749_415.batched(5, true)
const _jsF_877_43 = (_jsD_749_416) => _jsD_749_416.head(10, false)
const _jsF_877_39 = (_jsD_749_409) => { return _jsF_877_43(_jsF_877_42(_jsF_877_41(_jsF_877_40(_jsD_749_409)))); };
const _jsF_877_45 = (_jsD_749_419) => _jsD_749_419.pretty("", false)
const _jsF_877_46 = (_jsD_749_420) => _jsD_749_420.join("\n")
const _jsF_877_48 = (_jsD_749_423) => `<pre style='font-family: monospace'>${_jsD_749_423}</pre>`
const _jsF_877_44 = (_jsD_749_418) => { return _jsF_877_48(_jsF_877_46(_jsF_877_45(_jsD_749_418))); };
const _jsF_877_38 = (_jsD_749_408) => { return _jsF_877_44(_jsF_877_39(_jsD_749_408)); };
return _jsF_877_38(_jsD_749_424_1709448426);
}
Source code
jsFunc.interface("html")
Html output
Just a reminder, you can specify toJsFunc at any point in
the pipeline. As long as the data you pipe into the toJsFunc-captured
block can be converted into json, you’re good.
Source code
data = range(10) | deref()
jsFunc = data | (toJsFunc() | filt("x%3 == 0") & filt("x%2 == 0"))
jsFunc
Compiled JS function
<JsFunc _jsF_877_57_1709448426>Generated JS function:
const _jsD_749_433_1709448426 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
async function _jsF_877_57_1709448426() {
const _jsF_877_54 = (x) => {
return ((x%3)===0);
}
const _jsF_877_53 = (_jsD_749_427) => _jsD_749_427.filt((_jsD_749_428) => (_jsF_877_54(_jsD_749_428)), null)
const _jsF_877_56 = (x) => {
return ((x%2)===0);
}
const _jsF_877_55 = (_jsD_749_430) => _jsD_749_430.filt((_jsD_749_431) => (_jsF_877_56(_jsD_749_431)), null)
const _jsF_877_52 = (_jsD_749_426) => [_jsF_877_53(_jsD_749_426), _jsF_877_55(_jsD_749_426)];
const _jsF_877_51 = (_jsD_749_425) => { return _jsF_877_52(_jsD_749_425); };
return _jsF_877_51(_jsD_749_433_1709448426);
}
Source code
jsFunc.interface("json")
Html output
Custom transpiler logic
You can write transpiler logic for any custom class/functions that you desire! Let’s imagine the use case to be writing a function that calculates the factorial sequence, where an initial number is multiplied by increments of itself, and getting the first n elements out of it. Let’s see an example using classes:
Source code
class Factorio(BaseCli): # yes, the spelling is not the math func, but the game. But I love Factorio so
def __init__(self, n):
self.n = n
def __ror__(self, start):
value = start
for i in range(self.n):
yield value
value *= start+i+1
def _jsF(self, meta):
fIdx = f"f_{random.randint(0, 1_000_000)}_{round(time.time())}"
vIdx = f"f_{random.randint(0, 1_000_000)}_{round(time.time())}"
return f"""
const {fIdx} = ({vIdx}) => {{
const ans = []; let value = {vIdx};
for (let i = 0; i < {self.n}; i++) {{
ans.push(value);
value = value * ({vIdx} + i + 1);
}}
return ans;
}};
""", fIdx
2 | Factorio(5) | deref() # returns [2, 6, 24, 120, 720]
jsFunc = 2 | (toJsFunc(("size", int, 3)) | Factorio("size"))
jsFunc
Compiled JS function
<JsFunc _jsF_877_60_1709448426>Generated JS function:
const _jsD_749_436_1709448426 = 2;
async function _jsF_877_60_1709448426(size) {
const f_561785_1709448426 = (f_959359_1709448426) => {
const ans = []; let value = f_959359_1709448426;
for (let i = 0; i < size; i++) {
ans.push(value);
value = value * (f_959359_1709448426 + i + 1);
}
return ans;
};
const _jsF_877_59 = (_jsD_749_435) => { return f_561785_1709448426(_jsD_749_435); };
return _jsF_877_59(_jsD_749_436_1709448426);
}
Source code
jsFunc.interface()
Html output
You can also write transpiler functions for any functions you want. Let’s write one for the inverse square root function:
Source code
def inv_sqrt(x, numerator=1):
return numerator/math.sqrt(x)
def _jsF_inv_sqrt(meta, numerator=1):
fIdx = f"f_{random.randint(0, 1_000_000)}_{round(time.time())}"
vIdx = f"f_{random.randint(0, 1_000_000)}_{round(time.time())}"
return f"const {fIdx} = ({vIdx}) => {{ return {numerator}/Math.sqrt({vIdx}); }}", fIdx
settings.cli.kjs.jsF[inv_sqrt] = _jsF_inv_sqrt
inv_sqrt(4) # returns number close to 0.5
jsFunc = range(1, 10) | deref() | (toJsFunc(("someNum", int, 1)) | apply(inv_sqrt, numerator="someNum") | apply(round, ndigits=2))
jsFunc
Compiled JS function
<JsFunc _jsF_877_66_1709448426>Generated JS function:
const _jsD_749_446_1709448426 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
async function _jsF_877_66_1709448426(someNum) {
const f_585446_1709448426 = (f_101172_1709448426) => { return someNum/Math.sqrt(f_101172_1709448426); }
const _jsD_749_440 = {"numerator": "someNum"};
const _jsF_877_63 = (_jsD_749_439) => _jsD_749_439.apply((_jsD_749_441) => f_585446_1709448426(_jsD_749_441), null, _jsD_749_440, false)
const _jsF_877_65 = (_jsD_749_445) => Math.round((_jsD_749_445)*Math.pow(10, 2)+Number.EPSILON)/Math.pow(10, 2)
const _jsD_749_443 = {"ndigits": 2};
const _jsF_877_64 = (_jsD_749_442) => _jsD_749_442.apply((_jsD_749_444) => _jsF_877_65(_jsD_749_444), null, _jsD_749_443, false)
const _jsF_877_62 = (_jsD_749_438) => { return _jsF_877_64(_jsF_877_63(_jsD_749_438)); };
return _jsF_877_62(_jsD_749_446_1709448426);
}
Source code
jsFunc.interface("json")
Html output
If your function is really simple and exists in JS natively, you can simplify it way down:
Source code
settings.cli.kjs.jsF[math.sqrt] = lambda meta: ("", "Math.sqrt")
range(10) | deref() | (toJsFunc() | apply(math.sqrt) | apply(round, ndigits=2)) | op().interface("json")