@dyrected/nuxt 0.0.1 → 1.0.0

package/LICENSE.md

@@ -0,0 +1,50 @@
+Business Source License 1.1
+
+Parameters
+
+Licensor:             Ajola Technologies Ltd
+Licensed Work:        Dyrected
+Additional Use Grant: Commercial use is permitted as long as it is not used to provide a hosted or managed service that competes with Dyrected.
+Change Date:          2030-05-11
+Change License:       Apache License 2.0
+
+---
+
+Business Source License 1.1
+
+License text copyright © 2024 MariaDB plc, All Rights Reserved. 
+“Business Source License” is a trademark of MariaDB plc.
+
+### Terms
+
+The Licensor hereby grants you the right to copy, modify, create derivative works, redistribute, and make non-production use of the Licensed Work. The Licensor may make an Additional Use Grant, above, permitting limited production use.
+
+Effective on the Change Date, or the fourth anniversary of the first publicly available distribution of a specific version of the Licensed Work under this License, whichever comes first, the Licensor hereby grants you rights under the terms of the Change License, and the rights granted in the paragraph above terminate.
+
+If your use of the Licensed Work does not comply with the requirements currently in effect as described in this License, you must purchase a commercial license from the Licensor, its affiliated entities, or authorized resellers, or you must refrain from using the Licensed Work.
+
+All copies of the original and modified Licensed Work, and derivative works of the Licensed Work, are subject to this License. This License applies separately for each version of the Licensed Work and the Change Date may vary for each version of the Licensed Work released by Licensor.
+
+You must conspicuously display this License on each original or modified copy of the Licensed Work. If you receive the Licensed Work in original or modified form from a third party, the terms and conditions set forth in this License apply to your use of that work.
+
+Any use of the Licensed Work in violation of this License will automatically terminate your rights under this License for the current and all other versions of the Licensed Work.
+
+This License does not grant you any right in any trademark or logo of Licensor or its affiliates (provided that you may use a trademark or logo of Licensor as expressly required by this License).
+
+TO THE EXTENT PERMITTED BY APPLICABLE LAW, THE LICENSED WORK IS PROVIDED ON AN “AS IS” BASIS. LICENSOR HEREBY DISCLAIMS ALL WARRANTIES AND CONDITIONS, EXPRESS OR IMPLIED, INCLUDING (WITHOUT LIMITATION) WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, AND TITLE. 
+
+MariaDB hereby grants you permission to use this License’s text to license your works, and to refer to it using the trademark “Business Source License”, as long as you comply with the Covenants of Licensor below.
+
+### Covenants of Licensor
+
+In consideration of the right to use this License’s text and the “Business Source License” name and trademark, Licensor covenants to MariaDB, and to all other recipients of the licensed work to be provided by Licensor:
+
+1. To specify as the Change License the GPL Version 2.0 or any later version, or a license that is compatible with GPL Version 2.0 or a later version, where “compatible” means that software provided under the Change License can be included in a program with software provided under GPL Version 2.0 or a later version. Licensor may specify additional Change Licenses without limitation. 
+
+2. To either: (a) specify an additional grant of rights to use that does not impose any additional restriction on the right granted in this License, as the Additional Use Grant; or (b) insert the text “None”.
+
+3. Not to modify this License in any other way.
+
+---
+
+The Business Source License (this document, or the “License”) is not an Open Source license. However, the Licensed Work will eventually be made available under an Open Source License, as stated in this License.

package/README.md

@@ -1,3 +1,43 @@
 # @dyrected/nuxt
 
