@symbo.ls/sync 2.29.52 → 2.29.53

package/dist/cjs/index.js

@@ -27,64 +27,151 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_router = require("@domql/router");
 var import_init = require("@symbo.ls/init");
-var import_client = require("@symbo.ls/socket/client");
+var import_socket = require("socket.io-client");
 var import_utils = require("@domql/utils");
 var import_SyncNotifications = require("./SyncNotifications");
 var import_Inspect = require("./Inspect");
 const isLocalhost = import_utils.window && import_utils.window.location && import_utils.window.location.host.includes("local");
-const onConnect = (element, state) => {
-  return (socketId, socket) => {
-  };
+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 == null ? void 0 : obj.DATA)) return;
-      const { state, designSystem, pages, components, snippets, functions } = obj.DATA;
-      const { utils } = ctx;
-      if (pages) {
-        (0, import_utils.overwriteShallow)(ctx.pages, pages);
-      }
-      if (components) {
-        (0, import_utils.overwriteShallow)(ctx.components, components);
-      }
-      if (functions) {
-        (0, import_utils.overwriteShallow)(ctx.functions, functions);
-      }
-      if (snippets) {
-        (0, import_utils.overwriteShallow)(ctx.snippets, snippets);
-      }
-      if (state) {
-        const route = state.route;
-        if (route) el.call("router", route.replace("/state", "") || "/", el, {});
-        else if (!(snippets && functions && components && pages))
-          s.update(state);
-      }
-      if (snippets || functions || components || pages) {
-        const { pathname, search, hash } = ctx.window.location;
-        el.call("router", pathname + search + hash, el, {});
-      }
-      if (designSystem) (0, import_init.init)(designSystem);
+const applyOpsToCtx = (ctx, changes) => {
+  const topLevelChanged = /* @__PURE__ */ 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:
+        break;
     }
-    if (ctx.editor.verbose && event === "clients") {
-      (0, import_SyncNotifications.connectedToSymbols)(data, el, s);
+  }
+  return topLevelChanged;
+};
+const fetchServiceToken = async () => {
+  try {
+    const urlBase = isLocalhost ? "http://localhost:8080" : "https://api.symbols.app";
+    const res = await import_utils.window.fetch(`${urlBase}/service-token`, { method: "GET" });
+    let txt;
+    try {
+      const json = await res.clone().json();
+      if (json && typeof json.token === "string") return json.token.trim();
+      txt = await res.text();
+    } catch {
+      txt = await res.text();
     }
-  };
+    return (txt || "").replace(/\s+/g, "") || void 0;
+  } catch (e) {
+    console.error("[sync] Failed to fetch service-token", e);
+    return void 0;
+  }
 };
