Investigating JavaScript prime number widget implementation.

examples/prime_example.ipynb

@@ -0,0 +1,162 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from traitlets import  Any, observe\n",
+    "from traitlets import Int, Any\n",
+    "import ipyreact\n",
+    "\n",
+    "def is_prime_number(n):\n",
+    "    for i in range(2, n):\n",
+    "        if n % i == 0:\n",
+    "            return \"No 💻🧊🧊🧊\"\n",
+    "    return \"Yes 💻✅✅✅\"\n",
+    "\n",
+    "\n",
+    "class PrimePythonWidget(ipyreact.ReactWidget):\n",
+    "    prime_message = Any(\"Click the Button\").tag(sync=True)\n",
+    "    count = Int(0).tag(sync=True)\n",
+    "\n",
+    "    @observe(\"count\")\n",
+    "    def _observe_count(self, change):\n",
+    "        self.prime_message = is_prime_number(self.count)\n",
+    "\n",
+    "    _esm = \"\"\"\n",
+    "    import * as React from \"react\";\n",
+    "\n",
+    "    export default function({on_count, count, prime_message}) {\n",
+    "        return <div><button onClick={() => on_count(count + 1)}>\n",
+    "            {count} times clicked \n",
+    "        </button>\n",
+    "        <br/>\n",
+    "        <span> {prime_message} </span>\n",
+    "        </div>\n",
+    "    };\"\"\"\n",
+    "\n",
+    "\n",
+    "primepy = PrimePythonWidget()\n",
+    "primepy\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "primepy.count = 3"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "primepy.count = 4"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "primepy.prime_message = \"Hello World\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "class PrimeJavaScriptWidget(ipyreact.ReactWidget):\n",
+    "    prime_message = Any(\"Click the Button\").tag(sync=True)    # <- TODO: this message does not show up because prime_message is overwritten\n",
+    "    count = Int(0).tag(sync=True)\n",
+    "\n",
+    "    _esm = \"\"\"\n",
+    "    import * as React from \"react\";\n",
+    "\n",
+    "    function isPrimeNumber(n) {\n",
+    "    for (let i = 2; i < n; i++) {\n",
+    "        if (n % i === 0) {\n",
+    "        return \"No 🌐🧊🧊🧊\";\n",
+    "        }\n",
+    "    }\n",
+    "    return \"Yes 🌐✅✅✅\";\n",
+    "    }\n",
+    "\n",
+    "    export const MyUpdater = ({ count, prime_message}) => {\n",
+    "    prime_message = isPrimeNumber(count);\n",
+    "    return <span> {prime_message} </span>;\n",
+    "    };\n",
+    "\n",
+    "    export default function ({ on_count, count, prime_message}) {\n",
+    "    return (\n",
+    "        <div>\n",
+    "        <button onClick={() => on_count(count + 1)}>{count} times clicked</button>\n",
+    "        <br />\n",
+    "        <MyUpdater count={count} prime_message = {prime_message}/>\n",
+    "        </div>\n",
+    "    );\n",
+    "    }\n",
+    "    \"\"\"\n",
+    "primejs = PrimeJavaScriptWidget()\n",
+    "primejs"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "primejs.count = 3"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "primejs.count = 4"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "primejs.prime_message = \"Hello World\"   # <- TODO: this message does not show up because it is overwritten by prime_message = isPrimeNumber(count);"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}