-This is the nuxt package/app for the Dyrected ecosystem.
+This is the Nuxt module for the Dyrected ecosystem.
+
+## Composables
+
+### `useDyrectedCollection`
+
+Fetch a collection of documents with auto-seeding support.
+
+```vue
+<script setup>
+const { data: posts } = await useDyrectedCollection('posts', {
+  initialData: [
+    { title: 'Welcome to Dyrected', content: '...' }
+  ]
+})
+</script>
+```
+
+### `useDyrectedDoc`
+
+Fetch a single document.
+
+```vue
+<script setup>
+const { data: post } = await useDyrectedDoc('posts', 'my-post-slug', {
+  initialData: { title: 'Default Post', content: '...' }
+})
+</script>
+```
+
+### `useDyrectedGlobal`
+
+Fetch global settings.
+
+```vue
+<script setup>
+const { data: settings } = await useDyrectedGlobal('site-settings', {
+  initialData: { siteName: 'My Awesome Site' }
+})
+</script>
+```

package/dist/module.d.mts

@@ -4,9 +4,15 @@ import { NuxtModule } from '@nuxt/schema';
 interface ModuleOptions extends DyrectedConfig {
     /**
      * Mount the Dyrected API on this path.
-     * @default '/api/dyrected'
+     * @default '/dyrected'
      */
     apiBase?: string;
+    /** API key passed to the SDK client for request authentication. */
+    apiKey?: string;
+    /** Site ID used to scope content to a specific tenant site. */
+    siteId?: string;
+    /** Optional manual path to the dyrected config file (absolute or relative to root). */
+    configPath?: string;
 }
 
 declare const module: NuxtModule<ModuleOptions>;

package/dist/module.d.ts

@@ -4,9 +4,15 @@ import { NuxtModule } from '@nuxt/schema';
 interface ModuleOptions extends DyrectedConfig {
     /**
      * Mount the Dyrected API on this path.
-     * @default '/api/dyrected'
+     * @default '/dyrected'
      */
     apiBase?: string;
+    /** API key passed to the SDK client for request authentication. */
+    apiKey?: string;
+    /** Site ID used to scope content to a specific tenant site. */
+    siteId?: string;
+    /** Optional manual path to the dyrected config file (absolute or relative to root). */
+    configPath?: string;
 }
 
 declare const module: NuxtModule<ModuleOptions>;

package/dist/module.mjs

