Connection resume (#1)

Add reconnection and client state side state capabilities

Author: JamesHutchison

src/js/package-lock.json

@@ -29,12 +29,13 @@ export function Layout(props: { client: ReactPyClient }): JSX.Element {
 
   useEffect(
     () =>
-      props.client.onMessage("layout-update", ({ path, model }) => {
+      props.client.onMessage("layout-update", ({ path, model, state_vars }) => {
         if (path === "") {
           Object.assign(currentModel, model);
         } else {
           setJsonPointer(currentModel, path, model);
         }
+        props.client.updateStateVars(state_vars);
         forceUpdate();
       }),
     [currentModel, props.client],
@@ -125,23 +126,15 @@ function ScriptElement({ model }: { model: ReactPyVdom }) {
       (value): value is string => typeof value == "string",
     )[0];
 
-    let scriptElement: HTMLScriptElement;
-    if (model.attributes) {
-      scriptElement = document.createElement("script");
-      for (const [k, v] of Object.entries(model.attributes)) {
-        scriptElement.setAttribute(k, v);
-      }
-      if (scriptContent) {
-        scriptElement.appendChild(document.createTextNode(scriptContent));
-      }
-      ref.current.appendChild(scriptElement);
-    } else if (scriptContent) {
-      const scriptResult = eval(scriptContent);
-      if (typeof scriptResult == "function") {
-        return scriptResult();
-      }
+    const scriptElement: HTMLScriptElement = document.createElement("script");
+    for (const [k, v] of Object.entries(model.attributes || {})) {
+      scriptElement.setAttribute(k, v);
+    }
+    if (scriptContent) {
+      scriptElement.appendChild(document.createTextNode(scriptContent));
     }
-  }, [model.key, ref.current]);
+    ref.current.appendChild(scriptElement);
+  }, [model.key]);
 
   return <div ref={ref} />;
 }

src/js/packages/@reactpy/client/src/components.tsx

@@ -12,6 +12,11 @@ export type LayoutEventMessage = {
   data: any;
 };
 
-export type IncomingMessage = LayoutUpdateMessage;
-export type OutgoingMessage = LayoutEventMessage;
+export type ReconnectingCheckMessage = {
+  type: "reconnecting-check";
+  value: string;
+}
+
+export type IncomingMessage = LayoutUpdateMessage | ReconnectingCheckMessage;
+export type OutgoingMessage = LayoutEventMessage | ReconnectingCheckMessage;
 export type Message = IncomingMessage | OutgoingMessage;