In [1]:
USE {  repositories {  mavenCentral()  }  dependencies {  implementation("dev.yidafu.jupyter:jupyter-js:0.7.0")  } }

Support magic¶

  • %js
  • %javacript
  • %ts
  • %typescript
  • %tsx

JS Example¶

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.

In [2]:
// value define in kotlin world val kNumber = 233
In [3]:
%js // using `kNumber` in js workd import { kNumber } from '@jupyter' getCellRoot().innerHTML = `<h1>${kNumber}</h1>`
Out[3]:

JSX Example¶

Just export your component function.

%jsx/%tsx magic will render your default export component function

In [4]:
var foo: String = "foo from kotlin world"
In [5]:
%jsx import { foo } from "@jupyter"; export default function App() {  return <h1>{foo}</h1> }
Out[5]:

Using external library¶

Echarts Example¶

see https://echarts.apache.org/examples/en/editor.html?c=line-simple&lang=ts

  1. Defined Value in Kotlin Cell
  2. using it with %ts magic
  3. coding js code

suport 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

In [6]:
// value define in kotlin world val dataArray = arrayOf(150, 230, 224, 218, 135, 147, 260)
In [7]:
%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);
Out[7]:

Inline Script¶

local js file¶

In [8]:
%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>`
Out[8]:

import remote script¶

add ?inline query parameter, jupyter js will download the script and compile to IIFE.

In [9]:
%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>`
Out[9]:
In [ ]: