@devite/nuxt-sanity 1.5.3 → 2.0.1

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm version][npm-version-src]][npm-version-href]
 
-Provides additional helper components and utilities for the [Nuxt Sanity Module][nuxt-sanity].
+Advanced [Sanity](https://www.sanity.io/) integration for Nuxt.js. Based on the official [@nuxtjs/sanity][nuxt-sanity] module.
 
 ## Quick Setup
 
@@ -12,7 +12,7 @@ Install the module to your Nuxt application with one command:
 npx nuxi module add @devite/nuxt-sanity
 ```
 
-That's it! You can now use data from Sanity in your Nuxt app ✨
+That's it! You can now use Sanity with your Nuxt app ✨
 
 
 ## Contribution
@@ -22,7 +22,7 @@ That's it! You can now use data from Sanity in your Nuxt app ✨
   
   ```bash
   # Install dependencies
-  pnpm install && cd playground/cms && pnpm install && cd -
+  pnpm install
   
   # Generate type stubs
   pnpm dev:prepare

package/dist/module.d.mts

@@ -1,27 +1,56 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { Image, Slug, PortableTextBlock } from '@sanity/types';
+import { VisualEditingOptions as VisualEditingOptions$1, HistoryRefresh } from '@sanity/visual-editing';
+import { ClientConfig } from '@sanity/client';
+import { Slug, ImageAsset, PortableTextBlock } from '@sanity/types';
 
-interface SEO {
-    _type: 'seo';
-    indexable: boolean;
-    title: string;
-    shortTitle: string;
-    description: string;
-    image?: Image;
+type ModuleOptions = ClientConfig & {
+    projectId: string;
+    /** @default 'production' */
+    dataset: string;
+    /** @default false */
+    minimalClient?: boolean;
+    /** @default true */
+    useCdn?: boolean;
+    /** @default '2024-08-08' */
+    apiVersion?: string;
+    visualEditing?: VisualEditingOptions;
+};
+interface VisualEditingOptions {
+    /** @default { enable: "/_sanity/preview/enable", disable: "/_sanity/preview/disable" } */
+    previewMode?: boolean | {
+        enable?: string;
+        disable?: string;
+    };
+    previewModeId?: string;
+    /** @default 'live-visual-editing' */
+    mode?: 'live-visual-editing' | 'visual-editing' | 'custom';
+    /** @default '/_sanity/fetch' */
+    proxyEndpoint?: string;
+    token?: string;
+    studioUrl?: string;
+    /** @default true */
+    stega?: boolean;
+    /** This function is only required if `mode` is set to 'visual-editing' */
+    refresh?: SanityVisualEditingRefreshHandler;
+    /** @default 100 */
+    zIndex?: VisualEditingOptions$1['zIndex'];
 }
+type SanityVisualEditingRefreshHandler = (payload: HistoryRefresh, refreshDefault: () => false | Promise<void>) => false | Promise<void>;
 
 interface Page {
     _id: string;
     _type: 'page';
     title: string;
     slug: Slug;
-    modules: Array<object>;
+    modules: SanityArray<SanityModule>;
     seo: SEO;
 }
 
 interface GlobalSEO {
     siteName: string;
-    image: Image;
+    image: {
+        asset: ImageAsset;
+    };
 }
 
 interface LinkExternal {
@@ -35,20 +64,39 @@ interface LinkInternal {
     slug: string;
 }
 
+interface SEO {
+    _type: 'seo';
+    indexable: boolean;
+    title: string;
+    shortTitle: string;
+    description: string;
+    image?: {
+        asset: ImageAsset;
+    };
+}
+
 type RichText = PortableTextBlock[];
 
 interface Home {
     _type: 'home';
-    modules: Array<object>;
+    modules: SanityArray<SanityModule>;
     seo: SEO;
 }
 
 interface NotFound {
     _type: 'notFound';
-    modules: Array<object>;
+    modules: SanityArray<SanityModule>;
     seo: SEO;
 }
 
-declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
+type SanityModule = {
+    _type?: string;
+};
+
+type SanityArray<T> = Array<T & {
+    _key: string;
+}>;
+
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type GlobalSEO, type Home, type LinkExternal, type LinkInternal, type NotFound, type Page, type RichText, type SEO, _default as default };
+export { type GlobalSEO, type Home, type LinkExternal, type LinkInternal, type ModuleOptions, type NotFound, type Page, type RichText, type SEO, type SanityArray, type SanityModule, type SanityVisualEditingRefreshHandler, type VisualEditingOptions, _default as default };

package/dist/module.d.ts

@@ -1,27 +1,56 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { Image, Slug, PortableTextBlock } from '@sanity/types';
+import { VisualEditingOptions as VisualEditingOptions$1, HistoryRefresh } from '@sanity/visual-editing';
+import { ClientConfig } from '@sanity/client';
+import { Slug, ImageAsset, PortableTextBlock } from '@sanity/types';
 
-interface SEO {
-    _type: 'seo';
-    indexable: boolean;
-    title: string;
-    shortTitle: string;
-    description: string;
-    image?: Image;
+type ModuleOptions = ClientConfig & {
+    projectId: string;
+    /** @default 'production' */
+    dataset: string;
+    /** @default false */
+    minimalClient?: boolean;
+    /** @default true */
+    useCdn?: boolean;
+    /** @default '2024-08-08' */
+    apiVersion?: string;
+    visualEditing?: VisualEditingOptions;
+};
+interface VisualEditingOptions {
+    /** @default { enable: "/_sanity/preview/enable", disable: "/_sanity/preview/disable" } */
+    previewMode?: boolean | {
+        enable?: string;
+        disable?: string;
+    };
+    previewModeId?: string;
+    /** @default 'live-visual-editing' */
+    mode?: 'live-visual-editing' | 'visual-editing' | 'custom';
+    /** @default '/_sanity/fetch' */
+    proxyEndpoint?: string;
+    token?: string;
+    studioUrl?: string;
+    /** @default true */
+    stega?: boolean;
+    /** This function is only required if `mode` is set to 'visual-editing' */
+    refresh?: SanityVisualEditingRefreshHandler;
+    /** @default 100 */
+    zIndex?: VisualEditingOptions$1['zIndex'];
 }
+type SanityVisualEditingRefreshHandler = (payload: HistoryRefresh, refreshDefault: () => false | Promise<void>) => false | Promise<void>;
 
 interface Page {
     _id: string;
     _type: 'page';
     title: string;
     slug: Slug;
-    modules: Array<object>;
+    modules: SanityArray<SanityModule>;
     seo: SEO;
 }
 
 interface GlobalSEO {
     siteName: string;
-    image: Image;
+    image: {
+        asset: ImageAsset;
+    };
 }
 
 interface LinkExternal {
@@ -35,20 +64,39 @@ interface LinkInternal {
     slug: string;
 }
 
+interface SEO {
+    _type: 'seo';
+    indexable: boolean;
+    title: string;
+    shortTitle: string;
+    description: string;
+    image?: {
+        asset: ImageAsset;
+    };
+}
+
 type RichText = PortableTextBlock[];
 
 interface Home {
     _type: 'home';
-    modules: Array<object>;
+    modules: SanityArray<SanityModule>;
     seo: SEO;
 }
 
 interface NotFound {
     _type: 'notFound';
-    modules: Array<object>;
+    modules: SanityArray<SanityModule>;
     seo: SEO;
 }
 
-declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
+type SanityModule = {
+    _type?: string;
+};
+
+type SanityArray<T> = Array<T & {
+    _key: string;
+}>;
+
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type GlobalSEO, type Home, type LinkExternal, type LinkInternal, type NotFound, type Page, type RichText, type SEO, _default as default };
+export { type GlobalSEO, type Home, type LinkExternal, type LinkInternal, type ModuleOptions, type NotFound, type Page, type RichText, type SEO, type SanityArray, type SanityModule, type SanityVisualEditingRefreshHandler, type VisualEditingOptions, _default as default };

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@devite/nuxt-sanity",
-  "configKey": "@devite/nuxt-sanity",
-  "version": "1.5.3",
+  "version": "2.0.1",
+  "configKey": "sanity",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
-    "unbuild": "unknown"
+    "unbuild": "2.0.0"
   }
 }

package/dist/module.mjs

@@ -1,14 +1,108 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import crypto from 'node:crypto';
+import { defineNuxtModule, createResolver, addPlugin, addServerHandler, addImportsDir, addComponentsDir } from '@nuxt/kit';
+import defu from 'defu';
+
+const name = "@devite/nuxt-sanity";
+const version = "2.0.1";
 
 const module = defineNuxtModule({
   meta: {
-    name: "@devite/nuxt-sanity"
+    name,
+    version,
+    configKey: "sanity"
   },
-  async setup(_options, _nuxt) {
+  defaults: {},
+  async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
+    const moduleConfig = defu(nuxt.options.runtimeConfig.public.sanity, {
+      projectId: options.projectId,
+      dataset: options.dataset || "production",
+      minimalClient: options.minimalClient || false,
+      useCdn: options.useCdn || true,
+      apiVersion: options.apiVersion || "2024-08-08",
+      visualEditing: options.visualEditing || null
+    });
+    if (options.visualEditing) {
+      const previewMode = moduleConfig.visualEditing.previewMode !== false;
+      const visualEditingConfig = defu(moduleConfig.visualEditing, {
+        mode: "live-visual-editing",
+        previewMode: previewMode ? defu(moduleConfig.visualEditing.previewMode, {
+          enable: "/_sanity/preview/enable",
+          disable: "/_sanity/preview/disable"
+        }) : false,
+        previewModeId: previewMode ? crypto.randomBytes(16).toString("hex") : "",
+        proxyEndpoint: "/_sanity/fetch",
+        stega: true,
+        zIndex: 100,
+        token: ""
+      });
+      if (!moduleConfig.visualEditing.token?.length)
+        console.warn('Visual editing requires a token with "read" access');
+      if (!visualEditingConfig.studioUrl)
+        console.warn("Visual editing requires a studio URL");
+      if (visualEditingConfig.mode === "live-visual-editing" && !visualEditingConfig.stega)
+        console.warn('Visual Editing requires "stega" to be enabled in "live-visual-editing" mode');
+      nuxt.options.build.transpile.push(
+        "async-cache-dedupe",
+        "@sanity/core-loader",
+        "@sanity/preview-url-secret"
+      );
+      nuxt.options.vite.resolve = defu(nuxt.options.vite.resolve, {
+        dedupe: ["@sanity/client"]
+      });
+      nuxt.options.vite.optimizeDeps = defu(nuxt.options.vite.optimizeDeps, {
+        include: [
+          `${name} > @sanity/visual-editing > @sanity/mutate > lodash/groupBy.js`,
+          `${name} > @sanity/visual-editing > react`,
+          `${name} > @sanity/visual-editing > react/jsx-runtime`,
+          `${name} > @sanity/visual-editing > react-dom`,
+          `${name} > @sanity/visual-editing > react-dom/client`,
+          `${name} > @sanity/visual-editing > react-compiler-runtime`,
+          "@sanity/client"
+        ]
+      });
+      addPlugin({ src: resolve("runtime/plugins/visual-editing") });
+      if (previewMode) {
+        addServerHandler({
+          method: "get",
+          route: visualEditingConfig.previewMode.enable,
+          handler: resolve("runtime/server/routes/preview/enable")
+        });
+        addServerHandler({
+          method: "get",
+          route: visualEditingConfig.previewMode.disable,
+          handler: resolve("runtime/server/routes/preview/disable")
+        });
+      }
+      addServerHandler({
+        method: "post",
+        route: visualEditingConfig.proxyEndpoint,
+        handler: resolve("runtime/server/routes/proxy")
+      });
+      moduleConfig.visualEditing = visualEditingConfig;
+    }
+    nuxt.options.runtimeConfig.sanity = moduleConfig;
+    nuxt.options.runtimeConfig.public.sanity = defu(nuxt.options.runtimeConfig.public.sanity, {
+      projectId: moduleConfig.projectId,
+      dataset: moduleConfig.dataset,
+      minimalClient: moduleConfig.minimalClient,
+      useCdn: moduleConfig.useCdn,
+      apiVersion: moduleConfig.apiVersion,
+      perspective: "raw",
+      /* Visual Editing */
+      token: options.token || "",
+      withCredentials: options.withCredentials || false,
+      stega: moduleConfig.visualEditing && moduleConfig.visualEditing.stega !== false && moduleConfig.visualEditing.previewMode !== false && { enabled: true, studioUrl: moduleConfig.visualEditing.studioUrl } || {},
+      visualEditing: moduleConfig.visualEditing
+    });
+    addImportsDir(resolve("runtime/client"));
+    addImportsDir(resolve("runtime/composables"));
+    addImportsDir(resolve("runtime/utils/groq"));
+    addImportsDir(resolve("runtime/utils/projections"));
+    addImportsDir(resolve("runtime/utils/resolveImageAssetById"));
+    addImportsDir(resolve("runtime/utils/resolveInternalLink"));
     await addComponentsDir({ path: resolve("runtime/components") });
     await addComponentsDir({ path: "~/sanity", global: true, prefix: "Sanity" });
-    addImportsDir(resolve("runtime/utils"));
   }
 });
 

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

@@ -0,0 +1,15 @@
+import { type ClientPerspective, type QueryParams, type SanityClient as SanityClientType } from '@sanity/client';
+import type { ModuleOptions } from '@devite/nuxt-sanity';
+import { type QueryStore } from '@sanity/core-loader';
+import SanityClient from './SanityClient.js';
+declare class DefaultSanityClient extends SanityClient {
+    readonly client: SanityClientType;
+    queryStore: QueryStore | null;
+    constructor(config: ModuleOptions);
+    fetch<T = unknown>(query: string, params: QueryParams, options?: {
+        perspective?: ClientPerspective;
+    }): Promise<T>;
+    createQueryStore(tag?: string): void;
+    clone(): DefaultSanityClient;
+}
+export default DefaultSanityClient;

package/dist/runtime/client/DefaultSanityClient.js

@@ -0,0 +1,44 @@
+import {
+  createClient
+} from "@sanity/client";
+import { createQueryStore as createCoreQueryStore } from "@sanity/core-loader";
+import SanityClient from "./SanityClient.js";
+class DefaultSanityClient extends SanityClient {
+  client;
+  queryStore = null;
+  constructor(config) {
+    super(config);
+    this.client = createClient(config);
+  }
+  async fetch(query, params, options) {
+    return await this.client.fetch(query, params, options);
+  }
+  createQueryStore(tag) {
+    const queryStore = createCoreQueryStore({
+      tag: tag || "nuxt-loader",
+      client: false,
+      ssr: true
+    });
+    if (import.meta.server) {
+      const serverClient = this.client.withConfig({
+        perspective: "previewDrafts",
+        token: this.config.token,
+        useCdn: false
+      });
+      queryStore.setServerClient(serverClient);
+    }
+    this.queryStore = queryStore;
+  }
+  clone() {
+    return new DefaultSanityClient({
+      useCdn: this.config.useCdn,
+      projectId: this.config.projectId,
+      dataset: this.config.dataset,
+      apiVersion: this.config.apiVersion,
+      withCredentials: this.config.withCredentials,
+      token: this.config.token,
+      perspective: this.config.perspective
+    });
+  }
+}
+export default DefaultSanityClient;

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

@@ -0,0 +1,15 @@
+import type { ClientPerspective, QueryParams } from '@sanity/client';
+import type { ModuleOptions } from '@devite/nuxt-sanity';
+import SanityClient from './SanityClient.js';
+declare class MinimalSanityClient extends SanityClient {
+    private readonly queryPath;
+    private readonly fetchOptions;
+    constructor(config: ModuleOptions);
+    private getByteLength;
+    private toQueryString;
+    fetch<T>(query: string, params: QueryParams, _options?: {
+        perspective?: ClientPerspective;
+    }): Promise<T>;
+    clone(): MinimalSanityClient;
+}
+export default MinimalSanityClient;

package/dist/runtime/client/MinimalSanityClient.js

@@ -0,0 +1,59 @@
+import { $fetch } from "ofetch";
+import SanityClient from "./SanityClient.js";
+const API_HOST = "api.sanity.io";
+const API_CDN_HOST = "apicdn.sanity.io";
+class MinimalSanityClient extends SanityClient {
+  queryPath;
+  fetchOptions;
+  constructor(config) {
+    super({
+      ...config,
+      perspective: config.perspective || "raw",
+      useCdn: config.perspective === "previewDrafts" ? false : config.useCdn
+    });
+    this.queryPath = `/v${config.apiVersion}/data/query/${config.dataset}`;
+    this.fetchOptions = {
+      headers: {
+        ...config.token ? { Authorization: `Bearer ${config.token}` } : {},
+        Accept: "application/json",
+        ...import.meta.server ? { "accept-encoding": "gzip, deflate" } : {}
+      }
+    };
+    if (import.meta.client) {
+      this.fetchOptions.credentials = config.withCredentials ? "include" : "omit";
+    }
+  }
+  getByteLength(query) {
+    return encodeURI(query).split(/%..|./).length;
+  }
+  toQueryString(query, params) {
+    const baseQueryStr = `?query=${encodeURIComponent(query)}`;
+    return Object.keys(params).reduce((acc, paramName) => {
+      return acc + `&${encodeURIComponent(`$${paramName}`)}=${encodeURIComponent(JSON.stringify(params[paramName]))}`;
+    }, baseQueryStr);
+  }
+  async fetch(query, params, _options) {
+    const perspectiveQueryString = `&perspective=${_options?.perspective || this.config.perspective}`;
+    const queryString = this.toQueryString(query, params || {}) + perspectiveQueryString;
+    const byteLength = this.getByteLength(queryString);
+    const isEligibleForGetRequest = byteLength <= 9e3;
+    const queryHost = this.config.useCdn && isEligibleForGetRequest ? API_CDN_HOST : API_HOST;
+    return (await $fetch(`https://${this.config.projectId}.${queryHost + this.queryPath}${queryString}`, {
+      ...this.fetchOptions,
+      method: isEligibleForGetRequest ? "GET" : "POST",
+      body: !isEligibleForGetRequest ? { query, params } : void 0
+    })).result;
+  }
+  clone() {
+    return new MinimalSanityClient({
+      useCdn: this.config.useCdn,
+      projectId: this.config.projectId,
+      dataset: this.config.dataset,
+      apiVersion: this.config.apiVersion,
+      withCredentials: this.config.withCredentials,
+      token: this.config.token,
+      perspective: this.config.perspective
+    });
+  }
+}
+export default MinimalSanityClient;

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

@@ -0,0 +1,10 @@
+import type { ClientPerspective, ContentSourceMap, QueryParams } from '@sanity/client';
+import type { ModuleOptions } from '@devite/nuxt-sanity';
+export default abstract class SanityClient {
+    config: ModuleOptions;
+    sourceMap: ContentSourceMap | undefined;
+    protected constructor(config: ModuleOptions);
+    abstract fetch<T = unknown>(query: string, params: QueryParams, options?: {
+        perspective?: ClientPerspective;
+    }): Promise<T>;
+}

package/dist/runtime/client/SanityClient.js

@@ -0,0 +1,7 @@
+export default class SanityClient {
+  config;
+  sourceMap = void 0;
+  constructor(config) {
+    this.config = config;
+  }
+}

package/dist/runtime/components/SanityComponent.vue

@@ -18,11 +18,11 @@
 </template>
 
 <script setup lang="ts">
-import type { Component } from '@nuxt/schema'
-import { computed, ref, resolveComponent } from '#imports'
-import { SanityLinkExternal, SanityLinkInternal, SanityRichText } from '#components'
+import { type Component, computed, ref, resolveComponent } from 'vue'
+import type { SanityModule } from '@devite/nuxt-sanity'
+import { SanityImageAsset, SanityLinkExternal, SanityLinkInternal, SanityRichText } from '#components'
 
-const { data } = defineProps<{ data?: { _type?: string } | Array<{ _type: string }> }>()
+const { data } = defineProps<{ data?: SanityModule | Array<SanityModule> }>()
 
 const component = computed<Component | null>(() => {
   if (Array.isArray(data) && data.every((item) => item._type === 'block')) {
@@ -37,6 +37,8 @@ const component = computed<Component | null>(() => {
         return SanityLinkInternal
       case 'linkExternal':
         return SanityLinkExternal
+      case 'sanity.imageAsset':
+        return SanityImageAsset
       default: {
         const upperCamelCase = type.charAt(0).toUpperCase() + type.slice(1)
         const resolvedComponent = resolveComponent('Sanity' + upperCamelCase)

package/dist/runtime/components/SanityImageAsset.vue

@@ -6,7 +6,7 @@
     :width="imageAsset.metadata.dimensions.width"
     :height="imageAsset.metadata.dimensions.height"
     :alt="imageAsset.altText"
-    :placeholder="imageAsset.metadata.lqip"
+    :placeholder="loading === 'eager' ? undefined : imageAsset.metadata.lqip"
     :loading="loading"
     :format="imageAsset.mimeType === 'image/svg+xml' ? undefined : 'webp'"
     draggable="false"
@@ -15,10 +15,14 @@
 
 <script setup lang="ts">
 import type { ImageAsset, Reference } from '@sanity/types'
-import { type Ref, resolveImageAssetById } from '#imports'
+import type { Ref } from 'vue'
+import { resolveImageAssetById } from '../utils/resolveImageAssetById'
 
-const { asset, loading = 'lazy' } = defineProps<{ asset?: ImageAsset | Reference, loading?: 'lazy' | 'eager' }>()
-const imageAsset: Ref<ImageAsset | undefined> | ImageAsset | undefined = asset?._ref
+const { asset, loading = 'lazy' } = defineProps<{
+  asset?: ImageAsset | Reference
+  loading?: 'eager' | 'lazy'
+}>()
+const imageAsset: Ref<ImageAsset | null> | ImageAsset | undefined = asset?._ref
   ? await resolveImageAssetById((asset as Reference)._ref)
-  : asset as (ImageAsset | undefined)
+  : (asset as ImageAsset | undefined)
 </script>

package/dist/runtime/components/SanityLinkExternal.vue

@@ -1,7 +1,8 @@
 <template>
   <NuxtLink
     :to="data.url"
-    :options="{ external: true, target: data.newWindow ? '_blank' : null }"
+    :target="data.newWindow ? '_blank' : '_self'"
+    external
   >
     <slot />
   </NuxtLink>

package/dist/runtime/components/SanityLinkInternal.vue

@@ -1,19 +1,17 @@
 <template>
-  <NuxtLink
-    v-if="resolvedLink"
-    :to="resolvedLink.slug"
-  >
+  <NuxtLink :to="resolvedLink?.slug">
     <slot />
   </NuxtLink>
 </template>
 
 <script setup lang="ts">
-import type { LinkInternal } from '@devite/nuxt-sanity'
 import type { Reference } from '@sanity/types'
-import { type Ref, resolveInternalLink } from '#imports'
+import type { LinkInternal } from '@devite/nuxt-sanity'
+import type { Ref } from 'vue'
+import { resolveInternalLink } from '../utils/resolveInternalLink'
 
 const { data } = defineProps<{ data: LinkInternal | { reference: Reference } }>()
-const resolvedLink: Ref<LinkInternal | undefined> | LinkInternal = 'reference' in data
+const resolvedLink: Ref<LinkInternal | null> | LinkInternal = 'reference' in data
   ? await resolveInternalLink(data.reference)
   : data as LinkInternal
 </script>