Do you have the plan to suppor tree-shaking?

[hrsh7th]

I'm experimenting this code generator. It's functionality is meet to my use-case.

However, I have one problem to use this. The generated code is big one class so if I try to use one of the API in the client, then all api's are bundled.

Do you have the plan to improve this?

[Himenon]

import { CodeGenerator } from "@himenon/openapi-typescript-code-generator";

has an option allowOperationIds. This allows you to specify only the operationId you want to use!

Like this:

 const codeGenerator = new CodeGenerator(entryPoint, {
    convertOption: {},
    allowOperationIds: [
      "git/get-ref",
      "git/create-ref",
      "git/create-blob",
      "git/create-tree",
      "git/create-commit",
      "git/get-tree",
      "git/update-ref",
      "repos/get",
      "repos/get-commit",
      "repos/list-branches",
      "repos/list-tags",
    ],
  });

https://github.com/Himenon/github-api-create-commit/blob/9dfb81f1286f40e02db4f6c6825b4393b185a649/scripts/generateTsCode.ts#LL23

@hrsh7th

[Himenon]

Since webpack does not target classes for tree-shaking, we know that it is also important to provide the classes in a format that does not use them.

I'm very busy at the moment and hope to be able to provide it by the end of April or May.

https://github.com/Himenon/openapi-typescript-code-generator/tree/main/src/code-templates/api-client

Wait, I'm off tomorrow. I'll do it now.

[hrsh7th]

oh. Thank you for your quick response.
However, I don't mean to rush you.
You can consider it at your own pace :)

[Himenon]

Functional Api Client is now available in v0.22.0. Please try it out!

https://github.com/Himenon/openapi-typescript-code-generator/releases/tag/%40himenon%2Fopenapi-typescript-code-generator%400.22.0

@hrsh7th

You can check in Playground!

https://openapi-typescript-code-generator.netlify.app/v0.22.3/index.html

[hrsh7th]

Thank you for your very quick work!

Hm... I don't know that the bundlers supports tree-shaking if the module has module scoped variable and the exported functions uses it.

The member of my team who was assigned to use this is on vacation.
So I will late report experimenting new feature. Sorry.

[Himenon]

If you know the cause of this, please let me know. We'll work on it as long as it can be remedied!

[Thiry1]

I tried this with the Terser REPL.

Following code that generated by v0.22.0 is not suppport tree sharking.

export const createClient = (apiClient, baseUrl) => {
    const _baseUrl = baseUrl.replace(/\/$/, "");
    return {
        getBooks: (option) => {
            const url = _baseUrl + `/get/books`;
            const headers = {};
            return apiClient.request("GET", url, headers, undefined, undefined, option);
        },
        searchBooks: (params, optionn) => {
            const url = _baseUrl + `/search/books`;
            const headers = {
                Accept: "application/json"
            };
            const queryParameters = {
                filter: { value: params.parameter.filter, style: "deepObject", explode: true }
            };
            return apiClient.request("GET", url, headers, undefined, queryParameters, option);
        }
    };
};

const client = createClient({}, "");
client.getBooks();

Terser outputs:

export const createClient=(e,o)=>{const t=o.replace(/\/$/,"");return{getBooks:o=>{const r=t+"/get/books";return e.request("GET",r,{},void 0,void 0,o)},searchBooks:(o,r)=>{const s=t+"/search/books",c={filter:{value:o.parameter.filter,style:"deepObject",explode:!0}};return e.request("GET",s,{Accept:"application/json"},void 0,c,option)}}};createClient({},"").getBooks();

The following codes are supports tree shaking, although the interface is subtle.

const client = {
  getBooks: (apiClient, baseUrl, option) => {
    const _baseUrl = baseUrl.replace(/\/$/, "");
    const url = _baseUrl + `/get/books`;
    const headers = {};
    return apiClient.request("GET", url, headers, undefined, undefined, option);
  },
  searchBooks: (apiClient, baseUrl, params, optionn) => {
    const _baseUrl = baseUrl.replace(/\/$/, "");
  	const url = _baseUrl + `/search/books`;
    const headers = {
      Accept: "application/json"
    };
    const queryParameters = {
      filter: { value: params.parameter.filter, style: "deepObject", explode: true }
    };
    return apiClient.request("GET", url, headers, undefined, queryParameters, option);
  }
};
client.getBooks();

Terser outputs:

((e,o,s)=>{const t=o.replace(/\/$/,"")+"/get/books";e.request("GET",t,{},void 0,void 0,s)})();

[hrsh7th]

At least, the accepting apiClient via argument is meet to my use case.

Because my team would use the api-client with the following way.

invoke(generatedApiFunc, ...);

In this way, the apiClient argument would be filled by invoke function.

But I can understand that the developer dislike adding the non-meaningful argument to API interface.

BTW, In my knowledge, the tree-shaking is done via bundler instead of minifier.
I just curios to the above post. I'll investigate it :)

[hrsh7th]

