Prep for initial release (#2)

Author: KyleAMathews

.changeset/tasty-results-doubt.md

@@ -0,0 +1,6 @@
+---
+"@tanstack/react-optimistic": patch
+"@tanstack/optimistic": patch
+---
+
+Initial release

README.md

@@ -67,6 +67,7 @@ const { data, insert, update, delete: deleteFn } = useCollection({
 ```
 
 Returns:
+
 - `data`: An array of all items in the collection
 - `state`: A Map containing all items in the collection with their internal keys
 - `insert`: Function to add new items to the collection
@@ -87,6 +88,7 @@ await preloadCollection({
 ```
 
 Features:
+
 1. Returns a promise that resolves when the first sync commit is complete
 2. Shares the same collection instance with `useCollection`
 3. Handles already-loaded collections by returning immediately
@@ -98,16 +100,16 @@ Features:
 
 ```typescript
 // Insert a single item
-insert({ text: "Buy groceries", completed: false });
+insert({ text: "Buy groceries", completed: false })
 
 // Insert multiple items
 insert([
   { text: "Buy groceries", completed: false },
-  { text: "Walk dog", completed: false }
-]);
+  { text: "Walk dog", completed: false },
+])
 
 // Insert with custom key
-insert({ text: "Buy groceries" }, { key: "grocery-task" });
+insert({ text: "Buy groceries" }, { key: "grocery-task" })
 ```
 
 #### Update
@@ -116,30 +118,34 @@ We use a proxy to capture updates as immutable draft optimistic updates.
 
 ```typescript
 // Update a single item
-update(todo, (draft) => { draft.completed = true });
+update(todo, (draft) => {
+  draft.completed = true
+})
 
 // Update multiple items
 update([todo1, todo2], (drafts) => {
-  drafts.forEach(draft => { draft.completed = true });
-});
+  drafts.forEach((draft) => {
+    draft.completed = true
+  })
+})
 
 // Update with metadata
-update(todo, { metadata: { reason: "user update" } }, (draft) => { 
-  draft.text = "Updated text";
-});
+update(todo, { metadata: { reason: "user update" } }, (draft) => {
+  draft.text = "Updated text"
+})
 ```
 
 #### Delete
 
 ```typescript
 // Delete a single item
-delete(todo);
+delete todo
 
 // Delete multiple items
-delete([todo1, todo2]);
+delete [todo1, todo2]
 
 // Delete with metadata
-delete(todo, { metadata: { reason: "completed" } });
+delete (todo, { metadata: { reason: "completed" } })
 ```
 
 ### Schema Validation
@@ -148,11 +154,15 @@ Collections can optionally include a [standard schema](https://github.com/standa
 
 ```typescript
 const todoCollection = useCollection({
-  id: 'todos',
-  sync: { /* sync config */ },
-  mutationFn: { /* mutation functions */ },
-  schema: todoSchema // Standard schema interface
-});
+  id: "todos",
+  sync: {
+    /* sync config */
+  },
+  mutationFn: {
+    /* mutation functions */
+  },
+  schema: todoSchema, // Standard schema interface
+})
 ```
 
 ## Transaction Management
@@ -163,6 +173,7 @@ The library includes a robust transaction management system:
 - `TransactionStore`: Provides persistent storage for transactions using IndexedDB
 
 Transactions progress through several states:
+
 1. `pending`: Initial state when a transaction is created
 2. `persisting`: Transaction is being persisted to the backend
 3. `completed`: Transaction has been successfully persisted
@@ -241,31 +252,31 @@ export async function loader() {
 // Example usage in a component
 function TodoList() {
   const { data, insert, update, delete: remove } = useCollection(todosConfig);
-  
+
   const addTodo = () => {
     insert({ title: 'New todo', completed: false });
   };
-  
+
   const toggleTodo = (todo) => {
     update(todo, (draft) => {
       draft.completed = !draft.completed;
     });
   };
-  
+
   const removeTodo = (todo) => {
     remove(todo);
   };
-  
+
   return (
     <div>
       <button onClick={addTodo}>Add Todo</button>
       <ul>
         {data.map(todo => (
           <li key={todo.id}>
-            <input 
-              type="checkbox" 
-              checked={todo.completed} 
-              onChange={() => toggleTodo(todo)} 
+            <input
+              type="checkbox"
+              checked={todo.completed}
+              onChange={() => toggleTodo(todo)}
             />
             {todo.title}
             <button onClick={() => removeTodo(todo)}>Delete</button>

todo-app/README.md renamed to examples/react/todo/README.md

@@ -3,10 +3,10 @@
 ## How to run
 
 - Install packages
-`pnpm install`
+  `pnpm install`
 
 - Start dev server & Docker containers
-`cd todo-app & pnpm dev`
+  `pnpm dev`
 
 - Run db migrations
-`cd todo-app & pnpm db:push`
+  `pnpm db:push`

todo-app/docker-compose.yml renamed to examples/react/todo/docker-compose.yml

@@ -1,4 +1,4 @@
-version: '3.8'
+version: "3.8"
 services:
   postgres:
     image: postgres:17-alpine

todo-app/drizzle.config.ts renamed to examples/react/todo/drizzle.config.ts

@@ -62,4 +62,4 @@
     "schemas": {},
     "tables": {}
   }
-}
+}

todo-app/drizzle/0000_whole_sprite.sql renamed to examples/react/todo/drizzle/0000_whole_sprite.sql

@@ -48,9 +48,7 @@
         "config_key_unique": {
           "name": "config_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "key"
-          ]
+          "columns": ["key"]
         }
       },
       "policies": {},
@@ -115,4 +113,4 @@
     "schemas": {},
     "tables": {}
   }
-}
+}

todo-app/drizzle/0001_sturdy_titania.sql renamed to examples/react/todo/drizzle/0001_sturdy_titania.sql

@@ -47,9 +47,7 @@
       "uniqueConstraints": {
         "config_key_unique": {
           "name": "config_key_unique",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "nullsNotDistinct": false
         }
       },
@@ -115,4 +113,4 @@
     "schemas": {},
     "tables": {}
   }
-}
+}

