Skip to content

Commit

Permalink
[react-native] Optimize connector WebView implementation (#305)
Browse files Browse the repository at this point in the history
* [react-native] Optimize connector WebView implementation

* Add changeset

* Add tests

* Add unit tests
  • Loading branch information
zubairaziz authored Dec 17, 2024
1 parent b10a4e0 commit 803a4d0
Show file tree
Hide file tree
Showing 11 changed files with 783 additions and 622 deletions.
7 changes: 7 additions & 0 deletions .changeset/perfect-shoes-sell.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@quiltt/react-native": patch
"@quiltt/react": patch
"@quiltt/core": patch
---

Optimize connector WebView implementation
2 changes: 1 addition & 1 deletion examples/react-native-expo/app.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"icon": "./assets/images/icon.png",
"scheme": "myapp",
"userInterfaceStyle": "automatic",
"newArchEnabled": false,
"newArchEnabled": true,
"ios": {
"bundleIdentifier": "com.example",
"supportsTablet": true
Expand Down
16 changes: 8 additions & 8 deletions examples/react-native-expo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,33 +17,33 @@
"typecheck": "tsc --project tsconfig.json --noEmit"
},
"dependencies": {
"@config-plugins/detox": "^8.0.0",
"@config-plugins/detox": "^9.0.0",
"@expo/vector-icons": "^14.0.2",
"@quiltt/react-native": "workspace:*",
"@react-navigation/bottom-tabs": "^7.0.0",
"@react-navigation/elements": "^2.0.2",
"@react-navigation/native": "^7.0.0",
"expo": "52.0.7",
"expo": "52.0.19",
"expo-blur": "~14.0.1",
"expo-constants": "~17.0.3",
"expo-font": "~13.0.1",
"expo-haptics": "~14.0.0",
"expo-linking": "~7.0.2",
"expo-router": "~4.0.6",
"expo-splash-screen": "~0.29.11",
"expo-linking": "~7.0.3",
"expo-router": "~4.0.13",
"expo-splash-screen": "~0.29.18",
"expo-status-bar": "~2.0.0",
"expo-symbols": "~0.2.0",
"expo-system-ui": "~4.0.3",
"expo-system-ui": "~4.0.6",
"expo-web-browser": "~14.0.1",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.2",
"react-native": "0.76.5",
"react-native-gesture-handler": "~2.20.2",
"react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.1.0",
"react-native-web": "~0.19.13",
"react-native-webview": "13.12.2"
"react-native-webview": "13.12.5"
},
"devDependencies": {
"@babel/core": "^7.25.2",
Expand Down
2 changes: 1 addition & 1 deletion examples/react-nextjs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
},
"devDependencies": {
"@biomejs/biome": "1.9.4",
"@types/node": "22.9.0",
"@types/node": "22.10.2",
"@types/react": "18.3.12",
"@types/react-dom": "18.3.1",
"autoprefixer": "10.4.20",
Expand Down
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,20 @@
"devDependencies": {
"@biomejs/biome": "1.9.4",
"@changesets/changelog-github": "0.5.0",
"@changesets/cli": "2.27.9",
"@changesets/cli": "2.27.10",
"@testing-library/react": "16.0.1",
"@testing-library/react-native": "12.8.1",
"@types/node": "22.9.0",
"@types/node": "22.10.2",
"@vitejs/plugin-react": "4.3.3",
"@vitest/coverage-v8": "2.0.5",
"check-dependency-version-consistency": "4.1.0",
"check-dependency-version-consistency": "5.0.0",
"genversion": "3.2.0",
"happy-dom": "15.10.2",
"turbo": "2.3.0",
"turbo": "2.3.3",
"vite": "5.4.6",
"vite-tsconfig-paths": "5.0.1",
"vitest": "2.0.5",
"vitest-react-native": "0.1.5"
},
"packageManager": "pnpm@9.13.2"
"packageManager": "pnpm@9.15.0"
}
18 changes: 4 additions & 14 deletions packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,15 @@
"name": "@quiltt/core",
"version": "3.8.2",
"description": "Javascript API client and utilities for Quiltt",
"keywords": [
"quiltt",
"typescript"
],
"keywords": ["quiltt", "typescript"],
"homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/core#readme",
"repository": {
"type": "git",
"url": "https://github.com/quiltt/quiltt-js.git",
"directory": "packages/core"
},
"license": "MIT",
"sideEffects": [
"./src/Storage/Local.ts",
"./src/api/graphql/links/SubscriptionLink.ts"
],
"sideEffects": ["./src/Storage/Local.ts", "./src/api/graphql/links/SubscriptionLink.ts"],
"type": "module",
"exports": {
".": {
Expand All @@ -25,11 +19,7 @@
}
},
"types": "./dist/index.d.ts",
"files": [
"dist/**",
"src/**",
"CHANGELOG.md"
],
"files": ["dist/**", "src/**", "CHANGELOG.md"],
"scripts": {
"build": "bunchee",
"clean": "rimraf .turbo dist",
Expand All @@ -47,7 +37,7 @@
},
"devDependencies": {
"@biomejs/biome": "1.9.4",
"@types/node": "22.9.0",
"@types/node": "22.10.2",
"@types/rails__actioncable": "6.1.11",
"@types/react": "18.3.12",
"bunchee": "5.6.1",
Expand Down
16 changes: 7 additions & 9 deletions packages/react-native/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,7 @@
},
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"files": [
"dist/**",
"src/**",
"CHANGELOG.md"
],
"files": ["dist/**", "src/**", "CHANGELOG.md"],
"scripts": {
"addApiKey": "node scripts/addApiKey.js",
"addVersion": "genversion --esm -f src/version.ts",
Expand All @@ -35,19 +31,21 @@
"dependencies": {
"@honeybadger-io/core": "6.6.0",
"@quiltt/core": "workspace:*",
"@quiltt/react": "workspace:*"
"@quiltt/react": "workspace:*",
"lodash.debounce": "4.0.8"
},
"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"
},
Expand Down
101 changes: 58 additions & 43 deletions packages/react-native/src/components/QuilttConnector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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),
Expand All @@ -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 () => {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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>
)
Expand Down
Loading

0 comments on commit 803a4d0

Please sign in to comment.