@skopon-cool/form-sdk 0.3.1 → 0.4.0

package/src/runtime/formRuntimeContext.tsx

@@ -7,11 +7,11 @@ import {
   type ReactNode,
 } from 'react'
 import type { FormRuntimeWsClient } from './formRuntimeWs'
-import type { FormRuntimeEventData } from './types'
+import type { FormRuntimeDataPayload, FormRuntimeEventData } from './types'
 
 export interface FormRuntimeContextValue {
   reportEvent: (event: FormRuntimeEventData) => void
-  reportData: (values: Record<string, unknown>) => void
+  reportData: (payload: FormRuntimeDataPayload) => void
   /**
    * 在自动控上下文中执行 fn。若 fn 返回 Promise，depth 保持到 settle，
    * 使异步 submit 内的 reportEvent 仍为 form_auto_control_bac_event。
@@ -37,14 +37,16 @@ const noopRuntime: FormRuntimeContextValue = {
   isAutoControl: () => false,
 }
 
-function omitUndefinedValues(
-  values: Record<string, unknown>,
-): Record<string, unknown> {
-  const out: Record<string, unknown> = {}
-  for (const [key, value] of Object.entries(values)) {
-    if (value !== undefined) out[key] = value
+function sanitizePayload(payload: FormRuntimeDataPayload): FormRuntimeDataPayload {
+  const form_values: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(payload.form_values ?? {})) {
+    if (value !== undefined) form_values[key] = value
+  }
+  return {
+    form_schema: payload.form_schema,
+    form_values,
+    form_change: Array.isArray(payload.form_change) ? [...payload.form_change] : [],
   }
-  return out
 }
 
 export interface FormRuntimeProviderProps {
@@ -76,10 +78,10 @@ export function FormRuntimeProvider({
     ws.send(type, data)
   }, [])
 
-  const reportData = useCallback((values: Record<string, unknown>) => {
+  const reportData = useCallback((payload: FormRuntimeDataPayload) => {
     const ws = clientRef.current
     if (!ws) return
-    ws.send('form_runtime_data', omitUndefinedValues(values))
+    ws.send('form_runtime_data', sanitizePayload(payload) as unknown as Record<string, unknown>)
   }, [])
 
   const runAutoControl = useCallback(<T,>(fn: () => T): T => {

package/src/runtime/formRuntimeWs.ts

@@ -1,16 +1,11 @@
-import type {
-  FormAutoControlEventData,
-  FormRuntimeEnvelope,
-  FormRuntimeOutboundType,
-} from './types'
+import {
+  acquireFormRuntimeConnection,
+  type FormAutoControlHandler,
+  type FormRuntimeConnection,
+} from './formRuntimeConnection'
+import type { FormRuntimeOutboundType } from './types'
 
-const SEND_QUEUE_MAX = 100
-const RECONNECT_MAX_MS = 30_000
-
-export type FormAutoControlHandler = (
-  data: FormAutoControlEventData,
-  envelope: FormRuntimeEnvelope<FormAutoControlEventData>,
-) => void
+export type { FormAutoControlHandler } from './formRuntimeConnection'
 
 export interface FormRuntimeWsClientOptions {
   url: string
@@ -18,46 +13,27 @@ export interface FormRuntimeWsClientOptions {
   onAutoControl?: FormAutoControlHandler
 }
 
+/**
+ * Per-card runtime 会话：绑定 ask_user_message_id，代理到按 URL 的全局单例连接。
+ */
 export class FormRuntimeWsClient {
-  private readonly url: string
   private readonly askUserMessageId: string
-  private readonly onAutoControl?: FormAutoControlHandler
-  private ws: WebSocket | null = null
+  private readonly connection: FormRuntimeConnection
+  private readonly unsubscribe: () => void
   private closed = false
-  private reconnectAttempt = 0
-  private reconnectTimer: ReturnType<typeof setTimeout> | null = null
-  private sendQueue: string[] = []
 
   constructor(options: FormRuntimeWsClientOptions) {
-    this.url = options.url
-    this.askUserMessageId = options.askUserMessageId
-    this.onAutoControl = options.onAutoControl
+    this.askUserMessageId = options.askUserMessageId.trim()
+    this.connection = acquireFormRuntimeConnection(options.url)
+    const handler = options.onAutoControl
+    this.unsubscribe = handler
+      ? this.connection.subscribe(this.askUserMessageId, handler)
+      : () => {}
   }
 
   connect(): void {
-    if (this.closed || typeof WebSocket === 'undefined') return
-    this.clearReconnectTimer()
-    try {
-      const ws = new WebSocket(this.url)
-      this.ws = ws
-      ws.onopen = () => {
-        this.reconnectAttempt = 0
-        this.flushQueue()
-      }
-      ws.onmessage = (event) => {
-        this.handleMessage(event.data)
-      }
-      ws.onclose = () => {
-        this.ws = null
-        this.scheduleReconnect()
-      }
-      ws.onerror = () => {
-        // onclose will follow; avoid noisy logs
-      }
-    } catch (error) {
-      console.warn('[FormRuntimeWs] connect failed', error)
-      this.scheduleReconnect()
-    }
+    if (this.closed) return
+    this.connection.connect()
   }
 
   send(
@@ -65,94 +41,13 @@ export class FormRuntimeWsClient {
     data: Record<string, unknown>,
   ): void {
     if (this.closed) return
-    const payload: FormRuntimeEnvelope = {
-      type,
-      ask_user_message_id: this.askUserMessageId,
-      data,
-    }
-    let serialized: string
-    try {
-      serialized = JSON.stringify(payload)
-    } catch (error) {
-      console.warn('[FormRuntimeWs] serialize failed', error)
-      return
-    }
-    if (this.ws?.readyState === WebSocket.OPEN) {
-      this.ws.send(serialized)
-      return
-    }
-    this.enqueue(serialized)
+    this.connection.send(this.askUserMessageId, type, data)
   }
 
   close(): void {
-    this.closed = true
-    this.clearReconnectTimer()
-    this.sendQueue = []
-    if (this.ws) {
-      this.ws.onopen = null
-      this.ws.onmessage = null
-      this.ws.onclose = null
-      this.ws.onerror = null
-      try {
-        this.ws.close()
-      } catch {
-        // ignore
-      }
-      this.ws = null
-    }
-  }
-
-  private enqueue(serialized: string): void {
-    this.sendQueue.push(serialized)
-    while (this.sendQueue.length > SEND_QUEUE_MAX) {
-      this.sendQueue.shift()
-    }
-  }
-
-  private flushQueue(): void {
-    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return
-    const pending = this.sendQueue
-    this.sendQueue = []
-    for (const item of pending) {
-      this.ws.send(item)
-    }
-  }
-
-  private scheduleReconnect(): void {
     if (this.closed) return
-    this.clearReconnectTimer()
-    const delay = Math.min(
-      RECONNECT_MAX_MS,
-      1000 * 2 ** Math.min(this.reconnectAttempt, 5),
-    )
-    this.reconnectAttempt += 1
-    this.reconnectTimer = setTimeout(() => {
-      this.reconnectTimer = null
-      this.connect()
-    }, delay)
-  }
-
-  private clearReconnectTimer(): void {
-    if (this.reconnectTimer != null) {
-      clearTimeout(this.reconnectTimer)
-      this.reconnectTimer = null
-    }
-  }
-
-  private handleMessage(raw: unknown): void {
-    if (typeof raw !== 'string') return
-    let parsed: unknown
-    try {
-      parsed = JSON.parse(raw)
-    } catch {
-      return
-    }
-    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return
-    const envelope = parsed as FormRuntimeEnvelope<FormAutoControlEventData>
-    if (envelope.type !== 'form_auto_control_event') return
-    if (String(envelope.ask_user_message_id ?? '') !== this.askUserMessageId) return
-    const data = envelope.data
-    if (!data || typeof data !== 'object' || Array.isArray(data)) return
-    this.onAutoControl?.(data, envelope)
+    this.closed = true
+    this.unsubscribe()
+    this.connection.release()
   }
 }

package/src/runtime/types.ts

@@ -24,3 +24,15 @@ export interface FormRuntimeEnvelope<T = Record<string, unknown>> {
   ask_user_message_id: string
   data: T
 }
+
+/** form_runtime_data 的 data 载荷（Init / Refresh / Submit）。 */
+export interface FormRuntimeDataPayload {
+  form_schema: {
+    title?: string
+    description?: string
+    blocks: unknown[]
+  }
+  form_values: Record<string, unknown>
+  /** 本次被更新的字段名；Init/Submit 为空数组。 */
+  form_change: string[]
+}