@nookuio/vue 1.0.1 → 1.0.3

package/README.md

@@ -1,57 +1,73 @@
-# nooku Nuxt Module
+# @nookuio/vue
 
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
+Lightweight Vue plugin + Vite plugin to connect your Vue 3 application to the Nooku editor.
 
-[Nuxt](https://nuxt.com/) module for [nooku](https://nooku.io) ⚡️
+This package provides:
+- A Vue 3 plugin that wires up the client-side runtime pieces used by Nooku.
+- A Vite plugin to enable the inspector integration during local development.
 
-This Nuxt module enables connection and interaction between your nuxt app and nooku.
+Prerequisites
+- Vue 3 project (Vue 3.x)
 
--   [ Learn more about nooku](https://nooku.io)
+---
 
-## Quick Setup
-
-1. Install: Add `@nooku/nuxt` to your project
+## 1) Install
 
+Using npm:
 ```bash
-# Using npm
-npm install -D @nooku/nuxt
+npm install -D @nookuio/vue
+```
 
-# Using pnpm
-pnpm add -D @nooku/nuxt
+Using pnpm:
+```bash
+pnpm add -D @nookuio/vue
 ```
 
-2. Configure: Add `@nooku/nuxt` to your Nuxt Integrations array `nuxt.config.{js,ts}`
-
-```js
-//nuxt.config.js (or) nuxt.config.ts
-
-export default defineNuxtConfig({
-	modules: [
-		'@nooku/nuxt',
-		//...
-	],
-	nooku: {
-		enabled: true // default true
-	},
-	//...
-})
+---
+
+## 2) Register the Vue plugin (runtime)
+
+The package's default export is a Vue plugin. Register the plugin with `app.use(...)` in your app's entry file (e.g. `main.js` / `main.ts`).
+
+Example main.ts:
+
+```main.ts
+import './assets/main.css';
+
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import nookuPlugin from '@nookuio/vue';
+
+const app = createApp(App);
+
+app.use(router);
+if (import.meta.env.DEV) app.use(nookuPlugin);
+app.mount('#app');
 ```
 
-Now, open your Nuxt project in nooku. ✨
+---
+
+## 3) Add the Vite plugin
 
-## License
+This package also exposes a Vite plugin (exported from `@nookuio/vue/vite-plugin`). Add it to your `vite.config.ts` file.
 
-[MIT License](./LICENSE)
+Example `vite.config.ts`:
 
-Copyright (c) nooku
+```vite.config.ts
+import { fileURLToPath, URL } from 'node:url';
 
-<!-- Badges -->
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { nookuViteInspectorPlugin } from '@nookuio/vue/vite-plugin';
 
-[npm-version-src]: https://img.shields.io/npm/v/@nooku/nuxt/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/@nooku/nuxt
-[npm-downloads-src]: https://img.shields.io/npm/dm/@nooku/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/@nooku/nuxt
-[license-src]: https://img.shields.io/npm/l/@nooku/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://npmjs.com/package/@nooku/nuxt
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), nookuViteInspectorPlugin(),],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+});
+```

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,40 +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(n, i, e) {
-  const o = typeof n == "string" ? document.querySelector(n) : n;
+function a(t, r, n) {
+  const o = typeof t == "string" ? document.querySelector(t) : t;
   if (!o) {
-    const u = typeof n == "string" ? `Failed to mount app: mount target selector "${n}" returned null.` : "Failed to mount app to the target element";
+    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 t = (0, _vue.createVNode)(i, e || {});
-  return (0, _vue.render)(t, o), t.component;
+  const i = (0, _vue.createVNode)(r, n || {});
+  return (0, _vue.render)(i, o), i.component;
 }
-const y = {
-  install(n, i) {
-    window === void 0 || !(0, _helpers.isInsideNookuEditor)() || window.location.pathname === _iframe.EDITOR_PAGE_PATH && (n.mount = function (e) {
-      n._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)(_Renderer.default),
+            default: () => (0, _vue.h)(_ComponentPreview.default),
             fallback: () => (0, _vue.h)("div", "Loading...")
           });
         }
       };
-      const o = (0, _useQuery.getQuery)(),
-        t = o.injectTailwind === "true" && (o.tailwindVersion === "3" || o.tailwindVersion === "4") ? Number(o.tailwindVersion) : void 0;
-      return (0, _tailwind.injectTailwind)(t), (0, _utils.initializeClient)(n), w(e, n._component)?.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,38 +1,37 @@
-import { createVNode as d, h as r, render as m, 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 c } from "./runtime/utils/tailwind.mjs";
-import { getQuery as f } from "./runtime/composables/useQuery.mjs";
-import { EDITOR_PAGE_PATH as g } from "@nookuio/iframe";
-function w(n, i, e) {
-  const o = typeof n == "string" ? document.querySelector(n) : n;
+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 n == "string" ? `Failed to mount app: mount target selector "${n}" returned null.` : "Failed to mount app to the target element";
+    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 t = d(i, e || {});
-  return m(t, o), t.component;
+  const i = p(r, n || {});
+  return d(i, o), i.component;
 }
-const y = {
-  install(n, i) {
-    window === void 0 || !p() || window.location.pathname === g && (n.mount = function(e) {
-      n._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 r(
-            s,
+          return e(
+            f,
             {},
             {
-              default: () => r(l),
-              fallback: () => r("div", "Loading...")
+              default: () => e(m),
+              fallback: () => e("div", "Loading...")
             }
           );
         }
       };
-      const o = f(), t = o.injectTailwind === "true" && (o.tailwindVersion === "3" || o.tailwindVersion === "4") ? Number(o.tailwindVersion) : void 0;
-      return c(t), a(n), w(e, n._component)?.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,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.debounce = debounce;
 exports.getInstanceState = getInstanceState;
-exports.isInsideNookuEditor = isInsideNookuEditor;
-function isInsideNookuEditor() {
+exports.isInsideEditor = isInsideEditor;
+function isInsideEditor() {
   return window === void 0 ? !1 : !!(window.parent && window.location !== window.parent.location || window.top !== window.self);
 }
 function debounce(n, t = 500) {
@@ -18,12 +18,12 @@ function debounce(n, t = 500) {
   };
 }
 const i = "__v_isRef",
-  a = "__v_isReadonly";
+  u = "__v_isReadonly";
 function s(n, t) {
   return n?.[i] ? t ? n.value : {
     value: n.value,
     [i]: "true",
-    [a]: !!n.__v_isReadonly
+    [u]: !!n.__v_isReadonly
   } : n;
 }
 function getInstanceState(n, t) {
@@ -32,7 +32,7 @@ function getInstanceState(n, t) {
   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;
+    const a = s(r, t);
+    e[o] = a;
   }), e;
 }

package/dist/runtime/utils/helpers.mjs

@@ -1,4 +1,4 @@
-export function isInsideNookuEditor() {
+export function isInsideEditor() {
   return window === void 0 ? !1 : !!(window.parent && window.location !== window.parent.location || window.top !== window.self);
 }
 export function debounce(n, t = 500) {
@@ -9,13 +9,13 @@ export function debounce(n, t = 500) {
     }, t);
   };
 }
-const i = "__v_isRef", a = "__v_isReadonly";
+const i = "__v_isRef", u = "__v_isReadonly";
 function s(n, t) {
   return n?.[i] ? t ? n.value : {
     value: n.value,
     [i]: "true",
     // as string
-    [a]: !!n.__v_isReadonly
+    [u]: !!n.__v_isReadonly
   } : n;
 }
 export function getInstanceState(n, t) {
@@ -24,7 +24,7 @@ export function getInstanceState(n, t) {
   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;
+    const a = s(r, t);
+    e[o] = a;
   }), e;
 }

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.1",
+  "version": "1.0.3",
   "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": [
@@ -21,7 +26,7 @@
   ],
   "dependencies": {
     "@nookuio/iframe": "latest",
-    "@nookuio/inspector-plugin": "latest"
+    "@nookuio/inspector-plugin": "1.0.3"
   },
   "devDependencies": {
     "changelogen": "^0.6.2",

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);
-}