@nookuio/iframe 1.0.2-beta.0 → 1.0.3

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 (46) hide show
  1. package/dist/constants.d.ts +0 -9
  2. package/dist/constants.js +2 -11
  3. package/dist/constants.mjs +1 -9
  4. package/dist/editor.js +41 -35
  5. package/dist/editor.mjs +42 -36
  6. package/dist/iframe.d.ts +1 -1
  7. package/dist/iframe.js +153 -124
  8. package/dist/iframe.mjs +162 -133
  9. package/dist/types.d.ts +18 -17
  10. package/package.json +2 -2
  11. package/dist/drag-drop/dragEnd.d.ts +0 -2
  12. package/dist/drag-drop/dragEnd.js +0 -27
  13. package/dist/drag-drop/dragEnd.mjs +0 -23
  14. package/dist/drag-drop/dragMove.d.ts +0 -2
  15. package/dist/drag-drop/dragMove.js +0 -46
  16. package/dist/drag-drop/dragMove.mjs +0 -40
  17. package/dist/drag-drop/dragReorder.d.ts +0 -3
  18. package/dist/drag-drop/dragReorder.js +0 -60
  19. package/dist/drag-drop/dragReorder.mjs +0 -64
  20. package/dist/drag-drop/dragStart.d.ts +0 -9
  21. package/dist/drag-drop/dragStart.js +0 -60
  22. package/dist/drag-drop/dragStart.mjs +0 -55
  23. package/dist/drag-drop/helpers.d.ts +0 -42
  24. package/dist/drag-drop/helpers.js +0 -205
  25. package/dist/drag-drop/helpers.mjs +0 -188
  26. package/dist/drag-drop/highlight.d.ts +0 -19
  27. package/dist/drag-drop/highlight.js +0 -34
  28. package/dist/drag-drop/highlight.mjs +0 -21
  29. package/dist/drag-drop/index.d.ts +0 -24
  30. package/dist/drag-drop/index.js +0 -106
  31. package/dist/drag-drop/index.mjs +0 -83
  32. package/dist/drag-drop/types.d.ts +0 -123
  33. package/dist/drag-drop/types.js +0 -1
  34. package/dist/drag-drop/types.mjs +0 -0
  35. package/dist/drag-drop backup/dragDropManager.d.ts +0 -101
  36. package/dist/drag-drop backup/dragDropManager.js +0 -204
  37. package/dist/drag-drop backup/dragDropManager.mjs +0 -183
  38. package/dist/drag-drop backup/index.d.ts +0 -3
  39. package/dist/drag-drop backup/index.js +0 -38
  40. package/dist/drag-drop backup/index.mjs +0 -3
  41. package/dist/drag-drop backup/types.d.ts +0 -80
  42. package/dist/drag-drop backup/types.js +0 -1
  43. package/dist/drag-drop backup/types.mjs +0 -0
  44. package/dist/drag-drop backup/utils.d.ts +0 -41
  45. package/dist/drag-drop backup/utils.js +0 -93
  46. package/dist/drag-drop backup/utils.mjs +0 -68
@@ -6,12 +6,3 @@ export declare const COMPONENT_PREVIEW_PAGE_PATH = "/__nooku__/component-preview
6
6
  export declare const VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = "/__nooku__/virtual-sfc-editor";
7
7
  export declare const IFRAME_SOURCE_NAME = "nooku-frame";
8
8
  export declare const EDITOR_SOURCE_NAME = "nooku-editor";
9
- export declare const ATTRIBUTES: {
10
- id: string;
11
- path: string;
12
- type: string;
13
- index: string;
14
- component: string;
15
- forceRender: string;
16
- selected: string;
17
- };
package/dist/constants.js CHANGED
@@ -3,18 +3,9 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = exports.IFRAME_SOURCE_NAME = exports.EDITOR_SOURCE_NAME = exports.EDITOR_PAGE_PATH = exports.COMPONENT_PREVIEW_PAGE_PATH = exports.ATTRIBUTES = void 0;
6
+ exports.VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = exports.IFRAME_SOURCE_NAME = exports.EDITOR_SOURCE_NAME = exports.EDITOR_PAGE_PATH = exports.COMPONENT_PREVIEW_PAGE_PATH = void 0;
7
7
  const EDITOR_PAGE_PATH = exports.EDITOR_PAGE_PATH = "/__nooku__/editor",
8
8
  COMPONENT_PREVIEW_PAGE_PATH = exports.COMPONENT_PREVIEW_PAGE_PATH = "/__nooku__/component-preview",
9
9
  VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = exports.VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = "/__nooku__/virtual-sfc-editor",
10
10
  IFRAME_SOURCE_NAME = exports.IFRAME_SOURCE_NAME = "nooku-frame",
11
- EDITOR_SOURCE_NAME = exports.EDITOR_SOURCE_NAME = "nooku-editor",
12
- ATTRIBUTES = exports.ATTRIBUTES = {
13
- id: "data-node-id",
14
- path: "data-node-path",
15
- type: "data-node-type",
16
- index: "data-node-index",
17
- component: "data-node-component",
18
- forceRender: "data-node-force-render",
19
- selected: "data-node-selected"
20
- };
11
+ EDITOR_SOURCE_NAME = exports.EDITOR_SOURCE_NAME = "nooku-editor";
@@ -1,9 +1 @@
1
- export const EDITOR_PAGE_PATH = "/__nooku__/editor", COMPONENT_PREVIEW_PAGE_PATH = "/__nooku__/component-preview", VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = "/__nooku__/virtual-sfc-editor", IFRAME_SOURCE_NAME = "nooku-frame", EDITOR_SOURCE_NAME = "nooku-editor", ATTRIBUTES = {
2
- id: "data-node-id",
3
- path: "data-node-path",
4
- type: "data-node-type",
5
- index: "data-node-index",
6
- component: "data-node-component",
7
- forceRender: "data-node-force-render",
8
- selected: "data-node-selected"
9
- };
1
+ export const EDITOR_PAGE_PATH = "/__nooku__/editor", COMPONENT_PREVIEW_PAGE_PATH = "/__nooku__/component-preview", VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = "/__nooku__/virtual-sfc-editor", IFRAME_SOURCE_NAME = "nooku-frame", EDITOR_SOURCE_NAME = "nooku-editor";
package/dist/editor.js CHANGED
@@ -7,58 +7,60 @@ exports.createEditorClient = createEditorClient;
7
7
  var _constants = require("./constants");
8
8
  var _rpc = require("@nookuio/rpc");
9
9
  var _telejson = require("telejson");
