Remove dependency on immer

package.json

@@ -12,7 +12,6 @@
     "typescript": "^5.0.2"
   },
   "dependencies": {
-    "immer": "^10.0.3",
     "preact": "^10.19.2",
     "ts-adt": "^2.1.2",
     "wouter-preact": "^2.12.1"

src/components/App.tsx

@@ -1,23 +1,18 @@
 import { h } from "preact";
-import { useReducer } from "preact/hooks";
 import { Link, Route, Router } from "wouter-preact";
-import { produce } from "immer";
 
 import WorldMap from "./WorldMap";
 import NotFound from "./NotFound";
 import Homepage from "./Homepage";
 import Level from "./Level";
 import Home from "../icons/home";
 import LevelsIcon from "../icons/levels";
-import { AppContext, initialState, updateState } from "../logic/state";
+import { AppContext, useStateReducer } from "../logic/state";
 
 import "../styles/app.css";
 
 export function App() {
-  const context: AppContext = useReducer(
-    (state, action) => produce(state, (draft) => updateState(draft, action)),
-    initialState,
-  );
+  const context = useStateReducer();
 
   return (
     <AppContext.Provider value={context}>

src/logic/state.ts

@@ -1,4 +1,4 @@
-import { useContext } from "preact/hooks";
+import { useContext, useRef, useState } from "preact/hooks";
 import { createContext } from "preact";
 import { ADT } from "ts-adt";
 
@@ -26,10 +26,21 @@ export const AppContext = createContext<AppContext>([
 
 export const useAppState = () => useContext(AppContext);
 
-export const updateState = (
-  state: AppState,
-  action: AppAction,
-): AppState | void => {
+const saveState = (state: AppState) => {
+  localStorage.setItem("state", JSON.stringify(state));
+};
+
+function loadState(): AppState {
+  const savedState = localStorage.getItem("state");
+  const parsedSavedState = savedState === null ? {} : JSON.parse(savedState);
+
+  return {
+    completed: 0,
+    ...parsedSavedState,
+  };
+}
+
+const updateState = (state: AppState, action: AppAction): AppState => {
   switch (action._type) {
     case "loadState":
       return loadState();
@@ -39,18 +50,22 @@ export const updateState = (
   }
 
   saveState(state);
-};
 
-const saveState = (state: AppState) => {
-  localStorage.setItem("state", JSON.stringify(state));
+  return state;
 };
 
-function loadState(): AppState {
-  const savedState = localStorage.getItem("state");
-  const parsedSavedState = savedState === null ? {} : JSON.parse(savedState);
+// Similar to using `useReducer` directly, but lets our `updateState`
+// function mutate the state directly instead of having to copy each time.
+export const useStateReducer = (): AppContext => {
+  const state = useRef(initialState);
 
-  return {
-    completed: 0,
-    ...parsedSavedState,
+  // A simple way for us to manually trigger updates
+  const [gen, setGen] = useState(0);
+
+  const sendAction = (action: AppAction) => {
+    state.current = updateState(state.current, action);
+    setGen(gen + 1);
   };
-}
+
+  return [state.current, sendAction];
+};