@kubb/plugin-msw 3.0.0-alpha.0

package/src/OperationGenerator.tsx

@@ -0,0 +1,66 @@
+import { OperationGenerator as Generator } from '@kubb/plugin-oas'
+import { Oas } from '@kubb/plugin-oas/components'
+import { App, createRoot } from '@kubb/react'
+
+import { Mock } from './components/Mock.tsx'
+import { Operations } from './components/Operations.tsx'
+
+import type { Operation } from '@kubb/oas'
+import type { OperationMethodResult, OperationsByMethod } from '@kubb/plugin-oas'
+import type { FileMeta, PluginMsw } from './types.ts'
+
+export class OperationGenerator extends Generator<PluginMsw['resolvedOptions'], PluginMsw> {
+  async all(operations: Operation[], operationsByMethod: OperationsByMethod): OperationMethodResult<FileMeta> {
+    const { oas, pluginManager, plugin, mode } = this.context
+
+    const root = createRoot({
+      logger: pluginManager.logger,
+    })
+
+    const templates = {
+      operations: Operations.templates,
+      mock: Mock.templates,
+      ...this.options.templates,
+    }
+
+    root.render(
+      <App pluginManager={pluginManager} plugin={plugin} mode={mode}>
+        <Oas oas={oas} operations={operations} generator={this}>
+          {templates?.operations && <Operations.File templates={templates.operations} />}
+        </Oas>
+      </App>,
+    )
+
+    return root.files
+  }
+
+  async operation(operation: Operation, options: PluginMsw['resolvedOptions']): OperationMethodResult<FileMeta> {
+    const { oas, pluginManager, plugin, mode } = this.context
+
+    const root = createRoot({
+      logger: pluginManager.logger,
+    })
+
+    const templates = {
+      handlers: Operations.templates,
+      mock: Mock.templates,
+      ...options.templates,
+    }
+
+    if (!templates?.mock) {
+      return []
+    }
+
+    root.render(
+      <App pluginManager={pluginManager} plugin={{ ...plugin, options }} mode={mode}>
+        <Oas oas={oas} operations={[operation]} generator={this}>
+          <Oas.Operation operation={operation}>
+            <Mock.File templates={templates.mock} />
+          </Oas.Operation>
+        </Oas>
+      </App>,
+    )
+
+    return root.files
+  }
+}

package/src/components/Mock.tsx

@@ -0,0 +1,113 @@
+import { PackageManager } from '@kubb/core'
+import { URLPath } from '@kubb/core/utils'
+import { Parser, File, useApp } from '@kubb/react'
+import { pluginFakerName } from '@kubb/plugin-faker'
+import { useOperation, useOperationManager } from '@kubb/plugin-oas/hooks'
+
+import type { HttpMethod } from '@kubb/oas'
+import type { ReactNode } from 'react'
+import type { FileMeta, PluginMsw } from '../types.ts'
+
+type TemplateProps = {
+  /**
+   * Name of the function
+   */
+  name: string
+  /**
+   * Method of the current operation, see useOperation.
+   */
+  method: HttpMethod
+  /**
+   * Path of the mock
+   */
+  path: URLPath
+  /**
+   * Name of the import for the mock(this is a function).
+   * @example createPet
+   */
+  responseName: string
+}
+
+function Template({ name, method, path, responseName }: TemplateProps): ReactNode {
+  return (
+    <>
+      {`
+  export const ${name} = http.${method}('*${path.toURLPath()}', function handler(info) {
+    return new Response(JSON.stringify(${responseName}()), {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  })
+  `}
+    </>
+  )
+}
+
+const defaultTemplates = { default: Template } as const
+
+type Props = {
+  /**
+   * This will make it possible to override the default behaviour.
+   */
+  Template?: React.ComponentType<React.ComponentProps<typeof Template>>
+}
+
+export function Mock({ Template = defaultTemplates.default }: Props): ReactNode {
+  const { pluginManager } = useApp<PluginMsw>()
+  const { getSchemas, getName } = useOperationManager()
+  const operation = useOperation()
+
+  const schemas = getSchemas(operation)
+  const name = getName(operation, { type: 'function' })
+  const responseName = pluginManager.resolveName({
+    pluginKey: [pluginFakerName],
+    name: schemas.response.name,
+    type: 'type',
+  })
+
+  return <Template name={name} responseName={responseName} method={operation.method} path={new URLPath(operation.path)} />
+}
+
+type FileProps = {
+  /**
+   * This will make it possible to override the default behaviour.
+   */
+  templates?: typeof defaultTemplates
+}
+
+Mock.File = function ({ templates = defaultTemplates }: FileProps): ReactNode {
+  const {
+    pluginManager,
+    plugin: {
+      options: { extName },
+    },
+  } = useApp<PluginMsw>()
+  const { getSchemas, getFile } = useOperationManager()
+  const operation = useOperation()
+
+  const schemas = getSchemas(operation)
+  const file = getFile(operation)
+  const fileFaker = getFile(operation, { pluginKey: [pluginFakerName] })
+  const responseName = pluginManager.resolveName({
+    pluginKey: [pluginFakerName],
+    name: schemas.response.name,
+    type: 'function',
+  })
+
+  const Template = templates.default
+
+  return (
+    <Parser language="typescript">
+      <File<FileMeta> baseName={file.baseName} path={file.path} meta={file.meta}>
+        <File.Import name={['http']} path={'msw'} />
+        {fileFaker && responseName && <File.Import extName={extName} name={[responseName]} root={file.path} path={fileFaker.path} />}
+        <File.Source>
+          <Mock Template={Template} />
+        </File.Source>
+      </File>
+    </Parser>
+  )
+}
+
+Mock.templates = defaultTemplates

