@nookuio/iframe 1.0.6 → 1.0.7

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 (3) hide show
  1. package/dist/iframe.js +63 -63
  2. package/dist/iframe.mjs +57 -57
  3. package/package.json +1 -1
package/dist/iframe.js CHANGED
@@ -7,21 +7,21 @@ exports.createVueIframeClient = createVueIframeClient;
7
7
  var _constants = require("./constants");
8
8
  var _rpc = require("@nookuio/rpc");
9
9
  var _telejson = require("telejson");
10
- function y(i, r) {
11
- return `[data-node-id="${r}"][data-node-path="${i}"]`;
10
+ function y(s, o) {
11
+ return `[data-node-id="${o}"][data-node-path="${s}"]`;
12
12
  }
13
- function E(i, r) {
14
- const n = document.querySelectorAll(i);
13
+ function E(s, o) {
14
+ const n = document.querySelectorAll(s);
15
15
  if (!n?.length) return;
16
16
  const e = Array.from(n).map(d => {
17
- const o = d.getBoundingClientRect(),
17
+ const r = d.getBoundingClientRect(),
18
18
  a = {
19
- width: o.width,
20
- height: o.height,
21
- top: o.top,
22
- left: o.left
19
+ width: r.width,
20
+ height: r.height,
21
+ top: r.top,
22
+ left: r.left
23
23
  };
24
- if (!r) return a;
24
+ if (!o) return a;
25
25
  const c = window.getComputedStyle(d) ?? {};
26
26
  return {
27
27
  ...a,
@@ -35,8 +35,8 @@ function E(i, r) {
35
35
  });
36
36
  if (e?.length) return e.length === 1 ? e[0] : e;
37
37
  }
38
- function T(i) {
39
- async function r() {
38
+ function T(s) {
39
+ async function o() {
40
40
  return document.body.scrollHeight > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
41
41
  }
42
42
  return {
@@ -46,32 +46,32 @@ function T(i) {
46
46
  }) {
47
47
  if (!n || e === void 0) return;
48
48
  const d = y(n, e),
49
- o = document.querySelector(d);
50
- if (!o) return;
51
- o.style.outline = "none", o.setAttribute("spellcheck", "false"), o.setAttribute("contenteditable", "true");
49
+ r = document.querySelector(d);
50
+ if (!r) return;
51
+ r.style.outline = "none", r.setAttribute("spellcheck", "false"), r.setAttribute("contenteditable", "true");
52
52
  const a = l => {
53
53
  const u = l.target;
54
54
  if (!u) return;
55
55
  const m = u.innerText;
56
- o.removeAttribute("contenteditable"), i?.onTextUpdate?.({
56
+ r.removeAttribute("contenteditable"), s?.onTextUpdate?.({
57
57
  path: n,
58
58
  id: e,
59
59
  content: m
60
- }), o.removeEventListener("blur", a), o.removeEventListener("keydown", c), o.blur();
60
+ }), r.removeEventListener("blur", a), r.removeEventListener("keydown", c), r.blur();
61
61
  },
62
62
  c = l => {
63
63
  l.key === "Enter" && (l.stopPropagation(), l.preventDefault(), a(l));
64
64
  };
65
- o.addEventListener("keydown", c), o.addEventListener("blur", a), o.focus();
65
+ r.addEventListener("keydown", c), r.addEventListener("blur", a), r.focus();
66
66
  },
67
67
  async getHoveredElement({
68
68
  path: n,
69
69
  id: e,
70
70
  x: d,
71
- y: o
71
+ y: r
72
72
  }) {
73
- if (n) if (d !== void 0 && o !== void 0) {
74
- let a = document.elementFromPoint(d, o);
73
+ if (n) if (d !== void 0 && r !== void 0) {
74
+ let a = document.elementFromPoint(d, r);
75
75
  if (!a) return;
76
76
  let c = a.getAttribute("data-node-path");
77
77
  if (c !== n) {
@@ -97,17 +97,17 @@ function T(i) {
97
97
  } : void 0;
98
98
  }
99
99
  },
100
- getPageHeight: r,
100
+ getPageHeight: o,
101
101
  async getSelectedElement({
102
102
  path: n,
103
103
  id: e
104
104
  }) {
105
105
  const d = y(n, e),
106
- o = E(d, !0);
107
- if (o) return {
106
+ r = E(d, !0);
107
+ if (r) return {
108
108
  path: n,
109
109
  id: e,
110
- data: o
110
+ data: r
111
111
  };
112
112
  },
113
113
  setTheme(n) {
@@ -115,20 +115,20 @@ function T(i) {
115
115
  n === "dark" ? (document.documentElement.classList.remove("light"), document.documentElement.classList.add("dark"), e && (e.classList.remove("light"), e.classList.add("dark"))) : (document.documentElement.classList.remove("dark"), document.documentElement.classList.add("light"), e && (e.classList.remove("dark"), e.classList.add("light")));
116
116
  },
117
117
  async updateCode(n, e) {
118
- typeof e > "u" ? document.body.innerHTML = "" : document.body.innerHTML = e, i?.onResize?.(await r());
118
+ typeof e > "u" ? document.body.innerHTML = "" : document.body.innerHTML = e, s?.onResize?.(await o());
119
119
  }
120
120
  };
121
121
  }
122
- function createVueIframeClient(i, r) {
122
+ function createVueIframeClient(s, o) {
123
123
  const n = new Map();
124
124
  window.addEventListener("message", async t => {
125
125
  if (typeof t.data != "object" || t.data.source !== _constants.EDITOR_SOURCE_NAME || t.data.type === "event" || !t.data.response) return;
126
- const s = n.get(t.data.response.id);
127
- s && (n.delete(t.data.response.id), s(t.data.response));
126
+ const i = n.get(t.data.response.id);
127
+ i && (n.delete(t.data.response.id), i(t.data.response));
128
128
  }), window.addEventListener("keydown", t => {
129
129
  if (!e) return;
130
- const s = document.activeElement,
131
- f = s?.isContentEditable || s?.tagName === "INPUT" || s?.tagName === "TEXTAREA";
130
+ const i = document.activeElement,
131
+ f = i?.isContentEditable || i?.tagName === "INPUT" || i?.tagName === "TEXTAREA";
132
132
  e.emit("keydown", {
133
133
  key: t.key,
134
134
  ctrlKey: t.ctrlKey,
@@ -144,12 +144,12 @@ function createVueIframeClient(i, r) {
144
144
  onResize: (...t) => e?.emit("resize", ...t),
145
145
  onTextUpdate: (...t) => e?.emit("text-update", ...t)
146
146
  }),
147
- ...i
147
+ ...s
148
148
  }, {
149
149
  handle(t) {
150
- window.addEventListener("message", async s => {
151
- if (typeof s.data != "object" || s.data.source !== _constants.EDITOR_SOURCE_NAME || s.data.type === "event" || !s.data.request) return;
152
- const f = await t(s.data.request);
150
+ window.addEventListener("message", async i => {
151
+ if (typeof i.data != "object" || i.data.source !== _constants.EDITOR_SOURCE_NAME || i.data.type === "event" || !i.data.request) return;
152
+ const f = await t(i.data.request);
153
153
  window.parent.postMessage({
154
154
  source: _constants.IFRAME_SOURCE_NAME,
155
155
  response: f
@@ -157,10 +157,10 @@ function createVueIframeClient(i, r) {
157
157
  });
158
158
  },
159
159
  invoke(t) {
160
- return new Promise((s, f) => {
160
+ return new Promise((i, f) => {
161
161
  const h = setTimeout(() => f(new Error("Request timed out")), 5e3);
162
162
  n.set(t.id, C => {
163
- clearTimeout(h), s(C);
163
+ clearTimeout(h), i(C);
164
164
  }), window.parent.postMessage({
165
165
  source: _constants.IFRAME_SOURCE_NAME,
166
166
  request: t
@@ -175,8 +175,8 @@ function createVueIframeClient(i, r) {
175
175
  }, "*");
176
176
  },
177
177
  handleEvent(t) {
178
- window.addEventListener("message", s => {
179
- typeof s.data == "object" && (s.data.source !== _constants.EDITOR_SOURCE_NAME || s.data.type !== "event" || !s.data.request || t(s.data.request));
178
+ window.addEventListener("message", i => {
179
+ typeof i.data == "object" && (i.data.source !== _constants.EDITOR_SOURCE_NAME || i.data.type !== "event" || !i.data.request || t(i.data.request));
180
180
  });
181
181
  },
182
182
  destroy() {
@@ -188,14 +188,14 @@ function createVueIframeClient(i, r) {
188
188
  }),
189
189
  timeout: 5e3
190
190
  }),
191
- d = r?.disableDefaultConsole ? void 0 : console.log.bind(console),
192
- o = r?.disableDefaultConsole ? void 0 : console.warn.bind(console),
193
- a = r?.disableDefaultConsole ? void 0 : console.error.bind(console),
194
- c = r?.disableDefaultConsole ? void 0 : console.info.bind(console);
191
+ d = o?.disableDefaultConsole ? void 0 : console.log.bind(console),
192
+ r = o?.disableDefaultConsole ? void 0 : console.warn.bind(console),
193
+ a = o?.disableDefaultConsole ? void 0 : console.error.bind(console),
194
+ c = o?.disableDefaultConsole ? void 0 : console.info.bind(console);
195
195
  console.log = (...t) => {
196
196
  e.emit("console", "log", t), d?.(...t);
197
197
  }, console.warn = (...t) => {
198
- o?.(...t);
198
+ r?.(...t);
199
199
  }, console.error = (...t) => {
200
200
  e.emit("console", "error", t), a?.(...t);
201
201
  }, console.info = (...t) => {
@@ -212,29 +212,29 @@ function createVueIframeClient(i, r) {
212
212
  b(w().styles);
213
213
  }), e.emit("ready"), e;
214
214
  }
215
- function x(i) {
216
- const r = document.querySelector("#nooku-injected-tailwind-css");
217
- if (r) {
218
- if (i === void 0) {
219
- r.remove();
215
+ function x(s) {
216
+ const o = document.querySelector("#nooku-injected-tailwind-css");
217
+ if (o) {
218
+ if (s === void 0) {
219
+ o.remove();
220
220
  return;
221
221
  }
222
- const d = Number(r.getAttribute("data-tailwind-version"));
223
- if (i === d) return;
224
- r.remove();
222
+ const d = Number(o.getAttribute("data-tailwind-version"));
223
+ if (s === d) return;
224
+ o.remove();
225
225
  }
226
- if (i === void 0) return;
227
- const n = i === 3 ? "https://cdn.tailwindcss.com" : "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
226
+ if (s === void 0) return;
227
+ const n = s === 3 ? "https://cdn.tailwindcss.com" : "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
228
228
  e = document.createElement("script");
229
- e.id = "nooku-injected-tailwind-css", e.src = n, e.setAttribute("data-tailwind-version", String(i)), document.head.appendChild(e);
229
+ e.id = "nooku-injected-tailwind-css", e.src = n, e.setAttribute("data-tailwind-version", String(s)), document.head.appendChild(e);
230
230
  }
231
- function b(i) {
232
- if (i) try {
233
- const r = JSON.parse(i || "{}");
234
- if (r && Object.values(r).length > 0) {
231
+ function b(s) {
232
+ if (!(!s || typeof s != "string")) try {
233
+ const o = JSON.parse(s || "{}");
234
+ if (o && Object.values(o).length > 0) {
235
235
  const n = document.querySelector("body");
236
236
  if (!n) return;
237
- Object.entries(r).forEach(([e, d]) => {
237
+ o.backgroundColor && (n.style.backgroundImage = "", n.style.background = ""), Object.entries(o).forEach(([e, d]) => {
238
238
  typeof d == "string" && (n.style[e] = d);
239
239
  });
240
240
  }
@@ -242,9 +242,9 @@ function b(i) {
242
242
  }
243
243
  function w() {
244
244
  try {
245
- const i = new URLSearchParams(window.location.search),
246
- r = {};
247
- return i.forEach((n, e) => r[e] = n), r;
245
+ const s = new URLSearchParams(window.location.search),
246
+ o = {};
247
+ return s.forEach((n, e) => o[e] = n), o;
248
248
  } catch {
249
249
  return {};
250
250
  }
package/dist/iframe.mjs CHANGED
@@ -1,20 +1,20 @@
1
1
  import { EDITOR_SOURCE_NAME as g, IFRAME_SOURCE_NAME as p } from "./constants.mjs";
2
2
  import { createClient as L } from "@nookuio/rpc";
3
3
  import { stringify as v, parse as S } from "telejson";
4
- function y(i, r) {
5
- return `[data-node-id="${r}"][data-node-path="${i}"]`;
4
+ function y(s, o) {
5
+ return `[data-node-id="${o}"][data-node-path="${s}"]`;
6
6
  }
7
- function E(i, r) {
8
- const n = document.querySelectorAll(i);
7
+ function E(s, o) {
8
+ const n = document.querySelectorAll(s);
9
9
  if (!n?.length) return;
10
10
  const e = Array.from(n).map((d) => {
11
- const o = d.getBoundingClientRect(), a = {
12
- width: o.width,
13
- height: o.height,
14
- top: o.top,
15
- left: o.left
11
+ const r = d.getBoundingClientRect(), a = {
12
+ width: r.width,
13
+ height: r.height,
14
+ top: r.top,
15
+ left: r.left
16
16
  };
17
- if (!r) return a;
17
+ if (!o) return a;
18
18
  const c = window.getComputedStyle(d) ?? {};
19
19
  return {
20
20
  ...a,
@@ -29,30 +29,30 @@ function E(i, r) {
29
29
  if (e?.length)
30
30
  return e.length === 1 ? e[0] : e;
31
31
  }
32
- function T(i) {
33
- async function r() {
32
+ function T(s) {
33
+ async function o() {
34
34
  return document.body.scrollHeight > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
35
35
  }
36
36
  return {
37
37
  async editText({ path: n, id: e }) {
38
38
  if (!n || e === void 0) return;
39
- const d = y(n, e), o = document.querySelector(d);
40
- if (!o) return;
41
- o.style.outline = "none", o.setAttribute("spellcheck", "false"), o.setAttribute("contenteditable", "true");
39
+ const d = y(n, e), r = document.querySelector(d);
40
+ if (!r) return;
41
+ r.style.outline = "none", r.setAttribute("spellcheck", "false"), r.setAttribute("contenteditable", "true");
42
42
  const a = (l) => {
43
43
  const u = l.target;
44
44
  if (!u) return;
45
45
  const m = u.innerText;
46
- o.removeAttribute("contenteditable"), i?.onTextUpdate?.({ path: n, id: e, content: m }), o.removeEventListener("blur", a), o.removeEventListener("keydown", c), o.blur();
46
+ r.removeAttribute("contenteditable"), s?.onTextUpdate?.({ path: n, id: e, content: m }), r.removeEventListener("blur", a), r.removeEventListener("keydown", c), r.blur();
47
47
  }, c = (l) => {
48
48
  l.key === "Enter" && (l.stopPropagation(), l.preventDefault(), a(l));
49
49
  };
50
- o.addEventListener("keydown", c), o.addEventListener("blur", a), o.focus();
50
+ r.addEventListener("keydown", c), r.addEventListener("blur", a), r.focus();
51
51
  },
52
- async getHoveredElement({ path: n, id: e, x: d, y: o }) {
52
+ async getHoveredElement({ path: n, id: e, x: d, y: r }) {
53
53
  if (n)
54
- if (d !== void 0 && o !== void 0) {
55
- let a = document.elementFromPoint(d, o);
54
+ if (d !== void 0 && r !== void 0) {
55
+ let a = document.elementFromPoint(d, r);
56
56
  if (!a) return;
57
57
  let c = a.getAttribute("data-node-path");
58
58
  if (c !== n) {
@@ -77,14 +77,14 @@ function T(i) {
77
77
  } : void 0;
78
78
  }
79
79
  },
80
- getPageHeight: r,
80
+ getPageHeight: o,
81
81
  async getSelectedElement({ path: n, id: e }) {
82
- const d = y(n, e), o = E(d, !0);
83
- if (o)
82
+ const d = y(n, e), r = E(d, !0);
83
+ if (r)
84
84
  return {
85
85
  path: n,
86
86
  id: e,
87
- data: o
87
+ data: r
88
88
  };
89
89
  },
90
90
  setTheme(n) {
@@ -92,7 +92,7 @@ function T(i) {
92
92
  n === "dark" ? (document.documentElement.classList.remove("light"), document.documentElement.classList.add("dark"), e && (e.classList.remove("light"), e.classList.add("dark"))) : (document.documentElement.classList.remove("dark"), document.documentElement.classList.add("light"), e && (e.classList.remove("dark"), e.classList.add("light")));
93
93
  },
94
94
  async updateCode(n, e) {
95
- typeof e > "u" ? document.body.innerHTML = "" : document.body.innerHTML = e, i?.onResize?.(await r());
95
+ typeof e > "u" ? document.body.innerHTML = "" : document.body.innerHTML = e, s?.onResize?.(await o());
96
96
  }
97
97
  // updateElementClass({ className, id, path }) {
98
98
  // const selector = getSelector(path, id);
@@ -118,15 +118,15 @@ function T(i) {
118
118
  // }
119
119
  };
120
120
  }
121
- export function createVueIframeClient(i, r) {
121
+ export function createVueIframeClient(s, o) {
122
122
  const n = /* @__PURE__ */ new Map();
123
123
  window.addEventListener("message", async (t) => {
124
124
  if (typeof t.data != "object" || t.data.source !== g || t.data.type === "event" || !t.data.response) return;
125
- const s = n.get(t.data.response.id);
126
- s && (n.delete(t.data.response.id), s(t.data.response));
125
+ const i = n.get(t.data.response.id);
126
+ i && (n.delete(t.data.response.id), i(t.data.response));
127
127
  }), window.addEventListener("keydown", (t) => {
128
128
  if (!e) return;
129
- const s = document.activeElement, f = s?.isContentEditable || s?.tagName === "INPUT" || s?.tagName === "TEXTAREA";
129
+ const i = document.activeElement, f = i?.isContentEditable || i?.tagName === "INPUT" || i?.tagName === "TEXTAREA";
130
130
  e.emit("keydown", {
131
131
  key: t.key,
132
132
  ctrlKey: t.ctrlKey,
@@ -143,21 +143,21 @@ export function createVueIframeClient(i, r) {
143
143
  onResize: (...t) => e?.emit("resize", ...t),
144
144
  onTextUpdate: (...t) => e?.emit("text-update", ...t)
145
145
  }),
146
- ...i
146
+ ...s
147
147
  },
148
148
  {
149
149
  handle(t) {
150
- window.addEventListener("message", async (s) => {
151
- if (typeof s.data != "object" || s.data.source !== g || s.data.type === "event" || !s.data.request) return;
152
- const f = await t(s.data.request);
150
+ window.addEventListener("message", async (i) => {
151
+ if (typeof i.data != "object" || i.data.source !== g || i.data.type === "event" || !i.data.request) return;
152
+ const f = await t(i.data.request);
153
153
  window.parent.postMessage({ source: p, response: f }, "*");
154
154
  });
155
155
  },
156
156
  invoke(t) {
157
- return new Promise((s, f) => {
157
+ return new Promise((i, f) => {
158
158
  const h = setTimeout(() => f(new Error("Request timed out")), 5e3);
159
159
  n.set(t.id, (C) => {
160
- clearTimeout(h), s(C);
160
+ clearTimeout(h), i(C);
161
161
  }), window.parent.postMessage({ source: p, request: t }, "*");
162
162
  });
163
163
  },
@@ -165,8 +165,8 @@ export function createVueIframeClient(i, r) {
165
165
  window.parent.postMessage({ source: p, type: "event", request: t }, "*");
166
166
  },
167
167
  handleEvent(t) {
168
- window.addEventListener("message", (s) => {
169
- typeof s.data == "object" && (s.data.source !== g || s.data.type !== "event" || !s.data.request || t(s.data.request));
168
+ window.addEventListener("message", (i) => {
169
+ typeof i.data == "object" && (i.data.source !== g || i.data.type !== "event" || !i.data.request || t(i.data.request));
170
170
  });
171
171
  },
172
172
  destroy() {
@@ -176,11 +176,11 @@ export function createVueIframeClient(i, r) {
176
176
  serialize: (t) => v(t, { maxDepth: 1 / 0 }),
177
177
  timeout: 5e3
178
178
  }
179
- ), d = r?.disableDefaultConsole ? void 0 : console.log.bind(console), o = r?.disableDefaultConsole ? void 0 : console.warn.bind(console), a = r?.disableDefaultConsole ? void 0 : console.error.bind(console), c = r?.disableDefaultConsole ? void 0 : console.info.bind(console);
179
+ ), d = o?.disableDefaultConsole ? void 0 : console.log.bind(console), r = o?.disableDefaultConsole ? void 0 : console.warn.bind(console), a = o?.disableDefaultConsole ? void 0 : console.error.bind(console), c = o?.disableDefaultConsole ? void 0 : console.info.bind(console);
180
180
  console.log = (...t) => {
181
181
  e.emit("console", "log", t), d?.(...t);
182
182
  }, console.warn = (...t) => {
183
- o?.(...t);
183
+ r?.(...t);
184
184
  }, console.error = (...t) => {
185
185
  e.emit("console", "error", t), a?.(...t);
186
186
  }, console.info = (...t) => {
@@ -202,29 +202,29 @@ export function createVueIframeClient(i, r) {
202
202
  b(w().styles);
203
203
  }), e.emit("ready"), e;
204
204
  }
205
- function x(i) {
206
- const r = document.querySelector("#nooku-injected-tailwind-css");
207
- if (r) {
208
- if (i === void 0) {
209
- r.remove();
205
+ function x(s) {
206
+ const o = document.querySelector("#nooku-injected-tailwind-css");
207
+ if (o) {
208
+ if (s === void 0) {
209
+ o.remove();
210
210
  return;
211
211
  }
212
- const d = Number(r.getAttribute("data-tailwind-version"));
213
- if (i === d) return;
214
- r.remove();
212
+ const d = Number(o.getAttribute("data-tailwind-version"));
213
+ if (s === d) return;
214
+ o.remove();
215
215
  }
216
- if (i === void 0) return;
217
- const n = i === 3 ? "https://cdn.tailwindcss.com" : "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4", e = document.createElement("script");
218
- e.id = "nooku-injected-tailwind-css", e.src = n, e.setAttribute("data-tailwind-version", String(i)), document.head.appendChild(e);
216
+ if (s === void 0) return;
217
+ const n = s === 3 ? "https://cdn.tailwindcss.com" : "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4", e = document.createElement("script");
218
+ e.id = "nooku-injected-tailwind-css", e.src = n, e.setAttribute("data-tailwind-version", String(s)), document.head.appendChild(e);
219
219
  }
220
- function b(i) {
221
- if (i)
220
+ function b(s) {
221
+ if (!(!s || typeof s != "string"))
222
222
  try {
223
- const r = JSON.parse(i || "{}");
224
- if (r && Object.values(r).length > 0) {
223
+ const o = JSON.parse(s || "{}");
224
+ if (o && Object.values(o).length > 0) {
225
225
  const n = document.querySelector("body");
226
226
  if (!n) return;
227
- Object.entries(r).forEach(([e, d]) => {
227
+ o.backgroundColor && (n.style.backgroundImage = "", n.style.background = ""), Object.entries(o).forEach(([e, d]) => {
228
228
  typeof d == "string" && (n.style[e] = d);
229
229
  });
230
230
  }
@@ -233,8 +233,8 @@ function b(i) {
233
233
  }
234
234
  function w() {
235
235
  try {
236
- const i = new URLSearchParams(window.location.search), r = {};
237
- return i.forEach((n, e) => r[e] = n), r;
236
+ const s = new URLSearchParams(window.location.search), o = {};
237
+ return s.forEach((n, e) => o[e] = n), o;
238
238
  } catch {
239
239
  return {};
240
240
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@nookuio/iframe",
3
3
  "description": "",
4
- "version": "1.0.6",
4
+ "version": "1.0.7",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
7
7
  "exports": {