@nookuio/iframe 1.0.4 → 1.0.6

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