@xpayeg/react 2.4.0 → 3.0.0

package/dist/index.mjs

@@ -1,6 +1,5 @@
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/context.tsx
 const XPayContext = createContext(null);
 const ElementsContext = createContext(null);
 /** Build a minimal XPayError for SDK-level failures (elements not initialized, etc.) */
@@ -268,9 +267,9 @@ function useCheckoutActions(ctx) {
 		changeAppearanceFn: useCallback((appearance) => {
 			elements?.changeAppearance(appearance);
 		}, [elements]),
-		onChangeFn: useCallback(((event, handler) => {
+		onChangeFn: useCallback((event, handler) => {
 			elements?.on(event, handler);
-		}), [elements]),
+		}, [elements]),
 		getElementsFn: useCallback(() => {
 			if (!elements) throw new Error("Elements not initialized");
 			return elements;
@@ -295,8 +294,6 @@ function useXPay() {
 function useElements() {
 	return useContext(ElementsContext);
 }
-//#endregion
-//#region src/hooks.ts
 /**
 * Convenience hook for payment confirmation.
 *
@@ -322,8 +319,6 @@ function useConfirmPayment() {
 		isConfirming: false
 	};
 }
-//#endregion
-//#region src/utils/useAttachEvent.ts
 /**
 * Attach an event listener to an element without causing listener churn on re-renders.
 *
@@ -351,21 +346,6 @@ function useAttachEvent(element, event, cb) {
 		element
 	]);
 }
-//#endregion
-//#region src/utils/usePrevious.ts
-/**
-* Returns the previous value of a variable.
-* Useful for detecting prop changes between renders.
-*/
-function usePrevious(value) {
-	const ref = useRef(void 0);
-	useEffect(() => {
-		ref.current = value;
-	}, [value]);
-	return ref.current;
-}
-//#endregion
-//#region src/utils/extractAllowedOptionsUpdates.ts
 /**
 * Extract only the changed, mutable options from a new options object.
 *
@@ -407,19 +387,15 @@ function isEqual(a, b) {
 	}
 	return false;
 }
-//#endregion
-//#region src/utils/isServer.ts
 /** True when running in a server environment (SSR/RSC) */
 const isServer = typeof window === "undefined";
-//#endregion
-//#region src/PaymentElement.tsx
 const IMMUTABLE_OPTS = [];
 const PaymentElementClient = ({ options, onReady, onChange, onLoaderStart, onLoadError, className, id }) => {
 	const elements = useElements();
 	const containerRef = useRef(null);
 	const elementRef = useRef(null);
 	const [element, setElement] = useState(null);
-	const prevOptions = usePrevious(options);
+	const previousOptions = useRef(void 0);
 	useLayoutEffect(() => {
 		if (elementRef.current !== null || !elements || !containerRef.current) return;
 		const el = elements.create("payment", options);
@@ -439,14 +415,12 @@ const PaymentElementClient = ({ options, onReady, onChange, onLoaderStart, onLoa
 		};
 	}, []);
 	useEffect(() => {
+		const prevOptions = previousOptions.current;
+		previousOptions.current = options;
 		if (!element || !options) return;
 		const updates = extractAllowedOptionsUpdates(options, prevOptions, IMMUTABLE_OPTS);
 		if (updates && "update" in element) element.update(updates);
-	}, [
-		options,
-		prevOptions,
-		element
-	]);
+	}, [options, element]);
 	useAttachEvent(element, "ready", onReady);
 	useAttachEvent(element, "change", onChange);
 	useAttachEvent(element, "loaderstart", onLoaderStart);
@@ -481,8 +455,6 @@ const PaymentElementServer = ({ className, id }) => {
 * ```
 */
 const PaymentElement = isServer ? PaymentElementServer : PaymentElementClient;
-//#endregion
-//#region src/CheckoutButton.tsx
 /**
 * Button that opens the drop-in checkout modal on click.
 *
@@ -505,24 +477,24 @@ const PaymentElement = isServer ? PaymentElementServer : PaymentElementClient;
 */
 const CheckoutButton = ({ clientSecret, children = "Pay", checkoutOptions, className, disabled }) => {
 	const xpay = useXPay();
+	const handleClick = useCallback(() => {
+		if (!xpay) return;
+		xpay.checkout({
+			clientSecret,
+			mode: "modal",
+			...checkoutOptions
+		}).open();
+	}, [
+		xpay,
+		clientSecret,
+		checkoutOptions
+	]);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		onClick: useCallback(() => {
-			if (!xpay) return;
-			xpay.checkout({
-				clientSecret,
-				mode: "modal",
-				...checkoutOptions
-			}).open();
-		}, [
-			xpay,
-			clientSecret,
-			checkoutOptions
-		]),
+		onClick: handleClick,
 		disabled: disabled || !xpay,
 		className,
 		children
 	});
 };
-//#endregion
 export { CheckoutButton, PaymentElement, XPayProvider, useCheckout, useConfirmPayment, useElements, useXPay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpayeg/react",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "description": "XPay React components — PaymentElement, CheckoutButton, and hooks",
   "license": "MIT",
   "type": "module",
@@ -10,15 +10,15 @@
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts",
+  "types": "./.types/index.d.mts",
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/index.d.mts",
+        "types": "./.types/index.d.mts",
         "default": "./dist/index.mjs"
       },
       "require": {
-        "types": "./dist/index.d.cts",
+        "types": "./.types/index.d.cts",
         "default": "./dist/index.cjs"
       }
     }
@@ -27,31 +27,19 @@
     "access": "public"
   },
   "files": [
-    "dist",
+    "dist/index.mjs",
+    "dist/index.cjs",
     "README.md",
     "CHANGELOG.md",
-    "LICENSE"
+    "LICENSE",
+    ".types/index.d.mts",
+    ".types/index.d.cts"
   ],
   "peerDependencies": {
-    "@xpayeg/sdk": "^2.0.0",
+    "@xpayeg/sdk": "^3.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
-  "devDependencies": {
-    "@arethetypeswrong/cli": "^0.18.2",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@types/react": "19.2.7",
-    "@types/react-dom": "19.2.3",
-    "publint": "^0.3.21",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "rollup": "^4.60.4",
-    "rollup-plugin-dts": "^6.4.1",
-    "tsdown": "^0.22.0",
-    "typescript": "5.9.3",
-    "@xpay/tsconfig": "0.0.0",
-    "@xpayeg/sdk": "2.4.0"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/xpayeg/xpay-react.git"
@@ -67,10 +55,5 @@
     "egypt",
     "checkout",
     "sdk"
-  ],
-  "scripts": {
-    "build": "tsdown && rollup -c rollup.dts.config.mjs",
-    "lint:pkg": "publint && attw --pack .",
-    "typecheck": "tsc --noEmit"
-  }
+  ]
 }