Sync Preact build config with reactpy-django (#1296)

Author: Archmonger

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "proseWrap": "never",
+  "trailingComma": "all"
+}

src/js/README.md

@@ -1,58 +1,25 @@
-import react from "eslint-plugin-react";
-import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import { default as eslint } from "@eslint/js";
 import globals from "globals";
-import tsParser from "@typescript-eslint/parser";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
+import tseslint from "typescript-eslint";
 
 export default [
-  ...compat.extends(
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-  ),
-  {
-    ignores: ["**/node_modules/", "**/dist/"],
-  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  { ignores: ["**/node_modules/", "**/dist/"] },
   {
-    plugins: {
-      react,
-      "@typescript-eslint": typescriptEslint,
-    },
-
     languageOptions: {
       globals: {
         ...globals.browser,
         ...globals.node,
       },
-
-      parser: tsParser,
       ecmaVersion: "latest",
       sourceType: "module",
     },
-
-    settings: {
-      react: {
-        version: "detect",
-      },
-    },
-
     rules: {
       "@typescript-eslint/ban-ts-comment": "off",
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-non-null-assertion": "off",
       "@typescript-eslint/no-empty-function": "off",
-      "react/prop-types": "off",
     },
   },
 ];

src/js/bun.lockb

@@ -1,17 +1,15 @@
 {
   "devDependencies": {
-    "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.18.0",
-    "@typescript-eslint/eslint-plugin": "^8.21.0",
-    "@typescript-eslint/parser": "^8.21.0",
+    "@eslint/js": "^9.29.0",
+    "bun-types": "^1.2.16",
     "eslint": "^9.18.0",
-    "eslint-plugin-react": "^7.37.4",
     "globals": "^15.14.0",
-    "prettier": "^3.4.2"
+    "prettier": "^3.4.2",
+    "typescript-eslint": "^8.34.0"
   },
   "license": "MIT",
   "scripts": {
-    "lint": "prettier --check . && eslint",
-    "format": "prettier --write . && eslint --fix"
+    "format": "prettier --write . && eslint --fix",
+    "lint": "prettier --check . && eslint"
   }
 }

src/js/eslint.config.mjs

@@ -1,17 +1,17 @@
 {
-  "name": "@reactpy/app",
-  "description": "ReactPy's client-side entry point. This is strictly for internal use and is not designed to be distributed.",
-  "license": "MIT",
   "dependencies": {
     "@reactpy/client": "file:../client",
     "event-to-object": "file:../../event-to-object",
     "preact": "^10.25.4"
   },
+  "description": "ReactPy's client-side entry point. This is strictly for internal use and is not designed to be distributed.",
   "devDependencies": {
-    "typescript": "^5.7.3",
     "@pyscript/core": "^0.6",
-    "morphdom": "^2"
+    "morphdom": "^2",
+    "typescript": "^5.8.3"
   },
+  "license": "MIT",
+  "name": "@reactpy/app",
   "scripts": {
     "build": "bun build \"src/index.ts\" --outdir=\"../../../../reactpy/static/\" --minify --sourcemap=\"linked\"",
     "checkTypes": "tsc --noEmit"

src/js/package.json

@@ -1,10 +1,10 @@
 {
-  "extends": "../../../tsconfig.json",
   "compilerOptions": {
+    "composite": true,
     "outDir": "dist",
-    "rootDir": "src",
-    "composite": true
+    "rootDir": "src"
   },
+  "extends": "../../../tsconfig.json",
   "include": ["src"],
   "references": [
     {

src/js/packages/@reactpy/app/bun.lockb

@@ -1,36 +1,34 @@
 {
-  "name": "@reactpy/client",
-  "version": "1.0.0",
-  "description": "A client for ReactPy implemented in React",
   "author": "Ryan Morshead",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/reactive-python/reactpy"
+  "dependencies": {
+    "json-pointer": "^0.6.2",
+    "preact": "^10.26.9"
+  },
+  "description": "A client for ReactPy implemented in React",
+  "devDependencies": {
+    "@types/json-pointer": "^1.0.34",
+    "typescript": "^5.8.3"
   },
   "keywords": [
     "react",
     "reactive",
     "python",
     "reactpy"
   ],
-  "type": "module",
+  "license": "MIT",
   "main": "dist/index.js",
-  "dependencies": {
-    "json-pointer": "^0.6.2",
-    "preact": "^10.25.4"
-  },
-  "devDependencies": {
-    "@types/json-pointer": "^1.0.34",
-    "@types/react": "^17.0",
-    "@types/react-dom": "^17.0",
-    "typescript": "^5.7.3"
-  },
+  "name": "@reactpy/client",
   "peerDependencies": {
     "event-to-object": "<1.0.0"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/reactive-python/reactpy"
+  },
   "scripts": {
     "build": "tsc -b",
     "checkTypes": "tsc --noEmit"
-  }
+  },
+  "type": "module",
+  "version": "1.0.0"
 }

src/js/packages/@reactpy/app/eslint.config.mjs

@@ -1,5 +1,5 @@
 import logger from "./logger";
-import {
+import type {
   ReactPyClientInterface,
   ReactPyModule,
   GenericReactPyClientProps,

src/js/packages/@reactpy/app/package.json

@@ -1,16 +1,8 @@
 import { set as setJsonPointer } from "json-pointer";
-import React, {
-  ChangeEvent,
-  createContext,
-  createElement,
-  Fragment,
-  MutableRefObject,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "preact/compat";
-import {
+import type { ChangeEvent, MutableRefObject } from "preact/compat";
+import { createContext, createElement, Fragment, type JSX } from "preact";
+import { useContext, useEffect, useRef, useState } from "preact/hooks";
+import type {
   ImportSourceBinding,
   ReactPyComponent,
   ReactPyVdom,
@@ -67,7 +59,7 @@ export function Element({ model }: { model: ReactPyVdom }): JSX.Element | null {
 }
 
 function StandardElement({ model }: { model: ReactPyVdom }) {
-  const client = React.useContext(ClientContext);
+  const client = useContext(ClientContext);
   // Use createElement here to avoid warning about variable numbers of children not
   // having keys. Warning about this must now be the responsibility of the client
   // providing the models instead of the client rendering them.
@@ -83,10 +75,10 @@ function StandardElement({ model }: { model: ReactPyVdom }) {
 function UserInputElement({ model }: { model: ReactPyVdom }): JSX.Element {
   const client = useContext(ClientContext);
   const props = createAttributes(model, client);
-  const [value, setValue] = React.useState(props.value);
+  const [value, setValue] = useState(props.value);
 
   // honor changes to value from the client via props
-  React.useEffect(() => setValue(props.value), [props.value]);
+  useEffect(() => setValue(props.value), [props.value]);
 
   const givenOnChange = props.onChange;
   if (typeof givenOnChange === "function") {
@@ -116,7 +108,7 @@ function UserInputElement({ model }: { model: ReactPyVdom }): JSX.Element {
 function ScriptElement({ model }: { model: ReactPyVdom }) {
   const ref = useRef<HTMLDivElement | null>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // Don't run if the parent element is missing
     if (!ref.current) {
       return;
@@ -181,10 +173,10 @@ function useImportSource(model: ReactPyVdom): MutableRefObject<any> {
   const vdomImportSource = model.importSource;
   const vdomImportSourceJsonString = JSON.stringify(vdomImportSource);
   const mountPoint = useRef<HTMLElement>(null);
-  const client = React.useContext(ClientContext);
+  const client = useContext(ClientContext);
   const [binding, setBinding] = useState<ImportSourceBinding | null>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     let unmounted = false;
 
     if (vdomImportSource) {

src/js/packages/@reactpy/app/tsconfig.json

@@ -1,7 +1,7 @@
-import { default as React, default as ReactDOM } from "preact/compat";
+import { render } from "preact";
 import { ReactPyClient } from "./client";
 import { Layout } from "./components";
-import { MountProps } from "./types";
+import type { MountProps } from "./types";
 
 export function mountReactPy(props: MountProps) {
   // WebSocket route for component rendering
@@ -36,6 +36,5 @@ export function mountReactPy(props: MountProps) {
   });
 
   // Start rendering the component
-  // eslint-disable-next-line react/no-deprecated
-  ReactDOM.render(<Layout client={client} />, props.mountElement);
+  render(<Layout client={client} />, props.mountElement);
 }

src/js/packages/@reactpy/client/bun.lockb

@@ -1,4 +1,4 @@
-import { ComponentType } from "react";
+import type { ComponentType } from "preact";
 
 // #### CONNECTION TYPES ####
 

src/js/packages/@reactpy/client/package.json

@@ -1,7 +1,6 @@
-import React from "react";
-import { ReactPyClientInterface } from "./types";
+import type { ReactPyClientInterface } from "./types";
 import serializeEvent from "event-to-object";
-import {
+import type {
   ReactPyVdom,
   ReactPyVdomImportSource,
   ReactPyVdomEventHandler,
@@ -112,7 +111,7 @@ function getComponentFromModule(
   /*  Gets the component with the provided name from the provided module.
 
   Built specifically to work on inifinitely deep nested components.
-  For example, component "My.Nested.Component" is accessed from 
+  For example, component "My.Nested.Component" is accessed from
   ModuleA like so: ModuleA["My"]["Nested"]["Component"].
   */
   const componentParts: string[] = componentName.split(".");
@@ -206,17 +205,14 @@ function createEventHandler(
 ): [string, () => void] {
   const eventHandler = function (...args: any[]) {
     const data = Array.from(args).map((value) => {
-      if (!(typeof value === "object" && value.nativeEvent)) {
-        return value;
-      }
-      const event = value as React.SyntheticEvent<any>;
+      const event = value as Event;
       if (preventDefault) {
         event.preventDefault();
       }
       if (stopPropagation) {
         event.stopPropagation();
       }
-      return serializeEvent(event.nativeEvent);
+      return serializeEvent(event);
     });
     client.sendMessage({ type: "layout-event", data, target });
   };
@@ -228,7 +224,7 @@ function createInlineJavaScript(
   name: string,
   inlineJavaScript: string,
 ): [string, () => void] {
-  /* Function that will execute the string-like InlineJavaScript 
+  /* Function that will execute the string-like InlineJavaScript
   via eval in the most appropriate way */
   const wrappedExecutable = function (...args: any[]) {
     function handleExecution(...args: any[]) {

src/js/packages/@reactpy/client/src/client.ts

@@ -1,4 +1,4 @@
-import { CreateReconnectingWebSocketProps } from "./types";
+import type { CreateReconnectingWebSocketProps } from "./types";
 import log from "./logger";
 
 export function createReconnectingWebSocket(

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

@@ -1,10 +1,10 @@
 {
-  "extends": "../../../tsconfig.json",
   "compilerOptions": {
+    "composite": true,
     "outDir": "dist",
-    "rootDir": "src",
-    "composite": true
+    "rootDir": "src"
   },
+  "extends": "../../../tsconfig.json",
   "include": ["src"],
   "references": [
     {