[0.69] Implement HTTP incremental updates

.vscode/settings.json

@@ -10,7 +10,7 @@
     "**/lib/**/*.js": true,
     "**/dist/**/*.js": true
   },
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": false,
   "eslint.format.enable": true,
   "eslint.packageManager": "yarn",
   "eslint.enable": true,

change/react-native-windows-68257dfa-e3b3-4038-b170-6bc686cb3b08.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Allow fetching HTTP content by segments",
+  "packageName": "react-native-windows",
+  "email": "julio.rocha@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/tester/overrides.json

@@ -14,6 +14,14 @@
       "baseHash": "a1d1c6638e815f6dd53504983813fda92f3b5478",
       "issue": 6341
     },
+    {
+      "type": "platform",
+      "file": "src/js/examples/HTTP/HTTPExample.js"
+    },
+    {
+      "type": "platform",
+      "file": "src/js/examples/HTTP/HTTPExampleMultiPartFormData.js"
+    },
     {
       "type": "patch",
       "file": "src/js/examples/Pressable/PressableExample.windows.js",
@@ -48,4 +56,4 @@
       "baseHash": "d12b4947135ada2dcb1c68835f53d7f0beff8a4e"
     }
   ]
-}
+}

packages/@react-native-windows/tester/src/js/examples/HTTP/HTTPExample.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @flow
+ * @format
+ */
+'use strict';
+
+const React = require('react');
+const HTTPExampleMultiPartFormData = require('./HTTPExampleMultiPartFormData');
+const XHRExampleFetch = require('../XHR/XHRExampleFetch');
+
+exports.framework = 'React';
+exports.title = 'HTTP';
+exports.category = 'Basic';
+exports.description =
+  ('Example that demonstrates direct and indirect HTTP native module usage.': string);
+exports.examples = [
+  {
+    title: 'multipart/form-data POST',
+    render(): React.Node {
+      return <HTTPExampleMultiPartFormData />;
+    },
+  },
+  {
+    title: 'Fetch Test',
+    render(): React.Node {
+      return <XHRExampleFetch />;
+    },
+  },
+];

packages/@react-native-windows/tester/src/js/examples/HTTP/HTTPExampleMultiPartFormData.js

@@ -0,0 +1,164 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @flow
+ * @format
+ */
+'use strict';
+
+const React = require('react');
+
+const {StyleSheet, Text, TextInput, View} = require('react-native');
+
+/**
+ * See https://www.w3schools.com/php/php_form_validation.asp
+ */
+class HTTPExampleMultiPartFormData extends React.Component<any, any> {
+  responseURL: ?string;
+  responseHeaders: ?Object;
+
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      responseText: null,
+    };
+    this.responseURL = null;
+    this.responseHeaders = null;
+  }
+
+  submit(uri: string) {
+    const formData = new FormData();
+
+    formData.append('name', {
+      string: 'Name',
+      type: 'application/text',
+    });
+    formData.append('email', {
+      string: 'me@mail.com',
+      type: 'application/text',
+    });
+    formData.append('website', {
+      string: 'http://aweb.com',
+      type: 'application/text',
+    });
+    formData.append('comment', {
+      string: 'Hello',
+      type: 'application/text',
+    });
+    formData.append('gender', {
+      string: 'Other',
+      type: 'application/text',
+    });
+
+    fetch(uri, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      body: formData,
+    })
+      .then(response => {
+        this.responseURL = response.url;
+        this.responseHeaders = response.headers;
+
+        return response.text();
+      })
+      .then(body => {
+        this.setState({responseText: body});
+      });
+  }
+
+  _renderHeaders(): null | Array<React.Node> {
+    if (!this.responseHeaders) {
+      return null;
+    }
+
+    const responseHeaders = [];
+    const keys = Object.keys(this.responseHeaders.map);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      // $FlowFixMe[incompatible-use]
+      const value = this.responseHeaders.get(key);
+      responseHeaders.push(
+        <Text>
+          {key}: {value}
+        </Text>,
+      );
+    }
+    return responseHeaders;
+  }
+
+  render(): React.Node {
+    const responseURL = this.responseURL ? (
+      <View style={{marginTop: 10}}>
+        <Text style={styles.label}>Server response URL:</Text>
+        <Text>{this.responseURL}</Text>
+      </View>
+    ) : null;
+
+    const responseHeaders = this.responseHeaders ? (
+      <View style={{marginTop: 10}}>
+        <Text style={styles.label}>Server response headers:</Text>
+        {this._renderHeaders()}
+      </View>
+    ) : null;
+
+    const response = this.state.responseText ? (
+      <View style={{marginTop: 10}}>
+        <Text style={styles.label}>Server response:</Text>
+        <TextInput
+          editable={false}
+          multiline={true}
+          defaultValue={this.state.responseText}
+          style={styles.textOutput}
+        />
+      </View>
+    ) : null;
+
+    return (
+      <View>
+        <Text style={styles.label}>Edit URL to submit:</Text>
+        <TextInput
+          returnKeyType="go"
+          defaultValue="https://tryphp.w3schools.com/demo/demo_form_validation_complete.php"
+          onSubmitEditing={event => {
+            this.submit(event.nativeEvent.text);
+          }}
+          style={styles.textInput}
+        />
+        {responseURL}
+        {responseHeaders}
+        {response}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  textInput: {
+    flex: 1,
+    borderRadius: 3,
+    borderColor: 'grey',
+    borderWidth: 1,
+    height: 30,
+    paddingLeft: 8,
+  },
+  label: {
+    flex: 1,
+    color: '#aaa',
+    fontWeight: '500',
+    height: 20,
+  },
+  textOutput: {
+    flex: 1,
+    fontSize: 17,
+    borderRadius: 3,
+    borderColor: 'grey',
+    borderWidth: 1,
+    height: 200,
+    paddingLeft: 8,
+  },
+});
+
+module.exports = HTTPExampleMultiPartFormData;

packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js

@@ -12,6 +12,14 @@ import type {RNTesterModuleInfo} from '../types/RNTesterTypes';
 import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNativeFeatureFlags';
 
 const Components: Array<RNTesterModuleInfo> = [
+  {
+    key: 'HTTPExample',
+    module: require('../examples/HTTP/HTTPExample'),
+  },
+  {
+    key: 'XHRExample',
+    module: require('../examples/XHR/XHRExample'),
+  },
   {
     key: 'ActivityIndicatorExample',
     category: 'UI',

vnext/Desktop.DLL/react-native-win32.x64.def

@@ -56,7 +56,6 @@ EXPORTS
 ?makeChakraRuntime@JSI@Microsoft@@YA?AV?$unique_ptr@VRuntime@jsi@facebook@@U?$default_delete@VRuntime@jsi@facebook@@@std@@@std@@$$QEAUChakraRuntimeArgs@12@@Z
 ?Make@IHttpResource@Networking@React@Microsoft@@SA?AV?$shared_ptr@UIHttpResource@Networking@React@Microsoft@@@std@@XZ
 ?CreateTimingModule@react@facebook@@YA?AV?$unique_ptr@VCxxModule@module@xplat@facebook@@U?$default_delete@VCxxModule@module@xplat@facebook@@@std@@@std@@AEBV?$shared_ptr@VMessageQueueThread@react@facebook@@@4@@Z
-??0NetworkingModule@React@Microsoft@@QEAA@XZ
 ?MakeJSQueueThread@ReactNative@Microsoft@@YA?AV?$shared_ptr@VMessageQueueThread@react@facebook@@@std@@XZ
 ?Hash128@SpookyHashV2@hash@folly@@SAXPEBX_KPEA_K2@Z
 ??1Instance@react@facebook@@QEAA@XZ

vnext/Desktop.DLL/react-native-win32.x86.def

@@ -52,7 +52,6 @@ EXPORTS
 ?makeChakraRuntime@JSI@Microsoft@@YG?AV?$unique_ptr@VRuntime@jsi@facebook@@U?$default_delete@VRuntime@jsi@facebook@@@std@@@std@@$$QAUChakraRuntimeArgs@12@@Z
 ?CreateTimingModule@react@facebook@@YG?AV?$unique_ptr@VCxxModule@module@xplat@facebook@@U?$default_delete@VCxxModule@module@xplat@facebook@@@std@@@std@@ABV?$shared_ptr@VMessageQueueThread@react@facebook@@@4@@Z
 ?Make@IHttpResource@Networking@React@Microsoft@@SG?AV?$shared_ptr@UIHttpResource@Networking@React@Microsoft@@@std@@XZ
-??0NetworkingModule@React@Microsoft@@QAE@XZ
 ?MakeJSQueueThread@ReactNative@Microsoft@@YG?AV?$shared_ptr@VMessageQueueThread@react@facebook@@@std@@XZ
 ?Hash128@SpookyHashV2@hash@folly@@SGXPBXIPA_K1@Z
 ?assertionFailure@detail@folly@@YGXPBD00I0H@Z

vnext/Desktop.IntegrationTests/RNTesterIntegrationTests.cpp

@@ -27,7 +27,6 @@ TEST_MODULE_INITIALIZE(InitModule) {
 
   SetRuntimeOptionBool("WebSocket.AcceptSelfSigned", true);
   SetRuntimeOptionBool("UseBeastWebSocket", false);
-  SetRuntimeOptionBool("Http.UseMonolithicModule", false);
   SetRuntimeOptionBool("Blob.EnableModule", true);
 
   // WebSocketJSExecutor can't register native log hooks.

vnext/Microsoft.ReactNative/Base/CoreNativeModules.cpp

@@ -19,12 +19,8 @@
 
 namespace Microsoft::ReactNative {
 
-using winrt::Microsoft::ReactNative::ReactPropertyBag;
-
 namespace {
 
-using winrt::Microsoft::ReactNative::ReactPropertyId;
-
 bool HasPackageIdentity() noexcept {
   static const bool hasPackageIdentity = []() noexcept {
     auto packageStatics = winrt::get_activation_factory<winrt::Windows::ApplicationModel::IPackageStatics>(
@@ -39,13 +35,6 @@ bool HasPackageIdentity() noexcept {
   return hasPackageIdentity;
 }
 
-ReactPropertyId<bool> HttpUseMonolithicModuleProperty() noexcept {
-  static ReactPropertyId<bool> propId{
-      L"ReactNative.Http"
-      L"UseMonolithicModule"};
-  return propId;
-}
-
 } // namespace
 
 std::vector<facebook::react::NativeModuleDescription> GetCoreModules(
@@ -61,17 +50,15 @@ std::vector<facebook::react::NativeModuleDescription> GetCoreModules(
       [props = context->Properties()]() { return Microsoft::React::CreateHttpModule(props); },
       jsMessageQueue);
 
-  if (!ReactPropertyBag(context->Properties()).Get(HttpUseMonolithicModuleProperty())) {
-    modules.emplace_back(
-        Microsoft::React::GetBlobModuleName(),
-        [props = context->Properties()]() { return Microsoft::React::CreateBlobModule(props); },
-        batchingUIMessageQueue);
-
-    modules.emplace_back(
-        Microsoft::React::GetFileReaderModuleName(),
-        [props = context->Properties()]() { return Microsoft::React::CreateFileReaderModule(props); },
-        batchingUIMessageQueue);
-  }
+  modules.emplace_back(
+      Microsoft::React::GetBlobModuleName(),
+      [props = context->Properties()]() { return Microsoft::React::CreateBlobModule(props); },
+      batchingUIMessageQueue);
+
+  modules.emplace_back(
+      Microsoft::React::GetFileReaderModuleName(),
+      [props = context->Properties()]() { return Microsoft::React::CreateFileReaderModule(props); },
+      batchingUIMessageQueue);
 
   modules.emplace_back(
       "Timing",

vnext/Shared/Modules/FileReaderModule.cpp

@@ -4,6 +4,7 @@
 #include "FileReaderModule.h"
 
 #include <ReactPropertyBag.h>
+#include <sstream>
 
 // Boost Library
 #include <boost/archive/iterators/base64_from_binary.hpp>