@nookuio/vue 1.0.2 → 1.0.4

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 import { type Plugin } from 'vue';
+import ComponentPreview from './runtime/components/ComponentPreview.vue';
+export { ComponentPreview };
 declare const plugin: Plugin;
 export default plugin;

package/dist/index.js

@@ -3,42 +3,43 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ComponentPreview", {
+  enumerable: true,
+  get: function () {
+    return _ComponentPreview.default;
+  }
+});
 
 var _vue = require("vue");
-var _Renderer = _interopRequireDefault(require("./runtime/components/Renderer.vue"));
+var _ComponentPreview = _interopRequireDefault(require("./runtime/components/ComponentPreview.vue"));
 var _helpers = require("./runtime/utils/helpers");
 var _utils = require("./runtime/utils");
-var _tailwind = require("./runtime/utils/tailwind");
-var _useQuery = require("./runtime/composables/useQuery");
 var _iframe = require("@nookuio/iframe");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function w(t, u, e) {
-  const n = typeof t == "string" ? document.querySelector(t) : t;
-  if (!n) {
-    const r = typeof t == "string" ? `Failed to mount app: mount target selector "${t}" returned null.` : "Failed to mount app to the target element";
-    console.warn(r);
+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);
     return;
   }
-  const o = (0, _vue.createVNode)(u, e || {});
-  return (0, _vue.render)(o, n), o.component;
+  const i = (0, _vue.createVNode)(r, n || {});
+  return (0, _vue.render)(i, o), i.component;
 }
-const y = {
-  install(t, u) {
-    process.env.DEV && (window === void 0 || !(0, _helpers.isInsideNookuEditor)() || window.location.pathname === _iframe.EDITOR_PAGE_PATH && (t.mount = function (e) {
+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)(_Renderer.default),
+            default: () => (0, _vue.h)(_ComponentPreview.default),
             fallback: () => (0, _vue.h)("div", "Loading...")
           });
         }
       };
-      const n = (0, _useQuery.getQuery)(),
-        o = n.injectTailwind === "true" && (n.tailwindVersion === "3" || n.tailwindVersion === "4") ? Number(n.tailwindVersion) : void 0;
-      (0, _tailwind.injectTailwind)(o);
-      const r = w(e, t._component);
-      return (0, _utils.initializeClient)(t), r?.proxy;
+      const o = a(n, t._component);
+      return (0, _utils.initializeClient)(t), o?.proxy;
     }));
   }
 };
-module.exports = y;
+module.exports = g;

package/dist/index.mjs

@@ -1,40 +1,37 @@
-import { createVNode as m, h as i, render as d, Suspense as s } from "vue";
-import l from "./runtime/components/Renderer.vue";
-import { isInsideNookuEditor as p } from "./runtime/utils/helpers.mjs";
-import { initializeClient as a } from "./runtime/utils/index.mjs";
-import { injectTailwind as f } from "./runtime/utils/tailwind.mjs";
-import { getQuery as c } from "./runtime/composables/useQuery.mjs";
-import { EDITOR_PAGE_PATH as g } from "@nookuio/iframe";
-function w(t, u, e) {
-  const n = typeof t == "string" ? document.querySelector(t) : t;
-  if (!n) {
-    const r = typeof t == "string" ? `Failed to mount app: mount target selector "${t}" returned null.` : "Failed to mount app to the target element";
-    console.warn(r);
+import { createVNode as p, h as e, render as d, Suspense as f } from "vue";
+import m 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);
     return;
   }
-  const o = m(u, e || {});
-  return d(o, n), o.component;
+  const i = p(r, n || {});
+  return d(i, o), i.component;
 }
-const y = {
-  install(t, u) {
-    import.meta.env.DEV && (window === void 0 || !p() || window.location.pathname === g && (t.mount = function(e) {
+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 i(
-            s,
+          return e(
+            f,
             {},
             {
-              default: () => i(l),
-              fallback: () => i("div", "Loading...")
+              default: () => e(m),
+              fallback: () => e("div", "Loading...")
             }
           );
         }
       };
-      const n = c(), o = n.injectTailwind === "true" && (n.tailwindVersion === "3" || n.tailwindVersion === "4") ? Number(n.tailwindVersion) : void 0;
-      f(o);
-      const r = w(e, t._component);
-      return a(t), r?.proxy;
+      const o = a(n, t._component);
+      return s(t), o?.proxy;
     }));
   }
 };
