fix: typescript bundling issues

package.json

@@ -1,6 +1,6 @@
 {
  "name": "react-square-web-payments-sdk",
- "version": "3.2.2",
+ "version": "3.3.0",
  "homepage": "https://weareseeed.github.io/react-square-web-payments-sdk/",
  "bugs": {
  "url": "https://github.com/weareseeed/react-square-web-payments-sdk/issues"
@@ -25,14 +25,28 @@
  "sideEffects": false,
  "exports": {
  ".": {
- "types": "./dist/index.d.ts",
- "require": "./dist/index.cjs.js",
- "import": "./dist/index.es.mjs"
+ "require": {
+ "types": "./dist/index.d.ts",
+ "default": "./dist/index.cjs.js"
+ },
+ "import": {
+ "types": "./dist/index.d.ts",
+ "default": "./dist/index.es.mjs"
+ }
+ },
+ "./@square/web-sdk": {
+ "require": {
+ "types": "./dist/index.d.ts",
+ "default": "./dist/index.cjs.js"
+ },
+ "import": {
+ "types": "./dist/index.d.ts",
+ "default": "./dist/index.es.mjs"
+ }
  }
  },
  "main": "dist/index.cjs.js",
  "module": "dist/index.es.mjs",
- "types": "dist/index.d.ts",
  "directories": {
  "src": "src"
  },
@@ -44,12 +58,14 @@
  ],
  "scripts": {
  "prebuild": "yarn clean",
- "build": "run-p build:*",
+ "build": "patch-package && run-p build:*",
+ "prepare": "npm run build",
  "build:scripts": "vite build",
  "build:types": "tsc --emitDeclarationOnly -p ./tsconfig.build.json && tsc-alias",
  "clean": "rimraf dist",
  "coverage": "vitest run --coverage",
  "dev": "vite",
+ "postinstall": "patch-package",
  "format": "prettier --write 'src/**/*.{ts,tsx}'",
  "lint": "eslint 'src/**/*.{ts,tsx}'",
  "preview": "vite preview",
@@ -60,36 +76,38 @@
  },
  "dependencies": {
  "@square/web-sdk": "^2.0.1",
- "@stitches/react": "^1.2.8"
+ "@stitches/react": "^1.2.8",
+ "patch-package": "^8.0.0",
+ "postinstall-postinstall": "^2.1.0"
  },
  "devDependencies": {
- "@size-limit/preset-big-lib": "^8.0.0",
- "@size-limit/webpack-why": "^8.0.0",
- "@testing-library/jest-dom": "^5.16.4",
- "@testing-library/react": "^13.3.0",
- "@types/node": "^18.6.3",
- "@types/react": "^18.0.15",
- "@typescript-eslint/eslint-plugin": "^5.31.0",
- "@typescript-eslint/parser": "^5.31.0",
- "@vitejs/plugin-react": "^2.0.0",
- "c8": "^7.12.0",
- "eslint": "^8.20.0",
- "eslint-config-prettier": "^8.5.0",
- "eslint-plugin-jsx-a11y": "^6.6.1",
- "eslint-plugin-react": "^7.30.1",
- "jsdom": "^20.0.0",
+ "@size-limit/preset-big-lib": "^8.2.6",
+ "@size-limit/webpack-why": "^8.2.6",
+ "@testing-library/jest-dom": "^5.17.0",
+ "@testing-library/react": "^13.4.0",
+ "@types/node": "^22.5.4",
+ "@types/react": "^18.3.3",
+ "@typescript-eslint/eslint-plugin": "^5.62.0",
+ "@typescript-eslint/parser": "^5.62.0",
+ "@vitejs/plugin-react": "^2.2.0",
+ "c8": "^7.14.0",
+ "eslint": "^8.57.0",
+ "eslint-config-prettier": "^8.10.0",
+ "eslint-plugin-jsx-a11y": "^6.9.0",
+ "eslint-plugin-react": "^7.34.3",
+ "jsdom": "^20.0.3",
  "npm-run-all": "^4.1.5",
- "prettier": "^2.7.1",
+ "prettier": "^2.8.8",
  "prettier-plugin-jsdoc": "^0.3.38",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
  "rimraf": "^3.0.2",
  "size-limit": "^8.0.0",
- "tsc-alias": "^1.7.0",
- "typescript": "^4.7.4",
- "vite": "^3.0.4",
- "vite-tsconfig-paths": "^3.5.0",
- "vitest": "^0.20.2"
+ "tsc-alias": "^1.8.10",
+ "typescript": "^5.6.2",
+ "vite": "^3.2.10",
+ "vite-tsconfig-paths": "^3.6.0",
+ "vitest": "^0.20.3"
  },
  "peerDependencies": {
  "react": "^16 || ^17 || ^18"

patches/webpack+5.93.0.patch

@@ -0,0 +1,16 @@
+diff --git a/node_modules/webpack/types.d.ts b/node_modules/webpack/types.d.ts
+index 9e016a5..9335708 100644
+--- a/node_modules/webpack/types.d.ts
++++ b/node_modules/webpack/types.d.ts
+@@ -13293,11 +13293,6 @@ declare abstract class SortableSet<T> extends Set<T> {
+ */
+	getFromUnorderedCache<R>(fn: (arg0: SortableSet<T>) => R): R;
+	toJSON(): T[];
+-
+-	/**
+- * Iterates over values in the set.
+- */
+-	[Symbol.iterator](): IterableIterator<T>;
+ }
+ declare class Source {
+	constructor();

src/components/ach/ach.tsx

@@ -1,13 +1,13 @@
 // Dependencies
-import * as React from 'react';
 import type * as Square from '@square/web-sdk';
+import * as React from 'react';
 
 // Internals
 import { useForm } from '~/contexts/form';
 import { useEventListener } from '~/hooks/use-event-listener';
 import { PayButton, SvgIcon } from './ach.styles';
+import type { AchProps, AchWithChildrenProps, AchWithoutChildrenProps } from './ach.types';
 import { transformPlaidEventName } from './ach.utils';
-import type { AchProps, AchWithChildrenProps, AchWithoutChildrenProps, PlaidLinkOnEventMetadata } from './ach.types';
 
 /**
  * Renders a ACH button to use in the Square Web Payment SDK, pre-styled to meet
@@ -31,6 +31,8 @@ export function Ach(props: AchWithChildrenProps): React.ReactElement;
 export function Ach(props: AchWithoutChildrenProps): React.ReactElement;
 export function Ach({
  accountHolderName,
+ intent,
+ total,
  redirectURI,
  transactionId,
  callbacks,
@@ -49,7 +51,7 @@ export function Ach({
  * @param e An event which takes place in the DOM.
  * @returns The data be sended to `cardTokenizeResponseReceived()` function, or an error
  */
- const handlePayment = async (e: Event) => {
+ const handleClick = async (e: Event) => {
  e.stopPropagation();
 
  if (!ach) {
@@ -58,33 +60,46 @@ export function Ach({
  return;
  }
 
- setIsSubmitting(true);
-
  try {
- const result = await ach.tokenize({
+ await ach.tokenize({
  accountHolderName,
+ intent,
+ total,
  });
+ } catch (error) {
+ console.error(error);
+ }
+ };
 
- if (result.status === 'OK') {
+ const handlePayment = async (e: Square.SqEvent<Square.TokenizationEvent>) => {
+ setIsSubmitting(true);
+ try {
+ const { tokenResult: result } = e.detail;
+ if (result && result.status === 'OK') {
  const tokenizedResult = await cardTokenizeResponseReceived(result);
  return tokenizedResult;
  }
 
- let message = `Tokenization failed with status: ${result.status}`;
+ let message = `Tokenization failed with status: ${result?.status}`;
  if (result?.errors) {
  message += ` and errors: ${JSON.stringify(result?.errors)}`;
 
  throw new Error(message);
  }
-
- console.warn(message);
  } catch (error) {
  console.error(error);
  } finally {
  setIsSubmitting(false);
  }
  };
 
+ React.useEffect(() => {
+ ach?.addEventListener('ontokenization' as Square.PlaidEventName, handlePayment);
+ return () => {
+ ach?.removeEventListener('ontokenization' as Square.PlaidEventName, handlePayment);
+ };
+ }, [ach]);
+
  React.useEffect(() => {
  const abortController = new AbortController();
  const { signal } = abortController;
@@ -120,14 +135,14 @@ export function Ach({
  if (callbacks) {
  for (const callback of Object.keys(callbacks)) {
  ach?.addEventListener(
- transformPlaidEventName(callback),
- (callbacks as Record<string, (event: Square.SqEvent<PlaidLinkOnEventMetadata>) => void>)[callback]
+ transformPlaidEventName(callback) as Square.PlaidEventName,
+ (callbacks as Record<string, (event: Square.SqEvent<Square.TokenizationEvent>) => void>)[callback]
  );
  }
  }
 
  useEventListener({
- listener: handlePayment,
+ listener: handleClick,
  type: 'click',
  element: buttonRef,
  options: {

src/components/ach/ach.types.ts

@@ -1,7 +1,7 @@
 // Dependencies
-import type * as React from 'react';
 import type * as Square from '@square/web-sdk';
 import type * as Stitches from '@stitches/react';
+import type * as React from 'react';
 
 // Internals
 import { PayButton, SvgIcon } from './ach.styles';
@@ -75,7 +75,7 @@ export type SvgProps = React.ComponentPropsWithRef<'svg'> & {
  css?: Stitches.ComponentProps<typeof SvgIcon>['css'];
 };
 
-export interface AchBase extends Square.AchOptions, Square.AchTokenOptions {
+export interface AchBase extends Square.AchOptions, Square.AchChargeTokenOptions {
  callbacks?: {
  /** The user has completed the Assets and Bank Income Insights flow. */
  bankIncomeInsightsCompleted?(event: Square.SqEvent<PlaidLinkOnEventMetadata>): void;

src/components/cash-app-pay/cash-app-pay.tsx

@@ -1,6 +1,6 @@
 // Dependencies
-import * as React from 'react';
 import type * as Square from '@square/web-sdk';
+import * as React from 'react';
 
 // Internals
 import { useForm } from '~/contexts/form';
@@ -91,7 +91,7 @@ function CashAppPay({
  for (const callback of Object.keys(callbacks)) {
  cashApp?.addEventListener(
  callback.toLowerCase() as 'ontokenization',
- (callbacks as Record<string, (event: Square.SqEvent<Square.TokenizationEvent>) => void>)[callback]
+ (callbacks as Record<string, (event: Square.SqEvent<Square.CashAppPayEventData>) => void>)[callback]
  );
  }
  }

src/hooks/use-event-listener.ts

@@ -1,8 +1,8 @@
 // Dependencies
 import * as React from 'react';
 
-export const getRefElement = <T>(
- element?: React.RefObject<Element> | T
+export const getRefElement = <T extends object>(
+ element?: React.RefObject<Element> | T | null
 ): Element | T | undefined | null | React.RefObject<Element> => {
  if (element && 'current' in element) {
  return element.current;

tsconfig.json

@@ -10,7 +10,7 @@
  "strict": true,
  "forceConsistentCasingInFileNames": true,
  "module": "ESNext",
- "moduleResolution": "Node",
+ "moduleResolution": "Bundler",
  "resolveJsonModule": true,
  "isolatedModules": true,
  "jsx": "react",