@office-iss/react-native-win32 0.73.1 → 0.74.0-preview.1

package/Libraries/Image/resolveAssetSource.js

@@ -5,41 +5,42 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow
+ * @flow strict-local
  */
 
-// Resolves an asset into a `source` for `Image`.
-
-'use strict';
+// Utilities for resolving an asset into a `source` for e.g. `Image`
 
 import type {ResolvedAssetSource} from './AssetSourceResolver';
+import type {ImageSource} from './ImageSource';
+
+import SourceCode from '../NativeModules/specs/NativeSourceCode';
 
 const AssetSourceResolver = require('./AssetSourceResolver');
 const {pickScale} = require('./AssetUtils');
 const AssetRegistry = require('@react-native/assets-registry/registry');
 
-let _customSourceTransformer, _serverURL, _scriptURL;
+type CustomSourceTransformer = (
+  resolver: AssetSourceResolver,
+) => ?ResolvedAssetSource;
 
+let _customSourceTransformers: Array<CustomSourceTransformer> = [];
+let _serverURL: ?string;
+let _scriptURL: ?string;
 let _sourceCodeScriptURL: ?string;
+
 function getSourceCodeScriptURL(): ?string {
-  if (_sourceCodeScriptURL) {
+  if (_sourceCodeScriptURL != null) {
     return _sourceCodeScriptURL;
   }
 
-  let sourceCode =
-    global.nativeExtensions && global.nativeExtensions.SourceCode;
-  if (!sourceCode) {
-    sourceCode = require('../NativeModules/specs/NativeSourceCode').default;
-  }
-  _sourceCodeScriptURL = sourceCode.getConstants().scriptURL;
+  _sourceCodeScriptURL = SourceCode.getConstants().scriptURL;
   return _sourceCodeScriptURL;
 }
 
 function getDevServerURL(): ?string {
   if (_serverURL === undefined) {
     const sourceCodeScriptURL = getSourceCodeScriptURL();
-    const match =
-      sourceCodeScriptURL && sourceCodeScriptURL.match(/^https?:\/\/.*?\//);
+    const match = sourceCodeScriptURL?.match(/^https?:\/\/.*?\//);
     if (match) {
       // jsBundle was loaded from network
       _serverURL = match[0];
@@ -52,19 +53,25 @@ function getDevServerURL(): ?string {
 }
 
 function _coerceLocalScriptURL(scriptURL: ?string): ?string {
-  if (scriptURL) {
-    if (scriptURL.startsWith('assets://')) {
+  let normalizedScriptURL = scriptURL;
+
+  if (normalizedScriptURL != null) {
+    if (normalizedScriptURL.startsWith('assets://')) {
       // android: running from within assets, no offline path to use
       return null;
     }
-    scriptURL = scriptURL.substring(0, scriptURL.lastIndexOf('/') + 1);
-    if (!scriptURL.includes('://')) {
+    normalizedScriptURL = normalizedScriptURL.substring(
+      0,
+      normalizedScriptURL.lastIndexOf('/') + 1,
+    );
+    if (!normalizedScriptURL.includes('://')) {
       // Add file protocol in case we have an absolute file path and not a URL.
       // This shouldn't really be necessary. scriptURL should be a URL.
-      scriptURL = 'file://' + scriptURL;
+      normalizedScriptURL = 'file://' + normalizedScriptURL;
     }
   }
-  return scriptURL;
+
+  return normalizedScriptURL;
 }
 
 function getScriptURL(): ?string {
@@ -74,18 +81,35 @@ function getScriptURL(): ?string {
   return _scriptURL;
 }
 
+/**
+ * `transformer` can optionally be used to apply a custom transformation when
+ * resolving an asset source. This methods overrides all other custom transformers
+ * that may have been previously registered.
+ */
 function setCustomSourceTransformer(
-  transformer: (resolver: AssetSourceResolver) => ResolvedAssetSource,
+  transformer: CustomSourceTransformer,
 ): void {
-  _customSourceTransformer = transformer;
+  _customSourceTransformers = [transformer];
+}
+
+/**
+ * Adds a `transformer` into the chain of custom source transformers, which will
+ * be applied in the order registered, until one returns a non-null value.
+ */
+function addCustomSourceTransformer(
+  transformer: CustomSourceTransformer,
+): void {
+  _customSourceTransformers.push(transformer);
 }
 
 /**
  * `source` is either a number (opaque type returned by require('./foo.png'))
  * or an `ImageSource` like { uri: '<http location || file path>' }
  */
-function resolveAssetSource(source: any): ?ResolvedAssetSource {
-  if (typeof source === 'object') {
+function resolveAssetSource(source: ?ImageSource): ?ResolvedAssetSource {
+  if (source == null || typeof source === 'object') {
+    // $FlowFixMe[incompatible-exact] `source` doesn't exactly match `ResolvedAssetSource`
+    // $FlowFixMe[incompatible-return] `source` doesn't exactly match `ResolvedAssetSource`
     return source;
   }
 
@@ -99,12 +123,21 @@ function resolveAssetSource(source: any): ?ResolvedAssetSource {
     getScriptURL(),
     asset,
   );
-  if (_customSourceTransformer) {
-    return _customSourceTransformer(resolver);
+
+  // Apply (chained) custom source transformers, if any
+  if (_customSourceTransformers) {
+    for (const customSourceTransformer of _customSourceTransformers) {
+      const transformedSource = customSourceTransformer(resolver);
+      if (transformedSource != null) {
+        return transformedSource;
+      }
+    }
   }
+
   return resolver.defaultAsset();
 }
 
 resolveAssetSource.pickScale = pickScale;
 resolveAssetSource.setCustomSourceTransformer = setCustomSourceTransformer;
+resolveAssetSource.addCustomSourceTransformer = addCustomSourceTransformer;
 module.exports = resolveAssetSource;

package/Libraries/Inspector/ElementProperties.js

@@ -10,12 +10,12 @@
 
 'use strict';
 
+import type {InspectorData} from '../Renderer/shims/ReactNativeTypes';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 
 const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
 const TouchableWithoutFeedback = require('../Components/Touchable/TouchableWithoutFeedback');
 const View = require('../Components/View/View');
-const openFileInEditor = require('../Core/Devtools/openFileInEditor');
 const flattenStyle = require('../StyleSheet/flattenStyle');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
@@ -25,13 +25,8 @@ const StyleInspector = require('./StyleInspector');
 const React = require('react');
 
 type Props = $ReadOnly<{|
-  hierarchy: Array<{|name: string|}>,
+  hierarchy: ?InspectorData['hierarchy'],
   style?: ?ViewStyleProp,
-  source?: ?{
-    fileName?: string,
-    lineNumber?: number,
-    ...
-  },
   frame?: ?Object,
   selection?: ?number,
   setSelection?: number => mixed,
@@ -41,50 +36,40 @@ class ElementProperties extends React.Component<Props> {
   render(): React.Node {
     const style = flattenStyle(this.props.style);
     const selection = this.props.selection;
-    let openFileButton;
-    const source = this.props.source;
-    const {fileName, lineNumber} = source || {};
-    if (fileName && lineNumber) {
-      const parts = fileName.split('/');
-      const fileNameShort = parts[parts.length - 1];
-      openFileButton = (
-        <TouchableHighlight
-          style={styles.openButton}
-          onPress={openFileInEditor.bind(null, fileName, lineNumber)}>
-          <Text style={styles.openButtonTitle} numberOfLines={1}>
-            {fileNameShort}:{lineNumber}
-          </Text>
-        </TouchableHighlight>
-      );
-    }
+
     // Without the `TouchableWithoutFeedback`, taps on this inspector pane
     // would change the inspected element to whatever is under the inspector
     return (
       <TouchableWithoutFeedback>
         <View style={styles.info}>
           <View style={styles.breadcrumb}>
-            {mapWithSeparator(
-              this.props.hierarchy,
-              (hierarchyItem, i): React.MixedElement => (
-                <TouchableHighlight
-                  key={'item-' + i}
-                  style={[styles.breadItem, i === selection && styles.selected]}
-                  // $FlowFixMe[not-a-function] found when converting React.createClass to ES6
-                  onPress={() => this.props.setSelection(i)}>
-                  <Text style={styles.breadItemText}>{hierarchyItem.name}</Text>
-                </TouchableHighlight>
-              ),
-              (i): React.MixedElement => (
-                <Text key={'sep-' + i} style={styles.breadSep}>
-                  &#9656;
-                </Text>
-              ),
-            )}
+            {this.props.hierarchy != null &&
+              mapWithSeparator(
+                this.props.hierarchy,
+                (hierarchyItem, i): React.MixedElement => (
+                  <TouchableHighlight
+                    key={'item-' + i}
+                    style={[
+                      styles.breadItem,
+                      i === selection && styles.selected,
+                    ]}
+                    // $FlowFixMe[not-a-function] found when converting React.createClass to ES6
+                    onPress={() => this.props.setSelection(i)}>
+                    <Text style={styles.breadItemText}>
+                      {hierarchyItem.name}
+                    </Text>
+                  </TouchableHighlight>
+                ),
+                (i): React.MixedElement => (
+                  <Text key={'sep-' + i} style={styles.breadSep}>
+                    &#9656;
+                  </Text>
+                ),
+              )}
           </View>
           <View style={styles.row}>
             <View style={styles.col}>
               <StyleInspector style={style} />
-              {openFileButton}
             </View>
             {<BoxInspector style={style} frame={this.props.frame} />}
           </View>
@@ -130,17 +115,6 @@ const styles = StyleSheet.create({
   info: {
     padding: 10,
   },
-  openButton: {
-    padding: 10,
-    backgroundColor: '#000',
-    marginVertical: 5,
-    marginRight: 5,
-    borderRadius: 2,
-  },
-  openButtonTitle: {
-    color: 'white',
-    fontSize: 8,
-  },
 });
 
 module.exports = ElementProperties;

package/Libraries/Inspector/Inspector.js

@@ -10,10 +10,14 @@
 
 'use strict';
 
-import type {TouchedViewDataAtPoint} from '../Renderer/shims/ReactNativeTypes';
-import type {HostRef} from './getInspectorDataForViewAtPoint';
+import type {InspectedViewRef} from '../ReactNative/AppContainer-dev';
+import type {
+  InspectorData,
+  TouchedViewDataAtPoint,
+} from '../Renderer/shims/ReactNativeTypes';
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
 
-const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const View = require('../Components/View/View');
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
 const {findNodeHandle} = require('../ReactNative/RendererProxy');
@@ -25,114 +29,68 @@ const InspectorOverlay = require('./InspectorOverlay');
 const InspectorPanel = require('./InspectorPanel');
 const React = require('react');
 
-const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-
-// Required for React DevTools to view/edit React Native styles in Flipper.
-// Flipper doesn't inject these values when initializing DevTools.
-hook.resolveRNStyle = require('../StyleSheet/flattenStyle');
-hook.nativeStyleEditorValidAttributes = Object.keys(ReactNativeStyleAttributes);
-
-class Inspector extends React.Component<
-  {
-    inspectedView: ?HostRef,
-    onRequestRerenderApp: (callback: (instance: ?HostRef) => void) => void,
-    ...
-  },
-  {
-    devtoolsAgent: ?Object,
-    hierarchy: any,
-    panelPos: string,
-    inspecting: boolean,
-    selection: ?number,
-    perfing: boolean,
-    inspected: any,
-    inspectedView: ?HostRef,
-    networking: boolean,
-    ...
-  },
-> {
-  _hideTimeoutID: TimeoutID | null = null;
-  _subs: ?Array<() => void>;
-  _setTouchedViewData: ?(TouchedViewDataAtPoint) => void;
-
-  constructor(props: Object) {
-    super(props);
-
-    this.state = {
-      devtoolsAgent: null,
-      hierarchy: null,
-      panelPos: 'bottom',
-      inspecting: true,
-      perfing: false,
-      inspected: null,
-      selection: null,
-      inspectedView: this.props.inspectedView,
-      networking: false,
-    };
-  }
-
-  componentDidMount() {
-    hook.on('react-devtools', this._attachToDevtools);
-    // if devtools is already started
-    if (hook.reactDevtoolsAgent) {
-      this._attachToDevtools(hook.reactDevtoolsAgent);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this._subs) {
-      this._subs.map(fn => fn());
+const {useState} = React;
+
+type PanelPosition = 'top' | 'bottom';
+type SelectedTab =
+  | 'elements-inspector'
+  | 'network-profiling'
+  | 'performance-profiling';
+
+export type InspectedElementFrame = TouchedViewDataAtPoint['frame'];
+export type InspectedElement = $ReadOnly<{
+  frame: InspectedElementFrame,
+  style?: ViewStyleProp,
+}>;
+export type ElementsHierarchy = InspectorData['hierarchy'];
+
+type Props = {
+  inspectedViewRef: InspectedViewRef,
+  onRequestRerenderApp: () => void,
+  reactDevToolsAgent?: ReactDevToolsAgent,
+};
+
+function Inspector({
+  inspectedViewRef,
+  onRequestRerenderApp,
+  reactDevToolsAgent,
+}: Props): React.Node {
+  const [selectedTab, setSelectedTab] =
+    useState<?SelectedTab>('elements-inspector');
+
+  const [panelPosition, setPanelPosition] = useState<PanelPosition>('bottom');
+  const [inspectedElement, setInspectedElement] =
+    useState<?InspectedElement>(null);
+  const [selectionIndex, setSelectionIndex] = useState<?number>(null);
+  const [elementsHierarchy, setElementsHierarchy] =
+    useState<?ElementsHierarchy>(null);
+
+  const setSelection = (i: number) => {
+    const hierarchyItem = elementsHierarchy?.[i];
+    if (hierarchyItem == null) {
+      return;
     }
-    hook.off('react-devtools', this._attachToDevtools);
-    this._setTouchedViewData = null;
-  }
-
-  UNSAFE_componentWillReceiveProps(newProps: Object) {
-    this.setState({inspectedView: newProps.inspectedView});
-  }
-
-  _attachToDevtools = (agent: Object) => {
-    agent.addListener('shutdown', this._onAgentShutdown);
-
-    this.setState({
-      devtoolsAgent: agent,
-    });
-  };
-
-  _onAgentShutdown = () => {
-    const agent = this.state.devtoolsAgent;
-    if (agent != null) {
-      agent.removeListener('shutdown', this._onAgentShutdown);
-
-      this.setState({devtoolsAgent: null});
-    }
-  };
 
-  setSelection(i: number) {
-    const hierarchyItem = this.state.hierarchy[i];
-    // we pass in findNodeHandle as the method is injected
-    const {measure, props, source} =
-      hierarchyItem.getInspectorData(findNodeHandle);
+    // We pass in findNodeHandle as the method is injected
+    const {measure, props} = hierarchyItem.getInspectorData(findNodeHandle);
 
     measure((x, y, width, height, left, top) => {
-      this.setState({
-        inspected: {
-          frame: {left, top, width, height},
-          style: props.style,
-          source,
-        },
-        selection: i,
+      // $FlowFixMe[incompatible-call] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
+      setInspectedElement({
+        frame: {left, top, width, height},
+        style: props.style,
       });
+
+      setSelectionIndex(i);
     });
-  }
+  };
 
-  onTouchPoint(locationX: number, locationY: number) {
-    this._setTouchedViewData = viewData => {
+  const onTouchPoint = (locationX: number, locationY: number) => {
+    const setTouchedViewData = (viewData: TouchedViewDataAtPoint) => {
       const {
         hierarchy,
         props,
         selectedIndex,
-        source,
         frame,
         pointerY,
         touchedViewTag,
@@ -142,111 +100,89 @@ class Inspector extends React.Component<
       // Sync the touched view with React DevTools.
       // Note: This is Paper only. To support Fabric,
       // DevTools needs to be updated to not rely on view tags.
-      const agent = this.state.devtoolsAgent;
-      if (agent) {
-        agent.selectNode(findNodeHandle(touchedViewTag));
+      if (reactDevToolsAgent) {
+        reactDevToolsAgent.selectNode(findNodeHandle(touchedViewTag));
         if (closestInstance != null) {
-          agent.selectNode(closestInstance);
+          reactDevToolsAgent.selectNode(closestInstance);
         }
       }
 
-      this.setState({
-        panelPos:
-          pointerY > Dimensions.get('window').height / 2 ? 'top' : 'bottom',
-        selection: selectedIndex,
-        hierarchy,
-        inspected: {
-          style: props.style,
-          frame,
-          source,
-        },
+      setPanelPosition(
+        pointerY > Dimensions.get('window').height / 2 ? 'top' : 'bottom',
+      );
+      setSelectionIndex(selectedIndex);
+      setElementsHierarchy(hierarchy);
+      // $FlowFixMe[incompatible-call] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
+      setInspectedElement({
+        frame,
+        style: props.style,
       });
     };
+
     getInspectorDataForViewAtPoint(
-      this.state.inspectedView,
+      inspectedViewRef.current,
       locationX,
       locationY,
       viewData => {
-        if (this._setTouchedViewData != null) {
-          this._setTouchedViewData(viewData);
-          this._setTouchedViewData = null;
-        }
+        setTouchedViewData(viewData);
         return false;
       },
     );
-  }
+  };
 
-  setPerfing(val: boolean) {
-    this.setState({
-      perfing: val,
-      inspecting: false,
-      inspected: null,
-      networking: false,
-    });
-  }
+  const setInspecting = (enabled: boolean) => {
+    setSelectedTab(enabled ? 'elements-inspector' : null);
+    setInspectedElement(null);
+  };
 
-  setInspecting(val: boolean) {
-    this.setState({
-      inspecting: val,
-      inspected: null,
-    });
-  }
+  const setPerfing = (enabled: boolean) => {
+    setSelectedTab(enabled ? 'performance-profiling' : null);
+    setInspectedElement(null);
+  };
 
-  setTouchTargeting(val: boolean) {
-    PressabilityDebug.setEnabled(val);
-    this.props.onRequestRerenderApp(inspectedView => {
-      this.setState({inspectedView});
-    });
-  }
+  const setNetworking = (enabled: boolean) => {
+    setSelectedTab(enabled ? 'network-profiling' : null);
+    setInspectedElement(null);
+  };
 
-  setNetworking(val: boolean) {
-    this.setState({
-      networking: val,
-      perfing: false,
-      inspecting: false,
-      inspected: null,
-    });
-  }
+  const setTouchTargeting = (val: boolean) => {
+    PressabilityDebug.setEnabled(val);
+    onRequestRerenderApp();
+  };
 
-  render(): React.Node {
-    const panelContainerStyle =
-      this.state.panelPos === 'bottom'
-        ? {bottom: 0}
-        : {top: Platform.OS === 'ios' ? 20 : 0};
-    return (
-      <View style={styles.container} pointerEvents="box-none">
-        {this.state.inspecting && (
-          <InspectorOverlay
-            inspected={this.state.inspected}
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            onTouchPoint={this.onTouchPoint.bind(this)}
-          />
-        )}
-        <View style={[styles.panelContainer, panelContainerStyle]}>
-          <InspectorPanel
-            devtoolsIsOpen={!!this.state.devtoolsAgent}
-            inspecting={this.state.inspecting}
-            perfing={this.state.perfing}
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            setPerfing={this.setPerfing.bind(this)}
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            setInspecting={this.setInspecting.bind(this)}
-            inspected={this.state.inspected}
-            hierarchy={this.state.hierarchy}
-            selection={this.state.selection}
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            setSelection={this.setSelection.bind(this)}
-            touchTargeting={PressabilityDebug.isEnabled()}
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            setTouchTargeting={this.setTouchTargeting.bind(this)}
-            networking={this.state.networking}
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            setNetworking={this.setNetworking.bind(this)}
-          />
-        </View>
+  const panelContainerStyle =
+    panelPosition === 'bottom'
+      ? {bottom: 0}
+      : Platform.select({ios: {top: 0}, default: {top: 0}});
+
+  return (
+    <View style={styles.container} pointerEvents="box-none">
+      {selectedTab === 'elements-inspector' && (
+        <InspectorOverlay
+          inspected={inspectedElement}
+          onTouchPoint={onTouchPoint}
+        />
+      )}
+
+      <View style={[styles.panelContainer, panelContainerStyle]}>
+        <InspectorPanel
+          devtoolsIsOpen={!!reactDevToolsAgent}
+          inspecting={selectedTab === 'elements-inspector'}
+          perfing={selectedTab === 'performance-profiling'}
+          setPerfing={setPerfing}
+          setInspecting={setInspecting}
+          inspected={inspectedElement}
+          hierarchy={elementsHierarchy}
+          selection={selectionIndex}
+          setSelection={setSelection}
+          touchTargeting={PressabilityDebug.isEnabled()}
+          setTouchTargeting={setTouchTargeting}
+          networking={selectedTab === 'network-profiling'}
+          setNetworking={setNetworking}
+        />
       </View>
-    );
-  }
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({