@kubb/plugin-msw 5.0.0-alpha.9 → 5.0.0-beta.4

package/package.json

@@ -1,49 +1,44 @@
 {
   "name": "@kubb/plugin-msw",
-  "version": "5.0.0-alpha.9",
+  "version": "5.0.0-beta.4",
   "description": "Mock Service Worker (MSW) handlers generator plugin for Kubb, creating API mocks from OpenAPI specifications for frontend development and testing.",
   "keywords": [
-    "msw",
-    "mock-service-worker",
     "api-mocking",
-    "mocking",
-    "mocks",
-    "testing",
+    "code-generator",
+    "codegen",
     "development",
     "interceptor",
-    "typescript",
-    "openapi",
-    "swagger",
+    "kubb",
+    "mock-service-worker",
+    "mocking",
+    "mocks",
+    "msw",
     "oas",
-    "code-generator",
-    "codegen",
+    "openapi",
     "plugins",
-    "kubb"
+    "swagger",
+    "testing",
+    "typescript"
   ],
+  "license": "MIT",
+  "author": "stijnvanhulle",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/kubb-labs/kubb.git",
+    "url": "git+https://github.com/kubb-labs/plugins.git",
     "directory": "packages/plugin-msw"
   },
-  "license": "MIT",
-  "author": "stijnvanhulle",
-  "sideEffects": false,
+  "files": [
+    "src",
+    "dist",
+    "extension.yaml",
+    "!/**/**.test.**",
+    "!/**/__tests__/**",
+    "!/**/__snapshots__/**"
+  ],
   "type": "module",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./components": {
-      "import": "./dist/components.js",
-      "require": "./dist/components.cjs"
-    },
-    "./generators": {
-      "import": "./dist/generators.js",
-      "require": "./dist/generators.cjs"
-    },
-    "./package.json": "./package.json"
-  },
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
@@ -61,13 +56,37 @@
       ]
     }
   },
-  "files": [
-    "src",
-    "dist",
-    "!/**/**.test.**",
-    "!/**/__tests__/**",
-    "!/**/__snapshots__/**"
-  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./components": {
+      "import": "./dist/components.js",
+      "require": "./dist/components.cjs"
+    },
+    "./generators": {
+      "import": "./dist/generators.js",
+      "require": "./dist/generators.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@kubb/core": "5.0.0-beta.4",
+    "@kubb/renderer-jsx": "5.0.0-beta.4",
+    "@kubb/plugin-faker": "5.0.0-beta.4",
+    "@kubb/plugin-ts": "5.0.0-beta.4"
+  },
+  "devDependencies": {
+    "@internals/utils": "0.0.0"
+  },
+  "peerDependencies": {
+    "@kubb/renderer-jsx": "5.0.0-beta.4"
+  },
   "size-limit": [
     {
       "path": "./dist/*.js",
@@ -75,31 +94,14 @@
       "gzip": true
     }
   ],
