Hi guys!
kotlin-jupyter-js is a library to support %javascript
/%typescript
/%jsx
magic.
In some cases, we want create interactive charts or 3d charts, which only javascript can do. I create a library to support executing javascript code in kotlin jupyter kernal, so we could using javascript to render our kotlin data.
See more usage read README file.
examples
JS Sample
First declare a variable in cell
// value define in kotlin world
val kNumber = 233
then, add a cell with %js magic
%js
// using `kNumber` in js workd
import { kNumber } from '@jupyter'
getCellRoot().innerHTML = `<h1>${kNumber}</h1>`
![image](https://private-user-images.githubusercontent.com/22773923/291163534-cd1d84d3-7dcc-4f0f-8a3e-50300e4f7e4c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTAzMDI2MDgsIm5iZiI6MTcxMDMwMjMwOCwicGF0aCI6Ii8yMjc3MzkyMy8yOTExNjM1MzQtY2QxZDg0ZDMtN2RjYy00ZjBmLThhM2UtNTAzMDBlNGY3ZTRjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAzMTMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMzEzVDAzNTgyOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTFiZGFmYjdlZjg2NTZiOTkyZmUyM2E4ZGE0NDVhYzBkNzZiY2NiZjYzYmEzZDc4Y2YwNWY1NGY4NmNjYzdlYjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ADWCsHfIhQ0OFvjmbwN-vcbojcmZsszwzKIu3iO3ZFA)
React Example
preview cell declare a variable in cell
val foo = "foo from kotlin word";
Export your Components
%jsx
import { foo } from "@jupyter";
export default function App() {
return <h1>{foo}</h1>
}
![image](https://private-user-images.githubusercontent.com/22773923/291163847-c8902c7e-813d-41b3-be6b-b0ee192e890b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTAzMDI2MDgsIm5iZiI6MTcxMDMwMjMwOCwicGF0aCI6Ii8yMjc3MzkyMy8yOTExNjM4NDctYzg5MDJjN2UtODEzZC00MWIzLWJlNmItYjBlZTE5MmU4OTBiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAzMTMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMzEzVDAzNTgyOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTU1MzA0MTM0NmZmNTcyYWQzYjJiODE5ODc1NmQzYzAwNjUzNGQ4YzMzYWM0MDFiYzI2NzkwNmMyNmY0OTRjZGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.pJC1wwsrSmoE4po0k5Dqz6XSBhFzmZ775voNmuXqwsQ)
Full examples
https://yidafu.github.io/kotlin-jupyter-js/examples/js-magic.html
https://yidafu.github.io/kotlin-jupyter-js/examples/girls-last-tour.html