nuxt-openapi-hyperfetch 0.3.0-beta → 0.3.1-beta

package/dist/generators/components/connector-generator/generator.js

@@ -7,6 +7,7 @@ import { generateConnectorFile, connectorFileName, generateConnectorIndexFile, }
 import { createClackLogger } from '../../../cli/logger.js';
 // Runtime files that must be copied to the user's project
 const RUNTIME_FILES = [
+    'connector-types.ts',
     'useListConnector.ts',
     'useDetailConnector.ts',
     'useFormConnector.ts',

package/dist/generators/components/connector-generator/templates.d.ts

@@ -6,7 +6,7 @@ import type { ResourceInfo } from '../schema-analyzer/types.js';
  * @param composablesRelDir  Relative path from the connector dir to the
  *                           useAsyncData composables dir (e.g. '../use-async-data')
  */
-export declare function generateConnectorFile(resource: ResourceInfo, composablesRelDir: string): string;
+export declare function generateConnectorFile(resource: ResourceInfo, composablesRelDir: string, sdkRelDir?: string): string;
 /**
  * Derive the output filename for a connector.
  * 'usePetsConnector' → 'use-pets-connector.ts'

package/dist/generators/components/connector-generator/templates.js

@@ -12,7 +12,6 @@ function generateFileHeader() {
  */
 
 /* eslint-disable */
-// @ts-nocheck
 `;
 }
 // ─── Naming helpers ───────────────────────────────────────────────────────────
@@ -34,16 +33,33 @@ function toFileName(composableName) {
 /**
  * Build all `import` lines for a resource connector.
  */
-function buildImports(resource, composablesRelDir) {
+function buildImports(resource, composablesRelDir, sdkRelDir) {
     const lines = [];
     // zod
     lines.push(`import { z } from 'zod';`);
     lines.push('');
-    // runtime helpers (Nuxt alias — set up by the Nuxt module)
-    const runtimeHelpers = [];
+    // connector-types — structural interfaces for return types
+    const connectorTypeImports = ['ListConnectorReturn'];
+    if (resource.detailEndpoint) {
+        connectorTypeImports.push('DetailConnectorReturn');
+    }
+    if (resource.createEndpoint || resource.updateEndpoint) {
+        connectorTypeImports.push('FormConnectorReturn');
+    }
+    if (resource.deleteEndpoint) {
+        connectorTypeImports.push('DeleteConnectorReturn');
+    }
+    lines.push(`import type { ${connectorTypeImports.join(', ')} } from '#nxh/runtime/connector-types';`);
+    lines.push('');
+    // SDK request/response types (for the params overload signature)
     if (resource.listEndpoint) {
-        runtimeHelpers.push('useListConnector');
+        const requestTypeName = `${pascalCase(resource.listEndpoint.operationId)}Request`;
+        lines.push(`import type { ${requestTypeName} } from '${sdkRelDir}';`);
+        lines.push('');
     }
+    // runtime helpers (Nuxt alias — set up by the Nuxt module)
+    // useListConnector is always imported to support the optional factory pattern
+    const runtimeHelpers = ['useListConnector'];
     if (resource.detailEndpoint) {
         runtimeHelpers.push('useDetailConnector');
     }
@@ -121,6 +137,61 @@ function buildColumns(resource) {
         .join(',\n');
     return `const ${varName} = [\n${entries},\n];`;
 }
+/**
+ * Build the TypeScript options interface for a connector.
+ * Only includes fields relevant to the endpoints present on the resource.
+ */
+function buildOptionsInterface(resource) {
+    const typeName = `${pascalCase(resource.composableName)}Options`;
+    const hasColumns = resource.columns && resource.columns.length > 0;
+    const fields = [];
+    if (resource.listEndpoint && hasColumns) {
+        fields.push(`  columnLabels?: Record<string, string>;`);
+        fields.push(`  columnLabel?: (key: string) => string;`);
+    }
+    if (resource.createEndpoint && resource.zodSchemas.create) {
+        fields.push(`  createSchema?: z.ZodTypeAny | ((base: z.ZodTypeAny) => z.ZodTypeAny);`);
+    }
+    if (resource.updateEndpoint && resource.zodSchemas.update) {
+        fields.push(`  updateSchema?: z.ZodTypeAny | ((base: z.ZodTypeAny) => z.ZodTypeAny);`);
+    }
+    if (fields.length === 0) {
+        return `type ${typeName} = Record<string, never>;`;
+    }
+    return [`interface ${typeName} {`, ...fields, `}`].join('\n');
+}
+/**
+ * Build the TypeScript return type for a connector.
+ */
+function buildReturnType(resource) {
+    const pascal = pascalCase(resource.name);
+    const typeName = `${pascalCase(resource.composableName)}Return`;
+    const fields = [];
+    // table is always present in the return type:
+    //   - if listEndpoint exists → ListConnectorReturn<T> (always defined)
+    //   - if no listEndpoint      → ListConnectorReturn<unknown> | undefined (only when factory passed)
+    if (resource.listEndpoint) {
+        fields.push(`  table: ListConnectorReturn<${pascal}>;`);
+    }
+    else {
+        fields.push(`  table: ListConnectorReturn<unknown> | undefined;`);
+    }
+    if (resource.detailEndpoint) {
+        fields.push(`  detail: DetailConnectorReturn<${pascal}>;`);
+    }
+    if (resource.createEndpoint) {
+        const inputType = resource.zodSchemas.create ? `${pascal}CreateInput` : `Record<string, unknown>`;
+        fields.push(`  createForm: FormConnectorReturn<${inputType}>;`);
+    }
+    if (resource.updateEndpoint) {
+        const inputType = resource.zodSchemas.update ? `${pascal}UpdateInput` : `Record<string, unknown>`;
+        fields.push(`  updateForm: FormConnectorReturn<${inputType}>;`);
+    }
+    if (resource.deleteEndpoint) {
+        fields.push(`  deleteAction: DeleteConnectorReturn<${pascal}>;`);
+    }
+    return [`type ${typeName} = {`, ...fields, `};`].join('\n');
+}
 /**
  * Build the body of the exported connector function.
  */
@@ -133,6 +204,9 @@ function buildFunctionBody(resource) {
         .replace(/^./, (c) => c.toLowerCase());
     const columnsVar = `${camel}Columns`;
     const subConnectors = [];
+    // Derived type names — must match buildOptionsInterface / buildReturnType
+    const optionsTypeName = `${pascalCase(resource.composableName)}Options`;
+    const returnTypeName = `${pascalCase(resource.composableName)}Return`;
     // Destructure options param — only what's relevant for this resource
     const optionKeys = [];
     if (resource.listEndpoint && hasColumns) {
@@ -145,63 +219,57 @@ function buildFunctionBody(resource) {
         optionKeys.push('updateSchema');
     }
     const optionsDestructure = optionKeys.length > 0 ? `  const { ${optionKeys.join(', ')} } = options;\n` : '';
+    // ── List / table sub-connector ─────────────────────────────────────────────
     if (resource.listEndpoint) {
         const fn = toAsyncDataName(resource.listEndpoint.operationId);
-        // paginated: true tells useListConnector to expose pagination helpers
-        // (goToPage, nextPage, prevPage, setPerPage, pagination ref).
-        // We set it whenever the spec declares a list endpoint that has a response schema,
-        // which is a reliable proxy for "this API returns structured data worth paginating".
+        const listRequestTypeName = `${pascalCase(resource.listEndpoint.operationId)}Request`;
         const paginatedFlag = resource.listEndpoint.responseSchema ? 'paginated: true' : '';
         const columnsArg = hasColumns ? `columns: ${columnsVar}` : '';
         const labelArgs = hasColumns ? 'columnLabels, columnLabel' : '';
         const allArgs = [paginatedFlag, columnsArg, labelArgs].filter(Boolean).join(', ');
         const opts = allArgs ? `{ ${allArgs} }` : '{}';
-        subConnectors.push(`  const table = useListConnector(${fn}, ${opts});`);
+        // Factory: if the first arg is a function the user provided their own composable;
+        // otherwise build a default factory from the plain params object.
+        subConnectors.push(`  const isFactory = typeof paramsOrSource === 'function';`, `  const listFactory = isFactory`, `    ? (paramsOrSource as () => unknown)`, `    : () => ${fn}((paramsOrSource ?? {}) as ${listRequestTypeName});`, `  const table = useListConnector(listFactory, ${opts}) as unknown as ListConnectorReturn<${pascal}>;`);
+    }
+    else {
+        // No list endpoint — support optional factory for developer-provided list
+        subConnectors.push(`  const table = paramsOrSource`, `    ? (useListConnector(paramsOrSource as () => unknown, {}) as unknown as ListConnectorReturn<unknown>)`, `    : undefined;`);
     }
     if (resource.detailEndpoint) {
         const fn = toAsyncDataName(resource.detailEndpoint.operationId);
-        subConnectors.push(`  const detail = useDetailConnector(${fn});`);
+        subConnectors.push(`  const detail = useDetailConnector(${fn}) as unknown as DetailConnectorReturn<${pascal}>;`);
     }
     if (resource.createEndpoint) {
         const fn = toAsyncDataName(resource.createEndpoint.operationId);
+        const inputType = resource.zodSchemas.create ? `${pascal}CreateInput` : `Record<string, unknown>`;
         const schemaArg = resource.zodSchemas.create
             ? `{ schema: ${pascal}CreateSchema, schemaOverride: createSchema }`
             : '{}';
-        subConnectors.push(`  const createForm = useFormConnector(${fn}, ${schemaArg});`);
+        subConnectors.push(`  const createForm = useFormConnector(${fn}, ${schemaArg}) as unknown as FormConnectorReturn<${inputType}>;`);
     }
     if (resource.updateEndpoint) {
         const fn = toAsyncDataName(resource.updateEndpoint.operationId);
         const hasDetail = !!resource.detailEndpoint;
-        // Build the options argument for useFormConnector:
-        //   schema      → Zod schema for client-side validation before submission
-        //   loadWith    → reference to the detail connector so the form auto-fills
-        //                 when detail.item changes (user clicks "Edit" on a row)
-        //
-        // Four combinations are possible depending on what the spec provides:
+        const inputType = resource.zodSchemas.update ? `${pascal}UpdateInput` : `Record<string, unknown>`;
         let schemaArg = '{}';
         if (resource.zodSchemas.update && hasDetail) {
-            // Best case: validate AND pre-fill from detail
             schemaArg = `{ schema: ${pascal}UpdateSchema, schemaOverride: updateSchema, loadWith: detail }`;
         }
         else if (resource.zodSchemas.update) {
-            // Validate, but no detail endpoint to pre-fill from
             schemaArg = `{ schema: ${pascal}UpdateSchema, schemaOverride: updateSchema }`;
         }
         else if (hasDetail) {
-            // No Zod schema (no request body in spec), but still pre-fill from detail
             schemaArg = `{ loadWith: detail }`;
         }
-        subConnectors.push(`  const updateForm = useFormConnector(${fn}, ${schemaArg});`);
+        subConnectors.push(`  const updateForm = useFormConnector(${fn}, ${schemaArg}) as unknown as FormConnectorReturn<${inputType}>;`);
     }
     if (resource.deleteEndpoint) {
         const fn = toAsyncDataName(resource.deleteEndpoint.operationId);
-        subConnectors.push(`  const deleteAction = useDeleteConnector(${fn});`);
-    }
-    // Return object — only include what was built
-    const returnKeys = [];
-    if (resource.listEndpoint) {
-        returnKeys.push('table');
+        subConnectors.push(`  const deleteAction = useDeleteConnector(${fn}) as unknown as DeleteConnectorReturn<${pascal}>;`);
     }
+    // Return object — always includes table (undefined when no list + no factory)
+    const returnKeys = ['table'];
     if (resource.detailEndpoint) {
         returnKeys.push('detail');
     }
@@ -214,16 +282,27 @@ function buildFunctionBody(resource) {
     if (resource.deleteEndpoint) {
         returnKeys.push('deleteAction');
     }
-    const returnStatement = `  return { ${returnKeys.join(', ')} };`;
-    return [
-        `export function ${resource.composableName}(options = {}) {`,
-        optionsDestructure.trimEnd(),
-        ...subConnectors,
-        returnStatement,
-        `}`,
-    ]
-        .filter((s) => s !== '')
-        .join('\n');
+    const returnStatement = `  return { ${returnKeys.join(', ')} } as ${returnTypeName};`;
+    // ── Function signature ─────────────────────────────────────────────────────
+    // Resources WITH a list endpoint: two overloads (factory | params).
+    // Resources WITHOUT a list endpoint: single signature with optional factory.
+    const lines = [];
+    if (resource.listEndpoint) {
+        const listRequestTypeName = `${pascalCase(resource.listEndpoint.operationId)}Request`;
+        lines.push(`export function ${resource.composableName}(source: () => unknown, options?: ${optionsTypeName}): ${returnTypeName};`, `export function ${resource.composableName}(params?: ${listRequestTypeName}, options?: ${optionsTypeName}): ${returnTypeName};`, `export function ${resource.composableName}(paramsOrSource?: ${listRequestTypeName} | (() => unknown), options: ${optionsTypeName} = {}): ${returnTypeName} {`);
+    }
+    else {
+        lines.push(`export function ${resource.composableName}(source?: () => unknown, options: ${optionsTypeName} = {}): ${returnTypeName} {`);
+        // Alias so the body can use paramsOrSource uniformly
+        lines.push(`  const paramsOrSource = source;`);
+    }
+    if (optionsDestructure.trim()) {
+        lines.push(optionsDestructure.trimEnd());
+    }
+    lines.push(...subConnectors);
+    lines.push(returnStatement);
+    lines.push(`}`);
+    return lines.join('\n');
 }
 // ─── Public API ───────────────────────────────────────────────────────────────
 /**
@@ -233,15 +312,16 @@ function buildFunctionBody(resource) {
  * @param composablesRelDir  Relative path from the connector dir to the
  *                           useAsyncData composables dir (e.g. '../use-async-data')
  */
-export function generateConnectorFile(resource, composablesRelDir) {
+export function generateConnectorFile(resource, composablesRelDir, sdkRelDir = '../..') {
     const header = generateFileHeader();
-    const imports = buildImports(resource, composablesRelDir);
+    const imports = buildImports(resource, composablesRelDir, sdkRelDir);
     const schemas = buildZodSchemas(resource);
     const columns = buildColumns(resource);
+    const optionsInterface = buildOptionsInterface(resource);
+    const returnType = buildReturnType(resource);
     const fn = buildFunctionBody(resource);
-    // Assemble file: header + imports + (optional) Zod blocks + columns const + function body.
-    // Each section ends with its own trailing newline; join with \n adds one blank
-    // line between sections, which matches Prettier's output for this structure.
+    // Assemble file: header + imports + (optional) Zod blocks + columns const +
+    // options interface + return type + function body.
     const parts = [header, imports];
     if (schemas.trim()) {
         parts.push(schemas);
@@ -249,6 +329,8 @@ export function generateConnectorFile(resource, composablesRelDir) {
     if (columns.trim()) {
         parts.push(columns);
     }
+    parts.push(optionsInterface);
+    parts.push(returnType);
     parts.push(fn);
     return parts.join('\n') + '\n';
 }

package/dist/generators/shared/runtime/connector-types.d.ts

@@ -0,0 +1,104 @@
+/**
+ * connector-types.ts — Structural return type interfaces for the 4 runtime connectors.
+ *
+ * Uses locally-defined minimal type aliases for Ref/ComputedRef/ShallowRef so this
+ * file compiles in the CLI context (where Vue is not installed) and remains
+ * structurally compatible with Vue's actual types in the user's Nuxt project.
+ *
+ * Copied to the user's project alongside the generated connectors and runtime helpers.
+ */
+type Ref<T> = {
+    value: T;
+};
+type ShallowRef<T> = {
+    value: T;
+};
+type ComputedRef<T> = {
+    readonly value: T;
+};
+export interface ColumnDef {
+    key: string;
+    label: string;
+    type: string;
+}
+export interface FormFieldDef {
+    key: string;
+    label: string;
+    type: string;
+    required: boolean;
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    placeholder?: string;
+    hidden?: boolean;
+}
+export interface PaginationState {
+    page: number;
+    perPage: number;
+    total: number;
+    totalPages: number;
+    goToPage: (page: number) => void;
+    nextPage: () => void;
+    prevPage: () => void;
+    setPerPage: (n: number) => void;
+}
+export interface ListConnectorReturn<TRow = unknown> {
+    rows: ComputedRef<TRow[]>;
+    columns: ComputedRef<ColumnDef[]>;
+    loading: ComputedRef<boolean>;
+    error: ComputedRef<unknown>;
+    pagination: ComputedRef<PaginationState | null>;
+    goToPage: (page: number) => void;
+    nextPage: () => void;
+    prevPage: () => void;
+    setPerPage: (n: number) => void;
+    selected: Ref<TRow[]>;
+    onRowSelect: (row: TRow) => void;
+    clearSelection: () => void;
+    refresh: () => void;
+    create: () => void;
+    update: (row: TRow) => void;
+    remove: (row: TRow) => void;
+    _createTrigger: Ref<number>;
+    _updateTarget: ShallowRef<TRow | null>;
+    _deleteTarget: ShallowRef<TRow | null>;
+}
+export interface DetailConnectorReturn<TItem = unknown> {
+    item: ComputedRef<TItem | null>;
+    loading: ComputedRef<boolean>;
+    error: ComputedRef<unknown>;
+    fields: ComputedRef<FormFieldDef[]>;
+    load: (id: string | number) => Promise<void>;
+    clear: () => void;
+    _composable: unknown;
+    _currentId: Ref<string | number | null>;
+}
+export interface FormConnectorReturn<TInput = Record<string, unknown>> {
+    model: Ref<Partial<TInput>>;
+    errors: Ref<Record<string, string[]>>;
+    loading: Ref<boolean>;
+    submitError: Ref<unknown>;
+    submitted: Ref<boolean>;
+    isValid: ComputedRef<boolean>;
+    hasErrors: ComputedRef<boolean>;
+    fields: ComputedRef<FormFieldDef[]>;
+    onSuccess: Ref<((data: unknown) => void) | null>;
+    onError: Ref<((err: unknown) => void) | null>;
+    submit: () => Promise<void>;
+    reset: () => void;
+    setValues: (data: Partial<TInput>) => void;
+}
+export interface DeleteConnectorReturn<TItem = unknown> {
+    target: Ref<TItem | null>;
+    isOpen: Ref<boolean>;
+    loading: Ref<boolean>;
+    error: Ref<unknown>;
+    hasTarget: ComputedRef<boolean>;
+    onSuccess: Ref<((item: TItem) => void) | null>;
+    onError: Ref<((err: unknown) => void) | null>;
+    setTarget: (item: TItem) => void;
+    cancel: () => void;
+    confirm: () => Promise<void>;
+}
+export {};

package/dist/generators/shared/runtime/connector-types.js

@@ -0,0 +1,10 @@
+/**
+ * connector-types.ts — Structural return type interfaces for the 4 runtime connectors.
+ *
+ * Uses locally-defined minimal type aliases for Ref/ComputedRef/ShallowRef so this
+ * file compiles in the CLI context (where Vue is not installed) and remains
+ * structurally compatible with Vue's actual types in the user's Nuxt project.
+ *
+ * Copied to the user's project alongside the generated connectors and runtime helpers.
+ */
+export {};

package/dist/generators/shared/runtime/useListConnector.d.ts

@@ -1,8 +1,10 @@
 /**
- * @param composableFn  The generated useAsyncData composable, e.g. useAsyncDataGetPets
- * @param options       Configuration for the list connector
+ * @param factory   A zero-argument function that calls and returns the underlying
+ *                  useAsyncData composable, e.g. () => useAsyncDataGetPets(params)
+ *                  The factory is called once during connector setup (inside setup()).
+ * @param options   Configuration for the list connector
  */
-export declare function useListConnector(composableFn: any, options?: {}): {
+export declare function useListConnector(factory: any, options?: {}): {
     rows: any;
     columns: any;
     loading: any;

package/dist/generators/shared/runtime/useListConnector.js

@@ -12,13 +12,15 @@
  */
 import { ref, computed, shallowRef } from 'vue';
 /**
- * @param composableFn  The generated useAsyncData composable, e.g. useAsyncDataGetPets
- * @param options       Configuration for the list connector
+ * @param factory   A zero-argument function that calls and returns the underlying
+ *                  useAsyncData composable, e.g. () => useAsyncDataGetPets(params)
+ *                  The factory is called once during connector setup (inside setup()).
+ * @param options   Configuration for the list connector
  */
-export function useListConnector(composableFn, options = {}) {
+export function useListConnector(factory, options = {}) {
     const { paginated = false, columns = [], columnLabels = {}, columnLabel = null } = options;
     // ── Execute the underlying composable ──────────────────────────────────────
-    const composable = composableFn({ paginated });
+    const composable = factory();
     // ── Derived state ──────────────────────────────────────────────────────────
     const rows = computed(() => {
         const data = composable.data?.value;

package/dist/generators/use-async-data/runtime/useApiAsyncData.d.ts

@@ -1,12 +1,17 @@
 import type { UseFetchOptions } from '#app';
 import { type ApiRequestOptions as BaseApiRequestOptions } from '../../shared/runtime/apiHelpers.js';
+type PickInput = ReadonlyArray<string> | undefined;
+type HasNestedPath<K extends ReadonlyArray<string>> = Extract<K[number], `${string}.${string}`> extends never ? false : true;
+type PickedData<T, K extends PickInput> = K extends ReadonlyArray<string> ? HasNestedPath<K> extends true ? any : Pick<T, Extract<K[number], keyof T>> : T;
 /**
  * Options for useAsyncData API requests with lifecycle callbacks.
  * Extends all native Nuxt useFetch options plus our custom callbacks, transform, and pick.
  * Native options like baseURL, method, body, headers, query, lazy, server, immediate, dedupe, etc. are all available.
  * watch: boolean (true = auto-watch reactive params, false = disable auto-refresh)
  */
-export type ApiAsyncDataOptions<T> = BaseApiRequestOptions<T> & Omit<UseFetchOptions<T>, 'transform' | 'pick' | 'watch'> & {
+export type ApiAsyncDataOptions<T, DataT = T, PickT extends PickInput = undefined> = Omit<BaseApiRequestOptions<T>, 'transform' | 'pick'> & Omit<UseFetchOptions<T, DataT>, 'transform' | 'pick' | 'watch'> & {
+    pick?: PickT;
+    transform?: (data: PickedData<T, PickT>) => DataT;
     /**
      * Enable automatic refresh when reactive params/url change (default: true).
      * Set to false to disable auto-refresh entirely.
@@ -22,4 +27,5 @@ export type ApiAsyncDataOptions<T> = BaseApiRequestOptions<T> & Omit<UseFetchOpt
  * - Global headers from useApiHeaders or $getApiHeaders
  * - Watch pattern for reactive parameters
  */
-export declare function useApiAsyncData<T>(key: string, url: string | (() => string), options?: ApiAsyncDataOptions<T>): any;
+export declare function useApiAsyncData<T, Options extends ApiAsyncDataOptions<T, any, any> = ApiAsyncDataOptions<T>>(key: string, url: string | (() => string), options?: Options): any;
+export {};

package/dist/generators/use-async-data/runtime/useApiAsyncDataRaw.d.ts

@@ -10,16 +10,21 @@ export interface RawResponse<T> {
     status: number;
     statusText: string;
 }
+type PickInput = ReadonlyArray<string> | undefined;
+type HasNestedPath<K extends ReadonlyArray<string>> = Extract<K[number], `${string}.${string}`> extends never ? false : true;
+type PickedData<T, K extends PickInput> = K extends ReadonlyArray<string> ? HasNestedPath<K> extends true ? any : Pick<T, Extract<K[number], keyof T>> : T;
 /**
  * Options for useAsyncData Raw API requests.
  * Extends all native Nuxt useFetch options plus our custom callbacks, transform, and pick.
  * onSuccess receives data AND the full response (headers, status, statusText).
  */
-export type ApiAsyncDataRawOptions<T> = Omit<BaseApiRequestOptions<T>, 'onSuccess'> & Omit<UseFetchOptions<T>, 'transform' | 'pick' | 'onSuccess'> & {
+export type ApiAsyncDataRawOptions<T, DataT = T, PickT extends PickInput = undefined> = Omit<BaseApiRequestOptions<T>, 'onSuccess' | 'transform' | 'pick'> & Omit<UseFetchOptions<T, DataT>, 'transform' | 'pick' | 'onSuccess'> & {
+    pick?: PickT;
+    transform?: (data: PickedData<T, PickT>) => DataT;
     /**
      * Called when the request succeeds — receives both data and the full response object.
      */
-    onSuccess?: (data: T, response: {
+    onSuccess?: (data: DataT, response: {
         headers: Headers;
         status: number;
         statusText: string;
@@ -38,4 +43,5 @@ export type ApiAsyncDataRawOptions<T> = Omit<BaseApiRequestOptions<T>, 'onSucces
  * - Global headers from useApiHeaders or $getApiHeaders
  * - Watch pattern for reactive parameters
  */
-export declare function useApiAsyncDataRaw<T>(key: string, url: string | (() => string), options?: ApiAsyncDataRawOptions<T>): any;
+export declare function useApiAsyncDataRaw<T, DataT = T, PickT extends PickInput = undefined, Options extends ApiAsyncDataRawOptions<T, DataT, PickT> = ApiAsyncDataRawOptions<T, DataT, PickT>>(key: string, url: string | (() => string), options?: Options): any;
+export {};

package/dist/generators/use-async-data/templates.js

@@ -98,14 +98,16 @@ function generateImports(method, apiImportPath, isRaw) {
 function generateFunctionBody(method, isRaw, generateOptions) {
     const hasParams = !!method.requestType;
     const paramsArg = hasParams ? `params: ${method.requestType}` : '';
+    const responseType = method.responseType !== 'void' ? method.responseType : 'void';
     // Determine the options type based on isRaw
     const optionsType = isRaw
-        ? `ApiAsyncDataRawOptions<${method.responseType}>`
-        : `ApiAsyncDataOptions<${method.responseType}>`;
-    const optionsArg = `options?: ${optionsType}`;
+        ? `ApiAsyncDataRawOptions<${responseType}, DataT, PickT>`
+        : `ApiAsyncDataOptions<${responseType}, DataT, PickT>`;
+    const optionsDefaultType = isRaw
+        ? `ApiAsyncDataRawOptions<${responseType}, DataT, PickT>`
+        : `ApiAsyncDataOptions<${responseType}, DataT, PickT>`;
+    const optionsArg = `options?: Options`;
     const args = hasParams ? `${paramsArg}, ${optionsArg}` : optionsArg;
-    // Determine the response type generic
-    const responseTypeGeneric = method.responseType !== 'void' ? `<${method.responseType}>` : '';
     // Generate unique key for useAsyncData
     const composableName = isRaw && method.rawMethodName
         ? `useAsyncData${method.rawMethodName.replace(/Raw$/, '')}Raw`
@@ -116,15 +118,29 @@ function generateFunctionBody(method, isRaw, generateOptions) {
     const description = method.description ? `/**\n * ${method.description}\n */\n` : '';
     // Choose the correct wrapper function
     const wrapperFunction = isRaw ? 'useApiAsyncDataRaw' : 'useApiAsyncData';
+    const wrapperCall = isRaw
+        ? `${wrapperFunction}<${responseType}, DataT, PickT, Options>`
+        : `${wrapperFunction}<${responseType}, Options>`;
+    const returnType = isRaw
+        ? `ReturnType<typeof ${wrapperFunction}<${responseType}, DataT, PickT, Options>>`
+        : `ReturnType<typeof ${wrapperFunction}<${responseType}, Options>>`;
     const pInit = hasParams ? `\n  const p = shallowRef(params)` : '';
     const argsExtraction = hasParams
         ? `  const _hasKey = typeof args[0] === 'string'\n  const params = _hasKey ? args[1] : args[0]\n  const options = _hasKey ? { cacheKey: args[0], ...args[2] } : args[1]`
         : `  const _hasKey = typeof args[0] === 'string'\n  const options = _hasKey ? { cacheKey: args[0], ...args[1] } : args[0]`;
-    return `${description}export function ${composableName}(key: string, ${args})
-export function ${composableName}(${args})
+    return `${description}export function ${composableName}<
+  DataT = ${responseType},
+  PickT extends ReadonlyArray<string> | undefined = undefined,
+  Options extends ${optionsType} = ${optionsDefaultType}
+>(key: string, ${args}): ${returnType}
+export function ${composableName}<
+  DataT = ${responseType},
+  PickT extends ReadonlyArray<string> | undefined = undefined,
+  Options extends ${optionsType} = ${optionsDefaultType}
+>(${args}): ${returnType}
 export function ${composableName}(...args: any[]) {
 ${argsExtraction}${pInit}
-  return ${wrapperFunction}${responseTypeGeneric}(${key}, ${url}, ${fetchOptions})
+  return ${wrapperCall}(${key}, ${url}, ${fetchOptions})
 }`;
 }
 /**

package/dist/generators/use-fetch/runtime/useApiRequest.d.ts

@@ -1,11 +1,17 @@
 import type { UseFetchOptions } from '#app';
 import { type ApiRequestOptions as BaseApiRequestOptions } from '../../shared/runtime/apiHelpers.js';
+type PickInput = ReadonlyArray<string> | undefined;
+type HasNestedPath<K extends ReadonlyArray<string>> = Extract<K[number], `${string}.${string}`> extends never ? false : true;
+type PickedData<T, K extends PickInput> = K extends ReadonlyArray<string> ? HasNestedPath<K> extends true ? any : Pick<T, Extract<K[number], keyof T>> : T;
 /**
  * Options for useFetch API requests with lifecycle callbacks.
  * Extends all native Nuxt useFetch options plus our custom callbacks, transform, and pick.
  * Native options like baseURL, method, body, headers, query, lazy, server, immediate, etc. are all available.
  */
-export type ApiRequestOptions<T = any> = BaseApiRequestOptions<T> & Omit<UseFetchOptions<T>, 'transform' | 'pick'>;
+export type ApiRequestOptions<T = any, DataT = T, PickT extends PickInput = undefined> = Omit<BaseApiRequestOptions<T>, 'transform' | 'pick'> & Omit<UseFetchOptions<T, DataT>, 'transform' | 'pick'> & {
+    pick?: PickT;
+    transform?: (data: PickedData<T, PickT>) => DataT;
+};
 /**
  * Enhanced useFetch wrapper with lifecycle callbacks and request interception
  *
@@ -42,4 +48,5 @@ export type ApiRequestOptions<T = any> = BaseApiRequestOptions<T> & Omit<UseFetc
  * });
  * ```
  */
-export declare function useApiRequest<T = any, Options extends ApiRequestOptions<T> = ApiRequestOptions<T>>(url: string | (() => string), options?: Options): any;
+export declare function useApiRequest<T = any, Options extends ApiRequestOptions<T, any, any> = ApiRequestOptions<T>>(url: string | (() => string), options?: Options): any;
+export {};

package/dist/generators/use-fetch/templates.js

@@ -87,16 +87,20 @@ function generateImports(method, apiImportPath) {
 function generateFunctionBody(method, options) {
     const hasParams = !!method.requestType;
     const paramsArg = hasParams ? `params: ${method.requestType}` : '';
-    const optionsType = `ApiRequestOptions<${method.responseType}>`;
-    const optionsArg = `options?: ${optionsType}`;
+    const responseType = method.responseType !== 'void' ? method.responseType : 'void';
+    const optionsType = `ApiRequestOptions<${responseType}, DataT, PickT>`;
+    const optionsArg = `options?: Options`;
     const args = hasParams ? `${paramsArg}, ${optionsArg}` : optionsArg;
-    const responseTypeGeneric = method.responseType !== 'void' ? `<${method.responseType}>` : '';
     const url = generateUrl(method);
     const fetchOptions = generateFetchOptions(method, options);
     const description = method.description ? `/**\n * ${method.description}\n */\n` : '';
     const pInit = hasParams ? `\n  const p = shallowRef(params)` : '';
-    return `${description}export const ${method.composableName} = (${args}) => {${pInit}
-  return useApiRequest${responseTypeGeneric}(${url}, ${fetchOptions})
+    return `${description}export const ${method.composableName} = <
+  DataT = ${responseType},
+  PickT extends ReadonlyArray<string> | undefined = undefined,
+  Options extends ${optionsType} = ApiRequestOptions<${responseType}, DataT, PickT>
+>(${args}) => {${pInit}
+  return useApiRequest<${responseType}, Options>(${url}, ${fetchOptions})
 }`;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-openapi-hyperfetch",
-  "version": "0.3.0-beta",
+  "version": "0.3.1-beta",
   "description": "Nuxt useFetch, useAsyncData and Nuxt server OpenAPI generator",
   "type": "module",
   "author": "",

package/src/generators/components/connector-generator/generator.ts

@@ -13,6 +13,7 @@ import { type Logger, createClackLogger } from '../../../cli/logger.js';
 
 // Runtime files that must be copied to the user's project
 const RUNTIME_FILES = [
+  'connector-types.ts',
   'useListConnector.ts',
   'useDetailConnector.ts',
   'useFormConnector.ts',