@nookuio/iframe 0.1.0

package/dist/constants.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The path of the editor page which will be rendered in canvas
+ */
+export declare const EDITOR_PAGE_PATH = "/__nooku/editor";
+export declare const COMPONENT_PREVIEW_PAGE_PATH = "/__nooku/component-preview";
+export declare const IFRAME_SOURCE_NAME = "nooku-frame";
+export declare const EDITOR_SOURCE_NAME = "nooku-editor";

package/dist/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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`;
+const COMPONENT_PREVIEW_PAGE_PATH = exports.COMPONENT_PREVIEW_PAGE_PATH = `/__nooku/component-preview`;
+const IFRAME_SOURCE_NAME = exports.IFRAME_SOURCE_NAME = "nooku-frame";
+const EDITOR_SOURCE_NAME = exports.EDITOR_SOURCE_NAME = "nooku-editor";

package/dist/constants.mjs

@@ -0,0 +1,4 @@
+export const EDITOR_PAGE_PATH = `/__nooku/editor`;
+export const COMPONENT_PREVIEW_PAGE_PATH = `/__nooku/component-preview`;
+export const IFRAME_SOURCE_NAME = "nooku-frame";
+export const EDITOR_SOURCE_NAME = "nooku-editor";

package/dist/createClient.d.ts

@@ -0,0 +1,54 @@
+import type { ContextRequest, ContextResponse, EventListener } 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 main remote process
+     *
+     * Should return a ContextResponse
+     */
+    invoke: (request: ContextRequest) => Promise<ContextResponse>;
+    /**
+     * Function to handle incoming requests from the remote process
+     */
+    handle: (handler: (request: ContextRequest) => Promise<ContextResponse>) => void;
+    /**
+     * Function to emit events to the remote process
+     */
+    emit: (eventName: string, ...args: any[]) => void;
+    /**
+     * Function to subscribe to events from the remote process
+     */
+    subscribe: (eventName: string, listener: EventListener) => void;
+    /**
+     * Unsubscribe to events from the remote process
+     */
+    unsubscribe: (eventName: string, listener: EventListener) => void;
+    /**
+     * Remove all the listeners
+     */
+    removeAllListeners: () => 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;
+}
+export declare function createClient<R, L, RE, LE>(localCtx: L, options: ClientOptions): ClientReturn<R, L, RE, LE>;
+export {};

package/dist/createClient.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createClient = createClient;
+var _lodash = _interopRequireDefault(require("lodash"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function defaultSerialize(data) {
+  try {
+    return JSON.stringify(data);
+  } catch (error) {
+    return data;
+  }
+}
+function defaultDeserialize(data) {
+  try {
+    return JSON.parse(data);
+  } catch (error) {
+    return data;
+  }
+}
+function createClient(localCtx, options) {
+  const {
+    invoke,
+    handle,
+    subscribe,
+    removeAllListeners,
+    emit,
+    unsubscribe,
+    serialize = defaultSerialize,
+    deserialize = defaultDeserialize
+  } = options;
+  handle(async request => {
+    const value = _lodash.default.get(localCtx, request.key);
+    if (value === void 0) return {
+      type: "response",
+      id: request.id,
+      key: request.key,
+      result: void 0
+    };
+    const result = typeof value === "function" ? await value(...deserialize(request.args)) : value;
+    return {
+      type: "response",
+      id: request.id,
+      key: request.key,
+      result: serialize(result)
+    };
+  });
+  const proxyCache = /* @__PURE__ */new Map();
+  function createProxyForPath(path) {
+    const pathKey = path.join(".");
+    if (proxyCache.has(pathKey)) {
+      return proxyCache.get(pathKey);
+    }
+    const callHandler = async (...args) => {
+      const request = {
+        type: "request",
+        id: `${pathKey}-${Date.now()}-${Math.random()}`,
+        // More robust ID
+        key: pathKey,
+        args: serialize(args)
+      };
+      const response = await invoke(request);
+      return deserialize(response.result);
+    };
+    const proxy = new Proxy(callHandler, {
+      get(target, prop) {
+        if (prop === "then") {
+          const promise = target();
+          return promise.then.bind(promise);
+        }
+        if (prop === "catch" || prop === "finally") {
+          const promise = target();
+          return promise[prop].bind(promise);
+        }
+        return createProxyForPath([...path, prop]);
+      },
+      apply(target, thisArg, args) {
+        return target.apply(thisArg, args);
+      }
+    });
+    proxyCache.set(pathKey, proxy);
+    return proxy;
+  }
+  const rootProxy = new Proxy({}, {
+    get(_target, prop) {
+      if (prop === "$context") return localCtx;
+      if (prop === "on") return subscribe;
+      if (prop === "off") return unsubscribe;
+      if (prop === "emit") return emit;
+      if (prop === "removeAllListeners") return removeAllListeners;
+      if (typeof prop === "symbol") return void 0;
+      return createProxyForPath([prop]);
+    }
+  });
+  return rootProxy;
+}

package/dist/createClient.mjs

@@ -0,0 +1,95 @@
+import _ from "lodash";
+function defaultSerialize(data) {
+  try {
+    return JSON.stringify(data);
+  } catch (error) {
+    return data;
+  }
+}
+function defaultDeserialize(data) {
+  try {
+    return JSON.parse(data);
+  } catch (error) {
+    return data;
+  }
+}
+export function createClient(localCtx, options) {
+  const {
+    invoke,
+    handle,
+    subscribe,
+    removeAllListeners,
+    emit,
+    unsubscribe,
+    serialize = defaultSerialize,
+    deserialize = defaultDeserialize
+  } = options;
+  handle(async (request) => {
+    const value = _.get(localCtx, request.key);
+    if (value === void 0)
+      return {
+        type: "response",
+        id: request.id,
+        key: request.key,
+        result: void 0
+      };
+    const result = typeof value === "function" ? await value(...deserialize(request.args)) : value;
+    return {
+      type: "response",
+      id: request.id,
+      key: request.key,
+      result: serialize(result)
+    };
+  });
+  const proxyCache = /* @__PURE__ */ new Map();
+  function createProxyForPath(path) {
+    const pathKey = path.join(".");
+    if (proxyCache.has(pathKey)) {
+      return proxyCache.get(pathKey);
+    }
+    const callHandler = async (...args) => {
+      const request = {
+        type: "request",
+        id: `${pathKey}-${Date.now()}-${Math.random()}`,
+        // More robust ID
+        key: pathKey,
+        args: serialize(args)
+      };
+      const response = await invoke(request);
+      return deserialize(response.result);
+    };
+    const proxy = new Proxy(callHandler, {
+      get(target, prop) {
+        if (prop === "then") {
+          const promise = target();
+          return promise.then.bind(promise);
+        }
+        if (prop === "catch" || prop === "finally") {
+          const promise = target();
+          return promise[prop].bind(promise);
+        }
+        return createProxyForPath([...path, prop]);
+      },
+      apply(target, thisArg, args) {
+        return target.apply(thisArg, args);
+      }
+    });
+    proxyCache.set(pathKey, proxy);
+    return proxy;
+  }
+  const rootProxy = new Proxy(
+    {},
+    {
+      get(_target, prop) {
+        if (prop === "$context") return localCtx;
+        if (prop === "on") return subscribe;
+        if (prop === "off") return unsubscribe;
+        if (prop === "emit") return emit;
+        if (prop === "removeAllListeners") return removeAllListeners;
+        if (typeof prop === "symbol") return void 0;
+        return createProxyForPath([prop]);
+      }
+    }
+  );
+  return rootProxy;
+}

package/dist/editor.d.ts

@@ -0,0 +1,11 @@
+import type { CoreIframeContext, CoreIframeEvents, EditorContext, EditorEvents } from './types';
+/**
+ * This function should be called inside the editor
+ */
+export declare function createIframeClient<IframeContext extends CoreIframeContext, IframeEvents extends CoreIframeEvents>(iframe: string | HTMLIFrameElement): { [K in keyof IframeContext]: IframeContext[K] extends (...args: any[]) => any ? (...args: Parameters<IframeContext[K]>) => Promise<Awaited<ReturnType<IframeContext[K]>>> : IframeContext[K] extends any[] ? Promise<IframeContext[K]> : IframeContext[K] extends object ? IframeContext[K] extends infer T ? { [K_1 in keyof T]: IframeContext[K][K_1] extends (...args: any[]) => any ? (...args: Parameters<IframeContext[K][K_1]>) => Promise<Awaited<ReturnType<IframeContext[K][K_1]>>> : IframeContext[K][K_1] extends any[] ? Promise<IframeContext[K][K_1]> : IframeContext[K][K_1] extends object ? IframeContext[K][K_1] extends infer T_1 ? { [K_2 in keyof T_1]: IframeContext[K][K_1][K_2] extends (...args: any[]) => any ? (...args: Parameters<IframeContext[K][K_1][K_2]>) => Promise<Awaited<ReturnType<IframeContext[K][K_1][K_2]>>> : IframeContext[K][K_1][K_2] extends any[] ? Promise<IframeContext[K][K_1][K_2]> : IframeContext[K][K_1][K_2] extends object ? IframeContext[K][K_1][K_2] extends infer T_2 ? { [K_3 in keyof T_2]: IframeContext[K][K_1][K_2][K_3] extends (...args: any[]) => any ? (...args: Parameters<IframeContext[K][K_1][K_2][K_3]>) => Promise<Awaited<ReturnType<IframeContext[K][K_1][K_2][K_3]>>> : IframeContext[K][K_1][K_2][K_3] extends any[] ? Promise<IframeContext[K][K_1][K_2][K_3]> : IframeContext[K][K_1][K_2][K_3] extends object ? IframeContext[K][K_1][K_2][K_3] extends infer T_3 ? { [K_4 in keyof T_3]: IframeContext[K][K_1][K_2][K_3][K_4] extends (...args: any[]) => any ? (...args: Parameters<IframeContext[K][K_1][K_2][K_3][K_4]>) => Promise<Awaited<ReturnType<IframeContext[K][K_1][K_2][K_3][K_4]>>> : IframeContext[K][K_1][K_2][K_3][K_4] extends any[] ? Promise<IframeContext[K][K_1][K_2][K_3][K_4]> : IframeContext[K][K_1][K_2][K_3][K_4] extends object ? IframeContext[K][K_1][K_2][K_3][K_4] extends infer T_4 ? { [K_5 in keyof T_4]: IframeContext[K][K_1][K_2][K_3][K_4][K_5] extends (...args: any[]) => any ? (...args: Parameters<IframeContext[K][K_1][K_2][K_3][K_4][K_5]>) => Promise<Awaited<ReturnType<IframeContext[K][K_1][K_2][K_3][K_4][K_5]>>> : IframeContext[K][K_1][K_2][K_3][K_4][K_5] extends any[] ? Promise<IframeContext[K][K_1][K_2][K_3][K_4][K_5]> : IframeContext[K][K_1][K_2][K_3][K_4][K_5] extends object ? IframeContext[K][K_1][K_2][K_3][K_4][K_5] extends infer T_5 ? { [K_6 in keyof T_5]: IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6] extends (...args: any[]) => any ? (...args: Parameters<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6]>) => Promise<Awaited<ReturnType<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6]>>> : IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6] extends any[] ? Promise<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6]> : IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6] extends object ? IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6] extends infer T_6 ? { [K_7 in keyof T_6]: IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7] extends (...args: any[]) => any ? (...args: Parameters<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7]>) => Promise<Awaited<ReturnType<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7]>>> : IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7] extends any[] ? Promise<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7]> : IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7] extends object ? IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7] extends infer T_7 ? { [K_8 in keyof T_7]: IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8] extends (...args: any[]) => any ? (...args: Parameters<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8]>) => Promise<Awaited<ReturnType<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8]>>> : IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8] extends any[] ? Promise<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8]> : IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8] extends object ? IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8] extends infer T_8 ? { [K_9 in keyof T_8]: IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9] extends (...args: any[]) => any ? (...args: Parameters<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9]>) => Promise<Awaited<ReturnType<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9]>>> : IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9] extends any[] ? Promise<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9]> : IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9] extends object ? IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9] extends infer T_9 ? { [K_10 in keyof T_9]: IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9][K_10] extends (...args: any[]) => any ? (...args: Parameters<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9][K_10]>) => Promise<Awaited<ReturnType<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9][K_10]>>> : IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9][K_10] extends any[] ? Promise<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9][K_10]> : IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9][K_10] extends object ? /*elided*/ any : Promise<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9][K_10]>; } : never : Promise<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8][K_9]>; } : never : Promise<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7][K_8]>; } : never : Promise<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6][K_7]>; } : never : Promise<IframeContext[K][K_1][K_2][K_3][K_4][K_5][K_6]>; } : never : Promise<IframeContext[K][K_1][K_2][K_3][K_4][K_5]>; } : never : Promise<IframeContext[K][K_1][K_2][K_3][K_4]>; } : never : Promise<IframeContext[K][K_1][K_2][K_3]>; } : never : Promise<IframeContext[K][K_1][K_2]>; } : never : Promise<IframeContext[K][K_1]>; } : never : Promise<IframeContext[K]>; } & {
+    $context: EditorContext;
+    on: <E extends keyof IframeEvents>(eventName: E, listener: (...args: IframeEvents[E] extends infer T_10 ? T_10 extends IframeEvents[E] ? T_10 extends (...args: infer A) => any ? A : never : never : never) => void) => void;
+    off: <E extends keyof IframeEvents>(eventName: E, listener: (...args: IframeEvents[E] extends infer T_10 ? T_10 extends IframeEvents[E] ? T_10 extends (...args: infer A) => any ? A : never : never : never) => void) => void;
+    emit: <E extends never>(eventName: E, ...args: EditorEvents[E] extends infer T_10 ? T_10 extends EditorEvents[E] ? T_10 extends (...args: infer A) => any ? A : never : never : never) => void;
+    removeAllListeners: () => void;
+};

package/dist/editor.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createIframeClient = createIframeClient;
+var _constants = require("./constants");
+var _createClient = require("./createClient");
+var _telejson = require("telejson");
+const listenersCollection = /* @__PURE__ */new Map();
+function createIframeClient(iframe) {
+  let iframeElement;
+  function getIframe() {
+    if (!iframeElement) {
+      iframeElement = typeof iframe === "string" ? document.querySelector(`#${iframe}`) : iframe;
+    }
+    return iframeElement;
+  }
+  const client = (0, _createClient.createClient)({}, {
+    emit(eventName, ...args) {
+      const iframe2 = getIframe();
+      if (!iframe2) return;
+      iframe2.contentWindow?.postMessage({
+        source: _constants.EDITOR_SOURCE_NAME,
+        request: {
+          eventName,
+          args
+        }
+      }, "*");
+    },
+    handle(handler) {
+      window.addEventListener("message", async event => {
+        if (typeof event.data !== "object") return;
+        if (event.data.source !== _constants.IFRAME_SOURCE_NAME) return;
+        const iframe2 = getIframe();
+        if (!iframe2) return;
+        const response = await handler(event.data.request);
+        iframe2.contentWindow?.postMessage({
+          source: _constants.EDITOR_SOURCE_NAME,
+          response
+        }, "*");
+      });
+    },
+    async invoke(request) {
+      const iframe2 = getIframe();
+      if (!iframe2) return {
+        type: "response",
+        id: request.id,
+        key: request.key,
+        result: void 0
+      };
+      return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          window.removeEventListener("message", messageHandler);
+          reject(new Error("Request timed out"));
+        }, 5e3);
+        function messageHandler(event) {
+          if (typeof event.data !== "object") return;
+          if (event.data.source !== _constants.IFRAME_SOURCE_NAME || !event.data.response) return;
+          if (event.data.response.id !== request.id) return;
+          clearTimeout(timeout);
+          window.removeEventListener("message", messageHandler);
+          resolve(event.data.response);
+        }
+        iframe2.contentWindow?.postMessage({
+          source: _constants.IFRAME_SOURCE_NAME,
+          request
+        }, "*");
+        window.addEventListener("message", messageHandler);
+      });
+    },
+    subscribe(eventName, listener) {
+      const currentEventListenersCollection = listenersCollection.get(eventName);
+      if (!currentEventListenersCollection) {
+        listenersCollection.set(eventName, [listener]);
+        return;
+      }
+      currentEventListenersCollection.push(listener);
+    },
+    unsubscribe(eventName, listener) {
+      const index = listenersCollection.get(eventName)?.indexOf(listener);
+      if (index === -1 || index === void 0) return;
+      listenersCollection.get(eventName)?.splice(index, 1);
+    },
+    removeAllListeners() {
+      listenersCollection.clear();
+    },
+    deserialize: v => (0, _telejson.parse)(v),
+    serialize: v => (0, _telejson.stringify)(v, {
+      maxDepth: Infinity
+    })
+  });
+  window.addEventListener("message", event => {
+    if (typeof event.data !== "object") return;
+    if (event.data.source !== _constants.IFRAME_SOURCE_NAME || !event.data.request) return;
+    const currentEventListeners = listenersCollection.get(event.data.request.eventName);
+    if (!currentEventListeners?.length) return;
+    currentEventListeners.forEach(listener => listener(...event.data.request.args));
+  });
+  return client;
+}

