self review

Author: Archmonger

src/js/bun.lockb

@@ -1,13 +1,10 @@
 {
   "type": "module",
-  "version": "1.0.0",
   "scripts": {
     "format": "prettier --write . && eslint --fix",
     "check": "prettier --check . && eslint"
   },
   "devDependencies": {
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
     "eslint": "^9.13.0",
     "eslint-plugin-react": "^7.37.1",
     "prettier": "^3.3.3",

src/js/package.json

@@ -1,13 +1,17 @@
 import type { DjangoFormProps, HttpRequestProps } from "./types";
 import { useEffect } from "preact/hooks";
-import { render, createElement } from "preact";
+import { type ComponentChildren, render, createElement } from "preact";
 /**
  * Interface used to bind a ReactPy node to React.
  */
-export function bind(node) {
+export function bind(node: HTMLElement | Element | Node) {
   return {
-    create: (type, props, children) => createElement(type, props, ...children),
-    render: (element) => {
+    create: (
+      type: string,
+      props: Record<string, unknown>,
+      children: ComponentChildren[],
+    ) => createElement(type, props, ...children),
+    render: (element: HTMLElement | Element | Node) => {
       render(element, node);
     },
     unmount: () => render(null, node),
@@ -22,26 +26,29 @@ export function DjangoForm({
     const form = document.getElementById(formId) as HTMLFormElement;
 
     // Submission event function
-    const onSubmitEvent = (event) => {
+    const onSubmitEvent = (event: 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);
+      const formDataObject = formDataArray.reduce<Record<string, unknown>>(
+        (acc, [key, value]) => {
+          if (acc[key]) {
+            if (Array.isArray(acc[key])) {
+              acc[key].push(value);
+            } else {
+              acc[key] = [acc[key], value];
+            }
           } else {
-            acc[key] = [acc[key], value];
+            acc[key] = value;
           }
-        } else {
-          acc[key] = value;
-        }
-        return acc;
-      }, {});
+          return acc;
+        },
+        {},
+      );
 
       onSubmitCallback(formDataObject);
     };

src/js/src/components.ts

@@ -78,6 +78,8 @@ export function mountComponent(
   if (client.mountElement) {
     render(<Layout client={client} />, client.mountElement);
   } else {
-    console.error("Mount element is not defined. Cannot render the component.");
+    console.error(
+      "ReactPy mount element is undefined, cannot render the component!",
+    );
   }
 }

src/js/src/mount.tsx

@@ -10,7 +10,7 @@
     "isolatedModules": true,
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "module": "Preserve",
     "moduleDetection": "force",
     "moduleResolution": "bundler",
@@ -19,7 +19,9 @@
     "noUnusedLocals": true,
     "paths": {
       "react": ["./node_modules/preact/compat/"],
-      "react-dom": ["./node_modules/preact/compat/"]
+      "react-dom": ["./node_modules/preact/compat/"],
+      "react-dom/*": ["./node_modules/preact/compat/*"],
+      "react/jsx-runtime": ["./node_modules/preact/jsx-runtime"]
     },
     "resolveJsonModule": true,
     "skipLibCheck": true,