simplify down to a local-only todo list

fix problems with js config

Author: magnetised

lib/mix/tasks/phx.sync.tanstack_db.ex …/mix/tasks/phx.sync.tanstack_db.setup.exlib/mix/tasks/phx.sync.tanstack_db.ex renamed to lib/mix/tasks/phx.sync.tanstack_db.setup.ex lib/mix/tasks/phx.sync.tanstack_db.ex renamed to lib/mix/tasks/phx.sync.tanstack_db.setup.ex

@@ -1,14 +1,14 @@
-defmodule Mix.Tasks.Phx.Sync.TanstackDb.Docs do
+defmodule Mix.Tasks.Phx.Sync.TanstackDb.Setup.Docs do
   @moduledoc false
 
   @spec short_doc() :: String.t()
   def short_doc do
-    "Convert a Phoenix application to a Tanstack DB based frontend"
+    "Convert a Phoenix application to use a Vite + Tanstack DB based frontend"
   end
 
   @spec example() :: String.t()
   def example do
-    "mix phx.sync.tanstack_db"
+    "mix phx.sync.tanstack_db.setup"
   end
 
   @spec long_doc() :: String.t()
@@ -39,7 +39,7 @@ defmodule Mix.Tasks.Phx.Sync.TanstackDb.Docs do
     mix archive.install hex igniter_new
 
     # create a new phoenix application and install phoenix_sync in `embedded` mode
-    mix igniter.new my_app --install phoehix_sync --with phx.new --sync-mode embedded
+    mix igniter.new my_app --install phoenix_sync --with phx.new --sync-mode embedded
 
     # setup my_app to use tanstack db
     #{example()}
@@ -54,7 +54,7 @@ defmodule Mix.Tasks.Phx.Sync.TanstackDb.Docs do
 end
 
 if Code.ensure_loaded?(Igniter) do
-  defmodule Mix.Tasks.Phx.Sync.TanstackDb do
+  defmodule Mix.Tasks.Phx.Sync.TanstackDb.Setup do
     import Igniter.Project.Application, only: [app_name: 1]
 
     @shortdoc "#{__MODULE__.Docs.short_doc()}"
@@ -312,13 +312,12 @@ if Code.ensure_loaded?(Igniter) do
       |> create_new_file("assets/tsconfig.app.json")
       |> create_or_replace_file("assets/tsconfig.json")
       |> create_or_replace_file("assets/tailwind.config.js")
-      |> create_new_file("assets/js/db/auth.ts")
       |> create_new_file("assets/js/db/collections.ts")
-      |> create_new_file("assets/js/db/mutations.ts")
       |> create_new_file("assets/js/db/schema.ts")
       |> create_new_file("assets/js/routes/__root.tsx")
       |> create_new_file("assets/js/routes/index.tsx")
       |> create_new_file("assets/js/routes/about.tsx")
+      |> create_new_file("assets/js/components/todos.tsx")
       |> create_new_file("assets/js/api.ts")
       |> create_new_file("assets/js/app.tsx")
       |> create_or_replace_file("assets/css/app.css")
@@ -375,7 +374,7 @@ if Code.ensure_loaded?(Igniter) do
     end
   end
 else
-  defmodule Mix.Tasks.Phx.Sync.TanstackDb do
+  defmodule Mix.Tasks.Phx.Sync.TanstackDb.Setup do
     @shortdoc "#{__MODULE__.Docs.short_doc()} | Install `igniter` to use"
 
     @moduledoc __MODULE__.Docs.long_doc()

priv/igniter/phx.sync.tanstack_db/assets/css/app.css.eex

@@ -10,3 +10,6 @@
 @custom-variant phx-click-loading (&:where(.phx-click-loading, .phx-click-loading *));
 @custom-variant phx-submit-loading (&:where(.phx-submit-loading, .phx-submit-loading *));
 @custom-variant phx-change-loading (&:where(.phx-change-loading, .phx-change-loading *));
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

priv/igniter/phx.sync.tanstack_db/assets/js/components/todos.tsx.eex

@@ -0,0 +1,39 @@
+import { useLiveQuery, eq } from "@tanstack/react-db";
+import { todoCollection } from "../db/collections";
+
+export function Todos() {
+  const { data: todos } = useLiveQuery((query) =>
+    query.from({ todo: todoCollection }),
+  );
+
+  const toggleTodo = (todo) =>
+    todoCollection.update(todo.id, (draft) => {
+      draft.completed = !todo.completed;
+    });
+
+  return (
+    <ul className="flex flex-col list-none space-y-4">
+      {todos.map((todo) => (
+        <li
+          key={todo.id}
+          className="flex flex-row space-x-2 items-center leading-5"
+        >
+          <input
+            className="block flex-initial rounded-2xl outline-none focus:outline-none"
+            type="checkbox"
+            checked={todo.completed}
+            onChange={() => toggleTodo(todo)}
+            id={`todo-${todo.id}`}
+          />
+          <label
+            className={`block flex-1 ${todo.completed ? "line-through" : ""}`}
+            for={`todo-${todo.id}`}
+          >
+            {todo.title}
+          </label>
+        </li>
+      ))}
+    </ul>
+  );
+}
+

priv/igniter/phx.sync.tanstack_db/assets/js/db/auth.ts.eex

