[IDP-1768] Add experimental MSW plugin (#23)

* [IDP-1768] Add unstable MSW plugin

* Add docs

* Update docs, rename to experimental

* update debug

* PR comments

* fix broken test

Author: tjosepo

.changeset/dull-cougars-call.md

@@ -0,0 +1,5 @@
+---
+"@workleap/create-schemas": minor
+---
+
+Add `experimental_openapiMSWPlugin`

.changeset/new-bears-sleep.md

@@ -0,0 +1,5 @@
+---
+"@workleap/create-schemas": minor
+---
+
+[BREAKING] Rename `openapiFetchPlugin` to `experimental_openapiFetchPlugin`

debug/create-schemas.config.ts

@@ -1,8 +1,8 @@
 import { defineConfig } from "@workleap/create-schemas";
-import { openapiFetchPlugin } from "@workleap/create-schemas/plugins";
+import { experimental_openapiFetchPlugin, experimental_openapiMSWPlugin } from "@workleap/create-schemas/plugins";
 
 export default defineConfig({
     input: "v1.yaml",
     outdir: "src/codegen/v1",
-    plugins: [openapiFetchPlugin()]
+    plugins: [experimental_openapiFetchPlugin(), experimental_openapiMSWPlugin()]
 });

debug/package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "@workleap/create-schemas": "workspace:*",
-    "openapi-fetch": "^0.10.2"
+    "openapi-fetch": "0.10.2",
+    "openapi-msw": "0.7.0"
   }
 }

debug/src/codegen/v1/client.ts

@@ -1,4 +1,4 @@
-/** Do not modify. This file has been generated by @workleap/create-schemas */
+/** This file has been generated by @workleap/create-schemas (https://github.com/gsoft-inc/wl-openapi-typescript). Do not modify manually. */
 import type { paths } from "./types.ts";
 import _createClient from "openapi-fetch";
 

debug/src/codegen/v1/openapi-msw.ts

@@ -0,0 +1,5 @@
+/** This file has been generated by @workleap/create-schemas (https://github.com/gsoft-inc/wl-openapi-typescript). Do not modify manually. */
+import type { paths } from "./types.ts";
+import { createOpenApiHttp } from "openapi-msw";
+
+export const http = createOpenApiHttp<paths>();

debug/src/codegen/v1/types.ts

@@ -1,4 +1,4 @@
-/** Do not modify. This file has been generated by @workleap/create-schemas */
+/** This file has been generated by @workleap/create-schemas (https://github.com/gsoft-inc/wl-openapi-typescript). Do not modify manually. */
 export interface paths {
     "/good-vibes-points/{userId}": {
         parameters: {

docs/src/msw.md

@@ -6,6 +6,52 @@ order: -6
 
 # Mock Service Worker
 
+## Type-safe Handlers
+
+The [`experimental_openapiMSWPlugin` plugin](/using-plugins/#experimental_openapimswplugin) allows you to define MSW handlers in a type-safe way.
+
+To use this client, you need to install the [`openapi-msw`](https://www.npmjs.com/package/openapi-msw) package:
+
++++ pnpm
+```bash
+pnpm add openapi-msw
+```
++++ npm
+```bash
+npm install openapi-msw
+```
++++ yarn
+```bash
+yarn add openapi-msw
+```
++++
+
+**Example usage:**
+
+```ts #2,5 create-schemas.config.ts 
+import { defineConfig } from "@workleap/create-schemas";
+import { experimental_openapiMSWPlugin } from "@workleap/create-schemas/plugins";
+
+export default defineConfig({
+    plugins: [experimental_openapiMSWPlugin()]
+    input: "v1.yaml",
+    outdir: "codegen",
+});
+```
+
+```ts #5-6
+import { http } from "./codegen/openapi-msw.ts";
+
+export const handlers = [
+    http.get("/good-vibes-points/{userId}", ({ response }) => {
+        return response(200).json({ pointx: 50 });
+                                 // ^^^^^^ Property "pointx" does not exist on type { points: number }
+    }),
+];
+```
+
+## Auto-generated handlers
+
 *Soon...*
 
 See https://source.mswjs.io/

docs/src/using-plugins.md

@@ -27,7 +27,7 @@ export default defineConfig({
 
 ## Built-in Plugins
 
-### `openapiFetchPlugin`
+### `experimental_openapiFetchPlugin`
 
 **Description:**
 
@@ -53,10 +53,10 @@ yarn add openapi-fetch
 
 ```ts #2,5 create-schemas.config.ts 
 import { defineConfig } from "@workleap/create-schemas";
-import { openapiFetchPlugin } from "@workleap/create-schemas/plugins";
+import { experimental_openapiFetchPlugin } from "@workleap/create-schemas/plugins";
 
 export default defineConfig({
-    plugins: [openapiFetchPlugin()]
+    plugins: [experimental_openapiFetchPlugin()]
     input: "v1.yaml",
     outdir: "codegen",
 });
@@ -80,6 +80,58 @@ if (data?.point) {
 }
 ```
 
+### `experimental_openapiMSWPlugin`
+
+!!!warning Warning
+
+This plugin is currently marked as **experimental**. It may change at any time.
+
+!!!
+
+**Description:**
+
+This plugins outputs a very thin wrapper over [openapi-msw](https://www.npmjs.com/package/openapi-msw). This package lets your define typed MSW handlers.
+
+To use this client, you need to install the `openapi-msw` package:
+
++++ pnpm
+```bash
+pnpm add openapi-msw
+```
++++ npm
+```bash
+npm install openapi-msw
+```
++++ yarn
+```bash
+yarn add openapi-msw
+```
++++
+
+**Example usage:**
+
+```ts #2,5 create-schemas.config.ts 
+import { defineConfig } from "@workleap/create-schemas";
+import { experimental_openapiMSWPlugin } from "@workleap/create-schemas/plugins";
+
+export default defineConfig({
+    plugins: [experimental_openapiMSWPlugin()]
+    input: "v1.yaml",
+    outdir: "codegen",
+});
+```
+
+```ts #5-6
+import { http } from "./codegen/openapi-msw.ts";
+
+export const handlers = [
+    http.get("/good-vibes-points/{userId}", ({ response }) => {
+        return response(200).json({ pointx: 50 });
+                                 // ^^^^^^ Property "pointx" does not exist on type { points: number }
+    }),
+];
+```
+
 
 ## Creating a Plugin
 
@@ -122,7 +174,7 @@ export default defineConfig({
 });
 ```
 
-## Build hooks
+### Build hooks
 
 To interact with the code generation process, a plugin may include "hooks". Hooks are function that are are called at various stages of the generation. Hooks can affect how a build is run, add a file to the output, or modify a build once complete.
 

packages/create-schemas/src/plugins/index.ts

@@ -1,2 +1,3 @@
 export type { Plugin } from "./plugin.ts";
-export { openapiFetchPlugin } from "./openapi-fetch-plugin.ts";
+export { experimental_openapiFetchPlugin } from "./openapi-fetch-plugin.ts";
+export { experimental_openapiMSWPlugin } from "./openapi-msw-plugin.ts";