@quiltt/react-native 3.8.2 → 3.9.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @quiltt/react-native
 
+## 3.9.0
+
+### Minor Changes
+
+- [#307](https://github.com/quiltt/quiltt-js/pull/307) [`d0033cd`](https://github.com/quiltt/quiltt-js/commit/d0033cdbdaf33f9227afa55c9a6078156809a563) Thanks [@rubendinho](https://github.com/rubendinho)! - - Significantly reduce bundle size by migrating @apollo/client to "deep entrypoint import style"
+  - Bump @apollo/client to v3.11.8
+
+### Patch Changes
+
+- [#305](https://github.com/quiltt/quiltt-js/pull/305) [`803a4d0`](https://github.com/quiltt/quiltt-js/commit/803a4d09e458ed2e72781fcd475ad5f9639f2bf2) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Optimize connector WebView implementation
+
+- Updated dependencies [[`803a4d0`](https://github.com/quiltt/quiltt-js/commit/803a4d09e458ed2e72781fcd475ad5f9639f2bf2), [`d0033cd`](https://github.com/quiltt/quiltt-js/commit/d0033cdbdaf33f9227afa55c9a6078156809a563)]:
+  - @quiltt/react@3.9.0
+  - @quiltt/core@3.9.0
+
 ## 3.8.2
 
 ### Patch Changes

package/dist/index.js

@@ -3,14 +3,13 @@ export * from '@quiltt/core';
 import { useQuilttSession, ConnectorSDKEventType } from '@quiltt/react';
 export { QuilttAuthProvider, QuilttProvider, QuilttSettingsProvider, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useSession, useStorage } from '@quiltt/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { StyleSheet, Platform, StatusBar, SafeAreaView, View, Text, Pressable, ActivityIndicator, Linking } from 'react-native';
 import { URL } from 'react-native-url-polyfill';
 import { WebView } from 'react-native-webview';
 import { generateStackTrace, makeBacktrace, getCauses } from '@honeybadger-io/core/build/src/util';
 
-// Generated by genversion.
-const version = '3.8.2';
+var version = "3.9.0";
 
 const ErrorReporterConfig = {
     honeybadger_api_key: 'undefined'
@@ -257,6 +256,9 @@ const handleOAuthUrl = (oauthUrl)=>{
 const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError })=>{
     const webViewRef = useRef(null);
     const { session } = useQuilttSession();
+    const [preFlightCheck, setPreFlightCheck] = useState({
+        checked: false
+    });
     const encodedOAuthRedirectUrl = useMemo(()=>encodeURIComponent(oauthRedirectUrl), [
         oauthRedirectUrl
     ]);
@@ -270,9 +272,6 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
         connectorId,
         encodedOAuthRedirectUrl
     ]);
-    const [preFlightCheck, setPreFlightCheck] = useState({
-        checked: false
-    });
     useEffect(()=>{
         if (preFlightCheck.checked) return;
         const fetchDataAndSetState = async ()=>{
@@ -321,40 +320,42 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
         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?.(ConnectorSDKEventType.Load, metadata);
-                onLoad?.(metadata);
-                break;
-            case 'ExitAbort':
-                clearLocalStorage();
-                onEvent?.(ConnectorSDKEventType.ExitAbort, metadata);
-                onExit?.(ConnectorSDKEventType.ExitAbort, metadata);
-                onExitAbort?.(metadata);
-                break;
-            case 'ExitError':
-                clearLocalStorage();
-                onEvent?.(ConnectorSDKEventType.ExitError, metadata);
-                onExit?.(ConnectorSDKEventType.ExitError, metadata);
-                onExitError?.(metadata);
-                break;
-            case 'ExitSuccess':
-                clearLocalStorage();
-                onEvent?.(ConnectorSDKEventType.ExitSuccess, metadata);
-                onExit?.(ConnectorSDKEventType.ExitSuccess, metadata);
-                onExitSuccess?.(metadata);
-                break;
-            case 'Authenticate':
-                break;
-            case 'OauthRequested':
-                handleOAuthUrl(new URL(url.searchParams.get('oauthUrl')));
-                break;
-            default:
-                console.log('unhandled event', url);
-                break;
-        }
+        requestAnimationFrame(()=>{
+            const eventType = url.host;
+            switch(eventType){
+                case 'Load':
+                    initInjectedJavaScript();
+                    onEvent?.(ConnectorSDKEventType.Load, metadata);
+                    onLoad?.(metadata);
+                    break;
+                case 'ExitAbort':
+                    clearLocalStorage();
+                    onEvent?.(ConnectorSDKEventType.ExitAbort, metadata);
+                    onExit?.(ConnectorSDKEventType.ExitAbort, metadata);
+                    onExitAbort?.(metadata);
+                    break;
+                case 'ExitError':
+                    clearLocalStorage();
+                    onEvent?.(ConnectorSDKEventType.ExitError, metadata);
+                    onExit?.(ConnectorSDKEventType.ExitError, metadata);
+                    onExitError?.(metadata);
+                    break;
+                case 'ExitSuccess':
+                    clearLocalStorage();
+                    onEvent?.(ConnectorSDKEventType.ExitSuccess, metadata);
+                    onExit?.(ConnectorSDKEventType.ExitSuccess, metadata);
+                    onExitSuccess?.(metadata);
+                    break;
+                case 'Authenticate':
+                    break;
+                case 'OauthRequested':
+                    handleOAuthUrl(new URL(url.searchParams.get('oauthUrl')));
+                    break;
+                default:
+                    console.log('unhandled event', url);
+                    break;
+            }
+        });
     }, [
         clearLocalStorage,
         connectorId,
@@ -410,7 +411,24 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
             onShouldStartLoadWithRequest: requestHandler,
             javaScriptEnabled: true,
             domStorageEnabled: true,
-            webviewDebuggingEnabled: true
+            webviewDebuggingEnabled: true,
+            bounces: false,
+            scrollEnabled: true,
+            automaticallyAdjustContentInsets: false,
+            contentInsetAdjustmentBehavior: "never" // Controls how the WebView adjusts its content layout relative to safe areas and system UI
+            ,
+            ...Platform.OS === 'ios' ? {
+                decelerationRate: 'normal',
+                keyboardDisplayRequiresUserAction: false,
+                dataDetectorTypes: 'none',
+                allowsInlineMediaPlayback: true,
+                allowsBackForwardNavigationGestures: false,
+                startInLoadingState: true
+            } : {
+                androidLayerType: 'hardware',
+                cacheEnabled: true,
+                cacheMode: 'LOAD_CACHE_ELSE_NETWORK'
+            }
         })
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react-native",
-  "version": "3.8.2",
+  "version": "3.9.0",
   "description": "React Native components for Quiltt Connector",
   "homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/react-native#readme",
   "repository": {
@@ -25,20 +25,22 @@
   ],
   "dependencies": {
     "@honeybadger-io/core": "6.6.0",
-    "@quiltt/core": "3.8.2",
-    "@quiltt/react": "3.8.2"
+    "lodash.debounce": "4.0.8",
+    "@quiltt/core": "3.9.0",
+    "@quiltt/react": "3.9.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@types/base-64": "1.0.2",
-    "@types/node": "22.9.0",
+    "@types/lodash.debounce": "4.0.9",
+    "@types/node": "22.10.2",
     "@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": "0.76.5",
     "react-native-url-polyfill": "2.0.0",
-    "react-native-webview": "13.12.3",
+    "react-native-webview": "13.12.5",
     "rimraf": "6.0.1",
     "typescript": "5.6.3"
   },
@@ -54,8 +56,7 @@
   },
   "scripts": {
     "addApiKey": "node scripts/addApiKey.js",
-    "addVersion": "genversion --esm -f src/version.ts",
-    "build": "pnpm run addApiKey && pnpm run addVersion && bunchee",
+    "build": "pnpm run addApiKey && bunchee",
     "clean": "rimraf .turbo dist",
     "dev": "bunchee --watch",
     "lint": "TIMING=1 biome check src/ tests/ --fix",

package/src/components/QuilttConnector.tsx

@@ -4,12 +4,8 @@ import { URL } from 'react-native-url-polyfill' // https://github.com/facebook/r
 import { WebView } from 'react-native-webview'
 import type { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTypes'
 
-import {
-  type ConnectorSDKCallbackMetadata,
-  type ConnectorSDKCallbacks,
-  ConnectorSDKEventType,
-  useQuilttSession,
-} from '@quiltt/react'
+import { ConnectorSDKEventType, useQuilttSession } from '@quiltt/react'
+import type { ConnectorSDKCallbackMetadata, ConnectorSDKCallbacks } from '@quiltt/react'
 
 import { ErrorReporter, getErrorMessage } from '../utils'
 import { version } from '../version'
@@ -85,6 +81,7 @@ const QuilttConnector = ({
 }: QuilttConnectorProps) => {
   const webViewRef = useRef<WebView>(null)
   const { session } = useQuilttSession()
+  const [preFlightCheck, setPreFlightCheck] = useState<PreFlightCheck>({ checked: false })
 
   const encodedOAuthRedirectUrl = useMemo(
     () => encodeURIComponent(oauthRedirectUrl),
@@ -99,8 +96,6 @@ const QuilttConnector = ({
     return url.toString()
   }, [connectorId, encodedOAuthRedirectUrl])
 
-  const [preFlightCheck, setPreFlightCheck] = useState<PreFlightCheck>({ checked: false })
-
   useEffect(() => {
     if (preFlightCheck.checked) return
     const fetchDataAndSetState = async () => {
@@ -146,41 +141,43 @@ const QuilttConnector = ({
       url.searchParams.append('connectorId', connectorId)
       const metadata = Object.fromEntries(url.searchParams) as ConnectorSDKCallbackMetadata
 
-      const eventType = url.host
-      switch (eventType) {
-        case 'Load':
-          initInjectedJavaScript()
-          onEvent?.(ConnectorSDKEventType.Load, metadata)
-          onLoad?.(metadata)
-          break
-        case 'ExitAbort':
-          clearLocalStorage()
-          onEvent?.(ConnectorSDKEventType.ExitAbort, metadata)
-          onExit?.(ConnectorSDKEventType.ExitAbort, metadata)
-          onExitAbort?.(metadata)
-          break
-        case 'ExitError':
-          clearLocalStorage()
-          onEvent?.(ConnectorSDKEventType.ExitError, metadata)
-          onExit?.(ConnectorSDKEventType.ExitError, metadata)
-          onExitError?.(metadata)
-          break
-        case 'ExitSuccess':
-          clearLocalStorage()
-          onEvent?.(ConnectorSDKEventType.ExitSuccess, metadata)
-          onExit?.(ConnectorSDKEventType.ExitSuccess, metadata)
-          onExitSuccess?.(metadata)
-          break
-        case 'Authenticate':
-          // TODO: handle Authenticate
-          break
-        case 'OauthRequested':
-          handleOAuthUrl(new URL(url.searchParams.get('oauthUrl') as string))
-          break
-        default:
-          console.log('unhandled event', url)
-          break
-      }
+      requestAnimationFrame(() => {
+        const eventType = url.host
+        switch (eventType) {
+          case 'Load':
+            initInjectedJavaScript()
+            onEvent?.(ConnectorSDKEventType.Load, metadata)
+            onLoad?.(metadata)
+            break
+          case 'ExitAbort':
+            clearLocalStorage()
+            onEvent?.(ConnectorSDKEventType.ExitAbort, metadata)
+            onExit?.(ConnectorSDKEventType.ExitAbort, metadata)
+            onExitAbort?.(metadata)
+            break
+          case 'ExitError':
+            clearLocalStorage()
+            onEvent?.(ConnectorSDKEventType.ExitError, metadata)
+            onExit?.(ConnectorSDKEventType.ExitError, metadata)
+            onExitError?.(metadata)
+            break
+          case 'ExitSuccess':
+            clearLocalStorage()
+            onEvent?.(ConnectorSDKEventType.ExitSuccess, metadata)
+            onExit?.(ConnectorSDKEventType.ExitSuccess, metadata)
+            onExitSuccess?.(metadata)
+            break
+          case 'Authenticate':
+            // TODO: handle Authenticate
+            break
+          case 'OauthRequested':
+            handleOAuthUrl(new URL(url.searchParams.get('oauthUrl') as string))
+            break
+          default:
+            console.log('unhandled event', url)
+            break
+        }
+      })
     },
     [
       clearLocalStorage,
@@ -236,6 +233,24 @@ const QuilttConnector = ({
         javaScriptEnabled
         domStorageEnabled // To enable localStorage in Android webview
         webviewDebuggingEnabled
+        bounces={false} // Controls the bouncing effect when scrolling past content boundaries (iOS only)
+        scrollEnabled={true} // Enables scrolling within the WebView
+        automaticallyAdjustContentInsets={false} // Disables automatic padding adjustments based on navigation bars/safe areas
+        contentInsetAdjustmentBehavior="never" // Controls how the WebView adjusts its content layout relative to safe areas and system UI
+        {...(Platform.OS === 'ios'
+          ? {
+              decelerationRate: 'normal',
+              keyboardDisplayRequiresUserAction: false,
+              dataDetectorTypes: 'none',
+              allowsInlineMediaPlayback: true,
+              allowsBackForwardNavigationGestures: false,
+              startInLoadingState: true,
+            }
+          : {
+              androidLayerType: 'hardware',
+              cacheEnabled: true,
+              cacheMode: 'LOAD_CACHE_ELSE_NETWORK',
+            })}
       />
     </AndroidSafeAreaView>
   )

package/src/version.ts

@@ -1,2 +1 @@
-// Generated by genversion.
-export const version = '3.8.2'
+export { version } from '../package.json'