@symbo.ls/sync 2.11.437

package/DefaultSyncApp.js

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

package/Inspect.js

@@ -0,0 +1,196 @@
+'use strict'
+
+import * as smblsUI from '@symbo.ls/uikit'
+import { isObject, isString, isArray } from '@domql/utils'
+import { send } from '@symbo.ls/socket/client'
+
+export const Inspect = {
+  props: {
+    '.preventSelect': { userSelect: 'none' },
+    '!preventSelect': { userSelect: 'auto' }
+  },
+
+  focus: {
+    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: {
+    mousemove: (ev, e, state) => {
+      const el = ev.target.ref
+      const component = findComponent(el)
+      const focusState = e.focus.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
+    }
+  }
+}
+
+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)
+}
+
+export const inspectOnKey = (app, 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.focus.state.update({ area: false })
+    }
+  }
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 symbo.ls
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Notifications.js

@@ -0,0 +1,120 @@
+'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)
+    }
+  }
+}
+
+const Notifications = {
+  props: {
+    position: 'fixed',
+    left: 'A2',
+    bottom: 'Z2',
+    zIndex: '999'
+  },
+  childExtend: {
+    extend: 'Notification',
+    props: ({ state }) => ({
+      animation: 'fadeInUp',
+      animationDuration: 'C',
+      background: NOTIF_COLORS[state.type || 'success'],
+      icon: null,
+      Flex: {
+        Title: {
+          text: state.title
+        },
+        P: {
+          text: state.message
+        }
+      },
+      onClick: (e, el, s) => {
+        delete s.notifications[el.key]
+        el.setProps({ animation: 'fadeOutDown' })
+      }
+    })
+  },
+  $stateCollection: ({ state }) => state.notifications
+}
+
+export const Sync = {
+  notifications: Notifications,
+
+  state: {
+    notifications: []
+  }
+}

package/index.js

@@ -0,0 +1,72 @@
+'use strict'
+
+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 } from './Notifications'
+
+const isLocalhost = window && window.location && window.location.host.includes('local')
+
+const onConnect = (element, state) => {
+  return (socketId, socket) => {
+    // send('components', { COMPONENTS: a(COMPONENTS) })
+  }
+}
+
+const onDisconnect = (element, state) => {
+  return () => {}
+}
+
+const onChange = (el, s, ctx) => {
+  return (event, data) => {
+    if (event === 'change') {
+      const obj = JSON.parse(data)
+      if (!obj?.DATA) return
+      const { state, designSystem, pages, components, snippets } = obj.DATA
+      const { utils } = ctx
+
+      if (pages) {
+        // overwriteShallow(ctx.pages, 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)
+    }
+  }
+}
+
+export 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)
+  })
+}

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@symbo.ls/sync",
+  "version": "2.11.437",
+  "main": "index.js",
+  "module": "index.js",
+  "gitHead": "d1b6122e6d2aaca97f342e5e9ebb181797b85e23",
+  "dependencies": {
+    "@domql/globals": "latest",
+    "@domql/router": "latest",
+    "@domql/utils": "latest",
+    "@symbo.ls/init": "latest",
+    "@symbo.ls/scratch": "latest",
+    "@symbo.ls/socket": "latest",
+    "@symbo.ls/uikit": "latest"
+  }
+}