Switch from react to preact

src/js/package.json

@@ -1,5 +1,6 @@
 {
   "type": "module",
+  "version": "1.0.0",
   "scripts": {
     "format": "prettier --write . && eslint --fix",
     "check": "prettier --check . && eslint"
@@ -9,12 +10,18 @@
     "@types/react-dom": "^18.2.18",
     "eslint": "^9.13.0",
     "eslint-plugin-react": "^7.37.1",
-    "prettier": "^3.3.3"
+    "prettier": "^3.3.3",
+    "bun-types": "^0.5.0"
   },
   "dependencies": {
     "@pyscript/core": "^0.6",
     "@reactpy/client": "^0.3.2",
     "event-to-object": "^0.1.2",
-    "morphdom": "^2.7.4"
+    "morphdom": "^2.7.4",
+    "preact": "^10.26.9"
+  },
+  "overrides": {
+    "react": "npm:@preact/compat",
+    "react-dom": "npm:@preact/compat"
   }
 }

src/js/src/components.ts

@@ -1,25 +1,24 @@
 import { DjangoFormProps, HttpRequestProps } from "./types";
-import React from "react";
-import ReactDOM from "react-dom";
+import { useEffect } from "preact/hooks";
+import { render, createElement } from "preact";
 /**
  * Interface used to bind a ReactPy node to React.
  */
 export function bind(node) {
   return {
-    create: (type, props, children) =>
-      React.createElement(type, props, ...children),
+    create: (type, props, children) => createElement(type, props, ...children),
     render: (element) => {
-      ReactDOM.render(element, node);
+      render(element, node);
     },
-    unmount: () => ReactDOM.unmountComponentAtNode(node),
+    unmount: () => render(null, node),
   };
 }
 
 export function DjangoForm({
   onSubmitCallback,
   formId,
 }: DjangoFormProps): null {
-  React.useEffect(() => {
+  useEffect(() => {
     const form = document.getElementById(formId) as HTMLFormElement;
 
     // Submission event function
@@ -64,7 +63,7 @@ export function DjangoForm({
 }
 
 export function HttpRequest({ method, url, body, callback }: HttpRequestProps) {
-  React.useEffect(() => {
+  useEffect(() => {
     fetch(url, {
       method: method,
       body: body,

src/js/src/mount.tsx

@@ -1,6 +1,5 @@
 import { ReactPyDjangoClient } from "./client";
-import React from "react";
-import ReactDOM from "react-dom";
+import { render } from "preact";
 import { Layout } from "@reactpy/client/src/components";
 
 export function mountComponent(
@@ -76,5 +75,9 @@ export function mountComponent(
   }
 
   // Start rendering the component
-  ReactDOM.render(<Layout client={client} />, client.mountElement);
+  if (client.mountElement) {
+    render(<Layout client={client} />, client.mountElement);
+  } else {
+    console.error("Mount element is not defined. Cannot render the component.");
+  }
 }

src/js/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "lib": ["DOM", "DOM.Iterable", "esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noUnusedLocals": true,
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    },
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "target": "esnext"
+  }
+}

tests/test_app/tests/utils.py

@@ -1,4 +1,4 @@
-# ruff: noqa: N802, RUF012
+# ruff: noqa: N802, RUF012, T201
 import asyncio
 import os
 import sys
@@ -117,16 +117,8 @@ def start_playwright_client(cls):
         cls.browser = cls.playwright.chromium.launch(headless=bool(headless))
         cls.page = cls.browser.new_page()
         cls.page.set_default_timeout(10000)
-        cls.page.on("console", cls.playwright_logging)
-
-    @staticmethod
-    def playwright_logging(msg):
-        if msg.type == "error":
-            _logger.error(msg.text)
-        elif msg.type == "warning":
-            _logger.warning(msg.text)
-        elif msg.type == "info":
-            _logger.info(msg.text)
+        cls.page.on("console", lambda msg: print(f"CLIENT {msg.type.upper()}: {msg.text}"))
+        cls.page.on("pageerror", lambda err: print(f"CLIENT EXCEPTION: {err.name}: {err.message}\n{err.stack}"))
 
     @classmethod
     def shutdown_playwright_client(cls):