@nookuio/vue 1.0.4 → 1.0.7

package/dist/index.js

@@ -16,29 +16,28 @@ var _helpers = require("./runtime/utils/helpers");
 var _utils = require("./runtime/utils");
 var _iframe = require("@nookuio/iframe");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function a(t, r, n) {
-  const o = typeof t == "string" ? document.querySelector(t) : t;
-  if (!o) {
-    const u = typeof t == "string" ? `Failed to mount app: mount target selector "${t}" returned null.` : "Failed to mount app to the target element";
-    console.warn(u);
+function a(t, i, e, r) {
+  const p = typeof t == "string" ? document.querySelector(t) : t;
+  if (!p) {
+    const m = typeof t == "string" ? `Failed to mount app: mount target selector "${t}" returned null.` : "Failed to mount app to the target element";
+    console.warn(m);
     return;
   }
-  const i = (0, _vue.createVNode)(r, n || {});
-  return (0, _vue.render)(i, o), i.component;
+  const o = (0, _vue.h)(i, e || {});
+  return o.appContext = r?._context || o.appContext, (0, _vue.render)(o, p), o.component;
 }
 const g = {
-  install(t, r) {
-    process.env.DEV && (window === void 0 || !(0, _helpers.isInsideEditor)() || window.location.pathname === _iframe.EDITOR_PAGE_PATH && (t.mount = function (n) {
-      t._component = {
-        render() {
-          return (0, _vue.h)(_vue.Suspense, {}, {
-            default: () => (0, _vue.h)(_ComponentPreview.default),
-            fallback: () => (0, _vue.h)("div", "Loading...")
-          });
-        }
-      };
-      const o = a(n, t._component);
-      return (0, _utils.initializeClient)(t), o?.proxy;
+  install(t, i) {
+    process.env.DEV && (window === void 0 || !(0, _helpers.isInsideEditor)() || window.location.pathname === _iframe.EDITOR_PAGE_PATH && (t._component = {
+      render() {
+        return (0, _vue.h)(_vue.Suspense, {}, {
+          default: () => (0, _vue.h)(_ComponentPreview.default),
+          fallback: () => (0, _vue.h)("div", "Loading...")
+        });
+      }
+    }, t.mount = function (e) {
+      const r = a(e, t._component, void 0, t);
+      return (0, _utils.initializeClient)(t), r?.proxy;
     }));
   }
 };

package/dist/index.mjs

@@ -1,36 +1,35 @@
-import { createVNode as p, h as e, render as d, Suspense as f } from "vue";
-import m from "./runtime/components/ComponentPreview.vue";
+import { h as n, render as d, Suspense as f } from "vue";
+import u from "./runtime/components/ComponentPreview.vue";
 import { isInsideEditor as l } from "./runtime/utils/helpers.mjs";
 import { initializeClient as s } from "./runtime/utils/index.mjs";
 import { EDITOR_PAGE_PATH as c } from "@nookuio/iframe";
-export { m as ComponentPreview };
-function a(t, r, n) {
-  const o = typeof t == "string" ? document.querySelector(t) : t;
-  if (!o) {
-    const u = typeof t == "string" ? `Failed to mount app: mount target selector "${t}" returned null.` : "Failed to mount app to the target element";
-    console.warn(u);
+export { u as ComponentPreview };
+function a(t, i, e, r) {
+  const p = typeof t == "string" ? document.querySelector(t) : t;
+  if (!p) {
+    const m = typeof t == "string" ? `Failed to mount app: mount target selector "${t}" returned null.` : "Failed to mount app to the target element";
+    console.warn(m);
     return;
   }
-  const i = p(r, n || {});
-  return d(i, o), i.component;
+  const o = n(i, e || {});
+  return o.appContext = r?._context || o.appContext, d(o, p), o.component;
 }
 const g = {
-  install(t, r) {
-    import.meta.env.DEV && (window === void 0 || !l() || window.location.pathname === c && (t.mount = function(n) {
-      t._component = {
-        render() {
-          return e(
-            f,
-            {},
-            {
-              default: () => e(m),
-              fallback: () => e("div", "Loading...")
-            }
-          );
-        }
-      };
-      const o = a(n, t._component);
-      return s(t), o?.proxy;
+  install(t, i) {
+    import.meta.env.DEV && (window === void 0 || !l() || window.location.pathname === c && (t._component = {
+      render() {
+        return n(
+          f,
+          {},
+          {
+            default: () => n(u),
+            fallback: () => n("div", "Loading...")
+          }
+        );
+      }
+    }, t.mount = function(e) {
+      const r = a(e, t._component, void 0, t);
+      return s(t), r?.proxy;
     }));
   }
 };

package/dist/runtime/composables/useComponent.js

@@ -6,28 +6,66 @@ Object.defineProperty(exports, "__esModule", {
 exports.useVueComponent = useVueComponent;
 var _vue = require("vue");
 var _utils = require("../utils");
-function useVueComponent(r, l) {
-  const o = (0, _vue.shallowRef)(),
-    t = (0, _vue.shallowRef)(),
-    e = (0, _vue.shallowRef)(!1);
-  async function f() {
-    e.value = !0;
-    const [u, a] = await (0, _utils.trySafe)(() => (0, _utils.importVueComponentFromPath)(r.value, (0, _vue.toValue)(l)), 5e3);
-    if (a) {
-      t.value = a, o.value = null, e.value = !1;
+var _helpers = require("../utils/helpers");
+function g(e) {
+  if (import.meta.server || !e) return;
+  const o = (0, _helpers.debounce)(() => {
+    const n = (0, _helpers.getInstanceState)(e);
+    window.__nooku__.emit("instance-data-update", n);
+  }, 500);
+  window.__nooku__ = {
+    ...(window.__nooku__ || {}),
+    getInstanceData: () => (0, _helpers.getInstanceState)(e)
+  };
+  let t;
+  return e.asyncDep && typeof e.asyncDep.then == "function" ? e.asyncDep.then(n => {
+    t = (0, _vue.watch)([() => n, () => e.devtoolsRawSetupState], o, {
+      deep: !0,
+      immediate: !0
+    });
+  }) : t = (0, _vue.watch)(() => e.devtoolsRawSetupState, o, {
+    deep: !0,
+    immediate: !0
+  }), () => t?.();
+}
+function useVueComponent(e, o) {
+  const t = (0, _vue.shallowRef)(),
+    n = (0, _vue.shallowRef)(),
+    r = (0, _vue.shallowRef)(!1);
+  async function s() {
+    r.value = !0;
+    const [i, d] = await (0, _utils.trySafe)(() => (0, _utils.importVueComponentFromPath)(e.value, (0, _vue.toValue)(o)), 5e3);
+    if (d) {
+      n.value = d, t.value = null, r.value = !1;
       return;
     }
-    if (!u) {
-      t.value = new Error(`Failed to load component from path: ${r}`), o.value = null, e.value = !1;
+    if (!i) {
+      n.value = new Error(`Failed to load component from path: ${e}`), t.value = null, r.value = !1;
       return;
     }
-    t.value = null, o.value = u, e.value = !1;
+    n.value = null, t.value = (0, _vue.defineComponent)({
+      name: "NookuEditorPreview",
+      setup(c, {
+        attrs: v,
+        slots: y
+      }) {
+        const f = (0, _vue.shallowRef)(null);
+        let p;
+        return (0, _vue.watch)(f, l => {
+          p?.(), l && (p = g(l.$ || l));
+        }), () => (0, _vue.h)(i, {
+          ref: f,
+          ...v,
+          ...c
+        }, y);
+      }
+    }), r.value = !1;
   }
-  return (0, _vue.watch)([() => r.value, l], f, {
+  return (0, _vue.watch)([() => e.value, o], s, {
     immediate: !0
   }), {
-    component: o,
-    error: t,
-    isLoading: e
+    component: t,
+    error: n,
+    isLoading: r
   };
 }

package/dist/runtime/composables/useComponent.mjs

@@ -1,23 +1,54 @@
-import { watch as m, shallowRef as n, toValue as i } from "vue";
-import { trySafe as s, importVueComponentFromPath as p } from "../utils/index.mjs";
-export function useVueComponent(r, l) {
-  const o = n(), t = n(), e = n(!1);
-  async function f() {
-    e.value = !0;
-    const [u, a] = await s(() => p(r.value, i(l)), 5e3);
-    if (a) {
-      t.value = a, o.value = null, e.value = !1;
+import { watch as u, shallowRef as a, toValue as _, defineComponent as w, h } from "vue";
+import { trySafe as C, importVueComponentFromPath as R } from "../utils/index.mjs";
+import { debounce as S, getInstanceState as m } from "../utils/helpers.mjs";
+function g(e) {
+  if (import.meta.server || !e) return;
+  const o = S(() => {
+    const n = m(e);
+    window.__nooku__.emit("instance-data-update", n);
+  }, 500);
+  window.__nooku__ = {
+    ...window.__nooku__ || {},
+    getInstanceData: () => m(e)
+  };
+  let t;
+  return e.asyncDep && typeof e.asyncDep.then == "function" ? e.asyncDep.then((n) => {
+    t = u([() => n, () => e.devtoolsRawSetupState], o, {
+      deep: !0,
+      immediate: !0
+    });
+  }) : t = u(() => e.devtoolsRawSetupState, o, {
+    deep: !0,
+    immediate: !0
+  }), () => t?.();
+}
+export function useVueComponent(e, o) {
+  const t = a(), n = a(), r = a(!1);
+  async function s() {
+    r.value = !0;
+    const [i, d] = await C(() => R(e.value, _(o)), 5e3);
+    if (d) {
+      n.value = d, t.value = null, r.value = !1;
       return;
     }
-    if (!u) {
-      t.value = new Error(`Failed to load component from path: ${r}`), o.value = null, e.value = !1;
+    if (!i) {
+      n.value = new Error(`Failed to load component from path: ${e}`), t.value = null, r.value = !1;
       return;
     }
-    t.value = null, o.value = u, e.value = !1;
+    n.value = null, t.value = w({
+      name: "NookuEditorPreview",
+      setup(c, { attrs: v, slots: y }) {
+        const f = a(null);
+        let p;
+        return u(f, (l) => {
+          p?.(), l && (p = g(l.$ || l));
+        }), () => h(i, { ref: f, ...v, ...c }, y);
+      }
+    }), r.value = !1;
   }
-  return m([() => r.value, l], f, { immediate: !0 }), {
-    component: o,
-    error: t,
-    isLoading: e
+  return u([() => e.value, o], s, { immediate: !0 }), {
+    component: t,
+    error: n,
+    isLoading: r
   };
 }

package/dist/runtime/utils/client.d.ts

@@ -2,4 +2,6 @@ import type { App } from 'vue';
 /**
  * Initialize the communication between the editor and the iframe
  */
-export declare function initializeClient(app: App): any;
+export declare function initializeClient(app: App, { navigateTo: customNavigateTo }?: {
+    navigateTo?: (url: string) => void;
+}): any;

package/dist/runtime/utils/client.js

@@ -4,58 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.initializeClient = initializeClient;
-var _vue = require("vue");
-var _helpers = require("./helpers");
 var _iframe = require("@nookuio/iframe/iframe");
-var _useQuery = require("../composables/useQuery");
-const d = new Map();
-function initializeClient(t) {
-  const i = (0, _useQuery.getQuery)(),
-    o = (0, _vue.computed)(() => i.path || ""),
-    r = (0, _iframe.createVueIframeClient)({
-      getInstanceData(e) {
-        const n = d.get(e);
-        return n ? (0, _helpers.getInstanceState)(n) : {};
-      },
-      navigateTo(e) {
-        e && e && I(e);
-      },
-      updateCode(e, n) {}
-    }, {
-      disableDefaultConsole: !1
-    });
-  return t.config.errorHandler = e => {
-    r.emit("console", "error", [e?.stack]);
-  }, t.mixin({
-    created() {
-      const e = this.$options.__file?.replace(/\\/g, "/") || "";
-      if (!e || e.includes("node_modules")) return;
-      const n = (0, _vue.computed)(() => o.value === e),
-        s = this.$;
-      d.set(e, s);
-      let a;
-      async function f() {
-        const c = (0, _helpers.getInstanceState)(s);
-        r?.emit("instance-data-update", c);
-      }
-      const m = (0, _helpers.debounce)(() => f(), 500);
-      (0, _vue.watch)(n, c => {
-        c ? a = (0, _vue.watch)(() => s.devtoolsRawSetupState, m, {
-          deep: !0,
-          immediate: !0
-        }) : a && (a?.(), a = void 0);
-      }, {
-        immediate: !0
-      });
+function initializeClient(i, {
+  navigateTo: n
+} = {}) {
+  const t = (0, _iframe.createVueIframeClient)({
+    getInstanceData() {
+      return window?.__nooku__?.getInstanceData() || {};
     },
-    beforeUnmount() {
-      const e = this.$options.__file?.replace(/\\/g, "/") || "";
-      !e || e.includes("node_modules") || o.value !== e && d.delete(e);
-    }
-  }), r;
+    navigateTo(e) {
+      e && (n && typeof n == "function" ? n(e) : r(e));
+    },
+    updateCode() {}
+  }, {
+    disableDefaultConsole: !1
+  });
+  return i.config.errorHandler = e => {
+    t.emit("console", "error", [e?.stack]);
+  }, window.__nooku__ = {
+    ...(window.__nooku__ || {}),
+    emit: (e, ...a) => t.emit(e, ...a)
+  }, t;
 }
-function I(t, i = {}) {
-  return new Promise(o => {
-    i.replace ? history.replaceState({}, "", t) : history.pushState({}, "", t), window.dispatchEvent(new Event("popstate")), o();
+function r(i, n = {}) {
+  return new Promise(t => {
+    n.replace ? history.replaceState({}, "", i) : history.pushState({}, "", i), window.dispatchEvent(new Event("popstate")), t();
   });
 }

package/dist/runtime/utils/client.mjs

@@ -1,56 +1,29 @@
-import { computed as u, watch as l } from "vue";
-import { debounce as h, getInstanceState as p } from "./helpers.mjs";
-import { createVueIframeClient as g } from "@nookuio/iframe/iframe";
-import { getQuery as v } from "../composables/useQuery.mjs";
-const d = /* @__PURE__ */ new Map();
-export function initializeClient(t) {
-  const i = v(), o = u(() => i.path || ""), r = g(
+import { createVueIframeClient as o } from "@nookuio/iframe/iframe";
+export function initializeClient(i, {
+  navigateTo: n
+} = {}) {
+  const t = o(
     {
-      getInstanceData(e) {
-        const n = d.get(e);
-        return n ? p(n) : {};
+      getInstanceData() {
+        return window?.__nooku__?.getInstanceData() || {};
       },
       navigateTo(e) {
-        e && e && I(e);
+        e && (n && typeof n == "function" ? n(e) : r(e));
       },
-      updateCode(e, n) {
+      updateCode() {
       }
     },
     { disableDefaultConsole: !1 }
   );
-  return t.config.errorHandler = (e) => {
-    r.emit("console", "error", [e?.stack]);
-  }, t.mixin({
-    created() {
-      const e = this.$options.__file?.replace(/\\/g, "/") || "";
-      if (!e || e.includes("node_modules")) return;
-      const n = u(() => o.value === e), s = this.$;
-      d.set(e, s);
-      let a;
-      async function f() {
-        const c = p(s);
-        r?.emit("instance-data-update", c);
-      }
-      const m = h(() => f(), 500);
-      l(
-        n,
-        (c) => {
-          c ? a = l(() => s.devtoolsRawSetupState, m, {
-            deep: !0,
-            immediate: !0
-          }) : a && (a?.(), a = void 0);
-        },
-        { immediate: !0 }
-      );
-    },
-    beforeUnmount() {
-      const e = this.$options.__file?.replace(/\\/g, "/") || "";
-      !e || e.includes("node_modules") || o.value !== e && d.delete(e);
-    }
-  }), r;
+  return i.config.errorHandler = (e) => {
+    t.emit("console", "error", [e?.stack]);
+  }, window.__nooku__ = {
+    ...window.__nooku__ || {},
+    emit: (e, ...a) => t.emit(e, ...a)
+  }, t;
 }
-function I(t, i = {}) {
-  return new Promise((o) => {
-    i.replace ? history.replaceState({}, "", t) : history.pushState({}, "", t), window.dispatchEvent(new Event("popstate")), o();
+function r(i, n = {}) {
+  return new Promise((t) => {
+    n.replace ? history.replaceState({}, "", i) : history.pushState({}, "", i), window.dispatchEvent(new Event("popstate")), t();
   });
 }

package/dist/runtime/utils/helpers.d.ts

@@ -1,4 +1,4 @@
 import type { ComponentInternalInstance } from 'vue';
 export declare function isInsideEditor(): boolean;
 export declare function debounce(cb: Function, delay?: number): (...args: any[]) => void;
-export declare function getInstanceState(instance: ComponentInternalInstance | undefined, onTemplate?: boolean): Record<string, any>;
+export declare function getInstanceState(instance: ComponentInternalInstance | undefined, unwrapRefs?: boolean): Record<string, any>;

package/dist/runtime/utils/helpers.js

@@ -7,7 +7,7 @@ exports.debounce = debounce;
 exports.getInstanceState = getInstanceState;
 exports.isInsideEditor = isInsideEditor;
 function isInsideEditor() {
-  return !import.meta.client || window === void 0 ? !1 : !!(window.parent && window.location !== window.parent.location || window.top !== window.self);
+  return import.meta.server || window === void 0 ? !1 : !!(window.parent && window.location !== window.parent.location || window.top !== window.self);
 }
 function debounce(e, t = 500) {
   let n;
@@ -29,9 +29,9 @@ function s(e, t) {
 function getInstanceState(e, t) {
   if (!e) return {};
   const n = {};
-  return Object.entries(e.props).forEach(([o, r]) => {
+  return Object.entries(e.props || {}).forEach(([o, r]) => {
     n[o] = r;
-  }), Object.entries(e.devtoolsRawSetupState ?? e.setupState).forEach(([o, r]) => {
+  }), Object.entries(e.devtoolsRawSetupState ?? e.setupState ?? {}).forEach(([o, r]) => {
     const a = s(r, t);
     n[o] = a;
   }), n;

package/dist/runtime/utils/helpers.mjs

@@ -1,5 +1,5 @@
 export function isInsideEditor() {
-  return !import.meta.client || window === void 0 ? !1 : !!(window.parent && window.location !== window.parent.location || window.top !== window.self);
+  return import.meta.server || window === void 0 ? !1 : !!(window.parent && window.location !== window.parent.location || window.top !== window.self);
 }
 export function debounce(e, t = 500) {
   let n;
@@ -21,9 +21,9 @@ function s(e, t) {
 export function getInstanceState(e, t) {
   if (!e) return {};
   const n = {};
-  return Object.entries(e.props).forEach(([o, r]) => {
+  return Object.entries(e.props || {}).forEach(([o, r]) => {
     n[o] = r;
-  }), Object.entries(e.devtoolsRawSetupState ?? e.setupState).forEach(([o, r]) => {
+  }), Object.entries(e.devtoolsRawSetupState ?? e.setupState ?? {}).forEach(([o, r]) => {
     const a = s(r, t);
     n[o] = a;
   }), n;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nookuio/vue",
   "description": "",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {