@symbo.ls/sync 3.8.9 → 3.14.1

package/package.json

@@ -1,38 +1,23 @@
 {
   "name": "@symbo.ls/sync",
-  "version": "3.8.9",
+  "version": "3.14.1",
   "main": "./index.js",
   "module": "./index.js",
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "files": [
     "dist",
-    "*.js",
-    "dynamic.json"
+    "*.js"
   ],
   "repository": "https://github.com/symbo-ls/scratch",
   "type": "module",
+  "license": "CC-BY-NC-4.0",
   "unpkg": "./dist/iife/index.js",
   "jsdelivr": "./dist/iife/index.js",
   "exports": {
-    ".": {
-      "import": "./index.js",
-      "require": "./index.js"
-    },
-    "./client": {
-      "import": "./client.js",
-      "require": "./client.js"
-    },
-    "./server": {
-      "import": "./server.js"
-    },
-    "./*.js": {
-      "import": "./dist/esm/*.js",
-      "require": "./dist/cjs/*.js"
-    },
-    "./*": {
-      "import": "./dist/esm/*.js",
-      "require": "./dist/cjs/*.js"
-    }
+    ".": "./index.js",
+    "./applier": "./applier.js",
+    "./handlers": "./handlers.js",
+    "./package.json": "./package.json"
   },
   "source": "index.js",
   "publishConfig": {
@@ -40,25 +25,23 @@
   },
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild *.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
-    "build:cjs": "cross-env NODE_ENV=$NODE_ENV esbuild *.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
-    "build:iife": "cross-env NODE_ENV=$NODE_ENV esbuild index.js --bundle --target=es2020 --format=iife --global-name=SmblsSync --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV --external:smbls --external:@domql/* --external:@symbo.ls/* --external:socket.io-client --external:socket.io --external:express --external:css-in-props",
+    "build:esm": "NODE_ENV=$NODE_ENV esbuild *.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:cjs": "NODE_ENV=$NODE_ENV esbuild *.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:iife": "NODE_ENV=$NODE_ENV esbuild index.js --bundle --target=es2020 --format=iife --global-name=SmblsSync --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV --external:smbls --external:@symbo.ls/* --external:socket.io-client --external:css-in-props",
     "build": "node ../../build/build.js",
     "prepublish": "npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/router": "^3.8.9",
-    "@domql/utils": "^3.8.9",
-    "@symbo.ls/scratch": "^3.8.9",
-    "@symbo.ls/uikit": "^3.8.9",
+    "@symbo.ls/router": "^3.14.1",
+    "@symbo.ls/utils": "^3.14.2",
+    "@symbo.ls/scratch": "^3.14.2",
+    "@symbo.ls/default-config": "^3.14.2",
     "chalk": "^5.4.1",
-    "express": "^4.21.2",
-    "socket.io": "^4.8.1",
     "socket.io-client": "^4.8.1"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0"
   },
-  "browser": "./dist/esm/index.js",
+  "browser": "./index.js",
   "sideEffects": false
 }

package/Inspect.js

@@ -1,190 +0,0 @@
-'use strict'
-
-import * as smblsUI from '@symbo.ls/uikit'
-import { isObject, isString, isArray } from '@domql/utils'
-import { send } from './client.js'
-
-function returnStringExtend (_extends) {
-  return isString(_extends) ? _extends : isArray(_extends) ? _extends.find(extItem => 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)
-}
-
-const 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 })
-    }
-  }
-}
-
-export const 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 (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
-        // 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
-    }
-  }
-}

package/client.js

@@ -1,129 +0,0 @@
-import { window, isFunction, isArray } from '@domql/utils'
-import io from 'socket.io-client'
-
-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

@@ -1,191 +0,0 @@
-"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("./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)) : "";
-}
-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);
-}
-const 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 });
-    }
-  };
-};
-const 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}`
-    });
-    import_client.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;
-    }
-  }
-};

package/dist/cjs/SyncNotifications.js

@@ -1,98 +0,0 @@
-"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 SyncNotifications_exports = {};
-__export(SyncNotifications_exports, {
-  Notifications: () => Notifications,
-  connectedToSymbols: () => connectedToSymbols
-});
-module.exports = __toCommonJS(SyncNotifications_exports);
-const NOTIF_COLORS = {
-  success: "green",
-  error: "red",
-  warning: "yellow"
-};
-const 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);
-    }
-  }
-};
-const 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
-  }
-};