@nookuio/iframe 0.9.7 → 0.9.9
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.
- package/dist/constants.mjs +1 -1
- package/dist/createClient.mjs +114 -1
- package/dist/editor.mjs +73 -1
- package/dist/iframe.mjs +168 -1
- package/dist/index.mjs +4 -1
- package/dist/types.d.ts +0 -12
- package/package.json +1 -1
package/dist/constants.mjs
CHANGED
|
@@ -1 +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";
|
|
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/createClient.mjs
CHANGED
|
@@ -1 +1,114 @@
|
|
|
1
|
-
export function createClient(y,l)
|
|
1
|
+
export function createClient(y, l) {
|
|
2
|
+
const { invoke: c, handle: f, emit: o, handleEvent: d, serialize: x, deserialize: v } = l;
|
|
3
|
+
function g(e) {
|
|
4
|
+
try {
|
|
5
|
+
return x ? x(e) : JSON.stringify(e);
|
|
6
|
+
} catch {
|
|
7
|
+
return e;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
function R(e) {
|
|
11
|
+
try {
|
|
12
|
+
return v ? v(e) : JSON.parse(e);
|
|
13
|
+
} catch {
|
|
14
|
+
return e;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
const u = /* @__PURE__ */ new Map();
|
|
18
|
+
f(async (e) => {
|
|
19
|
+
const n = p(y, e.key || "");
|
|
20
|
+
if (n === void 0)
|
|
21
|
+
return {
|
|
22
|
+
type: "response",
|
|
23
|
+
id: e.id,
|
|
24
|
+
key: e.key,
|
|
25
|
+
result: void 0
|
|
26
|
+
};
|
|
27
|
+
let r = e.args ? R(e.args) : [];
|
|
28
|
+
Array.isArray(r) || (r = [r]);
|
|
29
|
+
const s = typeof n == "function" ? await n(...r) : n;
|
|
30
|
+
return {
|
|
31
|
+
type: "response",
|
|
32
|
+
id: e.id,
|
|
33
|
+
key: e.key,
|
|
34
|
+
result: g(s)
|
|
35
|
+
};
|
|
36
|
+
}), d((e) => {
|
|
37
|
+
const n = u.get(e.eventName);
|
|
38
|
+
if (!n?.length) return;
|
|
39
|
+
let r = e.args ? R(e.args) : [];
|
|
40
|
+
Array.isArray(r) || (r = [r]), n.forEach((s) => s(...r));
|
|
41
|
+
});
|
|
42
|
+
const E = /* @__PURE__ */ new Map();
|
|
43
|
+
function m(e) {
|
|
44
|
+
const n = e.join(".");
|
|
45
|
+
if (E.has(n))
|
|
46
|
+
return E.get(n);
|
|
47
|
+
const r = async (...i) => {
|
|
48
|
+
const t = {
|
|
49
|
+
type: "request",
|
|
50
|
+
id: `${n}-${Date.now()}-${Math.random()}`,
|
|
51
|
+
// More robust ID
|
|
52
|
+
key: n,
|
|
53
|
+
args: g(i)
|
|
54
|
+
}, a = await c(t);
|
|
55
|
+
return R(a.result);
|
|
56
|
+
}, s = new Proxy(r, {
|
|
57
|
+
get(i, t) {
|
|
58
|
+
if (t === "then") {
|
|
59
|
+
const a = i();
|
|
60
|
+
return a.then.bind(a);
|
|
61
|
+
}
|
|
62
|
+
if (t === "catch" || t === "finally") {
|
|
63
|
+
const a = i();
|
|
64
|
+
return a[t].bind(a);
|
|
65
|
+
}
|
|
66
|
+
return m([...e, t]);
|
|
67
|
+
},
|
|
68
|
+
apply(i, t, a) {
|
|
69
|
+
return i.apply(t, a);
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
return E.set(n, s), s;
|
|
73
|
+
}
|
|
74
|
+
return new Proxy(
|
|
75
|
+
{},
|
|
76
|
+
{
|
|
77
|
+
get(e, n) {
|
|
78
|
+
if (n === "$context") return y;
|
|
79
|
+
if (n === "on")
|
|
80
|
+
return (s, i) => {
|
|
81
|
+
const t = u.get(s);
|
|
82
|
+
if (!t) {
|
|
83
|
+
u.set(s, [i]);
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
t.push(i);
|
|
87
|
+
};
|
|
88
|
+
if (n === "off")
|
|
89
|
+
return (s, i) => {
|
|
90
|
+
const t = u.get(s)?.indexOf(i);
|
|
91
|
+
t === -1 || t === void 0 || u.get(s)?.splice(t, 1);
|
|
92
|
+
};
|
|
93
|
+
if (n === "emit")
|
|
94
|
+
return (s, ...i) => {
|
|
95
|
+
o({ eventName: s, args: g(i) });
|
|
96
|
+
};
|
|
97
|
+
if (n === "removeAllListeners") return () => u.clear();
|
|
98
|
+
if (typeof n != "symbol")
|
|
99
|
+
return m([n]);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
function p(y, l, c) {
|
|
105
|
+
if (!y || typeof y != "object") return c;
|
|
106
|
+
const f = Array.isArray(l) ? l : l.replace(/\[(\d+)]/g, ".$1").replace(/\["([^"]+)"\]/g, ".$1").replace(/\['([^']+)'\]/g, ".$1").split(".").filter(Boolean);
|
|
107
|
+
let o = y;
|
|
108
|
+
for (const d of f)
|
|
109
|
+
if (o != null && typeof o == "object" && d in o)
|
|
110
|
+
o = o[d];
|
|
111
|
+
else
|
|
112
|
+
return c;
|
|
113
|
+
return o;
|
|
114
|
+
}
|
package/dist/editor.mjs
CHANGED
|
@@ -1 +1,73 @@
|
|
|
1
|
-
import{EDITOR_SOURCE_NAME as f,IFRAME_SOURCE_NAME as u
|
|
1
|
+
import { EDITOR_SOURCE_NAME as f, IFRAME_SOURCE_NAME as u } from "./constants.mjs";
|
|
2
|
+
import { createClient as E } from "./createClient.mjs";
|
|
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);
|
|
9
|
+
});
|
|
10
|
+
else if (e && typeof e == "object") {
|
|
11
|
+
if (e.hasOwnProperty("__v_isRef"))
|
|
12
|
+
return {
|
|
13
|
+
...e,
|
|
14
|
+
__v_isRef: "true",
|
|
15
|
+
// converted to string
|
|
16
|
+
value: e.hasOwnProperty("value") && e.value !== void 0 ? e.value : e._value ?? e._rawValue
|
|
17
|
+
};
|
|
18
|
+
Object.keys(e).forEach((t) => {
|
|
19
|
+
e[t] = r(e[t]);
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
return e;
|
|
23
|
+
};
|
|
24
|
+
return r(n);
|
|
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;
|
|
30
|
+
}
|
|
31
|
+
return E(
|
|
32
|
+
{},
|
|
33
|
+
{
|
|
34
|
+
handle(e) {
|
|
35
|
+
window.addEventListener("message", async (t) => {
|
|
36
|
+
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 }, "*");
|
|
41
|
+
});
|
|
42
|
+
},
|
|
43
|
+
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);
|
|
53
|
+
}) : {
|
|
54
|
+
type: "response",
|
|
55
|
+
id: e.id,
|
|
56
|
+
key: e.key,
|
|
57
|
+
result: void 0
|
|
58
|
+
};
|
|
59
|
+
},
|
|
60
|
+
emit(e) {
|
|
61
|
+
const t = r();
|
|
62
|
+
t && t.contentWindow?.postMessage({ source: f, type: "event", request: e }, "*");
|
|
63
|
+
},
|
|
64
|
+
handleEvent(e) {
|
|
65
|
+
window.addEventListener("message", (t) => {
|
|
66
|
+
typeof t.data == "object" && (t.data.source !== u || t.data.type !== "event" || !t.data.request || e(t.data.request));
|
|
67
|
+
});
|
|
68
|
+
},
|
|
69
|
+
deserialize: y,
|
|
70
|
+
serialize: (e) => p(e, { maxDepth: 1 / 0 })
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
}
|
package/dist/iframe.mjs
CHANGED
|
@@ -1 +1,168 @@
|
|
|
1
|
-
import{EDITOR_SOURCE_NAME as p,IFRAME_SOURCE_NAME as w
|
|
1
|
+
import { EDITOR_SOURCE_NAME as p, IFRAME_SOURCE_NAME as w } from "./constants.mjs";
|
|
2
|
+
import { createClient as C } from "./createClient.mjs";
|
|
3
|
+
import { stringify as v, parse as L } from "telejson";
|
|
4
|
+
function b(c, l) {
|
|
5
|
+
return `[data-node-id="${l}"][data-node-path="${c}"]`;
|
|
6
|
+
}
|
|
7
|
+
function h(c, l) {
|
|
8
|
+
const s = document.querySelectorAll(c);
|
|
9
|
+
if (!s?.length) return;
|
|
10
|
+
const d = Array.from(s).map((f) => {
|
|
11
|
+
const u = f.getBoundingClientRect(), g = {
|
|
12
|
+
width: u.width,
|
|
13
|
+
height: u.height,
|
|
14
|
+
top: u.top,
|
|
15
|
+
left: u.left
|
|
16
|
+
};
|
|
17
|
+
if (!l) return g;
|
|
18
|
+
const m = window.getComputedStyle(f) ?? {};
|
|
19
|
+
return {
|
|
20
|
+
...g,
|
|
21
|
+
padding: {
|
|
22
|
+
top: m.paddingTop,
|
|
23
|
+
right: m.paddingRight,
|
|
24
|
+
bottom: m.paddingBottom,
|
|
25
|
+
left: m.paddingLeft
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
});
|
|
29
|
+
if (d?.length)
|
|
30
|
+
return d.length === 1 ? d[0] : d;
|
|
31
|
+
}
|
|
32
|
+
export function createVueIframeClient(c, l) {
|
|
33
|
+
const s = C(
|
|
34
|
+
{
|
|
35
|
+
...c,
|
|
36
|
+
async editText({ path: e, id: t }) {
|
|
37
|
+
if (!e || t === void 0) return;
|
|
38
|
+
const i = b(e, t), n = document.querySelector(i);
|
|
39
|
+
if (!n) return;
|
|
40
|
+
n.style.outline = "none", n.setAttribute("spellcheck", "false"), n.setAttribute("contenteditable", "true");
|
|
41
|
+
const o = (a) => {
|
|
42
|
+
const E = a.target;
|
|
43
|
+
if (!E) return;
|
|
44
|
+
const y = E.innerText;
|
|
45
|
+
n.removeAttribute("contenteditable"), s.emit("text-update", { path: e, id: t, content: y }), n.removeEventListener("blur", o), n.removeEventListener("keydown", r), n.blur();
|
|
46
|
+
}, r = (a) => {
|
|
47
|
+
a.key === "Enter" && (a.stopPropagation(), a.preventDefault(), o(a));
|
|
48
|
+
};
|
|
49
|
+
n.addEventListener("keydown", r), n.addEventListener("blur", o), n.focus();
|
|
50
|
+
},
|
|
51
|
+
async getHoveredElement({ path: e, id: t, x: i, y: n }) {
|
|
52
|
+
if (e)
|
|
53
|
+
if (i !== void 0 && n !== void 0) {
|
|
54
|
+
let o = document.elementFromPoint(i, n);
|
|
55
|
+
if (!o) return;
|
|
56
|
+
let r = o.getAttribute("data-node-path");
|
|
57
|
+
if (r !== e) {
|
|
58
|
+
if (!o.parentElement) return;
|
|
59
|
+
for (; o.parentElement && r !== e; )
|
|
60
|
+
o = o.parentElement, r = o.getAttribute("data-node-path");
|
|
61
|
+
}
|
|
62
|
+
const a = o.getAttribute("data-node-id");
|
|
63
|
+
if (!a) return;
|
|
64
|
+
const E = b(e, a), y = h(E, !1);
|
|
65
|
+
return y ? {
|
|
66
|
+
id: a,
|
|
67
|
+
path: e,
|
|
68
|
+
data: y
|
|
69
|
+
} : void 0;
|
|
70
|
+
} else {
|
|
71
|
+
const o = b(e, t), r = h(o, !1);
|
|
72
|
+
return r ? {
|
|
73
|
+
id: t,
|
|
74
|
+
path: e,
|
|
75
|
+
data: r
|
|
76
|
+
} : void 0;
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
async getPageHeight() {
|
|
80
|
+
return document.body.scrollHeight > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
|
|
81
|
+
},
|
|
82
|
+
async getSelectedElement({ path: e, id: t }) {
|
|
83
|
+
const i = b(e, t), n = h(i, !0);
|
|
84
|
+
if (n)
|
|
85
|
+
return {
|
|
86
|
+
path: e,
|
|
87
|
+
id: t,
|
|
88
|
+
data: n
|
|
89
|
+
};
|
|
90
|
+
},
|
|
91
|
+
toggleTheme(e) {
|
|
92
|
+
e === "dark" ? (document.documentElement.classList.remove("light"), document.documentElement.classList.add("dark")) : (document.documentElement.classList.remove("dark"), document.documentElement.classList.add("light"));
|
|
93
|
+
}
|
|
94
|
+
// updateElementClass({ className, id, path }) {
|
|
95
|
+
// const selector = getSelector(path, id);
|
|
96
|
+
// const elements = document.querySelectorAll(selector);
|
|
97
|
+
// if (!elements?.length) return;
|
|
98
|
+
// elements.forEach((elm) => (elm.className = className));
|
|
99
|
+
// },
|
|
100
|
+
// updateElementAttribute({ attribute, value, id, path }) {
|
|
101
|
+
// const selector = getSelector(path, id);
|
|
102
|
+
// const elements = document.querySelectorAll(selector);
|
|
103
|
+
// if (!elements?.length) return;
|
|
104
|
+
// elements.forEach((elm) => elm.setAttribute(attribute, value));
|
|
105
|
+
// },
|
|
106
|
+
// duplicateElement({ id, path }) {
|
|
107
|
+
// const selector = getSelector(path, id);
|
|
108
|
+
// const elements = document.querySelectorAll(selector);
|
|
109
|
+
// if (!elements?.length) return;
|
|
110
|
+
// elements.forEach((elm) => {
|
|
111
|
+
// const clone = elm.cloneNode(true) as HTMLElement;
|
|
112
|
+
// clone.setAttribute('data-node-id', String(Number(clone.getAttribute('data-node-id')!) + 1));
|
|
113
|
+
// elm.parentElement?.insertBefore(clone, elm.nextSibling);
|
|
114
|
+
// });
|
|
115
|
+
// }
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
handle(e) {
|
|
119
|
+
window.addEventListener("message", async (t) => {
|
|
120
|
+
if (typeof t.data != "object" || t.data.source !== p || t.data.type === "event" || !t.data.request) return;
|
|
121
|
+
const i = await e(t.data.request);
|
|
122
|
+
window.parent.postMessage({ source: w, response: i }, "*");
|
|
123
|
+
});
|
|
124
|
+
},
|
|
125
|
+
invoke(e) {
|
|
126
|
+
return new Promise((t, i) => {
|
|
127
|
+
const n = setTimeout(() => {
|
|
128
|
+
window.removeEventListener("message", o), i(new Error("Request timed out"));
|
|
129
|
+
}, 5e3);
|
|
130
|
+
function o(r) {
|
|
131
|
+
typeof r.data == "object" && (r.data.source !== p || !r.data.response || r.data.response.id === e.id && (clearTimeout(n), window.removeEventListener("message", o), t(r.data.response)));
|
|
132
|
+
}
|
|
133
|
+
window.parent.postMessage({ source: w, request: e }, "*"), window.addEventListener("message", o);
|
|
134
|
+
});
|
|
135
|
+
},
|
|
136
|
+
emit(e) {
|
|
137
|
+
window.parent.postMessage({ source: w, type: "event", request: e }, "*");
|
|
138
|
+
},
|
|
139
|
+
handleEvent(e) {
|
|
140
|
+
window.addEventListener("message", (t) => {
|
|
141
|
+
typeof t.data == "object" && (t.data.source !== p || t.data.type !== "event" || !t.data.request || e(t.data.request));
|
|
142
|
+
});
|
|
143
|
+
},
|
|
144
|
+
deserialize: (e) => L(e),
|
|
145
|
+
serialize: (e) => v(e, { maxDepth: 1 / 0 })
|
|
146
|
+
}
|
|
147
|
+
), d = l?.disableDefaultConsole ? void 0 : console.log.bind(console), f = l?.disableDefaultConsole ? void 0 : console.warn.bind(console), u = l?.disableDefaultConsole ? void 0 : console.error.bind(console), g = l?.disableDefaultConsole ? void 0 : console.info.bind(console);
|
|
148
|
+
return console.log = (...e) => {
|
|
149
|
+
s.emit("console", "log", e), d?.(...e);
|
|
150
|
+
}, console.warn = (...e) => {
|
|
151
|
+
f?.(...e);
|
|
152
|
+
}, console.error = (...e) => {
|
|
153
|
+
s.emit("console", "error", e), u?.(...e);
|
|
154
|
+
}, console.info = (...e) => {
|
|
155
|
+
s.emit("console", "info", e), g?.(...e);
|
|
156
|
+
}, window.addEventListener("resize", async () => s.emit("resize", await s.$context.getPageHeight())), new MutationObserver(
|
|
157
|
+
async () => s.emit("resize", await s.$context.getPageHeight())
|
|
158
|
+
).observe(document.body, {
|
|
159
|
+
childList: !0,
|
|
160
|
+
// observe direct children additions/removals
|
|
161
|
+
subtree: !0,
|
|
162
|
+
// observe all descendants
|
|
163
|
+
attributes: !0,
|
|
164
|
+
// observe attribute changes (like style, class)
|
|
165
|
+
characterData: !0
|
|
166
|
+
// observe text changes
|
|
167
|
+
}), s.emit("ready"), s;
|
|
168
|
+
}
|
package/dist/index.mjs
CHANGED
package/dist/types.d.ts
CHANGED
|
@@ -53,19 +53,7 @@ export interface CoreIframeEvents {
|
|
|
53
53
|
}
|
|
54
54
|
export interface VueIframeContext extends CoreIframeContext {
|
|
55
55
|
navigateTo: (to: string) => void;
|
|
56
|
-
getValue: (options: {
|
|
57
|
-
code: string;
|
|
58
|
-
path?: string;
|
|
59
|
-
onTemplateContext?: boolean;
|
|
60
|
-
context?: Record<string, any>;
|
|
61
|
-
}) => any;
|
|
62
56
|
getInstanceData: (path: string /** filepath path of the component */) => Record<string, any>;
|
|
63
|
-
runCode: (options: {
|
|
64
|
-
path?: string;
|
|
65
|
-
code: string;
|
|
66
|
-
onTemplateContext?: boolean;
|
|
67
|
-
context?: Record<string, any>;
|
|
68
|
-
}) => any;
|
|
69
57
|
/**
|
|
70
58
|
* For virtual SFC preview
|
|
71
59
|
*
|