denomagics 1.1.14

Python package to run JavaScript/TypeScript(Deno backend) in Jupyter notebooks and Google Colab.

Deno Magic Command

This fork simplifies the magic command; instead of %%run_deno, we change it to %%d. And also translate all Japanese to English.

Overview

This is a magic command to write and execute Deno (JavaScript/TypeScript) code in code cells in Jupyter (notebook/lab) or Google Colab.

Usage

Installation

In Jupyter environments, you need to install Deno in advance and add it to your PATH. For installation methods, please refer to Deno's official website. If you're using Jupyter (extension) via VSCode, additionally install the Deno extension and set Deno.enable to true in the settings.

In the Google Colab environment, there's an installation function provided in the package, so you don't need to install it separately.

Adding the Magic Command

Paste the following code into a code cell and execute it to register the magic command. You need to re-run it each time you restart the kernel or runtime.

%pip install denomagics
import denomagics

Install Deno (for Google Colab; calling this in other environments won't install Deno)

denomagics.install_deno_colab()
# Register the magic command
denomagics.register_deno_magics()

How to Use the Magic Command

At the beginning of a code cell, write the magic command as follows. When executed, the JavaScript/TypeScript code in the code cell will be run by Deno.

%%d

console.log("Hello, world!");

or with old syntax

%%run_deno

console.log("Hello, world!");

We also provide a magic command that transpiles the JavaScript/TypeScript code in the code cell using Deno and runs it inside an iframe.

Below is an example using p5.js, a library for browsers.

%%run_deno_iframe 830 430
import "https://cdn.jsdelivr.net/npm/p5@1.9.4/lib/p5.js";

const sketch = (p: any) => {
  let x = 0;
  let y = 0;
  let speed = 2;
  let color: [number, number, number] = [0, 0, 0];

  p.setup = () => {
    p.createCanvas(800, 400);
    x = p.width / 2;
    y = p.height / 2;
  };

  p.draw = () => {
    p.background(220);
    p.fill(color);
    p.ellipse(x, y, 50, 50);
    if (p.keyIsDown(p.LEFT_ARROW) === true) {
      x -= speed;
    }

    if (p.keyIsDown(p.RIGHT_ARROW) === true) {
      x += speed;
    }

    if (p.keyIsDown(p.UP_ARROW) === true) {
      y -= speed;
    }

    if (p.keyIsDown(p.DOWN_ARROW) === true) {
      y += speed;
    }
  };

  p.mousePressed = () => {
    color = [p.random(255), p.random(255), p.random(255)];
  };
};

new p5(sketch);

Magic Command

%%d

%%run_deno [userval]

Executes the JavaScript/TypeScript code in the code cell using Deno.

• userval: Specifies whether to use Jupyter user variables in Deno. The default is False.

When userval is set to True, you can access Jupyter's user variables through globalThis.jupyter, allowing variable exchange across cells.
Internally, data is exchanged between Jupyter and Deno using a temporary JSON file, so objects that cannot be converted to JSON cannot be used.
Behavior is undefined if such objects are used.

If the code is being executed within a Jupyter code cell, globalThis.isJupyterCell is defined. By checking whether this is not undefined, you can determine if the code is being executed from a Jupyter code cell.

If you want to terminate the execution in the middle of a code cell while using Jupyter user variables, use jupyterExit() instead of Deno.exit. If you exit with Deno.exit, Jupyter's user variables will not be updated.

%%run_deno_iframe

Transpiles the JavaScript/TypeScript in the code cell using Deno and runs it inside an iframe.

%%run_deno_iframe [width] [height] [srcs]

• width: Specifies the width of the iframe. The default is 500.
• height: Specifies the height of the iframe. The default is 500.
• srcs: Specifies the URLs of external JavaScript files. If specifying multiple URLs, separate them with spaces.

%%run_deno_bundle_iframe

Transpiles and bundles the JavaScript/TypeScript in the code cell, including the imported code, and runs it inside an iframe.

The arguments are the same as %%denoiframe.

%%view_deno_iframe

Outputs the HTML generated after transpiling the JavaScript/TypeScript in the code cell using Deno.

The arguments are the same as %%run_deno_iframe.

%%view_deno_bundle_iframe

Outputs the HTML generated after transpiling and bundling the JavaScript/TypeScript in the code cell, including the imported code.

The arguments are the same as %%run_deno_iframe.