@symbo.ls/sdk 3.1.2 → 3.2.3

package/src/services/SocketService.js

@@ -1,4 +1,11 @@
-import { BaseService } from './BaseService'
+import { connect, send, disconnect } from '@symbo.ls/socket/client.js'
+import { BaseService } from './BaseService.js'
+
+import * as utils from '@domql/utils'
+import { router } from '@symbo.ls/router'
+import environment from '../config/environment.js'
+
+const { deepStringify, deepDestringify, isString } = utils.default || utils
 
 export class SocketService extends BaseService {
   constructor (config) {
@@ -8,14 +15,31 @@ export class SocketService extends BaseService {
     this._maxReconnectAttempts = config?.maxReconnectAttempts || 5
     this._reconnectDelay = config?.reconnectDelay || 1000
     this._handlers = new Map()
+    this._sessionId = Math.random()
+
+    this._ignoreSync = [
+      'userId',
+      'username',
+      'usersName',
+      'email',
+      'projects',
+      'feedbacks',
+      'userRoles',
+      'loading',
+      'appKey',
+      'projectName',
+      'followingUser',
+      'activeProject',
+      'user',
+      'sessionId',
+      'clients'
+    ]
   }
 
-  async init ({ context, options }) {
+  init () {
     try {
-      this._context = context
-      this._options = options
-      const { authToken } = context
-      const { socketUrl } = context.socket || {}
+      const { _context, _options } = this
+      const socketUrl = environment.socketUrl || _options.socketUrl
 
       if (!socketUrl) {
         throw new Error('Socket URL is required')
@@ -24,12 +48,11 @@ export class SocketService extends BaseService {
       this._info = {
         config: {
           url: socketUrl,
-          hasToken: Boolean(authToken),
+          hasToken: Boolean(_context.authToken),
           status: 'initializing'
         }
       }
 
-      await this.connect()
       this._setReady()
     } catch (error) {
       this._setError(error)
@@ -39,93 +62,233 @@ export class SocketService extends BaseService {
 
   connect () {
     try {
-      const { socketUrl, authToken } = this._context.socket || {}
-
-      this._socket = new window.WebSocket(socketUrl)
+      // Check if already connected or connecting
+      if (
+        this._socket &&
+        ['connected', 'connecting'].includes(this._info?.config?.status)
+      ) {
+        console.warn(
+          'Socket connection already exists:',
+          this._info?.config?.status
+        )
+        return true
+      }
 
-      this._socket.onopen = () => {
-        this._reconnectAttempts = 0
-        this._updateStatus('connected')
+      const { _context } = this
 
-        // Authenticate if token available
-        if (authToken) {
-          this.send('auth', { token: authToken })
-        }
+      if (!_context.appKey) {
+        throw new Error('App key is required')
       }
 
-      this._socket.onclose = () => {
-        this._updateStatus('disconnected')
-        this._handleReconnect()
+      // Update status to connecting before attempting connection
+      this._updateStatus('connecting')
+
+      const config = {
+        source: 'platform',
+        userId: _context.user?.id,
+        socketUrl: this._info.config.url,
+        location: window.location.host,
+        // onConnect: () => {
+        //   console.log('waz')
+        // },
+        onChange: this._handleMessage.bind(this),
+        sessionId: this._sessionId,
+        usersName: _context.user?.name,
+        route: window.location.pathname,
+        onDisconnect: this._handleDisconnect.bind(this)
       }
 
-      this._socket.onerror = error => {
-        this._updateStatus('error')
-        this._setError(error)
+      // If a previous socket exists but wasn't properly cleaned up, destroy it
+      if (this._socket) {
+        this.destroy()
       }
 
-      this._socket.onmessage = event => {
-        this._handleMessage(event.data)
+      this._socket = connect(_context.appKey, config)
+      this._updateStatus('connected')
+
+      if (environment.isDevelopment) {
+        console.log('Socket connection established:', {
+          appKey: _context.appKey,
+          userId: _context.user?.id,
+          sessionId: this._sessionId,
+          url: this._info.config.url
+        })
       }
+
+      return true
     } catch (error) {
+      this._updateStatus('failed')
+      console.error('Socket connection failed:', error)
       throw new Error(`Socket connection failed: ${error.message}`)
     }
   }
 
-  // Send message to socket server
-  send (type, data) {
+  send (type, data, opts = {}) {
     this._requireReady()
 
-    if (!this._socket || this._socket.readyState !== window.WebSocket.OPEN) {
+    if (!this._socket) {
       throw new Error('Socket is not connected')
     }
 
-    this._socket.send(JSON.stringify({ type, data }))
-  }
-
-  // Subscribe to socket events
-  subscribe (type, handler) {
-    if (!this._handlers.has(type)) {
-      this._handlers.set(type, new Set())
+    const payload = {
+      sessionId: this._sessionId,
+      userId: this._context.user?.id,
+      usersName: this._context.user?.name,
+      ...data
     }
 
-    this._handlers.get(type).add(handler)
+    send.call(
+      this._socket,
+      type,
+      opts.useDeepStringify ? deepStringify(payload) : payload
+    )
+  }
+
+  _handleMessage (event, data) {
+    try {
+      const d = isString(data) ? deepDestringify(JSON.parse(data)) : data
+      if (this._sessionId === d.sessionId) {
+        return
+      }
 
-    return () => {
-      const handlers = this._handlers.get(type)
+      const handlers = this._handlers.get(event)
       if (handlers) {
-        handlers.delete(handler)
-        if (handlers.size === 0) {
-          this._handlers.delete(type)
-        }
+        handlers.forEach(handler => handler(d))
       }
+
+      // Handle specific events
+      switch (event) {
+        case 'change':
+          this._handleChangeEvent(d)
+          break
+        case 'clients':
+          this._handleClientsEvent(d)
+          break
+        case 'route':
+          this._handleRouteEvent(d)
+          break
+        default:
+          break
+      }
+    } catch (error) {
+      this._setError(new Error(`Failed to handle message: ${error.message}`))
     }
   }
 
-  subscribeChannel (type, handler) {
-    return this.subscribe(type, handler)
+  _handleChangeEvent (data) {
+    const { type, changes, version } = data
+    if (version) {
+      this._context.state.version = version
+    }
+    if (changes) {
+      window.requestAnimationFrame(async () => {
+        await this._context.state.setPathCollection(changes, {
+          preventReplace: type === 'canvas',
+          preventUpdate: true,
+          fromSocket: true,
+          userId: data.userId,
+          changes
+        })
+      })
+    }
+
+    // monaco updates
+    // if (data.canvas) {
+    //   const { clients } = data.canvas
+    //   const [firstClientKey] = Object.keys(clients)
+    //   const monaco =
+    //     clients && clients[firstClientKey] && clients[firstClientKey].monaco
+    //   if (monaco) {
+    //     const Canvas =
+    //       this._context.element && this._context.element.getCanvas()
+    //     if (Canvas) {
+    //       Canvas.Chosen.EditorPanels.update({}, { forceMonacoUpdate: true })
+    //     }
+    //   }
+    //   return
+    // }
   }
 
-  // Private methods
-  _handleMessage (rawData) {
-    try {
-      const { type, data } = JSON.parse(rawData)
-      const handlers = this._handlers.get(type)
+  _handleClientsEvent (data) {
+    const { root } = this._context.state
 
-      if (handlers) {
-        handlers.forEach(handler => handler(data))
+    root.replace(
+      { clients: data },
+      {
+        fromSocket: true,
+        preventUpdate: true
       }
-    } catch (error) {
-      this._setError(new Error(`Failed to handle message: ${error.message}`))
+    )
+  }
+
+  _handleRouteEvent (data) {
+    const { element } = this._context
+    const { state } = this._context
+
+    if (data.userId && data.type === 'routeChanged') {
+      const isModalOpen = this.getWindow('modal')
+      const isFollowing = state.followingUser === data.userId
+      const isRouteSyncEnabled =
+        element.getUserSettings('presentMode') && data.userId === state.userId
+
+      if ((isFollowing || isRouteSyncEnabled) && !isModalOpen) {
+        router(
+          data.route,
+          element.__ref.root,
+          {},
+          {
+            fromSocket: true,
+            updateStateOptions: {
+              fromSocket: true,
+              preventStateUpdateListener: 1 // !isModalRoute(data.route, element)
+            }
+          }
+        )
+      }
+    } else if (data.reload) {
+      window.location.reload()
+    } else if (data.route && data.type === 'routeForced') {
+      router(
+        data.route,
+        element.__ref.root,
+        {},
+        {
+          fromSocket: true,
+          updateStateOptions: {
+            fromSocket: true
+          }
+        }
+      )
+    } else if (data.componentKey) {
+      if (!element.getData('components')[data.componentKey]) {
+        return
+      }
+      element.activateSelected(data.componentKey)
     }
   }
 
+  _handleDisconnect () {
+    this._updateStatus('disconnected')
+    this._handleReconnect()
+  }
+
   _handleReconnect () {
     if (this._reconnectAttempts < this._maxReconnectAttempts) {
       this._reconnectAttempts++
       this._updateStatus('reconnecting')
 
       setTimeout(() => {
-        this.connect()
+        try {
+          const connected = this.connect()
+          if (connected) {
+            this._reconnectAttempts = 0
+          } else {
+            this._handleReconnect()
+          }
+        } catch (error) {
+          console.error('Reconnection failed:', error)
+          this._handleReconnect()
+        }
       }, this._reconnectDelay * this._reconnectAttempts)
     } else {
       this._updateStatus('failed')
@@ -143,19 +306,24 @@ export class SocketService extends BaseService {
     }
   }
 
-  // Cleanup
   destroy () {
     if (this._socket) {
-      this._socket.close()
+      disconnect.call(this._socket)
       this._socket = null
     }
     this._handlers.clear()
     this._setReady(false)
   }
 
+  reconnect () {
+    this.destroy()
+    this.connect()
+  }
+
   _checkRequiredContext () {
-    const { socket } = this._context
-    return Boolean(socket?.socketUrl && this._socket)
+    return Boolean(
+      this._context?.appKey && this._context?.authToken && this._socket
+    )
   }
 
   isReady () {

package/src/services/index.js

@@ -1,23 +1,16 @@
-import { SymstoryService } from './SymstoryService.js'
+
 import { AuthService } from './AuthService.js'
-import { AIService } from './AIService.js'
-import { SocketService } from './SocketIOService.js'
 import { CoreService } from './CoreService.js'
+import { CollabService } from './CollabService.js'
 
 const createService = (ServiceClass, config) => new ServiceClass(config)
 
 // Export service creators
-export const createSymstoryService = config =>
-  createService(SymstoryService, config)
-
 export const createAuthService = config => createService(AuthService, config)
 
-export const createAIService = config => createService(AIService, config)
-
-export const createSocketService = config =>
-  createService(SocketService, config)
-
 export const createCoreService = config => createService(CoreService, config)
 
-// Export service classes for direct usage
-export { SymstoryService, AuthService, AIService, SocketService, CoreService }
+export const createCollabService = config =>
+  createService(CollabService, config)
+
+export { AuthService, CoreService, CollabService }

package/src/state/RootStateManager.js

@@ -0,0 +1,71 @@
+import * as utils from '@domql/utils'
+import { rootBus } from './rootEventBus.js'
+
+const { isFunction } = utils.default || utils
+
+export class RootStateManager {
+  constructor (rootState) {
+    this._rootState = rootState
+  }
+
+  /**
+   * Apply change tuples to the root state using the built-in setPathCollection
+   * of Symbo.ls APP state tree.
+   *
+   * @param {Array} changes – eg. ['update', ['foo'], 'bar']
+   * @param {Object} opts   – forwarded to setPathCollection
+   */
+  applyChanges (changes = [], opts = {}) {
+    if (!this._rootState || !isFunction(this._rootState.setPathCollection)) {
+      return
+    }
+
+    const result = this._rootState.setPathCollection(changes, {
+      preventUpdate: true,
+      ...opts
+    })
+
+    // Identify library component mutations and notify UI once per batch
+    try {
+      const changedKeys = new Set()
+      changes.forEach(tuple => {
+        const [, path = []] = tuple
+        if (!Array.isArray(path) || !path.length) {return}
+
+        // Direct component value: ['components', key]
+        if (path[0] === 'components' && typeof path[1] === 'string') {
+          changedKeys.add(path[1])
+        }
+
+        // Component schema: ['schema', 'components', key, ...]
+        if (
+          path[0] === 'schema' &&
+          path[1] === 'components' &&
+          typeof path[2] === 'string'
+        ) {
+          changedKeys.add(path[2])
+        }
+      })
+
+      if (changedKeys.size) {
+        console.log('emit components:changed', [...changedKeys])
+        rootBus.emit('components:changed', [...changedKeys])
+      }
+    } catch (err) {
+      // Do not interrupt the main apply flow if notification fails
+      console.error('[RootStateManager] emit components:changed failed', err)
+    }
+
+    return result
+  }
+
+  setVersion (v) {
+    if (this._rootState) {
+      this._rootState.version = v
+    }
+  }
+
+  get root () {
+    return this._rootState
+  }
+}

package/src/state/rootEventBus.js

@@ -0,0 +1,48 @@
+// Ensure we always reuse a single instance even if this file is evaluated
+// multiple times from different bundle copies or with differing specifiers.
+const getGlobalBus = () => {
+  if (globalThis.__SMBLS_ROOT_BUS__) {
+    return globalThis.__SMBLS_ROOT_BUS__
+  }
+
+  const events = {}
+
+  const bus = {
+    on (event, handler) {
+      (events[event] ||= []).push(handler)
+    },
+
+    off (event, handler) {
+      const list = events[event]
+      if (!list) {return}
+      const idx = list.indexOf(handler)
+      if (idx !== -1) {list.splice(idx, 1)}
+    },
+
+    emit (event, payload) {
+      const list = events[event]
+      if (!list || !list.length) {return}
+      // copy to avoid mutation during iteration
+      list.slice().forEach(fn => {
+        try {
+          fn(payload)
+        } catch (err) {
+          console.error('[rootBus] handler error for', event, err)
+        }
+      })
+    }
+  }
+
+  // expose for debugging if needed
+  Object.defineProperty(bus, '_listeners', {
+    value: events,
+    enumerable: false
+  })
+
+  globalThis.__SMBLS_ROOT_BUS__ = bus
+  return bus
+}
+
+export const rootBus = getGlobalBus()
+
+export default rootBus

package/src/utils/CollabClient.js

@@ -0,0 +1,161 @@
+import { io } from 'socket.io-client'
+import * as Y from 'yjs'
+import { IndexeddbPersistence } from 'y-indexeddb'
+import Dexie from 'dexie'
+import { nanoid } from 'nanoid'
+import environment from '../config/environment.js'
+// import gzip from 'gzip-js' // reserved for future compression features
+
+// diff / patch helpers
+import { diffJson, applyOpsToJson } from './jsonDiff.js'
+
+/* eslint-disable no-use-before-define, no-new, no-promise-executor-return */
+
+export class CollabClient {
+  /* public fields */
+  socket = null
+  ydoc = null
+  branch = 'main'
+  live = false
+  projectId = null
+  jwt = null
+
+  /* private state */
+  _buffer = []
+  _flushTimer = null
+  _clientId = nanoid()
+  _outboxStore = null // Dexie table
+  _readyResolve
+  ready = new Promise(res => (this._readyResolve = res))
+
+  constructor ({ jwt, projectId, branch = 'main', live = false }) {
+    Object.assign(this, { jwt, projectId, branch, live })
+
+    /* 1️⃣  create Yjs doc + offline persistence */
+    this.ydoc = new Y.Doc()
+    new IndexeddbPersistence(`${projectId}:${branch}`, this.ydoc)
+
+    /* 2️⃣  init Dexie for outbox */
+    this._outboxStore = createDexieOutbox(`${projectId}:${branch}`)
+
+    /* 3️⃣  WebSocket transport */
+    this.socket = io(environment.socketUrl, {
+      path: '/collab-socket',
+      transports: ['websocket'],
+      auth: { token: jwt, projectId, branch, live },
+      reconnectionAttempts: Infinity,
+      reconnectionDelayMax: 4000
+    })
+
+    /* socket events */
+    this.socket
+      .on('snapshot', this._onSnapshot)
+      .on('ops', this._onOps)
+      .on('commit', this._onCommit)
+      .on('liveMode', flag => { this.live = flag })
+      .on('connect', this._onConnect)
+      .on('error', e => console.warn('[collab] socket error', e))
+
+    /* Track last known JSON representation so we can compute granular diffs. */
+    this._prevJson = this.ydoc.getMap('root').toJSON()
+
+    /* 4️⃣  hook Yjs change listener */
+    this.ydoc.on('afterTransaction', tr => {
+      // Ignore changes that originated from remote patches.
+      if (tr.origin === 'remote') {return}
+
+      const currentJson = this.ydoc.getMap('root').toJSON()
+
+      // Compute minimal diff between previous and current state.
+      const ops = diffJson(this._prevJson, currentJson)
+
+      // Cache new snapshot for next diff calculation.
+      this._prevJson = currentJson
+
+      if (!ops.length) {return}
+      this._queueOps(ops)
+    })
+  }
+
+  /* ---------- public helpers ---------- */
+  toggleLive (flag) { this.socket.emit('toggleLive', Boolean(flag)) }
+  sendCursor (data) { this.socket.emit('cursor', data) }
+  sendPresence (d) { this.socket.emit('presence', d) }
+
+  /* ---------- private handlers ---------- */
+  _onSnapshot = ({ data /* Uint8Array */ }) => {
+    // first paint; trust server compressed payload (≤256 kB)
+    Y.applyUpdate(this.ydoc, Uint8Array.from(data))
+
+    // Store current state as baseline for future diffs.
+    this._prevJson = this.ydoc.getMap('root').toJSON()
+    if (typeof this._readyResolve === 'function') {
+      this._readyResolve()
+      this._readyResolve = null
+    }
+  }
+
+  _onOps = ({ changes }) => {
+    // Apply remote ops
+    applyOpsToJson(changes, this.ydoc)
+
+    // Refresh baseline snapshot so we don't generate redundant diffs for the
+    // just-applied remote changes.
+    this._prevJson = this.ydoc.getMap('root').toJSON()
+  }
+
+  _onCommit = async ({ version }) => {
+    await this._outboxStore.clear()
+    console.info('[collab] committed', version)
+  }
+
+  _onConnect = async () => {
+    // Mark client as ready if we haven't received a snapshot yet
+    if (typeof this._readyResolve === 'function') {
+      this._readyResolve()
+      // Prevent multiple resolutions
+      this._readyResolve = null
+    }
+
+    // flush locally stored ops
+    const queued = await this._outboxStore.toArray()
+    if (queued.length) {
+      this.socket.emit('ops', {
+        changes: queued.flatMap(e => e.ops),
+        ts: Date.now(),
+        clientId: this._clientId
+      })
+      await this._outboxStore.clear()
+    }
+  }
+
+  /* ---------- buffering & debounce ---------- */
+  _queueOps (ops) {
+    this._buffer.push(...ops)
+    this._outboxStore.put({ id: nanoid(), ops })
+
+    if (this.live && this.socket.connected) {
+      this._flushNow()
+    } else {
+      clearTimeout(this._flushTimer)
+      this._flushTimer = setTimeout(() => this._flushNow(), 40)
+    }
+  }
+
+  _flushNow () {
+    if (!this._buffer.length || !this.socket.connected) {return}
+    this.socket.emit('ops', {
+      changes: this._buffer,
+      ts: Date.now(),
+      clientId: this._clientId
+    })
+    this._buffer.length = 0
+  }
+}
+
+/* ---------- Dexie helper ---------- */
+function createDexieOutbox (name) {
+  const db = new Dexie(`collab-${name}`)
+  db.version(1).stores({ outbox: 'id, ops' })
+  return db.table('outbox')
+}