examples: format.

examples/write-patterns/patterns/1-online-writes/index.tsx

@@ -35,7 +35,7 @@ export default function OnlineWrites() {
     const path = '/todos'
     const data = {
       id: uuidv4(),
-      title: title
+      title: title,
     }
 
     await api.request(path, 'POST', data)
@@ -48,7 +48,7 @@ export default function OnlineWrites() {
 
     const data = {
       ...todo,
-      completed: !todo.completed
+      completed: !todo.completed,
     }
 
     await api.request(path, 'PUT', data)

examples/write-patterns/patterns/2-optimistic-state/index.tsx

@@ -32,7 +32,9 @@ export default function OptimisticState() {
     table: 'todos',
   })
 
-  const sorted = data ? data.sort((a, b) => a.created_at.localeCompare(b.created_at)) : []
+  const sorted = data
+    ? data.sort((a, b) => a.created_at.localeCompare(b.created_at))
+    : []
 
   // Use React's built in `useOptimistic` hook. This provides
   // a mechanism to apply local optimistic state whilst writes
@@ -47,7 +49,9 @@ export default function OptimisticState() {
             : [...syncedTodos, value]
 
         case 'update':
-          return syncedTodos.map((todo) => todo.id === value.id ? value : todo)
+          return syncedTodos.map((todo) =>
+            todo.id === value.id ? value : todo
+          )
 
         case 'delete':
           return syncedTodos.filter((todo) => todo.id !== value.id)
@@ -77,17 +81,25 @@ export default function OptimisticState() {
     const path = '/todos'
     const data = {
       id: uuidv4(),
-      title: title
+      title: title,
     }
 
     startTransition(async () => {
       addOptimisticState({
         operation: 'insert',
-        value: {...data, completed: false, created_at: new Date().toISOString()}
+        value: {
+          ...data,
+          completed: false,
+          created_at: new Date().toISOString(),
+        },
       })
 
       const fetchPromise = api.request(path, 'POST', data)
-      const syncPromise = matchStream(stream, [`insert`], matchBy('id', data.id))
+      const syncPromise = matchStream(
+        stream,
+        ['insert'],
+        matchBy('id', data.id)
+      )
 
       await Promise.all([fetchPromise, syncPromise])
     })
@@ -100,17 +112,21 @@ export default function OptimisticState() {
 
     const data = {
       ...todo,
-      completed: !todo.completed
+      completed: !todo.completed,
     }
 
     startTransition(async () => {
       addOptimisticState({
         operation: 'update',
-        value: data
+        value: data,
       })
 
       const fetchPromise = api.request(path, 'PUT', data)
-      const syncPromise = matchStream(stream, [`update`], matchBy('id', todo.id))
+      const syncPromise = matchStream(
+        stream,
+        ['update'],
+        matchBy('id', todo.id)
+      )
 
       await Promise.all([fetchPromise, syncPromise])
     })
@@ -120,16 +136,20 @@ export default function OptimisticState() {
     event.preventDefault()
 
     const path = `/todos/${todo.id}`
-    const data = {...todo}
+    const data = { ...todo }
 
     startTransition(async () => {
       addOptimisticState({
         operation: 'delete',
-        value: data
+        value: data,
       })
 
       const fetchPromise = api.request(path, 'DELETE')
-      const syncPromise = matchStream(stream, [`delete`], matchBy('id', todo.id))
+      const syncPromise = matchStream(
+        stream,
+        ['delete'],
+        matchBy('id', todo.id)
+      )
 
       await Promise.all([fetchPromise, syncPromise])
     })
@@ -181,4 +201,4 @@ export default function OptimisticState() {
       </form>
     </div>
   )
-}
+}

examples/write-patterns/shared/app/client.ts

@@ -12,24 +12,29 @@ const maxRetries = 32
 const backoffMultiplier = 1.1
 const initialDelayMs = 1_000
 
-async function retryFetch(url: string, options: RequestOptions, retryCount: number) {
+async function retryFetch(
+  url: string,
+  options: RequestOptions,
+  retryCount: number
+) {
   if (retryCount > maxRetries) {
     return
   }
 
   const delay = retryCount * backoffMultiplier * initialDelayMs
 
   return await new Promise((resolve) => {
-    setTimeout(
-      async () => {
-        resolve(await resilientFetch(url, options, retryCount))
-      },
-      delay
-    )
+    setTimeout(async () => {
+      resolve(await resilientFetch(url, options, retryCount))
+    }, delay)
   })
 }
 
-async function resilientFetch(url: string, options: RequestOptions, retryCount: number) {
+async function resilientFetch(
+  url: string,
+  options: RequestOptions,
+  retryCount: number
+) {
   try {
     const response = await fetch(url, options)
 
@@ -39,8 +44,7 @@ async function resilientFetch(url: string, options: RequestOptions, retryCount:
 
     // Could also retry here if you want to be resilient
     // to 4xx and 5xx responses as well as network errors
-  }
-  catch (err) {
+  } catch (err) {
     return await retryFetch(url, options, retryCount + 1)
   }
 }
@@ -62,4 +66,4 @@ async function request(path: string, method: string, data?: object) {
   return await resilientFetch(url, options, 0)
 }
 
-export default { request }
+export default { request }

examples/write-patterns/vite.config.ts

@@ -9,11 +9,9 @@ export default defineConfig({
     VitePWA({
       registerType: 'autoUpdate',
       devOptions: {
-        enabled: true
+        enabled: true,
       },
-      includeAssets: [
-        'shared/app/icons/*'
-      ],
+      includeAssets: ['shared/app/icons/*'],
       manifest: {
         name: 'Write Patterns Example - ElectricSQL ',
         short_name: 'Writes',
@@ -23,15 +21,15 @@ export default defineConfig({
           {
             src: './shared/app/icons/icon-192.png',
             sizes: '192x192',
-            type: 'image/png'
+            type: 'image/png',
           },
           {
             src: './shared/app/icons/icon-512.png',
             sizes: '512x512',
-            type: 'image/png'
-          }
-        ]
-      }
-    })
+            type: 'image/png',
+          },
+        ],
+      },
+    }),
   ],
 })