Converted provider to typescript

examples/nextjs-example/app/shape-proxy/route.ts

@@ -41,4 +41,4 @@ export async function GET(request: Request) {
     })
   }
   return resp
-}
+}

examples/yjs-provider/app/api/operation/route.ts

@@ -19,33 +19,23 @@ export async function POST(request: Request) {
 }
 
 async function saveOperation(room: string, op: string) {
-  const db = await pool.connect()
-  try {
-    await db.query(
-      `INSERT INTO ydoc_operations (room, op) VALUES ($1, decode($2, 'base64'))`,
-      [room, op]
-    )
-  } finally {
-    db.release()
-  }
+  pool.query(
+    `INSERT INTO ydoc_operations (room, op) VALUES ($1, decode($2, 'base64'))`,
+    [room, op]
+  )
 }
 
 async function saveAwarenessOperation(
   room: string,
   op: string,
   clientId: string
 ) {
-  const db = await pool.connect()
-  try {
-    await db.query(
-      `INSERT INTO ydoc_awareness (room, clientId, op) VALUES ($1, $2, decode($3, 'base64')) 
+  await pool.query(
+    `INSERT INTO ydoc_awareness (room, clientId, op) VALUES ($1, $2, decode($3, 'base64')) 
        ON CONFLICT (clientId, room)
        DO UPDATE SET op = decode($3, 'base64')`,
-      [room, clientId, op]
-    )
-  } finally {
-    db.release()
-  }
+    [room, clientId, op]
+  )
 }
 
 async function getRequestParams(

examples/yjs-provider/app/db.ts

@@ -1,10 +1,12 @@
 import pgPkg from "pg"
 const { Pool } = pgPkg
 
-console.log(`POOLED_DATABASE_URL: ${process.env.POOLED_DATABASE_URL}`)
+const connectionString =
+  process.env.POOLED_DATABASE_URL ||
+  `postgresql://postgres:password@localhost:54321/electric`
 
 const pool = new Pool({
-  connectionString: process.env.POOLED_DATABASE_URL,
+  connectionString,
 })
 
 export { pool }

examples/yjs-provider/app/electric-editor.tsx

@@ -5,18 +5,14 @@ import { useEffect, useRef, useState } from "react"
 import * as Y from "yjs"
 import { yCollab, yUndoManagerKeymap } from "y-codemirror.next"
 import { ElectricProvider } from "./y-electric"
-import { Awareness, applyAwarenessUpdate } from "y-protocols/awareness"
+import { Awareness } from "y-protocols/awareness"
 
 import { EditorState } from "@codemirror/state"
 import { EditorView, basicSetup } from "codemirror"
 import { keymap } from "@codemirror/view"
 import { javascript } from "@codemirror/lang-javascript"
 
 import * as random from "lib0/random"
-import * as decoding from "lib0/decoding"
-
-import { ShapeData } from "./ydoc-shape"
-import { fromBase64 } from "lib0/buffer"
 
 const room = `electric-demo`
 
@@ -31,15 +27,10 @@ const usercolors = [
 
 const userColor = usercolors[random.uint32() % usercolors.length]
 const ydoc = new Y.Doc()
-let network: ElectricProvider | null = null
-
-export default function ElectricEditor({
-  docShape,
-  awarenessShape,
-}: {
-  docShape?: ShapeData
-  awarenessShape?: ShapeData
-}) {
+let network: ElectricProvider | undefined
+let awareness: Awareness | undefined
+
+export default function ElectricEditor() {
   const editor = useRef(null)
 
   const [connect, setConnect] = useState(`connected`)
@@ -59,44 +50,34 @@ export default function ElectricEditor({
       return
     }
 
-    if (typeof window !== `undefined` && network === null) {
-      // initDoc(ydoc, docShape.data)
-      const awareness = new Awareness(ydoc)
-      // initAwareness(awareness, awarenessShape.data)
-
-      const opts = {
-        connect: true,
-        awareness,
-        // resume: {
-        //   operations: docShape.resume,
-        //   awareness: awarenessShape.resume,
-        // },
-      }
-
+    if (typeof window !== `undefined` && !network) {
+      awareness = new Awareness(ydoc)
       network = new ElectricProvider(
-        `${process.env.ELECTRIC_URL || `http://localhost:3000`}`,
+        new URL(`/shape-proxy`, window?.location.origin).href,
         room,
         ydoc,
-        opts
+        {
+          connect: true,
+          awareness,
+        }
       )
+      awareness?.setLocalStateField(`user`, {
+        name: userColor.color,
+        color: userColor.color,
+        colorLight: userColor.light,
+      })
     }
 
     const ytext = ydoc.getText(room)
 
-    network?.awareness.setLocalStateField(`user`, {
-      name: userColor.color,
-      color: userColor.color,
-      colorLight: userColor.light,
-    })
-
     const state = EditorState.create({
       doc: ytext.toString(),
       extensions: [
         keymap.of([...yUndoManagerKeymap]),
         basicSetup,
         javascript(),
         EditorView.lineWrapping,
-        yCollab(ytext, network?.awareness),
+        yCollab(ytext, awareness),
       ],
     })
 
@@ -114,27 +95,10 @@ export default function ElectricEditor({
       </form>
       <p>
         This is a demo of <a href="https://github.com/yjs/yjs">Yjs</a> shared
-        editor synching with {` `}
+        editor syncing with {` `}
         <a href="https://github.com/electric-sql/electric">Electric</a>.
       </p>
       <div ref={editor}></div>
     </div>
   )
 }
-
-const initDoc = (ydoc: Y.Doc, data: string) => {
-  const decoder = decoding.createDecoder(fromBase64(data))
-  decoding.readVarUint(decoder)
-  Y.applyUpdate(ydoc, decoding.readVarUint8Array(decoder), `server`)
-}
-
-const initAwareness = (awareness: Awareness, data: string) => {
-  for (const client of JSON.parse(data)) {
-    const decoder = decoding.createDecoder(fromBase64(client))
-    applyAwarenessUpdate(
-      awareness,
-      decoding.readVarUint8Array(decoder),
-      `server`
-    )
-  }
-}

examples/yjs-provider/app/page.tsx

@@ -2,13 +2,7 @@
 
 import React from "react"
 import ElectricEditor from "./electric-editor"
-import { getAwarenessData, getDocData } from "./ydoc-shape"
 
-const Page = async () => (
-  <ElectricEditor
-  // docShape={await getDocData()}
-  // awarenessShape={await getAwarenessData()}
-  />
-)
+const Page = async () => <ElectricEditor />
 
 export default Page