@kubb/plugin-cypress 5.0.0-alpha.8 → 5.0.0-beta.10

package/package.json

@@ -1,73 +1,63 @@
 {
   "name": "@kubb/plugin-cypress",
-  "version": "5.0.0-alpha.8",
-  "description": "Cypress test generator plugin for Kubb, creating end-to-end tests from OpenAPI specifications for automated API testing.",
+  "version": "5.0.0-beta.10",
+  "description": "Generate Cypress request commands and e2e test fixtures from your OpenAPI specification, enabling automated API testing with zero manual setup.",
   "keywords": [
+    "code-generation",
+    "codegen",
     "cypress",
     "e2e-testing",
-    "end-to-end",
-    "testing",
-    "test-generation",
-    "api-testing",
-    "test-automation",
-    "integration-testing",
-    "typescript",
+    "kubb",
     "openapi",
     "swagger",
-    "oas",
-    "code-generator",
-    "codegen",
-    "plugins",
-    "kubb"
+    "test-generation",
+    "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-cypress"
   },
-  "license": "MIT",
-  "author": "stijnvanhulle",
-  "sideEffects": false,
+  "files": [
+    "src",
+    "dist",
+    "extension.yaml",
+    "!/**/**.test.**",
+    "!/**/__tests__/**",
+    "!/**/__snapshots__/**"
+  ],
   "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {},
   "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"
   },
-  "types": "./dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "utils": [
-        "./dist/utils.d.ts"
-      ],
-      "hooks": [
-        "./dist/hooks.d.ts"
-      ],
-      "components": [
-        "./dist/components.d.ts"
-      ],
-      "generators": [
-        "./dist/generators.d.ts"
-      ]
-    }
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@kubb/core": "5.0.0-beta.10",
+    "@kubb/renderer-jsx": "5.0.0-beta.10",
+    "@kubb/plugin-ts": "5.0.0-beta.10"
+  },
+  "devDependencies": {
+    "@internals/shared": "0.0.0",
+    "@internals/utils": "0.0.0"
+  },
+  "peerDependencies": {
+    "@kubb/renderer-jsx": "5.0.0-beta.10"
   },
-  "files": [
-    "src",
-    "dist",
-    "!/**/**.test.**",
-    "!/**/__tests__/**",
-    "!/**/__snapshots__/**"
-  ],
   "size-limit": [
     {
       "path": "./dist/*.js",
@@ -75,30 +65,14 @@
       "gzip": true
     }
   ],
-  "dependencies": {
-    "@kubb/react-fabric": "0.14.0",
-    "@kubb/core": "5.0.0-alpha.8",
-    "@kubb/oas": "5.0.0-alpha.8",
-    "@kubb/plugin-oas": "5.0.0-alpha.8",
-    "@kubb/plugin-ts": "5.0.0-alpha.8"
-  },
   "engines": {
     "node": ">=22"
   },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "devDependencies": {
-    "@internals/utils": "0.0.0"
-  },
   "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/Request.tsx

