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_896_1737789673_10>Generated JS function:
//k1_moveOutStart
//k1_moveOutEnd
_jsD_714_1737789673_491 = { inputData: [89, 78, 53, 88, 95, 74, 26, 49, 53, 90, 15, 49, 53, 35, 37, 15, 61, 57, 38, 63], reload: null };
async function _jsF_896_1737789673_10(term) {
_jsF_896_1737789673_9 = (_jsD_714_1737789673_489) => _jsD_714_1737789673_489.head(term, false)
_jsF_896_1737789673_8 = (_jsD_714_1737789673_488) => { return _jsF_896_1737789673_9(_jsD_714_1737789673_488); };; return _jsF_896_1737789673_8(_jsD_714_1737789673_491.inputData); }
Source code
jsFunc.interface("jsone")
Html output
term
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_896_1737789673_15>Generated JS function:
//k1_moveOutStart
//k1_moveOutEnd
_jsD_714_1737789673_498 = { inputData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], reload: null };
async function _jsF_896_1737789673_15() {
_jsF_896_1737789673_14 = (x) => {
return Math.pow(x, 2);
}
_jsD_714_1737789673_495 = {};
_jsF_896_1737789673_13 = (_jsD_714_1737789673_494) => _jsD_714_1737789673_494.apply((_jsD_714_1737789673_496) => _jsF_896_1737789673_14(_jsD_714_1737789673_496), null, _jsD_714_1737789673_495, false)
_jsF_896_1737789673_12 = (_jsD_714_1737789673_493) => { return _jsF_896_1737789673_13(_jsD_714_1737789673_493); };; return _jsF_896_1737789673_12(_jsD_714_1737789673_498.inputData); }
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_896_1737789673_20>Generated JS function:
//k1_moveOutStart
//k1_moveOutEnd
_jsD_714_1737789673_504 = { inputData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], reload: null };
async function _jsF_896_1737789673_20(divisor) {
_jsF_896_1737789673_19 = (x) => {
return ((x%divisor)===1);
}
_jsF_896_1737789673_18 = (_jsD_714_1737789673_501) => _jsD_714_1737789673_501.filt((_jsD_714_1737789673_502) => (_jsF_896_1737789673_19(_jsD_714_1737789673_502)), null)
_jsF_896_1737789673_17 = (_jsD_714_1737789673_500) => { return _jsF_896_1737789673_18(_jsD_714_1737789673_500); };; return _jsF_896_1737789673_17(_jsD_714_1737789673_504.inputData); }
Source code
jsFunc.interface("json")
Html output
divisor
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_896_1737789673_25>Generated JS function:
//k1_moveOutStart
//k1_moveOutEnd
_jsD_714_1737789673_511 = { inputData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], reload: null };
async function _jsF_896_1737789673_25() {
c = 12;
_jsF_896_1737789673_24 = (x) => {
return parseFloat(Math.pow((Math.floor(x/3)+c), 4));
}
_jsD_714_1737789673_508 = {};
_jsF_896_1737789673_23 = (_jsD_714_1737789673_507) => _jsD_714_1737789673_507.apply((_jsD_714_1737789673_509) => _jsF_896_1737789673_24(_jsD_714_1737789673_509), null, _jsD_714_1737789673_508, false)
_jsF_896_1737789673_22 = (_jsD_714_1737789673_506) => { return _jsF_896_1737789673_23(_jsD_714_1737789673_506); };; return _jsF_896_1737789673_22(_jsD_714_1737789673_511.inputData); }
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_896_1737789673_31>Generated JS function:
//k1_moveOutStart
//k1_moveOutEnd
_jsD_714_1737789673_518 = { inputData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], reload: null };
async function _jsF_896_1737789673_31() {
_jsF_896_1737789673_28 = (_jsD_714_1737789673_513) => _jsD_714_1737789673_513.insertIdColumn(false, true)
_jsF_896_1737789673_30 = (x, y) => {
return (x*y);
}
_jsD_714_1737789673_515 = {};
_jsF_896_1737789673_29 = (_jsD_714_1737789673_514) => _jsD_714_1737789673_514.apply((_jsD_714_1737789673_516) => _jsF_896_1737789673_30(..._jsD_714_1737789673_516), null, _jsD_714_1737789673_515, false)
_jsF_896_1737789673_27 = (_jsD_714_1737789673_512) => { return _jsF_896_1737789673_29(_jsF_896_1737789673_28(_jsD_714_1737789673_512)); };; return _jsF_896_1737789673_27(_jsD_714_1737789673_518.inputData); }
Source code
jsFunc.interface("json")
Html output
Source code
jsFunc = range(10) | deref() | (toJsFunc() | apply(op()**2))
jsFunc
Compiled JS function
<JsFunc _jsF_896_1737789673_36>Generated JS function:
//k1_moveOutStart
//k1_moveOutEnd
_jsD_714_1737789673_526 = { inputData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], reload: null };
async function _jsF_896_1737789673_36() {
_jsF_896_1737789673_35 = (_jsD_714_1737789673_524) => {
return Math.pow(_jsD_714_1737789673_524, 2);
}
_jsD_714_1737789673_522 = {};
_jsF_896_1737789673_34 = (_jsD_714_1737789673_521) => _jsD_714_1737789673_521.apply((_jsD_714_1737789673_523) => _jsF_896_1737789673_35(_jsD_714_1737789673_523), null, _jsD_714_1737789673_522, false)
_jsF_896_1737789673_33 = (_jsD_714_1737789673_520) => { return _jsF_896_1737789673_34(_jsD_714_1737789673_520); };; return _jsF_896_1737789673_33(_jsD_714_1737789673_526.inputData); }
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_896_1737789673_49>Generated JS function:
//k1_moveOutStart
//k1_moveOutEnd
_jsD_714_1737789673_544 = { inputData: [6423, 5422, 2463, 7231, 7847, 7418, 5693, 1793, 6372, 5870, 6647, 5576, 5025, 2008, 2041, 1137, 7530, 7511, 1455, 4623, 7465, 4378, 9343, 8535, 1552, 9398, 5231, 8978, 6224, 2529, 2111, 4742, 2849, 9331, 4371, 4148, 9873, 4302, 5599, 5480, 1864, 4087, 6218, 4465, 7746, 8257, 2000, 5099, 4754, 2762, 2378, 8084, 3238, 6785, 3227, 6303, 6845, 5410, 5680, 9175, 4605, 1347, 6313, 7222, 8060, 7652, 2091, 2799, 7245, 8134, 5383, 7749, 4204, 3355, 2924, 3890, 8008, 6414, 5631, 6828, 8078, 8009, 3159, 6542, 7595, 7754, 9595, 2332, 8018, 9560, 4657, 2437, 7240, 5961, 2427, 8105, 1078, 9128, 1245, 1198], reload: null };
async function _jsF_896_1737789673_49(term) {
_jsF_896_1737789673_40 = (_jsD_714_1737789673_530) => _jsD_714_1737789673_530.grep(`${term}`, {col: null, inv: false, lower: false})
_jsD_714_1737789673_533 = {};
_jsF_896_1737789673_41 = (_jsD_714_1737789673_532) => _jsD_714_1737789673_532.apply((_jsD_714_1737789673_534) => String(_jsD_714_1737789673_534), null, _jsD_714_1737789673_533, false)
_jsF_896_1737789673_42 = (_jsD_714_1737789673_535) => _jsD_714_1737789673_535.batched(5, true)
_jsF_896_1737789673_43 = (_jsD_714_1737789673_536) => _jsD_714_1737789673_536.head(10, false)
_jsF_896_1737789673_39 = (_jsD_714_1737789673_529) => { return _jsF_896_1737789673_43(_jsF_896_1737789673_42(_jsF_896_1737789673_41(_jsF_896_1737789673_40(_jsD_714_1737789673_529)))); };
_jsF_896_1737789673_45 = (_jsD_714_1737789673_539) => _jsD_714_1737789673_539.pretty("", false)
_jsF_896_1737789673_46 = (_jsD_714_1737789673_540) => _jsD_714_1737789673_540.join("\n")
_jsF_896_1737789673_48 = (_jsD_714_1737789673_543) => `<pre style='font-family: monospace'>${_jsD_714_1737789673_543}</pre>`
_jsF_896_1737789673_44 = (_jsD_714_1737789673_538) => { return _jsF_896_1737789673_48(_jsF_896_1737789673_46(_jsF_896_1737789673_45(_jsD_714_1737789673_538))); };
_jsF_896_1737789673_38 = (_jsD_714_1737789673_528) => { return _jsF_896_1737789673_44(_jsF_896_1737789673_39(_jsD_714_1737789673_528)); };; return _jsF_896_1737789673_38(_jsD_714_1737789673_544.inputData); }
Source code
jsFunc.interface("html")
Html output
term
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_896_1737789673_57>Generated JS function:
//k1_moveOutStart
//k1_moveOutEnd
_jsD_714_1737789673_554 = { inputData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], reload: null };
async function _jsF_896_1737789673_57() {
_jsF_896_1737789673_54 = (x) => {
return ((x%3)===0);
}
_jsF_896_1737789673_53 = (_jsD_714_1737789673_548) => _jsD_714_1737789673_548.filt((_jsD_714_1737789673_549) => (_jsF_896_1737789673_54(_jsD_714_1737789673_549)), null)
_jsF_896_1737789673_56 = (x) => {
return ((x%2)===0);
}
_jsF_896_1737789673_55 = (_jsD_714_1737789673_551) => _jsD_714_1737789673_551.filt((_jsD_714_1737789673_552) => (_jsF_896_1737789673_56(_jsD_714_1737789673_552)), null)
_jsF_896_1737789673_52 = (_jsD_714_1737789673_547) => [_jsF_896_1737789673_53(_jsD_714_1737789673_547), _jsF_896_1737789673_55(_jsD_714_1737789673_547)];
_jsF_896_1737789673_51 = (_jsD_714_1737789673_546) => { return _jsF_896_1737789673_52(_jsD_714_1737789673_546); };; return _jsF_896_1737789673_51(_jsD_714_1737789673_554.inputData); }
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_896_1737789673_60>Generated JS function:
//k1_moveOutStart
//k1_moveOutEnd
_jsD_714_1737789673_557 = { inputData: 2, reload: null };
async function _jsF_896_1737789673_60(size) {
const f_335614_1737789739 = (f_194621_1737789739) => {
const ans = []; let value = f_194621_1737789739;
for (let i = 0; i < size; i++) {
ans.push(value);
value = value * (f_194621_1737789739 + i + 1);
}
return ans;
};
_jsF_896_1737789673_59 = (_jsD_714_1737789673_556) => { return f_335614_1737789739(_jsD_714_1737789673_556); };; return _jsF_896_1737789673_59(_jsD_714_1737789673_557.inputData); }
Source code
jsFunc.interface()
Html output
size
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_896_1737789673_66>Generated JS function:
//k1_moveOutStart
//k1_moveOutEnd
_jsD_714_1737789673_568 = { inputData: [1, 2, 3, 4, 5, 6, 7, 8, 9], reload: null };
async function _jsF_896_1737789673_66(someNum) {
const f_346227_1737789739 = (f_427605_1737789739) => { return someNum/Math.sqrt(f_427605_1737789739); }
_jsD_714_1737789673_562 = {"numerator": "someNum"};
_jsF_896_1737789673_63 = (_jsD_714_1737789673_561) => _jsD_714_1737789673_561.apply((_jsD_714_1737789673_563) => f_346227_1737789739(_jsD_714_1737789673_563), null, _jsD_714_1737789673_562, false)
_jsF_896_1737789673_65 = (_jsD_714_1737789673_567) => Math.round((_jsD_714_1737789673_567)*Math.pow(10, 2)+Number.EPSILON)/Math.pow(10, 2)
_jsD_714_1737789673_565 = {"ndigits": 2};
_jsF_896_1737789673_64 = (_jsD_714_1737789673_564) => _jsD_714_1737789673_564.apply((_jsD_714_1737789673_566) => _jsF_896_1737789673_65(_jsD_714_1737789673_566), null, _jsD_714_1737789673_565, false)
_jsF_896_1737789673_62 = (_jsD_714_1737789673_560) => { return _jsF_896_1737789673_64(_jsF_896_1737789673_63(_jsD_714_1737789673_560)); };; return _jsF_896_1737789673_62(_jsD_714_1737789673_568.inputData); }
Source code
jsFunc.interface("json")
Html output
someNum
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")