Merge pull request #333 from labzero/jeffrey/preact

Replace React with Preact

.eslintrc.js

@@ -41,6 +41,7 @@ module.exports = {
         jsx: "never",
         mjs: "never",
         ts: "never",
+        json: "always",
       },
     ],
 

package.json

@@ -49,12 +49,15 @@
     "passport-google-oauth20": "^2.0.0",
     "passport-local": "^1.0.0",
     "pg": "^8.9.0",
+    "preact": "^10.15.1",
+    "preact-render-to-string": "^6.1.0",
+    "preact-ssr-prepass": "^1.2.0",
     "pretty-error": "^3.0.4",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
+    "react": "npm:@preact/compat@*",
     "react-autosuggest": "^10.0.2",
     "react-bootstrap": "^2.7.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "npm:@preact/compat@*",
     "react-flip-toolkit": "^7.0.17",
     "react-geosuggest": "^2.14.1",
     "react-icons": "^4.7.1",

src/client.tsx

@@ -7,8 +7,8 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
+import { hydrate, render } from "preact";
 import React, { useEffect } from "react";
-import { createRoot, hydrateRoot } from "react-dom/client";
 import { Action, createPath, Location } from "history";
 import App from "./components/App";
 import configureStore from "./store/configureStore";
@@ -91,8 +91,6 @@ if (subdomain) {
 
 const router = routerCreator(routes);
 
-const root = createRoot(container!);
-
 // Re-render the app when window.location changes
 const onLocationChange = async ({
   action,
@@ -197,9 +195,9 @@ const onLocationChange = async ({
     };
 
     if (isInitialRender) {
-      hydrateRoot(container!, <AppWithCallbackAfterRender />);
+      hydrate(<AppWithCallbackAfterRender />, container!);
     } else {
-      root.render(<AppWithCallbackAfterRender />);
+      render(<AppWithCallbackAfterRender />, container!);
     }
   } catch (error) {
     if (__DEV__) {

src/components/AddUserForm/AddUserForm.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, Component, FormEvent } from "react";
+import React, { ChangeEvent, Component, TargetedEvent } from "react";
 import Button from "react-bootstrap/Button";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
@@ -38,9 +38,9 @@ class AddUserForm extends Component<AddUserFormProps, AddUserFormState> {
         HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
       >
     ) =>
-      this.setState({ [field]: event.target.value });
+      this.setState({ [field]: event.currentTarget.value });
 
-  handleSubmit = (event: FormEvent) => {
+  handleSubmit = (event: TargetedEvent) => {
     event.preventDefault();
     this.props.addUserToTeam(this.state);
     this.setState({ ...AddUserForm.defaultState });

src/components/App.tsx

@@ -9,7 +9,8 @@
 
 import StyleContext, { InsertCSS } from "isomorphic-style-loader/StyleContext";
 import PropTypes from "prop-types";
-import React, { Children, ReactNode } from "react";
+import React from "react";
+import { ComponentChildren } from "preact";
 import { Provider as ReduxProvider } from "react-redux";
 import { Libraries, Loader } from "@googlemaps/js-api-loader";
 import { AppContext } from "../interfaces";
@@ -26,7 +27,7 @@ const ContextType = {
 };
 
 interface AppProps {
-  children: ReactNode;
+  children?: ComponentChildren;
   context: AppContext;
 }
 
@@ -63,6 +64,10 @@ class App extends React.PureComponent<AppProps> {
 
   static childContextTypes = ContextType;
 
+  static defaultProps = {
+    children: null,
+  };
+
   constructor(props: AppProps) {
     super(props);
 
@@ -88,7 +93,7 @@ class App extends React.PureComponent<AppProps> {
       <StyleContext.Provider value={this.styleContextValue}>
         <ReduxProvider store={this.props.context.store}>
           <GoogleMapsLoaderContext.Provider value={this.loaderContextValue}>
-            {Children.only(this.props.children)}
+            {this.props.children}
           </GoogleMapsLoaderContext.Provider>
         </ReduxProvider>
       </StyleContext.Provider>

src/components/ChangeTeamURLModal/ChangeTeamURLModal.tsx

@@ -40,9 +40,9 @@ class ChangeTeamURLModal extends Component<
 
   handleChange =
     (field: keyof ChangeTeamURLModalState) =>
-    (event: ChangeEvent<HTMLInputElement>) =>
+    (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
       this.setState({
-        [field]: event.target.value,
+        [field]: event.currentTarget.value,
       });
 
   handleSubmit = () => {

src/components/ConfirmModal/ConfirmModal.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from "react";
+import React from "react";
+import { ComponentChildren } from "preact";
 import Modal from "react-bootstrap/Modal";
 import ModalBody from "react-bootstrap/ModalBody";
 import ModalFooter from "react-bootstrap/ModalFooter";
@@ -8,7 +9,7 @@ export interface ConfirmModalProps {
   actionLabel: string;
   shown: boolean;
   hideModal: () => void;
-  body: ReactNode;
+  body: ComponentChildren;
   handleSubmit: () => void;
 }
 

src/components/DeleteTeamModal/DeleteTeamModal.tsx

@@ -36,9 +36,11 @@ class DeleteTeamModal extends Component<
     };
   }
 
-  handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+  handleChange = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
     this.setState({
-      confirmSlug: event.target.value,
+      confirmSlug: event.currentTarget.value,
     });
   };
 

src/components/Layout/Layout.tsx

@@ -7,7 +7,8 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-import React, { Component, ReactNode } from "react";
+import React, { Component } from "react";
+import { VNode } from "preact";
 import PropTypes from "prop-types";
 import { InsertCSS } from "isomorphic-style-loader/StyleContext";
 // eslint-disable-next-line css-modules/no-unused-class, no-unused-vars
@@ -22,7 +23,7 @@ import s from "./Layout.scss";
 const emptyFunction = () => undefined;
 
 export interface LayoutProps {
-  children: ReactNode;
+  children: VNode;
   isHome?: boolean;
   path: string;
   shouldScrollToTop: boolean;

src/components/Link/Link.tsx

@@ -7,7 +7,8 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-import React, { Component, MouseEvent, ReactNode } from "react";
+import React, { Component, HTMLAttributes } from "react";
+import { ComponentChildren } from "preact";
 import history from "../../history";
 
 function isLeftClickEvent(event: MouseEvent) {
@@ -18,9 +19,9 @@ function isModifiedEvent(event: MouseEvent) {
   return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 }
 
-interface LinkProps extends React.HTMLProps<HTMLAnchorElement> {
+interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
   to: string;
-  children: ReactNode;
+  children: ComponentChildren;
   onClick?: (event: MouseEvent) => void;
 }
 

src/components/NameFilterForm/NameFilterForm.tsx

@@ -58,7 +58,7 @@ class NameFilterForm extends Component<
   };
 
   setNameFilterValue = (event: ChangeEvent<HTMLInputElement>) => {
-    this.props.setNameFilter(event.target.value);
+    this.props.setNameFilter(event.currentTarget.value);
   };
 
   hideForm = () => {

src/components/NotificationList/NotificationList.tsx

@@ -12,6 +12,7 @@ interface NotificationListProps {
 
 const NotificationList = ({ notifications }: NotificationListProps) => (
   <ul className={s.notifications}>
+    {/* @ts-expect-error: expects component instead of children */}
     <TransitionGroup>
       {notifications.map((notification) => (
         <CSSTransition

src/components/PastDecisionsModal/PastDecisionsModal.tsx

@@ -33,7 +33,7 @@ class PastDecisionsModal extends Component<
 
   handleChange = (event: ChangeEvent<HTMLSelectElement>) =>
     this.setState({
-      daysAgo: Number(event.target.value),
+      daysAgo: Number(event.currentTarget.value),
     });
 
   handleSubmit = () => {

src/components/RestaurantAddForm/RestaurantAddForm.tsx

@@ -74,7 +74,7 @@ class RestaurantAddForm extends Component<RestaurantAddFormProps> {
     return (
       <form>
         {this.maps ? (
-          <Suspense>
+          <Suspense fallback={null}>
             <Geosuggest
               autoActivateFirstSuggest
               bounds={

src/components/RestaurantAddTagForm/RestaurantAddTagForm.tsx

@@ -1,4 +1,4 @@
-import React, { Component, FormEvent, RefObject, createRef } from "react";
+import React, { Component, RefObject, TargetedEvent, createRef } from "react";
 import Autosuggest, {
   ChangeEvent,
   SuggestionSelectedEventData,
@@ -54,7 +54,7 @@ export class _RestaurantAddTagForm extends Component<
   }
 
   setAddTagAutosuggestValue = (
-    event: FormEvent,
+    event: TargetedEvent,
     { newValue, method }: ChangeEvent
   ) => {
     if (method === "up" || method === "down") {
@@ -65,7 +65,7 @@ export class _RestaurantAddTagForm extends Component<
     }));
   };
 
-  handleSubmit = (event: FormEvent) => {
+  handleSubmit = (event: TargetedEvent) => {
     event.preventDefault();
     this.props.addNewTagToRestaurant(this.state.autosuggestValue);
     this.setState(() => ({
@@ -74,7 +74,7 @@ export class _RestaurantAddTagForm extends Component<
   };
 
   handleSuggestionSelected = (
-    event: FormEvent,
+    event: TargetedEvent,
     { suggestion, method }: SuggestionSelectedEventData<Tag>
   ) => {
     if (method === "enter") {

src/components/RestaurantMap/RestaurantMap.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable max-classes-per-file */
 
 import PropTypes from "prop-types";
-import React, { Component, ReactNode, Suspense, lazy } from "react";
+import React, { Component, Suspense, lazy } from "react";
+import { VNode } from "preact";
 import withStyles from "isomorphic-style-loader/withStyles";
 import { GOOGLE_MAP_ZOOM } from "../../constants";
 import googleMapOptions from "../../helpers/googleMapOptions";
@@ -94,12 +95,12 @@ class RestaurantMap extends Component<RestaurantMapProps> {
       tempMarker,
     } = this.props;
 
-    let tempMarkerComponent: ReactNode;
+    let tempMarkerComponent: VNode;
     if (tempMarker !== undefined) {
       tempMarkerComponent = <TempMarker {...tempMarker.latLng} />;
     }
 
-    let googleInfoWindow: ReactNode;
+    let googleInfoWindow: VNode;
     if ("placeId" in infoWindow && infoWindow.placeId && infoWindow.latLng) {
       googleInfoWindow = (
         <GoogleInfoWindowContainer
@@ -115,7 +116,7 @@ class RestaurantMap extends Component<RestaurantMapProps> {
         <GoogleMapsLoaderContext.Consumer>
           {({ loader }) =>
             loader ? (
-              <Suspense>
+              <Suspense fallback={null}>
                 <GoogleMap
                   defaultZoom={defaultZoom || GOOGLE_MAP_ZOOM}
                   defaultCenter={latLng}

src/components/RestaurantMap/RestaurantMapContainer.ts

@@ -1,4 +1,5 @@
 import { connect } from "react-redux";
+import { ClickEventValue } from "google-map-react";
 import {
   clearCenter,
   clearNewlyAdded,
@@ -13,7 +14,6 @@ import { getMapUi } from "../../selectors/mapUi";
 import { getCurrentUser } from "../../selectors/user";
 import { getMapItems } from "../../selectors";
 import RestaurantMap from "./RestaurantMap";
-import { ClickEventValue } from "google-map-react";
 
 const mapStateToProps = (state: State) => {
   const mapUi = getMapUi(state);

src/components/RestaurantMapSettings/RestaurantMapSettingsContainer.ts

@@ -20,9 +20,9 @@ const mapDispatchToProps = (
       dispatch(flashSuccess("Default zoom level set for team."))
     ),
   setShowUnvoted: (event: ChangeEvent<HTMLInputElement>) =>
-    dispatch(setShowUnvoted(event.target.checked)),
+    dispatch(setShowUnvoted(event.currentTarget.checked)),
   setShowPOIs: (event: ChangeEvent<HTMLInputElement>) =>
-    dispatch(setShowPOIs(event.target.checked)),
+    dispatch(setShowPOIs(event.currentTarget.checked)),
 });
 
 export default connect(

src/components/RestaurantMarker/RestaurantMarkerContainer.ts

@@ -1,4 +1,3 @@
-import { MouseEvent } from "react";
 import { connect } from "react-redux";
 import { Dispatch, State } from "../../interfaces";
 import { getRestaurantById } from "../../selectors/restaurants";