@symbo.ls/sync 3.2.3 → 3.2.8

package/dist/esm/client.js

@@ -0,0 +1,101 @@
+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
+  };
+};
+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;
+};
+function send(event = "change", changes, options) {
+  this.emit(event, changes, { ...options, ...defautlOpts });
+}
+function disconnect() {
+  this.disconnect();
+}
+export {
+  connect,
+  disconnect,
+  send
+};

package/dist/esm/index.js

@@ -1,64 +1,199 @@
 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";
-const isLocalhost = window && window.location && 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) {
-        overwriteShallow(ctx.pages, pages);
-      }
-      if (components) {
-        overwriteShallow(ctx.components, components);
+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 (functions) {
-        overwriteShallow(ctx.functions, functions);
-      }
-      if (snippets) {
-        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 || 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 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 || 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") {
+        init(val);
+      } else {
+        overwriteShallow(ctx[key], val);
       }
-      if (designSystem) init(designSystem);
+    } else {
+      ctx[key] = val;
     }
-    if (ctx.editor.verbose && event === "clients") {
-      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")) {
+    init(ctx.designSystem);
+  }
 };
-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 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 = 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) {
+      connectedToSymbols(data, el, s);
+    }
+  });
+  socket.on("disconnect", (reason) => {
+    if (ctx.editor?.verbose) {
+      console.info("[sync] Disconnected from collab socket", reason);
+    }
   });
+  return socket;
 };
 const SyncComponent = {
   onInitSync: connectToSocket

package/dist/esm/server.js

@@ -0,0 +1,85 @@
+#!/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 require2 = createRequire(import.meta.url);
+const DES_SYS_DEFAULT_FILE = require2("./dynamic.json");
+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"
+);
+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(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);
+    }
+  }
+};
+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);
+    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");
+  });
+};
+export {
+  sync,
+  updateDynamycFile
+};