Can we have better WebView composition?

[Ldoppea]

By reading this PR I'm wondering how we can handle all features we add to our WebViews (here CozyWebView, but also ReloadInterceptorWebView) in a more composable way.

Today we use to handle this in 2 different ways:

• We add more complexity to an existing WebView
• We create a new feature-specific WebView and add it somewhere into our CozyWebView component tree

Today we have:

<HomeView>
  <CozyProxyWebView>
    <CozyWebView>
      <ReloadInterceptorWebView>
        <SupervisedWebView>
          <WebView>
        </SupervisedWebView>
      </ReloadInterceptorWebView>
    </CozyWebView>
  </CozyProxyWebView>
</HomeView>

In the PR mentioned above, we chose to add complexity to the existing CozyWebView.

But if we chose the second option (feature-specific WebView), then we would have to inject it somewhere in the component tree. For example:

<HomeView>
  <CozyProxyWebView>
    <CozyWebView>
+     <BiometryWebView>
        <ReloadInterceptorWebView>
          <SupervisedWebView>
            <WebView>
          </SupervisedWebView>
        </ReloadInterceptorWebView>
+     </BiometryWebView>
    </CozyWebView>
  </CozyProxyWebView>
</HomeView>

I'm wondering if we can create a composable WebView to ease this process. Something that can be used like:

<>
  <CozyWebView
    compose={[
      CryptoProxyWebView,
      NavigatorShareProxyWebView,
      CozyProxyWebView,
      BiometryWebView,
      ReloadInterceptorWebView,
      DownloadInterceptorWebView,
      SupervisedWebView,
      WebView,
    ]},
    someProps={someProps}
  />
</>

The idea would be to have a Container WebView able to take all component from the compose prop and to recreate a component tree from them.
The array order may be important. In the example CryptoProxyWebView would be parent of NavigatorShareProxyWebView etc.
Each component would take the props from its parent, manipulate them as needed then pass them to the next component (rendered as child)

The challenge would be:

• To handle the webview's forwardRef through all the generated tree
• To handle most common events like onShouldStartLoadWithRequest or onMessage so they can bubble through the generated tree
• Maybe to generate a valid injectedJavaScriptBeforeContentLoaded that is the result of all given scripts from parent components

The pros would be:

• To ease the process of adding a new behavior to our WebViews
• To ease the code readability -> We only have to read 1 array to know what are the behaviour injected (today we have to traverse all the component files to check this)

Do you think this would be useful? Feasible?

[acezard]

To be honest I think we have too many Webviews as it is, it's very confusing. I'm all for composition but I don't think it solves the problem here. Which for me would be "where do I implement this new webview behavior?".
I'm not sure right now how to simplify though. But I'd like something that reduces the amount of Webview,

[acezard]

@Ldoppea do you think this issue is still relevant? (I'm available to talk about it)