@westopp/windo 0.1.0

package/src/client/bridge.ts

@@ -0,0 +1,124 @@
+// Host-side bridge. Owns the postMessage conversation with the preview iframe:
+// subscribes to preview messages, surfaces the latest state, and exposes the
+// outbound host messages as stable callbacks.
+
+import type { RefObject } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { WindoHostMessage } from '../protocol'
+import { isPreviewMessage, isWindoMessage, WINDO_MSG } from '../protocol'
+import type { WindoContextMeta, WindoEnvState, WindoFieldError, WindoGroup, WindoManifestEntry } from '../types'
+import type { BridgeApi, WindoDescribe, WindoLogRow } from './internal-types'
+
+const MAX_LOGS = 200
+
+export function useWindoBridge(iframeRef: RefObject<HTMLIFrameElement | null>): BridgeApi {
+  const [ready, setReady] = useState(false)
+  const [readyNonce, setReadyNonce] = useState(0)
+  const [title, setTitle] = useState('')
+  const [groups, setGroups] = useState<WindoGroup[]>([])
+  const [contexts, setContexts] = useState<WindoContextMeta[]>([])
+  const [manifest, setManifest] = useState<WindoManifestEntry[]>([])
+  const [describe, setDescribe] = useState<WindoDescribe | null>(null)
+  const [parseErrors, setParseErrors] = useState<WindoFieldError[]>([])
+  const [renderError, setRenderError] = useState<{ message: string; stack?: string } | null>(null)
+  const [logs, setLogs] = useState<WindoLogRow[]>([])
+  const [stateValues, setStateValues] = useState<Record<string, Record<string, unknown>>>({})
+  const [actionDisabled, setActionDisabled] = useState<Record<string, Record<string, boolean>>>({})
+  const seqRef = useRef(0)
+
+  const post = useCallback(
+    (msg: WindoHostMessage) => {
+      iframeRef.current?.contentWindow?.postMessage(msg, '*')
+    },
+    [iframeRef]
+  )
+
+  const handler = useRef((e: MessageEvent) => {
+    // Only the main preview iframe drives this bridge. Variant-gallery cells run
+    // their own preview iframes and post the same message shapes; ignore them so
+    // their logs / describe / errors don't leak into the main panels.
+    if (e.source !== iframeRef.current?.contentWindow) return
+    if (!isWindoMessage(e.data)) return
+    if (!isPreviewMessage(e.data)) return
+    const msg = e.data
+    switch (msg.type) {
+      case 'ready':
+        setReady(true)
+        setReadyNonce(n => n + 1)
+        post({ source: WINDO_MSG, dir: 'host', type: 'request-manifest' })
+        break
+      case 'manifest':
+        setTitle(msg.title)
+        setManifest(msg.entries)
+        setGroups(msg.groups)
+        setContexts(msg.contexts)
+        break
+      case 'describe':
+        setDescribe({
+          id: msg.id,
+          descriptor: msg.descriptor,
+          props: msg.props,
+          variants: msg.variants,
+          defaults: msg.defaults,
+          code: msg.code,
+        })
+        setRenderError(null)
+        break
+      case 'parse-ok':
+        setParseErrors([])
+        setRenderError(null)
+        break
+      case 'parse-error':
+        setParseErrors(msg.errors)
+        break
+      case 'log': {
+        const row: WindoLogRow = { ...msg.entry, seq: seqRef.current++ }
+        setLogs(prev => [...prev, row].slice(-MAX_LOGS))
+        break
+      }
+      case 'state':
+        setStateValues(prev => ({ ...prev, [msg.id]: msg.state }))
+        setActionDisabled(prev => ({ ...prev, [msg.id]: Object.fromEntries(msg.actions.map(a => [a.id, a.disabled])) }))
+        break
+      case 'render-error':
+        setRenderError({ message: msg.message, stack: msg.stack })
+        break
+    }
+  })
+
+  useEffect(() => {
+    const onMessage = (e: MessageEvent) => handler.current(e)
+    window.addEventListener('message', onMessage)
+    return () => window.removeEventListener('message', onMessage)
+  }, [])
+
+  const select = useCallback((id: string) => post({ source: WINDO_MSG, dir: 'host', type: 'select', id }), [post])
+
+  const setProps = useCallback((id: string, json: string) => post({ source: WINDO_MSG, dir: 'host', type: 'set-props', id, json }), [post])
+
+  const setEnv = useCallback((env: WindoEnvState) => post({ source: WINDO_MSG, dir: 'host', type: 'set-env', env }), [post])
+
+  const invokeAction = useCallback((id: string, actionId: string) => post({ source: WINDO_MSG, dir: 'host', type: 'invoke-action', id, actionId }), [post])
+
+  const clearLogs = useCallback(() => setLogs([]), [])
+
+  return {
+    ready,
+    readyNonce,
+    title,
+    groups,
+    contexts,
+    manifest,
+    describe,
+    parseErrors,
+    renderError,
+    logs,
+    clearLogs,
+    stateValues,
+    actionDisabled,
+    select,
+    setProps,
+    setEnv,
+    invokeAction,
+  }
+}