@toktokhan-dev/cli-plugin-gen-api-react-query 0.0.1

package/templates/custom-axios/procedure-call.eta

@@ -0,0 +1,133 @@
+<%
+const { utils, route, config } = it;
+const { requestBodyInfo, responseBodyInfo, specificArgNameResolver } = route;
+const { _, getInlineParseContent, getParseContent, parseSchema, getComponentByRef, require } = utils;
+const { parameters, path, method, payload, query, formData, security, requestParams } = route.request;
+const { type, errorType, contentTypes } = route.response;
+const { HTTP_CLIENT, RESERVED_REQ_PARAMS_ARG_NAMES } = config.constants;
+const routeDocs = includeFile("@base/route-docs", { config, route, utils });
+const queryName = (query && query.name) || "query";
+const pathParams = _.values(parameters);
+const pathParamsNames = _.map(pathParams, "name");
+
+
+const isFetchTemplate = config.httpClientType === HTTP_CLIENT.FETCH;
+
+const requestConfigParam = {
+    name: specificArgNameResolver.resolve(RESERVED_REQ_PARAMS_ARG_NAMES),
+    optional: true,
+    type: "RequestParams",
+    defaultValue: "{}",
+}
+const argToTmpl = ({ name, optional, type, defaultValue }) => {
+    return `${name}${optional ? '?' : ''}: ${name === "data" ? `DeepOmitReadOnly<${type}>` :type}`;
+}
+
+
+const rawWrapperArgs = config.extractRequestParams ?
+    _.compact([
+        requestParams && {
+          name: pathParams.length ? `{ ${_.join(pathParamsNames, ", ")}, ...${queryName} }` : queryName,
+          optional: false,
+          type: getInlineParseContent(requestParams),
+        },
+        ...(!requestParams ? pathParams : []),
+        payload,
+        requestConfigParam,
+    ]) :
+    _.compact([
+        ...pathParams,
+        query,
+        payload,
+        requestConfigParam,
+    ])
+
+const wrapperArgs = _
+    // Sort by optionality
+    .sortBy(rawWrapperArgs, [o => o.optional])
+    .map(argToTmpl)
+    .join('; ');
+
+const isOptialnalVariabels  = _
+// Find optional value
+.filter(rawWrapperArgs, o => o.optional).length === rawWrapperArgs.length;
+
+const conditionalVriablesText = isOptialnalVariabels? "variables?" : "variables";
+const repalceTarget = "${" + conditionalVriablesText + ".";
+const pathWithVariables = path.replace(/\$\{/g, repalceTarget);
+    
+
+
+// RequestParams["type"]
+const requestContentKind = {
+    "JSON": "ContentType.Json",
+    "URL_ENCODED": "ContentType.UrlEncoded",
+    "FORM_DATA": "ContentType.FormData",
+    "TEXT": "ContentType.Text",
+}
+// RequestParams["format"]
+const responseContentKind = {
+    "JSON": '"json"',
+    "IMAGE": '"blob"',
+    "FORM_DATA": isFetchTemplate ? '"formData"' : '"document"'
+}
+
+const explodedParams = (properties) => {
+    return Object.keys(properties).filter((key) => {
+        const item = properties[key]
+        return item.type === "array" && item.explode === true
+    })
+}
+
+const bodyTmpl = _.get(payload, "name") || null;
+const queryTmpl = (query != null && queryName) || null;
+const bodyContentKindTmpl = requestContentKind[requestBodyInfo.contentKind] || null;
+const responseFormatTmpl = responseContentKind[responseBodyInfo.success && responseBodyInfo.success.schema && responseBodyInfo.success.schema.contentKind] || null;
+const securityTmpl = security ? 'true' : null;
+const paramsSerializerTmpl = (() => {
+    if (!requestParams?.properties) return;
+    const exploded = explodedParams(requestParams.properties);
+    
+    if (!exploded.length) return;
+    const configs = exploded.map((key) => `"${key}" : "repeat"`)
+
+    return `paramsSerializerBy({ ${configs.join(",")} })`
+    })()
+
+
+
+const describeReturnType = () => {
+    if (!config.toJS) return "";
+
+    switch(config.httpClientType) {
+        case HTTP_CLIENT.AXIOS: {
+          return `Promise<AxiosResponse<${type}>>`
+        }
+        default: {
+          return `Promise<HttpResponse<${type}, ${errorType}>`
+        }
+    }
+}
+
+%>
+/**
+<%~ routeDocs.description %>
+
+ *<% /* Here you can add some other JSDoc tags */ %>
+
+<%~ routeDocs.lines %>
+
+ */
+<%~ route.routeName.usage %> = (<%~ conditionalVriablesText %> :{<%~ wrapperArgs %>})<%~ config.toJS ? `: ${describeReturnType()}` : "" %> =>
+    <%~ config.singleHttpClient ? 'this.http.request' : 'this.request' %><<%~ type %>, <%~ errorType %>>({
+        path: `<%~ pathWithVariables %>`,
+        method: '<%~ _.upperCase(method) %>',
+        <%~ queryTmpl ? `query: ${conditionalVriablesText}.${queryTmpl},` : '' %>
+        <%~ bodyTmpl ? `body: ${conditionalVriablesText}.${bodyTmpl},` : '' %>
+        <%~ securityTmpl ? `secure: ${securityTmpl},` : '' %>
+        <%~ bodyContentKindTmpl ? `type: ${bodyContentKindTmpl},` : '' %>
+        <%~ responseFormatTmpl ? `format: ${responseFormatTmpl},` : '' %>
+        <%~ paramsSerializerTmpl ? `paramsSerializer: ${paramsSerializerTmpl},` : '' %>
+        ...<%~ `${conditionalVriablesText}`%>.<%~ _.get(requestConfigParam, "name") %>,
+    })
+    

package/templates/custom-fetch/api.eta

@@ -0,0 +1,164 @@
+<%
+const { utils, route, config, modelTypes, myConfig  } = it;
+const { _, classNameCase, pascalCase, require } = utils;
+const { RESERVED_REQ_PARAMS_ARG_NAMES } = config.constants;
+
+const routes = route.routes;
+const dataContracts = _.map(modelTypes, "name");
+
+const projectRootPath = process.env.PWD;
+const myTemeplatePath = `../my`
+const reactQueryTemplatePath = `${myTemeplatePath}/react-query-hook.eta`
+const reactQuerKeyTemplatePath = `${myTemeplatePath}/react-query-key.eta`
+
+const apiClassName = classNameCase(route.moduleName) + 'Api';
+const paginations = myConfig?.paginations;
+const instancePath = myConfig?.instancePath || "@/configs/fetch/fetch-extend";
+
+const apiInstanceName = route.moduleName + "Api";
+const queryKeyName = "QUERY_KEY_" + _.upperCase(apiClassName).replace(/ /g, '_');
+
+const hasPaginationKeyword = (queryString, keywords = paginationKeywords ) => {
+  if (!myConfig?.includeReactInfiniteQuery) return false;
+  const keywordUnion = keywords.map(str => `.*${str}.*`).join("|");
+  const rgxSting = keywords.map(str => `(${keywordUnion})`).join("");
+  const rgx = new RegExp(rgxSting);
+  return rgx.test(queryString);
+}
+
+const upperSnakeCase = (str) => _.upperCase(str).replace(/ /g, '_');
+
+const removeModuleName = (str) => str.replace(route.moduleName, '');
+
+const getConfigByRoute = (route) => {
+  const { specificArgNameResolver } = route;
+  const { parameters, path, method, payload, query, formData, security, requestParams } = route.request;
+  const pathParams = _.values(parameters);
+  const pathParamsNames = _.map(pathParams, "name");
+  const queryName = (query && query.name) || "query";
+
+  const requestConfigParam = {
+    name: specificArgNameResolver.resolve(RESERVED_REQ_PARAMS_ARG_NAMES),
+    optional: true,
+    type: "RequestParams",
+  };
+
+  const argToTmpl = ({ name, optional, type, defaultValue }) => `${name}${!defaultValue && optional ? '?' : ''}: ${type}`;
+
+
+  const rawWrapperArgs = config.extractRequestParams
+    ? _.compact([
+        requestParams && {
+          name: pathParams.length ? `{ ${_.join(pathParamsNames, ", ")}, ...${queryName} }` : queryName,
+          optional: false,
+          type: getInlineParseContent(requestParams),
+        },
+        ...(!requestParams ? pathParams : []),
+        payload,
+        requestConfigParam,
+      ])
+    : _.compact([
+        ...pathParams,
+        query,
+        payload,
+        requestConfigParam,
+      ]);
+  
+  const wrapperArgs = _
+    // Sort by optionality
+    .sortBy(rawWrapperArgs, [o => o.optional])
+    .map(argToTmpl)
+    .join('; ');
+
+  const functionName = route.routeName.usage;
+  const hookVariant = _.upperCase(method) === "GET" ? "Query" : "Mutation";
+  const key = upperSnakeCase(functionName);
+  const methodKey = upperSnakeCase(removeModuleName(functionName));
+  const pagination = paginations.find(d => !!query?.type && hasPaginationKeyword(query?.type.split("\n").join(""), d.keywords));
+
+  const isQuery = hookVariant === "Query";
+  const isMutation = hookVariant === "Mutation";
+  const hasPagination = !!pagination;
+
+  const isOptialnalVariabels = _
+    // Find optional value
+    .filter(rawWrapperArgs, o => o.optional).length === rawWrapperArgs.length;
+
+  const conditionalVriablesText = isOptialnalVariabels ? "variables?" : "variables";
+  const repalceTarget = "${" + conditionalVriablesText + ".";
+
+  return {
+    conditions: {
+      hasPagination,
+      isQuery,
+      isMutation,
+      isOptialnalVariabels,
+    },
+    data: {
+      rawWrapperArgs,
+      wrapperArgs,
+      queryKeyName,
+      functionName,
+      apiInstanceName,
+      apiClassName,
+      hookVariant,
+      key,
+      methodKey,
+      pagination,
+    },
+    utils: {
+      upperSnakeCase,
+      removeModuleName,
+      argToTmpl,
+    }
+  }
+}
+
+const dataForReactHookTemplate = {
+  getConfigByRoute,
+  queryKeyName,
+  apiClassName,
+  apiInstanceName,
+};
+%>
+
+import { useQuery, useMutation, useInfiniteQuery } from '@tanstack/react-query';
+import { QueryHookParams, InfiniteQueryHookParams, MutationHookParams, Parameter, RequestFnReturn } from "../@types/react-query-type";
+import { paramsSerializerBy } from "../@utils/param-serializer-by";
+import fetchExtended from "<%= instancePath %>";
+
+import { HttpClient, RequestParams, ContentType, HttpResponse } from "../@<%~ config.fileNames.httpClient %>";
+import { DeepOmitReadOnly } from '../@types/util-types';
+
+<% if (dataContracts.length) { %>
+import { <%~ dataContracts.join(", ") %> } from "../@types/<%~ config.fileNames.dataContracts %>";
+<% } %>
+
+export class <%= apiClassName %><SecurityDataType = unknown><% if (!config.singleHttpClient) { %> extends HttpClient<SecurityDataType> <% } %> {
+<% if (config.singleHttpClient) { %>
+  http: HttpClient<SecurityDataType>;
+
+  constructor(http: HttpClient<SecurityDataType>) {
+    this.http = http;
+  }
+<% } %>
+
+  <% routes.forEach((route) => { %>
+    <%~ includeFile('./procedure-call.eta', { ...it, route }) %>
+  <% }) %>
+}
+
+export const <%= apiInstanceName %> = new <%= apiClassName %>({ customFetch: fetchExtended });
+
+<% if (myConfig.includeReactQuery) { %>
+  //<%~ myConfig.QUERY_HOOK_INDICATOR %>
+
+  /**
+   * QUERY_KEYS
+   */
+  <%~ includeFile(reactQuerKeyTemplatePath, { ...it, route, dataFromApiTemplate: dataForReactHookTemplate }) %>
+
+  <% routes.forEach((route) => { %>
+    <%~ includeFile(reactQueryTemplatePath, { ...it, route, dataFromApiTemplate: dataForReactHookTemplate }) %>
+  <% }) %>
+<% } %>

package/templates/custom-fetch/data-contracts.eta

@@ -0,0 +1,76 @@
+<%
+  const { modelTypes, utils } = it;
+  const { formatDescription, require, _ } = utils;
+  
+
+  const dataContractTemplates = {
+    enum: (contract) => {
+    const enumNames = contract['x-enumNames'];
+
+    if (!contract.enum || !enumNames) {
+      console.warn("Warning: 'enum' or 'x-enum' not found in contract:", {
+        name: contract.name,
+        enum: contract.enum?.join(", "),
+        "x-enumNames": enumNames?.join(", ")
+      });
+      const comment = (() => {
+        if (!contract.enum?.length) return 'Enum Values Missing'
+        if (!enumNames?.length) return 'X-enumName Values Missing'
+        return ''
+      })()
+      return `type ${contract.name} = ${contract?.enum?.map(e => `"${e}"`).join("|") || "string"}; // ${comment}`;
+    }
+
+    if (contract.enum.length !== enumNames.length) {
+      console.warn("Warning: Length mismatch between 'enum' and 'x-enumNames' in contract:", {
+        name: contract.name,
+        enum: contract.enum?.join(", "),
+        "x-enumNames": enumNames?.join(", ")
+      });
+      return `type ${contract.name} = ${contract.enum?.map(e => `"${e}"`).join("|")}; // Length mismatch`;
+    }
+
+    const mapName =  contract.name + "Map"; 
+    const map = (contract.enum || []).map((key, idx) => {
+      const keyName = typeof key === 'number' ? key : `"${key}"`;
+      return `${keyName} : "${enumNames?.[idx]}"`;
+    }).join(", ");
+
+    return `type ${contract.name} = keyof typeof ${mapName};  export const ${mapName} = {\r\n${map} \r\n } as const`;
+
+    },
+    interface: (contract) => {
+      return `interface ${contract.name} {\r\n${contract.content}}`;
+    },
+    type: (contract) => {
+      return `type ${contract.name} = ${contract.content}`;
+    },
+  }
+
+  const createDescription = (contract) => {
+    if (!contract.typeData) return _.compact([contract.description]);
+
+    return _.compact([
+        contract.description && formatDescription(contract.description),
+        !_.isUndefined(contract.typeData.format) && `@format ${contract.typeData.format}`,
+        !_.isUndefined(contract.typeData.minimum) && `@min ${contract.typeData.minimum}`,
+        !_.isUndefined(contract.typeData.maximum) && `@max ${contract.typeData.maximum}`,
+        !_.isUndefined(contract.typeData.pattern) && `@pattern ${contract.typeData.pattern}`,
+        !_.isUndefined(contract.typeData.example) && `@example ${
+          _.isObject(contract.typeData.example) ? JSON.stringify(contract.typeData.example) : contract.typeData.example
+        }`,
+    ]);
+  }
+%>
+<% modelTypes.forEach((contract) => { %>
+<% const description = createDescription(contract); %>
+<% if (description.length) { %>
+/**
+<%~ description.map(part => `* ${part}`).join("\n") %>
+
+*/
+<% } %>
+export <%~ (dataContractTemplates[contract.typeIdentifier] || dataContractTemplates.type)(contract) %>
+
+
+<% }) %>

package/templates/custom-fetch/http-client.eta

@@ -0,0 +1,224 @@
+<%
+const { apiConfig, generateResponses, config } = it;
+%>
+
+export type QueryParamsType = Record<string | number, any>;
+export type ResponseFormat = keyof Omit<Body, "body" | "bodyUsed">;
+
+export interface FullRequestParams extends Omit<RequestInit, "body"> {
+  /** set parameter to `true` for call `securityWorker` for this request */
+  secure?: boolean;
+  /** request path */
+  path: string;
+  /** content type of request body */
+  type?: ContentType;
+  /** query params */
+  query?: QueryParamsType;
+  /** format of response (i.e. response.json() -> format: "json") */
+  format?: ResponseFormat;
+  /** request body */
+  body?: unknown;
+  /** base url */
+  baseUrl?: string;
+  /** request cancellation token */
+  cancelToken?: CancelToken;
+}
+
+export type RequestParams = Omit<FullRequestParams, "body" | "method" | "query" | "path">
+
+
+export interface ApiConfig<SecurityDataType = unknown> {
+    baseUrl?: string;
+    baseApiParams?: Omit<RequestParams, "baseUrl" | "cancelToken" | "signal">;
+    securityWorker?: (securityData: SecurityDataType | null) => Promise<RequestParams | void> | RequestParams | void;
+    customFetch?: typeof fetch;
+}
+
+export interface HttpResponse<D extends unknown, E extends unknown = unknown> extends Response {
+    data: D;
+    error: E;
+}
+
+type CancelToken = Symbol | string | number;
+
+export enum ContentType {
+    Json = "application/json",
+    FormData = "multipart/form-data",
+    UrlEncoded = "application/x-www-form-urlencoded",
+    Text = "text/plain",
+}
+
+export class HttpClient<SecurityDataType = unknown> {
+    public baseUrl: string = "<%~ apiConfig.baseUrl %>";
+    private securityData: SecurityDataType | null = null;
+    private securityWorker?: ApiConfig<SecurityDataType>["securityWorker"];
+    private abortControllers = new Map<CancelToken, AbortController>();
+    private customFetch = (...fetchParams: Parameters<typeof fetch>) => fetch(...fetchParams);
+
+    private baseApiParams: RequestParams = {
+        credentials: 'same-origin',
+        headers: {},
+        redirect: 'follow',
+        referrerPolicy: 'no-referrer',
+    }
+
+    constructor(apiConfig: ApiConfig<SecurityDataType> = {}) {
+        Object.assign(this, apiConfig);
+    }
+
+    public setSecurityData = (data: SecurityDataType | null) => {
+        this.securityData = data;
+    }
+
+    protected encodeQueryParam(key: string, value: any) {
+        const encodedKey = encodeURIComponent(key);
+        return `${encodedKey}=${encodeURIComponent(typeof value === "number" ? value : `${value}`)}`;
+    }
+
+    protected addQueryParam(query: QueryParamsType, key: string) {
+        return this.encodeQueryParam(key, query[key]);
+    }
+
+    protected addArrayQueryParam(query: QueryParamsType, key: string) {
+        const value = query[key];
+        return value.map((v: any) => this.encodeQueryParam(key, v)).join("&");
+    }
+
+    protected toQueryString(rawQuery?: QueryParamsType): string {
+        const query = rawQuery || {};
+        const keys = Object.keys(query).filter((key) => "undefined" !== typeof query[key]);
+        return keys
+                .map((key) =>
+                    Array.isArray(query[key])
+                    ? this.addArrayQueryParam(query, key)
+                    : this.addQueryParam(query, key),
+                )
+                .join("&");
+    }
+
+    protected addQueryParams(rawQuery?: QueryParamsType): string {
+        const queryString = this.toQueryString(rawQuery);
+        return queryString ? `?${queryString}` : "";
+    }
+
+    private contentFormatters: Record<ContentType, (input: any) => any> = {
+        [ContentType.Json]: (input:any) => input !== null && (typeof input === "object" || typeof input === "string") ? JSON.stringify(input) : input,
+        [ContentType.Text]: (input:any) => input !== null && typeof input !== "string" ? JSON.stringify(input) : input,
+        [ContentType.FormData]: (input: any) =>
+            Object.keys(input || {}).reduce((formData, key) => {
+                const property = input[key];
+                formData.append(
+                    key,
+                    property instanceof Blob ?
+                        property :
+                    typeof property === "object" && property !== null ?
+                        JSON.stringify(property) :
+                    `${property}`
+                );
+                return formData;
+            }, new FormData()),
+        [ContentType.UrlEncoded]: (input: any) => this.toQueryString(input),
+    }
+
+    protected mergeRequestParams(params1: RequestParams, params2?: RequestParams): RequestParams {
+        return {
+            ...this.baseApiParams,
+            ...params1,
+            ...(params2 || {}),
+            headers: {
+                ...(this.baseApiParams.headers || {}),
+                ...(params1.headers || {}),
+                ...((params2 && params2.headers) || {}),
+            },
+        };
+    }
+
+    protected createAbortSignal = (cancelToken: CancelToken): AbortSignal | undefined => {
+        if (this.abortControllers.has(cancelToken)) {
+            const abortController = this.abortControllers.get(cancelToken);
+            if (abortController) {
+                return abortController.signal;
+            }
+            return void 0;
+        }
+
+        const abortController = new AbortController();
+        this.abortControllers.set(cancelToken, abortController);
+        return abortController.signal;
+    }
+
+    public abortRequest = (cancelToken: CancelToken) => {
+        const abortController = this.abortControllers.get(cancelToken)
+
+        if (abortController) {
+            abortController.abort();
+            this.abortControllers.delete(cancelToken);
+        }
+    }
+
+    public request = async <T = any, E = any>({
+        body,
+        secure,
+        path,
+        type,
+        query,
+        format,
+        baseUrl,
+        cancelToken,
+        ...params
+<% if (config.unwrapResponseData) { %>
+    }: FullRequestParams): Promise<T> => {
+<% } else { %>
+    }: FullRequestParams): Promise<HttpResponse<T, E>> => {
+<% } %>
+        const secureParams = ((typeof secure === 'boolean' ? secure : this.baseApiParams.secure) && this.securityWorker && await this.securityWorker(this.securityData)) || {};
+        const requestParams = this.mergeRequestParams(params, secureParams);
+        const queryString = query && this.toQueryString(query);
+        const payloadFormatter = this.contentFormatters[type || ContentType.Json];
+        const responseFormat = format || requestParams.format;
+
+        return this.customFetch(
+        `${baseUrl || this.baseUrl || ""}${path}${queryString ? `?${queryString}` : ""}`,
+        {
+            ...requestParams,
+            headers: {
+            ...(requestParams.headers || {}),
+            ...(type && type !== ContentType.FormData ? { "Content-Type": type } : {}),
+            },
+            signal: cancelToken ? this.createAbortSignal(cancelToken) : requestParams.signal,
+            body: typeof body === "undefined" || body === null ? null : payloadFormatter(body),
+        }
+        ).then(async (response) => {
+            const r = response as HttpResponse<T, E>;
+            r.data = (null as unknown) as T;
+            r.error = (null as unknown) as E;
+
+            const data = !responseFormat ? r : await response[responseFormat]()
+                .then((data) => {
+                    if (r.ok) {
+                        r.data = data;
+                    } else {
+                        r.error = data;
+                    }
+                    return r;
+                })
+                .catch((e) => {
+                    r.error = e;
+                    return r;
+                });
+
+            if (cancelToken) {
+                this.abortControllers.delete(cancelToken);
+            }
+
+<% if (!config.disableThrowOnError) { %>
+            if (!response.ok) throw data;
+<% } %>
+<% if (config.unwrapResponseData) { %>
+            return data.data;
+<% } else { %>
+            return data;
+<% } %>
+        });
+    };
+}