docs: update docs for v2 release

docs/.vitepress/config.ts

@@ -65,7 +65,7 @@ const configSidebar = [
     collapsed: false,
     items: [
       {
-        text: 'name',
+        text: 'name <span class="new">new</span>',
         link: '/config/name',
       },
       {
@@ -113,7 +113,7 @@ const referenceSidebar = [
     ],
   },
   {
-    text: 'Templates <img src="/icons/experimental.svg"/>',
+    text: 'Templates <span class="new">new</span><img src="/icons/experimental.svg"/>',
     link: '/reference/templates',
   },
 ]
@@ -218,7 +218,7 @@ const pluginsSidebar = [
         collapsed: true,
         items: [
           {
-            text: 'Infer',
+            text: 'Infer <img src="/icons/experimental.svg"/> <span class="new">new</span>',
             link: '/plugins/swagger-ts/infer',
           },
         ],
@@ -328,19 +328,19 @@ const examplesSidebar = [
     link: '/examples/advanced',
   },
   {
-    text: 'Templates',
+    text: 'Templates <span class="new">new</span>',
     link: '/examples/client',
   },
 ]
 
 const blogSidebar = [
   {
-    text: 'Release of Kubb v2',
+    text: 'Release of Kubb 2.0',
     link: '/blog/v2',
   },
   {
-    text: 'Typescript JSX based template engine for code generation.',
-    link: '/blog/tsBasedJSXEngine',
+    text: 'Why creating templates with JSX',
+    link: '/blog/whyTemplates',
   },
 ]
 
@@ -449,8 +449,9 @@ export default defineConfig({
     ['meta', { property: 'twitter:description', content: description }],
     ['link', { rel: 'icon', href: '/logo.png', type: 'image/png' }],
     ['link', { rel: 'mask-icon', href: '/logo.png', color: '#ffffff' }],
+    ['script', { src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js' }],
   ],
-  transformHtml: (_, id, { pageData }) => {
+  transformHtml: (code, id, { pageData }) => {
     if (!/[\\/]404\.html$/.test(id)) {
       links.push({
         // you might need to change this if not using clean urls mode
@@ -509,8 +510,8 @@ export default defineConfig({
         text: `v${version}`,
         items: [
           {
-            text: '1.0.0',
-            link: 'https://kubb.dev',
+            text: 'v1',
+            link: 'https://v1.kubb.dev',
             target: '_blank',
           },
           {

docs/blog/v2.md

@@ -1,37 +1,66 @@
 ---
 layout: doc
 
-title: Release of Kubb v2
+title: 🎉 Release of Kubb 2.0 🎉
 outline: deep
 ---
 
-Published: 2023-12-06
+<script >
+globalThis.confetti?.({
+  particleCount: 100,
+  spread: 100,
+  origin: { y: 0.5 },
+})
 
-# Release of Kubb v2
+window.addEventListener("load", (event) => {
+  setTimeout(()=>{
+    globalThis.confetti?.({
+      particleCount: 100,
+      spread: 100,
+      origin: { y: 0.5 },
+    })
+  },1000)
+});
+</script>
 
-First of all, have a look at our [GitHub issue](https://github.com/kubb-project/kubb/issues/556) related to changes that has been done internally.<br/>
+Published: 2023-12-08
 
-## What has been changed?
+# 🎉 Release of Kubb 2.0 🎉
 
-### Internal changes
+## Introduction
 
-- Fast builder times with a change in how files are getting processed.
-- CLI updates to add a name as a prefix(when using multiple configs in one config file).
-- Improved logging.
-- Use of pluginKey instead of pluginName(so multiple of the same plugin can be supported).
-- Moved generic types to `@kubb/types`.
-- Use of [templates](/reference/templates) for all internal packages with the use of `@kubb/react`.
-- Improvement for `@kubb/react` with updated components and hooks.
-- `@kubb/swagger-tanstack-query` with `QueryKeyFactory` helper type.
-- Improved test coverage.
-- Use of TypeScript v5.3.0.
-- Support for MSW v2.
-- Support for @tanstack/query v5.
-- Infer with `@kubb/swagger-ts/oas`
+Kubb has been available for almost a year and we have learned a lot since v1. Most of the changes that has been done are related to the internal structure(how we handle files, plugins, ...). This means your project can generate faster code in v2 than it was the case in v1.
+
+Another big change is that it will now also be possible to use multiple of the same plugins and with the introduction of `exclude/include/override` you can generate code for just one specific path.
+
+The introduction of `React` and `JSX` was also a big change, in the background we can now 'translate' Swagger/OpenAPI files to generated code(TypeScript, ReactQuery, ...). More about why and how we did this can be found in the [TypeScript JSX based template engine for code generation](/blog/tsBasedJSXEngine) blog.
+
+Because of this change we can now use [templates](/reference/templates) to override the default behaviour of for example the `useQuery` of @tanstack/query.
+
+## Breaking Changes
+
+In practice, most of the "breaking" changes should not have an actual effect, and we expect that many projects can just update with very few changes.
+
+- `skipBy` has been replaced by `exclude`
+- `overrideBy` has been replaced by `override`
+- `groupBy` has been replaced by `group`
+- `client` has been removed in favour of using `client.importPath`(added in a previous version)
+- `output` has been replaced by `output.path` when using a plugin
+- `exportAs` has been replaced by `output.exportAs` when using a plugin (`@kubb/swagger-ts` only)
+
+## New Features
+
+### Templates <img src="/icons/experimental.svg"/>
+
+With templates you can override the default behaviour of our plugins.
+
+- [What are templates](/reference/templates)
+- [Why creating templates with JSX](/blog/whyTemplates)
+- [Guide in create your own template](/guide/tutorial/templates)
 
 ### Exclude and include
 
-All plugins now have an `exclude` and `include` option, with those options you can specify which path, operation, method or tag you want to include/exclude in the generation.
+All plugins now have an `exclude` and `include` option, with those you can specify which `path`, `operation`, `method` or `tag` you want to include/exclude in the generation.
 
 ```typescript [kubb.config.ts]
 import { defineConfig } from '@kubb/core'
@@ -74,10 +103,8 @@ export default defineConfig(() => {
 
 ### Use multiple of the same plugin
 
-In v2 it will now also be possible to use multiple of the same plugin(with other options).<br/>
-The following example will add the types that have a tag set to store to the `types/store` folder and the ones with tag pet to `types/pet`.<br/>
-
-[/guide/configure#multiple](/guide/configure#multiple)
+In v2 it will now be possible to use multiple of the same plugin(with other options).<br/>
+The following example will add the types that have a `tag` 'store' set to the `types/store` folder and the ones with `tag` 'pet' to `types/pet`. [Setup with multiple of the same plugin](/guide/configure#multiple).<br/>
 
 ```typescript [kubb.config.ts]
 import { defineConfig } from '@kubb/core'
@@ -159,11 +186,40 @@ export default defineConfig([
 ])
 ```
 
-## Breaking Changes
+## Internal changes
 
-- `skipBy` has been replaced by `exclude`
-- `overrideBy` has been replaced by `override`
-- `groupBy` has been replaced by `group`
-- `client` has been removed in favour of using `clientImportPath`(added in a previous version)
-- `output` has been replaced by `output.path` when using a plugin
-- `exportAs` has been replaced by `output.exportAs` when using a plugin (`@kubb/swagger-ts` only)
+::: info
+[GitHub issue](https://github.com/kubb-project/kubb/issues/556)
+:::
+
+- Faster execution time because of a change in our FilesManager with an updated queue system.
+- [Add a name](/config/name) to the CLI as a prefix(when using multiple configs in one config file).
+- Improved logging.
+- Use of pluginKey instead of pluginName(so multiple of the same plugin can be supported).
+- Move of our generic types to `@kubb/types`.
+- Use of [templates](/reference/templates) for all internal packages with the use of `@kubb/react`.
+- Improved test coverage.
+- Use of TypeScript v5.3.0.
+- Support for MSW v2.
+- Support for @tanstack/query v5(added `useSuspenseQuery`).
+- [Infer](/plugins/swagger-ts/infer) with `@kubb/swagger-ts/oas`(experimental).
+- [Disable the creation of barrel/index](/plugins/swagger-ts/#output-exporttype) files and [change extension](/plugins/swagger-ts/#output-extname).
+
+## Thanks
+
+A big thanks to everyone using Kubb and also the ones that have already contributed to Kubb!
+
+::: warning Twitter/X
+We now also have a Twitter/X account: [x.com/kubbproject](https://twitter.com/kubbproject).
+
+:::
+
+<a href="https://star-history.com/#kubb-project/kubb&Date">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=kubb-project/kubb&type=Date&theme=dark" />
+    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=kubb-project/kubb&type=Date" />
+    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=kubb-project/kubb&type=Date" />
+  </picture>
+</a>
+
+👋🏽 [Stijn Van Hulle](https://twitter.com/stijnvanhulle)

docs/blog/tsBasedJSXEngine.md → docs/blog/whyTemplates.md

@@ -1,17 +1,17 @@
 ---
 layout: doc
 
-title: TypeScript JSX based template engine for code generation.
+title: Why creating templates with JSX
 outline: deep
 ---
 
-Published: 2023-12-06
+Published: 2023-12-08
 
-# TypeScript JSX based template engine for code generation.
+# Why creating templates with JSX
 
-Since v2 `Kubb` has been starting to use JSX templates to create its generated code. Before we use template string but that was not always easy when you have a couple of if statements(not easy to read/understand) and it would also become harder to maintain in the future. Because of that we explored if it was possible to use JSX and React to create our generated code. As a front-end developer we use React on a daily base and to use JSX as a template engine would be really nice.
+Since v2 `Kubb` has been starting to use JSX templates to create its generated code. Before we used template string but that was not always easy when you had a couple of if statements(not easy to read/understand) and it was also becoming harder to maintain. Because of that we explored if it was possible to use JSX and React to create our generated code. As a front-end developer we use React on a daily base and to use JSX as a template engine would be really nice.
 
-But to understand more you need to understand some basic concepts.
+But to get into details, you need to understand some basic concepts.
 
 ## What is template engine?
 
@@ -24,10 +24,14 @@ Source code generation is a technique used in programming where code is automati
 ## Template engines as of today.
 
 ::: tip
-For example, the OpenAPI TypeScript generator uses Handlebars templates.
+For example, the OpenAPI TypeScript generator uses [Handlebars](https://handlebarsjs.com/).
 :::
 
-Today there are a couple of template engines that exists like Mustache, Handlebars, and EJS. Next to that you can also use the [TypesScript compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API) to create JavaScript/TypeScript. An example of this is [rapini](https://github.com/rametta/rapini/blob/main/src/react-query/generator.ts).
+Today there are a couple of template engines that exists like [Mustache](https://mustache.github.io/), [Handlebars](https://handlebarsjs.com/) and [EJS](https://ejs.co/). Next to that you can also use the [TypesScript compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API) to create JavaScript/TypeScript.
+
+### Rapini
+
+An example of this is [rapini](https://github.com/rametta/rapini/blob/main/src/react-query/generator.ts).
 
 ```typescript
 function makeImportAxiosInstanceTypeDeclaration() {
@@ -55,8 +59,12 @@ function makeImportAxiosInstanceTypeDeclaration() {
 }
 ```
 
+### TypeScript compiler
+
 The [TypesScript compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API) is really nice and powerful to use but not easy to setup. This has a hard learning curve and would not fit our needs. <br/>
 
+### Ink
+
 Then we found [Ink](https://github.com/vadimdemedes/ink) which is a CLI tool that uses React/JSX as their template engine. As of how they describe it:
 
 > React for CLIs. Build and test your CLI output using components.
@@ -84,13 +92,14 @@ const Counter = () => {
 render(<Counter />)
 ```
 
-<img src="https://raw.githubusercontent.com/vadimdemedes/ink/master/media/demo.svg" width="600">
+<img src="https://raw.githubusercontent.com/vadimdemedes/ink/master/media/demo.svg" width="600"/>
 <br/>
-After some digging around in their code we came up with a solution that would benefit `Kubb`.
+After some digging around in their code we came up with a solution that would benefit Kubb.
+
 We can use JSX as the template engine and provide some hooks that could be used to access some `Kubb` specific behaviour. <br/>
 
 Getting the `PluginManager` instance or access to the `FileManager` for example. And when using the `@kubb/swagger` plugin, we could also provide some hooks that would return the current operation/path/oas instance. <br/>
-So a lot of things that are possible so we started with a small POC for one of our plugins.
+So a lot of things that are possible so we started with a small POC for one of our plugins and as of today(dec 2023), we are using templates in all our plugins.
 
 ## Examples
 
@@ -136,3 +145,5 @@ If you then compare this with an example with JSX/React, you can already see it'
 At this stage we only did the refactor for the function logic and keeping the template string for the client logic.
 
 ## Overriding with templates
+
+We have made a guide in how you can override templates in one of our plugins: [templates the guide](/guide/tutorial/templates).

docs/guide/tutorial/templates.md

@@ -7,9 +7,11 @@ outline: deep
 
 # Templates tutorial
 
-This tutorial will describe how you can setup Kubb + use the Swagger-client plugin to generate a client based on the `petStore.yaml` file with a defined template. <br/>
-More info about how templates are working behind the scenes can you find [here](/reference/templates).
+This tutorial will describe how you can setup Kubb + use the Swagger-client plugin to generate a client based on the `petStore.yaml` file with a defined template.
 
+More info about how templates are working behind the scenes can be found [here](/reference/templates).
+
+<hr/>
 The setup will contain from the beginning the following folder structure:
 
 ```typescript
@@ -26,7 +28,9 @@ The setup will contain from the beginning the following folder structure:
 Create a React component inside the templates folder that will be used to override the default behaviour of the `@kubb/swagger-client` generated client.
 
 ::: tip
-Make sure you inherit from `Client.templates.default` instead of `Client.templates`. In the future we will add more templates so that's why we have `default`.
+Make sure you inherit from `Client.templates.default` instead of `Client.templates`.
+
+In the future we will add more templates so that's why we have `default`.
 :::
 
 ::: code-group
@@ -49,7 +53,8 @@ export type Options = {
 
 :::
 
-The following component will use the props of the template `React.ComponentProps<typeof Client.templates.default>` and return based on those props a function `axios.get`. <br/>
+The following component will use the props of the template `React.ComponentProps<typeof Client.templates.default>` and return based on those props a function `axios.get`.
+
 Here we also need to add a new import and for that we use `File.Import`. For the other props we just pass them through(JSDoc, params, ...).
 
 ::: code-group
@@ -209,7 +214,7 @@ export const templates: PluginOptions['options']['templates'] = {
 }
 ```
 
-```typescript [with default]
+```typescript [default template]
 import client from '@kubb/swagger-client/client'
 import type { ResponseConfig } from '@kubb/swagger-client/client'
 import type { AddPetMutationRequest, AddPetMutationResponse } from '../../../models/ts/petController/AddPet'

docs/plugins/swagger-client/client.md

@@ -132,7 +132,9 @@ export default defineConfig(() => {
         output: { // [!code ++]
           path: './clients/axios', // [!code ++]
         }, // [!code ++]
-        clientImportPath: '@kubb/swagger-client/client', // [!code ++]
+        client: { // [!code ++]
+          importPath: '@kubb/swagger-client/client', // [!code ++]
+        }, // [!code ++]
       }),
     ],
   }

docs/plugins/swagger-client/index.md

@@ -227,10 +227,12 @@ export default defineConfig({
 
 :::
 
-### clientImportPath
+### client
+
+#### client.importPath
 
 Path to the client import path that will be used to do the API calls.<br/>
-It will be used as `import client from '${clientImportPath}'`.<br/>
+It will be used as `import client from '${client.importPath}'`.<br/>
 It allow both relative and absolute path. the path will be applied as is,
 so relative path shoule be based on the file being generated.
 
@@ -258,7 +260,9 @@ export default defineConfig({
     createSwaggerTS({}),
     createSwaggerClient(
       {
-        clientImportPath: '../../client.ts',
+        client: {
+          importPath: '../../client.ts',
+        },
       },
     ),
   ],
@@ -267,7 +271,7 @@ export default defineConfig({
 
 :::
 
-### dataReturnType <img src="/icons/experimental.svg"/>
+### dataReturnType
 
 ReturnType that needs to be used when calling client().
 
@@ -355,7 +359,7 @@ export default defineConfig({
 
 :::
 
-### pathParamsType <img src="/icons/experimental.svg"/>
+### pathParamsType
 
 How to pass your pathParams.