-  "dependencies": {
-    "@kubb/react-fabric": "0.14.0",
-    "@kubb/core": "5.0.0-alpha.9",
-    "@kubb/oas": "5.0.0-alpha.9",
-    "@kubb/plugin-oas": "5.0.0-alpha.9",
-    "@kubb/plugin-faker": "5.0.0-alpha.9",
-    "@kubb/plugin-ts": "5.0.0-alpha.9"
-  },
-  "devDependencies": {
-    "@internals/utils": "0.0.0"
-  },
   "engines": {
     "node": ">=22"
   },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
   "scripts": {
     "build": "tsdown && size-limit",
     "clean": "npx rimraf ./dist",
-    "lint": "bun biome lint .",
-    "lint:fix": "bun biome lint --fix --unsafe .",
+    "lint": "oxlint .",
+    "lint:fix": "oxlint --fix .",
     "release": "pnpm publish --no-git-check",
     "release:canary": "bash ../../.github/canary.sh && node ../../scripts/build.js canary && pnpm publish --no-git-check",
     "start": "tsdown --watch",

package/src/components/Handlers.tsx

@@ -1,5 +1,5 @@
-import { File } from '@kubb/react-fabric'
-import type { FabricReactNode } from '@kubb/react-fabric/types'
+import { File } from '@kubb/renderer-jsx'
+import type { KubbReactNode } from '@kubb/renderer-jsx/types'
 
 type HandlersProps = {
   /**
@@ -10,7 +10,7 @@ type HandlersProps = {
   handlers: string[]
 }
 
-export function Handlers({ name, handlers }: HandlersProps): FabricReactNode {
+export function Handlers({ name, handlers }: HandlersProps): KubbReactNode {
   return (
     <File.Source name={name} isIndexable isExportable>
       {`export const ${name} = ${JSON.stringify(handlers).replaceAll(`"`, '')} as const`}

package/src/components/Mock.tsx

@@ -1,48 +1,56 @@
 import { URLPath } from '@internals/utils'
-import type { OasTypes, Operation } from '@kubb/oas'
-import { File, Function, FunctionParams } from '@kubb/react-fabric'
-import type { FabricReactNode } from '@kubb/react-fabric/types'
+import { ast } from '@kubb/core'
+import { functionPrinter } from '@kubb/plugin-ts'
+import { File, Function } from '@kubb/renderer-jsx'
+import type { KubbReactNode } from '@kubb/renderer-jsx/types'
+import { getContentType, getMswMethod, getMswUrl, getPrimarySuccessResponse, hasResponseSchema } from '../utils.ts'
 
 type Props = {
-  /**
-   * Name of the function
-   */
   name: string
   typeName: string
-  fakerName: string
+  requestTypeName?: string
   baseURL: string | undefined
-  operation: Operation
+  node: ast.OperationNode
 }
 
-export function Mock({ baseURL = '', name, typeName, operation }: Props): FabricReactNode {
-  const method = operation.method
-  const successStatusCodes = operation.getResponseStatusCodes().filter((code) => code.startsWith('2'))
-  const statusCode = successStatusCodes.length > 0 ? Number(successStatusCodes[0]) : 200
+const declarationPrinter = functionPrinter({ mode: 'declaration' })
 
-  const responseObject = operation.getResponseByStatusCode(statusCode) as OasTypes.ResponseObject
-  const contentType = Object.keys(responseObject.content || {})?.[0]
-  const url = new URLPath(operation.path).toURLPath().replace(/([^/]):/g, '$1\\\\:')
+export function Mock({ baseURL = '', name, typeName, requestTypeName, node }: Props): KubbReactNode {
+  const method = getMswMethod(node)
+  const successResponse = getPrimarySuccessResponse(node)
+  const statusCode = successResponse ? Number(successResponse.statusCode) : 200
+  const contentType = getContentType(successResponse)
+  const url = new URLPath(getMswUrl(node)).toURLPath()
 
   const headers = [contentType ? `'Content-Type': '${contentType}'` : undefined].filter(Boolean)
+  const responseHasSchema = hasResponseSchema(successResponse)
+  const dataType = responseHasSchema ? typeName : 'string | number | boolean | null | object'
 
-  const hasResponseSchema = contentType && responseObject?.content?.[contentType]?.schema !== undefined
+  const callbackType = requestTypeName
+    ? `HttpResponseResolver<Record<string, string>, ${requestTypeName}, any>`
+    : `((info: Parameters<Parameters<typeof http.${method}>[1]>[0]) => Response | Promise<Response>)`
 
-  // If no response schema, uses any type but function to avoid overriding callback
-  const dataType = hasResponseSchema ? typeName : 'string | number | boolean | null | object'
+  const params = declarationPrinter.print(
+    ast.createFunctionParameters({
+      params: [
+        ast.createFunctionParameter({
+          name: 'data',
+          type: ast.createParamsType({
+            variant: 'reference',
+            name: `${dataType} | ${callbackType}`,
+          }),
+          optional: true,
+        }),
+      ],
+    }),
+  )
 
-  const params = FunctionParams.factory({
-    data: {
-      type: `${dataType} | ((
-        info: Parameters<Parameters<typeof http.${method}>[1]>[0],
-      ) => Response | Promise<Response>)`,
-      optional: true,
-    },
-  })
+  const httpCall = requestTypeName ? `http.${method}<Record<string, string>, ${requestTypeName}, any>` : `http.${method}`
 
   return (
     <File.Source name={name} isIndexable isExportable>
-      <Function name={name} export params={params.toConstructor()}>
-        {`return http.${method}(\`${baseURL}${url.replace(/([^/]):/g, '$1\\\\:')}\`, function handler(info) {
+      <Function name={name} export params={params ?? ''}>
+        {`return ${httpCall}(\`${baseURL}${url.replace(/([^/]):/g, '$1\\\\:')}\`, function handler(info) {
     if(typeof data === 'function') return data(info)
 
     return new Response(JSON.stringify(data), {

package/src/components/MockWithFaker.tsx

@@ -1,43 +1,55 @@
 import { URLPath } from '@internals/utils'
-import type { OasTypes, Operation } from '@kubb/oas'
-import { File, Function, FunctionParams } from '@kubb/react-fabric'
-import type { FabricReactNode } from '@kubb/react-fabric/types'
+import { ast } from '@kubb/core'
+import { functionPrinter } from '@kubb/plugin-ts'
+import { File, Function } from '@kubb/renderer-jsx'
+import type { KubbReactNode } from '@kubb/renderer-jsx/types'
+import { getContentType, getMswMethod, getMswUrl, getPrimarySuccessResponse } from '../utils.ts'
 
 type Props = {
-  /**
-   * Name of the function
-   */
   name: string
   typeName: string
+  requestTypeName?: string
   fakerName: string
   baseURL: string | undefined
-  operation: Operation
+  node: ast.OperationNode
 }
 
-export function MockWithFaker({ baseURL = '', name, fakerName, typeName, operation }: Props): FabricReactNode {
-  const method = operation.method
-  const successStatusCodes = operation.getResponseStatusCodes().filter((code) => code.startsWith('2'))
-  const statusCode = successStatusCodes.length > 0 ? Number(successStatusCodes[0]) : 200
+const declarationPrinter = functionPrinter({ mode: 'declaration' })
 
-  const responseObject = operation.getResponseByStatusCode(statusCode) as OasTypes.ResponseObject
-  const contentType = Object.keys(responseObject.content || {})?.[0]
-  const url = new URLPath(operation.path).toURLPath().replace(/([^/]):/g, '$1\\\\:')
+export function MockWithFaker({ baseURL = '', name, fakerName, typeName, requestTypeName, node }: Props): KubbReactNode {
+  const method = getMswMethod(node)
+  const successResponse = getPrimarySuccessResponse(node)
+  const statusCode = successResponse ? Number(successResponse.statusCode) : 200
+  const contentType = getContentType(successResponse)
+  const url = new URLPath(getMswUrl(node)).toURLPath()
 
   const headers = [contentType ? `'Content-Type': '${contentType}'` : undefined].filter(Boolean)
 
-  const params = FunctionParams.factory({
-    data: {
-      type: `${typeName} | ((
-        info: Parameters<Parameters<typeof http.${method}>[1]>[0],
-      ) => Response | Promise<Response>)`,
-      optional: true,
-    },
-  })
+  const callbackType = requestTypeName
+    ? `HttpResponseResolver<Record<string, string>, ${requestTypeName}, any>`
+    : `((info: Parameters<Parameters<typeof http.${method}>[1]>[0]) => Response | Promise<Response>)`
+
+  const params = declarationPrinter.print(
+    ast.createFunctionParameters({
+      params: [
+        ast.createFunctionParameter({
+          name: 'data',
+          type: ast.createParamsType({
+            variant: 'reference',
+            name: `${typeName} | ${callbackType}`,
+          }),
+          optional: true,
+        }),
+      ],
+    }),
+  )
+
+  const httpCall = requestTypeName ? `http.${method}<Record<string, string>, ${requestTypeName}, any>` : `http.${method}`
 
   return (
     <File.Source name={name} isIndexable isExportable>
-      <Function name={name} export params={params.toConstructor()}>
-        {`return http.${method}('${baseURL}${url.replace(/([^/]):/g, '$1\\\\:')}', function handler(info) {
+      <Function name={name} export params={params ?? ''}>
+        {`return ${httpCall}('${baseURL}${url.replace(/([^/]):/g, '$1\\\\:')}', function handler(info) {
     if(typeof data === 'function') return data(info)
 
     return new Response(JSON.stringify(data || ${fakerName}(data)), {

package/src/components/Response.tsx

@@ -1,34 +1,40 @@
-import type { OasTypes, Operation } from '@kubb/oas'
-import { File, Function, FunctionParams } from '@kubb/react-fabric'
-import type { FabricReactNode } from '@kubb/react-fabric/types'
+import { ast } from '@kubb/core'
+import { functionPrinter } from '@kubb/plugin-ts'
+import { File, Function } from '@kubb/renderer-jsx'
+import type { KubbReactNode } from '@kubb/renderer-jsx/types'
+import { getContentType, hasResponseSchema } from '../utils.ts'
 
 type Props = {
   typeName: string
-  operation: Operation
   name: string
-  statusCode: number
+  response: ast.ResponseNode
+  key?: string | number | null
 }
 
-export function Response({ name, typeName, operation, statusCode }: Props): FabricReactNode {
-  const responseObject = operation.getResponseByStatusCode(statusCode) as OasTypes.ResponseObject
-  const contentType = Object.keys(responseObject.content || {})?.[0]
+const declarationPrinter = functionPrinter({ mode: 'declaration' })
 
+export function Response({ name, typeName, response }: Props): KubbReactNode {
+  const statusCode = Number(response.statusCode)
+  const contentType = getContentType(response)
   const headers = [contentType ? `'Content-Type': '${contentType}'` : undefined].filter(Boolean)
 
-  const hasResponseSchema = contentType && responseObject?.content?.[contentType]?.schema !== undefined
-
-  const params = FunctionParams.factory({
-    data: {
-      type: `${typeName}`,
-      optional: !hasResponseSchema,
-    },
-  })
+  const params = declarationPrinter.print(
+    ast.createFunctionParameters({
+      params: [
+        ast.createFunctionParameter({
+          name: 'data',
+          type: ast.createParamsType({ variant: 'reference', name: typeName }),
+          optional: !hasResponseSchema(response),
+        }),
+      ],
+    }),
+  )
 
   const responseName = `${name}Response${statusCode}`
 
   return (
     <File.Source name={responseName} isIndexable isExportable>
-      <Function name={responseName} export params={params.toConstructor()}>
+      <Function name={responseName} export params={params ?? ''}>
         {`
     return new Response(JSON.stringify(data), {
       status: ${statusCode},

package/src/generators/handlersGenerator.tsx

@@ -1,37 +1,37 @@
-import { usePluginDriver } from '@kubb/core/hooks'
-import { createReactGenerator } from '@kubb/plugin-oas/generators'
-import { useOas, useOperationManager } from '@kubb/plugin-oas/hooks'
-import { getBanner, getFooter } from '@kubb/plugin-oas/utils'
-import { File } from '@kubb/react-fabric'
+import { defineGenerator } from '@kubb/core'
+import { File, jsxRenderer } from '@kubb/renderer-jsx'
 import { Handlers } from '../components/Handlers.tsx'
 import type { PluginMsw } from '../types'
+import { transformName } from '../utils.ts'
 
-export const handlersGenerator = createReactGenerator<PluginMsw>({
+export const handlersGenerator = defineGenerator<PluginMsw>({
   name: 'plugin-msw',
-  Operations({ operations, generator, plugin }) {
-    const driver = usePluginDriver()
+  renderer: jsxRenderer,
+  operations(nodes, ctx) {
+    const { resolver, config, root, adapter } = ctx
+    const { output, group, transformers } = ctx.options
 
-    const oas = useOas()
-    const { getName, getFile } = useOperationManager(generator)
+    const file = resolver.resolveFile({ name: 'handlers', extname: '.ts' }, { root, output, group })
 
-    const file = driver.getFile({ name: 'handlers', extname: '.ts', pluginName: plugin.name })
-
-    const imports = operations.map((operation) => {
-      const operationFile = getFile(operation, { pluginName: plugin.name })
-      const operationName = getName(operation, { pluginName: plugin.name, type: 'function' })
+    const imports = nodes.map((node) => {
+      const operationName = transformName(resolver.resolveName(node.operationId), 'function', transformers)
+      const operationFile = resolver.resolveFile(
+        { name: resolver.resolveName(node.operationId), extname: '.ts', tag: node.tags[0] ?? 'default', path: node.path },
+        { root, output, group },
+      )
 
       return <File.Import key={operationFile.path} name={[operationName]} root={file.path} path={operationFile.path} />
     })
 
-    const handlers = operations.map((operation) => `${getName(operation, { type: 'function', pluginName: plugin.name })}()`)
+    const handlers = nodes.map((node) => `${transformName(resolver.resolveName(node.operationId), 'function', transformers)}()`)
 
     return (
       <File
         baseName={file.baseName}
         path={file.path}
         meta={file.meta}
-        banner={getBanner({ oas, output: plugin.options.output, config: driver.config })}
-        footer={getFooter({ oas, output: plugin.options.output })}
+        banner={resolver.resolveBanner(adapter.inputNode, { output, config })}
+        footer={resolver.resolveFooter(adapter.inputNode, { output, config })}
       >
         {imports}
         <Handlers name={'handlers'} handlers={handlers} />

package/src/generators/mswGenerator.tsx

@@ -1,94 +1,83 @@
-import { usePluginDriver } from '@kubb/core/hooks'
+import { defineGenerator } from '@kubb/core'
 import { pluginFakerName } from '@kubb/plugin-faker'
-import { createReactGenerator } from '@kubb/plugin-oas/generators'
-import { useOas, useOperationManager } from '@kubb/plugin-oas/hooks'
-import { getBanner, getFooter } from '@kubb/plugin-oas/utils'
 import { pluginTsName } from '@kubb/plugin-ts'
-import { File } from '@kubb/react-fabric'
+import { File, jsxRenderer } from '@kubb/renderer-jsx'
 import { Mock, MockWithFaker, Response } from '../components'
 import type { PluginMsw } from '../types'
+import { getResponseTypes, getSuccessResponses, resolveFakerMeta, transformName } from '../utils.ts'
 
-export const mswGenerator = createReactGenerator<PluginMsw>({
+export const mswGenerator = defineGenerator<PluginMsw>({
   name: 'msw',
-  Operation({ operation, generator, plugin }) {
-    const {
-      options: { output, parser, baseURL },
-    } = plugin
-    const driver = usePluginDriver()
-
-    const oas = useOas()
-    const { getSchemas, getName, getFile } = useOperationManager(generator)
+  renderer: jsxRenderer,
+  operation(node, ctx) {
+    const { driver, resolver, config, root, adapter } = ctx
+    const { output, parser, baseURL, group, transformers } = ctx.options
 
+    const fileName = resolver.resolveName(node.operationId)
     const mock = {
-      name: getName(operation, { type: 'function' }),
-      file: getFile(operation),
+      name: transformName(fileName, 'function', transformers),
+      file: resolver.resolveFile({ name: fileName, extname: '.ts', tag: node.tags[0] ?? 'default', path: node.path }, { root, output, group }),
     }
 
-    const faker = {
-      file: getFile(operation, { pluginName: pluginFakerName }),
-      schemas: getSchemas(operation, { pluginName: pluginFakerName, type: 'function' }),
-    }
+    const fakerPlugin = parser === 'faker' ? driver.getPlugin(pluginFakerName) : undefined
+    const faker =
+      parser === 'faker' && fakerPlugin
+        ? resolveFakerMeta(node, {
+            root,
+            fakerResolver: driver.getResolver(pluginFakerName),
+            fakerOutput: fakerPlugin.options?.output ?? output,
+            fakerGroup: fakerPlugin.options?.group,
+          })
+        : undefined
+
+    const pluginTs = driver.getPlugin(pluginTsName)
+    if (!pluginTs) return null
+    const tsResolver = driver.getResolver(pluginTsName)
 
     const type = {
-      file: getFile(operation, { pluginName: pluginTsName }),
-      schemas: getSchemas(operation, { pluginName: pluginTsName, type: 'type' }),
+      file: tsResolver.resolveFile(
+        { name: node.operationId, extname: '.ts', tag: node.tags[0] ?? 'default', path: node.path },
+        { root, output: pluginTs.options?.output ?? output, group: pluginTs.options?.group },
+      ),
+      responseName: tsResolver.resolveResponseName(node),
     }
 
-    const responseStatusCodes = operation.getResponseStatusCodes()
-
-    const types: [statusCode: number | 'default', typeName: string][] = []
-
-    for (const code of responseStatusCodes) {
-      if (code === 'default') {
-        types.push(['default', type.schemas.response.name])
-        continue
-      }
+    const types = getResponseTypes(node, tsResolver)
+    const successResponses = getSuccessResponses(node)
+    const hasSuccessSchema = successResponses.some((response) => !!response.schema)
 
-      if (code.startsWith('2')) {
-        types.push([Number(code), type.schemas.response.name])
-        continue
-      }
-
-      const codeType = type.schemas.errors?.find((err) => err.statusCode === Number(code))
-      if (codeType) types.push([Number(code), codeType.name])
-    }
+    const requestName = node.requestBody?.content?.[0]?.schema ? tsResolver.resolveDataName(node) : undefined
 
     return (
       <File
         baseName={mock.file.baseName}
         path={mock.file.path}
         meta={mock.file.meta}
-        banner={getBanner({ oas, output, config: driver.config })}
-        footer={getFooter({ oas, output })}
+        banner={resolver.resolveBanner(adapter.inputNode, { output, config })}
+        footer={resolver.resolveFooter(adapter.inputNode, { output, config })}
       >
         <File.Import name={['http']} path="msw" />
-        <File.Import name={['ResponseResolver']} isTypeOnly path="msw" />
+        <File.Import name={['HttpResponseResolver']} isTypeOnly path="msw" />
         <File.Import
-          name={Array.from(new Set([type.schemas.response.name, ...types.map((t) => t[1])]))}
+          name={Array.from(new Set([type.responseName, ...types.map((t) => t[1]), ...(requestName ? [requestName] : [])]))}
           path={type.file.path}
           root={mock.file.path}
           isTypeOnly
         />
-        {parser === 'faker' && faker.file && faker.schemas.response && (
-          <File.Import name={[faker.schemas.response.name]} root={mock.file.path} path={faker.file.path} />
-        )}
+        {parser === 'faker' && faker && <File.Import name={[faker.name]} root={mock.file.path} path={faker.file.path} />}
 
         {types
           .filter(([code]) => code !== 'default')
-          .map(([code, typeName]) => (
-            <Response typeName={typeName} operation={operation} name={mock.name} statusCode={code as number} />
-          ))}
-        {parser === 'faker' && (
-          <MockWithFaker
-            name={mock.name}
-            typeName={type.schemas.response.name}
-            fakerName={faker.schemas.response.name}
-            operation={operation}
-            baseURL={baseURL}
-          />
-        )}
-        {parser === 'data' && (
-          <Mock name={mock.name} typeName={type.schemas.response.name} fakerName={faker.schemas.response.name} operation={operation} baseURL={baseURL} />
+          .map(([code, typeName]) => {
+            const response = node.responses.find((item) => item.statusCode === String(code))
+            if (!response) return null
+            return <Response key={typeName} typeName={typeName} response={response} name={mock.name} />
+          })}
+
+        {parser === 'faker' && faker && hasSuccessSchema ? (
+          <MockWithFaker name={mock.name} typeName={type.responseName} requestTypeName={requestName} fakerName={faker.name} node={node} baseURL={baseURL} />
+        ) : (
+          <Mock name={mock.name} typeName={type.responseName} requestTypeName={requestName} node={node} baseURL={baseURL} />
         )}
       </File>
     )

package/src/index.ts

@@ -1,2 +1,2 @@
-export { pluginMsw, pluginMswName } from './plugin.ts'
+export { default, pluginMsw, pluginMswName } from './plugin.ts'
 export type { PluginMsw } from './types.ts'