@office-iss/react-native-win32 0.0.0-canary.27 → 0.0.0-canary.270

package/Libraries/Image/TextInlineImageNativeComponent.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,11 +10,42 @@
 
 'use strict';
 
-const requireNativeComponent = require('../ReactNative/requireNativeComponent');
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {ViewProps} from '../Components/View/ViewPropTypes';
+import type {
+  HostComponent,
+  PartialViewConfig,
+} from '../Renderer/shims/ReactNativeTypes';
+import type {ColorValue} from '../StyleSheet/StyleSheet';
+import type {ImageResizeMode} from './ImageResizeMode';
 
-const TextInlineImage: HostComponent<mixed> = requireNativeComponent<mixed>(
-  'RCTTextInlineImage',
-);
+import * as NativeComponentRegistry from '../NativeComponent/NativeComponentRegistry';
 
-module.exports = TextInlineImage;
+type NativeProps = $ReadOnly<{
+  ...ViewProps,
+  resizeMode?: ?ImageResizeMode,
+  src?: ?$ReadOnlyArray<?$ReadOnly<{uri?: ?string, ...}>>,
+  tintColor?: ?ColorValue,
+  headers?: ?{[string]: string},
+}>;
+
+export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
+  uiViewClassName: 'RCTTextInlineImage',
+  bubblingEventTypes: {},
+  directEventTypes: {},
+  validAttributes: {
+    resizeMode: true,
+    src: true,
+    tintColor: {
+      process: require('../StyleSheet/processColor').default,
+    },
+    headers: true,
+  },
+};
+
+const TextInlineImage: HostComponent<NativeProps> =
+  NativeComponentRegistry.get<NativeProps>(
+    'RCTTextInlineImage',
+    () => __INTERNAL_VIEW_CONFIG,
+  );
+
+export default TextInlineImage;

