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.

// value define in kotlin world
val kNumber = 233

%js
// using `kNumber` in js workd
import { kNumber } from '@jupyter'

getCellRoot().innerHTML = `<h1>${kNumber}</h1>`

JSX Example

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>
}

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

// 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);

Inline Script

local js file

%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>`

import remote script

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>`