@symbo.ls/sync 2.11.454 → 2.11.460

package/dist/cjs/DefaultSyncApp.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/Inspect.js

@@ -0,0 +1,212 @@
+"use strict";
+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 Inspect_exports = {};
+__export(Inspect_exports, {
+  Inspect: () => Inspect
+});
+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");
+function returnStringExtend(extend) {
+  return (0, import_utils.isString)(extend) ? extend : (0, import_utils.isArray)(extend) ? extend.find((extItem) => (0, import_utils.isString)(extItem)) : "";
+}
+function getComponentKey(el) {
+  if (!el)
+    return;
+  const __componentKey = el.__ref.__componentKey;
+  const extendStr = el.extend && returnStringExtend(el.extend);
+  const parentChildExtendStr = el.parent && el.parent.childExtend && returnStringExtend(el.parent.childExtend);
+  return (__componentKey || extendStr || 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);
+}
+const inspectOnKey = (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 });
+    }
+  };
+};
+const Inspect = {
+  props: {
+    ".preventSelect": { userSelect: "none" },
+    "!preventSelect": { userSelect: "auto" }
+  },
+  Inspector: {
+    state: {},
+    props: (el, s) => ({
+      transition: "all, defaultBezier, X",
+      position: "fixed",
+      hide: !(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: {
+      props: {
+        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 }}"
+      }
+    },
+    on: {
+      init: ({ 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;
+            }
+          }
+        }
+      },
+      beforeUpdate: (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;
+      }
+    }
+  },
+  on: {
+    inspectOnKey,
+    mousemove: (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);
+      });
+    },
+    mousedown: (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}`
+      });
+      import_client.send.call(el.context.socket, "route", data);
+      ev.preventDefault();
+      ev.stopPropagation();
+      return false;
+    }
+  }
+};

package/dist/cjs/Notifications.js

@@ -0,0 +1,103 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Notifications_exports = {};
+__export(Notifications_exports, {
+  Notifications: () => Notifications,
+  connectedToSymbols: () => connectedToSymbols
+});
+module.exports = __toCommonJS(Notifications_exports);
+const NOTIF_COLORS = {
+  success: "green",
+  error: "red",
+  warning: "yellow"
+};
+const connectedToSymbols = (clients, element, state) => {
+  console.log(clients);
+  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);
+    }
+  }
+};
+const Notifications = {
+  state: {
+    notifications: []
+  },
+  Notifications: {
+    props: {
+      position: "fixed",
+      left: "A2",
+      bottom: "Z2",
+      zIndex: "999"
+    },
+    childExtend: {
+      extend: "Notification",
+      props: ({ 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
+    },
+    $stateCollection: ({ state }) => state.notifications
+  }
+};

package/dist/cjs/index.js

@@ -0,0 +1,99 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var sync_exports = {};
+__export(sync_exports, {
+  DefaultSyncApp: () => DefaultSyncApp,
+  SyncComponent: () => SyncComponent,
+  connectToSocket: () => connectToSocket
+});
+module.exports = __toCommonJS(sync_exports);
+var import_router = require("@domql/router");
+var import_init = require("@symbo.ls/init");
+var import_client = require("@symbo.ls/socket/client");
+var import_globals = require("@domql/globals");
+var import_utils = require("@domql/utils");
+var import_Notifications = require("./Notifications");
+var import_Inspect = require("./Inspect");
+__reExport(sync_exports, require("./DefaultSyncApp"), module.exports);
+__reExport(sync_exports, require("./Notifications"), module.exports);
+__reExport(sync_exports, require("./Inspect"), module.exports);
+const isLocalhost = import_globals.window && import_globals.window.location && import_globals.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 } = obj.DATA;
+      const { utils } = ctx;
+      if (pages) {
+        (0, import_utils.overwriteShallow)(ctx.pages, pages);
+      }
+      if (components) {
+        (0, import_utils.overwriteShallow)(ctx.components, components);
+      }
+      if (snippets) {
+        (0, import_utils.overwriteShallow)(ctx.snippets, snippets);
+      }
+      if (state) {
+        const route = state.route;
+        if (route)
+          (utils.router || import_router.router)(route.replace("/state", "") || "/", el, {});
+        else if (!(snippets && components && pages))
+          s.update(state);
+      }
+      if (snippets || components || pages) {
+        const { pathname, search, hash } = ctx.window.location;
+        (utils.router || import_router.router)(pathname + search + hash, el, {});
+      }
+      if (designSystem)
+        (0, import_init.init)(designSystem);
+    }
+    if (ctx.editor.verbose && event === "clients") {
+      (0, import_Notifications.connectedToSymbols)(data, el, s);
+    }
+  };
+};
+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_globals.window.location.host,
+    onConnect: onConnect(el, s, ctx),
+    onDisconnect: onDisconnect(el, s, ctx),
+    onChange: onChange(el, s, ctx)
+  });
+};
+const SyncComponent = {
+  on: {
+    initSync: connectToSocket
+  }
+};
+const DefaultSyncApp = {
+  extend: [SyncComponent, import_Inspect.Inspect, import_Notifications.Notifications]
+};

package/dist/cjs/package.json

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

package/dist/esm/Inspect.js

@@ -0,0 +1,197 @@
+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";
+function returnStringExtend(extend) {
+  return isString(extend) ? extend : isArray(extend) ? extend.find((extItem) => isString(extItem)) : "";
+}
+function getComponentKey(el) {
+  if (!el)
+    return;
+  const __componentKey = el.__ref.__componentKey;
+  const extendStr = el.extend && returnStringExtend(el.extend);
+  const parentChildExtendStr = el.parent && el.parent.childExtend && returnStringExtend(el.parent.childExtend);
+  return (__componentKey || extendStr || 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);
+}
+const inspectOnKey = (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 });
+    }
+  };
+};
+const Inspect = {
+  props: {
+    ".preventSelect": { userSelect: "none" },
+    "!preventSelect": { userSelect: "auto" }
+  },
+  Inspector: {
+    state: {},
+    props: (el, s) => ({
+      transition: "all, defaultBezier, X",
+      position: "fixed",
+      hide: !(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: {
+      props: {
+        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 }}"
+      }
+    },
+    on: {
+      init: ({ context }) => {
+        const { components } = context;
+        if (isObject(components)) {
+          const _a = components, { Content } = _a, rest = __objRest(_a, ["Content"]);
+          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;
+            }
+          }
+        }
+      },
+      beforeUpdate: (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;
+      }
+    }
+  },
+  on: {
+    inspectOnKey,
+    mousemove: (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);
+      });
+    },
+    mousedown: (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;
+    }
+  }
+};
+export {
+  Inspect
+};

package/dist/esm/Notifications.js

@@ -0,0 +1,83 @@
+const NOTIF_COLORS = {
+  success: "green",
+  error: "red",
+  warning: "yellow"
+};
+const connectedToSymbols = (clients, element, state) => {
+  console.log(clients);
+  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);
+    }
+  }
+};
+const Notifications = {
+  state: {
+    notifications: []
+  },
+  Notifications: {
+    props: {
+      position: "fixed",
+      left: "A2",
+      bottom: "Z2",
+      zIndex: "999"
+    },
+    childExtend: {
+      extend: "Notification",
+      props: ({ 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
+    },
+    $stateCollection: ({ state }) => state.notifications
+  }
+};
+export {
+  Notifications,
+  connectedToSymbols
+};

package/dist/esm/index.js

@@ -0,0 +1,78 @@
+import { router } from "@domql/router";
+import { init } from "@symbo.ls/init";
+import { connect } from "@symbo.ls/socket/client";
+import { window } from "@domql/globals";
+import { overwriteShallow } from "@domql/utils";
+import { connectedToSymbols, Notifications } from "./Notifications";
+import { Inspect } from "./Inspect";
+export * from "./DefaultSyncApp";
+export * from "./Notifications";
+export * 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 } = obj.DATA;
+      const { utils } = ctx;
+      if (pages) {
+        overwriteShallow(ctx.pages, pages);
+      }
+      if (components) {
+        overwriteShallow(ctx.components, components);
+      }
+      if (snippets) {
+        overwriteShallow(ctx.snippets, snippets);
+      }
+      if (state) {
+        const route = state.route;
+        if (route)
+          (utils.router || router)(route.replace("/state", "") || "/", el, {});
+        else if (!(snippets && components && pages))
+          s.update(state);
+      }
+      if (snippets || components || pages) {
+        const { pathname, search, hash } = ctx.window.location;
+        (utils.router || router)(pathname + search + hash, el, {});
+      }
+      if (designSystem)
+        init(designSystem);
+    }
+    if (ctx.editor.verbose && event === "clients") {
+      connectedToSymbols(data, el, s);
+    }
+  };
+};
+const connectToSocket = (el, s, ctx) => {
+  return connect(ctx.key, {
+    source: isLocalhost ? "localhost" : "client",
+    socketUrl: isLocalhost ? "localhost:13336" : "socket.symbols.app",
+    location: window.location.host,
+    onConnect: onConnect(el, s, ctx),
+    onDisconnect: onDisconnect(el, s, ctx),
+    onChange: onChange(el, s, ctx)
+  });
+};
+const SyncComponent = {
+  on: {
+    initSync: connectToSocket
+  }
+};
+const DefaultSyncApp = {
+  extend: [SyncComponent, Inspect, Notifications]
+};
+export {
+  DefaultSyncApp,
+  SyncComponent,
+  connectToSocket
+};

package/index.js

@@ -5,7 +5,12 @@ import { init } from '@symbo.ls/init'
 import { connect } from '@symbo.ls/socket/client'
 import { window } from '@domql/globals'
 import { overwriteShallow } from '@domql/utils'
-import { connectedToSymbols } from './Notifications'
+import { connectedToSymbols, Notifications } from './Notifications'
+import { Inspect } from './Inspect'
+
+export * from './DefaultSyncApp'
+export * from './Notifications'
+export * from './Inspect'
 
 const isLocalhost = window && window.location && window.location.host.includes('local')
 
@@ -76,3 +81,7 @@ export const SyncComponent = {
     initSync: connectToSocket
   }
 }
+
+export const DefaultSyncApp = {
+  extend: [SyncComponent, Inspect, Notifications]
+}

package/package.json

@@ -1,9 +1,33 @@
 {
   "name": "@symbo.ls/sync",
-  "version": "2.11.454",
+  "version": "2.11.460",
   "main": "index.js",
   "module": "index.js",
-  "gitHead": "c00f58d1f3abb27367daa3a488580d7a82221e6d",
+  "gitHead": "30d3c30e9f5333b79479ce137b579e048547cafe",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "repository": "https://github.com/symbo-ls/scratch",
+  "type": "module",
+  "unpkg": "dist/iife/index.js",
+  "jsdelivr": "dist/iife/index.js",
+  "exports": {
+    ".": {
+      "kalduna": "./index.js",
+      "default": "./dist/cjs/index.js"
+    }
+  },
+  "source": "index.js",
+  "publishConfig": {},
+  "scripts": {
+    "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
+    "build:esm": "npx esbuild *.js --target=es2017 --format=esm --outdir=dist/esm --loader:.svg=text",
+    "build:cjs": "npx esbuild *.js --target=node16 --format=cjs --outdir=dist/cjs --loader:.svg=text",
+    "build:iife": "npx esbuild ./index.js --target=es2017 --format=iife --outdir=dist/iife --loader:.svg=text --bundle --minify",
+    "build": "yarn build:esm; yarn build:cjs",
+    "prepublish": "rimraf -I dist && yarn build && yarn copy:package:cjs"
+  },
   "dependencies": {
     "@domql/globals": "latest",
     "@domql/router": "^2.5.0",
@@ -11,6 +35,9 @@
     "@symbo.ls/init": "^2.11.453",
     "@symbo.ls/scratch": "^2.11.453",
     "@symbo.ls/socket": "^2.11.453",
-    "@symbo.ls/uikit": "^2.11.454"
+    "@symbo.ls/uikit": "^2.11.455"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.0"
   }
 }

package/DefaultSyncApp.js

@@ -1,9 +0,0 @@
-'use strict'
-
-import { SyncComponent } from './index'
-import { Inspect } from './Inspect'
-import { Notifications } from './Notifications'
-
-export const DefaultSyncApp = {
-  extend: [SyncComponent, Inspect, Notifications]
-}

package/Inspect.js

@@ -1,197 +0,0 @@
-'use strict'
-
-import * as smblsUI from '@symbo.ls/uikit'
-import { isObject, isString, isArray } from '@domql/utils'
-import { send } from '@symbo.ls/socket/client'
-
-function returnStringExtend (extend) {
-  return isString(extend) ? extend : isArray(extend) ? extend.find(extItem => isString(extItem)) : ''
-}
-
-function getComponentKey (el) {
-  if (!el) return
-  const __componentKey = el.__ref.__componentKey
-  const extendStr = el.extend && returnStringExtend(el.extend)
-  const parentChildExtendStr = el.parent && el.parent.childExtend && returnStringExtend(el.parent.childExtend)
-  return (__componentKey || extendStr || 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)
-}
-
-const inspectOnKey = (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 })
-    }
-  }
-}
-
-export const Inspect = {
-  props: {
-    '.preventSelect': { userSelect: 'none' },
-    '!preventSelect': { userSelect: 'auto' }
-  },
-
-  Inspector: {
-    state: {},
-    props: (el, s) => ({
-      transition: 'all, defaultBezier, X',
-      position: 'fixed',
-      hide: !(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: {
-      props: {
-        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 }}'
-      }
-    },
-
-    on: {
-      init: ({ context }) => {
-        const { components } = context
-
-        if (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
-            }
-          }
-        }
-      },
-      beforeUpdate: (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
-          // el.node.style = Object.stringify({
-          //   top: y - 6 + 'px',
-          //   left: x - 6 + 'px',
-          //   width: width + 12 + 'px',
-          //   height: height + 12 + 'px'
-          // })
-          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
-      }
-    }
-  },
-
-  on: {
-    inspectOnKey,
-    mousemove: (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)
-      })
-    },
-    mousedown: (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
-    }
-  }
-}

package/Notifications.js

@@ -1,122 +0,0 @@
-'use strict'
-
-// const ANIMATION = {
-//   fadeInUp: {
-//     from: {
-//       transform: 'translate3d(0, 12.5%, 1px)',
-//       opacity: 0
-//     },
-//     to: {
-//       transform: 'translate3d(0, 0, 1px)',
-//       opacity: 1
-//     }
-//   },
-//   fadeOutDown: {
-//     from: {
-//       transform: 'translate3d(0, 0, 1px)',
-//       opacity: 1
-//     },
-//     to: {
-//       transform: 'translate3d(0, 12.5%, 1px)',
-//       opacity: 0
-//     }
-//   }
-// }
-
-// const COLOR = {
-//   black: '#000000',
-//   blue: '#3686F7'
-// }
-
-// set({
-//   COLOR,
-//   ANIMATION
-// })
-
-const NOTIF_COLORS = {
-  success: 'green',
-  error: 'red',
-  warning: 'yellow'
-}
-
-export const connectedToSymbols = (clients, element, state) => {
-  console.log(clients)
-  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)
-      }, 3000)
-    }
-  } 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)
-      }, 3000)
-    }
-  }
-}
-
-export const Notifications = {
-  state: {
-    notifications: []
-  },
-
-  Notifications: {
-    props: {
-      position: 'fixed',
-      left: 'A2',
-      bottom: 'Z2',
-      zIndex: '999'
-    },
-    childExtend: {
-      extend: 'Notification',
-      props: ({ 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
-    },
-    $stateCollection: ({ state }) => state.notifications
-  }
-}