@symbo.ls/sync 3.1.2 → 3.2.7

package/Inspect.js

@@ -2,7 +2,7 @@
 
 import * as smblsUI from '@symbo.ls/uikit'
 import { isObject, isString, isArray } from '@domql/utils'
-import { send } from '@symbo.ls/socket/client'
+import { send } from './client.js'
 
 function returnStringExtend (_extends) {
   return isString(_extends) ? _extends : isArray(_extends) ? _extends.find(extItem => isString(extItem)) : ''

package/client.js

@@ -0,0 +1,131 @@
+import * as utils from '@domql/utils'
+import io from 'socket.io-client'
+
+const { window, isFunction, isArray } = utils.default || utils
+
+const defautlOpts = {}
+
+let CONNECT_ATTEPT = 0
+const CONNECT_ATTEPT_MAX_ALLOWED = 1
+
+const getIsDev = options => {
+  return (
+    options.development ||
+    (window && window.location && window.location.host.includes('local')) ||
+    ENV === 'testing' ||
+    ENV === 'development'
+  )
+}
+
+const getSocketUrl = (options, isDev) => {
+  const SOCKET_BACKEND_URL = isDev
+    ? 'http://localhost:8080/'
+    : 'https://api.symbols.app/'
+
+  const socketUrls = isArray(options.socketUrl)
+    ? options.socketUrl
+    : [options.socketUrl || SOCKET_BACKEND_URL]
+
+  const primaryUrl = socketUrls[0]
+  const secondaryUrl = socketUrls[1] || 'api.symbols.app'
+
+  return {
+    primaryUrl: primaryUrl || SOCKET_BACKEND_URL,
+    secondaryUrl
+  }
+}
+
+export const connect = (key, options = {}) => {
+  const isDev = getIsDev(options)
+
+  const { primaryUrl, secondaryUrl } = getSocketUrl(options, isDev)
+  const socket = io(primaryUrl || secondaryUrl, {
+    // withCredentials: true
+  })
+
+  socket.on('connect', () => {
+    if (isDev) {
+      console.warn(
+        `Connected to %c${primaryUrl} %c${key} %c${socket.id}`,
+        'font-weight: bold; color: green;',
+        'font-weight: bold;',
+        ''
+      )
+    }
+
+    socket.emit('initConnect', { key, ...options })
+
+    try {
+      if (isFunction(options.onConnect)) {
+        options.onConnect(socket.id, socket)
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  })
+
+  socket.on('connect_error', (err) => {
+    console.log(`event: connect_error | reason: ${err.message}`)
+    try {
+      if (isFunction(options.onError)) {
+        options.onError(err, socket)
+      }
+
+      if (CONNECT_ATTEPT < CONNECT_ATTEPT_MAX_ALLOWED) {
+        CONNECT_ATTEPT++
+
+        socket.disconnect()
+
+        if (utils.isNotProduction()) {
+          console.log(
+            `Could not connect to %c${primaryUrl}%c, reconnecting to %c${
+              secondaryUrl
+            }`,
+            'font-weight: bold; color: red;',
+            '',
+            'font-weight: bold; color: green;'
+          )
+        }
+
+        connect(key, { ...options, socketUrl: secondaryUrl })
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  })
+
+  socket.on('disconnect', (reason) => {
+    console.log(`event: disconnect | reason: ${reason}`)
+    try {
+      if (isFunction(options.onDisconnect)) {
+        options.onDisconnect(reason, socket)
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  })
+
+  socket.onAny((event, ...args) => {
+    if (event === 'connect') {
+      return
+    }
+
+    try {
+      if (isFunction(options.onChange)) {
+        options.onChange(event, args[0], socket)
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  })
+
+  return socket
+}
+
+export function send(event = 'change', changes, options) {
+  this.emit(event, changes, { ...options, ...defautlOpts })
+}
+
+export function disconnect() {
+  this.disconnect()
+}

package/dist/cjs/Inspect.js

@@ -33,7 +33,7 @@ __export(Inspect_exports, {
 module.exports = __toCommonJS(Inspect_exports);
 var smblsUI = __toESM(require("@symbo.ls/uikit"), 1);
 var import_utils = require("@domql/utils");
-var import_client = require("@symbo.ls/socket/client");
+var import_client = require("./client.js");
 function returnStringExtend(_extends) {
   return (0, import_utils.isString)(_extends) ? _extends : (0, import_utils.isArray)(_extends) ? _extends.find((extItem) => (0, import_utils.isString)(extItem)) : "";
 }

package/dist/cjs/client.js

@@ -0,0 +1,130 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var client_exports = {};
+__export(client_exports, {
+  connect: () => connect,
+  disconnect: () => disconnect,
+  send: () => send
+});
+module.exports = __toCommonJS(client_exports);
+var utils = __toESM(require("@domql/utils"), 1);
+var import_socket = __toESM(require("socket.io-client"), 1);
+const { window, isFunction, isArray } = utils.default || utils;
+const defautlOpts = {};
+let CONNECT_ATTEPT = 0;
+const CONNECT_ATTEPT_MAX_ALLOWED = 1;
+const getIsDev = (options) => {
+  return options.development || window && window.location && window.location.host.includes("local") || ENV === "testing" || ENV === "development";
+};
+const getSocketUrl = (options, isDev) => {
+  const SOCKET_BACKEND_URL = isDev ? "http://localhost:8080/" : "https://api.symbols.app/";
+  const socketUrls = isArray(options.socketUrl) ? options.socketUrl : [options.socketUrl || SOCKET_BACKEND_URL];
+  const primaryUrl = socketUrls[0];
+  const secondaryUrl = socketUrls[1] || "api.symbols.app";
+  return {
+    primaryUrl: primaryUrl || SOCKET_BACKEND_URL,
+    secondaryUrl
+  };
+};
+const connect = (key, options = {}) => {
+  const isDev = getIsDev(options);
+  const { primaryUrl, secondaryUrl } = getSocketUrl(options, isDev);
+  const socket = (0, import_socket.default)(primaryUrl || secondaryUrl, {
+    // withCredentials: true
+  });
+  socket.on("connect", () => {
+    if (isDev) {
+      console.warn(
+        `Connected to %c${primaryUrl} %c${key} %c${socket.id}`,
+        "font-weight: bold; color: green;",
+        "font-weight: bold;",
+        ""
+      );
+    }
+    socket.emit("initConnect", { key, ...options });
+    try {
+      if (isFunction(options.onConnect)) {
+        options.onConnect(socket.id, socket);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  });
+  socket.on("connect_error", (err) => {
+    console.log(`event: connect_error | reason: ${err.message}`);
+    try {
+      if (isFunction(options.onError)) {
+        options.onError(err, socket);
+      }
+      if (CONNECT_ATTEPT < CONNECT_ATTEPT_MAX_ALLOWED) {
+        CONNECT_ATTEPT++;
+        socket.disconnect();
+        if (utils.isNotProduction()) {
+          console.log(
+            `Could not connect to %c${primaryUrl}%c, reconnecting to %c${secondaryUrl}`,
+            "font-weight: bold; color: red;",
+            "",
+            "font-weight: bold; color: green;"
+          );
+        }
+        connect(key, { ...options, socketUrl: secondaryUrl });
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  });
+  socket.on("disconnect", (reason) => {
+    console.log(`event: disconnect | reason: ${reason}`);
+    try {
+      if (isFunction(options.onDisconnect)) {
+        options.onDisconnect(reason, socket);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  });
+  socket.onAny((event, ...args) => {
+    if (event === "connect") {
+      return;
+    }
+    try {
+      if (isFunction(options.onChange)) {
+        options.onChange(event, args[0], socket);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  });
+  return socket;
+};
+function send(event = "change", changes, options) {
+  this.emit(event, changes, { ...options, ...defautlOpts });
+}
+function disconnect() {
+  this.disconnect();
+}

package/dist/cjs/index.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -26,69 +25,204 @@ __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_smbls = require("smbls");
+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 onDisconnect = (element, state) => {
-  return () => {
-  };
-};
-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);
+const isLocal = process.env.NODE_ENV === "local";
+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];
       }
-      if (snippets) {
-        (0, import_utils.overwriteShallow)(ctx.snippets, snippets);
+      delete acc[v];
+    }
+    return void 0;
+  }, obj);
+};
+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] = {};
       }
-      if (state) {
-        const route = state.route;
-        if (route) (utils.router || import_router.router)(route.replace("/state", "") || "/", el, {});
-        else if (!(snippets && functions && components && pages)) s.update(state);
+      return acc[v];
+    }
+    acc[v] = value;
+    return void 0;
+  }, obj);
+};
+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;
+    }
+  }
+  return topLevelChanged;
+};
+const fetchServiceToken = async () => {
+  try {
+    const urlBase = isLocal ? "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();
       }
-      if (snippets || functions || components || pages) {
-        const { pathname, search, hash } = ctx.window.location;
-        (utils.router || import_router.router)(pathname + search + hash, el, {});
+      txt = await res.text();
+    } catch {
+      txt = await res.text();
+    }
+    return (txt || "").replace(/\s+/gu, "") || void 0;
+  } catch (e) {
+    console.error("[sync] Failed to fetch service-token", e);
+  }
+};
+const onSnapshot = (el, s, ctx) => (payload = {}) => {
+  let { data } = payload;
+  const { schema } = payload;
+  if (!data) {
+    return;
+  }
+  data = el.call(
+    "deepDestringifyFunctions",
+    data,
+    Array.isArray(data) ? [] : {}
+  );
+  Object.entries(data).forEach(([key, val]) => {
+    if (ctx[key] && typeof ctx[key] === "object") {
+      if (key === "designSystem") {
+        (0, import_smbls.init)(val);
+      } else {
+        (0, import_utils.overwriteShallow)(ctx[key], val);
       }
-      if (designSystem) (0, import_init.init)(designSystem);
+    } else {
+      ctx[key] = val;
     }
-    if (ctx.editor.verbose && event === "clients") {
-      (0, import_SyncNotifications.connectedToSymbols)(data, el, s);
+  });
+  if (schema) {
+    ctx.schema = schema;
+  }
+};
+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);
+  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 (["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 (changed.has("designSystem")) {
+    (0, import_smbls.init)(ctx.designSystem);
+  }
 };
-const connectToSocket = (el, s, ctx) => {
-  return (0, import_client.connect)(ctx.key, {
-    source: isLocalhost ? "localhost" : "client",
-    socketUrl: isLocalhost ? "localhost:13336" : "socket.symbols.app",
-    location: import_utils.window.location.host,
-    onConnect: onConnect(el, s, ctx),
-    onDisconnect: onDisconnect(el, s, ctx),
-    onChange: onChange(el, s, ctx)
+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 = isLocal ? "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", () => {
+    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) {
+      (0, import_SyncNotifications.connectedToSymbols)(data, el, s);
+    }
+  });
+  socket.on("disconnect", (reason) => {
+    if (ctx.editor?.verbose) {
+      console.info("[sync] Disconnected from collab socket", reason);
+    }
+  });
+  return socket;
 };
 const SyncComponent = {
-  on: {
-    initSync: connectToSocket
-  }
+  onInitSync: connectToSocket
 };
 const DefaultSyncApp = {
   extends: [SyncComponent, import_Inspect.Inspect, import_SyncNotifications.Notifications]

package/dist/cjs/server.js

@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var server_exports = {};
+__export(server_exports, {
+  sync: () => sync,
+  updateDynamycFile: () => updateDynamycFile
+});
+module.exports = __toCommonJS(server_exports);
+var import_fs = __toESM(require("fs"), 1);
+var import_chalk = __toESM(require("chalk"), 1);
+var import_express = __toESM(require("express"), 1);
+var import_http = __toESM(require("http"), 1);
+var import_socket = require("socket.io");
+var import_module = require("module");
+var utils = __toESM(require("@domql/utils"), 1);
+const import_meta = {};
+const { overwriteDeep } = utils.default || utils;
+const require2 = (0, import_module.createRequire)(import_meta.url);
+const DES_SYS_DEFAULT_FILE = require2("./dynamic.json");
+const app = (0, import_express.default)();
+let io;
+const debugMsg = import_chalk.default.dim(
+  "Use --verbose to debug the error or open the issue at https://github.com/symbo-ls/smbls"
+);
+const updateDynamycFile = (changes, options = {}) => {
+  const { verbose, prettify, verboseCode } = options;
+  const file = require2("./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(import_chalk.default.dim("\n----------------\n"));
+  console.log(import_chalk.default.dim("Received update:"));
+  console.log(Object.keys(changes).join(", "));
+  if (verboseCode)
+    console.log(import_chalk.default.dim(JSON.stringify(changes, null, prettify ?? 2)));
+  try {
+    import_fs.default.writeFileSync(initPath, mergeStr);
+    if (verbose) {
+      console.log(import_chalk.default.bold.green("\nChanges wrote to the file"));
+    }
+  } catch (e) {
+    console.log("");
+    console.log(import_chalk.default.bold.red("Error writing file"));
+    if (verbose) {
+      console.error(e);
+    } else {
+      console.log(debugMsg);
+    }
+  }
+};
+const sync = (desSysFile = DES_SYS_DEFAULT_FILE, opts = {}) => {
+  const server = import_http.default.createServer(app);
+  const { key } = opts;
+  io = new import_socket.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);
+    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/esm/Inspect.js

@@ -1,21 +1,6 @@
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 import * as smblsUI from "@symbo.ls/uikit";
 import { isObject, isString, isArray } from "@domql/utils";
-import { send } from "@symbo.ls/socket/client";
+import { send } from "./client.js";
 function returnStringExtend(_extends) {
   return isString(_extends) ? _extends : isArray(_extends) ? _extends.find((extItem) => isString(extItem)) : "";
 }
@@ -139,7 +124,7 @@ const Inspect = {
     onInit: ({ context }) => {
       const { components } = context;
       if (isObject(components)) {
-        const _a = components, { Content } = _a, rest = __objRest(_a, ["Content"]);
+        const { Content, ...rest } = components;
         for (const key in rest) {
           if (smblsUI[key]) continue;
           if (!rest[key].__ref) rest[key].__ref = {};