@quiltt/react-native 3.7.4 → 3.8.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @quiltt/react-native
 
+## 3.8.1
+
+### Patch Changes
+
+- [#300](https://github.com/quiltt/quiltt-js/pull/300) [`a359810`](https://github.com/quiltt/quiltt-js/commit/a3598104565b4428beef9de37f85211e9caf465b) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Make @quiltt/react-native ESM only
+
+- Updated dependencies [[`a359810`](https://github.com/quiltt/quiltt-js/commit/a3598104565b4428beef9de37f85211e9caf465b)]:
+  - @quiltt/react@3.8.1
+  - @quiltt/core@3.8.1
+
+## 3.8.0
+
+### Minor Changes
+
+- [#298](https://github.com/quiltt/quiltt-js/pull/298) [`134b294`](https://github.com/quiltt/quiltt-js/commit/134b294019c3bdbccc1f4b5cf9af38d43ea5b3ac) Thanks [@zubairaziz](https://github.com/zubairaziz)! - - Update dependencies
+  - Update expo-react-native implementation
+  - Reorganize test files
+  - Fix security vulnerabilities
+
+### Patch Changes
+
+- Updated dependencies [[`134b294`](https://github.com/quiltt/quiltt-js/commit/134b294019c3bdbccc1f4b5cf9af38d43ea5b3ac)]:
+  - @quiltt/react@3.8.0
+  - @quiltt/core@3.8.0
+
 ## 3.7.4
 
 ### Patch Changes

package/dist/index.js

@@ -10,7 +10,7 @@ import { WebView } from 'react-native-webview';
 import { generateStackTrace, makeBacktrace, getCauses } from '@honeybadger-io/core/build/src/util';
 
 // Generated by genversion.
-const version = '3.7.4';
+const version = '3.8.1';
 
 const ErrorReporterConfig = {
     honeybadger_api_key: 'undefined'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react-native",
-  "version": "3.7.4",
+  "version": "3.8.1",
   "description": "React Native components for Quiltt Connector",
   "homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/react-native#readme",
   "repository": {
@@ -11,14 +11,12 @@
   "license": "MIT",
   "type": "module",
   "exports": {
-    "import": {
+    ".": {
+      "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
-    },
-    "require": {
-      "default": "./dist/index.cjs"
     }
   },
-  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist/**",
@@ -27,29 +25,29 @@
   ],
   "dependencies": {
     "@honeybadger-io/core": "6.6.0",
-    "base-64": "1.0.0",
-    "react-native-url-polyfill": "2.0.0",
-    "react-native-webview": "13.10.7",
-    "@quiltt/core": "3.7.4",
-    "@quiltt/react": "3.7.4"
+    "@quiltt/core": "3.8.1",
+    "@quiltt/react": "3.8.1"
   },
   "devDependencies": {
-    "@apollo/client": "3.9.11",
-    "@biomejs/biome": "1.8.3",
+    "@biomejs/biome": "1.9.4",
     "@types/base-64": "1.0.2",
-    "@types/node": "22.4.1",
-    "@types/react": "18.3.3",
-    "bunchee": "5.3.2",
+    "@types/node": "22.9.0",
+    "@types/react": "18.3.12",
+    "base-64": "1.0.0",
+    "bunchee": "5.6.1",
     "react": "18.3.1",
+    "react-native": "0.76.2",
+    "react-native-url-polyfill": "2.0.0",
+    "react-native-webview": "13.12.3",
     "rimraf": "6.0.1",
-    "typescript": "5.5.4"
+    "typescript": "5.6.3"
   },
   "peerDependencies": {
-    "base-64": "*",
-    "react": "^18.2.0",
-    "react-native": "^0.72.5",
-    "react-native-url-polyfill": "*",
-    "react-native-webview": "^13.0.0"
+    "base-64": "^1.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-native": ">=0.72.0",
+    "react-native-url-polyfill": "^2.0.0",
+    "react-native-webview": ">=13.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -60,7 +58,7 @@
     "build": "pnpm run addApiKey && pnpm run addVersion && bunchee",
     "clean": "rimraf .turbo dist",
     "dev": "bunchee --watch",
-    "lint": "TIMING=1 biome check src/ --fix",
+    "lint": "TIMING=1 biome check src/ tests/ --fix",
     "typecheck": "tsc --project tsconfig.json --noEmit"
   }
 }

package/src/version.ts

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '3.7.4'
+export const version = '3.8.1'

package/dist/index.cjs

@@ -1,470 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var base64 = require('base-64');
-var core = require('@quiltt/core');
-var react = require('@quiltt/react');
-var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('react');
-var reactNative = require('react-native');
-var reactNativeUrlPolyfill = require('react-native-url-polyfill');
-var reactNativeWebview = require('react-native-webview');
-var util = require('@honeybadger-io/core/build/src/util');
-
-// Generated by genversion.
-const version = '3.7.4';
-
-const ErrorReporterConfig = {
-    honeybadger_api_key: 'undefined'
-};
-
-// Quick hack to send error to Honeybadger to debug why the connector is not routable
-const notifier = {
-    name: 'Quiltt React Native SDK Reporter',
-    url: 'https://www.quiltt.dev/guides/connector/react-native',
-    version: version
-};
-class ErrorReporter {
-    constructor(platform){
-        this.noticeUrl = 'https://api.honeybadger.io/v1/notices';
-        this.apiKey = ErrorReporterConfig.honeybadger_api_key;
-        this.clientName = 'react-native-sdk';
-        this.clientVersion = version;
-        this.platform = platform;
-        this.logger = console;
-        this.userAgent = `${this.clientName} ${this.clientVersion}; ${this.platform}`;
-    }
-    async send(error, context) {
-        const headers = {
-            'X-API-Key': this.apiKey,
-            'Content-Type': 'application/json',
-            Accept: 'application/json',
-            'User-Agent': `${this.clientName} ${this.clientVersion}; ${this.platform}`
-        };
-        const payload = await this.buildPayload(error, context);
-        const method = 'POST';
-        const body = JSON.stringify(payload);
-        const mode = 'cors';
-        fetch(this.noticeUrl, {
-            headers,
-            method,
-            body,
-            mode
-        }).then((response)=>{
-            if (response.status !== 201) {
-                this.logger.warn(`Error report failed: unknown response from server. code=${response.status}`);
-                return;
-            }
-            return response.json();
-        }).then((data)=>{
-            if (data) {
-                this.logger.info(`Error report sent ⚡ https://app.honeybadger.io/notice/${data?.id}`);
-            }
-        });
-    }
-    async buildPayload(error, localContext = {}) {
-        const notice = error;
-        notice.stack = util.generateStackTrace();
-        notice.backtrace = util.makeBacktrace(notice.stack);
-        return {
-            notifier,
-            error: {
-                class: notice.name,
-                message: notice.message,
-                backtrace: notice.backtrace,
-                // fingerprint: this.calculateFingerprint(notice),
-                tags: notice.tags || [],
-                causes: util.getCauses(notice, this.logger)
-            },
-            request: {
-                url: notice.url,
-                component: notice.component,
-                action: notice.action,
-                context: localContext || {},
-                cgi_data: {},
-                params: {},
-                session: {}
-            },
-            server: {
-                project_root: notice.projectRoot,
-                environment_name: this.userAgent,
-                revision: version,
-                hostname: this.platform,
-                time: new Date().toUTCString()
-            },
-            details: notice.details || {}
-        };
-    }
-}
-
-const getErrorMessage = (responseStatus, error)=>{
-    if (error) return `An error occurred while checking the connector URL: ${error?.name} \n${error?.message}`;
-    return responseStatus ? `The URL is not routable. Response status: ${responseStatus}` : 'An error occurred while checking the connector URL';
-};
-
-const AndroidSafeAreaView = ({ testId, children })=>/*#__PURE__*/ jsxRuntime.jsx(reactNative.SafeAreaView, {
-        testID: testId,
-        style: styles$1.AndroidSafeArea,
-        children: children
-    });
-const styles$1 = reactNative.StyleSheet.create({
-    AndroidSafeArea: {
-        flex: 1,
-        backgroundColor: 'white',
-        paddingTop: reactNative.Platform.OS === 'android' ? reactNative.StatusBar.currentHeight : 0
-    }
-});
-
-const ErrorScreen = ({ testId, error, cta })=>/*#__PURE__*/ jsxRuntime.jsx(AndroidSafeAreaView, {
-        testId: testId,
-        children: /*#__PURE__*/ jsxRuntime.jsxs(reactNative.View, {
-            style: [
-                styles.container,
-                styles.padding
-            ],
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsxs(reactNative.View, {
-                    style: {
-                        flex: 1,
-                        justifyContent: 'center'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(reactNative.View, {
-                            style: {
-                                flexDirection: 'row',
-                                justifyContent: 'space-between',
-                                alignItems: 'center',
-                                marginVertical: 10
-                            },
-                            children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.Text, {
-                                style: [
-                                    styles.title
-                                ],
-                                children: "Cannot connect to the internet."
-                            })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(reactNative.Text, {
-                            style: [
-                                styles.subtitle
-                            ],
-                            children: error
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(reactNative.Pressable, {
-                    style: [
-                        styles.pressable
-                    ],
-                    onPress: cta,
-                    children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.Text, {
-                        style: [
-                            styles.pressableText
-                        ],
-                        children: "Exit"
-                    })
-                })
-            ]
-        })
-    });
-const styles = reactNative.StyleSheet.create({
-    container: {
-        flex: 1,
-        flexDirection: 'column',
-        justifyContent: 'flex-start',
-        alignItems: 'stretch',
-        backgroundColor: '#F3F4F6'
-    },
-    title: {
-        color: '#1F2937',
-        fontSize: 30,
-        fontWeight: 'bold'
-    },
-    subtitle: {
-        color: 'rgba(107, 114, 128, 1)'
-    },
-    padding: {
-        paddingHorizontal: 16,
-        paddingVertical: 24
-    },
-    pressable: {
-        marginTop: 20,
-        backgroundColor: '#1F2937',
-        padding: 10,
-        paddingHorizontal: 25,
-        borderRadius: 5
-    },
-    pressableText: {
-        color: '#fff',
-        textAlign: 'center'
-    }
-});
-
-const LoadingScreen = ({ testId })=>/*#__PURE__*/ jsxRuntime.jsx(AndroidSafeAreaView, {
-        testId: testId,
-        children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.View, {
-            style: {
-                flex: 1,
-                justifyContent: 'center',
-                alignItems: 'center'
-            },
-            children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.ActivityIndicator, {
-                testID: "activity-indicator",
-                size: "large",
-                color: "#5928A3"
-            })
-        })
-    });
-
-const errorReporter = new ErrorReporter(`${reactNative.Platform.OS} ${reactNative.Platform.Version}`);
-const PREFLIGHT_RETRY_COUNT = 3;
-const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
-    let responseStatus;
-    let error;
-    try {
-        const response = await fetch(connectorUrl);
-        if (!response.ok) {
-            responseStatus = response.status;
-            throw new Error(`The URL ${connectorUrl} is not routable.`);
-        }
-        console.log(`The URL ${connectorUrl} is routable.`);
-        return {
-            checked: true
-        };
-    } catch (e) {
-        error = e;
-        console.error(`An error occurred while checking the connector URL: ${error}`);
-        if (retryCount < PREFLIGHT_RETRY_COUNT) {
-            const delay = 50 * 2 ** retryCount;
-            await new Promise((resolve)=>setTimeout(resolve, delay));
-            console.log(`Retrying... Attempt number ${retryCount + 1}`);
-            return checkConnectorUrl(connectorUrl, retryCount + 1);
-        }
-        const errorMessage = getErrorMessage(responseStatus, error);
-        const errorToSend = error || new Error(errorMessage);
-        const context = {
-            connectorUrl,
-            responseStatus
-        };
-        if (responseStatus !== 404) await errorReporter.send(errorToSend, context);
-        return {
-            checked: true,
-            error: errorMessage
-        };
-    }
-};
-const handleOAuthUrl = (oauthUrl)=>{
-    console.log(`handleOAuthUrl - Opening URL - ${oauthUrl.toString()}`);
-    reactNative.Linking.openURL(oauthUrl.toString());
-};
-const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError })=>{
-    const webViewRef = react$1.useRef(null);
-    const { session } = react.useQuilttSession();
-    const encodedOAuthRedirectUrl = react$1.useMemo(()=>encodeURIComponent(oauthRedirectUrl), [
-        oauthRedirectUrl
-    ]);
-    const connectorUrl = react$1.useMemo(()=>{
-        const url = new reactNativeUrlPolyfill.URL(`https://${connectorId}.quiltt.app`);
-        url.searchParams.append('mode', 'webview');
-        url.searchParams.append('oauth_redirect_url', encodedOAuthRedirectUrl);
-        url.searchParams.append('agent', `react-native-${version}`);
-        return url.toString();
-    }, [
-        connectorId,
-        encodedOAuthRedirectUrl
-    ]);
-    const [preFlightCheck, setPreFlightCheck] = react$1.useState({
-        checked: false
-    });
-    react$1.useEffect(()=>{
-        if (preFlightCheck.checked) return;
-        const fetchDataAndSetState = async ()=>{
-            const connectorUrlStatus = await checkConnectorUrl(connectorUrl);
-            setPreFlightCheck(connectorUrlStatus);
-        };
-        fetchDataAndSetState();
-    }, [
-        connectorUrl,
-        preFlightCheck
-    ]);
-    const initInjectedJavaScript = react$1.useCallback(()=>{
-        const script = `\
-      const options = {\
-        source: 'quiltt',\
-        type: 'Options',\
-        token: '${session?.token}',\
-        connectorId: '${connectorId}',\
-        connectionId: '${connectionId}',\
-        institution: '${institution}', \
-      };\
-      const compactedOptions = Object.keys(options).reduce((acc, key) => {\
-        if (options[key] !== 'undefined') {\
-          acc[key] = options[key];\
-        }\
-        return acc;\
-      }, {});\
-      window.postMessage(compactedOptions);\
-    `;
-        webViewRef.current?.injectJavaScript(script);
-    }, [
-        connectionId,
-        connectorId,
-        institution,
-        session?.token
-    ]);
-    const isQuilttEvent = react$1.useCallback((url)=>url.protocol === 'quilttconnector:', []);
-    const shouldRender = react$1.useCallback((url)=>!isQuilttEvent(url), [
-        isQuilttEvent
-    ]);
-    const clearLocalStorage = react$1.useCallback(()=>{
-        const script = 'localStorage.clear();';
-        webViewRef.current?.injectJavaScript(script);
-    }, []);
-    const handleQuilttEvent = react$1.useCallback((url)=>{
-        url.searchParams.delete('source');
-        url.searchParams.append('connectorId', connectorId);
-        const metadata = Object.fromEntries(url.searchParams);
-        const eventType = url.host;
-        switch(eventType){
-            case 'Load':
-                initInjectedJavaScript();
-                onEvent?.(react.ConnectorSDKEventType.Load, metadata);
-                onLoad?.(metadata);
-                break;
-            case 'ExitAbort':
-                clearLocalStorage();
-                onEvent?.(react.ConnectorSDKEventType.ExitAbort, metadata);
-                onExit?.(react.ConnectorSDKEventType.ExitAbort, metadata);
-                onExitAbort?.(metadata);
-                break;
-            case 'ExitError':
-                clearLocalStorage();
-                onEvent?.(react.ConnectorSDKEventType.ExitError, metadata);
-                onExit?.(react.ConnectorSDKEventType.ExitError, metadata);
-                onExitError?.(metadata);
-                break;
-            case 'ExitSuccess':
-                clearLocalStorage();
-                onEvent?.(react.ConnectorSDKEventType.ExitSuccess, metadata);
-                onExit?.(react.ConnectorSDKEventType.ExitSuccess, metadata);
-                onExitSuccess?.(metadata);
-                break;
-            case 'Authenticate':
-                break;
-            case 'OauthRequested':
-                handleOAuthUrl(new reactNativeUrlPolyfill.URL(url.searchParams.get('oauthUrl')));
-                break;
-            default:
-                console.log('unhandled event', url);
-                break;
-        }
-    }, [
-        clearLocalStorage,
-        connectorId,
-        initInjectedJavaScript,
-        onEvent,
-        onExit,
-        onExitAbort,
-        onExitError,
-        onExitSuccess,
-        onLoad
-    ]);
-    const requestHandler = react$1.useCallback((request)=>{
-        const url = new reactNativeUrlPolyfill.URL(request.url);
-        if (isQuilttEvent(url)) {
-            handleQuilttEvent(url);
-            return false;
-        }
-        if (shouldRender(url)) return true;
-        // Plaid set oauth url by doing window.location.href = url
-        // So we use `handleOAuthUrl` as a catch all and assume all url got to this step is Plaid OAuth url
-        handleOAuthUrl(url);
-        return false;
-    }, [
-        handleQuilttEvent,
-        isQuilttEvent,
-        shouldRender
-    ]);
-    if (!preFlightCheck.checked) return /*#__PURE__*/ jsxRuntime.jsx(LoadingScreen, {
-        testId: "loading-screen"
-    });
-    if (preFlightCheck.error) {
-        return /*#__PURE__*/ jsxRuntime.jsx(ErrorScreen, {
-            testId: "error-screen",
-            error: preFlightCheck.error,
-            cta: ()=>onExitError?.({
-                    connectorId
-                })
-        });
-    }
-    return /*#__PURE__*/ jsxRuntime.jsx(AndroidSafeAreaView, {
-        testId: testId,
-        children: /*#__PURE__*/ jsxRuntime.jsx(reactNativeWebview.WebView, {
-            testID: "webview",
-            ref: webViewRef,
-            // Plaid keeps sending window.location = 'about:srcdoc' and causes some noise in RN
-            // All whitelists are now handled in requestHandler, handleQuilttEvent and handleOAuthUrl
-            originWhitelist: [
-                '*'
-            ],
-            source: {
-                uri: connectorUrl
-            },
-            onShouldStartLoadWithRequest: requestHandler,
-            javaScriptEnabled: true,
-            domStorageEnabled: true,
-            webviewDebuggingEnabled: true
-        })
-    });
-};
-QuilttConnector.displayName = 'QuilttConnector';
-
-// Hermes doesn't have atob
-// https://github.com/facebook/hermes/issues/1178
-if (!global.atob) {
-    global.atob = base64.decode;
-}
-
-Object.defineProperty(exports, "QuilttAuthProvider", {
-  enumerable: true,
-  get: function () { return react.QuilttAuthProvider; }
-});
-Object.defineProperty(exports, "QuilttProvider", {
-  enumerable: true,
-  get: function () { return react.QuilttProvider; }
-});
-Object.defineProperty(exports, "QuilttSettingsProvider", {
-  enumerable: true,
-  get: function () { return react.QuilttSettingsProvider; }
-});
-Object.defineProperty(exports, "useQuilttClient", {
-  enumerable: true,
-  get: function () { return react.useQuilttClient; }
-});
-Object.defineProperty(exports, "useQuilttConnector", {
-  enumerable: true,
-  get: function () { return react.useQuilttConnector; }
-});
-Object.defineProperty(exports, "useQuilttSession", {
-  enumerable: true,
-  get: function () { return react.useQuilttSession; }
-});
-Object.defineProperty(exports, "useQuilttSettings", {
-  enumerable: true,
-  get: function () { return react.useQuilttSettings; }
-});
-Object.defineProperty(exports, "useSession", {
-  enumerable: true,
-  get: function () { return react.useSession; }
-});
-Object.defineProperty(exports, "useStorage", {
-  enumerable: true,
-  get: function () { return react.useStorage; }
-});
-exports.QuilttConnector = QuilttConnector;
-exports.checkConnectorUrl = checkConnectorUrl;
-exports.handleOAuthUrl = handleOAuthUrl;
-Object.keys(core).forEach(function (k) {
-  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-    enumerable: true,
-    get: function () { return core[k]; }
-  });
-});