@symbo.ls/sync 3.2.3 → 3.2.8

package/index.js

@@ -1,83 +1,250 @@
-'use strict'
-
 import { router } from '@domql/router'
-import { init } from '@symbo.ls/init'
-import { connect } from '@symbo.ls/socket/client'
-import { window, overwriteShallow } from '@domql/utils'
+import { init } from 'smbls'
+import { io } from 'socket.io-client'
+import { window, overwriteShallow, overwriteDeep } from '@domql/utils'
 import { connectedToSymbols, Notifications } from './SyncNotifications'
 import { Inspect } from './Inspect'
 export { Inspect, Notifications }
 
-const isLocalhost =
-  window && window.location && window.location.host.includes('local')
+const isLocal = process.env.NODE_ENV === 'local'
+
+// ---------------------------------------------
+// Utility helpers to apply ops
 
-const onConnect = (element, state) => {
-  return (socketId, socket) => {
-    // send('components', { COMPONENTS: a(COMPONENTS) })
+const deletePath = (obj, path) => {
+  if (!obj || !Array.isArray(path)) {
+    return
   }
+  path.reduce((acc, v, i, arr) => {
+    if (acc && v in acc) {
+      if (i !== arr.length - 1) {
+        return acc[v]
+      }
+      delete acc[v]
+    }
+    return void 0
+  }, obj)
 }
 
-const onDisconnect = (element, state) => {
-  return () => {}
+const setPath = (obj, path, value, createNestedObjects = false) => {
+  if (!obj || !Array.isArray(path)) {
+    return
+  }
+  path.reduce((acc, v, i, arr) => {
+    if (!acc) {
+      return void 0
+    }
+    if (i !== arr.length - 1) {
+      if (!acc[v] && createNestedObjects) {
+        acc[v] = {}
+      }
+      return acc[v]
+    }
+    acc[v] = value
+    return void 0
+  }, obj)
 }
 
-const onChange = (el, s, ctx) => {
-  return (event, data) => {
-    if (event === 'change') {
-      const obj = JSON.parse(data)
-      if (!obj?.DATA) return
-      const { state, designSystem, pages, components, snippets, functions } =
-        obj.DATA
-      const { utils } = ctx
-
-      if (pages) {
-        // overwriteShallow(ctx.pages, pages)
-        overwriteShallow(ctx.pages, pages)
-      }
+const applyOpsToCtx = (ctx, changes) => {
+  const topLevelChanged = new Set()
+  if (!Array.isArray(changes)) {
+    return topLevelChanged
+  }
+  for (const [action, path, change] of changes) {
+    if (!Array.isArray(path) || !path.length) {
+      continue
+    }
+    topLevelChanged.add(path[0])
+    switch (action) {
+      case 'delete':
+        deletePath(ctx, path)
+        break
+      case 'update':
+      case 'set':
+        setPath(ctx, path, change, true)
+        break
+      default:
+        // Unsupported action – ignore
+        break
+    }
+  }
+  return topLevelChanged
+}
 
-      if (components) {
-        overwriteShallow(ctx.components, components)
-      }
+// ---------------------------------------------
 
-      if (functions) {
-        overwriteShallow(ctx.functions, functions)
-      }
+const fetchServiceToken = async () => {
+  try {
+    const urlBase = isLocal
+      ? 'http://localhost:8080'
+      : 'https://api.symbols.app'
+    const res = await window.fetch(`${urlBase}/service-token`, {
+      method: 'GET'
+    })
 
-      if (snippets) {
-        overwriteShallow(ctx.snippets, snippets)
+    // Attempt to parse JSON first – recent versions return `{ token: "..." }`
+    // Fall back to treating the response as raw text for backward-compatibility.
+    let txt
+    try {
+      const json = await res.clone().json()
+      if (json && typeof json.token === 'string') {
+        return json.token.trim()
       }
+      // If json parsing succeeds but no token field, fall back to text below.
+      txt = await res.text()
+    } catch {
+      // Response is not JSON – treat as plain text token.
+      txt = await res.text()
+    }
+
+    return (txt || '').replace(/\s+/gu, '') || void 0
+  } catch (e) {
+    console.error('[sync] Failed to fetch service-token', e)
+  }
+}
 
-      if (state) {
-        const route = state.route
-        if (route)
-          (utils.router || router)(route.replace('/state', '') || '/', el, {})
-        else if (!(snippets && functions && components && pages))
-          s.update(state)
+const onSnapshot =
+  (el, s, ctx) =>
+  (payload = {}) => {
+    let { data } = payload
+    const { schema } = payload
+    if (!data) {
+      return
+    }
+
+    data = el.call(
+      'deepDestringifyFunctions',
+      data,
+      Array.isArray(data) ? [] : {}
+    )
+
+    // Overwrite high-level objects shallowly so references are preserved
+    Object.entries(data).forEach(([key, val]) => {
+      if (ctx[key] && typeof ctx[key] === 'object') {
+        if (key === 'designSystem') {
+          init(val)
+        } else {
+          overwriteShallow(ctx[key], val)
+        }
+      } else {
+        ctx[key] = val
       }
+    })
+
+    // Optionally make schema available on ctx
+    if (schema) {
+      ctx.schema = schema
+    }
+  }
 
-      if (snippets || functions || components || pages) {
-        const { pathname, search, hash } = ctx.window.location
-        ;(utils.router || router)(pathname + search + hash, el, {})
+const onOps =
+  (el, s, ctx) =>
+  (payload = {}) => {
+    let { changes } = payload
+    if (!changes || !Array.isArray(changes) || !changes.length) {
+      return
+    }
+
+    changes = el.call(
+      'deepDestringifyFunctions',
+      changes,
+      Array.isArray(changes) ? [] : {}
+    )
+
+
+    const changed = applyOpsToCtx(ctx, changes)
+
+    // React to specific top-level changes
+    if (changed.has('state')) {
+      const route = ctx.state?.route
+      if (route) {
+        el.call(
+          'router',
+          route.replace('/state', '') || '/',
+          el.__ref.root,
+          {},
+          { scrollToTop: false }
+        )
+      } else {
+        s.update(ctx.state)
       }
+    }
 
-      if (designSystem) init(designSystem)
+    if (
+      ['pages', 'components', 'snippets', 'functions'].some((k) =>
+        changed.has(k)
+      )
+    ) {
+      const { pathname, search, hash } = ctx.window.location
+      el.call(
+        'router',
+        pathname + search + hash,
+        el.__ref.root,
+        {},
+        { scrollToTop: false }
+      )
     }
 
-    if (ctx.editor.verbose && event === 'clients') {
-      connectedToSymbols(data, el, s)
+    if (changed.has('designSystem')) {
+      init(ctx.designSystem)
     }
   }
-}
 
-export const connectToSocket = (el, s, ctx) => {
-  return connect(ctx.key, {
-    source: isLocalhost ? 'localhost' : 'client',
-    socketUrl: isLocalhost ? 'localhost:8080' : 'api.symbols.app',
-    location: window.location.host,
-    onConnect: onConnect(el, s, ctx),
-    onDisconnect: onDisconnect(el, s, ctx),
-    onChange: onChange(el, s, ctx)
+export const connectToSocket = async (el, s, ctx) => {
+  const token = await fetchServiceToken()
+  if (!token) {
+    console.warn('[sync] No service token – live collaboration disabled')
+    return null
+  }
+
+  const projectKey = ctx.key
+  if (!projectKey) {
+    console.warn(
+      '[sync] ctx.key missing – cannot establish collaborative connection'
+    )
+    return null
+  }
+
+  const socketBaseUrl = isLocal
+    ? 'http://localhost:8080'
+    : 'https://api.symbols.app'
+
+  const socket = io(socketBaseUrl, {
+    path: '/collab-socket',
+    transports: ['websocket'],
+    auth: {
+      token,
+      projectKey,
+      branch: 'main',
+      live: true,
+      clientType: 'platform'
+    },
+    reconnectionAttempts: Infinity,
+    reconnectionDelayMax: 4000
   })
+
+  socket.on('connect', () => {
+    if (ctx.editor?.verbose) {
+      console.info('[sync] Connected to collab socket')
+    }
+  })
+
+  socket.on('snapshot', onSnapshot(el, s, ctx))
+  socket.on('ops', onOps(el, s, ctx))
+
+  socket.on('clients', (data) => {
+    if (ctx.editor?.verbose) {
+      connectedToSymbols(data, el, s)
+    }
+  })
+
+  socket.on('disconnect', (reason) => {
+    if (ctx.editor?.verbose) {
+      console.info('[sync] Disconnected from collab socket', reason)
+    }
+  })
+
+  return socket
 }
 
 export const SyncComponent = {

package/package.json

@@ -1,42 +1,68 @@
 {
   "name": "@symbo.ls/sync",
-  "version": "3.2.3",
-  "main": "index.js",
-  "module": "index.js",
+  "version": "3.2.8",
+  "main": "./index.js",
+  "module": "./index.js",
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "files": [
-    "*.js",
-    "dist"
+    "dist",
+    "*.js"
   ],
   "repository": "https://github.com/symbo-ls/scratch",
   "type": "module",
-  "unpkg": "dist/iife/index.js",
-  "jsdelivr": "dist/iife/index.js",
+  "unpkg": "./dist/iife/index.js",
+  "jsdelivr": "./dist/iife/index.js",
   "exports": {
     ".": {
-      "kalduna": "./index.js",
-      "default": "./dist/cjs/index.js"
+      "import": "./index.js",
+      "require": "./index.js",
+      "browser": "./index.js",
+      "default": "./index.js"
+    },
+    "./client": {
+      "import": "./client.js",
+      "require": "./client.js",
+      "default": "./client.js"
+    },
+    "./server": {
+      "import": "./server.js",
+      "default": "./server.js"
+    },
+    "./*.js": {
+      "import": "./dist/esm/*.js",
+      "require": "./dist/cjs/*.js",
+      "default": "./dist/esm/*.js"
+    },
+    "./*": {
+      "import": "./dist/esm/*.js",
+      "require": "./dist/cjs/*.js",
+      "default": "./dist/esm/*.js"
     }
   },
   "source": "index.js",
   "publishConfig": {},
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild *.js --target=es2017 --format=esm --outdir=dist/esm --loader:.svg=text",
-    "build:cjs": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild *.js --target=node16 --format=cjs --outdir=dist/cjs --loader:.svg=text",
-    "build:iife": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./index.js --target=es2017 --format=iife --outdir=dist/iife --loader:.svg=text --bundle --minify",
-    "build": "npm run build:esm; npm run build:cjs",
-    "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
+    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild *.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:cjs": "cross-env NODE_ENV=$NODE_ENV esbuild *.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:iife": "cross-env NODE_ENV=$NODE_ENV esbuild index.js --bundle --target=es2020 --format=iife --global-name=SmblsSync --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV --external:smbls --external:@domql/* --external:@symbo.ls/* --external:socket.io-client --external:socket.io --external:express --external:css-in-props",
+    "build": "node ../../build/build.js",
+    "prepublish": "npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
     "@domql/router": "^3.2.3",
     "@domql/utils": "^3.2.3",
-    "@symbo.ls/init": "^3.2.3",
     "@symbo.ls/scratch": "^3.2.3",
-    "@symbo.ls/socket": "^3.2.3",
-    "@symbo.ls/uikit": "^3.2.3"
+    "@symbo.ls/uikit": "^3.2.3",
+    "chalk": "^5.4.1",
+    "express": "^4.21.2",
+    "http": "^0.0.1-security",
+    "socket.io": "^4.8.1",
+    "socket.io-client": "^4.8.1"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0"
-  }
+  },
+  "browser": "./dist/iife/index.js",
+  "sideEffects": false
 }

package/server.js

@@ -0,0 +1,102 @@
+#!/usr/bin/env node
+
+import fs from 'fs'
+import chalk from 'chalk'
+import express from 'express'
+import http from 'http'
+import { Server } from 'socket.io'
+import { createRequire } from 'module'
+import * as utils from '@domql/utils'
+const { overwriteDeep } = utils.default || utils
+
+const require = createRequire(import.meta.url) // construct the require method
+const DES_SYS_DEFAULT_FILE = require('./dynamic.json') // Bring in the ability to create the 'require' method
+
+const app = express()
+let io
+
+const debugMsg = chalk.dim(
+  'Use --verbose to debug the error or open the issue at https://github.com/symbo-ls/smbls'
+)
+
+export const updateDynamycFile = (changes, options = {}) => {
+  const { verbose, prettify, verboseCode } = options
+  const file = require('./dynamic.json')
+
+  const newMerge = overwriteDeep(file, changes)
+  const mergeStr = JSON.stringify(newMerge, null, 2)
+  const initPath = `${process.cwd()}/node_modules/@symbo.ls/init/dynamic.json`
+
+  console.log(chalk.dim('\n----------------\n'))
+
+  console.log(chalk.dim('Received update:'))
+  console.log(Object.keys(changes).join(', '))
+  if (verboseCode)
+    console.log(chalk.dim(JSON.stringify(changes, null, prettify ?? 2)))
+
+  try {
+    fs.writeFileSync(initPath, mergeStr)
+    if (verbose) {
+      console.log(chalk.bold.green('\nChanges wrote to the file'))
+    }
+  } catch (e) {
+    console.log('')
+    console.log(chalk.bold.red('Error writing file'))
+    if (verbose) {
+      console.error(e)
+    } else {
+      console.log(debugMsg)
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-vars
+export const sync = (desSysFile = DES_SYS_DEFAULT_FILE, opts = {}) => {
+  const server = http.createServer(app)
+  const { key } = opts
+
+  io = new Server(server, {
+    transports: ['websocket', 'polling', 'flashsocket'],
+    cors: {
+      origin: '*'
+    }
+  })
+
+  app.get('/', (req, res) => {
+    res.end('open')
+  })
+
+  io.on('connection', socket => {
+    socket.join(key)
+    let source
+
+    socket.on('initConnect', options => {
+      const { clientsCount } = io.engine
+      socket.to(key).emit('clientsCount', clientsCount)
+      source = options.source
+      console.log('Connected', key, source)
+      console.log('from', options.location)
+    })
+
+    socket.on('components', (data, options) => {
+      io.to(key).emit('change', data, options)
+    })
+
+    socket.on('route', (data, options) => {
+      io.to(key).emit('route', data, options)
+    })
+
+    socket.on('change', updateDynamycFile)
+
+    // eslint-disable-next-line no-unused-vars
+    socket.on('disconnect', (changes, options) => {
+      const { clientsCount } = io.engine
+      socket.to(key).emit('clientsCount', clientsCount)
+      console.log('Disconnected', key, source)
+    })
+  })
+
+  server.listen(13336, () => {
+    console.log('listening on *:13336')
+  })
+}

package/dist/cjs/package.json

@@ -1,4 +0,0 @@
-{
-  "type": "commonjs",
-  "main": "index.js"
-}