@nookuio/iframe 1.0.1-beta.0 → 1.0.1

package/dist/constants.d.ts

@@ -6,12 +6,3 @@ export declare const COMPONENT_PREVIEW_PAGE_PATH = "/__nooku__/component-preview
 export declare const VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = "/__nooku__/virtual-sfc-editor";
 export declare const IFRAME_SOURCE_NAME = "nooku-frame";
 export declare const EDITOR_SOURCE_NAME = "nooku-editor";
-export declare const ATTRIBUTES: {
-    id: string;
-    path: string;
-    type: string;
-    index: string;
-    component: string;
-    forceRender: string;
-    selected: string;
-};

package/dist/constants.js

@@ -3,18 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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;
+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;
 const EDITOR_PAGE_PATH = exports.EDITOR_PAGE_PATH = "/__nooku__/editor",
   COMPONENT_PREVIEW_PAGE_PATH = exports.COMPONENT_PREVIEW_PAGE_PATH = "/__nooku__/component-preview",
   VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = exports.VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = "/__nooku__/virtual-sfc-editor",
   IFRAME_SOURCE_NAME = exports.IFRAME_SOURCE_NAME = "nooku-frame",
-  EDITOR_SOURCE_NAME = exports.EDITOR_SOURCE_NAME = "nooku-editor",
-  ATTRIBUTES = exports.ATTRIBUTES = {
-    id: "data-node-id",
-    path: "data-node-path",
-    type: "data-node-type",
-    index: "data-node-index",
-    component: "data-node-component",
-    forceRender: "data-node-force-render",
-    selected: "data-node-selected"
-  };
+  EDITOR_SOURCE_NAME = exports.EDITOR_SOURCE_NAME = "nooku-editor";

package/dist/constants.mjs

@@ -1,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", ATTRIBUTES = {
-  id: "data-node-id",
-  path: "data-node-path",
-  type: "data-node-type",
-  index: "data-node-index",
-  component: "data-node-component",
-  forceRender: "data-node-force-render",
-  selected: "data-node-selected"
-};
+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

@@ -7,58 +7,60 @@ exports.createEditorClient = createEditorClient;
 var _constants = require("./constants");
 var _rpc = require("@nookuio/rpc");
 var _telejson = require("telejson");
