save

README.md

@@ -47,3 +47,20 @@ This is Jacob's list of cool tech tools that were shown off at some point in tea
 - **[Vitest](https://vitest.dev/):** Vite-based testing framework. Supports TypeScript out of the box.
 - **[shadcn/ui](https://ui.shadcn.com/):** Premade components to copy-paste into your React+TailwindCSS project.
 - **[Greptile](https://greptile.com/):** Give ChatGPT the context of your entire GitHub repository.
+- **[Immer]():** Immutable JavaScript objects with ergonomic & memory efficient copiers.
+
+### JavaScript tips
+
+- Classes get named in PascalCase like Java.
+- Methods get named in camelCase also like Java.
+- Single-export files _usually_ are named after said export exactly.
+- Multi-export files are named in kebab-case after a generic group name that is inclusive of all the symbols.
+- In general, string literals are used for enums instead of number maps. For example it's `doThing("enum-value")` not `doThing(MyEnum.EnumValue)`.
+- Use [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) to find reference docs on JavaScript or Web API builtins.
+- Don't try to put too much in a single file; break things up logically.
+- When using generic names and the auto-import feature of TypeScript's LSP intellisense make sure you pick the right import. Don't accidentally import `Model` from some internal Vite file or `get` from Node.js `http`.
+- Use `const` where possible. It's the most restrictive variable declarator. You can still mutate the underlying object but you can't reassign it.
+- When using React **all `useState()` and other hooks must be unconditionally called**. No `if (false) { useState() }`.
+- Avoid JSX UI logic in statements. Try to keep JSX focused on the big `return <>...</>` block. Prefer multiple micro-components.
+- Avoid redundant JavaDoc-style comments. TypeScript does a lot of the work for you in documenting the important "this is a number" bits.
+- When it makes sense it's OK to use a library. It's very easy to do: just `npm install <library>` and `import { ... } from "<library>"`.

package.json

@@ -9,13 +9,16 @@
     "format": "prettier -w ."
   },
   "devDependencies": {
+    "@radix-ui/react-slot": "^1.0.2",
     "@types/node": "latest",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
     "@vitejs/plugin-react": "^4.2.1",
+    "@xstate/react": "^4.1.1",
     "autoprefixer": "^10.4.18",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "immer": "^10.1.1",
     "lucide-react": "^0.356.0",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
@@ -27,6 +30,6 @@
     "typescript": "latest",
     "vite": "^5.1.6",
     "vitest": "^1.3.1",
-    "@radix-ui/react-slot": "^1.0.2"
+    "xstate": "^5.13.0"
   }
 }