@nookuio/vue 1.0.8 → 1.1.0

package/dist/runtime/composables/useComponent.d.ts

@@ -1,4 +1,5 @@
 import type { Component, Ref, MaybeRefOrGetter } from 'vue';
+export declare function attachStateInspectorToInstance(instance: any): (() => void | undefined) | undefined;
 export declare function useVueComponent(path: Ref<string>, name?: MaybeRefOrGetter<string>): {
     component: import("vue").ShallowRef<Component | null | undefined, Component | null | undefined>;
     error: import("vue").ShallowRef<Error | null | undefined, Error | null | undefined>;

package/dist/runtime/composables/useComponent.js

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.attachStateInspectorToInstance = attachStateInspectorToInstance;
 exports.useVueComponent = useVueComponent;
 var _vue = require("vue");
 var _utils = require("../utils");
 var _helpers = require("../utils/helpers");
-function g(e) {
+function attachStateInspectorToInstance(e) {
   if (import.meta.server || !e) return;
-  const o = (0, _helpers.debounce)(() => {
+  const r = (0, _helpers.debounce)(() => {
     const n = (0, _helpers.getInstanceState)(e);
     window.__nooku__.emit("instance-data-update", n);
   }, 500);
@@ -19,28 +20,31 @@ function g(e) {
   };
   let t;
   return e.asyncDep && typeof e.asyncDep.then == "function" ? e.asyncDep.then(n => {
-    t = (0, _vue.watch)([() => n, () => e.devtoolsRawSetupState], o, {
+    t = (0, _vue.watch)([() => n, () => e.devtoolsRawSetupState], r, {
       deep: !0,
       immediate: !0
     });
-  }) : t = (0, _vue.watch)(() => e.devtoolsRawSetupState, o, {
+  }) : t = (0, _vue.watch)(() => e.devtoolsRawSetupState, r, {
     deep: !0,
     immediate: !0
   }), () => t?.();
 }
-function useVueComponent(e, o) {
+function useVueComponent(e, r) {
   const t = (0, _vue.shallowRef)(),
     n = (0, _vue.shallowRef)(),
-    r = (0, _vue.shallowRef)(!1);
+    o = (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;
+    if (o.value = !0, !e) {
+      n.value = new Error("Invalid component path"), t.value = null, o.value = !1;
+      return;
+    }
+    const [i, f] = await (0, _utils.trySafe)(() => (0, _utils.importVueComponentFromPath)(e.value, (0, _vue.toValue)(r)), 5e3);
+    if (f) {
+      n.value = f, t.value = null, o.value = !1;
       return;
     }
     if (!i) {
-      n.value = new Error(`Failed to load component from path: ${e}`), t.value = null, r.value = !1;
+      n.value = new Error(`Failed to load component from path: ${e}`), t.value = null, o.value = !1;
       return;
     }
     n.value = null, t.value = (0, _vue.defineComponent)({
@@ -49,23 +53,23 @@ function useVueComponent(e, o) {
         attrs: v,
         slots: y
       }) {
-        const f = (0, _vue.shallowRef)(null);
+        const d = (0, _vue.shallowRef)(null);
         let p;
-        return (0, _vue.watch)(f, l => {
-          p?.(), l && (p = g(l.$ || l));
+        return (0, _vue.watch)(d, l => {
+          p?.(), l && (p = attachStateInspectorToInstance(l.$ || l));
         }), () => (0, _vue.h)(i, {
-          ref: f,
+          ref: d,
           ...v,
           ...c
         }, y);
       }
-    }), r.value = !1;
+    }), o.value = !1;
   }
-  return (0, _vue.watch)([() => e.value, o], s, {
+  return (0, _vue.watch)([() => e.value, r], s, {
     immediate: !0
   }), {
     component: t,
     error: n,
-    isLoading: r
+    isLoading: o
   };
 }

package/dist/runtime/composables/useComponent.mjs

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

package/dist/utils.d.ts

@@ -1,2 +1,2 @@
 export { isInsideEditor, importVueComponentFromPath, initializeClient } from './runtime/utils';
-export { useVueComponent } from './runtime/composables/useComponent';
+export { useVueComponent, attachStateInspectorToInstance } from './runtime/composables/useComponent';

package/dist/utils.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "attachStateInspectorToInstance", {
+  enumerable: true,
+  get: function () {
+    return _useComponent.attachStateInspectorToInstance;
+  }
+});
 Object.defineProperty(exports, "importVueComponentFromPath", {
   enumerable: true,
   get: function () {

package/dist/utils.mjs

@@ -1,2 +1,2 @@
 export { isInsideEditor, importVueComponentFromPath, initializeClient } from "./runtime/utils/index.mjs";
-export { useVueComponent } from "./runtime/composables/useComponent.mjs";
+export { useVueComponent, attachStateInspectorToInstance } from "./runtime/composables/useComponent.mjs";

package/package.json

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