package/dist/editor.mjs

@@ -0,0 +1,85 @@
+import { EDITOR_SOURCE_NAME, IFRAME_SOURCE_NAME } from "./constants.mjs";
+import { createClient } from "./createClient.mjs";
+import { stringify, parse } from "telejson";
+const listenersCollection = /* @__PURE__ */ new Map();
+export function createIframeClient(iframe) {
+  let iframeElement;
+  function getIframe() {
+    if (!iframeElement) {
+      iframeElement = typeof iframe === "string" ? document.querySelector(`#${iframe}`) : iframe;
+    }
+    return iframeElement;
+  }
+  const client = createClient(
+    {},
+    {
+      emit(eventName, ...args) {
+        const iframe2 = getIframe();
+        if (!iframe2) return;
+        iframe2.contentWindow?.postMessage({ source: EDITOR_SOURCE_NAME, request: { eventName, args } }, "*");
+      },
+      handle(handler) {
+        window.addEventListener("message", async (event) => {
+          if (typeof event.data !== "object") return;
+          if (event.data.source !== IFRAME_SOURCE_NAME) return;
+          const iframe2 = getIframe();
+          if (!iframe2) return;
+          const response = await handler(event.data.request);
+          iframe2.contentWindow?.postMessage({ source: EDITOR_SOURCE_NAME, response }, "*");
+        });
+      },
+      async invoke(request) {
+        const iframe2 = getIframe();
+        if (!iframe2)
+          return {
+            type: "response",
+            id: request.id,
+            key: request.key,
+            result: void 0
+          };
+        return new Promise((resolve, reject) => {
+          const timeout = setTimeout(() => {
+            window.removeEventListener("message", messageHandler);
+            reject(new Error("Request timed out"));
+          }, 5e3);
+          function messageHandler(event) {
+            if (typeof event.data !== "object") return;
+            if (event.data.source !== IFRAME_SOURCE_NAME || !event.data.response) return;
+            if (event.data.response.id !== request.id) return;
+            clearTimeout(timeout);
+            window.removeEventListener("message", messageHandler);
+            resolve(event.data.response);
+          }
+          iframe2.contentWindow?.postMessage({ source: IFRAME_SOURCE_NAME, request }, "*");
+          window.addEventListener("message", messageHandler);
+        });
+      },
+      subscribe(eventName, listener) {
+        const currentEventListenersCollection = listenersCollection.get(eventName);
+        if (!currentEventListenersCollection) {
+          listenersCollection.set(eventName, [listener]);
+          return;
+        }
+        currentEventListenersCollection.push(listener);
+      },
+      unsubscribe(eventName, listener) {
+        const index = listenersCollection.get(eventName)?.indexOf(listener);
+        if (index === -1 || index === void 0) return;
+        listenersCollection.get(eventName)?.splice(index, 1);
+      },
+      removeAllListeners() {
+        listenersCollection.clear();
+      },
+      deserialize: (v) => parse(v),
+      serialize: (v) => stringify(v, { maxDepth: Infinity })
+    }
+  );
+  window.addEventListener("message", (event) => {
+    if (typeof event.data !== "object") return;
+    if (event.data.source !== IFRAME_SOURCE_NAME || !event.data.request) return;
+    const currentEventListeners = listenersCollection.get(event.data.request.eventName);
+    if (!currentEventListeners?.length) return;
+    currentEventListeners.forEach((listener) => listener(...event.data.request.args));
+  });
+  return client;
+}

