feat(unstable): add Deno.jupyter.display API (#20819)

This brings in [`display`](https://github.com/rgbkrk/display.js) as part
of the `Deno.jupyter` namespace. 

Additionally these APIs were added:
- "Deno.jupyter.md"
- "Deno.jupyter.html"
- "Deno.jupyter.svg"
- "Deno.jupyter.format"

These APIs greatly extend capabilities of rendering output in Jupyter
notebooks.

---------

Co-authored-by: Bartek Iwańczuk <biwanczuk@gmail.com>

1 files changed, 71 insertions, 1 deletions

diff --git a/cli/tests/unit/jupyter_test.ts b/cli/tests/unit/jupyter_test.ts
index 40eaf4623..f1529adeb 100644
--- a/cli/tests/unit/jupyter_test.ts
+++ b/cli/tests/unit/jupyter_test.ts
@@ -1,5 +1,9 @@
 // Copyright 2018-2023 the Deno authors. All rights reserved. MIT license.
-import { assertThrows } from "./test_util.ts";
+
+import { assertEquals, assertThrows } from "./test_util.ts";
+
+// @ts-expect-error TypeScript (as of 3.7) does not support indexing namespaces by symbol
+const format = Deno[Deno.internal].jupyter.formatInner;
 
 Deno.test("Deno.jupyter is not available", () => {
   assertThrows(
@@ -7,3 +11,69 @@ Deno.test("Deno.jupyter is not available", () => {
     "Deno.jupyter is only available in `deno jupyter` subcommand.",
   );
 });
+
+export async function assertFormattedAs(obj: unknown, result: object) {
+  const formatted = await format(obj);
+  assertEquals(formatted, result);
+}
+
+Deno.test("display(canvas) creates a PNG", async () => {
+  // Let's make a fake Canvas with a fake Data URL
+  class FakeCanvas {
+    toDataURL() {
+      return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAAVSURBVAiZY/zPwPCfAQ0woQtQQRAAzqkCCB/D3o0AAAAASUVORK5CYII=";
+    }
+  }
+  const canvas = new FakeCanvas();
+
+  await assertFormattedAs(canvas, {
+    "image/png":
+      "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAAVSURBVAiZY/zPwPCfAQ0woQtQQRAAzqkCCB/D3o0AAAAASUVORK5CYII=",
+  });
+});
+
+Deno.test(
+  "class with a Symbol.for('Jupyter.display') function gets displayed",
+  async () => {
+    class Example {
+      x: number;
+
+      constructor(x: number) {
+        this.x = x;
+      }
+
+      [Symbol.for("Jupyter.display")]() {
+        return { "application/json": { x: this.x } };
+      }
+    }
+
+    const example = new Example(5);
+
+    // Now to check on the broadcast call being made
+    await assertFormattedAs(example, { "application/json": { x: 5 } });
+  },
+);
+
+Deno.test(
+  "class with an async Symbol.for('Jupyter.display') function gets displayed",
+  async () => {
+    class Example {
+      x: number;
+
+      constructor(x: number) {
+        this.x = x;
+      }
+
+      async [Symbol.for("Jupyter.display")]() {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+
+        return { "application/json": { x: this.x } };
+      }
+    }
+
+    const example = new Example(3);
+
+    // Now to check on the broadcast call being made
+    await assertFormattedAs(example, { "application/json": { x: 3 } });
+  },
+);