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

src/js/packages/@reactpy/client/src/types.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/vdom.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": [
     {

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

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

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

@@ -1,22 +1,31 @@
 {
   "compilerOptions": {
-    "allowJs": false,
+    "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "declaration": true,
     "declarationMap": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
-    "jsx": "react",
-    "lib": ["DOM", "DOM.Iterable", "esnext"],
-    "module": "esnext",
-    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
     "noEmitOnError": true,
     "noUnusedLocals": true,
+    "paths": {
+      "react": ["./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": false,
+    "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "target": "esnext"
+    "target": "ESNext",
+    "verbatimModuleSyntax": true
   }
 }

src/js/packages/event-to-object/tsconfig.json

@@ -43,9 +43,7 @@ def vdom_head_to_html(head: VdomDict) -> str:
     if isinstance(head, dict) and head.get("tagName") == "head":
         return reactpy_to_string(head)
 
-    raise ValueError(
-        "Invalid head element! Element must be either `html.head` or a string."
-    )
+    raise ValueError("Head element must be constructed with `html.head`.")
 
 
 def process_settings(settings: ReactPyConfig) -> None:

src/js/tsconfig.json

@@ -5,7 +5,7 @@
 
 
 def test_invalid_vdom_head():
-    with pytest.raises(ValueError, match="Invalid head element!*"):
+    with pytest.raises(ValueError):
         utils.vdom_head_to_html({"tagName": "invalid"})