package/dist/iframe.d.ts

@@ -0,0 +1,11 @@
+import type { CoreIframeContext, CoreIframeEvents, EditorEvents } from './types';
+/**
+ * This function should be called inside the iframe
+ */
+export declare function createIframeClient<IframeContext extends CoreIframeContext, IframeEvents extends CoreIframeEvents>(local: Exclude<IframeContext, CoreIframeContext>): {} & {
+    $context: CoreIframeContext;
+    on: <E extends never>(eventName: E, listener: (...args: EditorEvents[E] extends infer T ? T extends EditorEvents[E] ? T extends (...args: infer A) => any ? A : never : never : never) => void) => void;
+    off: <E extends never>(eventName: E, listener: (...args: EditorEvents[E] extends infer T ? T extends EditorEvents[E] ? T extends (...args: infer A) => any ? A : never : never : never) => void) => void;
+    emit: <E extends keyof CoreIframeEvents>(eventName: E, ...args: CoreIframeEvents[E] extends infer T ? T extends CoreIframeEvents[E] ? T extends (...args: infer A) => any ? A : never : never : never) => void;
+    removeAllListeners: () => void;
+};

package/dist/iframe.js

@@ -0,0 +1,238 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createIframeClient = createIframeClient;
+var _constants = require("./constants");
+var _createClient = require("./createClient");
+var _telejson = require("telejson");
+const listenersCollection = /* @__PURE__ */new Map();
+function getSelector(path, id) {
+  return `[data-node-id="${id}"][data-node-path="${path}"]`;
+}
+function getElementStyles(selector, withPadding) {
+  const elements = document.querySelectorAll(selector);
+  if (!elements?.length) return;
+  const styles = Array.from(elements).map(element => {
+    const clientRect = element.getBoundingClientRect();
+    const position = {
+      width: clientRect.width,
+      height: clientRect.height,
+      top: clientRect.top,
+      left: clientRect.left
+    };
+    if (!withPadding) return position;
+    const computedStyle = window.getComputedStyle(element) ?? {};
+    return {
+      ...position,
+      padding: {
+        top: computedStyle.paddingTop,
+        right: computedStyle.paddingRight,
+        bottom: computedStyle.paddingBottom,
+        left: computedStyle.paddingLeft
+      }
+    };
+  });
+  if (!styles?.length) return;
+  return styles.length === 1 ? styles[0] : styles;
+}
+function createIframeClient(local) {
+  const client = (0, _createClient.createClient)({
+    document: window.document,
+    async editText({
+      path,
+      id
+    }) {
+      if (!path || id === void 0) return;
+      const selector = getSelector(path, id);
+      const element = document.querySelector(selector);
+      if (!element) return;
+      element.style.outline = "none";
+      element.setAttribute("spellcheck", "false");
+      element.setAttribute("contenteditable", "true");
+      const blurEvtHandler = event => {
+        const elm = event.target;
+        if (!elm) return;
+        const content = elm.innerText;
+        element.removeAttribute("contenteditable");
+        client.emit("text-update", {
+          path,
+          id,
+          content
+        });
+        element.removeEventListener("blur", blurEvtHandler);
+        element.removeEventListener("keydown", keyDownEvtHandler);
+        element.blur();
+      };
+      const keyDownEvtHandler = event => {
+        if (event.key === "Enter") {
+          event.stopPropagation();
+          event.preventDefault();
+          blurEvtHandler(event);
+        }
+      };
+      element.addEventListener("keydown", keyDownEvtHandler);
+      element.addEventListener("blur", blurEvtHandler);
+      element.focus();
+    },
+    async getHoveredElement({
+      path,
+      id,
+      x,
+      y
+    }) {
+      if (!path) return;
+      if (x !== void 0 && y !== void 0) {
+        let element = document.elementFromPoint(x, y);
+        if (!element) return;
+        let elementPath = element.getAttribute("data-node-path");
+        if (elementPath !== path) {
+          if (!element.parentElement) return;
+          while (element.parentElement && path !== path) {
+            element = element.parentElement;
+            elementPath = element.getAttribute("data-node-path");
+          }
+        }
+        const elementId = element.getAttribute("data-node-id");
+        if (!elementId) return;
+        const selector = getSelector(path, elementId);
+        const styles = getElementStyles(selector, false);
+        if (!styles) return;
+        return {
+          id: elementId,
+          path,
+          data: styles
+        };
+      } else {
+        const selector = getSelector(path, id);
+        const styles = getElementStyles(selector, false);
+        if (!styles) return;
+        return {
+          id,
+          path,
+          data: styles
+        };
+      }
+    },
+    async getPageHeight() {
+      const height = document.body.scrollHeight > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
+      return height;
+    },
+    async getSelectedElement({
+      path,
+      id
+    }) {
+      const selector = getSelector(path, id);
+      const styles = getElementStyles(selector, true);
+      if (!styles) return;
+      return {
+        path,
+        id,
+        data: styles
+      };
+    },
+    toggleTheme(theme) {
+      if (theme === "dark") {
+        document.documentElement.classList.remove("light");
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+        document.documentElement.classList.add("light");
+      }
+    }
+  }, {
+    emit(eventName, ...args) {
+      window.parent.postMessage({
+        source: _constants.IFRAME_SOURCE_NAME,
+        request: {
+          eventName,
+          args
+        }
+      }, "*");
+    },
+    handle(handler) {
+      window.addEventListener("message", async event => {
+        if (typeof event.data !== "object") return;
+        if (event.data.source !== _constants.EDITOR_SOURCE_NAME) return;
+        const response = await handler(event.data.request);
+        window.parent.postMessage({
+          source: _constants.IFRAME_SOURCE_NAME,
+          response
+        }, "*");
+      });
+    },
+    invoke(request) {
+      return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          window.removeEventListener("message", messageHandler);
+          reject(new Error("Request timed out"));
+        }, 5e3);
+        function messageHandler(event) {
+          if (typeof event.data !== "object") return;
+          if (event.data.source !== _constants.EDITOR_SOURCE_NAME || !event.data.response) return;
+          if (event.data.response.id !== request.id) return;
+          clearTimeout(timeout);
+          window.removeEventListener("message", messageHandler);
+          resolve(event.data.response);
+        }
+        window.parent.postMessage({
+          source: _constants.IFRAME_SOURCE_NAME,
+          request
+        }, "*");
+        window.addEventListener("message", messageHandler);
+      });
+    },
+    subscribe(eventName, listener) {
+      const currentEventListeners = listenersCollection.get(eventName);
+      if (!currentEventListeners) {
+        listenersCollection.set(eventName, [listener]);
+        return;
+      }
+      currentEventListeners.push(listener);
+    },
+    unsubscribe(eventName, listener) {
+      const index = listenersCollection.get(eventName)?.indexOf(listener);
+      if (index === -1 || index === void 0) return;
+      listenersCollection.get(eventName)?.splice(index, 1);
+    },
+    removeAllListeners() {
+      listenersCollection.clear();
+    },
+    deserialize: v => (0, _telejson.parse)(v),
+    serialize: v => (0, _telejson.stringify)(v, {
+      maxDepth: Infinity
+    })
+  });
+  window.addEventListener("message", event => {
+    if (typeof event.data !== "object") return;
+    if (event.data.source !== _constants.EDITOR_SOURCE_NAME || !event.data.request) return;
+    const currentEventListeners = listenersCollection.get(event.data.request.eventName);
+    if (!currentEventListeners?.length) return;
+    currentEventListeners.forEach(listener => listener(...event.data.request.args));
+  });
+  console.log = (...args) => {
+    client.emit("console", "log", args);
+  };
+  console.warn = (...args) => {};
+  console.error = (...args) => {
+    client.emit("console", "error", args);
+  };
+  console.info = (...args) => {
+    client.emit("console", "info", args);
+  };
+  window.addEventListener("resize", async () => client.emit("resize", await client.$context.getPageHeight()));
+  const mutationObserver = new MutationObserver(async () => client.emit("resize", await client.$context.getPageHeight()));
+  mutationObserver.observe(document.body, {
+    childList: true,
+    // observe direct children additions/removals
+    subtree: true,
+    // observe all descendants
+    attributes: true,
+    // observe attribute changes (like style, class)
+    characterData: true
+    // observe text changes
+  });
+  client.emit("ready");
+  return client;
+}

package/dist/iframe.mjs

@@ -0,0 +1,209 @@
+import { EDITOR_SOURCE_NAME, IFRAME_SOURCE_NAME } from "./constants.mjs";
+import { createClient } from "./createClient.mjs";
+import { stringify, parse } from "telejson";
+const listenersCollection = /* @__PURE__ */ new Map();
+function getSelector(path, id) {
+  return `[data-node-id="${id}"][data-node-path="${path}"]`;
+}
+function getElementStyles(selector, withPadding) {
+  const elements = document.querySelectorAll(selector);
+  if (!elements?.length) return;
+  const styles = Array.from(elements).map((element) => {
+    const clientRect = element.getBoundingClientRect();
+    const position = {
+      width: clientRect.width,
+      height: clientRect.height,
+      top: clientRect.top,
+      left: clientRect.left
+    };
+    if (!withPadding) return position;
+    const computedStyle = window.getComputedStyle(element) ?? {};
+    return {
+      ...position,
+      padding: {
+        top: computedStyle.paddingTop,
+        right: computedStyle.paddingRight,
+        bottom: computedStyle.paddingBottom,
+        left: computedStyle.paddingLeft
+      }
+    };
+  });
+  if (!styles?.length) return;
+  return styles.length === 1 ? styles[0] : styles;
+}
+export function createIframeClient(local) {
+  const client = createClient(
+    {
+      document: window.document,
+      async editText({ path, id }) {
+        if (!path || id === void 0) return;
+        const selector = getSelector(path, id);
+        const element = document.querySelector(selector);
+        if (!element) return;
+        element.style.outline = "none";
+        element.setAttribute("spellcheck", "false");
+        element.setAttribute("contenteditable", "true");
+        const blurEvtHandler = (event) => {
+          const elm = event.target;
+          if (!elm) return;
+          const content = elm.innerText;
+          element.removeAttribute("contenteditable");
+          client.emit("text-update", { path, id, content });
+          element.removeEventListener("blur", blurEvtHandler);
+          element.removeEventListener("keydown", keyDownEvtHandler);
+          element.blur();
+        };
+        const keyDownEvtHandler = (event) => {
+          if (event.key === "Enter") {
+            event.stopPropagation();
+            event.preventDefault();
+            blurEvtHandler(event);
+          }
+        };
+        element.addEventListener("keydown", keyDownEvtHandler);
+        element.addEventListener("blur", blurEvtHandler);
+        element.focus();
+      },
+      async getHoveredElement({ path, id, x, y }) {
+        if (!path) return;
+        if (x !== void 0 && y !== void 0) {
+          let element = document.elementFromPoint(x, y);
+          if (!element) return;
+          let elementPath = element.getAttribute("data-node-path");
+          if (elementPath !== path) {
+            if (!element.parentElement) return;
+            while (element.parentElement && path !== path) {
+              element = element.parentElement;
+              elementPath = element.getAttribute("data-node-path");
+            }
+          }
+          const elementId = element.getAttribute("data-node-id");
+          if (!elementId) return;
+          const selector = getSelector(path, elementId);
+          const styles = getElementStyles(selector, false);
+          if (!styles) return;
+          return {
+            id: elementId,
+            path,
+            data: styles
+          };
+        } else {
+          const selector = getSelector(path, id);
+          const styles = getElementStyles(selector, false);
+          if (!styles) return;
+          return {
+            id,
+            path,
+            data: styles
+          };
+        }
+      },
+      async getPageHeight() {
+        const height = document.body.scrollHeight > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
+        return height;
+      },
+      async getSelectedElement({ path, id }) {
+        const selector = getSelector(path, id);
+        const styles = getElementStyles(selector, true);
+        if (!styles) return;
+        return {
+          path,
+          id,
+          data: styles
+        };
+      },
+      toggleTheme(theme) {
+        if (theme === "dark") {
+          document.documentElement.classList.remove("light");
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
+          document.documentElement.classList.add("light");
+        }
+      }
+    },
+    {
+      emit(eventName, ...args) {
+        window.parent.postMessage({ source: IFRAME_SOURCE_NAME, request: { eventName, args } }, "*");
+      },
+      handle(handler) {
+        window.addEventListener("message", async (event) => {
+          if (typeof event.data !== "object") return;
+          if (event.data.source !== EDITOR_SOURCE_NAME) return;
+          const response = await handler(event.data.request);
+          window.parent.postMessage({ source: IFRAME_SOURCE_NAME, response }, "*");
+        });
+      },
+      invoke(request) {
+        return new Promise((resolve, reject) => {
+          const timeout = setTimeout(() => {
+            window.removeEventListener("message", messageHandler);
+            reject(new Error("Request timed out"));
+          }, 5e3);
+          function messageHandler(event) {
+            if (typeof event.data !== "object") return;
+            if (event.data.source !== EDITOR_SOURCE_NAME || !event.data.response) return;
+            if (event.data.response.id !== request.id) return;
+            clearTimeout(timeout);
+            window.removeEventListener("message", messageHandler);
+            resolve(event.data.response);
+          }
+          window.parent.postMessage({ source: IFRAME_SOURCE_NAME, request }, "*");
+          window.addEventListener("message", messageHandler);
+        });
+      },
+      subscribe(eventName, listener) {
+        const currentEventListeners = listenersCollection.get(eventName);
+        if (!currentEventListeners) {
+          listenersCollection.set(eventName, [listener]);
+          return;
+        }
+        currentEventListeners.push(listener);
+      },
+      unsubscribe(eventName, listener) {
+        const index = listenersCollection.get(eventName)?.indexOf(listener);
+        if (index === -1 || index === void 0) return;
+        listenersCollection.get(eventName)?.splice(index, 1);
+      },
+      removeAllListeners() {
+        listenersCollection.clear();
+      },
+      deserialize: (v) => parse(v),
+      serialize: (v) => stringify(v, { maxDepth: Infinity })
+    }
+  );
+  window.addEventListener("message", (event) => {
+    if (typeof event.data !== "object") return;
+    if (event.data.source !== EDITOR_SOURCE_NAME || !event.data.request) return;
+    const currentEventListeners = listenersCollection.get(event.data.request.eventName);
+    if (!currentEventListeners?.length) return;
+    currentEventListeners.forEach((listener) => listener(...event.data.request.args));
+  });
+  console.log = (...args) => {
+    client.emit("console", "log", args);
+  };
+  console.warn = (...args) => {
+  };
+  console.error = (...args) => {
+    client.emit("console", "error", args);
+  };
+  console.info = (...args) => {
+    client.emit("console", "info", args);
+  };
+  window.addEventListener("resize", async () => client.emit("resize", await client.$context.getPageHeight()));
+  const mutationObserver = new MutationObserver(
+    async () => client.emit("resize", await client.$context.getPageHeight())
+  );
+  mutationObserver.observe(document.body, {
+    childList: true,
+    // observe direct children additions/removals
+    subtree: true,
+    // observe all descendants
+    attributes: true,
+    // observe attribute changes (like style, class)
+    characterData: true
+    // observe text changes
+  });
+  client.emit("ready");
+  return client;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './createClient';
+export * from './constants';
+export * from './types';

package/dist/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _createClient = require("./createClient");
+Object.keys(_createClient).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _createClient[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _createClient[key];
+    }
+  });
+});
+var _constants = require("./constants");
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _constants[key];
+    }
+  });
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});

