@kubb/plugin-cypress 5.0.0-alpha.9 → 5.0.0-beta.3

package/package.json

@@ -1,73 +1,68 @@
 {
   "name": "@kubb/plugin-cypress",
-  "version": "5.0.0-alpha.9",
+  "version": "5.0.0-beta.3",
   "description": "Cypress test generator plugin for Kubb, creating end-to-end tests from OpenAPI specifications for automated API testing.",
   "keywords": [
+    "api-testing",
+    "code-generator",
+    "codegen",
     "cypress",
     "e2e-testing",
     "end-to-end",
-    "testing",
-    "test-generation",
-    "api-testing",
-    "test-automation",
     "integration-testing",
-    "typescript",
-    "openapi",
-    "swagger",
+    "kubb",
     "oas",
-    "code-generator",
-    "codegen",
+    "openapi",
     "plugins",
-    "kubb"
+    "swagger",
+    "test-automation",
+    "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",
+    "plugin.json",
+    "!/**/**.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.3",
+    "@kubb/renderer-jsx": "5.0.0-beta.3",
+    "@kubb/plugin-ts": "5.0.0-beta.3"
+  },
+  "devDependencies": {
+    "@internals/utils": "0.0.0"
+  },
+  "peerDependencies": {
+    "@kubb/renderer-jsx": "5.0.0-beta.3"
   },
-  "files": [
-    "src",
-    "dist",
-    "!/**/**.test.**",
-    "!/**/__tests__/**",
-    "!/**/__snapshots__/**"
-  ],
   "size-limit": [
     {
       "path": "./dist/*.js",
@@ -75,30 +70,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-ts": "5.0.0-alpha.9"
-  },
   "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,9 @@
-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 { 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 +11,104 @@ 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: '{}',
-    },
+      }),
+    ],
   })
-}
-
-export function Request({ baseURL = '', name, dataReturnType, typeSchemas, url, method, paramsType, paramsCasing, pathParamsType }: Props): FabricReactNode {
-  const path = new URLPath(url, { casing: paramsCasing })
-
-  const params = getParams({ paramsType, paramsCasing, pathParamsType, typeSchemas })
+  const paramsSignature = declarationPrinter.print(paramsNode) ?? ''
 
-  const returnType =
-    dataReturnType === 'data' ? `Cypress.Chainable<${typeSchemas.response.name}>` : `Cypress.Chainable<Cypress.Response<${typeSchemas.response.name}>>`
+  const responseType = resolver.resolveResponseName(node)
+  const returnType = dataReturnType === 'data' ? `Cypress.Chainable<${responseType}>` : `Cypress.Chainable<Cypress.Response<${responseType}>>`
 
-  // 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 casedPathParams = ast.caseParams(
+    node.parameters.filter((p) => p.in === 'path'),
+    paramsCasing,
+  )
+  // 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 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 = node.parameters.filter((p) => p.in === 'query')
+  if (queryParams.length > 0) {
+    const casedQueryParams = ast.caseParams(queryParams, paramsCasing)
+    // 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 = node.parameters.filter((p) => p.in === 'header')
+  if (headerParams.length > 0) {
+    const casedHeaderParams = ast.caseParams(headerParams, paramsCasing)
+    // 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,71 @@
-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 { ast, 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 casedParams = ast.caseParams(node.parameters, paramsCasing)
+
+    const pathParams = casedParams.filter((p) => p.in === 'path')
+    const queryParams = casedParams.filter((p) => p.in === 'query')
+    const headerParams = casedParams.filter((p) => p.in === 'header')
+
+    const importedTypeNames = [
+      ...pathParams.map((p) => tsResolver.resolvePathParamsName(node, p)),
+      ...queryParams.map((p) => tsResolver.resolveQueryParamsName(node, p)),
+      ...headerParams.map((p) => tsResolver.resolveHeaderParamsName(node, p)),
+      node.requestBody?.content?.[0]?.schema ? tsResolver.resolveDataName(node) : undefined,
+      tsResolver.resolveResponseName(node),
+    ].filter(Boolean)
+
+    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={Array.from(new Set(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'