Temp: Proposal for ComposedWebView

src/components/webviews/ComposedWebView.js

@@ -0,0 +1,78 @@
+import Minilog from '@cozy/minilog'
+import React, { useEffect, useRef } from 'react'
+
+import { CozyProxyWebView } from '/components/webviews/CozyProxyWebView'
+import { CozyWebView } from '/components/webviews/CozyWebView'
+import ReloadInterceptorWebView from '/components/webviews/ReloadInterceptorWebView'
+import { SupervisedWebView } from '/components/webviews/SupervisedWebView'
+
+const log = Minilog('🌍 ComposedWebView')
+
+const ComposedWebViewItem = React.forwardRef(
+  ({ ItemType, childrenTypes, currentLevel, ...otherProps }, ref) => {
+    const [firstChild, ...otherChildren] = childrenTypes
+
+    console.log('1️⃣ currentLevel', currentLevel)
+    const ChildWebview = React.forwardRef((subOtherProps, subRef) => {
+
+      useEffect(() => {
+        log.debug('ComposedWebView mount')
+
+        return () => {
+          log.debug('ComposedWebView unmount')
+        }
+      }, [])
+
+      return (
+        <ComposedWebViewItem
+          ItemType={firstChild}
+          childrenTypes={otherChildren}
+          currentLevel={currentLevel + 1}
+          ref={subRef}
+          {...subOtherProps}
+        />
+      )
+    })
+    ChildWebview.displayName = 'ChildWebviewRef'
+
+    return (
+      <>
+        {childrenTypes?.length > 0 ? (
+          <ItemType ChildWebview={ChildWebview} ref={ref} {...otherProps} />
+        ) : (
+          <ItemType ref={ref} {...otherProps} />
+        )}
+      </>
+    )
+  }
+)
+ComposedWebViewItem.displayName = 'ComposedWebViewItem'
+
+export const ComposedWebView = ({ childrenTypes, ...otherProps }) => {
+  const [ChildWebview, ...otherChildren] = childrenTypes
+  const ref = useRef(null)
+
+  return (
+    <ComposedWebViewItem
+      ItemType={ChildWebview}
+      childrenTypes={otherChildren}
+      currentLevel={0}
+      ref={ref}
+      {...otherProps}
+    />
+  )
+}
+
+export const CozyAppWebView = props => {
+  return (
+    <ComposedWebView
+      {...props}
+      childrenTypes={[
+        CozyProxyWebView,
+        CozyWebView,
+        // ReloadInterceptorWebView,
+        SupervisedWebView
+      ]}
+    />
+  )
+}

src/components/webviews/CozyProxyWebView.js

@@ -1,15 +1,18 @@
+import Minilog from '@cozy/minilog'
 import React, { useState, useEffect } from 'react'
 import { Platform, View } from 'react-native'
+import { WebView } from 'react-native-webview'
 
 import { useClient } from 'cozy-client'
 
 import { styles } from './CozyProxyWebView.styles'
-import { CozyWebView } from './CozyWebView'
 
 import { updateCozyAppBundleInBackground } from '/libs/cozyAppBundle/cozyAppBundle'
 import { useHttpServerContext } from '/libs/httpserver/httpServerProvider'
 import { IndexInjectionWebviewComponent } from '/components/webviews/webViewComponents/IndexInjectionWebviewComponent'
 
+const log = Minilog('CozyProxyWebView')
+
 const NO_INJECTED_HTML = 'NO_INJECTED_HTML'
 
 const getHttpUnsecureUrl = uri => {
@@ -64,7 +67,8 @@ const getPlaformSpecificConfig = (uri, html) => {
   }
 }
 
-export const CozyProxyWebView = ({ slug, href, style, ...props }) => {
+export const CozyProxyWebView = React.forwardRef(
+  ({ slug, href, style, ChildWebview = WebView, ...props }, ref) => {
   const client = useClient()
   const httpServerContext = useHttpServerContext()
   const [state, dispatch] = useState({
@@ -73,6 +77,14 @@ export const CozyProxyWebView = ({ slug, href, style, ...props }) => {
     nativeConfig: undefined
   })
 
+    useEffect(() => {
+      log.debug('CozyProxyWebView mount')
+
+      return () => {
+        log.debug('CozyProxyWebView unmount')
+      }
+    }, [])
+
   useEffect(() => {
     if (httpServerContext.isRunning()) {
       const initHtmlContent = async () => {
@@ -111,13 +123,16 @@ export const CozyProxyWebView = ({ slug, href, style, ...props }) => {
   return (
     <View style={{ ...styles.view, ...style }}>
       {state.source ? (
-        <CozyWebView
+          <ChildWebview
           source={state.source}
           nativeConfig={state.nativeConfig}
           injectedIndex={state.html}
+            ref={ref}
           {...props}
         />
       ) : null}
     </View>
   )
 }
+)
+CozyProxyWebView.displayName = 'CozyProxyWebView'

src/components/webviews/CozyWebView.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useState, useEffect } from 'react'
 import { BackHandler } from 'react-native'
+import { WebView } from 'react-native-webview'
 import { useIsFocused } from '@react-navigation/native'
 import Minilog from '@cozy/minilog'
 
@@ -21,7 +22,6 @@ import {
 import { postMessageFunctionDeclaration } from '/components/webviews/CryptoWebView/jsInteractions/jsFunctions/jsMessaging'
 import { jsSubscribers } from '/components/webviews/jsInteractions/jsSubscribers'
 import { useSession } from '/hooks/useSession'
-import ReloadInterceptorWebView from '/components/webviews/ReloadInterceptorWebView'
 import { getHostname } from '/libs/functions/getHostname'
 import { useIsSecureProtocol } from '/hooks/useIsSecureProtocol'
 import {
@@ -33,24 +33,38 @@ const log = Minilog('CozyWebView')
 
 Minilog.enable()
 
-export const CozyWebView = ({
+export const CozyWebView = React.forwardRef(
+  (
+    {
   onMessage: parentOnMessage,
   logId = '',
   source,
   trackWebviewInnerUri,
   route,
   injectedJavaScriptBeforeContentLoaded,
   setParentRef,
+      ChildWebview = WebView,
   ...rest
-}) => {
+    },
+    webviewRef
+  ) => {
   const isSecureProtocol = useIsSecureProtocol()
-  const [webviewRef, setWebviewRef] = useState()
+    // const [webviewRef, setWebviewRef] = useState()
   const [uri, setUri] = useState()
   const [innerUri, setInnerUri] = useState()
   const nativeIntent = useNativeIntent()
   const { shouldInterceptAuth, handleInterceptAuth, consumeSessionToken } =
     useSession()
   const isFocused = useIsFocused()
+
+    useEffect(() => {
+      log.debug('CozyWebView mount')
+
+      return () => {
+        log.debug('CozyWebView unmount')
+      }
+    }, [])
+
   /**
    * First render: no uri
    * Second render: use uri from props
@@ -68,7 +82,7 @@ export const CozyWebView = ({
       return false
     }
 
-    webviewRef.goBack()
+      webviewRef.current.goBack()
     return true
   }, [canGoBack, isFocused, webviewRef])
 
@@ -82,7 +96,7 @@ export const CozyWebView = ({
   useEffect(() => {
     innerUri &&
       webviewRef &&
-      nativeIntent?.registerWebview(innerUri, webviewRef)
+        nativeIntent?.registerWebview(innerUri, webviewRef.current)
 
     return () =>
       innerUri && webviewRef && nativeIntent?.unregisterWebview(innerUri)
@@ -96,7 +110,7 @@ export const CozyWebView = ({
         param: response
       })
 
-      webviewRef.postMessage(payload)
+        webviewRef.current.postMessage(payload)
     },
     [webviewRef]
   )
@@ -125,18 +139,18 @@ export const CozyWebView = ({
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const injectSettings = async () =>
-    webviewRef.injectJavaScript(await makeFlagshipMetadataInjection())
+      webviewRef.current.injectJavaScript(await makeFlagshipMetadataInjection())
 
   useEffect(() => {
-    webviewRef && injectSettings()
+      webviewRef.current && injectSettings()
 
     BiometryEmitter.on('change', injectSettings)
 
     return () => BiometryEmitter.off('change', injectSettings)
   }, [injectSettings, webviewRef])
 
   return uri ? (
-    <ReloadInterceptorWebView
+      <ChildWebview
       {...rest}
       onNavigationStateChange={event => {
         const isValidUri = getHostname(event)
@@ -148,11 +162,13 @@ export const CozyWebView = ({
       originWhitelist={['http://*', 'https://*', 'intent://*']}
       useWebKit={true}
       javaScriptEnabled={true}
-      ref={ref => {
-        setWebviewRef(ref)
-        setParentRef?.(ref)
-      }}
-      TEST_ONLY_setRef={setWebviewRef}
+        ref={webviewRef}
+        // ref={wref => {
+        //   setWebviewRef(wref)
+        //   setParentRef?.(wref)
+        //   // ref.current = wref
+        // }}
+        // TEST_ONLY_setRef={setWebviewRef}
       decelerationRate="normal" // https://github.com/react-native-webview/react-native-webview/issues/1070
       onShouldStartLoadWithRequest={initialRequest => {
         if (shouldInterceptAuth(initialRequest.url)) {
@@ -190,5 +206,7 @@ export const CozyWebView = ({
     />
   ) : null
 }
+)
+CozyWebView.displayName = 'CozyWebView'
 
 export default CozyWebView

src/components/webviews/ReloadInterceptorWebView.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
+import { WebView } from 'react-native-webview'
 
 import { useClient } from 'cozy-client'
 
-import { SupervisedWebView } from '/components/webviews/SupervisedWebView'
 import { userAgentDefault } from '/constants/userAgent'
 import { ProgressContainer } from '/components/ProgressContainer'
 import {
@@ -23,14 +23,15 @@ const ReloadInterceptorWebView = React.forwardRef((props, ref) => {
     source,
     onShouldStartLoadWithRequest,
     userAgent = userAgentDefault,
-    navigation
+    navigation,
+    ChildWebview = WebView
   } = props
 
   if (!source.html) {
     // Blocking this feature, when source={{ uri }} is set
     return (
       <ProgressContainer progress={progress}>
-        <SupervisedWebView
+        <ChildWebview
           {...props}
           ref={ref}
           {...userAgent}
@@ -63,7 +64,7 @@ const ReloadInterceptorWebView = React.forwardRef((props, ref) => {
 
   return (
     <ProgressContainer progress={progress}>
-      <SupervisedWebView
+      <ChildWebview
         {...props}
         {...userAgent}
         ref={ref}

src/components/webviews/SupervisedWebView.js

@@ -76,7 +76,12 @@ export const SupervisedWebView = React.forwardRef((props, ref) => {
     key: 0
   })
 
-  const { onLoad, supervisionShowProgress = true, ...otherProps } = props
+  const {
+    onLoad,
+    supervisionShowProgress = true,
+    ChildWebview = WebView,
+    ...otherProps
+  } = props
   const { isReloading, isLoaded, shouldBeLoaded, key, reloadDelay } = state
 
   useEffect(
@@ -131,7 +136,7 @@ export const SupervisedWebView = React.forwardRef((props, ref) => {
 
   return (
     <>
-      <WebView
+      <ChildWebview
         {...otherProps}
         ref={ref}
         key={key}

src/screens/cozy-app/CozyAppScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { StatusBar, View } from 'react-native'
 
-import { CozyProxyWebView } from '/components/webviews/CozyProxyWebView'
+import { CozyAppWebView } from '/components/webviews/ComposedWebView'
 import { flagshipUI, NormalisedFlagshipUI } from '/libs/intents/setFlagshipUI'
 import { useDimensions } from '/libs/dimensions'
 import { useHomeStateContext } from '/screens/home/HomeStateProvider'
@@ -92,7 +92,7 @@ export const CozyAppScreen = ({
           )
         }
 
-        <CozyProxyWebView
+        <CozyAppWebView
           style={webViewStyle}
           slug={route.params.slug}
           href={route.params.href}

src/screens/home/components/HomeView.js

@@ -11,7 +11,7 @@ import { useNativeIntent } from 'cozy-intent'
 
 import { AppState } from 'react-native'
 
-import { CozyProxyWebView } from '/components/webviews/CozyProxyWebView'
+import { CozyAppWebView } from '/components/webviews/ComposedWebView'
 import {
   consumeRouteParameter,
   useInitialParam
@@ -244,7 +244,7 @@ const HomeView = ({ route, navigation, setLauncherContext, setBarStyle }) => {
   }
 
   return uri && shouldWaitCozyApp !== undefined && !shouldWaitCozyApp ? (
-    <CozyProxyWebView
+    <CozyAppWebView
       setParentRef={setParentRef}
       slug="home"
       href={uri}