package/dist/index.mjs

@@ -0,0 +1,3 @@
+export * from "./createClient.mjs";
+export * from "./constants.mjs";
+export * from "./types.mjs";

package/dist/types.d.ts

@@ -0,0 +1,95 @@
+export interface EventRequest {
+    eventName: string;
+    args: any[];
+}
+export type EventListener = (...args: any[]) => void;
+export interface ContextRequest {
+    type: 'request';
+    id: string;
+    key: string;
+    args: any[];
+}
+export interface ContextResponse {
+    type: 'response';
+    id: string;
+    key: string;
+    result: any;
+}
+export interface CoreIframeContext {
+    toggleTheme: (theme: 'dark' | 'light') => void;
+    getHoveredElement: (options: {
+        path: string;
+        id?: string;
+        x?: number;
+        y?: number;
+    }) => Promise<{
+        id: string;
+        path: string;
+        data: ElementPosition | ElementPosition[];
+    } | undefined>;
+    getSelectedElement: (options: {
+        path: string;
+        id: string;
+    }) => Promise<{
+        id: string;
+        path: string;
+        data: ElementStyles | ElementStyles[];
+    } | undefined>;
+    getPageHeight: () => Promise<number>;
+    editText: (options: {
+        path: string;
+        id: string;
+    }) => void;
+    document: Document;
+}
+export interface CoreIframeEvents {
+    ready: () => void;
+    'route-change': (to: string) => void;
+    resize: (height: number) => void;
+    'text-update': (options: {
+        path: string;
+        id: string;
+        content: string;
+    }) => void;
+    console: (type: 'log' | 'error' | 'info' | 'warn', message: any[]) => void;
+}
+export interface IframeContext extends CoreIframeContext {
+    navigateTo: (to: string) => void;
+    getValue: (opts: {
+        code: string;
+        path?: string;
+        onTemplateContext?: boolean;
+        context?: Record<string, any>;
+    }) => any;
+    getInstanceData: (path: string /** filepath path of the component */) => Record<string, any>;
+    runCode: (opts: {
+        path?: string;
+        code: string;
+        onTemplateContext?: boolean;
+        context?: Record<string, any>;
+    }) => any;
+    updatePreview?: (options: {
+        path: string;
+        code: string;
+    }) => void;
+}
+export interface IframeEvents extends CoreIframeEvents {
+}
+export interface EditorContext {
+}
+export interface EditorEvents {
+}
+export interface ElementPosition {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface ElementStyles extends ElementPosition {
+    padding: {
+        top: string;
+        right: string;
+        bottom: string;
+        left: string;
+    };
+}

package/dist/types.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@nookuio/iframe",
+  "description": "",
+  "version": "0.1.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./iframe": {
+      "require": "./dist/iframe.js",
+      "import": "./dist/iframe.mjs",
+      "types": "./dist/iframe.d.ts"
+    },
+    "./editor": {
+      "require": "./dist/editor.js",
+      "import": "./dist/editor.mjs",
+      "types": "./dist/editor.d.ts"
+    },
+    "./types": {
+      "require": "./dist/types.js",
+      "import": "./dist/types.mjs",
+      "types": "./dist/types.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "telejson": "^7.2.0"
+  },
+  "devDependencies": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "build": "unbuild"
+  }
+}