package/Libraries/Image/assetPaths.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * Dont use flow here, since this file is used by saveAssetPlugin.js which will run without flow transform
+ * @format
+ */
+
+'use strict';
+
+// Some windows machines may not have long paths enabled
+// https://learn.microsoft.com/en-us/windows/win32/fileio/maximum-file-path-limitation
+// Assets in nested node_modules (common when using pnpm) - end up creating very long paths
+// Using this function we shorten longer paths to prevent paths from hitting the path limit
+function ensureShortPath(str) {
+  if (str.length < 40) return str;
+
+  const assetsPrefix = 'assets/';
+
+  if (!str.startsWith(assetsPrefix)) {
+    console.warn(`Unexpected asset uri - ${str} may not load correctly.`);
+  }
+
+  const postStr = str.slice(assetsPrefix.length);
+  var hash = 0,
+    i,
+    chr;
+  for (i = 0; i < postStr.length; i++) {
+    chr = postStr.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return assetsPrefix + hash.toString();
+}
+
+module.exports = ensureShortPath;

package/Libraries/Image/nativeImageSource.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,19 +8,17 @@
  * @format
  */
 
-'use strict';
+import type {ImageURISource} from './ImageSource';
 
 import Platform from '../Utilities/Platform';
 
-import type {ImageURISource} from './ImageSource';
-
 type NativeImageSourceSpec = $ReadOnly<{|
   android?: string,
   ios?: string,
   default?: string,
 
   // For more details on width and height, see
-  // https://reactnative.dev/docs/images.html#why-not-automatically-size-everything
+  // https://reactnative.dev/docs/images#why-not-automatically-size-everything
   height: number,
   width: number,
 |}>;
@@ -38,7 +36,7 @@ type NativeImageSourceSpec = $ReadOnly<{|
  * automates measurements and allows adding new images without rebuilding the
  * native app. For more details visit:
  *
- *   https://reactnative.dev/docs/images.html
+ *   https://reactnative.dev/docs/images
  *
  */
 function nativeImageSource(spec: NativeImageSourceSpec): ImageURISource {

package/Libraries/Image/resolveAssetSource.js

@@ -1,44 +1,46 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow
+ * @flow strict-local
  */
 
-// Resolves an asset into a `source` for `Image`.
+// Utilities for resolving an asset into a `source` for e.g. `Image`
 
-'use strict';
+import type {ResolvedAssetSource} from './AssetSourceResolver';
+import type {ImageSource} from './ImageSource';
 
-const AssetRegistry = require('./AssetRegistry');
-const AssetSourceResolver = require('./AssetSourceResolver');
+import SourceCode from '../NativeModules/specs/NativeSourceCode';
 
-import type {ResolvedAssetSource} from './AssetSourceResolver';
+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];
@@ -51,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 {
@@ -73,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;
   }
 
@@ -98,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;
-module.exports.pickScale = AssetSourceResolver.pickScale;
-module.exports.setCustomSourceTransformer = setCustomSourceTransformer;

package/Libraries/Image/resolveAssetSource.win32.js

@@ -10,6 +10,7 @@
 
 const resolveAssetSource = require('./resolveAssetSource.js'); // Get base impl
 const Platform = require('../Utilities/Platform');
+const ensureShortPath = require('./assetPaths.js');
 
 type IPackagerAsset = {
   __packager_asset: boolean,
@@ -56,7 +57,7 @@ class AssetResolverLateScaleResolution {
    */
   _scaledAssetURLInBundle() {
     const path = this._resolver.bundleUrl || 'file://';
-    return this._fromSource(path + this._getAssetPath());
+    return this._fromSource(path + this._getAssetPath(true));
   }
 
   /**
@@ -66,7 +67,7 @@ class AssetResolverLateScaleResolution {
   _assetServerURL() {
     return this._fromSource(
       this._resolver.serverUrl +
-        this._getAssetPath() +
+        this._getAssetPath(false) +
         '?platform=' +
         Platform.OS +
         '&hash=' +
@@ -77,8 +78,8 @@ class AssetResolverLateScaleResolution {
   /**
    * Returns a path like 'assets/AwesomeModule/icon.png'
    */
-  _getAssetPath(): string {
-    const assetDir = this._getBasePath();
+  _getAssetPath(local: boolean): string {
+    const assetDir = this._getBasePath(local);
     return (
       assetDir +
       '/' +
@@ -88,11 +89,22 @@ class AssetResolverLateScaleResolution {
     );
   }
 
-  _getBasePath() {
+  _getBasePath(local: boolean) {
     let basePath = this._resolver.asset.httpServerLocation;
     if (basePath[0] === '/') {
       basePath = basePath.substr(1);
     }
+
+    if (local) {
+      const safePath = basePath.replace(/\.\.\//g, '_');
+      // If this asset was created with the newer saveAssetPlugin, then we should shorten the path
+      // This conditional is added to allow back compat of older bundles which might have been created without the saveAssetPlugin
+      if (this._resolver.asset.__useShortPath) {
+        return ensureShortPath(safePath);
+      }
+      return safePath;
+    }
+
     return basePath;
   }
 
@@ -103,7 +115,7 @@ class AssetResolverLateScaleResolution {
       height: this._resolver.asset.height,
       uri: source,
       // Include scales info in returned object
-      // This may make it easier to do scale lookups on native side if we dont have that infomation from any kind of manifest
+      // This may make it easier to do scale lookups on native side if we don't have that information from any kind of manifest
       scales: this._resolver.asset.scales,
     };
   }

package/Libraries/Inspector/BorderBox.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,8 +10,8 @@
 
 'use strict';
 
-const React = require('react');
 const View = require('../Components/View/View');
+const React = require('react');
 
 class BorderBox extends React.Component<$FlowFixMeProps> {
   render(): $FlowFixMe | React.Node {

package/Libraries/Inspector/BoxInspector.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,12 +10,11 @@
 
 'use strict';
 
-const React = require('react');
+const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
-const View = require('../Components/View/View');
-
 const resolveBoxStyle = require('./resolveBoxStyle');
+const React = require('react');
 
 const blank = {
   top: 0,
@@ -49,7 +48,7 @@ class BoxInspector extends React.Component<$FlowFixMeProps> {
 }
 
 class BoxContainer extends React.Component<$FlowFixMeProps> {
-  render() {
+  render(): React.Node {
     const box = this.props.box;
     return (
       <View style={styles.box}>

package/Libraries/Inspector/ElementBox.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,23 +10,22 @@
 
 'use strict';
 
-const BorderBox = require('./BorderBox');
-const Dimensions = require('../Utilities/Dimensions');
-const React = require('react');
-const StyleSheet = require('../StyleSheet/StyleSheet');
 const View = require('../Components/View/View');
-
 const flattenStyle = require('../StyleSheet/flattenStyle');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Dimensions = require('../Utilities/Dimensions').default;
+const BorderBox = require('./BorderBox');
 const resolveBoxStyle = require('./resolveBoxStyle');
+const React = require('react');
 
 class ElementBox extends React.Component<$FlowFixMeProps> {
   render(): React.Node {
     const style = flattenStyle(this.props.style) || {};
-    let margin = resolveBoxStyle('margin', style);
-    let padding = resolveBoxStyle('padding', style);
+    let margin: ?$ReadOnly<Style> = resolveBoxStyle('margin', style);
+    let padding: ?$ReadOnly<Style> = resolveBoxStyle('padding', style);
 
     const frameStyle = {...this.props.frame};
-    const contentStyle = {
+    const contentStyle: {width: number, height: number} = {
       width: this.props.frame.width,
       height: this.props.frame.height,
     };
@@ -102,7 +101,7 @@ type Style = {
  * @return a modified copy
  */
 function resolveRelativeSizes(style: $ReadOnly<Style>): Style {
-  let resolvedStyle = Object.assign({}, style);
+  let resolvedStyle = {...style};
   resolveSizeInPlace(resolvedStyle, 'top', 'height');
   resolveSizeInPlace(resolvedStyle, 'right', 'width');
   resolveSizeInPlace(resolvedStyle, 'bottom', 'height');
@@ -122,14 +121,20 @@ function resolveSizeInPlace(
   direction: string,
   dimension: string,
 ) {
+  // $FlowFixMe[invalid-computed-prop]
   if (style[direction] !== null && typeof style[direction] === 'string') {
     if (style[direction].indexOf('%') !== -1) {
+      // $FlowFixMe[prop-missing]
       style[direction] =
+        // $FlowFixMe[invalid-computed-prop]
         (parseFloat(style[direction]) / 100.0) *
+        // $FlowFixMe[invalid-computed-prop]
         Dimensions.get('window')[dimension];
     }
+    // $FlowFixMe[invalid-computed-prop]
     if (style[direction] === 'auto') {
       // Ignore auto sizing in frame drawing due to complexity of correctly rendering this
+      // $FlowFixMe[prop-missing]
       style[direction] = 0;
     }
   }

package/Libraries/Inspector/ElementProperties.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,29 +10,23 @@
 
 'use strict';
 
-const BoxInspector = require('./BoxInspector');
-const React = require('react');
-const StyleInspector = require('./StyleInspector');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const Text = require('../Text/Text');
+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 flattenStyle = require('../StyleSheet/flattenStyle');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Text = require('../Text/Text');
 const mapWithSeparator = require('../Utilities/mapWithSeparator');
-const openFileInEditor = require('../Core/Devtools/openFileInEditor');
-
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+const BoxInspector = require('./BoxInspector');
+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,
@@ -42,52 +36,42 @@ 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) => (
-                <TouchableHighlight
-                  key={'item-' + i}
-                  style={[styles.breadItem, i === selection && styles.selected]}
-                  // $FlowFixMe found when converting React.createClass to ES6
-                  onPress={() => this.props.setSelection(i)}>
-                  <Text style={styles.breadItemText}>{hierarchyItem.name}</Text>
-                </TouchableHighlight>
-              ),
-              i => (
-                <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} />}
+            <BoxInspector style={style} frame={this.props.frame} />
           </View>
         </View>
       </TouchableWithoutFeedback>
@@ -131,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;