fix(jupyter): keep `this` around (#20789)

This fixes #20767.

We were losing `this` and then when an exception was happening, it
didn't show up in the output because we weren't bubbling up exceptions
from within a user defined function for displaying. I thought about
doing a `.call(object)` but didn't want to get in the way of a bound
`this` that a user or library was already putting on the function.

2 files changed, 92 insertions, 83 deletions

diff --git a/cli/tests/testdata/jupyter/integration_test.ipynb b/cli/tests/testdata/jupyter/integration_test.ipynb
index 450df4e9e..c1b31724c 100644
--- a/cli/tests/testdata/jupyter/integration_test.ipynb
+++ b/cli/tests/testdata/jupyter/integration_test.ipynb
@@ -51,12 +51,6 @@
    },
    "outputs": [
     {
-     "data": {},
-     "execution_count": 1,
-     "metadata": {},
-     "output_type": "execute_result"
-    },
-    {
      "name": "stdout",
      "output_type": "stream",
      "text": [
@@ -88,12 +82,6 @@
    },
    "outputs": [
     {
-     "data": {},
-     "execution_count": 2,
-     "metadata": {},
-     "output_type": "execute_result"
-    },
-    {
      "name": "stdout",
      "output_type": "stream",
      "text": [
@@ -120,7 +108,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": 4,
    "id": "08a17340",
    "metadata": {
     "hidden": true
@@ -132,7 +120,7 @@
        "{ color: \u001b[32m\"red\"\u001b[39m, area: \u001b[33m10000\u001b[39m }"
       ]
      },
-     "execution_count": 3,
+     "execution_count": 4,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -177,19 +165,12 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 4,
+   "execution_count": 5,
    "id": "bbf2c09b",
    "metadata": {
     "hidden": true
    },
-   "outputs": [
-    {
-     "data": {},
-     "execution_count": 4,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "undefined"
    ]
@@ -207,7 +188,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 5,
+   "execution_count": 6,
    "id": "d9801d80",
    "metadata": {
     "hidden": true
@@ -219,7 +200,7 @@
        "\u001b[1mnull\u001b[22m"
       ]
      },
-     "execution_count": 5,
+     "execution_count": 6,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -241,7 +222,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 6,
+   "execution_count": 7,
    "id": "cfaac330",
    "metadata": {
     "hidden": true
@@ -253,7 +234,7 @@
        "\u001b[33mtrue\u001b[39m"
       ]
      },
-     "execution_count": 6,
+     "execution_count": 7,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -275,7 +256,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 7,
+   "execution_count": 8,
    "id": "ec3be2da",
    "metadata": {
     "hidden": true
@@ -287,7 +268,7 @@
        "\u001b[33m42\u001b[39m"
       ]
      },
-     "execution_count": 7,
+     "execution_count": 8,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -309,7 +290,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 8,
+   "execution_count": 9,
    "id": "997cf2d7",
    "metadata": {
     "hidden": true
@@ -321,7 +302,7 @@
        "\u001b[32m\"this is a test of the emergency broadcast system\"\u001b[39m"
       ]
      },
-     "execution_count": 8,
+     "execution_count": 9,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -343,7 +324,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 9,
+   "execution_count": 10,
    "id": "44b63807",
    "metadata": {
     "hidden": true
@@ -355,7 +336,7 @@
        "\u001b[33m31337n\u001b[39m"
       ]
      },
-     "execution_count": 9,
+     "execution_count": 10,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -377,7 +358,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 10,
+   "execution_count": 11,
    "id": "e10c0d31",
    "metadata": {
     "hidden": true
@@ -389,7 +370,7 @@
        "\u001b[32mSymbol(foo)\u001b[39m"
       ]
      },
-     "execution_count": 10,
+     "execution_count": 11,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -411,7 +392,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 11,
+   "execution_count": 12,
    "id": "81c99233",
    "metadata": {
     "hidden": true
@@ -423,7 +404,7 @@
        "{ foo: \u001b[32m\"bar\"\u001b[39m }"
       ]
      },
-     "execution_count": 11,
+     "execution_count": 12,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -445,7 +426,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 12,
+   "execution_count": 13,
    "id": "43c1581b",
    "metadata": {
     "hidden": true
@@ -457,7 +438,7 @@
        "Promise { \u001b[32m\"it worked!\"\u001b[39m }"
       ]
      },
-     "execution_count": 12,
+     "execution_count": 13,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -468,7 +449,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 13,
+   "execution_count": 14,
    "id": "9a34b725",
    "metadata": {
     "hidden": true
@@ -483,7 +464,7 @@
        "}"
       ]
      },