-export default y;
+export default g;

package/dist/runtime/components/ComponentPreview.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { computed } from "vue";
+import { useQuery } from "../composables/useQuery";
+import { useVueComponent } from "../composables/useComponent";
+import ErrorComponent from "./Error.vue";
+const { query } = useQuery(), props = defineProps({
+  path: { type: String, required: !1 },
+  name: { type: String, required: !1 },
+  props: { type: String, required: !1 }
+}), componentPath = computed(() => props.path || query.value.path || ""), {
+  component: componentToRender,
+  error,
+  isLoading
+} = useVueComponent(componentPath, () => props.name || query.value.name), componentProps = computed(() => {
+  if (!props.props && !query.value.props) return {};
+  try {
+    return new Function(`return ${props.props || query.value.props}`)();
+  } catch {
+    return {};
+  }
+});
+</script>
+
+<template>
+  <ErrorComponent
+    v-if="(error || !componentToRender) && !isLoading"
+    :error="error"
+  />
+  <component
+    v-else-if="componentToRender"
+    :is="componentToRender"
+    v-bind="componentProps"
+  />
+</template>
+
+<style>
+body {
+  margin: 0 !important;
+}
+</style>

package/dist/runtime/components/Error.vue

@@ -0,0 +1,148 @@
+<script setup>
+const props = defineProps({
+  error: { type: null, required: !0 }
+});
+</script>
+
+<template>
+  <div class="error-page">
+    <div class="error-card">
+      <div
+        class="error-icon"
+        aria-hidden="true"
+      >
+        !
+      </div>
+
+      <h1 class="error-title">
+        <span v-if="props.error?.message">Something went wrong</span>
+        <span v-else>Component not found</span>
+      </h1>
+
+      <p class="error-message">
+        <span v-if="props.error?.message">
+          {{ props.error.message }}
+        </span>
+        <span v-else> The requested component could not be found. </span>
+      </p>
+
+      <div
+        v-if="props.error?.stack"
+        class="error-details"
+      >
+        <span class="error-details-label">Details</span>
+        <pre class="error-details-text"
+          >{{ props.error.stack }}
+        </pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.error-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5rem;
+  position: fixed;
+  inset: 0;
+  height: 100vh;
+  background-color: #050608;
+  color: #f9fafb;
+  box-sizing: border-box;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+}
+
+.error-card {
+  width: 100%;
+  max-width: 32rem;
+  padding: 1.75rem 1.75rem 1.5rem;
+  background-color: #0b0d10;
+  border-radius: 0.9rem;
+  border: 1px solid #1f2933;
+  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
+}
+
+.error-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 999px;
+  border: 1px solid #4b5563;
+  color: #f97373;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  margin-bottom: 1.25rem;
+  font-size: 1.1rem;
+  background-color: #111827;
+}
+
+.error-title {
+  font-size: 1.5rem;
+  line-height: 1.3;
+  margin: 0;
+  color: #f9fafb;
+  letter-spacing: 0.02em;
+}
+
+.error-message {
+  margin-top: 0.75rem;
+  margin-bottom: 0;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: #9ca3af;
+}
+
+.error-details {
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  border-top: 1px solid #111827;
+}
+
+.error-details-label {
+  display: block;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: #6b7280;
+  margin-bottom: 0.5rem;
+}
+
+.error-details-text {
+  margin: 0;
+  padding: 0.75rem 0.85rem;
+  background-color: #050608;
+  border-radius: 0.5rem;
+  font-size: 0.78rem;
+  color: #d1d5db;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+  .error-card {
+    padding: 1.5rem 1.25rem 1.25rem;
+  }
+
+  .error-title {
+    font-size: 1.25rem;
+  }
+
+  .error-message {
+    font-size: 0.9rem;
+  }
+
+  .error-details-text {
+    font-size: 0.75rem;
+  }
+}
+</style>

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

@@ -0,0 +1,6 @@
+import type { Component, Ref, MaybeRefOrGetter } from 'vue';
+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>;
+    isLoading: import("vue").ShallowRef<boolean, boolean>;
+};