10
- function y(a) {
11
- const n = (0, _telejson.parse)(a, {
10
+ function l(s) {
11
+ const a = (0, _telejson.parse)(s, {
12
12
  maxDepth: 1 / 0
13
13
  }),
14
- r = e => {
15
- if (Array.isArray(e)) e.forEach((t, s) => {
16
- e[s] = r(t);
17
- });else if (e && typeof e == "object") {
18
- if (e.hasOwnProperty("__v_isRef")) return {
19
- ...e,
14
+ n = r => {
15
+ if (Array.isArray(r)) r.forEach((e, t) => {
16
+ r[t] = n(e);
17
+ });else if (r && typeof r == "object") {
18
+ if (r.hasOwnProperty("__v_isRef")) return {
19
+ ...r,
20
20
  __v_isRef: "true",
21
- value: e.hasOwnProperty("value") && e.value !== void 0 ? e.value : e._value ?? e._rawValue
21
+ value: r.hasOwnProperty("value") && r.value !== void 0 ? r.value : r._value ?? r._rawValue
22
22
  };
23
- Object.keys(e).forEach(t => {
24
- e[t] = r(e[t]);
23
+ Object.keys(r).forEach(e => {
24
+ r[e] = n(r[e]);
25
25
  });
26
26
  }
27
- return e;
27
+ return r;
28
28
  };
29
- return r(n);
29
+ return n(a);
30
30
  }
31
- function createEditorClient(a) {
32
- let n;
33
- function r() {
34
- return (!n || !n.isConnected) && (n = typeof a == "string" ? document.querySelector(`#${a}`) : a), n;
31
+ function createEditorClient(s) {
32
+ let a;
33
+ function n() {
34
+ return (!a || !a.isConnected) && (a = typeof s == "string" ? document.querySelector(`#${s}`) : s), a;
35
35
  }
36
- return (0, _rpc.createClient)({}, {
36
+ const i = new Map();
37
+ return window.addEventListener("message", async e => {
38
+ if (typeof e.data != "object" || e.data.source !== _constants.IFRAME_SOURCE_NAME || e.data.type === "event" || !e.data.response) return;
39
+ const t = i.get(e.data.response.id);
40
+ t && (i.delete(e.data.response.id), t(e.data.response));
41
+ }), (0, _rpc.createClient)({}, {
37
42
  handle(e) {
38
43
  window.addEventListener("message", async t => {
39
44
  if (typeof t.data != "object" || t.data.source !== _constants.IFRAME_SOURCE_NAME || t.data.type === "event" || !t.data.request) return;
40
- const s = r();
41
- if (!s) return;
42
- const o = await e(t.data.request);
43
- s.contentWindow?.postMessage({
45
+ const o = n();
46
+ if (!o) return;
47
+ const d = await e(t.data.request);
48
+ o.contentWindow?.postMessage({
44
49
  source: _constants.EDITOR_SOURCE_NAME,
45
- response: o
50
+ response: d
46
51
  }, "*");
47
52
  });
48
53
  },
49
54
  async invoke(e) {
50
- const t = r();
51
- return t ? new Promise((s, o) => {
52
- const c = setTimeout(() => {
53
- window.removeEventListener("message", d), o(new Error("Request timed out"));
54
- }, 5e3);
55
- function d(i) {
56
- typeof i.data == "object" && (i.data.source !== _constants.IFRAME_SOURCE_NAME || !i.data.response || i.data.response.id === e.id && (clearTimeout(c), window.removeEventListener("message", d), s(i.data.response)));
57
- }
58
- t.contentWindow?.postMessage({
55
+ const t = n();
56
+ return t ? new Promise((o, d) => {
57
+ const c = setTimeout(() => d(new Error("Request timed out")), 5e3);
58
+ i.set(e.id, m => {
59
+ clearTimeout(c), o(m);
60
+ }), t.contentWindow?.postMessage({
59
61
  source: _constants.EDITOR_SOURCE_NAME,
60
62
  request: e
61
- }, "*"), window.addEventListener("message", d);
63
+ }, "*");
62
64
  }) : {
63
65
  type: "response",
64
66
  id: e.id,
@@ -67,7 +69,7 @@ function createEditorClient(a) {
67
69
  };
68
70
  },
69
71
  emit(e) {
70
- const t = r();
72
+ const t = n();
71
73
  t && t.contentWindow?.postMessage({
72
74
  source: _constants.EDITOR_SOURCE_NAME,
73
75
  type: "event",
@@ -79,7 +81,11 @@ function createEditorClient(a) {
79
81
  typeof t.data == "object" && (t.data.source !== _constants.IFRAME_SOURCE_NAME || t.data.type !== "event" || !t.data.request || e(t.data.request));
80
82
  });
81
83
  },
82
- deserialize: y,
84
+ destroy() {
85
+ i.clear();
86
+ },
87
+ timeout: 5e3,
88
+ deserialize: l,
83
89
  serialize: e => (0, _telejson.stringify)(e, {
84
90
  maxDepth: 1 / 0
85
91
  })
package/dist/editor.mjs CHANGED
@@ -1,55 +1,57 @@
1
1
  import { EDITOR_SOURCE_NAME as f, IFRAME_SOURCE_NAME as u } from "./constants.mjs";
2
- import { createClient as E } from "@nookuio/rpc";
3
- import { stringify as p, parse as l } from "telejson";
4
- function y(a) {
5
- const n = l(a, { maxDepth: 1 / 0 }), r = (e) => {
6
- if (Array.isArray(e))
7
- e.forEach((t, s) => {
8
- e[s] = r(t);
2
+ import { createClient as p } from "@nookuio/rpc";
3
+ import { stringify as y, parse as E } from "telejson";
4
+ function l(s) {
5
+ const a = E(s, { maxDepth: 1 / 0 }), n = (r) => {
6
+ if (Array.isArray(r))
7
+ r.forEach((e, t) => {
8
+ r[t] = n(e);
9
9
  });
10
- else if (e && typeof e == "object") {
11
- if (e.hasOwnProperty("__v_isRef"))
10
+ else if (r && typeof r == "object") {
11
+ if (r.hasOwnProperty("__v_isRef"))
12
12
  return {
13
- ...e,
13
+ ...r,
14
14
  __v_isRef: "true",
15
15
  // converted to string
16
- value: e.hasOwnProperty("value") && e.value !== void 0 ? e.value : e._value ?? e._rawValue
16
+ value: r.hasOwnProperty("value") && r.value !== void 0 ? r.value : r._value ?? r._rawValue
17
17
  };
18
- Object.keys(e).forEach((t) => {
19
- e[t] = r(e[t]);
18
+ Object.keys(r).forEach((e) => {
19
+ r[e] = n(r[e]);
20
20
  });
21
21
  }
22
- return e;
22
+ return r;
23
23
  };
24
- return r(n);
24
+ return n(a);
25
25
  }
26
- export function createEditorClient(a) {
27
- let n;
28
- function r() {
29
- return (!n || !n.isConnected) && (n = typeof a == "string" ? document.querySelector(`#${a}`) : a), n;
26
+ export function createEditorClient(s) {
27
+ let a;
28
+ function n() {
29
+ return (!a || !a.isConnected) && (a = typeof s == "string" ? document.querySelector(`#${s}`) : s), a;
30
30
  }
31
- return E(
31
+ const i = /* @__PURE__ */ new Map();
32
+ return window.addEventListener("message", async (e) => {
33
+ if (typeof e.data != "object" || e.data.source !== u || e.data.type === "event" || !e.data.response) return;
34
+ const t = i.get(e.data.response.id);
35
+ t && (i.delete(e.data.response.id), t(e.data.response));
36
+ }), p(
32
37
  {},
33
38
  {
34
39
  handle(e) {
35
40
  window.addEventListener("message", async (t) => {
36
41
  if (typeof t.data != "object" || t.data.source !== u || t.data.type === "event" || !t.data.request) return;
37
- const s = r();
38
- if (!s) return;
39
- const o = await e(t.data.request);
40
- s.contentWindow?.postMessage({ source: f, response: o }, "*");
42
+ const o = n();
43
+ if (!o) return;
44
+ const d = await e(t.data.request);
45
+ o.contentWindow?.postMessage({ source: f, response: d }, "*");
41
46
  });
42
47
  },
43
48
  async invoke(e) {
44
- const t = r();
45
- return t ? new Promise((s, o) => {
46
- const c = setTimeout(() => {
47
- window.removeEventListener("message", d), o(new Error("Request timed out"));
48
- }, 5e3);
49
- function d(i) {
50
- typeof i.data == "object" && (i.data.source !== u || !i.data.response || i.data.response.id === e.id && (clearTimeout(c), window.removeEventListener("message", d), s(i.data.response)));
51
- }
52
- t.contentWindow?.postMessage({ source: f, request: e }, "*"), window.addEventListener("message", d);
49
+ const t = n();
50
+ return t ? new Promise((o, d) => {
51
+ const c = setTimeout(() => d(new Error("Request timed out")), 5e3);
52
+ i.set(e.id, (m) => {
53
+ clearTimeout(c), o(m);
54
+ }), t.contentWindow?.postMessage({ source: f, request: e }, "*");
53
55
  }) : {
54
56
  type: "response",
55
57
  id: e.id,
@@ -58,7 +60,7 @@ export function createEditorClient(a) {
58
60
  };
59
61
  },
60
62
  emit(e) {
61
- const t = r();
63
+ const t = n();
62
64
  t && t.contentWindow?.postMessage({ source: f, type: "event", request: e }, "*");
63
65
  },
64
66
  handleEvent(e) {
@@ -66,8 +68,12 @@ export function createEditorClient(a) {
66
68
  typeof t.data == "object" && (t.data.source !== u || t.data.type !== "event" || !t.data.request || e(t.data.request));
67
69
  });
68
70
  },
69
- deserialize: y,
70
- serialize: (e) => p(e, { maxDepth: 1 / 0 })
71
+ destroy() {
72
+ i.clear();
73
+ },
74
+ timeout: 5e3,
75
+ deserialize: l,
76
+ serialize: (e) => y(e, { maxDepth: 1 / 0 })
71
77
  }
72
78
  );
73
79
  }
package/dist/iframe.d.ts CHANGED
@@ -2,7 +2,7 @@ import type { CoreIframeContext, EditorContext, EditorEvents, VueIframeContext,
2
2
  /**
3
3
  * This function should be called inside the iframe
4
4
  */
5
- export declare function createVueIframeClient(vueCtx: Omit<VueIframeContext, keyof CoreIframeContext>, options?: {
5
+ export declare function createVueIframeClient(vueCtx: Omit<VueIframeContext, Exclude<keyof CoreIframeContext, 'updateCode'>>, options?: {
6
6
  /**
7
7
  * If true, the default console methods will be disabled
8
8
  *
package/dist/iframe.js CHANGED
@@ -7,139 +7,164 @@ exports.createVueIframeClient = createVueIframeClient;
7
7
  var _constants = require("./constants");
8
8
  var _rpc = require("@nookuio/rpc");
9
9
  var _telejson = require("telejson");
10
- var _dragDrop = require("./drag-drop");
11
- function p(u, d) {
12
- return `[data-node-id="${d}"][data-node-path="${u}"]`;
10
+ function m(c, a) {
11
+ return `[data-node-id="${a}"][data-node-path="${c}"]`;
13
12
  }
14
- function h(u, d) {
15
- const m = document.querySelectorAll(u);
16
- if (!m?.length) return;
17
- const r = Array.from(m).map(f => {
18
- const l = f.getBoundingClientRect(),
19
- g = {
20
- width: l.width,
21
- height: l.height,
22
- top: l.top,
23
- left: l.left
13
+ function g(c, a) {
14
+ const n = document.querySelectorAll(c);
15
+ if (!n?.length) return;
16
+ const t = Array.from(n).map(d => {
17
+ const r = d.getBoundingClientRect(),
18
+ s = {
19
+ width: r.width,
20
+ height: r.height,
21
+ top: r.top,
22
+ left: r.left
24
23
  };
25
- if (!d) return g;
26
- const c = window.getComputedStyle(f) ?? {};
24
+ if (!a) return s;
25
+ const i = window.getComputedStyle(d) ?? {};
27
26
  return {
28
- ...g,
27
+ ...s,
29
28
  padding: {
30
- top: c.paddingTop,
31
- right: c.paddingRight,
32
- bottom: c.paddingBottom,
33
- left: c.paddingLeft
29
+ top: i.paddingTop,
30
+ right: i.paddingRight,
31
+ bottom: i.paddingBottom,
32
+ left: i.paddingLeft
34
33
  }
35
34
  };
36
35
  });
37
- if (r?.length) return r.length === 1 ? r[0] : r;
36
+ if (t?.length) return t.length === 1 ? t[0] : t;
38
37
  }
39
- function createVueIframeClient(u, d) {
40
- const m = (0, _dragDrop.createDragDropContext)(),
41
- r = (0, _rpc.createClient)({
42
- ...u,
43
- ...m,
44
- async editText({
45
- path: e,
46
- id: t
47
- }) {
48
- if (!e || t === void 0) return;
49
- const i = p(e, t),
50
- n = document.querySelector(i);
51
- if (!n) return;
52
- n.style.outline = "none", n.setAttribute("spellcheck", "false"), n.setAttribute("contenteditable", "true");
53
- const o = a => {
54
- const E = a.target;
55
- if (!E) return;
56
- const y = E.innerText;
57
- n.removeAttribute("contenteditable"), r.emit("text-update", {
58
- path: e,
59
- id: t,
60
- content: y
61
- }), n.removeEventListener("blur", o), n.removeEventListener("keydown", s), n.blur();
62
- },
63
- s = a => {
64
- a.key === "Enter" && (a.stopPropagation(), a.preventDefault(), o(a));
65
- };
66
- n.addEventListener("keydown", s), n.addEventListener("blur", o), n.focus();
67
- },
68
- async getHoveredElement({
69
- path: e,
70
- id: t,
71
- x: i,
72
- y: n
73
- }) {
74
- if (e) if (i !== void 0 && n !== void 0) {
75
- let o = document.elementFromPoint(i, n);
76
- if (!o) return;
77
- let s = o.getAttribute("data-node-path");
78
- if (s !== e) {
79
- if (!o.parentElement) return;
80
- for (; o.parentElement && s !== e;) o = o.parentElement, s = o.getAttribute("data-node-path");
81
- }
82
- const a = o.getAttribute("data-node-id");
83
- if (!a) return;
84
- const E = p(e, a),
85
- y = h(E, !1);
86
- return y ? {
87
- id: a,
88
- path: e,
89
- data: y
90
- } : void 0;
91
- } else {
92
- const o = p(e, t),
93
- s = h(o, !1);
94
- return s ? {
38
+ function C(c) {
39
+ async function a() {
40
+ return document.body.scrollHeight > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
41
+ }
42
+ return {
43
+ async editText({
44
+ path: n,
45
+ id: t
46
+ }) {
47
+ if (!n || t === void 0) return;
48
+ const d = m(n, t),
49
+ r = document.querySelector(d);
50
+ if (!r) return;
51
+ r.style.outline = "none", r.setAttribute("spellcheck", "false"), r.setAttribute("contenteditable", "true");
52
+ const s = l => {
53
+ const e = l.target;
54
+ if (!e) return;
55
+ const o = e.innerText;
56
+ r.removeAttribute("contenteditable"), c?.onTextUpdate?.({
57
+ path: n,
95
58
  id: t,
96
- path: e,
97
- data: s
98
- } : void 0;
59
+ content: o
60
+ }), r.removeEventListener("blur", s), r.removeEventListener("keydown", i), r.blur();
61
+ },
62
+ i = l => {
63
+ l.key === "Enter" && (l.stopPropagation(), l.preventDefault(), s(l));
64
+ };
65
+ r.addEventListener("keydown", i), r.addEventListener("blur", s), r.focus();
66
+ },
67
+ async getHoveredElement({
68
+ path: n,
69
+ id: t,
70
+ x: d,
71
+ y: r
72
+ }) {
73
+ if (n) if (d !== void 0 && r !== void 0) {
74
+ let s = document.elementFromPoint(d, r);
75
+ if (!s) return;
76
+ let i = s.getAttribute("data-node-path");
77
+ if (i !== n) {
78
+ if (!s.parentElement) return;
79
+ for (; s.parentElement && i !== n;) s = s.parentElement, i = s.getAttribute("data-node-path");
99
80
  }
100
- },
101
- async getPageHeight() {
102
- return document.body.scrollHeight > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
103
- },
104
- async getSelectedElement({
105
- path: e,
106
- id: t
107
- }) {
108
- const i = p(e, t),
109
- n = h(i, !0);
110
- if (n) return {
111
- path: e,
81
+ const l = s.getAttribute("data-node-id");
82
+ if (!l) return;
83
+ const e = m(n, l),
84
+ o = g(e, !1);
85
+ return o ? {
86
+ id: l,
87
+ path: n,
88
+ data: o
89
+ } : void 0;
90
+ } else {
91
+ const s = m(n, t),
92
+ i = g(s, !1);
93
+ return i ? {
112
94
  id: t,
113
- data: n
114
- };
115
- },
116
- setTheme(e) {
117
- const t = document.querySelector("body");
118
- e === "dark" ? (document.documentElement.classList.remove("light"), document.documentElement.classList.add("dark"), t && (t.classList.remove("light"), t.classList.add("dark"))) : (document.documentElement.classList.remove("dark"), document.documentElement.classList.add("light"), t && (t.classList.remove("dark"), t.classList.add("light")));
95
+ path: n,
96
+ data: i
97
+ } : void 0;
119
98
  }
99
+ },
100
+ getPageHeight: a,
101
+ async getSelectedElement({
102
+ path: n,
103
+ id: t
104
+ }) {
105
+ const d = m(n, t),
106
+ r = g(d, !0);
107
+ if (r) return {
108
+ path: n,
109
+ id: t,
110
+ data: r
111
+ };
112
+ },
113
+ setTheme(n) {
114
+ const t = document.querySelector("body");
115
+ n === "dark" ? (document.documentElement.classList.remove("light"), document.documentElement.classList.add("dark"), t && (t.classList.remove("light"), t.classList.add("dark"))) : (document.documentElement.classList.remove("dark"), document.documentElement.classList.add("light"), t && (t.classList.remove("dark"), t.classList.add("light")));
116
+ },
117
+ async updateCode(n, t) {
118
+ typeof t > "u" ? document.body.innerHTML = "" : document.body.innerHTML = t, c?.onResize?.(await a());
119
+ }
120
+ };
121
+ }
122
+ function createVueIframeClient(c, a) {
123
+ const n = new Map();
124
+ window.addEventListener("message", async e => {
125
+ if (typeof e.data != "object" || e.data.source !== _constants.EDITOR_SOURCE_NAME || e.data.type === "event" || !e.data.response) return;
126
+ const o = n.get(e.data.response.id);
127
+ o && (n.delete(e.data.response.id), o(e.data.response));
128
+ }), window.addEventListener("keydown", e => {
129
+ if (!t) return;
130
+ const o = document.activeElement,
131
+ u = o?.isContentEditable || o?.tagName === "INPUT" || o?.tagName === "TEXTAREA";
132
+ t.emit("keydown", {
133
+ key: e.key,
134
+ ctrlKey: e.ctrlKey,
135
+ shiftKey: e.shiftKey,
136
+ altKey: e.altKey,
137
+ metaKey: e.metaKey,
138
+ repeat: e.repeat,
139
+ inputFocused: u
140
+ });
141
+ });
142
+ const t = (0, _rpc.createClient)({
143
+ ...C({
144
+ onResize: (...e) => t?.emit("resize", ...e),
145
+ onTextUpdate: (...e) => t?.emit("text-update", ...e)
146
+ }),
147
+ ...c
120
148
  }, {
121
149
  handle(e) {
122
- window.addEventListener("message", async t => {
123
- if (typeof t.data != "object" || t.data.source !== _constants.EDITOR_SOURCE_NAME || t.data.type === "event" || !t.data.request) return;
124
- const i = await e(t.data.request);
150
+ window.addEventListener("message", async o => {
151
+ if (typeof o.data != "object" || o.data.source !== _constants.EDITOR_SOURCE_NAME || o.data.type === "event" || !o.data.request) return;
152
+ const u = await e(o.data.request);
125
153
  window.parent.postMessage({
126
154
  source: _constants.IFRAME_SOURCE_NAME,
127
- response: i
155
+ response: u
128
156
  }, "*");
129
157
  });
130
158
  },
131
159
  invoke(e) {
132
- return new Promise((t, i) => {
133
- const n = setTimeout(() => {
134
- window.removeEventListener("message", o), i(new Error("Request timed out"));
135
- }, 5e3);
136
- function o(s) {
137
- typeof s.data == "object" && (s.data.source !== _constants.EDITOR_SOURCE_NAME || !s.data.response || s.data.response.id === e.id && (clearTimeout(n), window.removeEventListener("message", o), t(s.data.response)));
138
- }
139
- window.parent.postMessage({
160
+ return new Promise((o, u) => {
161
+ const E = setTimeout(() => u(new Error("Request timed out")), 5e3);
162
+ n.set(e.id, p => {
163
+ clearTimeout(E), o(p);
164
+ }), window.parent.postMessage({
140
165
  source: _constants.IFRAME_SOURCE_NAME,
141
166
  request: e
142
- }, "*"), window.addEventListener("message", o);
167
+ }, "*");
143
168
  });
144
169
  },
145
170
  emit(e) {
@@ -150,31 +175,35 @@ function createVueIframeClient(u, d) {
150
175
  }, "*");
151
176
  },
152
177
  handleEvent(e) {
153
- window.addEventListener("message", t => {
154
- typeof t.data == "object" && (t.data.source !== _constants.EDITOR_SOURCE_NAME || t.data.type !== "event" || !t.data.request || e(t.data.request));
178
+ window.addEventListener("message", o => {
179
+ typeof o.data == "object" && (o.data.source !== _constants.EDITOR_SOURCE_NAME || o.data.type !== "event" || !o.data.request || e(o.data.request));
155
180
  });
156
181
  },
182
+ destroy() {
183
+ n.clear();
184
+ },
157
185
  deserialize: e => (0, _telejson.parse)(e),
158
186
  serialize: e => (0, _telejson.stringify)(e, {
159
187
  maxDepth: 1 / 0
160
- })
188
+ }),
189
+ timeout: 5e3
161
190
  }),
162
- f = d?.disableDefaultConsole ? void 0 : console.log.bind(console),
163
- l = d?.disableDefaultConsole ? void 0 : console.warn.bind(console),
164
- g = d?.disableDefaultConsole ? void 0 : console.error.bind(console),
165
- c = d?.disableDefaultConsole ? void 0 : console.info.bind(console);
191
+ d = a?.disableDefaultConsole ? void 0 : console.log.bind(console),
192
+ r = a?.disableDefaultConsole ? void 0 : console.warn.bind(console),
193
+ s = a?.disableDefaultConsole ? void 0 : console.error.bind(console),
194
+ i = a?.disableDefaultConsole ? void 0 : console.info.bind(console);
166
195
  return console.log = (...e) => {
167
- r.emit("console", "log", e), f?.(...e);
196
+ t.emit("console", "log", e), d?.(...e);
168
197
  }, console.warn = (...e) => {
169
- l?.(...e);
198
+ r?.(...e);
170
199
  }, console.error = (...e) => {
171
- r.emit("console", "error", e), g?.(...e);
200
+ t.emit("console", "error", e), s?.(...e);
172
201
  }, console.info = (...e) => {
173
- r.emit("console", "info", e), c?.(...e);
174
- }, window.addEventListener("resize", async () => r.emit("resize", await r.$context.getPageHeight())), new MutationObserver(async () => r.emit("resize", await r.$context.getPageHeight())).observe(document.body, {
202
+ t.emit("console", "info", e), i?.(...e);
203
+ }, window.addEventListener("resize", async () => t.emit("resize", await t.$context.getPageHeight())), new MutationObserver(async () => t.emit("resize", await t.$context.getPageHeight())).observe(document.body, {
175
204
  childList: !0,
176
205
  subtree: !0,
177
206
  attributes: !0,
178
207
  characterData: !0
179
- }), r.emit("ready"), r;
208
+ }), t.emit("ready"), t;
180
209
  }