@@ -1,9 +1,10 @@
-import { URLPath } from '@internals/utils'
-import { type HttpMethod, isAllOptional, isOptional } from '@kubb/oas'
-import type { OperationSchemas } from '@kubb/plugin-oas'
-import { getPathParams } from '@kubb/plugin-oas/utils'
-import { File, Function, FunctionParams } from '@kubb/react-fabric'
-import type { FabricReactNode } from '@kubb/react-fabric/types'
+import { getOperationParameters } from '@internals/shared'
+import { camelCase, URLPath } from '@internals/utils'
+import { ast } from '@kubb/core'
+import type { ResolverTs } from '@kubb/plugin-ts'
+import { functionPrinter } from '@kubb/plugin-ts'
+import { File, Function } from '@kubb/renderer-jsx'
+import type { KubbReactNode } from '@kubb/renderer-jsx/types'
 import type { PluginCypress } from '../types.ts'
 
 type Props = {
@@ -11,137 +12,101 @@ type Props = {
    * Name of the function
    */
   name: string
-  typeSchemas: OperationSchemas
-  url: string
+  /**
+   * AST operation node
+   */
+  node: ast.OperationNode
+  /**
+   * TypeScript resolver for resolving param/data/response type names
+   */
+  resolver: ResolverTs
   baseURL: string | undefined
   dataReturnType: PluginCypress['resolvedOptions']['dataReturnType']
   paramsCasing: PluginCypress['resolvedOptions']['paramsCasing']
   paramsType: PluginCypress['resolvedOptions']['paramsType']
   pathParamsType: PluginCypress['resolvedOptions']['pathParamsType']
-  method: HttpMethod
-}
-
-type GetParamsProps = {
-  paramsCasing: PluginCypress['resolvedOptions']['paramsCasing']
-  paramsType: PluginCypress['resolvedOptions']['paramsType']
-  pathParamsType: PluginCypress['resolvedOptions']['pathParamsType']
-  typeSchemas: OperationSchemas
 }
 
-function getParams({ paramsType, paramsCasing, pathParamsType, typeSchemas }: GetParamsProps) {
-  if (paramsType === 'object') {
-    const pathParams = getPathParams(typeSchemas.pathParams, { typed: true, casing: paramsCasing })
-
-    return FunctionParams.factory({
-      data: {
-        mode: 'object',
-        children: {
-          ...pathParams,
-          data: typeSchemas.request?.name
-            ? {
-                type: typeSchemas.request?.name,
-                optional: isOptional(typeSchemas.request?.schema),
-              }
-            : undefined,
-          params: typeSchemas.queryParams?.name
-            ? {
-                type: typeSchemas.queryParams?.name,
-                optional: isOptional(typeSchemas.queryParams?.schema),
-              }
-            : undefined,
-          headers: typeSchemas.headerParams?.name
-            ? {
-                type: typeSchemas.headerParams?.name,
-                optional: isOptional(typeSchemas.headerParams?.schema),
-              }
-            : undefined,
-        },
-      },
-      options: {
-        type: 'Partial<Cypress.RequestOptions>',
+const declarationPrinter = functionPrinter({ mode: 'declaration' })
+
+export function Request({ baseURL = '', name, dataReturnType, resolver, node, paramsType, pathParamsType, paramsCasing }: Props): KubbReactNode {
+  const paramsNode = ast.createOperationParams(node, {
+    paramsType,
+    pathParamsType,
+    paramsCasing,
+    resolver,
+    extraParams: [
+      ast.createFunctionParameter({
+        name: 'options',
+        type: ast.createParamsType({ variant: 'reference', name: 'Partial<Cypress.RequestOptions>' }),
         default: '{}',
-      },
-    })
-  }
-
-  return FunctionParams.factory({
-    pathParams: typeSchemas.pathParams?.name
-      ? {
-          mode: pathParamsType === 'object' ? 'object' : 'inlineSpread',
-          children: getPathParams(typeSchemas.pathParams, { typed: true, casing: paramsCasing }),
-          default: isAllOptional(typeSchemas.pathParams?.schema) ? '{}' : undefined,
-        }
-      : undefined,
-    data: typeSchemas.request?.name
-      ? {
-          type: typeSchemas.request?.name,
-          optional: isOptional(typeSchemas.request?.schema),
-        }
-      : undefined,
-    params: typeSchemas.queryParams?.name
-      ? {
-          type: typeSchemas.queryParams?.name,
-          optional: isOptional(typeSchemas.queryParams?.schema),
-        }
-      : undefined,
-    headers: typeSchemas.headerParams?.name
-      ? {
-          type: typeSchemas.headerParams?.name,
-          optional: isOptional(typeSchemas.headerParams?.schema),
-        }
-      : undefined,
-    options: {
-      type: 'Partial<Cypress.RequestOptions>',
-      default: '{}',
-    },
+      }),
+    ],
   })
-}
+  const paramsSignature = declarationPrinter.print(paramsNode) ?? ''
 
-export function Request({ baseURL = '', name, dataReturnType, typeSchemas, url, method, paramsType, paramsCasing, pathParamsType }: Props): FabricReactNode {
-  const path = new URLPath(url, { casing: paramsCasing })
+  const responseType = resolver.resolveResponseName(node)
+  const returnType = dataReturnType === 'data' ? `Cypress.Chainable<${responseType}>` : `Cypress.Chainable<Cypress.Response<${responseType}>>`
 
-  const params = getParams({ paramsType, paramsCasing, pathParamsType, typeSchemas })
+  const casedPathParams = getOperationParameters(node, { paramsCasing }).path
+  // Build a lookup keyed by camelCase-normalized name so that path-template names
+  // (e.g. `{pet_id}`) correctly resolve to the function-parameter name (`petId`)
+  // even when the OpenAPI spec has inconsistent casing between the two.
+  const pathParamNameMap = new Map(casedPathParams.map((p) => [camelCase(p.name), p.name]))
 
-  const returnType =
-    dataReturnType === 'data' ? `Cypress.Chainable<${typeSchemas.response.name}>` : `Cypress.Chainable<Cypress.Response<${typeSchemas.response.name}>>`
-
-  // Build the URL template string - this will convert /pets/:petId to /pets/${petId}
-  const urlTemplate = path.toTemplateString({ prefix: baseURL })
-
-  // Build request options object
-  const requestOptions: string[] = [`method: '${method}'`, `url: ${urlTemplate}`]
+  const urlPath = new URLPath(node.path, { casing: paramsCasing })
+  const urlTemplate = urlPath.toTemplateString({
+    prefix: baseURL,
+    replacer: (param) => pathParamNameMap.get(camelCase(param)) ?? param,
+  })
 
-  // Add query params if they exist
-  if (typeSchemas.queryParams?.name) {
-    requestOptions.push('qs: params')
+  const requestOptions: string[] = [`method: '${node.method}'`, `url: ${urlTemplate}`]
+
+  const queryParams = getOperationParameters(node).query
+  if (queryParams.length > 0) {
+    const casedQueryParams = getOperationParameters(node, { paramsCasing }).query
+    // When paramsCasing renames query params (e.g. page_size → pageSize), we must remap
+    // the camelCase keys back to the original API names before passing them to `qs`.
+    const needsQsTransform = casedQueryParams.some((p, i) => p.name !== queryParams[i]!.name)
+    if (needsQsTransform) {
+      const pairs = queryParams.map((orig, i) => `${orig.name}: params.${casedQueryParams[i]!.name}`).join(', ')
+      requestOptions.push(`qs: params ? { ${pairs} } : undefined`)
+    } else {
+      requestOptions.push('qs: params')
+    }
   }
 
-  // Add headers if they exist
-  if (typeSchemas.headerParams?.name) {
-    requestOptions.push('headers')
+  const headerParams = getOperationParameters(node).header
+  if (headerParams.length > 0) {
+    const casedHeaderParams = getOperationParameters(node, { paramsCasing }).header
+    // When paramsCasing renames header params (e.g. x-api-key → xApiKey), we must remap
+    // the camelCase keys back to the original API names before passing them to `headers`.
+    const needsHeaderTransform = casedHeaderParams.some((p, i) => p.name !== headerParams[i]!.name)
+    if (needsHeaderTransform) {
+      const pairs = headerParams.map((orig, i) => `'${orig.name}': headers.${casedHeaderParams[i]!.name}`).join(', ')
+      requestOptions.push(`headers: headers ? { ${pairs} } : undefined`)
+    } else {
+      requestOptions.push('headers')
+    }
   }
 
-  // Add body if request schema exists
-  if (typeSchemas.request?.name) {
+  if (node.requestBody?.content?.[0]?.schema) {
     requestOptions.push('body: data')
   }
 
-  // Spread additional Cypress options
   requestOptions.push('...options')
 
   return (
     <File.Source name={name} isIndexable isExportable>
-      <Function name={name} export params={params.toConstructor()} returnType={returnType}>
+      <Function name={name} export params={paramsSignature} returnType={returnType}>
         {dataReturnType === 'data'
-          ? `return cy.request<${typeSchemas.response.name}>({
+          ? `return cy.request<${responseType}>({
   ${requestOptions.join(',\n  ')}
 }).then((res) => res.body)`
-          : `return cy.request<${typeSchemas.response.name}>({
+          : `return cy.request<${responseType}>({
   ${requestOptions.join(',\n  ')}
 })`}
       </Function>
     </File.Source>
   )
 }
-
-Request.getParams = getParams

package/src/generators/cypressGenerator.tsx

@@ -1,64 +1,58 @@
-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 { resolveOperationTypeNames } from '@internals/shared'
+import { defineGenerator } from '@kubb/core'
 import { pluginTsName } from '@kubb/plugin-ts'
-import { File } from '@kubb/react-fabric'
-import { Request } from '../components'
-import type { PluginCypress } from '../types'
+import { File, jsxRenderer } from '@kubb/renderer-jsx'
+import { Request } from '../components/Request.tsx'
+import type { PluginCypress } from '../types.ts'
 
-export const cypressGenerator = createReactGenerator<PluginCypress>({
+export const cypressGenerator = defineGenerator<PluginCypress>({
   name: 'cypress',
-  Operation({ operation, generator, plugin }) {
-    const {
-      options: { output, baseURL, dataReturnType, paramsCasing, paramsType, pathParamsType },
-    } = plugin
-    const driver = usePluginDriver()
+  renderer: jsxRenderer,
+  operation(node, ctx) {
+    const { adapter, config, resolver, driver, root } = ctx
+    const { output, baseURL, dataReturnType, paramsCasing, paramsType, pathParamsType, group } = ctx.options
 
-    const oas = useOas()
-    const { getSchemas, getName, getFile } = useOperationManager(generator)
+    const pluginTs = driver.getPlugin(pluginTsName)
 
-    const request = {
-      name: getName(operation, { type: 'function' }),
-      file: getFile(operation),
+    if (!pluginTs) {
+      return null
     }
 
-    const type = {
-      file: getFile(operation, { pluginName: pluginTsName }),
-      schemas: getSchemas(operation, { pluginName: pluginTsName, type: 'type' }),
-    }
+    const tsResolver = driver.getResolver(pluginTsName)
+
+    const importedTypeNames = resolveOperationTypeNames(node, tsResolver, { paramsCasing })
+
+    const meta = {
+      name: resolver.resolveName(node.operationId),
+      file: resolver.resolveFile({ name: node.operationId, extname: '.ts', tag: node.tags[0] ?? 'default', path: node.path }, { root, output, group }),
+      fileTs: 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,
+        },
+      ),
+    } as const
 
     return (
       <File
-        baseName={request.file.baseName}
-        path={request.file.path}
-        meta={request.file.meta}
-        banner={getBanner({ oas, output, config: driver.config })}
-        footer={getFooter({ oas, output })}
+        baseName={meta.file.baseName}
+        path={meta.file.path}
+        meta={meta.file.meta}
+        banner={resolver.resolveBanner(adapter.inputNode, { output, config })}
+        footer={resolver.resolveFooter(adapter.inputNode, { output, config })}
       >
-        <File.Import
-          name={[
-            type.schemas.request?.name,
-            type.schemas.response.name,
-            type.schemas.pathParams?.name,
-            type.schemas.queryParams?.name,
-            type.schemas.headerParams?.name,
-            ...(type.schemas.statusCodes?.map((item) => item.name) || []),
-          ].filter(Boolean)}
-          root={request.file.path}
-          path={type.file.path}
-          isTypeOnly
-        />
+        {meta.fileTs && importedTypeNames.length > 0 && <File.Import name={importedTypeNames} root={meta.file.path} path={meta.fileTs.path} isTypeOnly />}
         <Request
-          name={request.name}
+          name={meta.name}
+          node={node}
+          resolver={tsResolver}
           dataReturnType={dataReturnType}
           paramsCasing={paramsCasing}
           paramsType={paramsType}
           pathParamsType={pathParamsType}
-          typeSchemas={type.schemas}
-          method={operation.method}
           baseURL={baseURL}
-          url={operation.path}
         />
       </File>
     )

package/src/index.ts

@@ -1,2 +1,9 @@
-export { pluginCypress, pluginCypressName } from './plugin.ts'
-export type { PluginCypress } from './types.ts'
+export { Request } from './components/Request.tsx'
+
+export { cypressGenerator } from './generators/cypressGenerator.tsx'
+
+export { default, pluginCypress, pluginCypressName } from './plugin.ts'
+
+export { resolverCypress } from './resolvers/resolverCypress.ts'
+
+export type { PluginCypress, ResolverCypress } from './types.ts'

package/src/plugin.ts

@@ -1,119 +1,95 @@
-import path from 'node:path'
 import { camelCase } from '@internals/utils'
-import { createPlugin, type Group, getBarrelFiles, getMode } from '@kubb/core'
-import { OperationGenerator, pluginOasName } from '@kubb/plugin-oas'
+import { definePlugin, type Group } from '@kubb/core'
 import { pluginTsName } from '@kubb/plugin-ts'
-import { cypressGenerator } from './generators'
+import { cypressGenerator } from './generators/cypressGenerator.tsx'
+import { resolverCypress } from './resolvers/resolverCypress.ts'
 import type { PluginCypress } from './types.ts'
 
+/**
+ * Canonical plugin name for `@kubb/plugin-cypress`, used to identify the plugin
+ * in driver lookups and warnings.
+ */
 export const pluginCypressName = 'plugin-cypress' satisfies PluginCypress['name']
 
-export const pluginCypress = createPlugin<PluginCypress>((options) => {
+/**
+ * The `@kubb/plugin-cypress` plugin factory.
+ *
+ * Generates Cypress `cy.request()` test functions from an OpenAPI/AST `RootNode`.
+ * Walks operations, delegates rendering to the active generators,
+ * and writes barrel files based on `output.barrelType`.
+ *
+ * @example
+ * ```ts
+ * import pluginCypress from '@kubb/plugin-cypress'
+ *
+ * export default defineConfig({
+ *   plugins: [pluginCypress({ output: { path: 'cypress' } })],
+ * })
+ * ```
+ */
+export const pluginCypress = definePlugin<PluginCypress>((options) => {
   const {
     output = { path: 'cypress', barrelType: 'named' },
     group,
-    dataReturnType = 'data',
     exclude = [],
     include,
     override = [],
-    transformers = {},
-    generators = [cypressGenerator].filter(Boolean),
-    contentType,
+    dataReturnType = 'data',
     baseURL,
     paramsCasing,
     paramsType = 'inline',
     pathParamsType = paramsType === 'object' ? 'object' : options.pathParamsType || 'inline',
+    resolver: userResolver,
+    transformer: userTransformer,
+    generators: userGenerators = [],
   } = options
 
-  return {
-    name: pluginCypressName,
-    options: {
-      output,
-      dataReturnType,
-      group,
-      baseURL,
-
-      paramsCasing,
-      paramsType,
-      pathParamsType,
-    },
-    pre: [pluginOasName, pluginTsName].filter(Boolean),
-    resolvePath(baseName, pathMode, options) {
-      const root = path.resolve(this.config.root, this.config.output.path)
-      const mode = pathMode ?? 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 (group && (options?.group?.path || options?.group?.tag)) {
-        const groupName: Group['name'] = group?.name
+  const groupConfig = group
+    ? ({
+        ...group,
+        name: group.name
           ? group.name
-          : (ctx) => {
-              if (group?.type === 'path') {
+          : (ctx: { group: string }) => {
+              if (group.type === 'path') {
                 return `${ctx.group.split('/')[1]}`
               }
               return `${camelCase(ctx.group)}Requests`
-            }
+            },
+      } satisfies Group)
+    : undefined
 
-        return path.resolve(
-          root,
-          output.path,
-          groupName({
-            group: group.type === 'path' ? options.group.path! : options.group.tag!,
-          }),
-          baseName,
-        )
-      }
-
-      return path.resolve(root, output.path, baseName)
-    },
-    resolveName(name, type) {
-      const resolvedName = camelCase(name, {
-        isFile: type === 'file',
-      })
-
-      if (type) {
-        return transformers?.name?.(resolvedName, type) || resolvedName
-      }
-
-      return resolvedName
-    },
-    async install() {
-      const root = path.resolve(this.config.root, this.config.output.path)
-      const mode = getMode(path.resolve(root, output.path))
-      const oas = await this.getOas()
-
-      const operationGenerator = new OperationGenerator(this.plugin.options, {
-        fabric: this.fabric,
-        oas,
-        driver: this.driver,
-        events: this.events,
-        plugin: this.plugin,
-        contentType,
-        exclude,
-        include,
-        override,
-        mode,
-      })
-
-      const files = await operationGenerator.build(...generators)
-      await this.upsertFile(...files)
-
-      const barrelFiles = await getBarrelFiles(this.fabric.files, {
-        type: output.barrelType ?? 'named',
-        root,
-        output,
-        meta: {
-          pluginName: this.plugin.name,
-        },
-      })
+  return {
+    name: pluginCypressName,
+    options,
+    dependencies: [pluginTsName],
+    hooks: {
+      'kubb:plugin:setup'(ctx) {
+        const resolver = userResolver ? { ...resolverCypress, ...userResolver } : resolverCypress
 
-      await this.upsertFile(...barrelFiles)
+        ctx.setOptions({
+          output,
+          exclude,
+          include,
+          override,
+          dataReturnType,
+          group: groupConfig,
+          baseURL,
+          paramsCasing,
+          paramsType,
+          pathParamsType,
+          resolver,
+        })
+        ctx.setResolver(resolver)
+        if (userTransformer) {
+          ctx.setTransformer(userTransformer)
+        }
+        ctx.addGenerator(cypressGenerator)
+        for (const gen of userGenerators) {
+          ctx.addGenerator(gen)
+        }
+      },
     },
   }
 })
+
+export default pluginCypress