package/dist/runtime/composables/useComponent.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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;
+      return;
+    }
+    if (!u) {
+      t.value = new Error(`Failed to load component from path: ${r}`), o.value = null, e.value = !1;
+      return;
+    }
+    t.value = null, o.value = u, e.value = !1;
+  }
+  return (0, _vue.watch)([() => r.value, l], f, {
+    immediate: !0
+  }), {
+    component: o,
+    error: t,
+    isLoading: e
+  };
+}

package/dist/runtime/composables/useComponent.mjs

@@ -0,0 +1,23 @@
+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;
+      return;
+    }
+    if (!u) {
+      t.value = new Error(`Failed to load component from path: ${r}`), o.value = null, e.value = !1;
+      return;
+    }
+    t.value = null, o.value = u, e.value = !1;
+  }
+  return m([() => r.value, l], f, { immediate: !0 }), {
+    component: o,
+    error: t,
+    isLoading: e
+  };
+}

package/dist/runtime/composables/useQuery.js

@@ -7,16 +7,20 @@ exports.getQuery = getQuery;
 exports.useQuery = useQuery;
 var _vue = require("vue");
 function getQuery() {
-  const n = new URLSearchParams(window.location.search),
-    e = {};
-  return n.forEach((o, t) => e[t] = o), e;
+  try {
+    const t = new URLSearchParams(window.location.search),
+      e = {};
+    return t.forEach((n, r) => e[r] = n), e;
+  } catch {
+    return {};
+  }
 }
 function useQuery() {
-  const n = (0, _vue.ref)(getQuery()),
+  const t = (0, _vue.ref)(getQuery()),
     e = () => {
-      n.value = getQuery();
+      t.value = getQuery();
     };
   return (0, _vue.onMounted)(() => window.addEventListener("popstate", e)), (0, _vue.onBeforeUnmount)(() => window.removeEventListener("popstate", e)), {
-    query: n
+    query: t
   };
 }

package/dist/runtime/composables/useQuery.mjs

@@ -1,11 +1,15 @@
-import { ref as r, onMounted as s, onBeforeUnmount as a } from "vue";
+import { ref as o, onMounted as a, onBeforeUnmount as s } from "vue";
 export function getQuery() {
-  const n = new URLSearchParams(window.location.search), e = {};
-  return n.forEach((o, t) => e[t] = o), e;
+  try {
+    const t = new URLSearchParams(window.location.search), e = {};
+    return t.forEach((n, r) => e[r] = n), e;
+  } catch {
+    return {};
+  }
 }
 export function useQuery() {
-  const n = r(getQuery()), e = () => {
-    n.value = getQuery();
+  const t = o(getQuery()), e = () => {
+    t.value = getQuery();
   };
-  return s(() => window.addEventListener("popstate", e)), a(() => window.removeEventListener("popstate", e)), { query: n };
+  return a(() => window.addEventListener("popstate", e)), s(() => window.removeEventListener("popstate", e)), { query: t };
 }

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

@@ -0,0 +1,5 @@
+import type { App } from 'vue';
+/**
+ * Initialize the communication between the editor and the iframe
+ */
+export declare function initializeClient(app: App): any;

package/dist/runtime/utils/client.js

@@ -0,0 +1,61 @@
+"use strict";
+
+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
+      });
+    },
+    beforeUnmount() {
+      const e = this.$options.__file?.replace(/\\/g, "/") || "";
+      !e || e.includes("node_modules") || o.value !== e && d.delete(e);
+    }
+  }), r;
+}
+function I(t, i = {}) {
+  return new Promise(o => {
+    i.replace ? history.replaceState({}, "", t) : history.pushState({}, "", t), window.dispatchEvent(new Event("popstate")), o();
+  });
+}

package/dist/runtime/utils/client.mjs