@@ -1,4 +1,6 @@
-import { defineNuxtModule, createResolver, addServerHandler, addComponent, addImports } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addServerHandler, addComponent, addImports, addServerPlugin } from '@nuxt/kit';
+import { join } from 'path';
+import { existsSync } from 'fs';
 
 const module = defineNuxtModule({
   meta: {
@@ -6,25 +8,68 @@ const module = defineNuxtModule({
     configKey: "dyrected"
   },
   defaults: {
-    apiBase: "/api/dyrected"
+    apiBase: "/dyrected"
   },
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
-    addServerHandler({
-      route: `${options.apiBase}/**`,
-      handler: resolver.resolve("./runtime/server/handler")
-    });
+    if (options.apiBase?.startsWith("/")) {
+      addServerHandler({
+        route: `${options.apiBase}/**`,
+        handler: resolver.resolve("./runtime/server/handler")
+      });
+    }
     addComponent({
       name: "DyrectedMedia",
       filePath: resolver.resolve("./runtime/components/DyrectedMedia.vue")
     });
+    addComponent({
+      name: "DyrectedAdmin",
+      filePath: resolver.resolve("./runtime/components/DyrectedAdmin.vue")
+    });
     addImports([
       { name: "useDyrected", from: resolver.resolve("./runtime/composables/useDyrected") },
-      { name: "useDyrectedDoc", from: resolver.resolve("./runtime/composables/useDyrected") }
+      { name: "useDyrectedDoc", from: resolver.resolve("./runtime/composables/useDyrected") },
+      { name: "useDyrectedCollection", from: resolver.resolve("./runtime/composables/useDyrected") },
+      { name: "useDyrectedGlobal", from: resolver.resolve("./runtime/composables/useDyrected") },
+      { name: "useDyrectedAuth", from: resolver.resolve("./runtime/composables/useDyrectedAuth") },
+      { name: "useLivePreview", from: resolver.resolve("./runtime/composables/useLivePreview") }
     ]);
-    nuxt.options.runtimeConfig.public.dyrected = {
+    const runtimeConfig = {
+      ...options,
       baseUrl: options.apiBase
     };
+    const configFiles = ["dyrected.config.ts", "dyrected.config.js", "dyrected.config.mjs"];
+    let configPath = options.configPath ? join(nuxt.options.rootDir, options.configPath) : "";
+    if (!configPath) {
+      for (const file of configFiles) {
+        const fullPath = join(nuxt.options.rootDir, file);
+        if (existsSync(fullPath)) {
+          configPath = fullPath;
+          break;
+        }
+      }
+    }
+    if (configPath) {
+      console.log("[dyrected/nuxt] Auto-detected config at:", configPath);
+      runtimeConfig.configPath = configPath;
+      addServerPlugin(resolver.resolve("./runtime/server/plugins/db"));
+    } else {
+      console.warn("[dyrected/nuxt] Could not find dyrected.config.ts. Self-hosted database re-hydration might fail.");
+    }
+    if (options.db) {
+      Object.defineProperty(runtimeConfig, "db", {
+        value: options.db,
+        enumerable: false,
+        configurable: true,
+        writable: true
+      });
+    }
+    nuxt.options.runtimeConfig.dyrected = runtimeConfig;
+    nuxt.options.runtimeConfig.public.dyrected = {
+      baseUrl: options.apiBase,
+      apiKey: options.apiKey,
+      siteId: options.siteId
+    };
   }
 });
 

package/dist/runtime/components/DyrectedAdmin.vue

@@ -0,0 +1,56 @@
+<template>
+  <div ref="container" class="dyrected-admin-wrapper"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
+import "@dyrected/admin/styles";
+// @ts-ignore
+import { useRuntimeConfig } from "#imports";
+
+const props = defineProps<{
+  /**
+   * The base path where the admin is mounted.
+   * @default "/cms-admin"
+   */
+  basename?: string;
+}>();
+
+const config = useRuntimeConfig();
+const container = ref<HTMLElement | null>(null);
+let unmount: (() => void) | null = null;
+
+onMounted(async () => {
+  await nextTick();
+
+  if (container.value) {
+    try {
+      // 1. Dynamically import to ensure isolation from Vue's early bundle phase
+      const { renderAdminUI } = await import("@dyrected/admin");
+
+      // 2. Deep clone config to strip ALL Vue proxies/reactivity
+      const dyrectedRaw = JSON.parse(JSON.stringify(config.public.dyrected));
+
+      unmount = renderAdminUI(container.value, {
+        apiKey: String(dyrectedRaw.apiKey || ""),
+        siteId: String(dyrectedRaw.siteId || ""),
+        baseUrl: String(dyrectedRaw.baseUrl || ""),
+        basename: props.basename || "/cms-admin",
+        isEmbedded: false,
+      });
+    } catch (err) {
+      console.error("[DyrectedAdmin] Failed to mount admin UI:", err);
+    }
+  }
+});
+
+onUnmounted(() => {
+  if (unmount) {
+    unmount();
+  }
+});
+</script>
+
+<style scoped>
+.dyrected-admin-wrapper{height:100vh;width:100vw}
+</style>

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

@@ -1,4 +1,19 @@
-export declare const useDyrected: () => import("@dyrected/sdk").DyrectedClient;
-export declare const useDyrectedDoc: (collection: string, slug: string, options?: {
+import { type DyrectedClient, type BaseSchema } from '@dyrected/sdk';
+export declare const useDyrected: <TSchema extends BaseSchema = any>() => DyrectedClient<TSchema>;
+export declare const useDyrectedDoc: <T = any, TSchema extends BaseSchema = any>(collection: keyof TSchema["collections"] | string, id: string, options?: {
     depth?: number;
-}) => Promise<any>;
+    initialData?: T;
+}) => any;
+export declare const useDyrectedCollection: <T = any, TSchema extends BaseSchema = any>(collection: keyof TSchema["collections"] | string, options?: {
+    depth?: number;
+    limit?: number;
+    page?: number;
+    sort?: string;
+    where?: any;
+    initialData?: T[];
+}) => any;
+export declare function useDyrectedGlobal<T = any, TSchema extends BaseSchema = any>(slug: keyof TSchema['globals'] | string, options?: {
+    depth?: number;
+    initialData?: T;
+    watch?: any[];
+}): any;

package/dist/runtime/composables/useDyrected.mjs

@@ -1,13 +1,35 @@
+import { useRuntimeConfig, useAsyncData } from "#app";
 import { createClient } from "@dyrected/sdk";
-import { useRuntimeConfig } from "#app";
-export const useDyrected = () => {
+function getClient() {
   const config = useRuntimeConfig().public.dyrected;
-  const client = createClient({
-    baseUrl: config.baseUrl
+  return createClient({
+    baseUrl: config.baseUrl,
+    apiKey: config.apiKey,
+    siteId: config.siteId
   });
-  return client;
+}
+export const useDyrected = () => {
+  return getClient();
+};
+export const useDyrectedDoc = (collection, id, options) => {
+  const client = getClient();
+  return useAsyncData(
+    `dyrected:doc:${collection}:${id}`,
+    () => client.findOne(collection, id, options)
+  );
 };
-export const useDyrectedDoc = (collection, slug, options) => {
-  const client = useDyrected();
-  return client.collection(collection).findOne(slug, options);
+export const useDyrectedCollection = (collection, options) => {
+  const client = getClient();
+  return useAsyncData(
+    `dyrected:collection:${collection}`,
+    () => client.collection(collection).find(options).exec()
+  );
 };
+export function useDyrectedGlobal(slug, options) {
+  const client = getClient();
+  return useAsyncData(
+    `dyrected:global:${slug}`,
+    () => client.global(slug).get(options),
+    { watch: options?.watch }
+  );
+}

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

@@ -0,0 +1,23 @@
+export interface DyrectedAuthUser {
+    id: string;
+    email: string;
+    [key: string]: any;
+}
+/**
+ * useDyrectedAuth — composable for auth collections.
+ *
+ * Usage:
+ *   const { login, logout, user, isLoggedIn } = useDyrectedAuth('customers')
+ *
+ * The JWT is persisted in a cookie (`dyrected_token_<collection>`) so it
+ * survives page reloads and is available server-side on the next request.
+ */
+export declare function useDyrectedAuth(collection: string): {
+    /** Reactive: the authenticated user, or null. */
+    user: any;
+    /** Reactive: true when a valid JWT cookie exists. */
+    isLoggedIn: any;
+    login: (email: string, password: string) => Promise<DyrectedAuthUser>;
+    logout: () => Promise<void>;
+    fetchMe: () => Promise<DyrectedAuthUser | null>;
+};

package/dist/runtime/composables/useDyrectedAuth.mjs

@@ -0,0 +1,65 @@
+import { useRuntimeConfig, useState, useCookie, computed } from "#app";
+import { createClient } from "@dyrected/sdk";
+export function useDyrectedAuth(collection) {
+  const config = useRuntimeConfig().public.dyrected;
+  const cookieName = `dyrected_token_${collection}`;
+  const tokenCookie = useCookie(cookieName, {
+    default: () => null,
+    maxAge: 60 * 60 * 24 * 7,
+    // 7 days
+    sameSite: "lax"
+  });
+  const user = useState(`dyrected:auth:user:${collection}`, () => null);
+  const isLoggedIn = computed(() => !!tokenCookie.value);
+  function buildClient() {
+    const client = createClient({
+      baseUrl: config.baseUrl,
+      apiKey: config.apiKey,
+      siteId: config.siteId
+    });
+    if (tokenCookie.value) {
+      client.setToken(tokenCookie.value);
+    }
+    return client;
+  }
+  async function login(email, password) {
+    const client = buildClient();
+    const { token, user: userData } = await client.collection(collection).login(email, password);
+    tokenCookie.value = token;
+    user.value = userData;
+    return userData;
+  }
+  async function logout() {
+    if (tokenCookie.value) {
+      try {
+        const client = buildClient();
+        await client.collection(collection).logout();
+      } catch {
+      }
+    }
+    tokenCookie.value = null;
+    user.value = null;
+  }
+  async function fetchMe() {
+    if (!tokenCookie.value) return null;
+    try {
+      const client = buildClient();
+      const me = await client.collection(collection).me();
+      user.value = me;
+      return me;
+    } catch {
+      tokenCookie.value = null;
+      user.value = null;
+      return null;
+    }
+  }
+  return {
+    /** Reactive: the authenticated user, or null. */
+    user,
+    /** Reactive: true when a valid JWT cookie exists. */
+    isLoggedIn,
+    login,
+    logout,
+    fetchMe
+  };
+}

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

@@ -0,0 +1,35 @@
+import { type Ref } from 'vue';
+export interface LivePreviewOptions<T> {
+    /**
+     * The initial data to show before any postMessage arrives.
+     * Typically the server-fetched document passed from useAsyncData.
+     */
+    initialData: T;
+    /**
+     * The origin of the Dyrected Admin UI that will send preview messages.
+     * Defaults to '*' (accepts from any origin).
+     * Set this to your Admin URL in production for security.
+     */
+    serverURL?: string;
+    /**
+     * The depth at which to resolve relationships in the preview data.
+     */
+    depth?: number;
+}
+/**
+ * useLivePreview — Vue composable for Dyrected live preview (postMessage mode).
+ *
+ * The Admin UI sends postMessage events with draft document data when the
+ * editor changes. This composable listens for those messages and reactively
+ * updates `data` so the preview page re-renders in real time.
+ *
+ * Usage:
+ *   const { data, isLive } = useLivePreview({ initialData: serverData.value })
+ *
+ * The parent page/component must be rendered inside an iframe by the Admin UI.
+ * Set `admin.previewUrl` in your collection config to point to that page.
+ */
+export declare function useLivePreview<T = any>(options: LivePreviewOptions<T>): {
+    data: Ref<T>;
+    isLive: Ref<boolean>;
+};

package/dist/runtime/composables/useLivePreview.mjs

@@ -0,0 +1,33 @@
+import { ref, onMounted, onUnmounted } from "vue";
+export function useLivePreview(options) {
+  const data = ref(options.initialData);
+  const isLive = ref(false);
+  function handleMessage(event) {
+    const allowedOrigin = options.serverURL || "*";
+    if (allowedOrigin !== "*" && event.origin !== allowedOrigin) return;
+    const { type, data: payload } = event.data || {};
+    if (type === "dyrected-live-preview") {
+      data.value = payload;
+      isLive.value = true;
+    }
+    if (type === "dyrected-live-preview-ready") {
+      window.parent.postMessage({ type: "dyrected-live-preview-ack" }, allowedOrigin);
+    }
+  }
+  onMounted(() => {
+    window.addEventListener("message", handleMessage);
+    window.parent.postMessage({ type: "dyrected-live-preview-ready" }, options.serverURL || "*");
+  });
+  onUnmounted(() => {
+    window.removeEventListener("message", handleMessage);
+  });
+  return {
+    /** Reactively updated document data from the Admin UI editor. */
+    data,
+    /**
+     * True once the first postMessage from the Admin has been received.
+     * Useful to show a "Live preview active" indicator.
+     */
+    isLive
+  };
+}

package/dist/runtime/server/handler.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<Response>>;
+declare const _default: import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<any>>;
 export default _default;

package/dist/runtime/server/handler.mjs

@@ -1,8 +1,63 @@
-import { eventHandler, toRequest } from "h3";
-import { createDyrectedApp } from "@dyrected/core";
+import { eventHandler } from "h3";
+import { createDyrectedApp } from "@dyrected/core/server";
 import { useRuntimeConfig } from "#imports";
+let app;
 export default eventHandler(async (event) => {
   const config = useRuntimeConfig().dyrected;
-  const app = createDyrectedApp(config);
-  return app.fetch(toRequest(event.req));
+  if (!app) {
+    const dyrectedConfig = { ...config };
+    if (!dyrectedConfig.db || typeof dyrectedConfig.db.find !== "function") {
+      dyrectedConfig.db = globalThis.__dyrected_db;
+    }
+    if (!dyrectedConfig.storage || typeof dyrectedConfig.storage.upload !== "function") {
+      dyrectedConfig.storage = globalThis.__dyrected_storage;
+    }
+    console.log("[dyrected/nuxt] Initializing app. DB:", !!dyrectedConfig.db, "Storage:", !!dyrectedConfig.storage);
+    app = await createDyrectedApp(dyrectedConfig);
+  }
+  const req = event.node?.req || event.req;
+  const method = req?.method || "GET";
+  const headers = {};
+  const rawHeaders = req?.headers || {};
+  for (const key in rawHeaders) {
+    const val = rawHeaders[key];
+    if (Array.isArray(val)) {
+      headers[key] = val.join(", ");
+    } else if (val) {
+      headers[key] = String(val);
+    }
+  }
+  const originalUrl = req?.url || "/";
+  const apiBase = config.apiBase || "/dyrected";
+  const path = originalUrl.startsWith(apiBase) ? originalUrl.slice(apiBase.length) || "/" : originalUrl;
+  const protocol = headers["x-forwarded-proto"] || "http";
+  const host = headers["host"] || "localhost:3000";
+  const fullUrl = new URL(path, `${protocol}://${host}`);
+  let body = void 0;
+  if (!["GET", "HEAD"].includes(method)) {
+    if (req && typeof req.on === "function") {
+      body = await new Promise((resolve, reject) => {
+        const chunks = [];
+        req.on("data", (chunk) => chunks.push(chunk));
+        req.on("end", () => resolve(Buffer.concat(chunks)));
+        req.on("error", reject);
+      });
+    } else if (req && typeof req.arrayBuffer === "function") {
+      body = await req.arrayBuffer();
+    }
+  }
+  const request = new Request(fullUrl, {
+    method,
+    headers,
+    body,
+    // @ts-ignore
+    duplex: "half"
+  });
+  const response = await app.fetch(request);
+  if (response.status === 404) {
+    console.warn(`[dyrected/nuxt] 404 Not Found: ${path}`);
+    console.log("[dyrected/nuxt] Available routes:");
+    console.table(app.routes.map((r) => ({ method: r.method, path: r.path })));
+  }
+  return response;
 });

package/dist/runtime/server/plugins/db.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/server/plugins/db.mjs

@@ -0,0 +1,21 @@
+import { defineNitroPlugin } from "nitro/runtime";
+import { useRuntimeConfig } from "#imports";
+export default defineNitroPlugin(async (nitroApp) => {
+  const runtimeConfig = useRuntimeConfig().dyrected;
+  if (runtimeConfig?.configPath) {
+    try {
+      const configPath = runtimeConfig.configPath;
+      const { default: userConfig } = await import(configPath);
+      if (userConfig && userConfig.db) {
+        globalThis.__dyrected_db = userConfig.db;
+        console.log("[dyrected/nuxt] Database re-attached to global context");
+      }
+      if (userConfig && userConfig.storage) {
+        globalThis.__dyrected_storage = userConfig.storage;
+        console.log("[dyrected/nuxt] Storage adapter re-attached to global context");
+      }
+    } catch (err) {
+      console.error("[dyrected/nuxt] Failed to re-attach database:", err);
+    }
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dyrected/nuxt",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "type": "module",
   "main": "./dist/module.mjs",
   "types": "./dist/module.d.ts",
@@ -10,8 +10,9 @@
   "dependencies": {
     "@nuxt/kit": "^3.11.2",
     "h3": "2.0.1-rc.22",
-    "@dyrected/core": "0.0.1",
-    "@dyrected/sdk": "0.0.1"
+    "@dyrected/core": "1.0.0",
+    "@dyrected/sdk": "1.0.0",
+    "@dyrected/admin": "1.0.0"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.5.5",