Skip to content

feat: add TypeScript declarations for @juspay-tech/react-hyper-js#11

Open
ArushKapoorJuspay wants to merge 2 commits intojuspay:mainfrom
ArushKapoorJuspay:feat/typescript-declarations
Open

feat: add TypeScript declarations for @juspay-tech/react-hyper-js#11
ArushKapoorJuspay wants to merge 2 commits intojuspay:mainfrom
ArushKapoorJuspay:feat/typescript-declarations

Conversation

@ArushKapoorJuspay
Copy link
Copy Markdown
Contributor

Summary

  • Creates src/index.d.ts (435 lines) with complete TypeScript declarations for all exported components, hooks, and types
  • Adds compile-time type test file (src/index.test-d.ts, 370+ lines, 24 test categories) verified by tsc --noEmit
  • Updates package.json with types and exports fields for proper TypeScript resolution

Changes

Provider Components (3)

  • HyperElements — main SDK provider (accepts hyper: Promise<HyperInstance>)
  • Elements — Stripe-compatible alias (accepts stripe prop)
  • HyperManagementElements — saved payment method management provider

Element Components (12 + 5 aliases)

  • PaymentElement / UnifiedCheckout
  • CardElement / CardWidget
  • CardNumberElement / CardNumberWidget
  • CardExpiryElement / CardExpiryWidget
  • CardCVCElement / CardCVCWidget
  • ExpressCheckoutElement
  • PaymentMethodsManagementElement

Hooks (5)

  • useHyper()UseHyperReturn (8 SDK methods + clientSecret)
  • useWidgets()UseWidgetsReturn (widget management)
  • useElements() → Stripe-compatible alias
  • useHyperSession()HyperSession (self-contained session)
  • useHyperElements()HyperElementsContextType

Types (12+)

  • UseHyperReturn, UseWidgetsReturn, HyperSession, SessionStatus
  • HyperElementsProps, ElementsProps, PaymentElementComponentProps
  • PaymentElementSessionProps, HyperElementsContextType
  • All component prop interfaces with JSDoc documentation

Package.json Updates

  • Added "types": "src/index.d.ts" field
  • Added "exports" block with types condition
  • Added typescript and @juspay-tech/hyper-js as devDependencies

Architecture Decision: Bare Exports

Uses bare export statements (NOT declare module "@juspay-tech/react-hyper-js") because:

  1. The package uses main: "dist/bundle.js" — TypeScript resolves via types field
  2. Bare exports work correctly with moduleResolution: "bundler" and "node16"
  3. Matches the pattern used by similar React wrapper packages

Testing

npx tsc --project tsconfig.test.json --noEmit  # 0 errors

Related PRs

  • juspay/hyper-js#18 — TypeScript declarations for core SDK
  • juspay/hyperswitch-web — Demo app converted to TypeScript

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant