Cleanup demo

Author: stevensJourney

README.md

@@ -67,7 +67,7 @@ Demo applications are located in the [`demos/`](./demos/) directory. Also see ou
 ### Web
 
 - [demos/react-supabase-todolist](./demos/react-supabase-todolist/README.md): A React to-do list example app using the PowerSync Web SDK and a Supabase backend.
-- [demos/react-supabase-todolist-tanstackdb](./demos/react-supabase-todolist-tanstackdb/README.md): A React to-do list example app using the PowerSync Web SDK and a Supabase backend + TanStackDB collections.
+- [demos/react-supabase-todolist-tanstackdb](./demos/react-supabase-todolist-tanstackdb/README.md): A React to-do list example app using the PowerSync Web SDK and a Supabase backend + [TanStackDB](https://tanstack.com/db/latest) collections.
 - [demos/react-multi-client](./demos/react-multi-client/README.md): A React widget that illustrates how data flows from one PowerSync client to another.
 - [demos/yjs-react-supabase-text-collab](./demos/yjs-react-supabase-text-collab/README.md): A React real-time text editing collaboration example app powered by [Yjs](https://github.com/yjs/yjs) CRDTs and [Tiptap](https://tiptap.dev/), using the PowerSync Web SDK and a Supabase backend.
 - [demos/vue-supabase-todolist](./demos/vue-supabase-todolist/README.md): A Vue to-do list example app using the PowerSync Web SDK and a Supabase backend.

demos/react-supabase-todolist-tanstackdb/README.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-Demo app demonstrating use of the [PowerSync SDK for Web](https://www.npmjs.com/package/@powersync/web) together with Supabase and the PowerSync TanStackDB integration.
+Demo app demonstrating use of the [PowerSync SDK for Web](https://www.npmjs.com/package/@powersync/web) together with Supabase and the PowerSync [TanStackDB](https://tanstack.com/db/latest) integration.
 
 A step-by-step guide on Supabase<>PowerSync integration is available [here](https://docs.powersync.com/integration-guides/supabase-+-powersync).
 

demos/react-supabase-todolist-tanstackdb/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-supabase-todolist",
+  "name": "react-supabase-todolist-tanstackdb",
   "version": "0.0.1",
   "private": true,
   "scripts": {

demos/react-supabase-todolist-tanstackdb/src/app/views/sql-console/page.tsx

@@ -50,6 +50,11 @@ const TableDisplay = React.memo(({ data }: { data: ReadonlyArray<any> }) => {
   );
 });
 
+/**
+ * The page here is as it's named. A SQL console for debug purposes.
+ * We provide SQL access to the PowerSync database.
+ * We cannot use TanStack collections for this page.
+ */
 export default function SQLConsolePage() {
   const inputRef = React.useRef<HTMLInputElement>();
   const [query, setQuery] = React.useState(DEFAULT_QUERY);

demos/react-supabase-todolist-tanstackdb/src/app/views/todo-lists/edit/page.tsx

@@ -21,11 +21,6 @@ import { eq, useLiveQuery } from '@tanstack/react-db';
 import React, { Suspense } from 'react';
 import { useParams } from 'react-router-dom';
 
-/**
- * useSearchParams causes the entire element to fall back to client side rendering
- * This is exposed as a separate React component in order to suspend its render
- * and allow the root page to render on the server.
- */
 const TodoEditSection = () => {
   const supabase = useSupabase();
   const { id: listID } = useParams();

demos/react-supabase-todolist-tanstackdb/src/library/powersync/ListsSchema.ts

@@ -2,6 +2,9 @@ import { column, Table } from '@powersync/web';
 import { z } from 'zod';
 import { stringToDate } from './zod-helpers';
 
+/**
+ * The PowerSync schema for the todos table.
+ */
 export const LISTS_TABLE_DEFINITION = new Table({
   created_at: column.text,
   name: column.text,
@@ -10,6 +13,7 @@ export const LISTS_TABLE_DEFINITION = new Table({
 
 /**
  * Extends the PowerSync schema with required fields and boolean/Date transforms.
+ * This requires stricter validations for inputs (used for insert, update, etc.)
  */
 export const ListsSchema = z.object({
   id: z.string(),
@@ -18,6 +22,11 @@ export const ListsSchema = z.object({
   owner_id: z.string()
 });
 
+/**
+ * We're using an input type which is different from the SQLite table type.
+ * We require this schema in order to deserialize incoming data from the database.
+ * This is not required if SQLite types are used as the input type.
+ */
 export const ListsDeserializationSchema = z.object({
   ...ListsSchema.shape,
   created_at: stringToDate

demos/react-supabase-todolist-tanstackdb/src/library/powersync/TodosSchema.ts

@@ -2,6 +2,9 @@ import { column, Table } from '@powersync/web';
 import { z } from 'zod';
 import { nullableStringToDate, numberToBoolean, stringToDate } from './zod-helpers';
 
+/**
+ * The PowerSync schema for the todos table.
+ */
 export const TODOS_TABLE_DEFINITION = new Table(
   {
     list_id: column.text,
@@ -17,6 +20,7 @@ export const TODOS_TABLE_DEFINITION = new Table(
 
 /**
  * Extends the PowerSync schema with required fields and boolean/Date transforms.
+ * This requires stricter validations for inputs (used for insert, update, etc.)
  */
 export const TodosSchema = z.object({
   id: z.string(),
@@ -29,6 +33,11 @@ export const TodosSchema = z.object({
   completed: z.boolean()
 });
 
+/**
+ * We're using an input type which is different from the SQLite table type.
+ * We require this schema in order to deserialize incoming data from the database.
+ * This is not required if SQLite types are used as the input type.
+ */
 export const TodosDeserializationSchema = z.object({
   ...TodosSchema.shape,
   created_at: stringToDate,