feat: support more JavaScript than just function in grid_options (#2)

Author: mariobuikhuizen

docs/notebooks/demo-ipyaggrid-javascript.ipynb

@@ -0,0 +1,100 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "a309447d",
+   "metadata": {},
+   "source": [
+    "# Use javascript in `grid_options` by using `__js__:` prefix"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "614ccb50",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipyaggrid import Grid\n",
+    "\n",
+    "grid = Grid(\n",
+    "    css_rules=\"\"\"\n",
+    "        .ag-cell-not-inline-editing.price-high {\n",
+    "          background-color: red;\n",
+    "          color: white;\n",
+    "        }\n",
+    "        .my-tooltip {\n",
+    "          background-color: white;\n",
+    "          border: 1px solid black;\n",
+    "          padding: 8px;\n",
+    "        }\n",
+    "    \"\"\",\n",
+    "    grid_data=[\n",
+    "        {\"make\": \"Toyota\", \"model\": \"Celica\", \"price\": 35000},\n",
+    "        {\"make\": \"Ford\", \"model\": \"Mondeo\", \"price\": 32000},\n",
+    "        {\"make\": \"Porsche\", \"model\": \"Boxster\", \"price\": 72000},\n",
+    "    ],\n",
+    "    grid_options={\n",
+    "        'columnDefs': [\n",
+    "            {\"headerName\": \"Make\", \"field\": \"make\", \"editable\": True},\n",
+    "            {\"headerName\": \"Model\", \"field\": \"model\", \"editable\": True},\n",
+    "            {\"headerName\": \"Price\", \"field\": \"price\", \"editable\": True, 'type': 'numericColumn',\n",
+    "             'cellClass': \"\"\"function(params) {\n",
+    "               return params.value >32000 ? 'price-high' : '';\n",
+    "             }\"\"\",\n",
+    "             \"tooltipField\": 'price',\n",
+    "             \"tooltipComponent\": \"\"\"__js__: class {\n",
+    "               init(params) {\n",
+    "                 const eGui = this.eGui = document.createElement('div');\n",
+    "                   \n",
+    "                 if (params.value > 32000) {\n",
+    "                   eGui.classList.add('my-tooltip');\n",
+    "                   eGui.innerHTML = 'value to high';                           \n",
+    "                 }\n",
+    "               }\n",
+    "               \n",
+    "               getGui() {\n",
+    "                 return this.eGui;\n",
+    "               }\n",
+    "             }\"\"\",\n",
+    "             }\n",
+    "        ],\n",
+    "        'tooltipShowDelay': 0,\n",
+    "        'tooltipHideDelay': 2000,\n",
+    "    },\n",
+    ")\n",
+    "\n",
+    "grid"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "2ffb64ae",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "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.9.13"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

js/src/widget_json.js

@@ -20,6 +20,8 @@ JSONfunc.parse = function(str, helpers) {
         } else if (valueCompact.substring(0, 8) === 'helpers.') {
             r = eval(value);
             return r;
+        } else if (valueCompact.startsWith('__js__:')) {
+            return Function(`"use strict"; return (${value.slice(7)})`)();
         }
         return value;
     });