chore: Modernize stack (#276)

* chore: Modernize stack

Big refactor to cleanup everything:
* Migrate to pnpm with corepack
* Migrate to vitest
* Bump all dependencies
* Add `pnpm check` to check lint, prettier and typecheck
* Apply prettier to the entire codebase
* Update example with latest version (and using pnpm workspace)

* Undo trailing space rule from prettier

Author: fabien0102

.all-contributorsrc

@@ -3,9 +3,7 @@
   "projectOwner": "fabien0102",
   "repoType": "github",
   "repoHost": "https://github.com",
-  "files": [
-    "README.md"
-  ],
+  "files": ["README.md"],
   "imageSize": 100,
   "commit": false,
   "commitConvention": "none",
@@ -29,108 +27,77 @@
       "name": "mpotomin",
       "avatar_url": "https://avatars.githubusercontent.com/u/639406?v=4",
       "profile": "https://github.com/mpotomin",
-      "contributions": [
-        "code",
-        "ideas",
-        "review"
-      ]
+      "contributions": ["code", "ideas", "review"]
     },
     {
       "login": "micha-f",
       "name": "Michael Franzkowiak",
       "avatar_url": "https://avatars.githubusercontent.com/u/200647?v=4",
       "profile": "https://github.com/micha-f",
-      "contributions": [
-        "doc"
-      ]
+      "contributions": ["doc"]
     },
     {
       "login": "SferaDev",
       "name": "Alexis Rico",
       "avatar_url": "https://avatars.githubusercontent.com/u/2181866?v=4",
       "profile": "https://github.com/SferaDev",
-      "contributions": [
-        "code",
-        "ideas"
-      ]
+      "contributions": ["code", "ideas"]
     },
     {
       "login": "needim",
       "name": "Nedim Arabacı",
       "avatar_url": "https://avatars.githubusercontent.com/u/271912?v=4",
       "profile": "https://ned.im/",
-      "contributions": [
-        "question",
-        "code",
-        "ideas"
-      ]
+      "contributions": ["question", "code", "ideas"]
     },
     {
       "login": "antoniel",
       "name": "Antoniel Magalhães",
       "avatar_url": "https://avatars.githubusercontent.com/u/17225358?v=4",
       "profile": "https://github.com/antoniel",
-      "contributions": [
-        "example",
-        "bug"
-      ]
+      "contributions": ["example", "bug"]
     },
     {
       "login": "DreierF",
       "name": "Florian Dreier",
       "avatar_url": "https://avatars.githubusercontent.com/u/5631865?v=4",
       "profile": "https://github.com/DreierF",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "el-j",
       "name": "Fabian Althaus",
       "avatar_url": "https://avatars.githubusercontent.com/u/2795534?v=4",
       "profile": "http://fabianalthaus.de",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "ci-vamp",
       "name": "ci-vamp",
       "avatar_url": "https://avatars.githubusercontent.com/u/116516277?v=4",
       "profile": "https://github.com/ci-vamp",
-      "contributions": [
-        "bug",
-        "code"
-      ]
+      "contributions": ["bug", "code"]
     },
     {
       "login": "alan-oliv",
       "name": "Alan Oliveira",
       "avatar_url": "https://avatars.githubusercontent.com/u/4368481?v=4",
       "profile": "https://twitter.com/oalanoliv",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "Cellule",
       "name": "Michael \"Mike\" Ferris",
       "avatar_url": "https://avatars.githubusercontent.com/u/4157103?v=4",
       "profile": "https://github.com/Cellule",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "rajzik",
       "name": "Jan Šilhan",
       "avatar_url": "https://avatars.githubusercontent.com/u/10364836?v=4",
       "profile": "https://github.com/rajzik",
-      "contributions": [
-        "bug",
-        "code",
-        "doc"
-      ]
+      "contributions": ["bug", "code", "doc"]
     }
   ],
   "contributorsPerLine": 7

.eslintrc.js

@@ -20,19 +20,22 @@ jobs:
 
       # The logic below handles the npm publication:
       - name: Checkout Repository
-        if: ${{ steps.release.outputs.releases_created }}
         uses: actions/checkout@v4
+        if: ${{ steps.release.outputs.releases_created }}
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        if: ${{ steps.release.outputs.releases_created }}
       - name: Setup Node
         uses: actions/setup-node@v4
         if: ${{ steps.release.outputs.releases_created }}
         with:
-          node-version: latest
+          node-version: 20
           registry-url: "https://registry.npmjs.org"
       - name: Build Packages
         if: ${{ steps.release.outputs.releases_created }}
         run: |
