@nookuio/vue 1.0.0

package/README.md

@@ -0,0 +1,57 @@
+# nooku Nuxt Module
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+
+[Nuxt](https://nuxt.com/) module for [nooku](https://nooku.io) ⚡️
+
+This Nuxt module enables connection and interaction between your nuxt app and nooku.
+
+-   [ Learn more about nooku](https://nooku.io)
+
+## Quick Setup
+
+1. Install: Add `@nooku/nuxt` to your project
+
+```bash
+# Using npm
+npm install -D @nooku/nuxt
+
+# Using pnpm
+pnpm add -D @nooku/nuxt
+```
+
+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
+	},
+	//...
+})
+```
+
+Now, open your Nuxt project in nooku. ✨
+
+## License
+
+[MIT License](./LICENSE)
+
+Copyright (c) nooku
+
+<!-- Badges -->
+
+[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

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { type Plugin } from 'vue';
+declare const plugin: Plugin;
+export default plugin;

package/dist/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _vue = require("vue");
+var _Renderer = _interopRequireDefault(require("./runtime/components/Renderer.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;
+  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";
+    console.warn(u);
+    return;
+  }
+  const t = (0, _vue.createVNode)(i, e || {});
+  return (0, _vue.render)(t, o), t.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 = {
+        render() {
+          return (0, _vue.h)(_vue.Suspense, {}, {
+            default: () => (0, _vue.h)(_Renderer.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;
+    });
+  }
+};
+module.exports = y;

package/dist/index.mjs

@@ -0,0 +1,38 @@
+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;
+  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";
+    console.warn(u);
+    return;
+  }
+  const t = d(i, e || {});
+  return m(t, o), t.component;
+}
+const y = {
+  install(n, i) {
+    window === void 0 || !p() || window.location.pathname === g && (n.mount = function(e) {
+      n._component = {
+        render() {
+          return r(
+            s,
+            {},
+            {
+              default: () => r(l),
+              fallback: () => r("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;
+    });
+  }
+};
+export default y;

package/dist/runtime/components/NotFound.vue

@@ -0,0 +1,48 @@
+<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

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

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

@@ -0,0 +1,4 @@
+export declare function getQuery(): Record<string, string>;
+export declare function useQuery(): {
+    query: import("vue").Ref<Record<string, string>, Record<string, string>>;
+};

package/dist/runtime/composables/useQuery.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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;
+}
+function useQuery() {
+  const n = (0, _vue.ref)(getQuery()),
+    e = () => {
+      n.value = getQuery();
+    };
+  return (0, _vue.onMounted)(() => window.addEventListener("popstate", e)), (0, _vue.onBeforeUnmount)(() => window.removeEventListener("popstate", e)), {
+    query: n
+  };
+}

package/dist/runtime/composables/useQuery.mjs

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

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

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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);
+}
+function debounce(n, t = 500) {
+  let e;
+  return (...o) => {
+    clearTimeout(e), e = setTimeout(() => {
+      n(...o);
+    }, t);
+  };
+}
+const i = "__v_isRef",
+  a = "__v_isReadonly";
+function s(n, t) {
+  return n?.[i] ? t ? n.value : {
+    value: n.value,
+    [i]: "true",
+    [a]: !!n.__v_isReadonly
+  } : n;
+}
+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;
+}

package/dist/runtime/utils/helpers.mjs

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

package/dist/runtime/utils/index.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/index.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/index.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/tailwind.d.ts

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

package/dist/runtime/utils/tailwind.js

@@ -0,0 +1,13 @@
+"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

@@ -0,0 +1,6 @@
+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);
+}

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

@@ -0,0 +1,13 @@
+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>;
+export {};

package/dist/runtime/utils/tryCatch.js

@@ -0,0 +1,31 @@
+"use strict";
+
+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
+    };
+  }
+}
+function tryCatchSync(t, e) {
+  try {
+    return {
+      data: t()
+    };
+  } catch (r) {
+    if (e === "throw") throw r;
+    return e && e(r), {
+      error: r
+    };
+  }
+}

package/dist/runtime/utils/tryCatch.mjs

@@ -0,0 +1,18 @@
+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 function tryCatchSync(t, e) {
+  try {
+    return { data: t() };
+  } catch (r) {
+    if (e === "throw")
+      throw r;
+    return e && e(r), { error: r };
+  }
+}

package/dist/vite-plugin.d.ts

@@ -0,0 +1 @@
+export { nookuViteInspectorPlugin } from '@nookuio/inspector-plugin';

package/dist/vite-plugin.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "nookuViteInspectorPlugin", {
+  enumerable: true,
+  get: function () {
+    return _inspectorPlugin.nookuViteInspectorPlugin;
+  }
+});
+var _inspectorPlugin = require("@nookuio/inspector-plugin");

package/dist/vite-plugin.mjs

@@ -0,0 +1 @@
+export { nookuViteInspectorPlugin } from "@nookuio/inspector-plugin";

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@nookuio/vue",
+  "description": "",
+  "version": "1.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./vite-plugin": {
+      "types": "./dist/vite-plugin.d.ts",
+      "require": "./dist/vite-plugin.js",
+      "import": "./dist/vite-plugin.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@nookuio/iframe": "latest",
+    "@nookuio/inspector-plugin": "latest"
+  },
+  "devDependencies": {
+    "changelogen": "^0.6.2",
+    "eslint": "^9.32.0",
+    "unbuild": "^3.5.0",
+    "vitest": "^3.2.4",
+    "vue-sfc-transformer": "^0.1.17",
+    "vue-tsc": "^2.2.12"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "keywords": [
+    "nooku",
+    "nooku vue module",
+    "nooku connector",
+    "nooku vue connector",
+    "@nookuio/vue"
+  ],
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "build": "unbuild",
+    "release": "pnpm build && pnpm publish --no-git-checks --access public"
+  }
+}