Published: 2024-09-01

Introducing Kubb v3: A New Era of Code Generation

We’re excited to announce the release of Kubb v3, a major update that brings significant improvements, new features, and enhanced flexibility to the Kubb ecosystem. V3 is designed to make your development workflow more efficient, customizable, and future-proof. In this post, we’ll dive into the key features of Kubb v3 and explore what’s new.

What is Kubb?

For those unfamiliar with Kubb, it’s a flexible framework built to automate code generation based on Swagger/OpenAPI spec file. Kubb simplifies your workflow by creating API clients, generating type-safe code, Zod schema's, React-Query code, ...

By integrating with tools like OpenAPI, Kubb ensures that your code remains aligned with your API specifications, reducing the risk of errors and improving maintainability.

What’s New in Kubb v3?

Kubb v3 builds on the foundation of previous versions with several key improvements and new features designed to give you more control and flexibility.

1. An updated Plugin Architecture

One of the most significant changes in Kubb v3 is the overhaul of the plugin architecture which makes the generation faster and by having a progressbar also easier to see what is going on.

Left: v3	Right: v2

Next to that, we also improved the usage of Tanstack Query. With v3, each framework (React, Vue, Solid and Svelte) is now available as its own package.

2. Dropping Support for Tanstack Query v4

To stay up-to-date with the latest advancements, Kubb v3 focuses solely on supporting Tanstack Query v5. We’ve dropped support for Tanstack Query v4, but if your project still depends on it, you can continue using Kubb v2. This shift allows us to take full advantage of the improvements and features introduced in v5.

3. Generators: The Core of Kubb v3

TIP

In v2 of Kubb we used the name templates.

Generators have always been an integral part of Kubb, and in v3, they’re more powerful than ever. Generators allow you to hook into the file generation process and customize or add code dynamically. Each plugin uses generators to handle file creation, and now you can reuse existing generators.

For example, if you’re using @kubb/plugin-client to generate an API client but want to append additional functionality to the generated files, you can either:

• Use the footer option to add code.
• Override the default generator and add your own logic.

This level of flexibility allows you to tailor Kubb to your project’s exact needs without sacrificing the benefits of automation.

4. Improved Performance

We’ve completely revamped the core engine of Kubb to be faster and more efficient. In Kubb v3, both the CLI and core functions are optimized to provide quicker feedback, display more relevant information, and reduce overall build times.

5. File Extensions and Compatibility

In the latest version of Node.js, file extensions are now required when importing modules. To accommodate this, Kubb v3 automatically appends .ts extensions to generated files. H owever, for projects that do not yet use this Node.js configuration, you can remove the extension or switch to .js if needed, ensuring backward compatibility.

6. Beyond OpenAPI: Future-Proofing with New Specification Support

Previously, Kubb was closely tied to Swagger, but with v3, we’ve extended support for OpenAPI v3 and v3.1. More importantly, this change sets the stage for future support of other specifications, making Kubb more adaptable to emerging standards in the API ecosystem.

Migrating to Kubb v3

Check out our detailed migration guide for a step-by-step walkthrough.

Why You Should Upgrade to Kubb v3

With Kubb v3, you’ll experience a more flexible, modular approach to code generation that can adapt to the unique needs of your project. The enhanced performance, refined generators, and the ability to customize file generation make Kubb v3 a powerful tool in any TypeScript developer’s toolkit.

Key Benefits of Upgrading:

• Optimized for Tanstack Query v5: Install only the framework you need.
  • Support for Suspense
  • Enabled flag set based on a required field
  • Support for Signals
  • paramsType with option object to have an object-oriented generation
  • Only generate queryOptions by disabled the query generation
• Seamless API integration: Take advantage of updated support for OpenAPI v3 and v3.1.
• Enhanced customization: Use generators to fine-tune your code and add custom logic.
• Future-proof: Prepare your codebase for new API specifications and the latest JavaScript/TypeScript features.

Conclusion

Kubb v3 brings a new level of sophistication and flexibility to TypeScript code generation. Whether you’re working on a small project or managing a complex codebase, Kubb v3 empowers you to automate and streamline your development process with ease. With faster performance, better plugin architecture, and the powerful generator system.

Ready to get started? Check out the documentation and explore how Kubb v3 can supercharge your project today!

👋🏽 Stijn Van Hulle