@xleddyl/nuxt-cms 0.1.40 → 0.1.41

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -9,8 +9,8 @@ import svgLoader from 'vite-svg-loader';
 import { introspectionFromSchema, buildSchema } from 'graphql';
 import { minifyIntrospection, outputIntrospectionFile } from 'gql.tada/internal';
 import { createJiti } from 'jiti';
-import { typeName, blockTypeName, blockUnionName, renderGraphqlSdl } from '../dist/runtime/shared/graphql-sdl.js';
-import { isMultiSelect, fieldConditions, isTranslatableField, isTranslatableMediaField, isRequiredField, isPrivateField, DEFAULT_MEDIA_MAX_FILE_SIZE } from '../dist/runtime/shared/index.js';
+import { typeName, blockTypeName, blocksFieldTypeName, renderGraphqlSdl } from '../dist/runtime/shared/graphql-sdl.js';
+import { isMultiSelect, fieldConditions, isTranslatableField, isTranslatableMediaField, isRequiredField, isPrivateField, mediaTypeFilter, DEFAULT_MEDIA_MAX_FILE_SIZE } from '../dist/runtime/shared/index.js';
 import { scanMediaDirectory, readMediaFileMeta } from '../dist/runtime/server/utils/media-sync.js';
 import { createHash } from 'node:crypto';
 import { readFile } from 'node:fs/promises';
@@ -450,6 +450,10 @@ ${[mediaTableExpr(dialect), ...tables, ...joins].join(
 `;
 }
 
+function mediaTsType(field) {
+  const types = mediaTypeFilter(field.mediaType);
+  return types ? `CmsMedia<${types.map((type) => `'${type}'`).join(" | ")}>` : "CmsMedia";
+}
 function scalarTsType(field) {
   switch (field.type) {
     case "number":
@@ -470,13 +474,13 @@ function fieldTsType(config, entryName, key, field) {
     if (field.cardinality === "many-to-many") return `${target}[]`;
     return isRequiredField(field) && !config[field.to]?.drafts ? target : `${target} | null`;
   }
-  if (field.type === "media") return "CmsMedia | null";
+  if (field.type === "media") return `${mediaTsType(field)} | null`;
   if (field.type === "select" && field.multiple) {
     const union = field.options.map((o) => JSON.stringify(o)).join(" | ");
     return `(${union})[]`;
   }
   if (field.type === "blocks") {
-    const union = blockUnionName(entryName, key);
+    const union = blocksFieldTypeName(entryName, key);
     return isRequiredField(field) ? `${union}[]` : `${union}[] | null`;
   }
   if (isTranslatableField(field)) return isRequiredField(field) ? "string" : "string | null";
@@ -492,7 +496,7 @@ function blockTypesTs(entryName, key, field) {
     const lines = [`  __typename?: '${name}'`, `  type: '${blockName}'`];
     for (const [blockFieldKey, blockField] of Object.entries(block.fields)) {
       if (blockField.type === "media") {
-        lines.push(`  ${blockFieldKey}: CmsMedia | null`);
+        lines.push(`  ${blockFieldKey}: ${mediaTsType(blockField)} | null`);
         continue;
       }
       const base = scalarTsType(blockField);
@@ -503,7 +507,7 @@ ${lines.join("\n")}
 }`);
   }
   if (members.length)
-    defs.push(`export type ${blockUnionName(entryName, key)} = ${members.join(" | ")}`);
+    defs.push(`export type ${blocksFieldTypeName(entryName, key)} = ${members.join(" | ")}`);
   return defs;
 }
 function entryTs(config, name, entry) {
@@ -520,10 +524,11 @@ ${lines.join("\n")}
 }
 function renderTypesFile(config) {
   const parts = [
-    `export interface CmsMedia {
+    `export type CmsMediaType = 'image' | 'video' | 'file'`,
+    `export interface CmsMedia<T extends CmsMediaType = CmsMediaType> {
   key: string
   url: string | null
-  type: 'image' | 'video' | 'file'
+  type: T
   alt: string | null
   folder: string | null
   mime: string | null

package/dist/runtime/app/composables/cms-query-disabled.d.ts

@@ -1,6 +1,11 @@
-import type { AsyncData } from 'nuxt/app';
+import type { AsyncData, AsyncDataOptions } from 'nuxt/app';
 type CmsDisabledResult = Record<string, any>;
 type CmsDisabledVariables = Record<string, any>;
+export interface CmsAsyncDataOptions<ResT, DefaultT> extends Pick<AsyncDataOptions<ResT>, 'server' | 'lazy' | 'immediate' | 'deep' | 'dedupe' | 'watch'> {
+    key?: string;
+    default?: () => DefaultT;
+}
+export declare function cmsQueryKey(query: string, variables?: unknown): string;
 export declare function $cmsQuery<const Q extends string>(query: Q, variables?: CmsDisabledVariables): Promise<CmsDisabledResult>;
-export declare function useCms<const Q extends string>(query: Q, variables?: CmsDisabledVariables): AsyncData<CmsDisabledResult | undefined, Error | undefined>;
+export declare function useCms<const Q extends string, DefaultT = undefined>(query: Q, variables?: CmsDisabledVariables, options?: CmsAsyncDataOptions<CmsDisabledResult, DefaultT>): AsyncData<CmsDisabledResult | DefaultT | undefined, Error | undefined>;
 export {};

package/dist/runtime/app/composables/cms-query-disabled.js

@@ -1,10 +1,14 @@
 import { useAsyncData } from "#imports";
+export function cmsQueryKey(query, variables) {
+  return `cms-gql:${query}:${JSON.stringify(variables ?? {})}`;
+}
 export async function $cmsQuery(query, variables) {
   return {};
 }
-export function useCms(query, variables) {
+export function useCms(query, variables, options = {}) {
+  const { key, default: defaultValue } = options;
   return useAsyncData(
-    `cms-gql:${query}:${JSON.stringify(variables ?? {})}`,
-    async () => null
+    key ?? cmsQueryKey(query, variables),
+    async () => defaultValue ? defaultValue() : null
   );
 }

package/dist/runtime/app/composables/cms-query.d.ts

@@ -1,4 +1,9 @@
 import type { CmsResult, CmsVariables } from '#cms-graphql';
-import type { AsyncData } from 'nuxt/app';
+import type { AsyncData, AsyncDataOptions } from 'nuxt/app';
+export interface CmsAsyncDataOptions<ResT, DefaultT> extends Pick<AsyncDataOptions<ResT>, 'server' | 'lazy' | 'immediate' | 'deep' | 'dedupe' | 'watch'> {
+    key?: string;
+    default?: () => DefaultT;
+}
+export declare function cmsQueryKey(query: string, variables?: unknown): string;
 export declare function $cmsQuery<const Q extends string>(query: Q, variables?: CmsVariables<Q>): Promise<CmsResult<Q>>;
-export declare function useCms<const Q extends string>(query: Q, variables?: CmsVariables<Q>): AsyncData<CmsResult<Q> | undefined, Error | undefined>;
+export declare function useCms<const Q extends string, DefaultT = undefined>(query: Q, variables?: CmsVariables<Q>, options?: CmsAsyncDataOptions<CmsResult<Q>, DefaultT>): AsyncData<CmsResult<Q> | DefaultT | undefined, Error | undefined>;

package/dist/runtime/app/composables/cms-query.js

@@ -1,5 +1,8 @@
 import { useAsyncData } from "#imports";
 const ENDPOINT = "/api/cms/graphql";
+export function cmsQueryKey(query, variables) {
+  return `cms-gql:${query}:${JSON.stringify(variables ?? {})}`;
+}
 export async function $cmsQuery(query, variables) {
   const res = await $fetch(ENDPOINT, {
     method: "POST",
@@ -10,9 +13,11 @@ export async function $cmsQuery(query, variables) {
   }
   return res.data;
 }
-export function useCms(query, variables) {
+export function useCms(query, variables, options = {}) {
+  const { key, ...asyncDataOptions } = options;
   return useAsyncData(
-    `cms-gql:${query}:${JSON.stringify(variables ?? {})}`,
-    () => $cmsQuery(query, variables)
+    key ?? cmsQueryKey(query, variables),
+    () => $cmsQuery(query, variables),
+    asyncDataOptions
   );
 }

package/dist/runtime/server/utils/graphql.js

@@ -30,7 +30,12 @@ import {
   pickTranslatedMedia,
   translatableFieldKeys
 } from "../../shared/index.js";
-import { blockTypeName, blockUnionName, renderGraphqlSdl, typeName } from "../../shared/graphql-sdl.js";
+import {
+  blockTypeName,
+  blocksFieldTypeName,
+  renderGraphqlSdl,
+  typeName
+} from "../../shared/graphql-sdl.js";
 import { useMediaIndex } from "./media-index.js";
 import { getContentI18n, resolveTable, tableColumns } from "./registry.js";
 const MAX_LIMIT = 100;
@@ -285,7 +290,7 @@ function entryResolvers(config, name, entry) {
 }
 function blockResolvers(name, key, field) {
   const resolvers = {};
-  resolvers[blockUnionName(name, key)] = {
+  resolvers[blocksFieldTypeName(name, key)] = {
     __resolveType: (value) => blockTypeName(name, key, String(value.type))
   };
   for (const [blockName, block] of Object.entries(field.blocks ?? {})) {

package/dist/runtime/shared/graphql-sdl.d.ts

@@ -1,5 +1,4 @@
 import type { CmsConfig } from './index.js';
-export declare function typeName(name: string): string;
-export declare function blockUnionName(entryName: string, fieldKey: string): string;
-export declare function blockTypeName(entryName: string, fieldKey: string, blockName: string): string;
+import { blockTypeName, blocksFieldTypeName, typeName } from './index.js';
+export { blockTypeName, blocksFieldTypeName, typeName };
 export declare function renderGraphqlSdl(config: CmsConfig): string;

package/dist/runtime/shared/graphql-sdl.js

@@ -1,13 +1,12 @@
-import { isPrivateField, isRequiredField, isTranslatableField } from "./index.js";
-export function typeName(name) {
-  return name.replace(/(?:^|_)([a-z0-9])/gi, (_, c) => c.toUpperCase());
-}
-export function blockUnionName(entryName, fieldKey) {
-  return `${typeName(entryName)}${typeName(fieldKey)}Block`;
-}
-export function blockTypeName(entryName, fieldKey, blockName) {
-  return `${typeName(entryName)}${typeName(fieldKey)}${typeName(blockName)}`;
-}
+import {
+  blockTypeName,
+  blocksFieldTypeName,
+  isPrivateField,
+  isRequiredField,
+  isTranslatableField,
+  typeName
+} from "./index.js";
+export { blockTypeName, blocksFieldTypeName, typeName };
 function scalarFor(field) {
   switch (field.type) {
     case "number":
@@ -58,7 +57,7 @@ function fieldSdl(config, entryName, key, field) {
   if (field.type === "media") return `  ${key}: CmsMedia`;
   if (field.type === "select" && field.multiple) return `  ${key}: [String!]!`;
   if (field.type === "blocks")
-    return `  ${key}: [${blockUnionName(entryName, key)}!]${isRequiredField(field) ? "!" : ""}`;
+    return `  ${key}: [${blocksFieldTypeName(entryName, key)}!]${isRequiredField(field) ? "!" : ""}`;
   return `  ${key}: ${scalarFor(field)}${isRequiredField(field) ? "!" : ""}`;
 }
 function entrySdl(config, name, entry) {
@@ -73,25 +72,44 @@ function entrySdl(config, name, entry) {
 ${lines.join("\n")}
 }`;
 }
+function blockFieldSdl(field) {
+  if (field.type === "media") return { base: "CmsMedia", nonNull: false };
+  return { base: scalarFor(field), nonNull: !!field.required };
+}
+function sharedBlockFieldsSdl(field) {
+  const blocks = Object.values(field.blocks ?? {});
+  const first = blocks[0];
+  if (!first) return [];
+  const lines = [];
+  for (const key of Object.keys(first.fields)) {
+    const rendered = blocks.map((block) => block.fields[key]);
+    if (rendered.some((blockField) => !blockField)) continue;
+    const types = rendered.map((blockField) => blockFieldSdl(blockField));
+    if (types.some((type) => type.base !== types[0].base)) continue;
+    const nonNull = types.every((type) => type.nonNull);
+    lines.push(`  ${key}: ${types[0].base}${nonNull ? "!" : ""}`);
+  }
+  return lines;
+}
 function blocksSdl(name, key, field) {
-  const defs = [];
-  const members = [];
-  for (const [blockName, block] of Object.entries(field.blocks ?? {})) {
-    const gqlType = blockTypeName(name, key, blockName);
-    members.push(gqlType);
+  const blocks = Object.entries(field.blocks ?? {});
+  if (!blocks.length) return [];
+  const interfaceName = blocksFieldTypeName(name, key);
+  const shared = ["  type: String!", ...sharedBlockFieldsSdl(field)];
+  const defs = [`interface ${interfaceName} {
+${shared.join("\n")}
+}`];
+  for (const [blockName, block] of blocks) {
     const lines = ["  type: String!"];
     for (const [blockFieldKey, blockField] of Object.entries(block.fields)) {
-      if (blockField.type === "media") {
-        lines.push(`  ${blockFieldKey}: CmsMedia`);
-        continue;
-      }
-      lines.push(`  ${blockFieldKey}: ${scalarFor(blockField)}${blockField.required ? "!" : ""}`);
+      const type = blockFieldSdl(blockField);
+      lines.push(`  ${blockFieldKey}: ${type.base}${type.nonNull ? "!" : ""}`);
     }
-    defs.push(`type ${gqlType} {
+    const gqlType = blockTypeName(name, key, blockName);
+    defs.push(`type ${gqlType} implements ${interfaceName} {
 ${lines.join("\n")}
 }`);
   }
-  if (members.length) defs.push(`union ${blockUnionName(name, key)} = ${members.join(" | ")}`);
   return defs;
 }
 function filterSdl(name, entry) {
@@ -119,7 +137,8 @@ const COMMON_SDL = [
   "input FloatFilter {\n  eq: Float\n  neq: Float\n  gt: Float\n  gte: Float\n  lt: Float\n  lte: Float\n  in: [Float!]\n  isNull: Boolean\n}",
   "input StringFilter {\n  eq: String\n  neq: String\n  gt: String\n  gte: String\n  lt: String\n  lte: String\n  like: String\n  in: [String!]\n  isNull: Boolean\n}",
   "input BooleanFilter {\n  eq: Boolean\n  neq: Boolean\n  isNull: Boolean\n}",
-  "type CmsMedia {\n  key: String!\n  url: String\n  type: String!\n  alt: String\n  folder: String\n  mime: String\n  size: Int\n  width: Int\n  height: Int\n}"
+  "enum CmsMediaType {\n  image\n  video\n  file\n}",
+  "type CmsMedia {\n  key: String!\n  url: String\n  type: CmsMediaType!\n  alt: String\n  folder: String\n  mime: String\n  size: Int\n  width: Int\n  height: Int\n}"
 ];
 export function renderGraphqlSdl(config) {
   const queryLines = [];

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

@@ -98,6 +98,9 @@ export interface CmsEntry {
     table?: CmsTable;
 }
 export type CmsConfig = Record<string, CmsEntry>;
+export declare function typeName(name: string): string;
+export declare function blocksFieldTypeName(entryName: string, fieldKey: string): string;
+export declare function blockTypeName(entryName: string, fieldKey: string, blockName: string): string;
 interface FieldInputBase {
     label: string;
     required?: boolean;

package/dist/runtime/shared/index.js

@@ -184,6 +184,15 @@ export function localizeBlocks(field, value, locale, defaultLocale) {
   if (!Array.isArray(value)) return value;
   return value.map((item) => localizeBlock(field, item, locale, defaultLocale));
 }
+export function typeName(name) {
+  return name.replace(/(?:^|_)([a-z0-9])/gi, (_, c) => c.toUpperCase());
+}
+export function blocksFieldTypeName(entryName, fieldKey) {
+  return `${typeName(entryName)}${typeName(fieldKey)}Block`;
+}
+export function blockTypeName(entryName, fieldKey, blockName) {
+  return `${typeName(entryName)}${typeName(fieldKey)}${typeName(blockName)}`;
+}
 export function defineCmsConfig(config) {
   return config;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xleddyl/nuxt-cms",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "description": "Lightweight CMS that ships with your Nuxt app: runs on the Nitro server, content types defined in code, /cms admin panel, GraphQL API, SQLite or Postgres. No external CMS needed!",
   "license": "MIT",
   "author": "Edoardo Alberti (https://github.com/xleddyl)",