-     "execution_count": 13,
+     "execution_count": 14,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -494,7 +475,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 14,
+   "execution_count": 15,
    "id": "b5c7b819",
    "metadata": {
     "scrolled": true
@@ -520,7 +501,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 15,
+   "execution_count": 16,
    "id": "14844fc9-536e-4121-a9bd-fc2d3f7b6395",
    "metadata": {},
    "outputs": [
@@ -541,7 +522,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 16,
+   "execution_count": 19,
    "id": "72d01fdd",
    "metadata": {},
    "outputs": [
@@ -557,7 +538,7 @@
        "}"
       ]
      },
-     "execution_count": 16,
+     "execution_count": 19,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -568,17 +549,11 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 17,
+   "execution_count": 20,
    "id": "28cf59d0-6908-4edc-bb10-c325beeee362",
    "metadata": {},
    "outputs": [
     {
-     "data": {},
-     "execution_count": 17,
-     "metadata": {},
-     "output_type": "execute_result"
-    },
-    {
      "name": "stdout",
      "output_type": "stream",
      "text": [
@@ -592,17 +567,11 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 18,
+   "execution_count": 21,
    "id": "8d5485c3-0da3-43fe-8ef5-a61e672f5e81",
    "metadata": {},
    "outputs": [
     {
-     "data": {},
-     "execution_count": 18,
-     "metadata": {},
-     "output_type": "execute_result"
-    },
-    {
      "name": "stdout",
      "output_type": "stream",
      "text": [
@@ -616,7 +585,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 19,
+   "execution_count": 22,
    "id": "1401d9d5-6994-4c7b-b55a-db3c16a1e2dc",
    "metadata": {},
    "outputs": [
@@ -626,7 +595,7 @@
        "\u001b[32m\"Cool 🫡\"\u001b[39m"
       ]
      },
-     "execution_count": 19,
+     "execution_count": 22,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -637,17 +606,11 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 20,
+   "execution_count": 23,
    "id": "7afdaa0a-a2a0-4f52-8c7d-b6c5f237aa0d",
    "metadata": {},
    "outputs": [
     {
-     "data": {},
-     "execution_count": 20,
-     "metadata": {},
-     "output_type": "execute_result"
-    },
-    {
      "name": "stdout",
      "output_type": "stream",
      "text": [
@@ -666,8 +629,16 @@
    ]
   },
   {
+   "cell_type": "markdown",
+   "id": "8822eed9-a801-4c1b-81c0-00e4ff180f40",
+   "metadata": {},
+   "source": [
+    "## Broadcasting Display Updates"
+   ]
+  },
+  {
    "cell_type": "code",
-   "execution_count": 21,
+   "execution_count": 24,
    "id": "8e93df23-06eb-414b-98d4-51fbebb53d1f",
    "metadata": {},
    "outputs": [
@@ -679,12 +650,6 @@
      },
      "metadata": {},
      "output_type": "display_data"
-    },
-    {
-     "data": {},
-     "execution_count": 21,
-     "metadata": {},
-     "output_type": "execute_result"
     }
    ],
    "source": [
@@ -720,8 +685,16 @@
    ]
   },
   {
+   "cell_type": "markdown",
+   "id": "c0eaa476-b9c8-4d00-8a97-24e6b8e861fd",
+   "metadata": {},
+   "source": [
+    "## Comms"
+   ]
+  },
+  {
    "cell_type": "code",
-   "execution_count": 22,
+   "execution_count": 25,
    "id": "6e9b530f-554d-4ef7-a5d6-69432283fd40",
    "metadata": {},
    "outputs": [],
@@ -759,12 +732,49 @@
    ]
   },
   {
+   "cell_type": "markdown",
+   "id": "05d9729c-c2e7-4a4c-8d6a-59782ed9ff11",
+   "metadata": {},
+   "source": [
+    "## Rich Classes"
+   ]
+  },
+  {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 26,
    "id": "f678313e-06c6-4fb8-a4ef-54a417129a82",
    "metadata": {},
-   "outputs": [],
-   "source": []
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<div style=\"width: 32px; height: 32px; background-color: #239814\" />"
+      ]
+     },
+     "execution_count": 26,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "class SuperColor {\n",
+    "  constructor() {\n",
+    "      this.color = \"#239814\"\n",
+    "  }\n",
+    "  hex() {\n",
+    "      return this.color\n",
+    "  }\n",
+    "    \n",
+    "  [Symbol.for(\"Jupyter.display\")]() {\n",
+    "      return {\n",
+    "          \"text/html\": `<div style=\"width: 32px; height: 32px; background-color: ${this.hex()}\" />`\n",
+    "      }\n",
+    "  }\n",
+    "}\n",
+    "\n",
+    "let sc = new SuperColor()\n",
+    "sc"
+   ]
   }
  ],
  "metadata": {
diff --git a/cli/tools/jupyter/server.rs b/cli/tools/jupyter/server.rs
index 2489fcd04..0b8d25c3e 100644
--- a/cli/tools/jupyter/server.rs
+++ b/cli/tools/jupyter/server.rs
@@ -554,14 +554,13 @@ async fn get_jupyter_display(
       "Runtime.callFunctionOn",
       Some(json!({
         "functionDeclaration": r#"function (object) {
-      const display = object[Symbol.for("Jupyter.display")];
-
-      if (typeof display !== "function") {
+      if (typeof object[Symbol.for("Jupyter.display")] !== "function") {
         return null;
       }
       
       try {
-        return JSON.stringify(display());
+        const representation = object[Symbol.for("Jupyter.display")]();
+        return JSON.stringify(representation);
       } catch {
         return null;
       }