@symbo.ls/sync 2.11.437 → 2.11.446

package/DefaultSyncApp.js

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

package/Inspect.js

@@ -4,13 +4,62 @@ 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' }
   },
 
-  focus: {
+  Inspector: {
     state: {},
     props: (el, s) => ({
       transition: 'all, defaultBezier, X',
@@ -92,10 +141,11 @@ export const Inspect = {
   },
 
   on: {
+    inspectOnKey,
     mousemove: (ev, e, state) => {
       const el = ev.target.ref
       const component = findComponent(el)
-      const focusState = e.focus.state
+      const focusState = e.Inspector.state
 
       if (!component || !state.debugging || !component.__ref) return focusState.update({ area: false })
 
@@ -145,52 +195,3 @@ export const Inspect = {
     }
   }
 }
-
-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/Notifications.js

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

package/index.js

@@ -70,3 +70,9 @@ export const connectToSocket = (el, s, ctx) => {
     onChange: onChange(el, s, ctx)
   })
 }
+
+export const SyncComponent = {
+  on: {
+    initSync: connectToSocket
+  }
+}

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@symbo.ls/sync",
-  "version": "2.11.437",
+  "version": "2.11.446",
   "main": "index.js",
   "module": "index.js",
-  "gitHead": "d1b6122e6d2aaca97f342e5e9ebb181797b85e23",
+  "gitHead": "d042e0c4fc9379b0ca7584f6405cfa2e7c1301d4",
   "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"
+    "@domql/globals": "^2.5.0",
+    "@domql/router": "^2.5.0",
+    "@domql/utils": "^2.5.0",
+    "@symbo.ls/init": "^2.11.446",
+    "@symbo.ls/scratch": "^2.11.446",
+    "@symbo.ls/socket": "^2.11.446",
+    "@symbo.ls/uikit": "^2.11.446"
   }
 }