@automattic/jetpack-connection 1.4.38 → 1.4.39

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
 
+## [1.4.39] - 2026-03-09
+### Changed
+- Switch to Native TypeScript compiler based on Go. [#47375]
+
+### Fixed
+- Fix TS errors detected by tsgo. [#47409]
+
 ## [1.4.38] - 2026-03-02
 ### Changed
 - Convert `useConnection` hook to TypeScript. [#47380]
@@ -1285,6 +1292,7 @@
 - `Main` and `ConnectUser` components added.
 - `JetpackRestApiClient` API client added.
 
+[1.4.39]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.38...v1.4.39
 [1.4.38]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.37...v1.4.38
 [1.4.37]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.36...v1.4.37
 [1.4.36]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.35...v1.4.36

package/components/connection-error-notice/{index.jsx → index.tsx}

@@ -3,22 +3,15 @@ import { Icon, Notice, Path, SVG } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import styles from './styles.module.scss';
+import type { ConnectionErrorNoticeProps } from './types';
 
-/**
- * The RNA Connection Error Notice component.
- *
- * @param {object} props -- The properties.
- * @return {import('react').Component} The `ConnectionErrorNotice` component.
- */
-const ConnectionErrorNotice = props => {
-	const {
-		message,
-		isRestoringConnection,
-		restoreConnectionCallback,
-		restoreConnectionError,
-		actions = [], // New prop for custom actions
-	} = props;
-
+const ConnectionErrorNotice = ( {
+	message,
+	isRestoringConnection,
+	restoreConnectionCallback,
+	restoreConnectionError,
+	actions = [],
+}: ConnectionErrorNoticeProps ) => {
 	const wrapperClassName = styles.notice;
 
 	const icon = (

package/components/connection-error-notice/types.ts

@@ -0,0 +1,17 @@
+import type { ReactElement } from 'react';
+
+export interface ActionItem {
+	label: string;
+	onClick: () => void;
+	isLoading?: boolean;
+	loadingText?: string;
+	variant?: 'primary' | 'secondary';
+}
+
+export interface ConnectionErrorNoticeProps {
+	message: string | ReactElement;
+	restoreConnectionCallback?: ( () => void ) | null;
+	isRestoringConnection?: boolean;
+	restoreConnectionError?: string | null;
+	actions?: ActionItem[];
+}

package/components/manage-connection-dialog/index.jsx

@@ -15,7 +15,7 @@ import { useCallback, useEffect, useState, useMemo } from 'react';
 /**
  * Internal dependencies
  */
-import ConnectionErrorNotice from '../connection-error-notice/index.jsx';
+import ConnectionErrorNotice from '../connection-error-notice';
 import DisconnectDialog from '../disconnect-dialog';
 import OwnerDisconnectDialog from '../owner-disconnect-dialog';
 import './style.scss';

package/hooks/use-connection-error-notice/{index.jsx → index.tsx}

@@ -1,7 +1,17 @@
 import { __ } from '@wordpress/i18n';
 import ConnectionErrorNotice from '../../components/connection-error-notice';
 import useConnection from '../../components/use-connection';
-import useRestoreConnection from '../../hooks/use-restore-connection/index.jsx';
+import useRestoreConnection from '../../hooks/use-restore-connection';
+import type {
+	Action,
+	ConnectionErrorData,
+	ConnectionErrorMap,
+	ConnectionErrorObject,
+	ConnectionErrorProps,
+} from './types';
+import type { ReactElement } from 'react';
+
+export type { ConnectionErrorData, ConnectionErrorMap, ConnectionErrorObject } from './types';
 
 /**
  * Connection error notice hook.
@@ -12,13 +22,15 @@ import useRestoreConnection from '../../hooks/use-restore-connection/index.jsx';
  */
 export default function useConnectionErrorNotice() {
 	const { connectionErrors } = useConnection( {} );
-	const connectionErrorList = Object.values( connectionErrors ).shift();
-	const firstError =
-		connectionErrorList &&
-		Object.values( connectionErrorList ).length &&
-		Object.values( connectionErrorList ).shift();
+	// connectionErrors is typed as Array<string|object> but is actually a nested object at runtime.
+	const errorMap = connectionErrors as unknown as ConnectionErrorMap;
+	const connectionErrorList = Object.values( errorMap ).shift();
+	const firstError: ConnectionErrorObject | undefined =
+		connectionErrorList && Object.values( connectionErrorList ).length
+			? Object.values( connectionErrorList ).shift()
+			: undefined;
 
-	const connectionErrorMessage = firstError && firstError.error_message;
+	const connectionErrorMessage = firstError?.error_message;
 
 	// Return all connection errors
 	const hasConnectionError = Boolean( connectionErrorMessage );
@@ -27,15 +39,15 @@ export default function useConnectionErrorNotice() {
 		hasConnectionError,
 		connectionErrorMessage,
 		connectionError: firstError, // Full error object with error_type, etc.
-		connectionErrors, // All errors for advanced use cases
+		connectionErrors: errorMap, // All errors for advanced use cases
 	};
 }
 
 export const ConnectionError = ( {
-	actionHandlers = {}, // Handlers for specific actions like { create_missing_account: () => {}, custom_action: () => {} }
-	trackingCallback = null, // Custom tracking function
-	customActions = null, // Function that returns custom actions based on error (takes precedence)
-} = {} ) => {
+	actionHandlers = {},
+	trackingCallback = null,
+	customActions = null,
+}: ConnectionErrorProps = {} ): ReactElement | null => {
 	const { hasConnectionError, connectionErrorMessage, connectionError } =
 		useConnectionErrorNotice();
 	const { restoreConnection, isRestoringConnection, restoreConnectionError } =
@@ -46,21 +58,24 @@ export const ConnectionError = ( {
 	}
 
 	// Build actions array based on error data
-	let actions = [];
+	let actions: Action[] = [];
 
 	if ( customActions ) {
 		// Use provided custom actions function
 		try {
-			actions = customActions( connectionError, { restoreConnection, isRestoringConnection } );
+			actions = customActions( connectionError as ConnectionErrorObject, {
+				restoreConnection,
+				isRestoringConnection,
+			} );
 		} catch {
 			// Silently fall back to default behavior if customActions fails
 			actions = [];
 		}
 	} else {
 		// Get action info from error data
-		const errorData = connectionError?.error_data || {};
+		const errorData = connectionError?.error_data || ( {} as ConnectionErrorData );
 		const suggestedAction = errorData.action;
-		const actionHandler = actionHandlers[ suggestedAction ];
+		const actionHandler = suggestedAction ? actionHandlers[ suggestedAction ] : undefined;
 
 		if ( suggestedAction && actionHandler ) {
 			// Use action data from the error
@@ -76,7 +91,7 @@ export const ConnectionError = ( {
 							if ( trackingCallback && trackingEvent ) {
 								trackingCallback( trackingEvent, {} );
 							}
-							actionHandler( connectionError );
+							actionHandler( connectionError as ConnectionErrorObject );
 						} catch {
 							// Silently fail if action handler throws
 						}
@@ -98,7 +113,7 @@ export const ConnectionError = ( {
 							if ( trackingCallback && trackingEvent ) {
 								trackingCallback( trackingEvent, {} );
 							}
-							window.location.href = errorData.action_url;
+							window.location.href = errorData.action_url as string;
 						} catch {
 							// Silently fail if navigation throws
 						}
@@ -130,7 +145,9 @@ export const ConnectionError = ( {
 		// Add secondary action if available (only for custom errors, not default restore)
 		if ( actions.length > 0 && ( suggestedAction || errorData.action_url ) ) {
 			const secondaryAction = errorData.secondary_action;
-			const secondaryActionHandler = actionHandlers[ secondaryAction ];
+			const secondaryActionHandler = secondaryAction
+				? actionHandlers[ secondaryAction ]
+				: undefined;
 			const secondaryActionUrl = errorData.secondary_action_url;
 			const secondaryActionLabel = errorData.secondary_action_label;
 
@@ -146,7 +163,7 @@ export const ConnectionError = ( {
 							if ( trackingCallback && secondaryTrackingEvent ) {
 								trackingCallback( secondaryTrackingEvent, {} );
 							}
-							secondaryActionHandler( connectionError );
+							secondaryActionHandler( connectionError as ConnectionErrorObject );
 						} catch {
 							// Silently fail if secondary action handler throws
 						}
@@ -186,7 +203,7 @@ export const ConnectionError = ( {
 		<ConnectionErrorNotice
 			isRestoringConnection={ isRestoringConnection }
 			restoreConnectionError={ restoreConnectionError }
-			restoreConnectionCallback={ actions.length === 0 ? restoreConnection : null } // Fallback for backward compatibility
+			restoreConnectionCallback={ actions.length === 0 ? restoreConnection : null }
 			message={ connectionErrorMessage }
 			actions={ actions }
 		/>

package/hooks/use-connection-error-notice/types.ts

@@ -0,0 +1,49 @@
+export interface ConnectionErrorData {
+	action?: string;
+	action_label?: string;
+	action_variant?: 'primary' | 'secondary';
+	action_url?: string;
+	tracking_event?: string;
+	secondary_action?: string;
+	secondary_action_url?: string;
+	secondary_action_label?: string;
+	secondary_action_variant?: 'primary' | 'secondary';
+	secondary_tracking_event?: string;
+	[ key: string ]: unknown;
+}
+
+export interface ConnectionErrorObject {
+	error_message: string;
+	error_code?: string;
+	user_id?: string;
+	error_type?: string;
+	error_data?: ConnectionErrorData;
+	[ key: string ]: unknown;
+}
+
+/**
+ * The shape of connectionErrors from the store: a nested object keyed by error code, then user ID.
+ */
+export type ConnectionErrorMap = Record< string, Record< string, ConnectionErrorObject > >;
+
+export interface Action {
+	label: string;
+	onClick: () => void;
+	isLoading?: boolean;
+	loadingText?: string;
+	variant?: 'primary' | 'secondary';
+}
+
+export interface ConnectionErrorProps {
+	actionHandlers?: Record< string, ( error: ConnectionErrorObject ) => void >;
+	trackingCallback?: ( ( event: string, data: object ) => void ) | null;
+	customActions?:
+		| ( (
+				error: ConnectionErrorObject,
+				helpers: {
+					restoreConnection: () => void;
+					isRestoringConnection: boolean;
+				}
+		  ) => Action[] )
+		| null;
+}

package/hooks/use-product-checkout-workflow/{index.jsx → index.tsx}

@@ -6,6 +6,7 @@ import { useEffect, useState, useMemo } from 'react';
 import { getCalypsoOrigin } from '@automattic/jetpack-connection';
 import useConnection from '../../components/use-connection';
 import { STORE_ID } from '../../state/store.jsx';
+import type { UseProductCheckoutWorkflowProps } from './types';
 
 const debug = debugFactory( 'jetpack:connection:useProductCheckoutWorkflow' );
 
@@ -16,35 +17,31 @@ const {
 	siteSuffix: defaultSiteSuffix,
 } = window?.JP_CONNECTION_INITIAL_STATE || getScriptData()?.connection || {};
 const defaultAdminUrl = () =>
-	typeof window !== 'undefined' ? window?.myJetpackInitialState?.adminUrl : null;
+	typeof window !== 'undefined'
+		? ( window as Window & { myJetpackInitialState?: { adminUrl?: string } } )
+				?.myJetpackInitialState?.adminUrl
+		: null;
 
 /**
  * Custom hook that performs the needed steps
  * to concrete the checkout workflow.
  *
- * @param {object}   props                                  - The props passed to the hook.
- * @param {string}   props.productSlug                      - The WordPress product slug.
- * @param {string}   props.redirectUrl                      - The URI to redirect to after checkout.
- * @param {string}   [props.siteSuffix]                     - The site suffix.
- * @param {string}   [props.adminUrl]                       - The site wp-admin url.
- * @param {boolean}  [props.connectAfterCheckout]           - Whether or not to conect after checkout if not connected (default false - connect before).
- * @param {Function} [props.siteProductAvailabilityHandler] - The function used to check whether the site already has the requested product. This will be checked after registration and the checkout page will be skipped if the promise returned resloves true.
- * @param {string}   props.from                             - The plugin slug initiated the flow.
- * @param {number}   [props.quantity]                       - The quantity of the product to purchase.
- * @param {boolean}  [props.useBlogIdSuffix]                - Use blog ID instead of site suffix in the checkout URL.
- * @return {object}                                      The useEffect hook.
+ * @param {UseProductCheckoutWorkflowProps} props - The checkout workflow properties.
+ * @return The checkout workflow hook data.
  */
-export default function useProductCheckoutWorkflow( {
-	productSlug,
-	redirectUrl,
-	siteSuffix = defaultSiteSuffix,
-	adminUrl = defaultAdminUrl(),
-	connectAfterCheckout = false,
-	siteProductAvailabilityHandler = null,
-	quantity = null,
-	from,
-	useBlogIdSuffix = false,
-} = {} ) {
+export default function useProductCheckoutWorkflow(
+	{
+		productSlug,
+		redirectUrl,
+		siteSuffix = defaultSiteSuffix,
+		adminUrl = defaultAdminUrl(),
+		connectAfterCheckout = false,
+		siteProductAvailabilityHandler = null,
+		quantity = null,
+		from,
+		useBlogIdSuffix = false,
+	}: UseProductCheckoutWorkflowProps = {} as UseProductCheckoutWorkflowProps
+) {
 	debug( 'productSlug is %s', productSlug );
 	debug( 'redirectUrl is %s', redirectUrl );
 	debug( 'siteSuffix is %s', siteSuffix );
@@ -52,7 +49,10 @@ export default function useProductCheckoutWorkflow( {
 	const [ hasCheckoutStarted, setCheckoutStarted ] = useState( false );
 	const { registerSite } = useDispatch( STORE_ID );
 
-	const blogID = useSelect( select => select( STORE_ID ).getBlogId(), [] );
+	const blogID = useSelect(
+		select => ( select( STORE_ID ) as { getBlogId: () => string } ).getBlogId(),
+		[]
+	);
 	debug( 'blogID is %s', blogID ?? 'undefined' );
 
 	useBlogIdSuffix = useBlogIdSuffix && !! blogID;
@@ -78,7 +78,7 @@ export default function useProductCheckoutWorkflow( {
 		);
 
 		if ( shouldConnectAfterCheckout ) {
-			productCheckoutUrl.searchParams.set( 'connect_after_checkout', true );
+			productCheckoutUrl.searchParams.set( 'connect_after_checkout', 'true' );
 			productCheckoutUrl.searchParams.set( 'admin_url', adminUrl );
 			/**
 			 * `from_site_slug` is the Jetpack site slug (siteSuffix) passed 'from the site' via url
@@ -135,7 +135,7 @@ export default function useProductCheckoutWorkflow( {
 				'handleAfterRegistration: Site does not have a product associated. Redirecting to checkout %s',
 				checkoutUrl
 			);
-			window.location.href = checkoutUrl;
+			window.location.href = checkoutUrl.toString();
 		} );
 	};
 
@@ -146,17 +146,18 @@ export default function useProductCheckoutWorkflow( {
 
 		debug( 'Redirecting to connectAfterCheckout flow: %s', checkoutUrl );
 
-		window.location.href = checkoutUrl;
+		window.location.href = checkoutUrl.toString();
 	};
 
 	/**
 	 * Handler to run the checkout workflow.
 	 *
-	 * @param {Event}  [event]  - Event that dispatched run
-	 * @param {string} redirect - A possible redirect URL to go to after the checkout
-	 * @return {void}          Nothing.
+	 * @param {object}   [event]              - Event that dispatched run.
+	 * @param {Function} event.preventDefault - Prevents the default event behavior.
+	 * @param {string}   redirect             - A possible redirect URL to go to after the checkout.
+	 * @return {void} Nothing.
 	 */
-	const run = ( event, redirect = null ) => {
+	const run = ( event?: { preventDefault: () => void }, redirect: string | null = null ) => {
 		event && event.preventDefault();
 		setCheckoutStarted( true );
 		// By default we will connect first prior to checkout unless `props.connectAfterCheckout`

package/hooks/use-product-checkout-workflow/types.ts

@@ -0,0 +1,20 @@
+export interface UseProductCheckoutWorkflowProps {
+	/** The WordPress product slug. */
+	productSlug: string;
+	/** The URI to redirect to after checkout. */
+	redirectUrl: string;
+	/** The site suffix. */
+	siteSuffix?: string;
+	/** The site wp-admin url. */
+	adminUrl?: string;
+	/** Whether or not to connect after checkout if not connected (default false - connect before). */
+	connectAfterCheckout?: boolean;
+	/** The function used to check whether the site already has the requested product. This will be checked after registration and the checkout page will be skipped if the promise returned resolves true. */
+	siteProductAvailabilityHandler?: ( () => Promise< boolean > | boolean ) | null;
+	/** The plugin slug that initiated the flow. */
+	from: string;
+	/** The quantity of the product to purchase. */
+	quantity?: number | null;
+	/** Use blog ID instead of site suffix in the checkout URL. */
+	useBlogIdSuffix?: boolean;
+}

package/hooks/use-restore-connection/{index.jsx → index.tsx}

@@ -8,6 +8,11 @@ import { STORE_ID } from '../../state/store';
 const { apiRoot, apiNonce } =
 	window?.JP_CONNECTION_INITIAL_STATE || getScriptData()?.connection || {};
 
+interface ConnectionStoreDispatch {
+	disconnectUserSuccess: () => void;
+	setConnectionErrors: ( errors: Record< string, unknown > ) => void;
+}
+
 /**
  * Restore connection hook.
  * It will initiate an API request attempting to restore the connection, or reconnect if it cannot be restored.
@@ -16,9 +21,11 @@ const { apiRoot, apiNonce } =
  */
 export default function useRestoreConnection() {
 	const [ isRestoringConnection, setIsRestoringConnection ] = useState( false );
-	const [ restoreConnectionError, setRestoreConnectionError ] = useState( null );
+	const [ restoreConnectionError, setRestoreConnectionError ] = useState< string | null >( null );
 
-	const { disconnectUserSuccess, setConnectionErrors } = useDispatch( STORE_ID );
+	const { disconnectUserSuccess, setConnectionErrors } = useDispatch(
+		STORE_ID
+	) as ConnectionStoreDispatch;
 
 	const USER_CONNECTION_URL = getUserConnectionUrl();
 
@@ -34,7 +41,7 @@ export default function useRestoreConnection() {
 
 		return restApi
 			.reconnect()
-			.then( connectionStatusData => {
+			.then( ( connectionStatusData: { status: string } ) => {
 				// status 'in_progress' means the user needs to re-connect their WP.com account.
 				if ( 'in_progress' === connectionStatusData.status ) {
 					disconnectUserSuccess();
@@ -48,7 +55,7 @@ export default function useRestoreConnection() {
 
 				return connectionStatusData;
 			} )
-			.catch( error => {
+			.catch( ( error: string ) => {
 				setRestoreConnectionError( error );
 				setIsRestoringConnection( false );
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "1.4.38",
+	"version": "1.4.39",
 	"description": "Jetpack Connection Component",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
 	"bugs": {
@@ -25,14 +25,14 @@
 	"scripts": {
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
 		"test-coverage": "pnpm run test --coverage",
-		"typecheck": "tsc --noEmit"
+		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
 		"@automattic/jetpack-analytics": "^1.0.8",
 		"@automattic/jetpack-api": "^1.0.18",
-		"@automattic/jetpack-components": "^1.4.16",
+		"@automattic/jetpack-components": "^1.5.0",
 		"@automattic/jetpack-config": "^1.0.7",
-		"@automattic/jetpack-script-data": "^0.6.0",
+		"@automattic/jetpack-script-data": "^0.6.1",
 		"@wordpress/base-styles": "6.16.0",
 		"@wordpress/browserslist-config": "6.40.0",
 		"@wordpress/components": "32.2.0",
@@ -53,11 +53,11 @@
 		"@testing-library/react": "16.3.0",
 		"@testing-library/user-event": "14.6.1",
 		"@types/react": "18.3.28",
+		"@typescript/native-preview": "7.0.0-dev.20260225.1",
 		"jest": "30.2.0",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
-		"storybook": "10.2.11",
-		"typescript": "5.9.3"
+		"storybook": "10.2.11"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",