experimental-a2 0.8.0 → 0.9.0

package/examples/playground/app/counter/events/route.ts

@@ -0,0 +1,4 @@
+import { counterServer } from '../server'
+
+export const GET = counterServer.fetch
+export const POST = counterServer.fetch

package/examples/playground/app/counter/model.test.ts

@@ -0,0 +1,36 @@
+import type { ContractEvent } from 'experimental-a2'
+import { describe, expect, it } from 'vitest'
+import { counter, counterReducer } from './model'
+
+type CounterEvents = typeof counter.events
+type CounterEvent<
+  K extends keyof CounterEvents & string = keyof CounterEvents & string,
+> = ContractEvent<CounterEvents, K>
+
+const event = <K extends keyof CounterEvents & string>(
+  index: number,
+  type: K,
+): CounterEvent<K> =>
+  ({
+    id: `event-${index}`,
+    type,
+    payload: {},
+    index,
+    sessionId: 'shared',
+    createdAt: new Date(index * 1_000),
+  }) as CounterEvent<K>
+
+describe('counter reducer', () => {
+  it('folds increments and decrements in log order', () => {
+    const state = [
+      event(1, 'incremented'),
+      event(2, 'incremented'),
+      event(3, 'decremented'),
+    ].reduce(
+      (current, nextEvent) => counterReducer.fold(current, nextEvent),
+      counterReducer.initialState,
+    )
+
+    expect(state).toEqual({ value: 1 })
+  })
+})

package/examples/playground/app/counter/model.ts

@@ -0,0 +1,31 @@
+import * as a2 from 'experimental-a2'
+import { z } from 'zod'
+
+export const counter = a2.contract({
+  name: 'counter',
+  events: {
+    incremented: z.object({}),
+    decremented: z.object({}),
+  },
+})
+
+const counterState = z.object({ value: z.number().int() })
+
+export type CounterState = z.output<typeof counterState>
+
+export const counterReducer = counter
+  .reducer({
+    name: 'counter-value',
+    initialState: { value: 0 },
+    stateSchema: counterState,
+  })
+  .fold((state, event) => {
+    switch (event.type) {
+      case 'incremented':
+        return { value: state.value + 1 }
+      case 'decremented':
+        return { value: state.value - 1 }
+      default:
+        return state
+    }
+  })

package/examples/playground/app/counter/page.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react'
+import { counterReducer } from './model'
+import { counterServer } from './server'
+import { CounterClient } from './counter-client'
+import { SessionProvider } from './session'
+
+export const dynamic = 'force-dynamic'
+
+const COUNTER_SESSION_ID = 'shared'
+
+export default async function CounterPage(): Promise<ReactNode> {
+  const session = counterServer.session(COUNTER_SESSION_ID)
+  const { state, index } = await session.state(counterReducer)
+
+  return (
+    <SessionProvider
+      sessionId={COUNTER_SESSION_ID}
+      initialState={state}
+      initialIndex={index}
+    >
+      <CounterClient />
+    </SessionProvider>
+  )
+}

package/examples/playground/app/counter/server.ts

@@ -0,0 +1,9 @@
+import 'server-only'
+import { createServer } from 'experimental-a2/server'
+import { store } from '@/lib/store'
+import { counter } from './model'
+
+export const counterServer = createServer({
+  ...(store ? { store } : {}),
+  contract: counter,
+})

package/examples/playground/app/counter/session.ts

@@ -0,0 +1,13 @@
+'use client'
+import { createClient } from 'experimental-a2/client'
+import { createReact } from 'experimental-a2/react'
+import { counterReducer } from './model'
+
+export const counterClient = createClient({
+  reducer: counterReducer,
+  api: '/counter/events',
+})
+
+export const { SessionProvider, useSession } = createReact({
+  client: counterClient,
+})

package/examples/playground/app/documents/[documentId]/code-editor.tsx

@@ -0,0 +1,80 @@
+'use client'
+import type { ReactNode } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { basicSetup } from 'codemirror'
+import { Compartment, EditorState } from '@codemirror/state'
+import { EditorView, placeholder } from '@codemirror/view'
+import { yCollab } from 'y-codemirror.next'
+import type { Awareness } from 'y-protocols/awareness'
+import type * as Y from 'yjs'
+
+const bodyPlaceholder =
+  'Start writing. Open this URL in another tab to collaborate…'
+
+export function CodeMirrorEditor({
+  doc,
+  awareness,
+  disabled,
+}: {
+  doc: Y.Doc
+  awareness: Awareness
+  disabled: boolean
+}): ReactNode {
+  const host = useRef<HTMLDivElement>(null)
+  const view = useRef<EditorView | null>(null)
+  const [editable] = useState(() => new Compartment())
+
+  useEffect(() => {
+    if (!host.current) return
+
+    const body = doc.getText('body')
+    const editor = new EditorView({
+      parent: host.current,
+      state: EditorState.create({
+        doc: body.toString(),
+        extensions: [
+          basicSetup,
+          EditorView.lineWrapping,
+          EditorView.contentAttributes.of({
+            'aria-label': 'Document body',
+            spellcheck: 'true',
+          }),
+          placeholder(bodyPlaceholder),
+          // Awareness rides the session's presence plane: cursors and
+          // selections replicate last-writer-wins and expire, while only
+          // document changes enter the durable log.
+          yCollab(body, awareness),
+          // Upstream keeps the caret when the editor blurs (its clear
+          // branch requires focus, so it never runs); an unfocused
+          // editor should show no phantom caret.
+          EditorView.updateListener.of((update) => {
+            if (update.focusChanged && !update.view.hasFocus) {
+              awareness.setLocalStateField('cursor', null)
+            }
+          }),
+          editable.of([
+            EditorState.readOnly.of(disabled),
+            EditorView.editable.of(!disabled),
+          ]),
+        ],
+      }),
+    })
+    view.current = editor
+
+    return () => {
+      editor.destroy()
+      view.current = null
+    }
+  }, [doc, awareness, editable])
+
+  useEffect(() => {
+    view.current?.dispatch({
+      effects: editable.reconfigure([
+        EditorState.readOnly.of(disabled),
+        EditorView.editable.of(!disabled),
+      ]),
+    })
+  }, [disabled, editable])
+
+  return <div className="document-body" ref={host} />
+}