Refactor javascript

Author: Archmonger

pyproject.toml

@@ -75,7 +75,7 @@ installer = "uv"
 [[tool.hatch.build.hooks.build-scripts.scripts]]
 commands = [
   "bun install --cwd src/js",
-  "bun build src/js/src/index.tsx --outfile src/reactpy_django/static/reactpy_django/client.js --minify",
+  "bun build src/js/src/index.ts --outfile src/reactpy_django/static/reactpy_django/client.js --minify",
   'cd src/build_scripts && python copy_dir.py "src/js/node_modules/@pyscript/core/dist" "src/reactpy_django/static/reactpy_django/pyscript"',
   'cd src/build_scripts && python copy_dir.py "src/js/node_modules/morphdom/dist" "src/reactpy_django/static/reactpy_django/morphdom"',
 ]

src/js/src/client.ts

@@ -30,14 +30,14 @@ export class ReactPyDjangoClient
           this.prerenderElement.remove();
           this.prerenderElement = null;
         }
-        if (this.offlineElement) {
+        if (this.offlineElement && this.mountElement) {
           this.mountElement.hidden = true;
           this.offlineElement.hidden = false;
         }
       },
       onOpen: () => {
         // If offlineElement exists, hide it and show the mountElement
-        if (this.offlineElement) {
+        if (this.offlineElement && this.mountElement) {
           this.offlineElement.hidden = true;
           this.mountElement.hidden = false;
         }

src/js/src/components.ts

@@ -0,0 +1,64 @@
+import { DjangoFormProps } from "./types";
+import React from "react";
+import ReactDOM from "react-dom";
+/**
+ * Interface used to bind a ReactPy node to React.
+ */
+export function bind(node) {
+  return {
+    create: (type, props, children) =>
+      React.createElement(type, props, ...children),
+    render: (element) => {
+      ReactDOM.render(element, node);
+    },
+    unmount: () => ReactDOM.unmountComponentAtNode(node),
+  };
+}
+
+export function DjangoForm({
+  onSubmitCallback,
+  formId,
+}: DjangoFormProps): null {
+  React.useEffect(() => {
+    const form = document.getElementById(formId) as HTMLFormElement;
+
+    // Submission event function
+    const onSubmitEvent = (event) => {
+      event.preventDefault();
+      const formData = new FormData(form);
+
+      // Convert the FormData object to a plain object by iterating through it
+      // If duplicate keys are present, convert the value into an array of values
+      const entries = formData.entries();
+      const formDataArray = Array.from(entries);
+      const formDataObject = formDataArray.reduce((acc, [key, value]) => {
+        if (acc[key]) {
+          if (Array.isArray(acc[key])) {
+            acc[key].push(value);
+          } else {
+            acc[key] = [acc[key], value];
+          }
+        } else {
+          acc[key] = value;
+        }
+        return acc;
+      }, {});
+
+      onSubmitCallback(formDataObject);
+    };
+
+    // Bind the event listener
+    if (form) {
+      form.addEventListener("submit", onSubmitEvent);
+    }
+
+    // Unbind the event listener when the component dismounts
+    return () => {
+      if (form) {
+        form.removeEventListener("submit", onSubmitEvent);
+      }
+    };
+  }, []);
+
+  return null;
+}

src/js/src/index.ts

@@ -0,0 +1,2 @@
+export { DjangoForm, bind } from "./components";
+export { mountComponent } from "./mount";

src/js/src/index.tsx renamed to src/js/src/mount.tsx

@@ -2,21 +2,6 @@ import { ReactPyDjangoClient } from "./client";
 import React from "react";
 import ReactDOM from "react-dom";
 import { Layout } from "@reactpy/client/src/components";
-import { DjangoFormProps } from "./types";
-
-/**
- * Interface used to bind a ReactPy node to React.
- */
-export function bind(node) {
-  return {
-    create: (type, props, children) =>
-      React.createElement(type, props, ...children),
-    render: (element) => {
-      ReactDOM.render(element, node);
-    },
-    unmount: () => ReactDOM.unmountComponentAtNode(node),
-  };
-}
 
 export function mountComponent(
   mountElement: HTMLElement,
@@ -84,7 +69,7 @@ export function mountComponent(
   // Replace the prerender element with the real element on the first layout update
   if (client.prerenderElement) {
     client.onMessage("layout-update", ({ path, model }) => {
-      if (client.prerenderElement) {
+      if (client.prerenderElement && client.mountElement) {
         client.prerenderElement.replaceWith(client.mountElement);
         client.prerenderElement = null;
       }
@@ -94,51 +79,3 @@ export function mountComponent(
   // Start rendering the component
   ReactDOM.render(<Layout client={client} />, client.mountElement);
 }
-
-export function DjangoForm({
-  onSubmitCallback,
-  formId,
-}: DjangoFormProps): null {
-  React.useEffect(() => {
-    const form = document.getElementById(formId) as HTMLFormElement;
-
-    // Submission event function
-    const onSubmitEvent = (event) => {
-      event.preventDefault();
-      const formData = new FormData(form);
-
-      // Convert the FormData object to a plain object by iterating through it
-      // If duplicate keys are present, convert the value into an array of values
-      const entries = formData.entries();
-      const formDataArray = Array.from(entries);
-      const formDataObject = formDataArray.reduce((acc, [key, value]) => {
-        if (acc[key]) {
-          if (Array.isArray(acc[key])) {
-            acc[key].push(value);
-          } else {
-            acc[key] = [acc[key], value];
-          }
-        } else {
-          acc[key] = value;
-        }
-        return acc;
-      }, {});
-
-      onSubmitCallback(formDataObject);
-    };
-
-    // Bind the event listener
-    if (form) {
-      form.addEventListener("submit", onSubmitEvent);
-    }
-
-    // Unbind the event listener when the component dismounts
-    return () => {
-      if (form) {
-        form.removeEventListener("submit", onSubmitEvent);
-      }
-    };
-  }, []);
-
-  return null;
-}

tests/test_app/__init__.py

@@ -8,7 +8,7 @@
 assert subprocess.run(["bun", "install"], cwd=str(js_dir), check=True).returncode == 0
 assert (
     subprocess.run(
-        ["bun", "build", "./src/index.tsx", "--outfile", str(static_dir / "client.js")],
+        ["bun", "build", "./src/index.ts", "--outfile", str(static_dir / "client.js")],
         cwd=str(js_dir),
         check=True,
     ).returncode