[WIP] Add TurboModule specs and codegen components to prepare RN new-arch migration

__mocks__/codegenNativeComponent.ts

@@ -0,0 +1,11 @@
+const React = require('react');
+
+const codegenNativeComponent = (_name: string) => {
+  return (props: any) =>
+    React.createElement('View', {
+      ...props,
+      testID: props?.testID ?? 'accelerated-checkout-buttons',
+    });
+};
+
+export default codegenNativeComponent;

__mocks__/react-native.ts

@@ -47,6 +47,7 @@ const exampleConfig = {preloading: true};
 
 const ShopifyCheckoutSheetKit = {
   version: '0.7.0',
+  getConstants: jest.fn(() => ({version: '0.7.0'})),
   preload: jest.fn(),
   present: jest.fn(),
   dismiss: jest.fn(),
@@ -58,6 +59,8 @@ const ShopifyCheckoutSheetKit = {
   initiateGeolocationRequest: jest.fn(),
   configureAcceleratedCheckouts: jest.fn(),
   isAcceleratedCheckoutAvailable: jest.fn(),
+  addListener: jest.fn(),
+  removeListeners: jest.fn(),
 };
 
 // CommonJS export for Jest manual mock resolution
@@ -68,6 +71,14 @@ module.exports = {
   },
   NativeEventEmitter: jest.fn(() => createMockEmitter()),
   requireNativeComponent,
+  TurboModuleRegistry: {
+    getEnforcing: jest.fn((name: string) => {
+      if (name === 'ShopifyCheckoutSheetKit') {
+        return ShopifyCheckoutSheetKit;
+      }
+      return null;
+    }),
+  },
   NativeModules: {
     ShopifyCheckoutSheetKit: {
       ...ShopifyCheckoutSheetKit,

jest.config.js

@@ -3,6 +3,10 @@ module.exports = {
   modulePathIgnorePatterns: ['modules/@shopify/checkout-sheet-kit/lib'],
   modulePaths: ['<rootDir>/sample/node_modules'],
   setupFiles: ['<rootDir>/jest.setup.ts'],
+  moduleNameMapper: {
+    'react-native/Libraries/Utilities/codegenNativeComponent':
+      '<rootDir>/__mocks__/codegenNativeComponent.ts',
+  },
   transform: {
     '\\.[jt]sx?$': 'babel-jest',
   },

modules/@shopify/checkout-sheet-kit/package.json

@@ -54,6 +54,14 @@
     "react-native-builder-bob": "^0.23.2",
     "typescript": "^5.9.2"
   },
+  "codegenConfig": {
+    "name": "RNShopifyCheckoutSheetKitSpec",
+    "type": "all",
+    "jsSrcsDir": "src/specs",
+    "android": {
+      "javaPackageName": "com.shopify.checkoutsheetkit"
+    }
+  },
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",

modules/@shopify/checkout-sheet-kit/package.snapshot.json

@@ -30,6 +30,10 @@
   "lib/commonjs/index.js.map",
   "lib/commonjs/pixels.d.js",
   "lib/commonjs/pixels.d.js.map",
+  "lib/commonjs/specs/NativeShopifyCheckoutSheetKit.js",
+  "lib/commonjs/specs/NativeShopifyCheckoutSheetKit.js.map",
+  "lib/commonjs/specs/RCTAcceleratedCheckoutButtonsNativeComponent.js",
+  "lib/commonjs/specs/RCTAcceleratedCheckoutButtonsNativeComponent.js.map",
   "lib/module/components/AcceleratedCheckoutButtons.js",
   "lib/module/components/AcceleratedCheckoutButtons.js.map",
   "lib/module/context.js",
@@ -44,18 +48,28 @@
   "lib/module/index.js.map",
   "lib/module/pixels.d.js",
   "lib/module/pixels.d.js.map",
+  "lib/module/specs/NativeShopifyCheckoutSheetKit.js",
+  "lib/module/specs/NativeShopifyCheckoutSheetKit.js.map",
+  "lib/module/specs/RCTAcceleratedCheckoutButtonsNativeComponent.js",
+  "lib/module/specs/RCTAcceleratedCheckoutButtonsNativeComponent.js.map",
   "lib/typescript/src/components/AcceleratedCheckoutButtons.d.ts",
   "lib/typescript/src/components/AcceleratedCheckoutButtons.d.ts.map",
   "lib/typescript/src/context.d.ts",
   "lib/typescript/src/context.d.ts.map",
   "lib/typescript/src/index.d.ts",
   "lib/typescript/src/index.d.ts.map",
+  "lib/typescript/src/specs/NativeShopifyCheckoutSheetKit.d.ts",
+  "lib/typescript/src/specs/NativeShopifyCheckoutSheetKit.d.ts.map",
+  "lib/typescript/src/specs/RCTAcceleratedCheckoutButtonsNativeComponent.d.ts",
+  "lib/typescript/src/specs/RCTAcceleratedCheckoutButtonsNativeComponent.d.ts.map",
   "package.json",
   "src/components/AcceleratedCheckoutButtons.tsx",
   "src/context.tsx",
   "src/errors.d.ts",
   "src/events.d.ts",
   "src/index.d.ts",
   "src/index.ts",
-  "src/pixels.d.ts"
+  "src/pixels.d.ts",
+  "src/specs/NativeShopifyCheckoutSheetKit.ts",
+  "src/specs/RCTAcceleratedCheckoutButtonsNativeComponent.ts"
 ]

modules/@shopify/checkout-sheet-kit/src/components/AcceleratedCheckoutButtons.tsx

@@ -22,8 +22,9 @@
 */
 
 import React, {useCallback, useMemo, useState} from 'react';
-import {requireNativeComponent, Platform} from 'react-native';
+import {Platform} from 'react-native';
 import type {ViewStyle} from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type {
   AcceleratedCheckoutWallet,
   CheckoutCompletedEvent,
@@ -164,7 +165,7 @@
 }
 
 const RCTAcceleratedCheckoutButtons =
-  requireNativeComponent<NativeAcceleratedCheckoutButtonsProps>(
+  codegenNativeComponent<NativeAcceleratedCheckoutButtonsProps>(
     'RCTAcceleratedCheckoutButtons',
   );
 

modules/@shopify/checkout-sheet-kit/src/index.ts

@@ -21,17 +21,13 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-import {
-  NativeModules,
-  NativeEventEmitter,
-  PermissionsAndroid,
-  Platform,
-} from 'react-native';
+import {NativeEventEmitter, PermissionsAndroid, Platform} from 'react-native';
 import type {
   EmitterSubscription,
   EventSubscription,
   PermissionStatus,
 } from 'react-native';
+import NativeShopifyCheckoutSheetKit from './specs/NativeShopifyCheckoutSheetKit';
 import {ShopifyCheckoutSheetProvider, useShopifyCheckoutSheet} from './context';
 import {ApplePayContactField, ColorScheme, LogLevel} from './index.d';
 import type {
@@ -64,14 +60,7 @@ import type {
   RenderStateChangeEvent,
 } from './components/AcceleratedCheckoutButtons';
 
-const RNShopifyCheckoutSheetKit = NativeModules.ShopifyCheckoutSheetKit;
-
-if (!('ShopifyCheckoutSheetKit' in NativeModules)) {
-  throw new Error(`
-  "@shopify/checkout-sheet-kit" is not correctly linked.
-
-  If you are building for iOS, make sure to run "pod install" first and restart the metro server.`);
-}
+const RNShopifyCheckoutSheetKit = NativeShopifyCheckoutSheetKit;
 
 const defaultFeatures: Features = {
   handleGeolocationRequests: true,
@@ -114,7 +103,8 @@ class ShopifyCheckoutSheet implements ShopifyCheckoutSheetKit {
     }
   }
 
-  public readonly version: string = RNShopifyCheckoutSheetKit.version;
+  public readonly version: string =
+    RNShopifyCheckoutSheetKit.getConstants().version;
 
   /**
    * Dismisses the currently displayed checkout sheet
@@ -151,7 +141,7 @@ class ShopifyCheckoutSheet implements ShopifyCheckoutSheetKit {
    * @returns Promise containing the current Configuration
    */
   public async getConfig(): Promise<Configuration> {
-    return RNShopifyCheckoutSheetKit.getConfig();
+    return RNShopifyCheckoutSheetKit.getConfig() as Promise<Configuration>;
   }
 
   /**

modules/@shopify/checkout-sheet-kit/src/specs/NativeShopifyCheckoutSheetKit.ts

@@ -0,0 +1,101 @@
+/*
+MIT License
+
+Copyright 2023 - Present, Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+import type {TurboModule} from 'react-native';
+import {TurboModuleRegistry} from 'react-native';
+
+type IosColorsSpec = {
+  tintColor?: string;
+  backgroundColor?: string;
+  closeButtonColor?: string;
+};
+
+type AndroidColorsBaseSpec = {
+  progressIndicator?: string;
+  backgroundColor?: string;
+  headerBackgroundColor?: string;
+  headerTextColor?: string;
+  closeButtonColor?: string;
+};
+
+type AndroidColorsSpec = {
+  progressIndicator?: string;
+  backgroundColor?: string;
+  headerBackgroundColor?: string;
+  headerTextColor?: string;
+  closeButtonColor?: string;
+  light?: AndroidColorsBaseSpec;
+  dark?: AndroidColorsBaseSpec;
+};
+
+type ColorsSpec = {
+  ios?: IosColorsSpec;
+  android?: AndroidColorsSpec;
+};
+
+type ConfigurationSpec = {
+  preloading?: boolean;
+  title?: string;
+  colorScheme?: string;
+  logLevel?: string;
+  colors?: ColorsSpec;
+};
+
+type ConfigurationResultSpec = {
+  preloading: boolean;
+  colorScheme: string;
+  logLevel: string;
+  title?: string;
+  tintColor?: string;
+  backgroundColor?: string;
+  closeButtonColor?: string;
+};
+
+export interface Spec extends TurboModule {
+  present(checkoutUrl: string): void;
+  preload(checkoutUrl: string): void;
+  dismiss(): void;
+  invalidateCache(): void;
+  setConfig(configuration: ConfigurationSpec): void;
+  getConfig(): Promise<ConfigurationResultSpec>;
+  configureAcceleratedCheckouts(
+    storefrontDomain: string,
+    storefrontAccessToken: string,
+    customerEmail: string | null,
+    customerPhoneNumber: string | null,
+    customerAccessToken: string | null,
+    applePayMerchantIdentifier: string | null,
+    applyPayContactFields: string[],
+    supportedShippingCountries: string[],
+  ): Promise<boolean>;
+  isAcceleratedCheckoutAvailable(): Promise<boolean>;
+  isApplePayAvailable(): Promise<boolean>;
+  initiateGeolocationRequest(allow: boolean): void;
+  addListener(eventName: string): void;
+  removeListeners(count: number): void;
+  getConstants(): {version: string};
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'ShopifyCheckoutSheetKit',
+);

modules/@shopify/checkout-sheet-kit/src/specs/RCTAcceleratedCheckoutButtonsNativeComponent.ts

@@ -0,0 +1,81 @@
+/*
+MIT License
+
+Copyright 2023 - Present, Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+import type {ViewProps} from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type {
+  BubblingEventHandler,
+  DirectEventHandler,
+  Double,
+  Float,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+type FailEvent = Readonly<{
+  __typename: string;
+  message: string;
+  code?: string;
+  recoverable?: boolean;
+}>;
+
+type CompleteEvent = Readonly<{
+  orderDetails: Readonly<{
+    id: string;
+    email?: string;
+    phone?: string;
+  }>;
+}>;
+
+type RenderStateChangeEvent = Readonly<{
+  state: string;
+  reason?: string;
+}>;
+
+type ClickLinkEvent = Readonly<{url: string}>;
+type SizeChangeEvent = Readonly<{height: Double}>;
+
+type CheckoutIdentifierSpec = Readonly<{
+  cartId?: string;
+  variantId?: string;
+  quantity?: Double;
+}>;
+
+interface NativeProps extends ViewProps {
+  checkoutIdentifier: CheckoutIdentifierSpec;
+  cornerRadius?: Float;
+  wallets?: ReadonlyArray<string>;
+  applePayLabel?: string;
+  onFail?: BubblingEventHandler<FailEvent>;
+  onComplete?: BubblingEventHandler<CompleteEvent>;
+  onCancel?: BubblingEventHandler<null>;
+  onRenderStateChange?: BubblingEventHandler<RenderStateChangeEvent>;
+  onWebPixelEvent?: BubblingEventHandler<Readonly<{data: string}>>;
+  onClickLink?: BubblingEventHandler<ClickLinkEvent>;
+  onSizeChange?: DirectEventHandler<SizeChangeEvent>;
+  onShouldRecoverFromError?: DirectEventHandler<
+    Readonly<{recoverable: boolean}>
+  >;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'RCTAcceleratedCheckoutButtons',
+);