Sync Preact build config with reactpy-django

Author: Archmonger

.prettierrc

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

src/js/README.md

@@ -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/tsconfig.json

@@ -18,7 +18,7 @@
   "main": "dist/index.js",
   "dependencies": {
     "json-pointer": "^0.6.2",
-    "preact": "^10.25.4"
+    "preact": "^10.26.9"
   },
   "devDependencies": {
     "@types/json-pointer": "^1.0.34",

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

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

src/js/packages/@reactpy/client/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 } 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/client/src/client.ts

@@ -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/src/components.tsx

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

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

@@ -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[]) {