Experimental %javascript/%typescript/%jsx magic support

[yidafu]

kotlin-jupyter-js is a library to support %javascript/%typescript/%jsx magic.

PR in kotlin-jupyter-llibraries

Example

Here is full example: js-magic.ipynb output html, origin notebook js-magic.ipynb

Import jupyter-js

USE {
    dependencies {
        implementation("dev.yidafu.jupyter:jupyter-js:0.7.0")
    }
}

JSX example

Define variable in kotlin cell

var foo: String = "foo from kotlin world"

then write js/ts/jsx code using kotlin variable, like below:

%jsx
//  "@jupyter" is virtual package
import { foo } from "@jupyter";

export default function App() {
    return <h1>{foo}</h1>
}

Inline Script

Some cases, you may want reuse JS code, inline script for that.

val foo = "foo";
// variable alias
jsExport("bar",  foo)

next js cell, ESM script url add ?inline query.

%js
import { renderData } from "https://example.com/remote-script.js?inline"

renderData(foo);

remote-script.js must be ESM.

// https://example.com/remote-script.js
export function renderData(title) {
    getCellRot().innerHTML = `<div>${title}</div>`;
}

Key

kotlin-jupyter-js base on SWC's JVM binding. So that it also support TypeScript and React

Have fun with kotlin-jupyter-js, and give me some feedback.