@@ -1,4 +1,4 @@
-import {createCollection, localStorageCollectionOptions,} from '@tanstack/react-db'
+import {createCollection, localOnlyCollectionOptions,} from '@tanstack/react-db'
 import { ingestMutations } from './mutations'
 
 import type { Value } from '@electric-sql/client'
@@ -8,83 +8,23 @@ import type {
   UpdateMutationFn,
   DeleteMutationFn,
 } from '@tanstack/react-db'
-import {authSchema, userSchema,} from './schema'
 
-import type { Auth, User } from './schema'
-
-type CollectionKey = string | number
-
-export const authCollection = createCollection<Auth>(
-  localStorageCollectionOptions({
-    storageKey: 'auth',
-    getKey: (item: Auth) => item.key,
-    onInsert: async () => true,
-    onUpdate: async () => true,
-    onDelete: async () => true,
-    schema: authSchema,
+import { todoSchema } from './schema'
+import type { Todo } from './schema'
+
+
+export const todoCollection = createCollection<Todo>(
+  localOnlyCollectionOptions({
+    getKey: (todo: Todo) => todo.id,
+    schema: todoSchema,
+    initialData: [
+      { id: 1, title: 'Install Phoenix', completed: true },
+      { id: 2, title: 'Run mix phx.sync.tanstack_db.setup', completed: true },
+      { id: 3, title: 'Run the app', completed: true },
+      { id: 4, title: 'Build a to-do app', completed: true },
+      { id: 5, title: 'Convert to an Electric collection backed by Phoenix.Sync', completed: false },
+    ],
   })
 )
 
-const headers = {
-  Authorization: async () => {
-    const auth = authCollection.get('current')
-
-    return auth ? `Bearer ${auth.user_id}` : 'Unauthenticated'
-  },
-}
-
-async function onError(error: Error) {
-  const status =
-    'status' in error && Number.isInteger(error.status)
-    ? error.status as number
-    : undefined
-
-  if (status === 403 && authCollection.has('current')) {
-    await authCollection.delete('current')
-
-    return { headers }
-  }
-
-  if (status === 401) {
-    await new Promise((resolve) => authCollection.subscribeChanges(resolve))
-
-    return { headers }
-  }
-
-  throw error
-}
-
-const parser = {
-  timestamp: (dateStr: string) => {
-    // Timestamps sync in as naive datetime strings with no
-    // timezone info because they're all implicitly UTC.
-    const utcDateStr = dateStr.endsWith('Z') ? dateStr : `${dateStr}Z`
-    const date: Date = new Date(utcDateStr)
-
-    // Cast to `Value`` because we haven't fixed the typing yet
-    // https://github.com/TanStack/db/pull/201
-    return date as unknown as Value
-  },
-}
-
-const baseShapeOptions = {
-  headers,
-  onError,
-  parser,
-}
-
-function operationHandlers<Type extends object>() {
-  return {
-    onInsert: ingestMutations as InsertMutationFn<Type>,
-    onUpdate: ingestMutations as UpdateMutationFn<Type>,
-    onDelete: ingestMutations as DeleteMutationFn<Type>,
-  }
-}
-
-function relativeUrl(path: string) {
-  return `${window.location.origin}${path}`
-}
-
 
-// @ts-ignore
-window.authCollection = authCollection

priv/igniter/phx.sync.tanstack_db/assets/js/db/collections.ts.eex

@@ -1,16 +1,9 @@
 import * as z from 'zod/v4'
 
-
-export const authSchema = z.object({
-  key: z.literal('current'),
-  user_id: z.uuid(),
-})
-
-export const userSchema = z.object({
-  id: z.uuid(),
-  name: z.string()
+export const todoSchema = z.object({
+  id: z.number(),
+  title: z.string(),
+  completed: z.boolean(),
 })
 
-export type Auth = z.infer<typeof authSchema>
-export type User = z.infer<typeof userSchema>
-
+export type Todo = z.infer<typeof todoSchema>

priv/igniter/phx.sync.tanstack_db/assets/js/db/mutations.ts.eex

@@ -1,7 +1,5 @@
 import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
-import { useAuth } from '../db/auth'
-import { authCollection } from '../db/collections'
 
 const RootLayout = () => (
   <>
@@ -22,8 +20,5 @@ const RootLayout = () => (
 
 export const Route = createRootRoute({
   component: RootLayout,
-  loader: async () => {
-    await authCollection.preload()
-  },
 })
 

priv/igniter/phx.sync.tanstack_db/assets/js/db/schema.ts.eex

@@ -1,13 +1,23 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute('/')({
+import { Todos } from "../components/todos";
+
+export const Route = createFileRoute("/")({
   component: Index,
-})
+});
 
 function Index() {
   return (
-    <div className="p-2">
-      <h3>Welcome Home!</h3>
+    <div className="flex justify-center">
+      <div className="w-1/2 space-y-4">
+        <h3 className="m-4 text-3xl text-center text-gray-700">
+          Welcome to the Sync Stack
+        </h3>
+        <div className="bg-white rounded-md p-4 border-2 border-gray-300">
+          <Todos />
+        </div>
+      </div>
     </div>
-  )
+  );
 }
+

priv/igniter/phx.sync.tanstack_db/assets/js/routes/__root.tsx.eex

@@ -1,3 +1,3 @@
 module.exports = {
-  content: ["./js/**/*.js", "../lib/**/*.*ex"],
+  content: ["./js/**/*.{js,jsx,ts,tsx}", "../lib/**/*.*ex"],
 };