@symbo.ls/sync 3.1.2 → 3.2.7

package/dist/iife/index.js

@@ -0,0 +1,495 @@
+var SmblsSync = (() => {
+  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 __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+  }) : x)(function(x) {
+    if (typeof require !== "undefined") return require.apply(this, arguments);
+    throw Error('Dynamic require of "' + x + '" is not supported');
+  });
+  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);
+
+  // index.js
+  var index_exports = {};
+  __export(index_exports, {
+    DefaultSyncApp: () => DefaultSyncApp,
+    Inspect: () => Inspect,
+    Notifications: () => Notifications,
+    SyncComponent: () => SyncComponent,
+    connectToSocket: () => connectToSocket
+  });
+  var import_router = __require("@domql/router");
+  var import_smbls = __require("smbls");
+  var import_socket2 = __require("socket.io-client");
+  var import_utils2 = __require("@domql/utils");
+
+  // SyncNotifications.js
+  var NOTIF_COLORS = {
+    success: "green",
+    error: "red",
+    warning: "yellow"
+  };
+  var connectedToSymbols = (clients, element, state) => {
+    if (clients.symbols) {
+      if (!state.connected) {
+        state.notifications.connected = {
+          title: "Connected",
+          message: "to the Symbols live server"
+        };
+        state.update({ connected: true });
+        const t = setTimeout(() => {
+          delete state.notifications.connected;
+          element.notifications.content.connected.setProps({ animation: "fadeOutDown" });
+          state.update({ connected: true });
+          clearTimeout(t);
+        }, 3e3);
+      }
+    } else {
+      if (state.connected) {
+        state.notifications.connected = {
+          title: "Disconnected",
+          type: "error"
+        };
+        state.update({ connected: false });
+        const t = setTimeout(() => {
+          delete state.notifications.connected;
+          if (element.notifications.content.connected) {
+            element.notifications.content.connected.setProps({ animation: "fadeOutDown" });
+          }
+          state.update({ connected: true });
+          clearTimeout(t);
+        }, 3e3);
+      }
+    }
+  };
+  var Notifications = {
+    state: {
+      notifications: []
+    },
+    Notifications: {
+      position: "fixed",
+      left: "A2",
+      bottom: "Z2",
+      zIndex: "999",
+      childExtends: "Notification",
+      childProps: ({ state }) => ({
+        animationDuration: "C",
+        background: NOTIF_COLORS[state.type || "success"],
+        icon: null,
+        Flex: {
+          Title: {
+            text: "{{ title }}"
+          },
+          P: {
+            text: "{{ title }}"
+          }
+        },
+        onRender: (e, el, s) => {
+          el.setProps({ animation: "fadeInUp" });
+        },
+        onClick: (e, el, s) => {
+          delete s.notifications[el.key];
+          el.setProps({ animation: "fadeOutDown" });
+          if (s.onClose) s.onClose(e, el, s);
+        }
+      }),
+      IconText: null,
+      childrenAs: "state",
+      children: ({ state }) => state.notifications
+    }
+  };
+
+  // Inspect.js
+  var smblsUI = __toESM(__require("@symbo.ls/uikit"), 1);
+  var import_utils = __require("@domql/utils");
+
+  // client.js
+  var utils = __toESM(__require("@domql/utils"), 1);
+  var import_socket = __toESM(__require("socket.io-client"), 1);
+  var { window: window2, isFunction, isArray } = utils.default || utils;
+  var defautlOpts = {};
+  function send(event = "change", changes, options) {
+    this.emit(event, changes, { ...options, ...defautlOpts });
+  }
+
+  // Inspect.js
+  function returnStringExtend(_extends) {
+    return (0, import_utils.isString)(_extends) ? _extends : (0, import_utils.isArray)(_extends) ? _extends.find((extItem) => (0, import_utils.isString)(extItem)) : "";
+  }
+  function getComponentKey(el) {
+    if (!el) return;
+    const __componentKey = el.__ref.__componentKey;
+    const extendsStr = el.extends && returnStringExtend(el.extends);
+    const parentChildExtendStr = el.parent && el.parent.childExtends && returnStringExtend(el.parent.childExtends);
+    return (__componentKey || extendsStr || parentChildExtendStr || "").split("_")[0].split(".")[0].split("+")[0];
+  }
+  function findComponent(el) {
+    if (!el || !el.__ref) return;
+    const { components, pages, editor } = el.context;
+    const componentKey = getComponentKey(el);
+    if (editor && editor.onInitInspect) {
+      const initInspectReturns = editor.onInitInspect(componentKey, el, el.state);
+      if (!initInspectReturns) return findComponent(el.parent);
+    }
+    if (componentKey && (components[componentKey] || pages[componentKey])) {
+      return el;
+    }
+    return findComponent(el.parent);
+  }
+  var onInspect = (app, state, ctx) => {
+    const windowOpts = ctx.window || window;
+    windowOpts.onkeydown = (ev) => {
+      if (ev.altKey && ev.shiftKey) {
+        app.state.update({ debugging: true, preventSelect: true }, {
+          preventUpdate: true,
+          preventContentUpdate: true,
+          preventRecursive: true
+        });
+      }
+    };
+    windowOpts.onkeyup = (ev) => {
+      if (app.state.preventSelect && (!ev.altKey || !ev.shiftKey)) {
+        app.state.replace({ debugging: false, preventSelect: false }, {
+          preventUpdate: true,
+          preventContentUpdate: true,
+          preventRecursive: true
+        });
+        app.Inspector.state.update({ area: false });
+      }
+    };
+  };
+  var Inspect = {
+    ".preventSelect": { userSelect: "none" },
+    "!preventSelect": { userSelect: "auto" },
+    onInspect,
+    onMousemove: (ev, e, state) => {
+      const el = ev.target.ref;
+      const component = findComponent(el);
+      const focusState = e.Inspector.state;
+      if (!component || !state.debugging || !component.__ref) return focusState.update({ area: false });
+      const componentKey = getComponentKey(component);
+      const updateValue = (area) => {
+        focusState.update({ area, focusKey: componentKey });
+      };
+      const update = () => {
+        if (ev.altKey && ev.shiftKey) {
+          const { x, y, width, height } = component.node.getBoundingClientRect();
+          const area = { x, y, width, height };
+          if (!focusState.area) return updateValue(area);
+          if (focusState.area.x !== area.x) updateValue(area);
+        } else if (focusState.area) {
+          focusState.update({ area: false });
+        }
+      };
+      window.requestAnimationFrame(() => {
+        update();
+        window.requestAnimationFrame(update);
+      });
+    },
+    onMousedown: (ev, elem, state) => {
+      if (!state.debugging) return;
+      const el = ev.target.ref;
+      const component = findComponent(el);
+      if (!component) return;
+      const componentKey = getComponentKey(component);
+      if (!componentKey) return;
+      const editor = el.context.editor;
+      if (editor && editor.onInspect) {
+        return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true });
+      }
+      const data = JSON.stringify({
+        componentKey: `${componentKey}`
+      });
+      send.call(el.context.socket, "route", data);
+      ev.preventDefault();
+      ev.stopPropagation();
+      return false;
+    },
+    Inspector: {
+      state: {},
+      transition: "all, defaultBezier, X",
+      position: "fixed",
+      hide: (el, s) => !(s.area && s.parent.debugging),
+      style: {
+        boxShadow: "0 0 10px #3686F733, 0 0 0 3px #3686F766, 0 0 100vmax 100vmax #000A",
+        zIndex: "9999999",
+        borderRadius: "10px",
+        pointerEvents: "none"
+      },
+      Span: {
+        position: "absolute",
+        margin: "A2 0",
+        fontSize: "Z",
+        color: "text",
+        // color: 'blue',
+        zIndex: "99999999",
+        transition: "all, defaultBezier, X",
+        textDecoration: "underline",
+        fontWeight: "500",
+        top: "100%",
+        style: {
+          boxShadow: "0 25px 10px 35px black",
+          textShadow: "0 0 10px black"
+        },
+        text: "{{ focusKey }}"
+      },
+      onInit: ({ context }) => {
+        const { components } = context;
+        if ((0, import_utils.isObject)(components)) {
+          const { Content, ...rest } = components;
+          for (const key in rest) {
+            if (smblsUI[key]) continue;
+            if (!rest[key].__ref) rest[key].__ref = {};
+            if (!rest[key].__ref.__componentKey) {
+              rest[key].__ref.__componentKey = key;
+            }
+          }
+        }
+      },
+      onBeforeUpdate: (ch, el, s) => {
+        const { area } = s;
+        const isDebugging = s.area && s.parent.debugging;
+        let style;
+        if (!isDebugging) {
+          style = "display: none !important";
+        } else if (area) {
+          const { x, y, width, height } = area;
+          style = `
+            display: block !important;
+            top: ${y - 6}px;
+            left: ${x - 6}px;
+            width: ${width + 12}px;
+            height: ${height + 12}px;
+          `;
+        }
+        el.node.style = style;
+        el.Span.node.innerText = s.focusKey;
+        return false;
+      }
+    }
+  };
+
+  // index.js
+  var isLocal = process.env.NODE_ENV === "local";
+  var 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);
+  };
+  var 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);
+  };
+  var 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;
+  };
+  var fetchServiceToken = async () => {
+    try {
+      const urlBase = isLocal ? "http://localhost:8080" : "https://api.symbols.app";
+      const res = await import_utils2.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+/gu, "") || void 0;
+    } catch (e) {
+      console.error("[sync] Failed to fetch service-token", e);
+    }
+  };
+  var 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_utils2.overwriteShallow)(ctx[key], val);
+        }
+      } else {
+        ctx[key] = val;
+      }
+    });
+    if (schema) {
+      ctx.schema = schema;
+    }
+  };
+  var 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);
+    }
+  };
+  var 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_socket2.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;
+  };
+  var SyncComponent = {
+    onInitSync: connectToSocket
+  };
+  var DefaultSyncApp = {
+    extends: [SyncComponent, Inspect, Notifications]
+  };
+  return __toCommonJS(index_exports);
+})();