-const connectToSocket = (el, s, ctx) => {
-  return (0, import_client.connect)(ctx.key, {
-    source: isLocalhost ? "localhost" : "client",
-    socketUrl: isLocalhost ? "localhost:8080" : "api.symbols.app",
-    location: import_utils.window.location.host,
-    onConnect: onConnect(el, s, ctx),
-    onDisconnect: onDisconnect(el, s, ctx),
-    onChange: onChange(el, s, ctx)
+const onSnapshot = (el, s, ctx) => (payload = {}) => {
+  var _a;
+  const { data, schema } = payload;
+  if (!data) return;
+  Object.entries(data).forEach(([key, val]) => {
+    if (ctx[key] && typeof ctx[key] === "object") {
+      (0, import_utils.overwriteShallow)(ctx[key], val);
+    } else {
+      ctx[key] = val;
+    }
+  });
+  if (schema) ctx.schema = schema;
+  const { pathname, search, hash } = ctx.window.location;
+  (((_a = ctx.utils) == null ? void 0 : _a.router) || import_router.router)(pathname + search + hash, el, {});
+};
+const onOps = (el, s, ctx) => (payload = {}) => {
+  var _a, _b, _c;
+  console.log("onOps", payload);
+  const { changes } = payload;
+  if (!changes || !Array.isArray(changes) || !changes.length) return;
+  const changed = applyOpsToCtx(ctx, changes);
+  if (changed.has("state")) {
+    const route = (_a = ctx.state) == null ? void 0 : _a.route;
+    if (route) {
+      ;
+      (((_b = ctx.utils) == null ? void 0 : _b.router) || import_router.router)(route.replace("/state", "") || "/", el, {});
+    } else {
+      s.update(ctx.state);
+    }
+  }
+  if (["pages", "components", "snippets", "functions"].some((k) => changed.has(k))) {
+    const { pathname, search, hash } = ctx.window.location;
+    (((_c = ctx.utils) == null ? void 0 : _c.router) || import_router.router)(pathname + search + hash, el, {});
+  }
+  if (changed.has("designSystem")) {
+    (0, import_init.init)(ctx.designSystem);
+  }
+};
+const connectToSocket = async (el, s, ctx) => {
+  const token = await fetchServiceToken();
+  if (!token) {
+    console.warn("[sync] No service token \u2013 live collaboration disabled");
+    return null;
+  }
+  const projectKey = ctx.key;
+  if (!projectKey) {
+    console.warn("[sync] ctx.key missing \u2013 cannot establish collaborative connection");
+    return null;
+  }
+  const socketBaseUrl = isLocalhost ? "http://localhost:8080" : "https://api.symbols.app";
+  const socket = (0, import_socket.io)(socketBaseUrl, {
+    path: "/collab-socket",
+    transports: ["websocket"],
+    auth: {
+      token,
+      projectKey,
+      branch: "main",
+      live: true,
+      clientType: "platform"
+    },
+    reconnectionAttempts: Infinity,
+    reconnectionDelayMax: 4e3
+  });
+  socket.on("connect", () => {
+    var _a;
+    if ((_a = ctx.editor) == null ? void 0 : _a.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) => {
+    var _a;
+    if ((_a = ctx.editor) == null ? void 0 : _a.verbose) {
+      (0, import_SyncNotifications.connectedToSymbols)(data, el, s);
+    }
+  });
+  socket.on("disconnect", (reason) => {
+    var _a;
+    if ((_a = ctx.editor) == null ? void 0 : _a.verbose) console.info("[sync] Disconnected from collab socket", reason);
   });
+  return socket;
 };
 const SyncComponent = {
   on: {

package/dist/esm/index.js

@@ -1,63 +1,150 @@
 import { router } from "@domql/router";
 import { init } from "@symbo.ls/init";
-import { connect } from "@symbo.ls/socket/client";
+import { io } from "socket.io-client";
 import { window, overwriteShallow } from "@domql/utils";
 import { connectedToSymbols, Notifications } from "./SyncNotifications";
 import { Inspect } from "./Inspect";
 const isLocalhost = window && window.location && window.location.host.includes("local");
-const onConnect = (element, state) => {
-  return (socketId, socket) => {
-  };
+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 == null ? void 0 : obj.DATA)) return;
-      const { state, designSystem, pages, components, snippets, functions } = obj.DATA;
-      const { utils } = ctx;
-      if (pages) {
-        overwriteShallow(ctx.pages, pages);
-      }
-      if (components) {
-        overwriteShallow(ctx.components, components);
-      }
-      if (functions) {
-        overwriteShallow(ctx.functions, functions);
-      }
-      if (snippets) {
-        overwriteShallow(ctx.snippets, snippets);
-      }
-      if (state) {
-        const route = state.route;
-        if (route) el.call("router", route.replace("/state", "") || "/", el, {});
-        else if (!(snippets && functions && components && pages))
-          s.update(state);
-      }
-      if (snippets || functions || components || pages) {
-        const { pathname, search, hash } = ctx.window.location;
-        el.call("router", pathname + search + hash, el, {});
-      }
-      if (designSystem) init(designSystem);
+const applyOpsToCtx = (ctx, changes) => {
+  const topLevelChanged = /* @__PURE__ */ 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:
+        break;
     }
-    if (ctx.editor.verbose && event === "clients") {
-      connectedToSymbols(data, el, s);
+  }
+  return topLevelChanged;
+};
+const fetchServiceToken = async () => {
+  try {
+    const urlBase = isLocalhost ? "http://localhost:8080" : "https://api.symbols.app";
+    const res = await window.fetch(`${urlBase}/service-token`, { method: "GET" });
+    let txt;
+    try {
+      const json = await res.clone().json();
+      if (json && typeof json.token === "string") return json.token.trim();
+      txt = await res.text();
+    } catch (e) {
+      txt = await res.text();
     }
-  };
+    return (txt || "").replace(/\s+/g, "") || void 0;
+  } catch (e) {
+    console.error("[sync] Failed to fetch service-token", e);
+    return void 0;
+  }
 };
-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)
+const onSnapshot = (el, s, ctx) => (payload = {}) => {
+  var _a;
+  const { data, schema } = payload;
+  if (!data) return;
+  Object.entries(data).forEach(([key, val]) => {
+    if (ctx[key] && typeof ctx[key] === "object") {
+      overwriteShallow(ctx[key], val);
+    } else {
+      ctx[key] = val;
+    }
+  });
+  if (schema) ctx.schema = schema;
+  const { pathname, search, hash } = ctx.window.location;
+  (((_a = ctx.utils) == null ? void 0 : _a.router) || router)(pathname + search + hash, el, {});
+};
+const onOps = (el, s, ctx) => (payload = {}) => {
+  var _a, _b, _c;
+  console.log("onOps", payload);
+  const { changes } = payload;
+  if (!changes || !Array.isArray(changes) || !changes.length) return;
+  const changed = applyOpsToCtx(ctx, changes);
+  if (changed.has("state")) {
+    const route = (_a = ctx.state) == null ? void 0 : _a.route;
+    if (route) {
+      ;
+      (((_b = ctx.utils) == null ? void 0 : _b.router) || router)(route.replace("/state", "") || "/", el, {});
+    } else {
+      s.update(ctx.state);
+    }
+  }
+  if (["pages", "components", "snippets", "functions"].some((k) => changed.has(k))) {
+    const { pathname, search, hash } = ctx.window.location;
+    (((_c = ctx.utils) == null ? void 0 : _c.router) || router)(pathname + search + hash, el, {});
+  }
+  if (changed.has("designSystem")) {
+    init(ctx.designSystem);
+  }
+};
+const connectToSocket = async (el, s, ctx) => {
+  const token = await fetchServiceToken();
+  if (!token) {
+    console.warn("[sync] No service token \u2013 live collaboration disabled");
+    return null;
+  }
+  const projectKey = ctx.key;
+  if (!projectKey) {
+    console.warn("[sync] ctx.key missing \u2013 cannot establish collaborative connection");
+    return null;
+  }
+  const socketBaseUrl = isLocalhost ? "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: 4e3
+  });
+  socket.on("connect", () => {
+    var _a;
+    if ((_a = ctx.editor) == null ? void 0 : _a.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) => {
+    var _a;
+    if ((_a = ctx.editor) == null ? void 0 : _a.verbose) {
+      connectedToSymbols(data, el, s);
+    }
+  });
+  socket.on("disconnect", (reason) => {
+    var _a;
+    if ((_a = ctx.editor) == null ? void 0 : _a.verbose) console.info("[sync] Disconnected from collab socket", reason);
   });
+  return socket;
 };
 const SyncComponent = {
   on: {

package/index.js

@@ -2,7 +2,7 @@
 
 import { router } from '@domql/router'
 import { init } from '@symbo.ls/init'
-import { connect } from '@symbo.ls/socket/client'
+import { io } from 'socket.io-client'
 import { window, overwriteShallow } from '@domql/utils'
 import { connectedToSymbols, Notifications } from './SyncNotifications'
 import { Inspect } from './Inspect'
@@ -11,72 +11,177 @@ export { Inspect, Notifications }
 const isLocalhost =
   window && window.location && window.location.host.includes('local')
 
-const onConnect = (element, state) => {
-  return (socketId, socket) => {
-    // send('components', { COMPONENTS: a(COMPONENTS) })
+// ---------------------------------------------
+// Utility helpers to apply ops
+
+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 undefined
+  }, obj)
+}
+
+const setPath = (obj, path, value, createNestedObjects = false) => {
+  if (!obj || !Array.isArray(path)) return
+  path.reduce((acc, v, i, arr) => {
+    if (!acc) return undefined
+    if (i !== arr.length - 1) {
+      if (!acc[v] && createNestedObjects) acc[v] = {}
+      return acc[v]
+    }
+    acc[v] = value
+    return undefined
+  }, obj)
+}
+
+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
 }
 
-const onDisconnect = (element, state) => {
-  return () => {}
+// ---------------------------------------------
+
+const fetchServiceToken = async () => {
+  try {
+    const urlBase = isLocalhost ? 'http://localhost:8080' : 'https://api.symbols.app'
+    const res = await window.fetch(`${urlBase}/service-token`, { method: 'GET' })
+
+    // 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+/g, '') || undefined
+  } catch (e) {
+    console.error('[sync] Failed to fetch service-token', e)
+    return undefined
+  }
 }
 
-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)
-      }
-
-      if (components) {
-        overwriteShallow(ctx.components, components)
-      }
-
-      if (functions) {
-        overwriteShallow(ctx.functions, functions)
-      }
-
-      if (snippets) {
-        overwriteShallow(ctx.snippets, snippets)
-      }
-
-      if (state) {
-        const route = state.route
-        if (route) el.call('router', route.replace('/state', '') || '/', el, {})
-        else if (!(snippets && functions && components && pages))
-          s.update(state)
-      }
-
-      if (snippets || functions || components || pages) {
-        const { pathname, search, hash } = ctx.window.location
-        el.call('router', pathname + search + hash, el, {})
-      }
-
-      if (designSystem) init(designSystem)
+const onSnapshot = (el, s, ctx) => (payload = {}) => {
+  const { data, schema } = payload
+  if (!data) return
+
+  // Overwrite high-level objects shallowly so references are preserved
+  Object.entries(data).forEach(([key, val]) => {
+    if (ctx[key] && typeof ctx[key] === 'object') {
+      overwriteShallow(ctx[key], val)
+    } else {
+      ctx[key] = val
     }
+  })
 
-    if (ctx.editor.verbose && event === 'clients') {
-      connectedToSymbols(data, el, s)
+  // Optionally make schema available on ctx
+  if (schema) ctx.schema = schema
+
+  // Trigger routing so UI reflects latest data
+  const { pathname, search, hash } = ctx.window.location
+  ;(ctx.utils?.router || router)(pathname + search + hash, el, {})
+}
+
+const onOps = (el, s, ctx) => (payload = {}) => {
+  console.log('onOps', payload)
+  const { changes } = payload
+  if (!changes || !Array.isArray(changes) || !changes.length) return
+
+  const changed = applyOpsToCtx(ctx, changes)
+
+  // React to specific top-level changes
+  if (changed.has('state')) {
+    const route = ctx.state?.route
+    if (route) {
+      ;(ctx.utils?.router || router)(route.replace('/state', '') || '/', el, {})
+    } else {
+      s.update(ctx.state)
     }
   }
+
+  if (['pages', 'components', 'snippets', 'functions'].some(k => changed.has(k))) {
+    const { pathname, search, hash } = ctx.window.location
+    ;(ctx.utils?.router || router)(pathname + search + hash, el, {})
+  }
+
+  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 = isLocalhost ? '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,9 +1,9 @@
 {
   "name": "@symbo.ls/sync",
-  "version": "2.29.52",
+  "version": "2.29.53",
   "main": "index.js",
   "module": "index.js",
-  "gitHead": "f80ad43e99adc71a4f2cbf3725ae339ade7e9a47",
+  "gitHead": "87f9120f580203116585f21335aa97cc7dbfde6d",
   "files": [
     "*.js",
     "dist"
@@ -14,8 +14,8 @@
   "jsdelivr": "dist/iife/index.js",
   "exports": {
     ".": {
-      "kalduna": "./index.js",
-      "default": "./dist/cjs/index.js"
+      "import": "./index.js",
+      "require": "./dist/cjs/index.js"
     }
   },
   "source": "index.js",
@@ -29,12 +29,13 @@
     "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/router": "^2.29.52",
-    "@domql/utils": "^2.29.52",
-    "@symbo.ls/init": "^2.29.52",
-    "@symbo.ls/scratch": "^2.29.52",
-    "@symbo.ls/socket": "^2.29.52",
-    "@symbo.ls/uikit": "^2.29.52"
+    "@domql/router": "^2.29.53",
+    "@domql/utils": "^2.29.53",
+    "@symbo.ls/init": "^2.29.53",
+    "@symbo.ls/scratch": "^2.29.53",
+    "@symbo.ls/socket": "^2.29.53",
+    "@symbo.ls/uikit": "^2.29.53",
+    "socket.io-client": "^4.8.1"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1"