todo-app/drizzle/0002_update_timestamps_trigger.sql renamed to examples/react/todo/drizzle/0002_update_timestamps_trigger.sql

@@ -24,4 +24,4 @@
       "breakpoints": true
     }
   ]
-}
+}

todo-app/drizzle/meta/0000_snapshot.json renamed to examples/react/todo/drizzle/meta/0000_snapshot.json

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href="/src/styles.css" rel="stylesheet">
+    <link href="/src/styles.css" rel="stylesheet" />
     <title>TODO App</title>
   </head>
   <body>

todo-app/drizzle/meta/0001_snapshot.json renamed to examples/react/todo/drizzle/meta/0001_snapshot.json

@@ -0,0 +1,52 @@
+{
+  "name": "todo-app",
+  "private": true,
+  "version": "0.0.0",
+  "dependencies": {
+    "@tanstack/react-optimistic": "workspace:*",
+    "cors": "^2.8.5",
+    "drizzle-orm": "^0.40.1",
+    "drizzle-zod": "^0.7.0",
+    "express": "^4.19.2",
+    "postgres": "^3.4.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.17",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.22.0",
+    "@tailwindcss/vite": "^4.0.0-alpha.8",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/node": "^22.13.10",
+    "@types/pg": "^8.11.11",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@typescript-eslint/parser": "^8.26.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "concurrently": "^9.1.2",
+    "dotenv": "^16.3.1",
+    "drizzle-kit": "^0.30.5",
+    "eslint": "^9.22.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "tsx": "^4.6.2",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.2"
+  },
+  "private": true,
+  "scripts": {
+    "api:dev": "tsx watch src/api/server.ts",
+    "build": "tsc -b && vite build",
+    "db:ensure-config": "tsx scripts/ensure-default-config.ts",
+    "db:generate": "drizzle-kit generate",
+    "db:push": "tsx scripts/migrate.ts",
+    "db:studio": "drizzle-kit studio",
+    "dev": "docker-compose up -d && concurrently \"pnpm api:dev\" \"vite\"",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "type": "module"
+}