USE {
repositories {
mavenCentral()
}
dependencies {
implementation("dev.yidafu.jupyter:jupyter-js:0.7.0")
}
}
%js
%javacript
%ts
%typescript
%tsx
In JS world, you can import any variables from kotlin world, through the virtual package @jupyter
.
You can get a cell root Element in output cell, and do every thing you want to do.
// value define in kotlin world
val kNumber = 233
%js
// using `kNumber` in js workd
import { kNumber } from '@jupyter'
getCellRoot().innerHTML = `<h1>${kNumber}</h1>`
Just export your component function.
%jsx
/%tsx
magic will render your default export component function
var foo: String = "foo from kotlin world"
%jsx
import { foo } from "@jupyter";
export default function App() {
return <h1>{foo}</h1>
}
see https://echarts.apache.org/examples/en/editor.html?c=line-simple&lang=ts
%ts
magicsuport exteral libs libs-mapping.json
you can also import libs from url.
like:
import _ from 'https://esm.sh/lodash@4.17.21'
https://esm.sh/ may help you
// value define in kotlin world
val dataArray = arrayOf(150, 230, 224, 218, 135, 147, 260)
%ts
import { dataArray } from "@jupyter";
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
var chartDom = getCellRoot();
chartDom.style = "width:300px; height: 300px"
var myChart = echarts.init(chartDom);
var option: EChartsOption;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: dataArray,
type: 'line'
}
]
};
option && myChart.setOption(option);
%js
import { foo } from "./local.js"
// duplicate import
import { a, c } from "./local.js"
getCellRoot().innerHTML = `<div>
<h3>${foo}</h3>
<h6>${a}</h6>
<h6>${c}</h6>
</div>`
add ?inline
query parameter, jupyter js will download the script and compile to IIFE.
%js
import { foo } from "https://cdn.jsdelivr.net/gh/yidafu/kotlin-jupyter-js@main/examples/local.js?inline"
getCellRoot().innerHTML = `<div>
<h3>${foo}</h3>
</div>`