Add basic support for React Server Components

EvanBacon · necolas · commit 1d4568ded6b4 · 2024-10-16T15:33:20.000-07:00
Close #2678 Fix #2672 Co-authored-by: evanbacon <bacon@expo.io>
diff --git a/packages/react-native-web/src/exports/AccessibilityInfo/index.js b/packages/react-native-web/src/exports/AccessibilityInfo/index.js
@@ -6,6 +6,9 @@
  *
  * @flow
  */
+
+'use client';
+
 import canUseDOM from '../../modules/canUseDom';
 
 function isScreenReaderEnabled(): Promise<*> {
diff --git a/packages/react-native-web/src/exports/ActivityIndicator/index.js b/packages/react-native-web/src/exports/ActivityIndicator/index.js
@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { ViewProps } from '../View';
 
 import * as React from 'react';
diff --git a/packages/react-native-web/src/exports/Animated/index.js b/packages/react-native-web/src/exports/Animated/index.js
@@ -7,5 +7,7 @@
  * @flow
  */
 
+'use client';
+
 import Animated from '../../vendor/react-native/Animated/Animated';
 export default Animated;
diff --git a/packages/react-native-web/src/exports/AppRegistry/index.js b/packages/react-native-web/src/exports/AppRegistry/index.js
@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { Application } from './renderApplication';
 import type { ComponentType, Node } from 'react';
 
diff --git a/packages/react-native-web/src/exports/AppState/index.js b/packages/react-native-web/src/exports/AppState/index.js
@@ -8,6 +8,8 @@
  * @noflow
  */
 
+'use client';
+
 import invariant from 'fbjs/lib/invariant';
 import EventEmitter from '../../vendor/react-native/vendor/emitter/EventEmitter';
 import canUseDOM from '../../modules/canUseDom';
diff --git a/packages/react-native-web/src/exports/Appearance/index.js b/packages/react-native-web/src/exports/Appearance/index.js
@@ -7,6 +7,9 @@
  *
  * @flow
  */
+
+'use client';
+
 import canUseDOM from '../../modules/canUseDom';
 
 export type ColorSchemeName = 'light' | 'dark';
diff --git a/packages/react-native-web/src/exports/CheckBox/index.js b/packages/react-native-web/src/exports/CheckBox/index.js
@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { ColorValue } from '../../types';
 import type { ViewProps } from '../View';
 
diff --git a/packages/react-native-web/src/exports/Clipboard/index.js b/packages/react-native-web/src/exports/Clipboard/index.js
@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 let clipboardAvailable;
 
 export default class Clipboard {
diff --git a/packages/react-native-web/src/exports/Dimensions/index.js b/packages/react-native-web/src/exports/Dimensions/index.js
@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { EventSubscription } from '../../vendor/react-native/vendor/emitter/EventEmitter';
 import invariant from 'fbjs/lib/invariant';
 import canUseDOM from '../../modules/canUseDom';
diff --git a/packages/react-native-web/src/exports/FlatList/index.js b/packages/react-native-web/src/exports/FlatList/index.js
@@ -8,5 +8,7 @@
  * @flow
  */
 
+'use client';
+
 import FlatList from '../../vendor/react-native/FlatList';
 export default FlatList;
diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { ImageProps } from './types';
 
 import * as React from 'react';
diff --git a/packages/react-native-web/src/exports/KeyboardAvoidingView/index.js b/packages/react-native-web/src/exports/KeyboardAvoidingView/index.js
@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { LayoutEvent, LayoutValue } from '../../types';
 import type { ViewProps } from '../View';
 
diff --git a/packages/react-native-web/src/exports/Modal/index.js b/packages/react-native-web/src/exports/Modal/index.js
@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { ViewProps } from '../View';
 
 import * as React from 'react';
diff --git a/packages/react-native-web/src/exports/Picker/index.js b/packages/react-native-web/src/exports/Picker/index.js
@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { PlatformMethods } from '../../types';
 import type { ViewProps } from '../View';
 
diff --git a/packages/react-native-web/src/exports/Pressable/index.js b/packages/react-native-web/src/exports/Pressable/index.js
@@ -7,7 +7,7 @@
  * @flow strict-local
  */
 
-'use strict';
+'use client';
 
 import type { HoverEventsConfig } from '../../modules/useHover';
 import type { PressResponderConfig } from '../../modules/usePressEvents/PressResponder';
diff --git a/packages/react-native-web/src/exports/ProgressBar/index.js b/packages/react-native-web/src/exports/ProgressBar/index.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+'use client';
+
 import type { ColorValue } from '../../types';
 import type { ViewProps } from '../View';
 
diff --git a/packages/react-native-web/src/exports/ScrollView/index.js b/packages/react-native-web/src/exports/ScrollView/index.js
@@ -8,6 +8,8 @@
  * @noflow
  */
 
+'use client';
+
 import type { ViewProps, ViewStyle } from '../View/types';
 
 import Dimensions from '../Dimensions';
diff --git a/packages/react-native-web/src/exports/SectionList/index.js b/packages/react-native-web/src/exports/SectionList/index.js
@@ -7,5 +7,7 @@
  * @flow
  */
 
+'use client';
+
 import SectionList from '../../vendor/react-native/SectionList';
 export default SectionList;
diff --git a/packages/react-native-web/src/exports/Switch/index.js b/packages/react-native-web/src/exports/Switch/index.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+'use client';
+
 import type { ColorValue } from '../../types';
 import type { ViewProps } from '../View';
 
diff --git a/packages/react-native-web/src/exports/Text/TextAncestorContext.js b/packages/react-native-web/src/exports/Text/TextAncestorContext.js
@@ -7,6 +7,8 @@
  * @flow strict
  */
 
+'use client';
+
 import type { Context } from 'react';
 
 import { createContext } from 'react';
diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js
@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { PlatformMethods } from '../../types';
 import type { TextProps } from './types';
 
diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { PlatformMethods } from '../../types';
 import type { TextInputProps } from './types';
 
diff --git a/packages/react-native-web/src/exports/TouchableHighlight/index.js b/packages/react-native-web/src/exports/TouchableHighlight/index.js
@@ -8,7 +8,7 @@
  * @format
  */
 
-'use strict';
+'use client';
 
 import type { ColorValue } from '../../types';
 import type { Props as TouchableWithoutFeedbackProps } from '../TouchableWithoutFeedback';
diff --git a/packages/react-native-web/src/exports/TouchableOpacity/index.js b/packages/react-native-web/src/exports/TouchableOpacity/index.js
@@ -8,7 +8,7 @@
  * @format
  */
 
-'use strict';
+'use client';
 
 import type { Props as TouchableWithoutFeedbackProps } from '../TouchableWithoutFeedback';
 import type { ViewProps } from '../View';
diff --git a/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js b/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js
@@ -8,7 +8,7 @@
  * @format
  */
 
-'use strict';
+'use client';
 
 import type { PressResponderConfig } from '../../modules/usePressEvents/PressResponder';
 import type { ViewProps } from '../View';
diff --git a/packages/react-native-web/src/exports/View/index.js b/packages/react-native-web/src/exports/View/index.js
@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { PlatformMethods } from '../../types';
 import type { ViewProps } from './types';
 
diff --git a/packages/react-native-web/src/exports/VirtualizedList/index.js b/packages/react-native-web/src/exports/VirtualizedList/index.js
@@ -7,5 +7,7 @@
  * @flow
  */
 
+'use client';
+
 import VirtualizedList from '../../vendor/react-native/VirtualizedList';
 export default VirtualizedList;
diff --git a/packages/react-native-web/src/exports/createElement/index.js b/packages/react-native-web/src/exports/createElement/index.js
@@ -7,6 +7,8 @@
  * @noflow
  */
 
+'use client';
+
 import AccessibilityUtil from '../../modules/AccessibilityUtil';
 import createDOMProps from '../../modules/createDOMProps';
 import React from 'react';
diff --git a/packages/react-native-web/src/exports/render/index.js b/packages/react-native-web/src/exports/render/index.js
@@ -7,6 +7,8 @@
  * @noflow
  */
 
+'use client';
+
 import {
   hydrate as domLegacyHydrate,
   render as domLegacyRender
diff --git a/packages/react-native-web/src/exports/useColorScheme/index.js b/packages/react-native-web/src/exports/useColorScheme/index.js
@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import * as React from 'react';
 import type { ColorSchemeName } from '../Appearance';
 import Appearance from '../Appearance';
diff --git a/packages/react-native-web/src/exports/useLocaleContext/index.js b/packages/react-native-web/src/exports/useLocaleContext/index.js
@@ -7,5 +7,7 @@
  * @flow strict
  */
 
+'use client';
+
 import { useLocaleContext } from '../../modules/useLocale';
 export default useLocaleContext;
diff --git a/packages/react-native-web/src/exports/useWindowDimensions/index.js b/packages/react-native-web/src/exports/useWindowDimensions/index.js
@@ -8,7 +8,7 @@
  * @flow strict-local
  */
 
-'use strict';
+'use client';
 
 import type { DisplayMetrics } from '../Dimensions';
 
diff --git a/packages/react-native-web/src/modules/UnimplementedView/index.js b/packages/react-native-web/src/modules/UnimplementedView/index.js
@@ -6,23 +6,17 @@
  *
  * @flow
  */
-
 import type { Node } from 'React';
+import type { ViewProps } from '../../exports/View/types';
 
 import View from '../../exports/View';
 import React from 'react';
 
 /**
  * Common implementation for a simple stubbed view.
  */
-class UnimplementedView extends React.Component<*, *> {
-  render(): Node {
-    return (
-      <View style={[unimplementedViewStyles, this.props.style]}>
-        {this.props.children}
-      </View>
-    );
-  }
+function UnimplementedView({ style, ...props }: ViewProps): Node {
+  return <View {...props} style={[unimplementedViewStyles, style]} />;
 }
 
 const unimplementedViewStyles =

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,9 @@`
`6`	`6`	`*`
`7`	`7`	`* @flow`
`8`	`8`	`*/`
	`9`	`+`
	`10`	`+'use client';`
	`11`	`+`
`9`	`12`	`import canUseDOM from '../../modules/canUseDom';`
`10`	`13`
`11`	`14`	`function isScreenReaderEnabled(): Promise<*> {`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,9 @@`
`7`	`7`	`*`
`8`	`8`	`* @flow`
`9`	`9`	`*/`
	`10`	`+`
	`11`	`+'use client';`
	`12`	`+`
`10`	`13`	`import canUseDOM from '../../modules/canUseDom';`
`11`	`14`
`12`	`15`	`export type ColorSchemeName = 'light' \| 'dark';`