-function y(a) {
-  const n = (0, _telejson.parse)(a, {
+function l(s) {
+  const a = (0, _telejson.parse)(s, {
       maxDepth: 1 / 0
     }),
-    r = e => {
-      if (Array.isArray(e)) e.forEach((t, s) => {
-        e[s] = r(t);
-      });else if (e && typeof e == "object") {
-        if (e.hasOwnProperty("__v_isRef")) return {
-          ...e,
+    n = r => {
+      if (Array.isArray(r)) r.forEach((e, t) => {
+        r[t] = n(e);
+      });else if (r && typeof r == "object") {
+        if (r.hasOwnProperty("__v_isRef")) return {
+          ...r,
           __v_isRef: "true",
-          value: e.hasOwnProperty("value") && e.value !== void 0 ? e.value : e._value ?? e._rawValue
+          value: r.hasOwnProperty("value") && r.value !== void 0 ? r.value : r._value ?? r._rawValue
         };
-        Object.keys(e).forEach(t => {
-          e[t] = r(e[t]);
+        Object.keys(r).forEach(e => {
+          r[e] = n(r[e]);
         });
       }
-      return e;
+      return r;
     };
-  return r(n);
+  return n(a);
 }
-function createEditorClient(a) {
-  let n;
-  function r() {
-    return (!n || !n.isConnected) && (n = typeof a == "string" ? document.querySelector(`#${a}`) : a), n;
+function createEditorClient(s) {
+  let a;
+  function n() {
+    return (!a || !a.isConnected) && (a = typeof s == "string" ? document.querySelector(`#${s}`) : s), a;
   }
-  return (0, _rpc.createClient)({}, {
+  const i = new Map();
+  return window.addEventListener("message", async e => {
+    if (typeof e.data != "object" || e.data.source !== _constants.IFRAME_SOURCE_NAME || e.data.type === "event" || !e.data.response) return;
+    const t = i.get(e.data.response.id);
+    t && (i.delete(e.data.response.id), t(e.data.response));
+  }), (0, _rpc.createClient)({}, {
     handle(e) {
       window.addEventListener("message", async t => {
         if (typeof t.data != "object" || t.data.source !== _constants.IFRAME_SOURCE_NAME || t.data.type === "event" || !t.data.request) return;
-        const s = r();
-        if (!s) return;
-        const o = await e(t.data.request);
-        s.contentWindow?.postMessage({
+        const o = n();
+        if (!o) return;
+        const d = await e(t.data.request);
+        o.contentWindow?.postMessage({
           source: _constants.EDITOR_SOURCE_NAME,
-          response: o
+          response: d
         }, "*");
       });
     },
     async invoke(e) {
-      const t = r();
-      return t ? new Promise((s, o) => {
-        const c = setTimeout(() => {
-          window.removeEventListener("message", d), o(new Error("Request timed out"));
-        }, 5e3);
-        function d(i) {
-          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)));
-        }
-        t.contentWindow?.postMessage({
+      const t = n();
+      return t ? new Promise((o, d) => {
+        const c = setTimeout(() => d(new Error("Request timed out")), 5e3);
+        i.set(e.id, m => {
+          clearTimeout(c), o(m);
+        }), t.contentWindow?.postMessage({
           source: _constants.EDITOR_SOURCE_NAME,
           request: e
-        }, "*"), window.addEventListener("message", d);
+        }, "*");
       }) : {
         type: "response",
         id: e.id,
@@ -67,7 +69,7 @@ function createEditorClient(a) {
       };
     },
     emit(e) {
-      const t = r();
+      const t = n();
       t && t.contentWindow?.postMessage({
         source: _constants.EDITOR_SOURCE_NAME,
         type: "event",
@@ -79,7 +81,11 @@ function createEditorClient(a) {
         typeof t.data == "object" && (t.data.source !== _constants.IFRAME_SOURCE_NAME || t.data.type !== "event" || !t.data.request || e(t.data.request));
       });
     },
-    deserialize: y,
+    destroy() {
+      i.clear();
+    },
+    timeout: 5e3,
+    deserialize: l,
     serialize: e => (0, _telejson.stringify)(e, {
       maxDepth: 1 / 0
     })

package/dist/editor.mjs

@@ -1,55 +1,57 @@
 import { EDITOR_SOURCE_NAME as f, IFRAME_SOURCE_NAME as u } from "./constants.mjs";
-import { createClient as E } from "@nookuio/rpc";
-import { stringify as p, parse as l } from "telejson";
-function y(a) {
-  const n = l(a, { maxDepth: 1 / 0 }), r = (e) => {
-    if (Array.isArray(e))
-      e.forEach((t, s) => {
-        e[s] = r(t);
+import { createClient as p } from "@nookuio/rpc";
+import { stringify as y, parse as E } from "telejson";
+function l(s) {
+  const a = E(s, { maxDepth: 1 / 0 }), n = (r) => {
+    if (Array.isArray(r))
+      r.forEach((e, t) => {
+        r[t] = n(e);
       });
-    else if (e && typeof e == "object") {
-      if (e.hasOwnProperty("__v_isRef"))
+    else if (r && typeof r == "object") {
+      if (r.hasOwnProperty("__v_isRef"))
         return {
-          ...e,
+          ...r,
           __v_isRef: "true",
           // converted to string
-          value: e.hasOwnProperty("value") && e.value !== void 0 ? e.value : e._value ?? e._rawValue
+          value: r.hasOwnProperty("value") && r.value !== void 0 ? r.value : r._value ?? r._rawValue
         };
-      Object.keys(e).forEach((t) => {
-        e[t] = r(e[t]);
+      Object.keys(r).forEach((e) => {
+        r[e] = n(r[e]);
       });
     }
-    return e;
+    return r;
   };
-  return r(n);
+  return n(a);
 }
-export function createEditorClient(a) {
-  let n;
-  function r() {
-    return (!n || !n.isConnected) && (n = typeof a == "string" ? document.querySelector(`#${a}`) : a), n;
+export function createEditorClient(s) {
+  let a;
+  function n() {
+    return (!a || !a.isConnected) && (a = typeof s == "string" ? document.querySelector(`#${s}`) : s), a;
   }
-  return E(
+  const i = /* @__PURE__ */ new Map();
+  return window.addEventListener("message", async (e) => {
+    if (typeof e.data != "object" || e.data.source !== u || e.data.type === "event" || !e.data.response) return;
+    const t = i.get(e.data.response.id);
+    t && (i.delete(e.data.response.id), t(e.data.response));
+  }), p(
     {},
     {
       handle(e) {
         window.addEventListener("message", async (t) => {
           if (typeof t.data != "object" || t.data.source !== u || t.data.type === "event" || !t.data.request) return;
-          const s = r();
-          if (!s) return;
-          const o = await e(t.data.request);
-          s.contentWindow?.postMessage({ source: f, response: o }, "*");
+          const o = n();
+          if (!o) return;
+          const d = await e(t.data.request);
+          o.contentWindow?.postMessage({ source: f, response: d }, "*");
         });
       },
       async invoke(e) {
-        const t = r();
-        return t ? new Promise((s, o) => {
-          const c = setTimeout(() => {
-            window.removeEventListener("message", d), o(new Error("Request timed out"));
-          }, 5e3);
-          function d(i) {
-            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)));
-          }
-          t.contentWindow?.postMessage({ source: f, request: e }, "*"), window.addEventListener("message", d);
+        const t = n();
+        return t ? new Promise((o, d) => {
+          const c = setTimeout(() => d(new Error("Request timed out")), 5e3);
+          i.set(e.id, (m) => {
+            clearTimeout(c), o(m);
+          }), t.contentWindow?.postMessage({ source: f, request: e }, "*");
         }) : {
           type: "response",
           id: e.id,
@@ -58,7 +60,7 @@ export function createEditorClient(a) {
         };
       },
       emit(e) {
-        const t = r();
+        const t = n();
         t && t.contentWindow?.postMessage({ source: f, type: "event", request: e }, "*");
       },
       handleEvent(e) {
@@ -66,8 +68,12 @@ export function createEditorClient(a) {
           typeof t.data == "object" && (t.data.source !== u || t.data.type !== "event" || !t.data.request || e(t.data.request));
         });
       },
-      deserialize: y,
-      serialize: (e) => p(e, { maxDepth: 1 / 0 })
+      destroy() {
+        i.clear();
+      },
+      timeout: 5e3,
+      deserialize: l,
+      serialize: (e) => y(e, { maxDepth: 1 / 0 })
     }
   );
 }

package/dist/iframe.d.ts

@@ -2,7 +2,7 @@ import type { CoreIframeContext, EditorContext, EditorEvents, VueIframeContext,
 /**
  * This function should be called inside the iframe
  */
-export declare function createVueIframeClient(vueCtx: Omit<VueIframeContext, keyof CoreIframeContext>, options?: {
+export declare function createVueIframeClient(vueCtx: Omit<VueIframeContext, Exclude<keyof CoreIframeContext, 'updateCode'>>, options?: {
     /**
      * If true, the default console methods will be disabled
      *

package/dist/iframe.js

@@ -7,139 +7,150 @@ exports.createVueIframeClient = createVueIframeClient;
 var _constants = require("./constants");
 var _rpc = require("@nookuio/rpc");
 var _telejson = require("telejson");
-var _dragDrop = require("./drag-drop");
-function p(u, d) {
-  return `[data-node-id="${d}"][data-node-path="${u}"]`;
+function u(l, t) {
+  return `[data-node-id="${t}"][data-node-path="${l}"]`;
 }
-function h(u, d) {
-  const m = document.querySelectorAll(u);
-  if (!m?.length) return;
-  const r = Array.from(m).map(f => {
-    const l = f.getBoundingClientRect(),
-      g = {
-        width: l.width,
-        height: l.height,
-        top: l.top,
-        left: l.left
+function y(l, t) {
+  const n = document.querySelectorAll(l);
+  if (!n?.length) return;
+  const o = Array.from(n).map(r => {
+    const s = r.getBoundingClientRect(),
+      d = {
+        width: s.width,
+        height: s.height,
+        top: s.top,
+        left: s.left
       };
-    if (!d) return g;
-    const c = window.getComputedStyle(f) ?? {};
+    if (!t) return d;
+    const i = window.getComputedStyle(r) ?? {};
     return {
-      ...g,
+      ...d,
       padding: {
-        top: c.paddingTop,
-        right: c.paddingRight,
-        bottom: c.paddingBottom,
-        left: c.paddingLeft
+        top: i.paddingTop,
+        right: i.paddingRight,
+        bottom: i.paddingBottom,
+        left: i.paddingLeft
       }
     };
   });
-  if (r?.length) return r.length === 1 ? r[0] : r;
+  if (o?.length) return o.length === 1 ? o[0] : o;
 }
-function createVueIframeClient(u, d) {
-  const m = (0, _dragDrop.createDragDropContext)(),
-    r = (0, _rpc.createClient)({
-      ...u,
-      ...m,
-      async editText({
-        path: e,
-        id: t
-      }) {
-        if (!e || t === void 0) return;
-        const i = p(e, t),
-          n = document.querySelector(i);
-        if (!n) return;
-        n.style.outline = "none", n.setAttribute("spellcheck", "false"), n.setAttribute("contenteditable", "true");
-        const o = a => {
-            const E = a.target;
-            if (!E) return;
-            const y = E.innerText;
-            n.removeAttribute("contenteditable"), r.emit("text-update", {
-              path: e,
-              id: t,
-              content: y
-            }), n.removeEventListener("blur", o), n.removeEventListener("keydown", s), n.blur();
-          },
-          s = a => {
-            a.key === "Enter" && (a.stopPropagation(), a.preventDefault(), o(a));
-          };
-        n.addEventListener("keydown", s), n.addEventListener("blur", o), n.focus();
-      },
-      async getHoveredElement({
-        path: e,
-        id: t,
-        x: i,
-        y: n
-      }) {
-        if (e) if (i !== void 0 && n !== void 0) {
-          let o = document.elementFromPoint(i, n);
-          if (!o) return;
-          let s = o.getAttribute("data-node-path");
-          if (s !== e) {
-            if (!o.parentElement) return;
-            for (; o.parentElement && s !== e;) o = o.parentElement, s = o.getAttribute("data-node-path");
-          }
-          const a = o.getAttribute("data-node-id");
-          if (!a) return;
-          const E = p(e, a),
-            y = h(E, !1);
-          return y ? {
-            id: a,
-            path: e,
-            data: y
-          } : void 0;
-        } else {
-          const o = p(e, t),
-            s = h(o, !1);
-          return s ? {
-            id: t,
-            path: e,
-            data: s
-          } : void 0;
-        }
-      },
-      async getPageHeight() {
-        return document.body.scrollHeight > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
-      },
-      async getSelectedElement({
-        path: e,
-        id: t
-      }) {
-        const i = p(e, t),
-          n = h(i, !0);
-        if (n) return {
-          path: e,
-          id: t,
-          data: n
+function C(l) {
+  return {
+    async editText({
+      path: t,
+      id: n
+    }) {
+      if (!t || n === void 0) return;
+      const o = u(t, n),
+        r = document.querySelector(o);
+      if (!r) return;
+      r.style.outline = "none", r.setAttribute("spellcheck", "false"), r.setAttribute("contenteditable", "true");
+      const s = i => {
+          const c = i.target;
+          if (!c) return;
+          const e = c.innerText;
+          r.removeAttribute("contenteditable"), l?.onTextUpdate?.({
+            path: t,
+            id: n,
+            content: e
+          }), r.removeEventListener("blur", s), r.removeEventListener("keydown", d), r.blur();
+        },
+        d = i => {
+          i.key === "Enter" && (i.stopPropagation(), i.preventDefault(), s(i));
         };
-      },
-      setTheme(e) {
-        const t = document.querySelector("body");
-        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")));
+      r.addEventListener("keydown", d), r.addEventListener("blur", s), r.focus();
+    },
+    async getHoveredElement({
+      path: t,
+      id: n,
+      x: o,
+      y: r
+    }) {
+      if (t) if (o !== void 0 && r !== void 0) {
+        let s = document.elementFromPoint(o, r);
+        if (!s) return;
+        let d = s.getAttribute("data-node-path");
+        if (d !== t) {
+          if (!s.parentElement) return;
+          for (; s.parentElement && d !== t;) s = s.parentElement, d = s.getAttribute("data-node-path");
+        }
+        const i = s.getAttribute("data-node-id");
+        if (!i) return;
+        const c = u(t, i),
+          e = y(c, !1);
+        return e ? {
+          id: i,
+          path: t,
+          data: e
+        } : void 0;
+      } else {
+        const s = u(t, n),
+          d = y(s, !1);
+        return d ? {
+          id: n,
+          path: t,
+          data: d
+        } : void 0;
       }
+    },
+    async getPageHeight() {
+      return document.body.scrollHeight > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
+    },
+    async getSelectedElement({
+      path: t,
+      id: n
+    }) {
+      const o = u(t, n),
+        r = y(o, !0);
+      if (r) return {
+        path: t,
+        id: n,
+        data: r
+      };
+    },
+    setTheme(t) {
+      const n = document.querySelector("body");
+      t === "dark" ? (document.documentElement.classList.remove("light"), document.documentElement.classList.add("dark"), n && (n.classList.remove("light"), n.classList.add("dark"))) : (document.documentElement.classList.remove("dark"), document.documentElement.classList.add("light"), n && (n.classList.remove("dark"), n.classList.add("light")));
+    },
+    async updateCode(t, n) {
+      typeof n > "u" ? document.body.innerHTML = "" : document.body.innerHTML = n, l?.onResize?.(await this.getPageHeight());
+    }
+  };
+}
+function createVueIframeClient(l, t) {
+  const n = new Map();
+  window.addEventListener("message", async e => {
+    if (typeof e.data != "object" || e.data.source !== _constants.EDITOR_SOURCE_NAME || e.data.type === "event" || !e.data.response) return;
+    const a = n.get(e.data.response.id);
+    a && (n.delete(e.data.response.id), a(e.data.response));
+  });
+  const o = (0, _rpc.createClient)({
+      ...l,
+      ...C({
+        onResize: (...e) => o?.emit("resize", ...e),
+        onTextUpdate: (...e) => o?.emit("text-update", ...e)
+      })
     }, {
       handle(e) {
-        window.addEventListener("message", async t => {
-          if (typeof t.data != "object" || t.data.source !== _constants.EDITOR_SOURCE_NAME || t.data.type === "event" || !t.data.request) return;
-          const i = await e(t.data.request);
+        window.addEventListener("message", async a => {
+          if (typeof a.data != "object" || a.data.source !== _constants.EDITOR_SOURCE_NAME || a.data.type === "event" || !a.data.request) return;
+          const m = await e(a.data.request);
           window.parent.postMessage({
             source: _constants.IFRAME_SOURCE_NAME,
-            response: i
+            response: m
           }, "*");
         });
       },
       invoke(e) {
-        return new Promise((t, i) => {
-          const n = setTimeout(() => {
-            window.removeEventListener("message", o), i(new Error("Request timed out"));
-          }, 5e3);
-          function o(s) {
-            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)));
-          }
-          window.parent.postMessage({
+        return new Promise((a, m) => {
+          const E = setTimeout(() => m(new Error("Request timed out")), 5e3);
+          n.set(e.id, p => {
+            clearTimeout(E), a(p);
+          }), window.parent.postMessage({
             source: _constants.IFRAME_SOURCE_NAME,
             request: e
-          }, "*"), window.addEventListener("message", o);
+          }, "*");
         });
       },
       emit(e) {
@@ -150,31 +161,35 @@ function createVueIframeClient(u, d) {
         }, "*");
       },
       handleEvent(e) {
-        window.addEventListener("message", t => {
-          typeof t.data == "object" && (t.data.source !== _constants.EDITOR_SOURCE_NAME || t.data.type !== "event" || !t.data.request || e(t.data.request));
+        window.addEventListener("message", a => {
+          typeof a.data == "object" && (a.data.source !== _constants.EDITOR_SOURCE_NAME || a.data.type !== "event" || !a.data.request || e(a.data.request));
         });
       },
+      destroy() {
+        n.clear();
+      },
       deserialize: e => (0, _telejson.parse)(e),
       serialize: e => (0, _telejson.stringify)(e, {
         maxDepth: 1 / 0
-      })
+      }),
+      timeout: 5e3
     }),
-    f = d?.disableDefaultConsole ? void 0 : console.log.bind(console),
-    l = d?.disableDefaultConsole ? void 0 : console.warn.bind(console),
-    g = d?.disableDefaultConsole ? void 0 : console.error.bind(console),
-    c = d?.disableDefaultConsole ? void 0 : console.info.bind(console);
+    r = t?.disableDefaultConsole ? void 0 : console.log.bind(console),
+    s = t?.disableDefaultConsole ? void 0 : console.warn.bind(console),
+    d = t?.disableDefaultConsole ? void 0 : console.error.bind(console),
+    i = t?.disableDefaultConsole ? void 0 : console.info.bind(console);
   return console.log = (...e) => {
-    r.emit("console", "log", e), f?.(...e);
+    o.emit("console", "log", e), r?.(...e);
   }, console.warn = (...e) => {
-    l?.(...e);
+    s?.(...e);
   }, console.error = (...e) => {
-    r.emit("console", "error", e), g?.(...e);
+    o.emit("console", "error", e), d?.(...e);
   }, console.info = (...e) => {
-    r.emit("console", "info", e), c?.(...e);
-  }, window.addEventListener("resize", async () => r.emit("resize", await r.$context.getPageHeight())), new MutationObserver(async () => r.emit("resize", await r.$context.getPageHeight())).observe(document.body, {
+    o.emit("console", "info", e), i?.(...e);
+  }, window.addEventListener("resize", async () => o.emit("resize", await o.$context.getPageHeight())), new MutationObserver(async () => o.emit("resize", await o.$context.getPageHeight())).observe(document.body, {
     childList: !0,
     subtree: !0,
     attributes: !0,
     characterData: !0
-  }), r.emit("ready"), r;
+  }), o.emit("ready"), o;
 }