package/src/components/Operations.tsx

@@ -0,0 +1,96 @@
+import { Parser, File, useApp } from '@kubb/react'
+import { useOperationManager, useOperations } from '@kubb/plugin-oas/hooks'
+
+import type { KubbNode } from '@kubb/react'
+import type { ReactNode } from 'react'
+import type { FileMeta, PluginMsw } from '../types.ts'
+
+type TemplateProps = {
+  /**
+   * Name of the function
+   */
+  name: string
+  handlers: string[]
+}
+
+function Template({ name, handlers }: TemplateProps): ReactNode {
+  return <>{`export const ${name} = ${JSON.stringify(handlers).replaceAll(`"`, '')} as const`}</>
+}
+
+type ParserTemplateProps = {
+  children?: React.ReactNode
+}
+
+function RootTemplate({ children }: ParserTemplateProps) {
+  const {
+    pluginManager,
+    plugin: { key: pluginKey },
+  } = useApp<PluginMsw>()
+
+  const { getName, getFile } = useOperationManager()
+
+  const file = pluginManager.getFile({ name: 'handlers', extName: '.ts', pluginKey })
+  const operations = useOperations()
+
+  const imports = operations
+    .map((operation) => {
+      const operationFile = getFile(operation, { pluginKey })
+      const operationName = getName(operation, { pluginKey, type: 'function' })
+
+      return <File.Import key={operationFile.path} name={[operationName]} root={file.path} path={operationFile.path} />
+    })
+    .filter(Boolean)
+
+  return (
+    <Parser language="typescript">
+      <File<FileMeta> baseName={file.baseName} path={file.path} meta={file.meta}>
+        {imports}
+        <File.Source>{children}</File.Source>
+      </File>
+    </Parser>
+  )
+}
+
+const defaultTemplates = { default: Template, root: RootTemplate } as const
+
+type Templates = Partial<typeof defaultTemplates>
+
+type Props = {
+  /**
+   * This will make it possible to override the default behaviour.
+   */
+  Template?: React.ComponentType<React.ComponentProps<typeof Template>>
+}
+
+export function Operations({ Template = defaultTemplates.default }: Props): ReactNode {
+  const {
+    plugin: { key: pluginKey },
+  } = useApp<PluginMsw>()
+
+  const operations = useOperations()
+  const { getName } = useOperationManager()
+
+  return <Template name="handlers" handlers={operations.map((operation) => getName(operation, { type: 'function', pluginKey }))} />
+}
+
+type FileProps = {
+  /**
+   * This will make it possible to override the default behaviour.
+   */
+  templates?: Templates
+}
+
+Operations.File = function (props: FileProps): KubbNode {
+  const templates = { ...defaultTemplates, ...props.templates }
+
+  const Template = templates.default
+  const RootTemplate = templates.root
+
+  return (
+    <RootTemplate>
+      <Operations Template={Template} />
+    </RootTemplate>
+  )
+}
+
+Operations.templates = defaultTemplates

package/src/components/__snapshots__/Mock/Pets.ts

@@ -0,0 +1,7 @@
+export const createPets = http.post('*/pets', function handler(info) {
+  return new Response(JSON.stringify(CreatePetsMutationResponse()), {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+})

package/src/components/__snapshots__/Mock/showPetsById.ts

@@ -0,0 +1,7 @@
+export const showPetById = http.get('*/pets/:petId', function handler(info) {
+  return new Response(JSON.stringify(ShowPetByIdQueryResponse()), {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+})

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { Mock } from './Mock.tsx'
+export { Operations } from './Operations.tsx'

package/src/index.ts

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

package/src/plugin.ts

@@ -0,0 +1,123 @@
+import path from 'node:path'
+
+import { FileManager, PluginManager, createPlugin } from '@kubb/core'
+import { camelCase } from '@kubb/core/transformers'
+import { renderTemplate } from '@kubb/core/utils'
+import { pluginOasName } from '@kubb/plugin-oas'
+import { getGroupedByTagFiles } from '@kubb/plugin-oas/utils'
+import { pluginFakerName } from '@kubb/plugin-faker'
+import { pluginTsName } from '@kubb/plugin-ts'
+
+import { OperationGenerator } from './OperationGenerator.tsx'
+import { Mock, Operations } from './components/index.ts'
+
+import type { Plugin } from '@kubb/core'
+import type { PluginOas as SwaggerPluginOptions } from '@kubb/plugin-oas'
+import type { PluginMsw } from './types.ts'
+
+export const pluginMswName = 'plugin-msw' satisfies PluginMsw['name']
+
+export const pluginMsw = createPlugin<PluginMsw>((options) => {
+  const { output = { path: 'handlers' }, group, exclude = [], include, override = [], transformers = {}, templates } = options
+  const template = group?.output ? group.output : `${output.path}/{{tag}}Controller`
+
+  return {
+    name: pluginMswName,
+    options: {
+      extName: output.extName,
+      templates: {
+        operations: Operations.templates,
+        mock: Mock.templates,
+        ...templates,
+      },
+    },
+    pre: [pluginOasName, pluginTsName, pluginFakerName],
+    resolvePath(baseName, pathMode, options) {
+      const root = path.resolve(this.config.root, this.config.output.path)
+      const mode = pathMode ?? FileManager.getMode(path.resolve(root, output.path))
+
+      if (mode === 'single') {
+        /**
+         * when output is a file then we will always append to the same file(output file), see fileManager.addOrAppend
+         * Other plugins then need to call addOrAppend instead of just add from the fileManager class
+         */
+        return path.resolve(root, output.path)
+      }
+
+      if (options?.tag && group?.type === 'tag') {
+        const tag = camelCase(options.tag)
+
+        return path.resolve(root, renderTemplate(template, { tag }), baseName)
+      }
+
+      return path.resolve(root, output.path, baseName)
+    },
+    resolveName(name, type) {
+      const resolvedName = camelCase(name, {
+        suffix: type ? 'handler' : undefined,
+        isFile: type === 'file',
+      })
+      if (type) {
+        return transformers?.name?.(resolvedName, type) || resolvedName
+      }
+
+      return resolvedName
+    },
+    async writeFile(path, source) {
+      if (!path.endsWith('.ts') || !source) {
+        return
+      }
+
+      return this.fileManager.write(path, source, { sanity: false })
+    },
+    async buildStart() {
+      const [swaggerPlugin]: [Plugin<SwaggerPluginOptions>] = PluginManager.getDependedPlugins<SwaggerPluginOptions>(this.plugins, [pluginOasName])
+
+      const oas = await swaggerPlugin.api.getOas()
+      const root = path.resolve(this.config.root, this.config.output.path)
+      const mode = FileManager.getMode(path.resolve(root, output.path))
+
+      const operationGenerator = new OperationGenerator(this.plugin.options, {
+        oas,
+        pluginManager: this.pluginManager,
+        plugin: this.plugin,
+        contentType: swaggerPlugin.api.contentType,
+        exclude,
+        include,
+        override,
+        mode,
+      })
+
+      const files = await operationGenerator.build()
+      await this.addFile(...files)
+    },
+    async buildEnd() {
+      if (this.config.output.write === false) {
+        return
+      }
+
+      const root = path.resolve(this.config.root, this.config.output.path)
+
+      if (group?.type === 'tag') {
+        const rootFiles = await getGroupedByTagFiles({
+          logger: this.logger,
+          files: this.fileManager.files,
+          plugin: this.plugin,
+          template,
+          exportAs: group.exportAs || '{{tag}}Handlers',
+          root,
+          output,
+        })
+
+        await this.addFile(...rootFiles)
+      }
+
+      await this.fileManager.addIndexes({
+        root,
+        output,
+        meta: { pluginKey: this.plugin.key },
+        logger: this.logger,
+      })
+    },
+  }
+})

package/src/types.ts

@@ -0,0 +1,95 @@
+import type { Plugin, PluginFactoryOptions, ResolveNameParams } from '@kubb/core'
+import type * as KubbFile from '@kubb/fs/types'
+
+import type { Exclude, Include, Override, ResolvePathOptions } from '@kubb/plugin-oas'
+import type { Mock, Operations } from './components/index.ts'
+
+type Templates = {
+  operations?: typeof Operations.templates | false
+  mock?: typeof Mock.templates | false
+}
+
+export type Options = {
+  output?: {
+    /**
+     * Relative path to save the MSW mocks.
+     * When output is a file it will save all models inside that file else it will create a file per schema item.
+     * @default 'mocks'
+     */
+    path: string
+    /**
+     * Name to be used for the `export * as {{exportAs}} from './'`
+     */
+    exportAs?: string
+    /**
+     * Add an extension to the generated imports and exports, default it will not use an extension
+     */
+    extName?: KubbFile.Extname
+    /**
+     * Define what needs to exported, here you can also disable the export of barrel files
+     * @default `'barrel'`
+     */
+    exportType?: 'barrel' | 'barrelNamed' | false
+  }
+  /**
+   * Group the MSW mocks based on the provided name.
+   */
+  group?: {
+    /**
+     * Tag will group based on the operation tag inside the Swagger file
+     */
+    type: 'tag'
+    /**
+     * Relative path to save the grouped MSW mocks.
+     *
+     * `{{tag}}` will be replaced by the current tagName.
+     * @example `${output}/{{tag}}Controller` => `mocks/PetController`
+     * @default `${output}/{{tag}}Controller`
+     */
+    output?: string
+    /**
+     * Name to be used for the `export * as {{exportAs}} from './`
+     * @default `"{{tag}}Handlers"`
+     */
+    exportAs?: string
+  }
+  /**
+   * Array containing exclude parameters to exclude/skip tags/operations/methods/paths.
+   */
+  exclude?: Array<Exclude>
+  /**
+   * Array containing include parameters to include tags/operations/methods/paths.
+   */
+  include?: Array<Include>
+  /**
+   * Array containing override parameters to override `options` based on tags/operations/methods/paths.
+   */
+  override?: Array<Override<ResolvedOptions>>
+  transformers?: {
+    /**
+     * Customize the names based on the type that is provided by the plugin.
+     */
+    name?: (name: ResolveNameParams['name'], type?: ResolveNameParams['type']) => string
+  }
+  /**
+   * Make it possible to override one of the templates
+   */
+  templates?: Partial<Templates>
+}
+type ResolvedOptions = {
+  extName: KubbFile.Extname | undefined
+  templates: NonNullable<Templates>
+}
+
+export type FileMeta = {
+  pluginKey?: Plugin['key']
+  tag?: string
+}
+
+export type PluginMsw = PluginFactoryOptions<'plugin-msw', Options, ResolvedOptions, never, ResolvePathOptions>
+
+declare module '@kubb/core' {
+  export interface _Register {
+    ['@kubb/plugin-msw']: PluginMsw
+  }
+}