@@ -0,0 +1,56 @@
+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(
+    {
+      getInstanceData(e) {
+        const n = d.get(e);
+        return n ? p(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 = 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;
+}
+function I(t, i = {}) {
+  return new Promise((o) => {
+    i.replace ? history.replaceState({}, "", t) : history.pushState({}, "", t), window.dispatchEvent(new Event("popstate")), o();
+  });
+}

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

@@ -1,4 +1,4 @@
 import type { ComponentInternalInstance } from 'vue';
-export declare function isInsideNookuEditor(): boolean;
+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>;

package/dist/runtime/utils/helpers.js

@@ -5,34 +5,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.debounce = debounce;
 exports.getInstanceState = getInstanceState;
-exports.isInsideNookuEditor = isInsideNookuEditor;
-function isInsideNookuEditor() {
-  return window === void 0 ? !1 : !!(window.parent && window.location !== window.parent.location || window.top !== window.self);
+exports.isInsideEditor = isInsideEditor;
+function isInsideEditor() {
+  return !import.meta.client || window === void 0 ? !1 : !!(window.parent && window.location !== window.parent.location || window.top !== window.self);
 }
-function debounce(n, t = 500) {
-  let e;
+function debounce(e, t = 500) {
+  let n;
   return (...o) => {
-    clearTimeout(e), e = setTimeout(() => {
-      n(...o);
+    clearTimeout(n), n = setTimeout(() => {
+      e(...o);
     }, t);
   };
 }
 const i = "__v_isRef",
-  a = "__v_isReadonly";
-function s(n, t) {
-  return n?.[i] ? t ? n.value : {
-    value: n.value,
+  u = "__v_isReadonly";
+function s(e, t) {
+  return e?.[i] ? t ? e.value : {
+    value: e.value,
     [i]: "true",
-    [a]: !!n.__v_isReadonly
-  } : n;
+    [u]: !!e.__v_isReadonly
+  } : e;
 }
-function getInstanceState(n, t) {
-  if (!n) return {};
-  const e = {};
-  return Object.entries(n.props).forEach(([o, r]) => {
-    e[o] = r;
-  }), Object.entries(n.devtoolsRawSetupState ?? n.setupState).forEach(([o, r]) => {
-    const u = s(r, t);
-    e[o] = u;
-  }), e;
+function getInstanceState(e, t) {
+  if (!e) return {};
+  const n = {};
+  return Object.entries(e.props).forEach(([o, r]) => {
+    n[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,30 +1,30 @@
-export function isInsideNookuEditor() {
-  return window === void 0 ? !1 : !!(window.parent && window.location !== window.parent.location || window.top !== window.self);
+export function isInsideEditor() {
+  return !import.meta.client || window === void 0 ? !1 : !!(window.parent && window.location !== window.parent.location || window.top !== window.self);
 }
-export function debounce(n, t = 500) {
-  let e;
+export function debounce(e, t = 500) {
+  let n;
   return (...o) => {
-    clearTimeout(e), e = setTimeout(() => {
-      n(...o);
+    clearTimeout(n), n = setTimeout(() => {
+      e(...o);
     }, t);
   };
 }
-const i = "__v_isRef", a = "__v_isReadonly";
-function s(n, t) {
-  return n?.[i] ? t ? n.value : {
-    value: n.value,
+const i = "__v_isRef", u = "__v_isReadonly";
+function s(e, t) {
+  return e?.[i] ? t ? e.value : {
+    value: e.value,
     [i]: "true",
     // as string
-    [a]: !!n.__v_isReadonly
-  } : n;
+    [u]: !!e.__v_isReadonly
+  } : e;
 }
-export function getInstanceState(n, t) {
-  if (!n) return {};
-  const e = {};
-  return Object.entries(n.props).forEach(([o, r]) => {
-    e[o] = r;
-  }), Object.entries(n.devtoolsRawSetupState ?? n.setupState).forEach(([o, r]) => {
-    const u = s(r, t);
-    e[o] = u;
-  }), e;
+export function getInstanceState(e, t) {
+  if (!e) return {};
+  const n = {};
+  return Object.entries(e.props).forEach(([o, r]) => {
+    n[o] = r;
+  }), Object.entries(e.devtoolsRawSetupState ?? e.setupState).forEach(([o, r]) => {
+    const a = s(r, t);
+    n[o] = a;
+  }), n;
 }

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

@@ -1,5 +1,4 @@
-import type { App } from 'vue';
-/**
- * Initialize the communication between the editor and the iframe
- */
-export declare function initializeClient(app: App): any;
+export { initializeClient } from './client';
+export { trySafe } from './tryCatch';
+export { importVueComponentFromPath } from './vue';
+export { isInsideEditor } from './helpers';

package/dist/runtime/utils/index.js

@@ -3,59 +3,31 @@
 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
-      });
-    },
-    beforeUnmount() {
-      const e = this.$options.__file?.replace(/\\/g, "/") || "";
-      !e || e.includes("node_modules") || o.value !== e && d.delete(e);
-    }
-  }), r;
-}
-function I(t, i = {}) {
-  return new Promise(o => {
-    i.replace ? history.replaceState({}, "", t) : history.pushState({}, "", t), window.dispatchEvent(new Event("popstate")), o();
-  });
-}
+Object.defineProperty(exports, "importVueComponentFromPath", {
+  enumerable: true,
+  get: function () {
+    return _vue.importVueComponentFromPath;
+  }
+});
+Object.defineProperty(exports, "initializeClient", {
+  enumerable: true,
+  get: function () {
+    return _client.initializeClient;
+  }
+});
+Object.defineProperty(exports, "isInsideEditor", {
+  enumerable: true,
+  get: function () {
+    return _helpers.isInsideEditor;
+  }
+});
+Object.defineProperty(exports, "trySafe", {
+  enumerable: true,
+  get: function () {
+    return _tryCatch.trySafe;
+  }
+});
+var _client = require("./client");
+var _tryCatch = require("./tryCatch");
+var _vue = require("./vue");
+var _helpers = require("./helpers");

package/dist/runtime/utils/index.mjs

@@ -1,56 +1,4 @@
-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(
-    {
-      getInstanceData(e) {
-        const n = d.get(e);
-        return n ? p(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 = 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;
-}
-function I(t, i = {}) {
-  return new Promise((o) => {
-    i.replace ? history.replaceState({}, "", t) : history.pushState({}, "", t), window.dispatchEvent(new Event("popstate")), o();
-  });
-}
+export { initializeClient } from "./client.mjs";
+export { trySafe } from "./tryCatch.mjs";
+export { importVueComponentFromPath } from "./vue.mjs";
+export { isInsideEditor } from "./helpers.mjs";

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

@@ -1,13 +1,18 @@
-type MaybePromise<T> = T | Promise<T>;
-type Success<T> = {
-    data: T;
-    error?: never;
-};
-type Failure<E> = {
-    data?: never;
-    error: E;
-};
-type Result<T, E = Error> = Success<T> | Failure<E>;
-export declare function tryCatch<T, E = Error>(func: (() => MaybePromise<T>) | Promise<T>, handler?: ((error: E) => void) | 'throw'): Promise<Result<T, E>>;
-export declare function tryCatchSync<T, E = Error>(func: () => T, handler?: ((error: E) => void) | 'throw'): Result<T, E>;
+type AttemptSuccess<T> = readonly [T, null];
+type AttemptFailure<E> = readonly [null, E];
+type AttemptResult<E, T> = AttemptSuccess<T> | AttemptFailure<E>;
+export declare class TimeoutError extends Error {
+    readonly timeoutMs?: number | undefined;
+    constructor(timeoutMs?: number | undefined);
+}
+/**
+ * Executes `func` and returns either `[result, null]` on success or `[null, error]` on failure.
+ * If `timeout` (in milliseconds) is provided and the operation doesn't settle within that time,
+ * the returned result will be `[null, TimeoutError]`.
+ *
+ * Notes:
+ * - The function `func` is invoked immediately. If it returns a Promise, we await it.
+ * - A timer is cleared as soon as the operation settles to avoid leaks.
+ */
+export declare function trySafe<T = any, E = Error>(func: () => T | Promise<T>, timeout?: number): Promise<AttemptResult<E, T>>;
 export {};

package/dist/runtime/utils/tryCatch.js

@@ -3,29 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tryCatch = tryCatch;
-exports.tryCatchSync = tryCatchSync;
-async function tryCatch(t, e) {
-  try {
-    return {
-      data: await (t instanceof Promise ? t : Promise.resolve().then(t))
-    };
-  } catch (r) {
-    if (e === "throw") throw r;
-    return e && e(r), {
-      error: r
-    };
+exports.TimeoutError = void 0;
+exports.trySafe = trySafe;
+class TimeoutError extends Error {
+  constructor(e) {
+    super(typeof e == "number" ? `Operation timed out after ${e} ms` : "Operation timed out");
+    this.timeoutMs = e;
+    this.name = "TimeoutError";
   }
 }
-function tryCatchSync(t, e) {
+exports.TimeoutError = TimeoutError;
+async function trySafe(n, t) {
+  let e = null;
   try {
-    return {
-      data: t()
-    };
+    const r = (async () => n())();
+    if (typeof t == "number" && t > 0) {
+      const o = new Promise((l, u) => {
+          e = setTimeout(() => {
+            u(new TimeoutError(t));
+          }, t);
+        }),
+        a = await Promise.race([r, o]);
+      return e && (clearTimeout(e), e = null), [a, null];
+    } else return [await r, null];
   } catch (r) {
-    if (e === "throw") throw r;
-    return e && e(r), {
-      error: r
-    };
+    return e && (clearTimeout(e), e = null), [null, r];
   }
 }

package/dist/runtime/utils/tryCatch.mjs

@@ -1,18 +1,24 @@
-export async function tryCatch(t, e) {
-  try {
-    return { data: await (t instanceof Promise ? t : Promise.resolve().then(t)) };
-  } catch (r) {
-    if (e === "throw")
-      throw r;
-    return e && e(r), { error: r };
+export class TimeoutError extends Error {
+  constructor(e) {
+    super(typeof e == "number" ? `Operation timed out after ${e} ms` : "Operation timed out");
+    this.timeoutMs = e;
+    this.name = "TimeoutError";
   }
 }
-export function tryCatchSync(t, e) {
+export async function trySafe(n, t) {
+  let e = null;
   try {
-    return { data: t() };
+    const r = (async () => n())();
+    if (typeof t == "number" && t > 0) {
+      const o = new Promise((l, u) => {
+        e = setTimeout(() => {
+          u(new TimeoutError(t));
+        }, t);
+      }), a = await Promise.race([r, o]);
+      return e && (clearTimeout(e), e = null), [a, null];
+    } else
+      return [await r, null];
   } catch (r) {
-    if (e === "throw")
-      throw r;
-    return e && e(r), { error: r };
+    return e && (clearTimeout(e), e = null), [null, r];
   }
 }

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

@@ -0,0 +1,2 @@
+import type { Component } from 'vue';
+export declare function importVueComponentFromPath(path: string, name?: string): Promise<Component | undefined>;

package/dist/runtime/utils/vue.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.importVueComponentFromPath = importVueComponentFromPath;
+async function importVueComponentFromPath(n, e) {
+  if (!n) return [void 0, void 0];
+  const r = window?.__buildAssetsURL;
+  try {
+    return r ? await Promise.resolve(`${r(n)}`).then(s => require(s)).then(t => e ? t?.[e] : t.default) : await Promise.resolve(`${"/@fs/" + n}`).then(s => require(s)).then(t => e ? t?.[e] : t.default);
+  } catch {
+    try {
+      return await Promise.resolve(`${n}`).then(s => require(s)).then(t => e ? t?.[e] : t.default);
+    } catch (t) {
+      throw t;
+    }
+  }
+}

package/dist/runtime/utils/vue.mjs

@@ -0,0 +1,22 @@
+export async function importVueComponentFromPath(n, e) {
+  if (!n) return [void 0, void 0];
+  const r = window?.__buildAssetsURL;
+  try {
+    return r ? await import(
+      /* @vite-ignore */
+      r(n)
+    ).then((t) => e ? t?.[e] : t.default) : await import(
+      /* @vite-ignore */
+      "/@fs/" + n
+    ).then((t) => e ? t?.[e] : t.default);
+  } catch {
+    try {
+      return await import(
+        /* @vite-ignore */
+        n
+      ).then((t) => e ? t?.[e] : t.default);
+    } catch (t) {
+      throw t;
+    }
+  }
+}

package/dist/utils.d.ts

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

package/dist/utils.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "importVueComponentFromPath", {
+  enumerable: true,
+  get: function () {
+    return _utils.importVueComponentFromPath;
+  }
+});
+Object.defineProperty(exports, "isInsideEditor", {
+  enumerable: true,
+  get: function () {
+    return _utils.isInsideEditor;
+  }
+});
+Object.defineProperty(exports, "useVueComponent", {
+  enumerable: true,
+  get: function () {
+    return _useComponent.useVueComponent;
+  }
+});
+var _utils = require("./runtime/utils");
+var _useComponent = require("./runtime/composables/useComponent");

package/dist/utils.mjs

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nookuio/vue",
   "description": "",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {
@@ -14,6 +14,11 @@
       "types": "./dist/vite-plugin.d.ts",
       "require": "./dist/vite-plugin.js",
       "import": "./dist/vite-plugin.mjs"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "require": "./dist/utils.js",
+      "import": "./dist/utils.mjs"
     }
   },
   "files": [

package/dist/runtime/components/NotFound.vue

@@ -1,48 +0,0 @@
-<template>
-    <div class="not-found">
-      <div class="content">
-        <h1>Component Not Found</h1>
-        <p>The requested component could not be found.</p>
-      </div>
-    </div>
-  </template>
-  
-  <style scoped>
-  .not-found {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-    background-color: #f9f9f9;
-    color: #333;
-  }
-  
-  .content {
-    text-align: center;
-  }
-  
-  h1 {
-    font-size: 2rem;
-    margin: 0;
-    color: #0f0f0f;
-    font-weight: bold;
-  }
-  
-  p {
-    font-size: 1.25rem;
-    margin-top: 0.5rem;
-    color: #666;
-  }
-  /* Responsive adjustments */
-  @media (max-width: 600px) {
-    h1 {
-      font-size: 1.5rem;
-    }
-  
-    p {
-      font-size: 1rem;
-    }
-  }
-  
-  </style>
-  

package/dist/runtime/components/Renderer.vue

@@ -1,56 +0,0 @@
-<script setup>
-import { computed, watch, shallowRef } from "vue";
-import { useQuery } from "../composables/useQuery";
-import ErrorComponent from "./NotFound.vue";
-const { query } = useQuery(), componentPath = computed(() => query.value.path || ""), componentToRender = shallowRef(await importVueComponent(componentPath.value)), componentProps = computed(() => {
-  if (!query.value.props) return {};
-  try {
-    return new Function(`return ${query.value.props}`)();
-  } catch {
-    return {};
-  }
-});
-async function importVueComponent(path) {
-  if (!path) return;
-  const buildAssetsURL = window?.__buildAssetsURL;
-  try {
-    return buildAssetsURL ? await import(
-      /* @vite-ignore */
-      buildAssetsURL(path)
-    ).then(
-      (c) => query.value.name ? c?.[query.value.name] : c.default
-    ) : await import(
-      /* @vite-ignore */
-      "/@fs/" + path
-    ).then(
-      (c) => query.value.name ? c?.[query.value.name] : c.default
-    );
-  } catch {
-    try {
-      return await import(
-        /* @vite-ignore */
-        path
-      ).then((c) => query.value.name ? c?.[query.value.name] : c.default);
-    } catch (err) {
-      console.log("Error importing component:", err);
-      return;
-    }
-  }
-}
-watch(componentPath, async (path) => componentToRender.value = await importVueComponent(path));
-</script>
-
-<template>
-  <component
-    v-if="componentToRender"
-    :is="componentToRender"
-    v-bind="componentProps"
-  />
-  <ErrorComponent v-else />
-</template>
-
-<style>
-body {
-  margin: 0;
-}
-</style>

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

@@ -1 +0,0 @@
-export declare function injectTailwind(tailwindVersion: 3 | 4 | undefined): void;

package/dist/runtime/utils/tailwind.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.injectTailwind = injectTailwind;
-function injectTailwind(e) {
-  const n = document.querySelector("#nooku-injected-tailwind-css");
-  if (n && e === void 0 && document.removeChild(n), n || e === void 0) return;
-  const c = e === 3 ? "https://cdn.tailwindcss.com" : "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
-    t = document.createElement("script");
-  t.id = "nooku-injected-tailwind-css", t.src = c, document.head.appendChild(t);
-}

package/dist/runtime/utils/tailwind.mjs

@@ -1,6 +0,0 @@
-export function injectTailwind(e) {
-  const n = document.querySelector("#nooku-injected-tailwind-css");
-  if (n && e === void 0 && document.removeChild(n), n || e === void 0) return;
-  const c = e === 3 ? "https://cdn.tailwindcss.com" : "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4", t = document.createElement("script");
-  t.id = "nooku-injected-tailwind-css", t.src = c, document.head.appendChild(t);
-}