@symbo.ls/sync 2.11.500 → 2.11.502

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/Inspect.js +58 -57
  2. package/dist/cjs/Inspect.js +52 -54
  3. package/dist/cjs/index.js +2 -3
  4. package/dist/esm/Inspect.js +52 -54
  5. package/dist/esm/index.js +2 -2
  6. package/index.js +1 -3
  7. package/package.json +4 -4
package/Inspect.js CHANGED
@@ -30,7 +30,7 @@ function findComponent (el) {
30
30
  return findComponent(el.parent)
31
31
  }
32
32
 
33
- const inspectOnKey = (app, state, ctx) => {
33
+ const onInspect = (app, state, ctx) => {
34
34
  const windowOpts = ctx.window || window
35
35
  windowOpts.onkeydown = (ev) => {
36
36
  if (ev.altKey && ev.shiftKey) {
@@ -56,11 +56,67 @@ const inspectOnKey = (app, state, ctx) => {
56
56
  export const Inspect = {
57
57
  props: {
58
58
  '.preventSelect': { userSelect: 'none' },
59
- '!preventSelect': { userSelect: 'auto' }
59
+ '!preventSelect': { userSelect: 'auto' },
60
+
61
+ onInspect,
62
+
63
+ onMousemove: (ev, e, state) => {
64
+ const el = ev.target.ref
65
+ const component = findComponent(el)
66
+ const focusState = e.Inspector.state
67
+
68
+ if (!component || !state.debugging || !component.__ref) return focusState.update({ area: false })
69
+
70
+ const componentKey = getComponentKey(component)
71
+ const updateValue = (area) => {
72
+ focusState.update({ area, focusKey: componentKey })
73
+ }
74
+
75
+ const update = () => {
76
+ if (ev.altKey && ev.shiftKey) {
77
+ const { x, y, width, height } = component.node.getBoundingClientRect()
78
+ const area = { x, y, width, height }
79
+
80
+ if (!focusState.area) return updateValue(area)
81
+ if (focusState.area.x !== area.x) updateValue(area)
82
+ } else if (focusState.area) {
83
+ focusState.update({ area: false })
84
+ }
85
+ }
86
+
87
+ window.requestAnimationFrame(() => {
88
+ update()
89
+ window.requestAnimationFrame(update)
90
+ })
91
+ },
92
+
93
+ onMousedown: (ev, elem, state) => {
94
+ if (!state.debugging) return
95
+ const el = ev.target.ref
96
+ const component = findComponent(el)
97
+ if (!component) return
98
+ const componentKey = getComponentKey(component)
99
+ if (!componentKey) return
100
+
101
+ const editor = el.context.editor
102
+ if (editor && editor.onInspect) {
103
+ return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true })
104
+ }
105
+
106
+ const data = JSON.stringify({
107
+ componentKey: `${componentKey}`
108
+ })
109
+ send.call(el.context.socket, 'route', data)
110
+
111
+ ev.preventDefault()
112
+ ev.stopPropagation()
113
+ return false
114
+ }
60
115
  },
61
116
 
62
117
  Inspector: {
63
118
  state: {},
119
+
64
120
  props: (el, s) => ({
65
121
  transition: 'all, defaultBezier, X',
66
122
  position: 'fixed',
@@ -138,60 +194,5 @@ export const Inspect = {
138
194
  return false
139
195
  }
140
196
  }
141
- },
142
-
143
- on: {
144
- inspectOnKey,
145
- mousemove: (ev, e, state) => {
146
- const el = ev.target.ref
147
- const component = findComponent(el)
148
- const focusState = e.Inspector.state
149
-
150
- if (!component || !state.debugging || !component.__ref) return focusState.update({ area: false })
151
-
152
- const componentKey = getComponentKey(component)
153
- const updateValue = (area) => {
154
- focusState.update({ area, focusKey: componentKey })
155
- }
156
-
157
- const update = () => {
158
- if (ev.altKey && ev.shiftKey) {
159
- const { x, y, width, height } = component.node.getBoundingClientRect()
160
- const area = { x, y, width, height }
161
-
162
- if (!focusState.area) return updateValue(area)
163
- if (focusState.area.x !== area.x) updateValue(area)
164
- } else if (focusState.area) {
165
- focusState.update({ area: false })
166
- }
167
- }
168
-
169
- window.requestAnimationFrame(() => {
170
- update()
171
- window.requestAnimationFrame(update)
172
- })
173
- },
174
- mousedown: (ev, elem, state) => {
175
- if (!state.debugging) return
176
- const el = ev.target.ref
177
- const component = findComponent(el)
178
- if (!component) return
179
- const componentKey = getComponentKey(component)
180
- if (!componentKey) return
181
-
182
- const editor = el.context.editor
183
- if (editor && editor.onInspect) {
184
- return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true })
185
- }
186
-
187
- const data = JSON.stringify({
188
- componentKey: `${componentKey}`
189
- })
190
- send.call(el.context.socket, 'route', data)
191
-
192
- ev.preventDefault()
193
- ev.stopPropagation()
194
- return false
195
- }
196
197
  }
197
198
  }
package/dist/cjs/Inspect.js CHANGED
@@ -60,7 +60,7 @@ function findComponent(el) {
60
60
  }
61
61
  return findComponent(el.parent);
62
62
  }
63
- const inspectOnKey = (app, state, ctx) => {
63
+ const onInspect = (app, state, ctx) => {
64
64
  const windowOpts = ctx.window || window;
65
65
  windowOpts.onkeydown = (ev) => {
66
66
  if (ev.altKey && ev.shiftKey) {
@@ -85,7 +85,57 @@ const inspectOnKey = (app, state, ctx) => {
85
85
  const Inspect = {
86
86
  props: {
87
87
  ".preventSelect": { userSelect: "none" },
88
- "!preventSelect": { userSelect: "auto" }
88
+ "!preventSelect": { userSelect: "auto" },
89
+ onInspect,
90
+ onMousemove: (ev, e, state) => {
91
+ const el = ev.target.ref;
92
+ const component = findComponent(el);
93
+ const focusState = e.Inspector.state;
94
+ if (!component || !state.debugging || !component.__ref)
95
+ return focusState.update({ area: false });
96
+ const componentKey = getComponentKey(component);
97
+ const updateValue = (area) => {
98
+ focusState.update({ area, focusKey: componentKey });
99
+ };
100
+ const update = () => {
101
+ if (ev.altKey && ev.shiftKey) {
102
+ const { x, y, width, height } = component.node.getBoundingClientRect();
103
+ const area = { x, y, width, height };
104
+ if (!focusState.area)
105
+ return updateValue(area);
106
+ if (focusState.area.x !== area.x)
107
+ updateValue(area);
108
+ } else if (focusState.area) {
109
+ focusState.update({ area: false });
110
+ }
111
+ };
112
+ window.requestAnimationFrame(() => {
113
+ update();
114
+ window.requestAnimationFrame(update);
115
+ });
116
+ },
117
+ onMousedown: (ev, elem, state) => {
118
+ if (!state.debugging)
119
+ return;
120
+ const el = ev.target.ref;
121
+ const component = findComponent(el);
122
+ if (!component)
123
+ return;
124
+ const componentKey = getComponentKey(component);
125
+ if (!componentKey)
126
+ return;
127
+ const editor = el.context.editor;
128
+ if (editor && editor.onInspect) {
129
+ return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true });
130
+ }
131
+ const data = JSON.stringify({
132
+ componentKey: `${componentKey}`
133
+ });
134
+ import_client.send.call(el.context.socket, "route", data);
135
+ ev.preventDefault();
136
+ ev.stopPropagation();
137
+ return false;
138
+ }
89
139
  },
90
140
  Inspector: {
91
141
  state: {},
@@ -156,57 +206,5 @@ const Inspect = {
156
206
  return false;
157
207
  }
158
208
  }
159
- },
160
- on: {
161
- inspectOnKey,
162
- mousemove: (ev, e, state) => {
163
- const el = ev.target.ref;
164
- const component = findComponent(el);
165
- const focusState = e.Inspector.state;
166
- if (!component || !state.debugging || !component.__ref)
167
- return focusState.update({ area: false });
168
- const componentKey = getComponentKey(component);
169
- const updateValue = (area) => {
170
- focusState.update({ area, focusKey: componentKey });
171
- };
172
- const update = () => {
173
- if (ev.altKey && ev.shiftKey) {
174
- const { x, y, width, height } = component.node.getBoundingClientRect();
175
- const area = { x, y, width, height };
176
- if (!focusState.area)
177
- return updateValue(area);
178
- if (focusState.area.x !== area.x)
179
- updateValue(area);
180
- } else if (focusState.area) {
181
- focusState.update({ area: false });
182
- }
183
- };
184
- window.requestAnimationFrame(() => {
185
- update();
186
- window.requestAnimationFrame(update);
187
- });
188
- },
189
- mousedown: (ev, elem, state) => {
190
- if (!state.debugging)
191
- return;
192
- const el = ev.target.ref;
193
- const component = findComponent(el);
194
- if (!component)
195
- return;
196
- const componentKey = getComponentKey(component);
197
- if (!componentKey)
198
- return;
199
- const editor = el.context.editor;
200
- if (editor && editor.onInspect) {
201
- return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true });
202
- }
203
- const data = JSON.stringify({
204
- componentKey: `${componentKey}`
205
- });
206
- import_client.send.call(el.context.socket, "route", data);
207
- ev.preventDefault();
208
- ev.stopPropagation();
209
- return false;
210
- }
211
209
  }
212
210
  };
package/dist/cjs/index.js CHANGED
@@ -15,11 +15,12 @@ var __copyProps = (to, from, except, desc) => {
15
15
  }
16
16
  return to;
17
17
  };
18
- var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
19
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
19
  var sync_exports = {};
21
20
  __export(sync_exports, {
22
21
  DefaultSyncApp: () => DefaultSyncApp,
22
+ Inspect: () => import_Inspect.Inspect,
23
+ Notifications: () => import_SyncNotifications.Notifications,
23
24
  SyncComponent: () => SyncComponent,
24
25
  connectToSocket: () => connectToSocket
25
26
  });
@@ -31,8 +32,6 @@ var import_globals = require("@domql/globals");
31
32
  var import_utils = require("@domql/utils");
32
33
  var import_SyncNotifications = require("./SyncNotifications");
33
34
  var import_Inspect = require("./Inspect");
34
- __reExport(sync_exports, require("./SyncNotifications"), module.exports);
35
- __reExport(sync_exports, require("./Inspect"), module.exports);
36
35
  const isLocalhost = import_globals.window && import_globals.window.location && import_globals.window.location.host.includes("local");
37
36
  const onConnect = (element, state) => {
38
37
  return (socketId, socket) => {
package/dist/esm/Inspect.js CHANGED
@@ -42,7 +42,7 @@ function findComponent(el) {
42
42
  }
43
43
  return findComponent(el.parent);
44
44
  }
45
- const inspectOnKey = (app, state, ctx) => {
45
+ const onInspect = (app, state, ctx) => {
46
46
  const windowOpts = ctx.window || window;
47
47
  windowOpts.onkeydown = (ev) => {
48
48
  if (ev.altKey && ev.shiftKey) {
@@ -67,7 +67,57 @@ const inspectOnKey = (app, state, ctx) => {
67
67
  const Inspect = {
68
68
  props: {
69
69
  ".preventSelect": { userSelect: "none" },
70
- "!preventSelect": { userSelect: "auto" }
70
+ "!preventSelect": { userSelect: "auto" },
71
+ onInspect,
72
+ onMousemove: (ev, e, state) => {
73
+ const el = ev.target.ref;
74
+ const component = findComponent(el);
75
+ const focusState = e.Inspector.state;
76
+ if (!component || !state.debugging || !component.__ref)
77
+ return focusState.update({ area: false });
78
+ const componentKey = getComponentKey(component);
79
+ const updateValue = (area) => {
80
+ focusState.update({ area, focusKey: componentKey });
81
+ };
82
+ const update = () => {
83
+ if (ev.altKey && ev.shiftKey) {
84
+ const { x, y, width, height } = component.node.getBoundingClientRect();
85
+ const area = { x, y, width, height };
86
+ if (!focusState.area)
87
+ return updateValue(area);
88
+ if (focusState.area.x !== area.x)
89
+ updateValue(area);
90
+ } else if (focusState.area) {
91
+ focusState.update({ area: false });
92
+ }
93
+ };
94
+ window.requestAnimationFrame(() => {
95
+ update();
96
+ window.requestAnimationFrame(update);
97
+ });
98
+ },
99
+ onMousedown: (ev, elem, state) => {
100
+ if (!state.debugging)
101
+ return;
102
+ const el = ev.target.ref;
103
+ const component = findComponent(el);
104
+ if (!component)
105
+ return;
106
+ const componentKey = getComponentKey(component);
107
+ if (!componentKey)
108
+ return;
109
+ const editor = el.context.editor;
110
+ if (editor && editor.onInspect) {
111
+ return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true });
112
+ }
113
+ const data = JSON.stringify({
114
+ componentKey: `${componentKey}`
115
+ });
116
+ send.call(el.context.socket, "route", data);
117
+ ev.preventDefault();
118
+ ev.stopPropagation();
119
+ return false;
120
+ }
71
121
  },
72
122
  Inspector: {
73
123
  state: {},
@@ -138,58 +188,6 @@ const Inspect = {
138
188
  return false;
139
189
  }
140
190
  }
141
- },
142
- on: {
143
- inspectOnKey,
144
- mousemove: (ev, e, state) => {
145
- const el = ev.target.ref;
146
- const component = findComponent(el);
147
- const focusState = e.Inspector.state;
148
- if (!component || !state.debugging || !component.__ref)
149
- return focusState.update({ area: false });
150
- const componentKey = getComponentKey(component);
151
- const updateValue = (area) => {
152
- focusState.update({ area, focusKey: componentKey });
153
- };
154
- const update = () => {
155
- if (ev.altKey && ev.shiftKey) {
156
- const { x, y, width, height } = component.node.getBoundingClientRect();
157
- const area = { x, y, width, height };
158
- if (!focusState.area)
159
- return updateValue(area);
160
- if (focusState.area.x !== area.x)
161
- updateValue(area);
162
- } else if (focusState.area) {
163
- focusState.update({ area: false });
164
- }
165
- };
166
- window.requestAnimationFrame(() => {
167
- update();
168
- window.requestAnimationFrame(update);
169
- });
170
- },
171
- mousedown: (ev, elem, state) => {
172
- if (!state.debugging)
173
- return;
174
- const el = ev.target.ref;
175
- const component = findComponent(el);
176
- if (!component)
177
- return;
178
- const componentKey = getComponentKey(component);
179
- if (!componentKey)
180
- return;
181
- const editor = el.context.editor;
182
- if (editor && editor.onInspect) {
183
- return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true });
184
- }
185
- const data = JSON.stringify({
186
- componentKey: `${componentKey}`
187
- });
188
- send.call(el.context.socket, "route", data);
189
- ev.preventDefault();
190
- ev.stopPropagation();
191
- return false;
192
- }
193
191
  }
194
192
  };
195
193
  export {
package/dist/esm/index.js CHANGED
@@ -5,8 +5,6 @@ import { window } from "@domql/globals";
5
5
  import { overwriteShallow } from "@domql/utils";
6
6
  import { connectedToSymbols, Notifications } from "./SyncNotifications";
7
7
  import { Inspect } from "./Inspect";
8
- export * from "./SyncNotifications";
9
- export * from "./Inspect";
10
8
  const isLocalhost = window && window.location && window.location.host.includes("local");
11
9
  const onConnect = (element, state) => {
12
10
  return (socketId, socket) => {
@@ -75,6 +73,8 @@ const DefaultSyncApp = {
75
73
  };
76
74
  export {
77
75
  DefaultSyncApp,
76
+ Inspect,
77
+ Notifications,
78
78
  SyncComponent,
79
79
  connectToSocket
80
80
  };
package/index.js CHANGED
@@ -7,9 +7,7 @@ import { window } from '@domql/globals'
7
7
  import { overwriteShallow } from '@domql/utils'
8
8
  import { connectedToSymbols, Notifications } from './SyncNotifications'
9
9
  import { Inspect } from './Inspect'
10
-
11
- export * from './SyncNotifications'
12
- export * from './Inspect'
10
+ export { Inspect, Notifications }
13
11
 
14
12
  const isLocalhost = window && window.location && window.location.host.includes('local')
15
13
 
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@symbo.ls/sync",
3
- "version": "2.11.500",
3
+ "version": "2.11.502",
4
4
  "main": "index.js",
5
5
  "module": "index.js",
6
- "gitHead": "26be30022a9bbce9288b98f013bb1c3381767960",
6
+ "gitHead": "f58e84119b7c635dea7ca5863553caabf7d1c4cf",
7
7
  "files": [
8
8
  "*.js",
9
9
  "dist"
@@ -32,9 +32,9 @@
32
32
  "@domql/globals": "latest",
33
33
  "@domql/router": "^2.5.0",
34
34
  "@domql/utils": "^2.5.0",
35
- "@symbo.ls/init": "^2.11.500",
35
+ "@symbo.ls/init": "^2.11.501",
36
36
  "@symbo.ls/scratch": "^2.11.500",
37
- "@symbo.ls/socket": "^2.11.500",
37
+ "@symbo.ls/socket": "^2.11.501",
38
38
  "@symbo.ls/uikit": "^2.11.500"
39
39
  },
40
40
  "devDependencies": {