Enhance JavaScript API with global GUI object and improved event hand…

app/app.tsx

@@ -17,6 +17,7 @@ import {
   useActionData,
   useFetcher,
   useLoaderData,
+  useNavigate,
   useSearchParams,
   useSubmit,
 } from "@remix-run/react";
@@ -193,11 +194,27 @@ function App() {
   const [searchParams] = useSearchParams();
   const loaderData = useLoaderData<typeof loader>();
   const actionData = useActionData<typeof action>();
-  const submit = useSubmit();
   const { base64Body, children, state, channels } = actionData ?? loaderData;
   const formRef = useRef<HTMLFormElement>(null);
   const realtimeEvent = useRealtimeChannels({ channels });
   const fetcher = useFetcher();
+  const submit = useSubmit();
+  const navigate = useNavigate();
+
+  if (typeof window !== "undefined") {
+    // @ts-ignore
+    window.gui = {
+      session_state: state,
+      navigate,
+      fetcher,
+      submit() {
+        if (formRef.current) submit(formRef.current, ...arguments);
+      },
+      rerun() {
+        if (formRef.current) submit(formRef.current);
+      },
+    };
+  }
 
   useEffect(() => {
     if (!base64Body) return;

app/gooeyInput.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { RenderedMarkdown } from "~/renderedMarkdown";
 import { TooltipPlacement } from "./components/GooeyTooltip";
+import { useSubmit } from "@remix-run/react";
 
 export function InputLabel({
   label,
@@ -242,17 +243,15 @@ export function useGooeyCheckedInput({
 }
 
 export function loadEventHandlers<T>(
-  value: T,
-  setValue: (value: T) => void,
+  value?: T,
+  setValue?: (value: T) => void,
   args?: Record<string, any>
 ) {
   if (!args) return;
   for (const [attr, body] of Object.entries(args)) {
-    if (!attr.startsWith("on")) continue;
+    if (!attr.startsWith("on") || typeof body !== "string") continue;
     args[attr] = (event: React.SyntheticEvent) => {
-      // new Function(...args, body)
       const fn = new Function("event", "value", "setValue", body);
-      // fn.call(thisArg, ...args)
       return fn.call(event.currentTarget, event.nativeEvent, value, setValue);
     };
   }

app/renderer.tsx

@@ -12,6 +12,7 @@ import {
   GooeyRadio,
   GooeyTextarea,
   InputLabel,
+  loadEventHandlers,
 } from "~/gooeyInput";
 import { useJsonFormInput } from "~/jsonFormInput";
 import { RenderedHTML } from "~/renderedHTML";
@@ -133,6 +134,7 @@ function RenderedTreeNode({
   state: Record<string, any>;
 }) {
   const { name, props, children } = node;
+  loadEventHandlers(undefined, undefined, props);
 
   switch (name) {
     case "":
@@ -469,7 +471,7 @@ function RenderedTreeNode({
     }
     case "script": {
       const { src, args } = props;
-      return <ExecJs src={src} args={args}></ExecJs>;
+      return <ExecJs state={state} src={src} args={args}></ExecJs>;
     }
     case "plotly-chart": {
       const { chart } = props;
@@ -512,20 +514,20 @@ function RenderedTreeNode({
   }
 }
 
-function ExecJs({ src, args }: { args: any; src: any }) {
-  const submit = useSubmit();
-
-  args.gooeyRefresh = () => {
-    const elem = document.getElementById("gooey-form");
-    if (elem) submit(elem as HTMLFormElement, ...arguments);
-  };
-
+function ExecJs({
+  src,
+  args,
+  state,
+}: {
+  src: string;
+  args: Record<string, any>;
+  state: Record<string, any>;
+}) {
   useEffect(() => {
     // eslint-disable-next-line no-new-func
     const fn = new Function(...Object.keys(args), src);
     fn(...Object.values(args));
   }, [src, args]);
-
   return null;
 }
 

py/gooey_gui/components/common.py

@@ -581,8 +581,6 @@ def button(
             value="yes",
             name=key,
             label=dedent(label),
-            help=help,
-            tooltipPlacement=tooltip_placement,
             disabled=disabled,
             className=className,
             **props,