I submitted the PR that improves the tree-shaking support.
H
owever, in that PR the implementation that constructs the URL is broken.
I don't know the cause. . . Probably the only blocker. Any advice would be appreciated.

[Thiry1]

@hrsh7th How about this patch?Following code will be generated.
hrsh7th/openapi-typescript-code-generator@main...Thiry1:openapi-typescript-code-generator:feat/add-base-url

export const getBooks = <RequestOption>(apiClient: ApiClient<RequestOption>, baseUrl: string, option?: RequestOption): Promise<Response$getBooks$Status$200["application/json"]> => {
    const url = baseUrl.replace(/\/$/, "") + `/get/books`;
    const headers = {
        Accept: "application/json"
    };
    return apiClient.request("GET", url, headers, undefined, undefined, option);
};
export const searchBooks = <RequestOption>(apiClient: ApiClient<RequestOption>, baseUrl: string, params: Params$searchBooks, option?: RequestOption): Promise<Response$searchBooks$Status$200["application/json"]> => {
    const url = baseUrl.replace(/\/$/, "") + `/search/books`;
    const headers = {
        Accept: "application/json"
    };
    const queryParameters: QueryParameters = {
        filter: { value: params.parameter.filter, style: "deepObject", explode: true }
    };
    return apiClient.request("GET", url, headers, undefined, queryParameters, option);
};

[hrsh7th]

I see. I was thinking that apiClient should process the URL.
Certainly, there seems to be no problem with receiving it as an argument.
It seems to be close to the original implementation.
google translated

[Thiry1]

I was thinking that apiClient should process the URL.

It seems one of good approach as well.However, this library does not have ApiClient implementation, so the user must implement like this.

export function createApiClient(baseUrl: string): ApiClient<RequestOption> {
  return {
    request(httpMethod: HttpMethod, urlPath: string, headers: ObjectLike | any, requestBody: ObjectLike | any, queryParameters: QueryParameters | undefined, options?: RequestOption,) {
      const url = baseUrl.replace(/\/$/, "") + urlPath;
      // do request.
    },
  }
}

// or receives baseUrl as an argument

export const apiClient: ApiClient<RequestOption> =  {
  return {
    request(httpMethod: HttpMethod, baseUrl: string, urlPath: string, headers: ObjectLike | any, requestBody: ObjectLike | any, queryParameters: QueryParameters | undefined, options?: RequestOption,) {
      const url = baseUrl.replace(/\/$/, "") + urlPath;
      // do request.
    },
  }
}

@Himenon How do you think about it?

[Himenon]

Oops, sorry, there seems to be an implementation omission in FunctionalApiClient in the main branch. Specifically, we need to use the following getTemplateSpan to assemble URLs properly.

https://github.com/Himenon/openapi-typescript-code-generator/blob/main/src/code-templates/class-api-client/utils.ts#L20

Unless this is resolved, it will be difficult to issue a PR. Sorry.

I understood the direction from #97 and #103 to at least implement Tree-shaking.

Various bugs and other things need to be fixed, so please wait a little. I will fix it in the not too distant future.

[Himenon]

#97 (comment)

This library supports at least up to creating URIs from OpenAPI Schema.

The API Client implementation may receive the URI, since the tree-shaking separates the initialization (constructor), so it is not possible to give the baseUrl information there.

Therefore, it is preferable to separate (i.e., add) the Code Template, since extending an existing implementation to generate Code for Tree-Shaking will create an Optional in the Interface.

Current

/**
 * Current Interface
 */
export interface ApiClient<RequestOption> {
    request: <T = SuccessResponses>(httpMethod: HttpMethod, url: string, headers: ObjectLike | any, requestBody: ObjectLike | any, queryParameters: QueryParameters | undefined, options?: RequestOption) => Promise<T>;
}

Interface under consideration

type RequestArgs = {
    httpMethod: HttpMethod
    /**
     * @example https://example.com/get/books/${params.parameter.id}
     */
    url: string
    headers: ObjectLike | any
    requestBody: ObjectLike | any
    queryParameters: QueryParameters | undefined
}

export interface ApiClientV2<RequestOption> {
    request: <T = SuccessResponses>(args: RequestArgs, options?: RequestOption) => Promise<T>;
}

Interface for API Client supporting Tree Shaking

type RequestArgsForTreeShaking = {
    httpMethod: HttpMethod
    /**
     * @example `/get/books/${params.parameter.id}`
     */
    uri: string
    headers: ObjectLike | any
    requestBody: ObjectLike | any
    queryParameters: QueryParameters | undefined
}

export interface ApiClientForTreeShaking<RequestOption> {
    request: <T = SuccessResponses>(args: RequestArgsForTreeShaking, options?: RequestOption) => Promise<T>;
}

[Himenon]

v0.26.0 has been released, and you can check various Templates in the Playground.

https://openapi-typescript-code-generator.netlify.app/v0.26.0/index.html

[hrsh7th]

It seems perfect to me. Thank you a lot!