-          npm ci
-          npm run build:all
+          pnpm install
+          pnpm build
 
       # Release Please has already incremented versions and published tags, so we just
       # need to publish all unpublished versions to NPM here

.github/workflows/release-please.yaml

@@ -14,9 +14,18 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Checkout branch
+        uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
         with:
-          node-version: latest
-      - run: npm ci
-      - run: npm test
+          node-version: 20
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Check types, linting and code style
+        run: pnpm check
+      - name: Run tests
+        run: pnpm test

.github/workflows/tests.yaml

@@ -0,0 +1 @@
+pnpm-lock.yaml

.prettierignore

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "es5"
+}

.prettierrc.json

@@ -35,7 +35,7 @@
    ```bash
    npx @openapi-codegen/cli init
    ```
-   
+
    <img style="max-width: 400px" src="https://user-images.githubusercontent.com/271912/194000679-5a4501b8-5fc0-430c-9217-028bf91a5dcd.gif">
 
    If you wish to change any of the selections made, you can do so in the generated `openapi-codegen.config.ts` file later..
@@ -45,6 +45,7 @@
    ```bash
    npx openapi-codegen gen {namespace}
    ```
+
    After the code generation is done, you will notice the following files:
 
    - `{namespace}Fetcher.ts` - defines a function that will make requests to your API.
@@ -72,9 +73,9 @@
 
    - Install the library
 
-      ```bash
-      npm i @tanstack/react-query
-      ```
+     ```bash
+     npm i @tanstack/react-query
+     ```
 
    - Wire up the `QueryClient` as described [here](https://tanstack.com/query/v4/docs/adapters/react-query).
 
@@ -211,67 +212,67 @@ the `@openapi-codegen/cli` supports these generator plugins:
 
 #### **generateSchemaTypes** (frontend/backend)
 
-  generate all schema types for your specification:
-  
-  ```ts
-   const { schemasFiles } = await generateSchemaTypes(context, {
-        /* config */
-      });
-  ```
-  
+generate all schema types for your specification:
+
+```ts
+const { schemasFiles } = await generateSchemaTypes(context, {
+  /* config */
+});
+```
+
 output: `{namespace}Schemas.ts`
 
 #### **generateFetchers** (frontend)
 
-  generate all fetchers with types for your specification _needs schemafiles_
-  
-  ```ts
-     await generateFetchers(context, {
-        /* config */
-        schemasFiles,
-      });
-  ```
-  
+generate all fetchers with types for your specification _needs schemafiles_
+
+```ts
+await generateFetchers(context, {
+  /* config */
+  schemasFiles,
+});
+```
+
 output: `{namespace}Fetchers.ts`
 
 #### **generateReactQueryComponents** (frontend)
 
-  generate all React Query Components for useQuery() and useMutation()
-  
-  ```ts
-      await generateReactQueryComponents(context, {
-        /* config*/
-        schemasFiles,
-      });
-  ```
-  
-  output: `{namespace}Components.ts`
-  
+generate all React Query Components for useQuery() and useMutation()
+
+```ts
+await generateReactQueryComponents(context, {
+  /* config*/
+  schemasFiles,
+});
+```
+
+output: `{namespace}Components.ts`
+
 #### **generateReactQueryFunctions** (frontend)
 
-  generate all React Query Functions used for e.g. React-Router 6.6.0+ loader functions
-  
-  ```ts
-     await generateReactQueryFunctions(context, {
-        filenamePrefix,
-        schemasFiles,
-      });
-  ```
-  
-  output: `{namespace}Functions.ts`
+generate all React Query Functions used for e.g. React-Router 6.6.0+ loader functions
 
-  example usage in react-route-loader:
-  
-  ```ts
-  export const routeLoader = (queryClient: QueryClient) =>
-    async ({ params }: MyParams) => 
-      await queryClient.fetchQuery(...getYourQueryNameQuery({}), {
-        /*options*/
-      })
-  ```
-  
-  _more infos: https://reactrouter.com/en/main/guides/data-libs_
+```ts
+await generateReactQueryFunctions(context, {
+  filenamePrefix,
+  schemasFiles,
+});
+```
+
+output: `{namespace}Functions.ts`
+
+example usage in react-route-loader:
+
+```ts
+export const routeLoader =
+  (queryClient: QueryClient) =>
+  async ({ params }: MyParams) =>
+    await queryClient.fetchQuery(...getYourQueryNameQuery({}), {
+      /*options*/
+    });
+```
 
+_more infos: https://reactrouter.com/en/main/guides/data-libs_
 
 You can import any generator into the `to` section, those can be the ones provided by this project or your own custom ones. You have full control of what you are generating!