Switched from React to Preact

examples/FullScreenSaver/package.json

@@ -19,8 +19,7 @@
         "lint-staged": "^13.0.3",
         "mocha": "^10.0.0",
         "mocha-headless-chrome": "^4.0.0",
-        "react": "^16.8.6",
-        "react-dom": "^16.8.6",
+        "preact": "^10.10.2",
         "requirejs": "^2.3.6",
         "shenanigans-manager": "^0.8.1",
         "sinon": "^14.0.0",
@@ -67,17 +66,9 @@
             "externals": [
                 {
                     "js": {
-                        "dev": "react/umd/react.development",
-                        "prod": "react/umd/react.production.min"
+                        "dev": "preact/dist/preact.umd"
                     },
-                    "name": "react"
-                },
-                {
-                    "js": {
-                        "dev": "react-dom/umd/react-dom.development",
-                        "prod": "react-dom/umd/react-dom.production.min"
-                    },
-                    "name": "react-dom"
+                    "name": "preact"
                 },
                 {
                     "js": {

examples/FullScreenSaver/tsconfig.json

@@ -5,7 +5,8 @@
         "declarationMap": true,
         "experimentalDecorators": true,
         "forceConsistentCasingInFileNames": true,
-        "jsx": "react",
+        "jsx": "react-jsx",
+        "jsxImportSource": "preact",
         "module": "amd",
         "moduleResolution": "node",
         "noFallthroughCasesInSwitch": true,

packages/eightbittr/docs/FAQs.md

@@ -47,5 +47,4 @@ Quite a lot!
 
 ### UI
 
--   #187: Use modern React _(hooks!)_.
--   #229: Rewrite TouchPassr in React.
+-   #229: Rewrite TouchPassr in Preact.

packages/shenanigans-manager/setup/external/tsconfig.json

@@ -5,7 +5,8 @@
         "declarationMap": true,
         "experimentalDecorators": true,
         "forceConsistentCasingInFileNames": true,
-        "jsx": "react",
+        "jsx": "react-jsx",
+        "jsxImportSource": "preact",
         "module": "amd",
         "moduleResolution": "node",
         "noFallthroughCasesInSwitch": true,

packages/shenanigans-manager/setup/package-game.json

@@ -8,17 +8,9 @@
             "externals": [
                 {
                     "js": {
-                        "dev": "react/umd/react.development",
-                        "prod": "react/umd/react.production.min"
+                        "dev": "preact/dist/preact.umd"
                     },
-                    "name": "react"
-                },
-                {
-                    "js": {
-                        "dev": "react-dom/umd/react-dom.development",
-                        "prod": "react-dom/umd/react-dom.production.min"
-                    },
-                    "name": "react-dom"
+                    "name": "preact"
                 },
                 {
                     "js": {

packages/shenanigans-manager/setup/package-web.json

@@ -1,7 +1,6 @@
 {
     "devDependencies": {
-        "react": "^16.8.6",
-        "react-dom": "^16.8.6",
+        "preact": "^10.10.2",
         "requirejs": "^2.3.6"
     }
 }

packages/userwrappr/README.md

@@ -33,7 +33,7 @@ userWrapper.createDisplay(document.querySelector("#YourElementContainer"));
 UserWrappr prioritizes creating the contents as soon as possible.
 When you call `createDisplay`, the following happen in order:
 
-1. View libraries (i.e. React) _start_ to load.
+1. View libraries (i.e. Preact) _start_ to load.
 2. A visual approximation of your menus is placed at the bottom of the area.
 3. Contents are created in the remaining usable area.
 4. Once view libraries are loaded, real menus created using them to replace the fake menus.

packages/userwrappr/package.json

@@ -8,23 +8,18 @@
         "url": "https://github.com/FullScreenShenanigans/EightBittr/issues"
     },
     "dependencies": {
-        "react": "^16.8.6",
-        "react-dom": "^16.8.6",
+        "preact": "^10.10.2",
         "requirejs": "^2.3.6"
     },
     "description": "Creates configurable HTML displays over flexible-sized contents.",
     "devDependencies": {
         "@types/chai": "^4.3.3",
         "@types/mocha": "^9.1.1",
-        "@types/react": "^18.0.17",
-        "@types/react-dom": "^18.0.6",
         "@types/sinon": "^10.0.13",
         "@types/sinon-chai": "^3.2.8",
         "chai": "^4.3.6",
         "mocha": "^10.0.0",
         "mocha-headless-chrome": "^4.0.0",
-        "react": "^16.8.6",
-        "react-dom": "^16.8.6",
         "requirejs": "^2.3.6",
         "shenanigans-manager": "^0.8.1",
         "sinon": "^14.0.0",
@@ -35,8 +30,7 @@
     "license": "MIT",
     "name": "userwrappr",
     "repository": {
-        "type": "git",
-        "url": "ssh://git@github.com:FullScreenShenanigans/EightBittr.git"
+        "type": "git"
     },
     "scripts": {
         "clean": "rm -rf dist lib *.tsbuildinfo",
@@ -72,22 +66,15 @@
             "externals": [
                 {
                     "js": {
-                        "dev": "../../../node_modules/react/umd/react.development",
-                        "prod": "../../../node_modules/react/umd/react.production"
+                        "dev": "../../node_modules/preact/dist/preact.umd"
                     },
-                    "name": "react"
-                },
-                {
-                    "js": {
-                        "dev": "../../../node_modules/react-dom/umd/react-dom.development",
-                        "prod": "../../../node_modules/react-dom/umd/react-dom.production"
-                    },
-                    "name": "react-dom"
+                    "name": "preact"
                 }
             ]
         },
         "name": "UserWrappr"
     },
     "types": "./lib/index.d.ts",
+    "url": "https://github.com/FullScreenShenanigans/EightBittr",
     "version": "0.8.2"
 }

packages/userwrappr/src/Bootstrapping/Styles.ts

@@ -1,7 +1,14 @@
+import * as Preact from "preact";
+
 /**
- * Styles that work for both raw CSS styles and React CSS properties.
+ * String styles that work for Preact's CSS styles.
  */
-export type StyleDeclaration = CSSStyleDeclaration & React.CSSProperties;
+export type PreactCSSProperties = Partial<{
+    [K in keyof Omit<Preact.JSX.CSSProperties, "length">]: Exclude<
+        Preact.JSX.CSSProperties[K],
+        number | null
+    >;
+}>;
 
 /**
  * Styles to use for display elements.
@@ -10,107 +17,107 @@ export interface Styles {
     /**
      * Styles for the content area container.
      */
-    contentArea?: Partial<StyleDeclaration>;
+    contentArea?: PreactCSSProperties;
 
     /**
      * Styles for input elements.
      */
-    input?: Partial<StyleDeclaration>;
+    input?: PreactCSSProperties;
 
     /**
      * Styles for input buttons.
      */
-    inputButton?: Partial<StyleDeclaration>;
+    inputButton?: PreactCSSProperties;
 
     /**
      * Styles for action input buttons.
      */
-    inputButtonAction?: Partial<StyleDeclaration>;
+    inputButtonAction?: PreactCSSProperties;
 
     /**
      * Styles for boolean input buttons.
      */
-    inputButtonBoolean?: Partial<StyleDeclaration>;
+    inputButtonBoolean?: PreactCSSProperties;
 
     /**
      * Styles for input buttons in an off state.
      */
-    inputButtonOff?: Partial<StyleDeclaration>;
+    inputButtonOff?: PreactCSSProperties;
 
     /**
      * Styles for input buttons in an on state.
      */
-    inputButtonOn?: Partial<StyleDeclaration>;
+    inputButtonOn?: PreactCSSProperties;
 
     /**
      * Styles for select dropdowns.
      */
-    inputSelect?: Partial<StyleDeclaration>;
+    inputSelect?: PreactCSSProperties;
 
     /**
      * Styles for a hidden children container in a menu.
      */
-    menuChildrenClosed?: Partial<StyleDeclaration>;
+    menuChildrenClosed?: PreactCSSProperties;
 
     /**
      * Styles for a visible children container in a menu.
      */
-    menuChildrenOpen?: Partial<StyleDeclaration>;
+    menuChildrenOpen?: PreactCSSProperties;
 
     /**
      * Styles for each menu.
      */
-    menu?: Partial<StyleDeclaration>;
+    menu?: PreactCSSProperties;
 
     /**
      * Styles for the inner area of the menus container.
      */
-    menusInnerArea?: Partial<StyleDeclaration>;
+    menusInnerArea?: PreactCSSProperties;
 
     /**
      * Styles for a fake version of inner area of the menus container.
      */
-    menusInnerAreaFake?: Partial<StyleDeclaration>;
+    menusInnerAreaFake?: PreactCSSProperties;
 
     /**
      * Styles for each menu's title.
      */
-    menuTitle?: Partial<StyleDeclaration>;
+    menuTitle?: PreactCSSProperties;
 
     /**
      * Styles for each menu's title button.
      */
-    menuTitleButton?: Partial<StyleDeclaration>;
+    menuTitleButton?: PreactCSSProperties;
 
     /**
      * Styles for each menu's faked title button.
      */
-    menuTitleButtonFake?: Partial<StyleDeclaration>;
+    menuTitleButtonFake?: PreactCSSProperties;
 
     /**
      * Styles for an option's container.
      */
-    option?: Partial<StyleDeclaration>;
+    option?: PreactCSSProperties;
 
     /**
      * Styles for the left half of a two-part option.
      */
-    optionLeft?: Partial<StyleDeclaration>;
+    optionLeft?: PreactCSSProperties;
 
     /**
      * Styles for the right half of a two-part option.
      */
-    optionRight?: Partial<StyleDeclaration>;
+    optionRight?: PreactCSSProperties;
 
     /**
      * Styles for a container of options.
      */
-    options?: Partial<StyleDeclaration>;
+    options?: PreactCSSProperties;
 
     /**
      * Styles for a list of options within its container.
      */
-    optionsList?: Partial<StyleDeclaration>;
+    optionsList?: PreactCSSProperties;
 }
 
 /**

packages/userwrappr/src/Menus/InitializeMenus.tsx

@@ -1,5 +1,4 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { render } from "preact";
 
 import { VisualContext, VisualContextType } from "../VisualContext";
 import { Menus, MenusProps } from "./Menus";
@@ -20,7 +19,7 @@ export interface WrappingViewDependencies extends MenusProps, VisualContextType
  * @param container   Container to create a view within.
  * @param schema   Descriptions of menu options.
  */
-export type InitializeMenusView = (dependencies: WrappingViewDependencies) => Promise<void>;
+export type InitializeMenusView = (dependencies: WrappingViewDependencies) => void;
 
 /**
  * Module containing initializeMenus.
@@ -40,20 +39,17 @@ export interface InitializeMenusViewWrapper {
  * @param dependencies   Dependencies to create the menus view.
  * @returns A Promise for creating a menus view in the container.
  */
-export const initializeMenus: InitializeMenusView = async (dependencies) => {
+export const initializeMenus: InitializeMenusView = (dependencies) => {
     const menusContainerQuery = `.${dependencies.classNames.menusOuterArea}`;
     const menusContainer = dependencies.container.querySelector(menusContainerQuery);
     if (menusContainer === null) {
         throw new Error(`Could not find menus container under '${menusContainerQuery}'.`);
     }
 
-    await new Promise<void>((resolve) => {
-        ReactDOM.render(
-            <VisualContext.Provider value={dependencies}>
-                <Menus menus={dependencies.menus} />
-            </VisualContext.Provider>,
-            menusContainer,
-            resolve
-        );
-    });
+    render(
+        <VisualContext.Provider value={dependencies}>
+            <Menus menus={dependencies.menus} />
+        </VisualContext.Provider>,
+        menusContainer
+    );
 };

packages/userwrappr/src/Menus/Menu.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { useState } from "preact/hooks";
 
 import { MenuSchema } from "..";
 import { MenuContainer } from "./MenuContainer";
@@ -11,7 +11,7 @@ export interface MenuProps {
 }
 
 export const Menu = ({ menu }: MenuProps) => {
-    const [open, setOpen] = React.useState(OpenState.Closed);
+    const [open, setOpen] = useState(OpenState.Closed);
 
     return (
         <MenuContext.Provider value={{ menu, open, setOpen }}>

packages/userwrappr/src/Menus/MenuContainer.tsx

@@ -1,11 +1,11 @@
-import * as React from "react";
+import * as Preact from "preact";
 
 import { useVisualContext } from "../VisualContext";
 import { useMenuContext } from "./MenuContext";
 import { MenuTitle } from "./MenuTitle";
 
 export interface MenuContainerProps {
-    children: React.ReactNode;
+    children: Preact.ComponentChild;
 }
 
 export const MenuContainer = ({ children }: MenuContainerProps) => {

packages/userwrappr/src/Menus/MenuContext.tsx

@@ -1,4 +1,5 @@
-import * as React from "react";
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
 
 import { MenuSchema } from "..";
 import { OpenState } from "./OpenState";
@@ -10,6 +11,6 @@ export interface MenuContextType {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-export const MenuContext = React.createContext<MenuContextType>({} as any);
+export const MenuContext = createContext<MenuContextType>({} as any);
 
-export const useMenuContext = () => React.useContext(MenuContext);
+export const useMenuContext = () => useContext(MenuContext);

packages/userwrappr/src/Menus/MenuTitle.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import { useVisualContext } from "../VisualContext";
 import { useMenuContext } from "./MenuContext";
 import { OpenState } from "./OpenState";

packages/userwrappr/src/Menus/Menus.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import { useVisualContext } from "../VisualContext";
 import { Menu } from "./Menu";
 import { MenuSchema } from "./MenuSchemas";
@@ -11,7 +9,7 @@ export interface MenusProps {
     menus: MenuSchema[];
 }
 
-export const Menus: React.FC<MenusProps> = ({ menus }) => {
+export const Menus = ({ menus }: MenusProps) => {
     const { classNames, containerSize, styles } = useVisualContext();
 
     return (

packages/userwrappr/src/Menus/Options/ActionOption.tsx

@@ -1,7 +1,5 @@
-import * as React from "react";
-import { ActionSchema } from "userwrappr/src";
-
 import { useVisualContext } from "../../VisualContext";
+import { ActionSchema } from "./OptionSchemas";
 import { OptionComponent } from "./types";
 
 export const ActionOption: OptionComponent<ActionSchema> = ({ option }) => {

packages/userwrappr/src/Menus/Options/BooleanOption.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import { useVisualContext } from "../../VisualContext";
 import { BooleanSchema } from "./OptionSchemas";
 import { OptionComponent } from "./types";

packages/userwrappr/src/Menus/Options/MultiSelectOption.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import { useVisualContext } from "../../VisualContext";
 import { MultiSelectSchema } from "./OptionSchemas";
 import { OptionComponent } from "./types";
@@ -41,7 +39,13 @@ export const MultiSelectOption: OptionComponent<MultiSelectSchema> = ({ option }
                         <select
                             key={index}
                             onChange={(event) => {
-                                setValue(replaceIndex(value, index, event.target.value));
+                                setValue(
+                                    replaceIndex(
+                                        value,
+                                        index,
+                                        (event.target as HTMLSelectElement).value
+                                    )
+                                );
                             }}
                             value={value[index]}
                             style={selectStyle}

packages/userwrappr/src/Menus/Options/NumberOption.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import { useVisualContext } from "../../VisualContext";
 import { NumberSchema } from "./OptionSchemas";
 import { OptionComponent } from "./types";
@@ -19,7 +17,7 @@ export const NumberOption: OptionComponent<NumberSchema> = ({ option }) => {
                     max={option.maximum}
                     min={option.minimum}
                     onChange={(event) => {
-                        setValue(event.target.valueAsNumber);
+                        setValue((event.target as HTMLInputElement).valueAsNumber);
                     }}
                     style={styles.input}
                     type="number"

packages/userwrappr/src/Menus/Options/Options.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import { useVisualContext } from "../../VisualContext";
 import { useMenuContext } from "../MenuContext";
 import { OpenState } from "../OpenState";