@nookuio/iframe 1.0.0 → 1.0.1-beta.0

package/dist/iframe.mjs

@@ -1,78 +1,80 @@
-import { EDITOR_SOURCE_NAME as p, IFRAME_SOURCE_NAME as w } from "./constants.mjs";
-import { createClient as v } from "./createClient.mjs";
-import { stringify as C, parse as L } from "telejson";
-function b(u, d) {
+import { EDITOR_SOURCE_NAME as b, IFRAME_SOURCE_NAME as w } from "./constants.mjs";
+import { createClient as C } from "@nookuio/rpc";
+import { stringify as v, parse as L } from "telejson";
+import { createDragDropContext as x } from "./drag-drop/index.mjs";
+function p(u, d) {
   return `[data-node-id="${d}"][data-node-path="${u}"]`;
 }
 function h(u, d) {
-  const s = document.querySelectorAll(u);
-  if (!s?.length) return;
-  const l = Array.from(s).map((f) => {
-    const c = f.getBoundingClientRect(), g = {
-      width: c.width,
-      height: c.height,
-      top: c.top,
-      left: c.left
+  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
     };
     if (!d) return g;
-    const m = window.getComputedStyle(f) ?? {};
+    const c = window.getComputedStyle(f) ?? {};
     return {
       ...g,
       padding: {
-        top: m.paddingTop,
-        right: m.paddingRight,
-        bottom: m.paddingBottom,
-        left: m.paddingLeft
+        top: c.paddingTop,
+        right: c.paddingRight,
+        bottom: c.paddingBottom,
+        left: c.paddingLeft
       }
     };
   });
-  if (l?.length)
-    return l.length === 1 ? l[0] : l;
+  if (r?.length)
+    return r.length === 1 ? r[0] : r;
 }
 export function createVueIframeClient(u, d) {
-  const s = v(
+  const m = x(), r = C(
     {
       ...u,
+      ...m,
       async editText({ path: e, id: t }) {
         if (!e || t === void 0) return;
-        const i = b(e, t), n = document.querySelector(i);
+        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"), s.emit("text-update", { path: e, id: t, content: y }), n.removeEventListener("blur", o), n.removeEventListener("keydown", r), n.blur();
-        }, r = (a) => {
+          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", r), n.addEventListener("blur", o), n.focus();
+        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 r = o.getAttribute("data-node-path");
-            if (r !== e) {
+            let s = o.getAttribute("data-node-path");
+            if (s !== e) {
               if (!o.parentElement) return;
-              for (; o.parentElement && r !== e; )
-                o = o.parentElement, r = o.getAttribute("data-node-path");
+              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 = b(e, a), y = h(E, !1);
+            const E = p(e, a), y = h(E, !1);
             return y ? {
               id: a,
               path: e,
               data: y
             } : void 0;
           } else {
-            const o = b(e, t), r = h(o, !1);
-            return r ? {
+            const o = p(e, t), s = h(o, !1);
+            return s ? {
               id: t,
               path: e,
-              data: r
+              data: s
             } : void 0;
           }
       },
@@ -80,7 +82,7 @@ export function createVueIframeClient(u, d) {
         return document.body.scrollHeight > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
       },
       async getSelectedElement({ path: e, id: t }) {
-        const i = b(e, t), n = h(i, !0);
+        const i = p(e, t), n = h(i, !0);
         if (n)
           return {
             path: e,
@@ -118,7 +120,7 @@ export function createVueIframeClient(u, d) {
     {
       handle(e) {
         window.addEventListener("message", async (t) => {
-          if (typeof t.data != "object" || t.data.source !== p || t.data.type === "event" || !t.data.request) return;
+          if (typeof t.data != "object" || t.data.source !== b || t.data.type === "event" || !t.data.request) return;
           const i = await e(t.data.request);
           window.parent.postMessage({ source: w, response: i }, "*");
         });
@@ -128,8 +130,8 @@ export function createVueIframeClient(u, d) {
           const n = setTimeout(() => {
             window.removeEventListener("message", o), i(new Error("Request timed out"));
           }, 5e3);
-          function o(r) {
-            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)));
+          function o(s) {
+            typeof s.data == "object" && (s.data.source !== b || !s.data.response || s.data.response.id === e.id && (clearTimeout(n), window.removeEventListener("message", o), t(s.data.response)));
           }
           window.parent.postMessage({ source: w, request: e }, "*"), window.addEventListener("message", o);
         });
@@ -139,23 +141,23 @@ export function createVueIframeClient(u, d) {
       },
       handleEvent(e) {
         window.addEventListener("message", (t) => {
-          typeof t.data == "object" && (t.data.source !== p || t.data.type !== "event" || !t.data.request || e(t.data.request));
+          typeof t.data == "object" && (t.data.source !== b || t.data.type !== "event" || !t.data.request || e(t.data.request));
         });
       },
       deserialize: (e) => L(e),
-      serialize: (e) => C(e, { maxDepth: 1 / 0 })
+      serialize: (e) => v(e, { maxDepth: 1 / 0 })
     }
-  ), l = d?.disableDefaultConsole ? void 0 : console.log.bind(console), f = d?.disableDefaultConsole ? void 0 : console.warn.bind(console), c = d?.disableDefaultConsole ? void 0 : console.error.bind(console), g = d?.disableDefaultConsole ? void 0 : console.info.bind(console);
+  ), 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);
   return console.log = (...e) => {
-    s.emit("console", "log", e), l?.(...e);
+    r.emit("console", "log", e), f?.(...e);
   }, console.warn = (...e) => {
-    f?.(...e);
+    l?.(...e);
   }, console.error = (...e) => {
-    s.emit("console", "error", e), c?.(...e);
+    r.emit("console", "error", e), g?.(...e);
   }, console.info = (...e) => {
-    s.emit("console", "info", e), g?.(...e);
-  }, window.addEventListener("resize", async () => s.emit("resize", await s.$context.getPageHeight())), new MutationObserver(
-    async () => s.emit("resize", await s.$context.getPageHeight())
+    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, {
     childList: !0,
     // observe direct children additions/removals
@@ -165,5 +167,5 @@ export function createVueIframeClient(u, d) {
     // observe attribute changes (like style, class)
     characterData: !0
     // observe text changes
-  }), s.emit("ready"), s;
+  }), r.emit("ready"), r;
 }

package/dist/types.d.ts

@@ -1,3 +1,5 @@
+import type { RpcEvents } from '@nookuio/rpc';
+import type { DragDropContext } from './drag-drop';
 export interface EventRequest {
     eventName: string;
     args: any[];
@@ -15,7 +17,7 @@ export interface ContextResponse {
     key: string;
     result: any;
 }
-export interface CoreIframeContext {
+export interface CoreIframeContext extends DragDropContext {
     setTheme: (theme: 'dark' | 'light') => void;
     getHoveredElement: (options: {
         path: string;
@@ -41,7 +43,7 @@ export interface CoreIframeContext {
         id: string;
     }) => void;
 }
-export interface CoreIframeEvents {
+export interface CoreIframeEvents extends RpcEvents {
     ready: () => void;
     resize: (height: number) => void;
     console: (type: 'log' | 'error' | 'info' | 'warn', message: any[]) => void;
@@ -53,7 +55,19 @@ export interface CoreIframeEvents {
 }
 export interface VueIframeContext extends CoreIframeContext {
     navigateTo: (to: string) => void;
+    getValue: (options: {
+        code: string;
+        path?: string;
+        onTemplateContext?: boolean;
+        context?: Record<string, any>;
+    }) => any;
     getInstanceData: (path: string /** filepath path of the component */) => Record<string, any>;
+    runCode: (options: {
+        path?: string;
+        code: string;
+        onTemplateContext?: boolean;
+        context?: Record<string, any>;
+    }) => any;
     /**
      * For virtual SFC preview
      *
@@ -67,7 +81,7 @@ export interface VueIframeEvents extends CoreIframeEvents {
 }
 export interface EditorContext {
 }
-export interface EditorEvents {
+export interface EditorEvents extends RpcEvents {
 }
 export interface ElementPosition {
     top: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nookuio/iframe",
   "description": "",
-  "version": "1.0.0",
+  "version": "1.0.1-beta.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {
@@ -30,7 +30,8 @@
     "dist"
   ],
   "dependencies": {
-    "telejson": "7.2.0"
+    "telejson": "7.2.0",
+    "@nookuio/rpc": "1.0.1"
   },
   "devDependencies": {},
   "keywords": [],

package/dist/createClient.d.ts

@@ -1,51 +0,0 @@
-import type { ContextRequest, ContextResponse, EventRequest } from './types';
-type ArgumentsType<T> = T extends (...args: infer A) => any ? A : never;
-type ClientReturnBase<R, L, RE, LE> = {
-    [K in keyof R]: R[K] extends (...args: any[]) => any ? (...args: Parameters<R[K]>) => Promise<Awaited<ReturnType<R[K]>>> : R[K] extends any[] ? Promise<R[K]> : R[K] extends object ? ClientReturnBase<R[K], L, RE, LE> : Promise<R[K]>;
-};
-type ClientReturn<R, L, RE, LE> = ClientReturnBase<R, L, RE, LE> & {
-    $context: L;
-    on: <E extends keyof RE>(eventName: E, listener: (...args: ArgumentsType<RE[E]>) => void) => void;
-    off: <E extends keyof RE>(eventName: E, listener: (...args: ArgumentsType<RE[E]>) => void) => void;
-    emit: <E extends keyof LE>(eventName: E, ...args: ArgumentsType<LE[E]>) => void;
-    removeAllListeners: () => void;
-};
-interface ClientOptions {
-    /**
-     * Function to send requests to the remote process
-     *
-     * Should return a ContextResponse
-     */
-    invoke: (request: ContextRequest) => Promise<ContextResponse>;
-    /**
-     * Function to handle incoming requests from the remote process
-     *
-     * Will be called only once at the start of the client
-     */
-    handle: (handler: (request: ContextRequest) => Promise<ContextResponse>) => void;
-    /**
-     * Function to emit events to the remote process
-     */
-    emit: (request: EventRequest) => void;
-    /**
-     * Function to handle events from the remote process
-     *
-     * Will be called only once at the start of the client
-     */
-    handleEvent: (handleRequest: (request: EventRequest) => void) => void;
-    /**
-     * Custom function to serialize data
-     *
-     * by default it uses JSON.stringify
-     */
-    serialize?: (data: any) => any;
-    /**
-     * Custom function to deserialize data
-     *
-     * by default it uses JSON.parse
-     */
-    deserialize?: (data: any) => any;
-}
-type Context = Record<string, any>;
-export declare function createClient<R extends Context, L extends Context, RE, LE>(localCtx: L, options: ClientOptions): ClientReturn<R, L, RE, LE>;
-export {};

package/dist/createClient.js

@@ -1,118 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createClient = createClient;
-function createClient(y, l) {
-  const {
-    invoke: c,
-    handle: f,
-    emit: o,
-    handleEvent: d,
-    serialize: x,
-    deserialize: v
-  } = l;
-  function g(e) {
-    try {
-      return x ? x(e) : JSON.stringify(e);
-    } catch {
-      return e;
-    }
-  }
-  function R(e) {
-    try {
-      return v ? v(e) : JSON.parse(e);
-    } catch {
-      return e;
-    }
-  }
-  const u = new Map();
-  f(async e => {
-    const n = p(y, e.key || "");
-    if (n === void 0) return {
-      type: "response",
-      id: e.id,
-      key: e.key,
-      result: void 0
-    };
-    let r = e.args ? R(e.args) : [];
-    Array.isArray(r) || (r = [r]);
-    const s = typeof n == "function" ? await n(...r) : n;
-    return {
-      type: "response",
-      id: e.id,
-      key: e.key,
-      result: g(s)
-    };
-  }), d(e => {
-    const n = u.get(e.eventName);
-    if (!n?.length) return;
-    let r = e.args ? R(e.args) : [];
-    Array.isArray(r) || (r = [r]), n.forEach(s => s(...r));
-  });
-  const E = new Map();
-  function m(e) {
-    const n = e.join(".");
-    if (E.has(n)) return E.get(n);
-    const r = async (...i) => {
-        const t = {
-            type: "request",
-            id: `${n}-${Date.now()}-${Math.random()}`,
-            key: n,
-            args: g(i)
-          },
-          a = await c(t);
-        return R(a.result);
-      },
-      s = new Proxy(r, {
-        get(i, t) {
-          if (t === "then") {
-            const a = i();
-            return a.then.bind(a);
-          }
-          if (t === "catch" || t === "finally") {
-            const a = i();
-            return a[t].bind(a);
-          }
-          return m([...e, t]);
-        },
-        apply(i, t, a) {
-          return i.apply(t, a);
-        }
-      });
-    return E.set(n, s), s;
-  }
-  return new Proxy({}, {
-    get(e, n) {
-      if (n === "$context") return y;
-      if (n === "on") return (s, i) => {
-        const t = u.get(s);
-        if (!t) {
-          u.set(s, [i]);
-          return;
-        }
-        t.push(i);
-      };
-      if (n === "off") return (s, i) => {
-        const t = u.get(s)?.indexOf(i);
-        t === -1 || t === void 0 || u.get(s)?.splice(t, 1);
-      };
-      if (n === "emit") return (s, ...i) => {
-        o({
-          eventName: s,
-          args: g(i)
-        });
-      };
-      if (n === "removeAllListeners") return () => u.clear();
-      if (typeof n != "symbol") return m([n]);
-    }
-  });
-}
-function p(y, l, c) {
-  if (!y || typeof y != "object") return c;
-  const f = Array.isArray(l) ? l : l.replace(/\[(\d+)]/g, ".$1").replace(/\["([^"]+)"\]/g, ".$1").replace(/\['([^']+)'\]/g, ".$1").split(".").filter(Boolean);
-  let o = y;
-  for (const d of f) if (o != null && typeof o == "object" && d in o) o = o[d];else return c;
-  return o;
-}

package/dist/createClient.mjs

@@ -1,114 +0,0 @@
-export function createClient(y, l) {
-  const { invoke: c, handle: f, emit: o, handleEvent: d, serialize: x, deserialize: v } = l;
-  function g(e) {
-    try {
-      return x ? x(e) : JSON.stringify(e);
-    } catch {
-      return e;
-    }
-  }
-  function R(e) {
-    try {
-      return v ? v(e) : JSON.parse(e);
-    } catch {
-      return e;
-    }
-  }
-  const u = /* @__PURE__ */ new Map();
-  f(async (e) => {
-    const n = p(y, e.key || "");
-    if (n === void 0)
-      return {
-        type: "response",
-        id: e.id,
-        key: e.key,
-        result: void 0
-      };
-    let r = e.args ? R(e.args) : [];
-    Array.isArray(r) || (r = [r]);
-    const s = typeof n == "function" ? await n(...r) : n;
-    return {
-      type: "response",
-      id: e.id,
-      key: e.key,
-      result: g(s)
-    };
-  }), d((e) => {
-    const n = u.get(e.eventName);
-    if (!n?.length) return;
-    let r = e.args ? R(e.args) : [];
-    Array.isArray(r) || (r = [r]), n.forEach((s) => s(...r));
-  });
-  const E = /* @__PURE__ */ new Map();
-  function m(e) {
-    const n = e.join(".");
-    if (E.has(n))
-      return E.get(n);
-    const r = async (...i) => {
-      const t = {
-        type: "request",
-        id: `${n}-${Date.now()}-${Math.random()}`,
-        // More robust ID
-        key: n,
-        args: g(i)
-      }, a = await c(t);
-      return R(a.result);
-    }, s = new Proxy(r, {
-      get(i, t) {
-        if (t === "then") {
-          const a = i();
-          return a.then.bind(a);
-        }
-        if (t === "catch" || t === "finally") {
-          const a = i();
-          return a[t].bind(a);
-        }
-        return m([...e, t]);
-      },
-      apply(i, t, a) {
-        return i.apply(t, a);
-      }
-    });
-    return E.set(n, s), s;
-  }
-  return new Proxy(
-    {},
-    {
-      get(e, n) {
-        if (n === "$context") return y;
-        if (n === "on")
-          return (s, i) => {
-            const t = u.get(s);
-            if (!t) {
-              u.set(s, [i]);
-              return;
-            }
-            t.push(i);
-          };
-        if (n === "off")
-          return (s, i) => {
-            const t = u.get(s)?.indexOf(i);
-            t === -1 || t === void 0 || u.get(s)?.splice(t, 1);
-          };
-        if (n === "emit")
-          return (s, ...i) => {
-            o({ eventName: s, args: g(i) });
-          };
-        if (n === "removeAllListeners") return () => u.clear();
-        if (typeof n != "symbol")
-          return m([n]);
-      }
-    }
-  );
-}
-function p(y, l, c) {
-  if (!y || typeof y != "object") return c;
-  const f = Array.isArray(l) ? l : l.replace(/\[(\d+)]/g, ".$1").replace(/\["([^"]+)"\]/g, ".$1").replace(/\['([^']+)'\]/g, ".$1").split(".").filter(Boolean);
-  let o = y;
-  for (const d of f)
-    if (o != null && typeof o == "object" && d in o)
-      o = o[d];
-    else
-      return c;
-  return o;
-}