@nookuio/iframe 0.9.9 → 1.0.0-beta.1

package/dist/iframe.mjs

@@ -1,78 +1,88 @@
-import { EDITOR_SOURCE_NAME as p, IFRAME_SOURCE_NAME as w } from "./constants.mjs";
-import { createClient as C } from "./createClient.mjs";
-import { stringify as v, parse as L } from "telejson";
-function b(c, l) {
-  return `[data-node-id="${l}"][data-node-path="${c}"]`;
+import { EDITOR_SOURCE_NAME as b, IFRAME_SOURCE_NAME as w } from "./constants.mjs";
+import { createClient as C } from "@nookuio/rpc";
+import { stringify as D, parse as v } from "telejson";
+import { DragDropManager as L } from "./drag-drop/dragDropManager.mjs";
+function p(m, l) {
+  return `[data-node-id="${l}"][data-node-path="${m}"]`;
 }
-function h(c, l) {
-  const s = document.querySelectorAll(c);
-  if (!s?.length) return;
-  const d = Array.from(s).map((f) => {
-    const u = f.getBoundingClientRect(), g = {
-      width: u.width,
-      height: u.height,
-      top: u.top,
-      left: u.left
+function h(m, l) {
+  const d = document.querySelectorAll(m);
+  if (!d?.length) return;
+  const r = Array.from(d).map((f) => {
+    const c = f.getBoundingClientRect(), g = {
+      width: c.width,
+      height: c.height,
+      top: c.top,
+      left: c.left
     };
     if (!l) return g;
-    const m = window.getComputedStyle(f) ?? {};
+    const u = window.getComputedStyle(f) ?? {};
     return {
       ...g,
       padding: {
-        top: m.paddingTop,
-        right: m.paddingRight,
-        bottom: m.paddingBottom,
-        left: m.paddingLeft
+        top: u.paddingTop,
+        right: u.paddingRight,
+        bottom: u.paddingBottom,
+        left: u.paddingLeft
       }
     };
   });
-  if (d?.length)
-    return d.length === 1 ? d[0] : d;
+  if (r?.length)
+    return r.length === 1 ? r[0] : r;
 }
-export function createVueIframeClient(c, l) {
-  const s = C(
+export function createVueIframeClient(m, l) {
+  const d = new L();
+  d.setCallbacks({
+    onDragStart: (e) => {
+      r.emit("drag-start", e);
+    },
+    onDragEnd: (e) => {
+      r.emit("drag-end", e);
+    }
+  });
+  const r = C(
     {
-      ...c,
+      ...m,
       async editText({ path: e, id: t }) {
         if (!e || t === void 0) return;
-        const i = b(e, t), n = document.querySelector(i);
+        const a = p(e, t), n = document.querySelector(a);
         if (!n) return;
         n.style.outline = "none", n.setAttribute("spellcheck", "false"), n.setAttribute("contenteditable", "true");
-        const o = (a) => {
-          const E = a.target;
+        const o = (i) => {
+          const E = i.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) => {
-          a.key === "Enter" && (a.stopPropagation(), a.preventDefault(), o(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 = (i) => {
+          i.key === "Enter" && (i.stopPropagation(), i.preventDefault(), o(i));
         };
-        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 }) {
+      async getHoveredElement({ path: e, id: t, x: a, y: n }) {
         if (e)
-          if (i !== void 0 && n !== void 0) {
-            let o = document.elementFromPoint(i, n);
+          if (a !== void 0 && n !== void 0) {
+            let o = document.elementFromPoint(a, 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 i = o.getAttribute("data-node-id");
+            if (!i) return;
+            const E = p(e, i), y = h(E, !1);
             return y ? {
-              id: a,
+              id: i,
               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 +90,7 @@ export function createVueIframeClient(c, l) {
         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 a = p(e, t), n = h(a, !0);
         if (n)
           return {
             path: e,
@@ -88,8 +98,25 @@ export function createVueIframeClient(c, l) {
             data: n
           };
       },
-      toggleTheme(e) {
-        e === "dark" ? (document.documentElement.classList.remove("light"), document.documentElement.classList.add("dark")) : (document.documentElement.classList.remove("dark"), document.documentElement.classList.add("light"));
+      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")));
+      },
+      // Drag and drop methods
+      async startDrag(e) {
+        return d.startDrag(e);
+      },
+      async updateDragPosition(e) {
+        return d.updateDragPosition(e);
+      },
+      async endDrag(e) {
+        return d.endDrag(e);
+      },
+      async getDropZones(e) {
+        return d.getDropZones(e);
+      },
+      async highlightDropZone(e) {
+        return d.highlightDropZone(e);
       }
       // updateElementClass({ className, id, path }) {
       //   const selector = getSelector(path, id);
@@ -117,18 +144,18 @@ export function createVueIframeClient(c, l) {
     {
       handle(e) {
         window.addEventListener("message", async (t) => {
-          if (typeof t.data != "object" || t.data.source !== p || t.data.type === "event" || !t.data.request) return;
-          const i = await e(t.data.request);
-          window.parent.postMessage({ source: w, response: i }, "*");
+          if (typeof t.data != "object" || t.data.source !== b || t.data.type === "event" || !t.data.request) return;
+          const a = await e(t.data.request);
+          window.parent.postMessage({ source: w, response: a }, "*");
         });
       },
       invoke(e) {
-        return new Promise((t, i) => {
+        return new Promise((t, a) => {
           const n = setTimeout(() => {
-            window.removeEventListener("message", o), i(new Error("Request timed out"));
+            window.removeEventListener("message", o), a(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);
         });
@@ -138,23 +165,23 @@ export function createVueIframeClient(c, l) {
       },
       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) => v(e, { maxDepth: 1 / 0 })
+      deserialize: (e) => v(e),
+      serialize: (e) => D(e, { maxDepth: 1 / 0 })
     }
-  ), 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);
+  ), f = l?.disableDefaultConsole ? void 0 : console.log.bind(console), c = l?.disableDefaultConsole ? void 0 : console.warn.bind(console), g = l?.disableDefaultConsole ? void 0 : console.error.bind(console), u = l?.disableDefaultConsole ? void 0 : console.info.bind(console);
   return console.log = (...e) => {
-    s.emit("console", "log", e), d?.(...e);
+    r.emit("console", "log", e), f?.(...e);
   }, console.warn = (...e) => {
-    f?.(...e);
+    c?.(...e);
   }, console.error = (...e) => {
-    s.emit("console", "error", e), u?.(...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), u?.(...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
@@ -164,5 +191,5 @@ export function createVueIframeClient(c, l) {
     // observe attribute changes (like style, class)
     characterData: !0
     // observe text changes
-  }), s.emit("ready"), s;
+  }), r.emit("ready"), r;
 }

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export * from './constants';
 export * from './types';
 export * from './iframe';
 export * from './editor';
+export * from './drag-drop';

package/dist/index.js

@@ -46,4 +46,15 @@ Object.keys(_editor).forEach(function (key) {
       return _editor[key];
     }
   });
+});
+var _dragDrop = require("./drag-drop");
+Object.keys(_dragDrop).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dragDrop[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dragDrop[key];
+    }
+  });
 });

package/dist/index.mjs

@@ -2,3 +2,4 @@ export * from "./constants.mjs";
 export * from "./types.mjs";
 export * from "./iframe.mjs";
 export * from "./editor.mjs";
+export * from "./drag-drop/index.mjs";

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import type { RpcEvents } from '@nookuio/rpc';
 export interface EventRequest {
     eventName: string;
     args: any[];
@@ -16,7 +17,7 @@ export interface ContextResponse {
     result: any;
 }
 export interface CoreIframeContext {
-    toggleTheme: (theme: 'dark' | 'light') => void;
+    setTheme: (theme: 'dark' | 'light') => void;
     getHoveredElement: (options: {
         path: string;
         id?: string;
@@ -40,8 +41,49 @@ export interface CoreIframeContext {
         path: string;
         id: string;
     }) => void;
+    startDrag: (options: {
+        elementId: string;
+        path: string;
+        x: number;
+        y: number;
+    }) => Promise<{
+        dragId: string;
+    }>;
+    updateDragPosition: (options: {
+        dragId: string;
+        x: number;
+        y: number;
+    }) => Promise<void>;
+    endDrag: (options: {
+        dragId: string;
+        canceled?: boolean;
+    }) => Promise<{
+        dropped: boolean;
+        targetId?: string;
+        targetPath?: string;
+        insertIndex?: number;
+    }>;
+    getDropZones: (options: {
+        x: number;
+        y: number;
+    }) => Promise<Array<{
+        elementId: string;
+        path: string;
+        rect: {
+            top: number;
+            left: number;
+            width: number;
+            height: number;
+        };
+        canDrop: boolean;
+    }>>;
+    highlightDropZone: (options: {
+        elementId?: string;
+        path?: string;
+        clear?: boolean;
+    }) => Promise<void>;
 }
-export interface CoreIframeEvents {
+export interface CoreIframeEvents extends RpcEvents {
     ready: () => void;
     resize: (height: number) => void;
     console: (type: 'log' | 'error' | 'info' | 'warn', message: any[]) => void;
@@ -50,10 +92,32 @@ export interface CoreIframeEvents {
         id: string;
         content: string;
     }) => void;
+    'drag-start': (data: {
+        elementId: string;
+        path: string;
+    }) => void;
+    'drag-end': (data: {
+        dropped: boolean;
+        targetId?: string;
+        targetPath?: string;
+        insertIndex?: number;
+    }) => void;
 }
 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 +131,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": "0.9.9",
+  "version": "1.0.0-beta.1",
   "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": [],
@@ -38,6 +39,6 @@
   "license": "ISC",
   "scripts": {
     "build": "unbuild",
-    "release": "pnpm publish --no-git-checks --access public"
+    "release": "pnpm build && pnpm publish --no-git-checks --access public"
   }
 }

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;
-}