Improvements

electric-sql · Aug 10, 2024 · 64e62a6 · 64e62a6
1 parent 5749451
commit 64e62a6
Show file tree

Hide file tree

Showing 31 changed files with 901 additions and 677 deletions.
diff --git a/examples/nextjs-yjs-codemirror/.eslintignore b/examples/nextjs-yjs-codemirror/.eslintignore
@@ -0,0 +1 @@
+/build/**
diff --git a/examples/yjs-codemirror/.eslintrc.cjs → examples/nextjs-yjs-codemirror/.eslintrc.cjs b/examples/yjs-codemirror/.eslintrc.cjs → examples/nextjs-yjs-codemirror/.eslintrc.cjs
@@ -37,5 +37,6 @@ module.exports = {
     `tsup.config.ts`,
     `vitest.config.ts`,
     `.eslintrc.js`,
+    `**/*.css`,
   ],
 };
diff --git a/examples/nextjs-yjs-codemirror/.gitignore b/examples/nextjs-yjs-codemirror/.gitignore
@@ -0,0 +1,10 @@
+dist
+.env.local
+
+# Turborepo
+.turbo
+
+# next.js
+/.next/
+/out/
+next-env.d.ts
diff --git a/examples/yjs-codemirror/.prettierrc → examples/nextjs-yjs-codemirror/.prettierrc b/examples/yjs-codemirror/.prettierrc → examples/nextjs-yjs-codemirror/.prettierrc
diff --git a/examples/nextjs-yjs-codemirror/README.md b/examples/nextjs-yjs-codemirror/README.md
@@ -0,0 +1,22 @@
+# Basic Remix example
+
+## Setup
+
+1. Make sure you've installed all dependencies for the monorepo and built packages
+
+From the root directory:
+
+- `pnpm i`
+- `pnpm run -r build`
+
+2. Start the docker containers
+
+`pnpm run backend:up`
+
+3. Start the dev server
+
+`pnpm run dev`
+
+4. When done, tear down the backend containers so you can run other examples
+
+`pnpm run backend:down`
diff --git a/examples/nextjs-yjs-codemirror/app/App.css b/examples/nextjs-yjs-codemirror/app/App.css
@@ -0,0 +1,25 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: min(160px, 30vmin);
+  pointer-events: none;
+  margin-top: min(30px, 5vmin);
+  margin-bottom: min(30px, 5vmin);
+}
+
+.App-header {
+  background-color: #1c1e20;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: top;
+  justify-content: top;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
diff --git a/examples/nextjs-yjs-codemirror/app/Example.css b/examples/nextjs-yjs-codemirror/app/Example.css
@@ -0,0 +1,25 @@
+.controls {
+  margin-bottom: 1.5rem;
+}
+
+.button {
+  display: inline-block;
+  line-height: 1.3;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  width: calc(15vw + 100px);
+  margin-right: 0.5rem !important;
+  margin-left: 0.5rem !important;
+  border-radius: 32px;
+  text-shadow: 2px 6px 20px rgba(0, 0, 0, 0.4);
+  box-shadow: rgba(0, 0, 0, 0.5) 1px 2px 8px 0px;
+  background: #1e2123;
+  border: 2px solid #229089;
+  color: #f9fdff;
+  font-size: 16px;
+  font-weight: 500;
+  padding: 10px 18px;
+}
diff --git a/examples/nextjs-yjs-codemirror/app/api/awareness/route.ts b/examples/nextjs-yjs-codemirror/app/api/awareness/route.ts
@@ -0,0 +1,16 @@
+import { db } from "../../db"
+import { NextResponse } from "next/server"
+
+export async function POST(request: Request) {
+  const body = await request.json()
+
+  await db.query(
+    `INSERT INTO ydoc_awareness (client, name, op)
+     VALUES ($1, $2, $3)
+     ON CONFLICT (client, name)
+     DO UPDATE SET op = $3`,
+    [body.client, body.name, body.op]
+  )
+
+  return NextResponse.json({})
+}
diff --git a/examples/nextjs-yjs-codemirror/app/api/operation/route.ts b/examples/nextjs-yjs-codemirror/app/api/operation/route.ts
@@ -0,0 +1,12 @@
+import { db } from "../../db"
+import { NextResponse } from "next/server"
+
+export async function POST(request: Request) {
+  const body = await request.json()
+  await db.query(
+    `INSERT INTO ydoc_updates (name, op)
+    VALUES ($1, $2)`,
+    [body.name, body.op]
+  )
+  return NextResponse.json({})
+}
diff --git a/examples/nextjs-yjs-codemirror/app/db.ts b/examples/nextjs-yjs-codemirror/app/db.ts
@@ -0,0 +1,14 @@
+import pgPkg from "pg"
+const { Client } = pgPkg
+
+const db = new Client({
+  host: `localhost`,
+  port: 54321,
+  password: `password`,
+  user: `postgres`,
+  database: `electric`,
+})
+
+db.connect()
+
+export { db }
diff --git a/examples/nextjs-yjs-codemirror/app/layout.tsx b/examples/nextjs-yjs-codemirror/app/layout.tsx
@@ -0,0 +1,26 @@
+import "./style.css"
+import "./App.css"
+
+export const metadata = {
+  title: `Next.js Forms Example`,
+  description: `Example application with forms and Postgres.`,
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <div className="App">
+          <header className="App-header">
+            <img src="/logo.svg" className="App-logo" alt="logo" />
+            {children}
+          </header>
+        </div>
+      </body>
+    </html>
+  )
+}
diff --git a/examples/nextjs-yjs-codemirror/app/page.tsx b/examples/nextjs-yjs-codemirror/app/page.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import "./Example.css"
+import { useEffect, useRef, useState } from "react"
+
+import * as Y from "yjs"
+import { yCollab, yUndoManagerKeymap } from "y-codemirror.next"
+import { ElectricProvider } from "./y-electric"
+
+import { EditorState, EditorView, basicSetup } from "@codemirror/basic-setup"
+import { keymap } from "@codemirror/view"
+import { javascript } from "@codemirror/lang-javascript"
+
+import * as random from "lib0/random"
+
+const usercolors = [
+  { color: `#30bced`, light: `#30bced33` },
+  { color: `#6eeb83`, light: `#6eeb8333` },
+  { color: `#ffbc42`, light: `#ffbc4233` },
+  { color: `#ecd444`, light: `#ecd44433` },
+  { color: `#ee6352`, light: `#ee635233` },
+  { color: `#9ac2c9`, light: `#9ac2c933` },
+  { color: `#8acb88`, light: `#8acb8833` },
+  { color: `#1be7ff`, light: `#1be7ff33` },
+]
+
+const userColor = usercolors[random.uint32() % usercolors.length]
+
+const theme = EditorView.theme(
+  {
+    ".cm-content": {
+      minWidth: `400px`,
+      textAlign: `left`,
+      backgroundColor: `#223239`,
+    },
+    ".cm-content .cm-gutter": {
+      minHeight: `200px`,
+    },
+  },
+  { dark: true }
+)
+
+const ydoc = new Y.Doc()
+const provider = new ElectricProvider(
+  `http://localhost:3000/`,
+  `electric-demo`,
+  ydoc
+)
+
+export default function Home() {
+  const editor = useRef(null)
+
+  const [connect, setConnect] = useState(`connected`)
+
+  const toggle = () => {
+    if (connect === `connected`) {
+      provider.disconnect()
+      setConnect(`disconnected`)
+    } else {
+      provider.connect()
+      setConnect(`connected`)
+    }
+  }
+
+  useEffect(() => {
+    const ytext = ydoc.getText(`codemirror`)
+
+    provider.awareness.setLocalStateField(`user`, {
+      name: `Anonymous ` + Math.floor(Math.random() * 100),
+      color: userColor.color,
+      colorLight: userColor.light,
+    })
+
+    const state = EditorState.create({
+      doc: ytext.toString(),
+      extensions: [
+        keymap.of([...yUndoManagerKeymap]),
+        basicSetup,
+        javascript(),
+        EditorView.lineWrapping,
+        yCollab(ytext, provider.awareness),
+        theme,
+      ],
+    })
+
+    const view = new EditorView({ state, parent: editor.current ?? undefined })
+
+    return () => {
+      view.destroy()
+      // editor.current.removeEventListener("input", log);
+    }
+  })
+
+  return (
+    <div>
+      <form action={async () => toggle()}>
+        <button type="submit" className="button" name="intent" value="add">
+          {connect}
+        </button>
+      </form>
+      <div className="App-editor" ref={editor}></div>
+    </div>
+  )
+}
diff --git a/examples/nextjs-yjs-codemirror/app/shape-proxy/[...table]/route.ts b/examples/nextjs-yjs-codemirror/app/shape-proxy/[...table]/route.ts
@@ -0,0 +1,29 @@
+export async function GET(
+  request: Request,
+  { params }: { params: { table: string } }
+) {
+  const url = new URL(request.url)
+  const { table } = params
+  const originUrl = new URL(`http://localhost:3000/v1/shape/${table}`)
+  url.searchParams.forEach((value, key) => {
+    originUrl.searchParams.set(key, value)
+  })
+
+  // When proxying long-polling requests, content-encoding & content-length are added
+  // erroneously (saying the body is gzipped when it's not) so we'll just remove
+  // them to avoid content decoding errors in the browser.
+  //
+  // Similar-ish problem to https://github.com/wintercg/fetch/issues/23
+  let resp = await fetch(originUrl.toString())
+  if (resp.headers.get(`content-encoding`)) {
+    const headers = new Headers(resp.headers)
+    headers.delete(`content-encoding`)
+    headers.delete(`content-length`)
+    resp = new Response(resp.body, {
+      status: resp.status,
+      statusText: resp.statusText,
+      headers,
+    })
+  }
+  return resp
+}
diff --git a/examples/nextjs-yjs-codemirror/app/style.css b/examples/nextjs-yjs-codemirror/app/style.css
@@ -0,0 +1,52 @@
+body {
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: #1c1e20;
+  min-width: 360px;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+
+/* YJS awareness */
+
+.remote-caret {
+  position: relative;
+  border-left: 2px solid black;
+  margin-left: -1px;
+  margin-right: -1px;
+  box-sizing: border-box;
+}
+
+.remote-caret>div {
+  position: absolute;
+  top: -1.05em;
+  left: -2px;
+  font-size: .6em;
+  background-color: rgb(250, 129, 0);
+  font-family: serif;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  user-select: none;
+  color: white;
+  padding-left: 2px;
+  padding-right: 2px;
+  z-index: 3;
+  transition: opacity .3s ease-in-out;
+}
+
+.remote-caret.hide-name>div {
+  transition-delay: .7s;
+  opacity: 0;
+}
+
+.remote-caret:hover>div {
+  opacity: 1;
+  transition-delay: 0s;
+}