@nookuio/iframe 0.5.0 → 0.7.0

package/dist/constants.d.ts

@@ -1,7 +1,8 @@
 /**
  * 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 EDITOR_PAGE_PATH = "/__nooku__/editor";
+export declare const COMPONENT_PREVIEW_PAGE_PATH = "/__nooku__/component-preview";
+export declare const VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = "/__nooku__/virtual-sfc-preview";
 export declare const IFRAME_SOURCE_NAME = "nooku-frame";
 export declare const EDITOR_SOURCE_NAME = "nooku-editor";

package/dist/constants.js

@@ -3,8 +3,9 @@
 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`;
+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`;
+const COMPONENT_PREVIEW_PAGE_PATH = exports.COMPONENT_PREVIEW_PAGE_PATH = `/__nooku__/component-preview`;
+const VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = exports.VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = `/__nooku__/virtual-sfc-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

@@ -1,4 +1,5 @@
-export const EDITOR_PAGE_PATH = `/__nooku/editor`;
-export const COMPONENT_PREVIEW_PAGE_PATH = `/__nooku/component-preview`;
+export const EDITOR_PAGE_PATH = `/__nooku__/editor`;
+export const COMPONENT_PREVIEW_PAGE_PATH = `/__nooku__/component-preview`;
+export const VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = `/__nooku__/virtual-sfc-preview`;
 export const IFRAME_SOURCE_NAME = "nooku-frame";
 export const EDITOR_SOURCE_NAME = "nooku-editor";

package/dist/editor.js

@@ -7,6 +7,35 @@ exports.createEditorClient = createEditorClient;
 var _constants = require("./constants");
 var _createClient = require("./createClient");
 var _telejson = require("telejson");
+function deserialize(data) {
+  const parsed = (0, _telejson.parse)(data, {
+    maxDepth: Infinity
+  });
+  const senitizeRefs = obj => {
+    if (Array.isArray(obj)) {
+      obj.forEach((item, index) => {
+        obj[index] = senitizeRefs(item);
+      });
+    } else if (obj && typeof obj === "object") {
+      if (obj.hasOwnProperty("__v_isRef")) {
+        const newObj = {
+          ...obj,
+          __v_isRef: "true",
+          // converted to string
+          value: obj.hasOwnProperty("value") && obj.value !== void 0 ? obj.value : obj._value ?? obj._rawValue
+        };
+        return newObj;
+      } else {
+        Object.keys(obj).forEach(key => {
+          obj[key] = senitizeRefs(obj[key]);
+        });
+      }
+    }
+    return obj;
+  };
+  const d = senitizeRefs(parsed);
+  return d;
+}
 function createEditorClient(iframe) {
   let iframeElement;
   function getIframe() {
@@ -72,7 +101,7 @@ function createEditorClient(iframe) {
         handleRequest(event.data.request);
       });
     },
-    deserialize: v => (0, _telejson.parse)(v),
+    deserialize,
     serialize: v => (0, _telejson.stringify)(v, {
       maxDepth: Infinity
     })

package/dist/editor.mjs

@@ -1,6 +1,33 @@
 import { EDITOR_SOURCE_NAME, IFRAME_SOURCE_NAME } from "./constants.mjs";
 import { createClient } from "./createClient.mjs";
 import { stringify, parse } from "telejson";
+function deserialize(data) {
+  const parsed = parse(data, { maxDepth: Infinity });
+  const senitizeRefs = (obj) => {
+    if (Array.isArray(obj)) {
+      obj.forEach((item, index) => {
+        obj[index] = senitizeRefs(item);
+      });
+    } else if (obj && typeof obj === "object") {
+      if (obj.hasOwnProperty("__v_isRef")) {
+        const newObj = {
+          ...obj,
+          __v_isRef: "true",
+          // converted to string
+          value: obj.hasOwnProperty("value") && obj.value !== void 0 ? obj.value : obj._value ?? obj._rawValue
+        };
+        return newObj;
+      } else {
+        Object.keys(obj).forEach((key) => {
+          obj[key] = senitizeRefs(obj[key]);
+        });
+      }
+    }
+    return obj;
+  };
+  const d = senitizeRefs(parsed);
+  return d;
+}
 export function createEditorClient(iframe) {
   let iframeElement;
   function getIframe() {
@@ -60,7 +87,7 @@ export function createEditorClient(iframe) {
           handleRequest(event.data.request);
         });
       },
-      deserialize: (v) => parse(v),
+      deserialize,
       serialize: (v) => stringify(v, { maxDepth: Infinity })
     }
   );

package/dist/index.d.ts

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

package/dist/index.js

@@ -24,4 +24,26 @@ Object.keys(_types).forEach(function (key) {
       return _types[key];
     }
   });
+});
+var _iframe = require("./iframe");
+Object.keys(_iframe).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _iframe[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _iframe[key];
+    }
+  });
+});
+var _editor = require("./editor");
+Object.keys(_editor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _editor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _editor[key];
+    }
+  });
 });

package/dist/index.mjs

@@ -1,2 +1,4 @@
 export * from "./constants.mjs";
 export * from "./types.mjs";
+export * from "./iframe.mjs";
+export * from "./editor.mjs";

package/dist/types.d.ts

@@ -54,23 +54,25 @@ export interface CoreIframeEvents {
 }
 export interface VueIframeContext extends CoreIframeContext {
     navigateTo: (to: string) => void;
-    getValue: (opts: {
+    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: (opts: {
+    runCode: (options: {
         path?: string;
         code: string;
         onTemplateContext?: boolean;
         context?: Record<string, any>;
     }) => any;
-    updatePreview?: (options: {
-        path: string;
-        code: string;
-    }) => void;
+    /**
+     * For virtual SFC preview
+     *
+     * Works only on VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH
+     */
+    updateVirtualSfcCode?: (path: string, code: string) => void;
 }
 export interface VueIframeEvents extends CoreIframeEvents {
     'route-change': (to: string) => void;
@@ -94,3 +96,27 @@ export interface ElementStyles extends ElementPosition {
         left: string;
     };
 }
+export interface PageOptions {
+    path: string;
+    layout?: string | false;
+    injectTailwind?: boolean;
+    tailwindVersion?: 3 | 4;
+    /**
+     * Specifically for pages
+     *
+     * If true, the page will be rendered as a component
+     */
+    renderAsComponent?: boolean;
+    /**
+     * Page params
+     */
+    params?: Record<string, string>;
+    /**
+     * Component props
+     */
+    props?: Record<string, any>;
+    /**
+     * Specifically for virtual SFC renderer page
+     */
+    code?: string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nookuio/iframe",
   "description": "",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {