@office-iss/react-native-win32 0.68.0 → 0.69.0-preview.3

package/Libraries/Utilities/verifyComponentAttributeEquivalence.js

@@ -8,7 +8,7 @@
  * @flow
  */
 
-import ReactNativeViewViewConfig from '../Components/View/ReactNativeViewViewConfig';
+import PlatformBaseViewConfig from '../NativeComponent/PlatformBaseViewConfig';
 import {type ViewConfig} from '../Renderer/shims/ReactNativeTypes';
 
 const IGNORED_KEYS = ['transform', 'hitSlop'];
@@ -62,7 +62,7 @@ export default function verifyComponentAttributeEquivalence(
 
 // Return the different key-value pairs of the right object, by iterating through the keys in the left object
 // Note it won't return a difference where a key is missing in the left but exists the right.
-export function lefthandObjectDiff(leftObj: Object, rightObj: Object): Object {
+function lefthandObjectDiff(leftObj: Object, rightObj: Object): Object {
   const differentKeys = {};
 
   function compare(leftItem: any, rightItem: any, key: string) {
@@ -109,7 +109,7 @@ export function getConfigWithoutViewProps(
   }
 
   return Object.keys(viewConfig[propName])
-    .filter(prop => !ReactNativeViewViewConfig[propName][prop])
+    .filter(prop => !PlatformBaseViewConfig[propName][prop])
     .reduce((obj, prop) => {
       obj[prop] = viewConfig[propName][prop];
       return obj;

package/Libraries/WebSocket/WebSocket.js

@@ -230,7 +230,7 @@ class WebSocket extends (EventTarget(...WEBSOCKET_EVENTS): any) {
         if (ev.id !== this._socketId) {
           return;
         }
-        let data = ev.data;
+        let data: Blob | BlobData | ArrayBuffer | string = ev.data;
         switch (ev.type) {
           case 'binary':
             data = base64.toByteArray(ev.data).buffer;

package/Libraries/vendor/emitter/_EmitterSubscription.js

@@ -13,7 +13,7 @@
 import type EventEmitter from './EventEmitter';
 import _EventSubscription from './_EventSubscription';
 import type EventSubscriptionVendor from './_EventSubscriptionVendor';
-import {type EventSubscription} from './EventSubscription';
+import type {EventSubscription} from './EventSubscription';
 
 /**
  * EmitterSubscription represents a subscription with listener and context data.

package/Libraries/vendor/emitter/_EventEmitter.js

@@ -12,7 +12,7 @@
 const invariant = require('invariant');
 
 import EmitterSubscription from './_EmitterSubscription';
-import {type EventSubscription} from './EventSubscription';
+import type {EventSubscription} from './EventSubscription';
 import EventSubscriptionVendor from './_EventSubscriptionVendor';
 
 const sparseFilterPredicate = () => true;

package/Libraries/vendor/emitter/_EventSubscription.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import {type EventSubscription} from './EventSubscription';
+import type {EventSubscription} from './EventSubscription';
 import type EventSubscriptionVendor from './_EventSubscriptionVendor';
 
 /**

package/flow/{use-subscription.js → use-sync-external-store.js}

@@ -11,9 +11,9 @@
 
 'use strict';
 
-declare module 'use-subscription' {
-  declare export function useSubscription<Value>(subscription: {|
-    getCurrentValue: () => Value,
+declare module 'use-sync-external-store/shim' {
+  declare export function useSyncExternalStore<Value>(
     subscribe: (callback: Function) => () => void,
-  |}): Value;
+    getCurrentValue: () => Value,
+  ): Value;
 }

package/index.js

@@ -30,7 +30,6 @@ import typeof RefreshControl from './Libraries/Components/RefreshControl/Refresh
 import typeof SafeAreaView from './Libraries/Components/SafeAreaView/SafeAreaView';
 import typeof ScrollView from './Libraries/Components/ScrollView/ScrollView';
 import typeof SectionList from './Libraries/Lists/SectionList';
-import typeof SegmentedControlIOS from './Libraries/Components/SegmentedControlIOS/SegmentedControlIOS';
 import typeof Slider from './Libraries/Components/Slider/Slider';
 import typeof StatusBar from './Libraries/Components/StatusBar/StatusBar';
 import typeof Switch from './Libraries/Components/Switch/Switch';
@@ -193,16 +192,6 @@ module.exports = {
   get SectionList(): SectionList {
     return require('./Libraries/Lists/SectionList').default;
   },
-  // $FlowFixMe[value-as-type]
-  get SegmentedControlIOS(): SegmentedControlIOS {
-    warnOnce(
-      'segmented-control-ios-moved',
-      'SegmentedControlIOS has been extracted from react-native core and will be removed in a future release. ' +
-        "It can now be installed and imported from '@react-native-segmented-control/segmented-control' instead of 'react-native'. " +
-        'See https://github.com/react-native-segmented-control/segmented-control',
-    );
-    return require('./Libraries/Components/SegmentedControlIOS/SegmentedControlIOS');
-  },
   get Slider(): Slider {
     warnOnce(
       'slider-moved',
@@ -446,32 +435,32 @@ module.exports = {
   },
   // Deprecated Prop Types
   get ColorPropType(): $FlowFixMe {
-    console.warn(
-      'ColorPropType will be removed from React Native. Migrate to ' +
+    invariant(
+      false,
+      'ColorPropType has been removed from React Native. Migrate to ' +
         "ColorPropType exported from 'deprecated-react-native-prop-types'.",
     );
-    return require('deprecated-react-native-prop-types').ColorPropType;
   },
   get EdgeInsetsPropType(): $FlowFixMe {
-    console.warn(
-      'EdgeInsetsPropType will be removed from React Native. Migrate to ' +
+    invariant(
+      false,
+      'EdgeInsetsPropType has been removed from React Native. Migrate to ' +
         "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
     );
-    return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
   },
   get PointPropType(): $FlowFixMe {
-    console.warn(
-      'PointPropType will be removed from React Native. Migrate to ' +
+    invariant(
+      false,
+      'PointPropType has been removed from React Native. Migrate to ' +
         "PointPropType exported from 'deprecated-react-native-prop-types'.",
     );
-    return require('deprecated-react-native-prop-types').PointPropType;
   },
   get ViewPropTypes(): $FlowFixMe {
-    console.warn(
-      'ViewPropTypes will be removed from React Native. Migrate to ' +
+    invariant(
+      false,
+      'ViewPropTypes has been removed from React Native. Migrate to ' +
         "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
     );
-    return require('deprecated-react-native-prop-types').ViewPropTypes;
   },
 };
 
@@ -647,8 +636,8 @@ if (__DEV__) {
       invariant(
         false,
         'ViewPagerAndroid has been removed from React Native. ' +
-          "It can now be installed and imported from '@react-native-community/viewpager' instead of 'react-native'. " +
-          'See https://github.com/callstack/react-native-viewpager',
+          "It can now be installed and imported from 'react-native-pager-view' instead of 'react-native'. " +
+          'See https://github.com/callstack/react-native-pager-view',
       );
     },
   });
@@ -669,6 +658,22 @@ if (__DEV__) {
     },
   });
 
+  /* $FlowFixMe[prop-missing] This is intentional: Flow will error when
+   * attempting to access SegmentedControlIOS. */
+  /* $FlowFixMe[invalid-export] This is intentional: Flow will error when
+   * attempting to access SegmentedControlIOS. */
+  Object.defineProperty(module.exports, 'SegmentedControlIOS', {
+    configurable: true,
+    get() {
+      invariant(
+        false,
+        'SegmentedControlIOS has been removed from React Native. ' +
+          "It can now be installed and imported from '@react-native-community/segmented-checkbox' instead of 'react-native'." +
+          'See https://github.com/react-native-segmented-control/segmented-control',
+      );
+    },
+  });
+
   /* $FlowFixMe[prop-missing] This is intentional: Flow will error when
    * attempting to access StatusBarIOS. */
   /* $FlowFixMe[invalid-export] This is intentional: Flow will error when

package/index.win32.js

@@ -30,7 +30,6 @@ import typeof RefreshControl from './Libraries/Components/RefreshControl/Refresh
 import typeof SafeAreaView from './Libraries/Components/SafeAreaView/SafeAreaView';
 import typeof ScrollView from './Libraries/Components/ScrollView/ScrollView';
 import typeof SectionList from './Libraries/Lists/SectionList';
-import typeof SegmentedControlIOS from './Libraries/Components/SegmentedControlIOS/SegmentedControlIOS';
 import typeof Slider from './Libraries/Components/Slider/Slider';
 import typeof StatusBar from './Libraries/Components/StatusBar/StatusBar';
 import typeof Switch from './Libraries/Components/Switch/Switch';
@@ -197,16 +196,6 @@ module.exports = {
   get SectionList(): SectionList {
     return require('./Libraries/Lists/SectionList').default;
   },
-  // $FlowFixMe[value-as-type]
-  get SegmentedControlIOS(): SegmentedControlIOS {
-    warnOnce(
-      'segmented-control-ios-moved',
-      'SegmentedControlIOS has been extracted from react-native core and will be removed in a future release. ' +
-        "It can now be installed and imported from '@react-native-segmented-control/segmented-control' instead of 'react-native'. " +
-        'See https://github.com/react-native-segmented-control/segmented-control',
-    );
-    return require('./Libraries/Components/SegmentedControlIOS/SegmentedControlIOS');
-  },
   get Slider(): Slider {
     warnOnce(
       'slider-moved',
@@ -456,32 +445,32 @@ module.exports = {
   },
   // Deprecated Prop Types
   get ColorPropType(): $FlowFixMe {
-    console.warn(
-      'ColorPropType will be removed from React Native. Migrate to ' +
+    invariant(
+      false,
+      'ColorPropType has been removed from React Native. Migrate to ' +
         "ColorPropType exported from 'deprecated-react-native-prop-types'.",
     );
-    return require('deprecated-react-native-prop-types').ColorPropType;
   },
   get EdgeInsetsPropType(): $FlowFixMe {
-    console.warn(
-      'EdgeInsetsPropType will be removed from React Native. Migrate to ' +
+    invariant(
+      false,
+      'EdgeInsetsPropType has been removed from React Native. Migrate to ' +
         "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
     );
-    return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
   },
   get PointPropType(): $FlowFixMe {
-    console.warn(
-      'PointPropType will be removed from React Native. Migrate to ' +
+    invariant(
+      false,
+      'PointPropType has been removed from React Native. Migrate to ' +
         "PointPropType exported from 'deprecated-react-native-prop-types'.",
     );
-    return require('deprecated-react-native-prop-types').PointPropType;
   },
   get ViewPropTypes(): $FlowFixMe {
-    console.warn(
-      'ViewPropTypes will be removed from React Native. Migrate to ' +
+    invariant(
+      false,
+      'ViewPropTypes has been removed from React Native. Migrate to ' +
         "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
     );
-    return require('deprecated-react-native-prop-types').ViewPropTypes;
   },
   // Win32 Types (Typescript components exported as flow any)
   get ColorGradientWin32(): ColorGradientWin32 {
@@ -685,8 +674,8 @@ if (__DEV__) {
       invariant(
         false,
         'ViewPagerAndroid has been removed from React Native. ' +
-          "It can now be installed and imported from '@react-native-community/viewpager' instead of 'react-native'. " +
-          'See https://github.com/callstack/react-native-viewpager',
+          "It can now be installed and imported from 'react-native-pager-view' instead of 'react-native'. " +
+          'See https://github.com/callstack/react-native-pager-view',
       );
     },
   });
@@ -707,6 +696,22 @@ if (__DEV__) {
     },
   });
 
+  /* $FlowFixMe[prop-missing] This is intentional: Flow will error when
+   * attempting to access SegmentedControlIOS. */
+  /* $FlowFixMe[invalid-export] This is intentional: Flow will error when
+   * attempting to access SegmentedControlIOS. */
+  Object.defineProperty(module.exports, 'SegmentedControlIOS', {
+    configurable: true,
+    get() {
+      invariant(
+        false,
+        'SegmentedControlIOS has been removed from React Native. ' +
+          "It can now be installed and imported from '@react-native-community/segmented-checkbox' instead of 'react-native'." +
+          'See https://github.com/react-native-segmented-control/segmented-control',
+      );
+    },
+  });
+
   /* $FlowFixMe[prop-missing] This is intentional: Flow will error when
    * attempting to access StatusBarIOS. */
   /* $FlowFixMe[invalid-export] This is intentional: Flow will error when

package/jest/preprocessor.js

@@ -12,112 +12,29 @@
 
 'use strict';
 
-const babelRegisterOnly = require('metro-babel-register');
-const createCacheKeyFunction =
-  require('@jest/create-cache-key-function').default;
-
-const {transformSync: babelTransformSync} = require('@babel/core');
-const generate = require('@babel/generator').default;
-
-const nodeFiles = new RegExp(
-  [
-    '/metro(?:-[^/]*)?/', // metro, metro-core, metro-source-map, metro-etc.
-  ].join('|'),
+// NOTE: Avoiding using a package like 'chalk' here, for simplicity
+const YELLOW = process.stderr.isTTY ? '\u001b[33m' : '';
+const BOLD = process.stderr.isTTY ? '\u001b[1m' : '';
+const RESET = process.stderr.isTTY ? '\u001b[0m' : '';
+const UNDERLINE = process.stderr.isTTY ? '\u001b[4m' : '';
+
+console.warn(
+  '\n' +
+    YELLOW +
+    BOLD +
+    'react-native/jest/preprocessor.js' +
+    RESET +
+    YELLOW +
+    ' is deprecated and will be removed.\n' +
+    'Use "preset": "react-native" in your Jest config instead.\n' +
+    'See ' +
+    UNDERLINE +
+    'https://jestjs.io/docs/tutorial-react-native' +
+    RESET +
+    YELLOW +
+    ' for more setup instructions.' +
+    RESET +
+    '\n',
 );
-const nodeOptions = babelRegisterOnly.config([nodeFiles]);
-
-babelRegisterOnly([]);
-
-const transformer = require('metro-react-native-babel-transformer');
-module.exports = {
-  process(src /*: string */, file /*: string */) /*: string */ {
-    if (nodeFiles.test(file)) {
-      // node specific transforms only
-      return babelTransformSync(src, {
-        filename: file,
-        sourceType: 'script',
-        ...nodeOptions,
-        ast: false,
-      }).code;
-    }
-
-    const {ast} = transformer.transform({
-      filename: file,
-      options: {
-        ast: true, // needed for open source (?) https://github.com/facebook/react-native/commit/f8d6b97140cffe8d18b2558f94570c8d1b410d5c#r28647044
-        dev: true,
-        enableBabelRuntime: false,
-        experimentalImportSupport: false,
-        globalPrefix: '',
-        hot: false,
-        inlineRequires: true,
-        minify: false,
-        platform: '',
-        projectRoot: '',
-        publicPath: '/assets',
-        retainLines: true,
-        sourceType: 'unambiguous', // b7 required. detects module vs script mode
-      },
-      src,
-      plugins: [
-        [require('@babel/plugin-transform-block-scoping')],
-        // the flow strip types plugin must go BEFORE class properties!
-        // there'll be a test case that fails if you don't.
-        [require('@babel/plugin-transform-flow-strip-types')],
-        [
-          require('@babel/plugin-proposal-class-properties'),
-          // use `this.foo = bar` instead of `this.defineProperty('foo', ...)`
-          {loose: true},
-        ],
-        [require('@babel/plugin-transform-computed-properties')],
-        [require('@babel/plugin-transform-destructuring')],
-        [require('@babel/plugin-transform-function-name')],
-        [require('@babel/plugin-transform-literals')],
-        [require('@babel/plugin-transform-parameters')],
-        [require('@babel/plugin-transform-shorthand-properties')],
-        [require('@babel/plugin-transform-react-jsx')],
-        [require('@babel/plugin-transform-regenerator')],
-        [require('@babel/plugin-transform-sticky-regex')],
-        [require('@babel/plugin-transform-unicode-regex')],
-        [
-          require('@babel/plugin-transform-modules-commonjs'),
-          {strict: false, allowTopLevelThis: true},
-        ],
-        [require('@babel/plugin-transform-classes')],
-        [require('@babel/plugin-transform-arrow-functions')],
-        [require('@babel/plugin-transform-spread')],
-        [require('@babel/plugin-proposal-object-rest-spread')],
-        [
-          require('@babel/plugin-transform-template-literals'),
-          {loose: true}, // dont 'a'.concat('b'), just use 'a'+'b'
-        ],
-        [require('@babel/plugin-transform-exponentiation-operator')],
-        [require('@babel/plugin-transform-object-assign')],
-        [require('@babel/plugin-transform-for-of'), {loose: true}],
-        [require('@babel/plugin-transform-react-display-name')],
-        [require('@babel/plugin-transform-react-jsx-source')],
-      ],
-    });
-
-    return generate(
-      ast,
-      // $FlowFixMe[prop-missing] Error found when improving flow typing for libs
-      {
-        code: true,
-        comments: false,
-        compact: false,
-        filename: file,
-        retainLines: true,
-        sourceFileName: file,
-        sourceMaps: true,
-      },
-      src,
-    ).code;
-  },
 
-  getCacheKey: (createCacheKeyFunction([
-    __filename,
-    require.resolve('metro-react-native-babel-transformer'),
-    require.resolve('@babel/core/package.json'),
-  ]) /*: any */),
-};
+module.exports = require('./preprocessor_DO_NOT_USE');

package/jest/preprocessor_DO_NOT_USE.js

@@ -0,0 +1,122 @@
+/**
+ * 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
+ */
+
+/* eslint-env node */
+
+'use strict';
+
+const babelRegisterOnly = require('metro-babel-register');
+const createCacheKeyFunction =
+  require('@jest/create-cache-key-function').default;
+
+const {transformSync: babelTransformSync} = require('@babel/core');
+const generate = require('@babel/generator').default;
+
+const nodeFiles = new RegExp(
+  [
+    '/metro(?:-[^/]*)?/', // metro, metro-core, metro-source-map, metro-etc.
+  ].join('|'),
+);
+const nodeOptions = babelRegisterOnly.config([nodeFiles]);
+
+babelRegisterOnly([]);
+
+const transformer = require('metro-react-native-babel-transformer');
+module.exports = {
+  process(src /*: string */, file /*: string */) /*: {code: string, ...} */ {
+    if (nodeFiles.test(file)) {
+      // node specific transforms only
+      return babelTransformSync(src, {
+        filename: file,
+        sourceType: 'script',
+        ...nodeOptions,
+        ast: false,
+      });
+    }
+
+    const {ast} = transformer.transform({
+      filename: file,
+      options: {
+        ast: true, // needed for open source (?) https://github.com/facebook/react-native/commit/f8d6b97140cffe8d18b2558f94570c8d1b410d5c#r28647044
+        dev: true,
+        enableBabelRuntime: false,
+        experimentalImportSupport: false,
+        globalPrefix: '',
+        hot: false,
+        inlineRequires: true,
+        minify: false,
+        platform: '',
+        projectRoot: '',
+        publicPath: '/assets',
+        retainLines: true,
+        sourceType: 'unambiguous', // b7 required. detects module vs script mode
+      },
+      src,
+      plugins: [
+        [require('@babel/plugin-transform-block-scoping')],
+        // the flow strip types plugin must go BEFORE class properties!
+        // there'll be a test case that fails if you don't.
+        [require('@babel/plugin-transform-flow-strip-types')],
+        [
+          require('@babel/plugin-proposal-class-properties'),
+          // use `this.foo = bar` instead of `this.defineProperty('foo', ...)`
+          {loose: true},
+        ],
+        [require('@babel/plugin-transform-computed-properties')],
+        [require('@babel/plugin-transform-destructuring')],
+        [require('@babel/plugin-transform-function-name')],
+        [require('@babel/plugin-transform-literals')],
+        [require('@babel/plugin-transform-parameters')],
+        [require('@babel/plugin-transform-shorthand-properties')],
+        [require('@babel/plugin-transform-react-jsx')],
+        [require('@babel/plugin-transform-regenerator')],
+        [require('@babel/plugin-transform-sticky-regex')],
+        [require('@babel/plugin-transform-unicode-regex')],
+        [
+          require('@babel/plugin-transform-modules-commonjs'),
+          {strict: false, allowTopLevelThis: true},
+        ],
+        [require('@babel/plugin-transform-classes')],
+        [require('@babel/plugin-transform-arrow-functions')],
+        [require('@babel/plugin-transform-spread')],
+        [require('@babel/plugin-proposal-object-rest-spread')],
+        [
+          require('@babel/plugin-transform-template-literals'),
+          {loose: true}, // dont 'a'.concat('b'), just use 'a'+'b'
+        ],
+        [require('@babel/plugin-transform-exponentiation-operator')],
+        [require('@babel/plugin-transform-for-of'), {loose: true}],
+        [require('@babel/plugin-transform-react-display-name')],
+        [require('@babel/plugin-transform-react-jsx-source')],
+      ],
+    });
+
+    return generate(
+      ast,
+      // $FlowFixMe[prop-missing] Error found when improving flow typing for libs
+      {
+        code: true,
+        comments: false,
+        compact: false,
+        filename: file,
+        retainLines: true,
+        sourceFileName: file,
+        sourceMaps: true,
+      },
+      src,
+    );
+  },
+
+  getCacheKey: (createCacheKeyFunction([
+    __filename,
+    require.resolve('metro-react-native-babel-transformer'),
+    require.resolve('@babel/core/package.json'),
+  ]) /*: any */),
+};

package/metro.config.js

@@ -1,53 +1,6 @@
-/**
- * @format
- */
 const fs = require('fs');
 const path = require('path');
 
-const rnWin32Path = fs.realpathSync(
-  path.dirname(require.resolve('@office-iss/react-native-win32/package.json')),
-);
-const rnwTesterPath = fs.realpathSync(
-  path.dirname(
-    require.resolve('@office-iss/react-native-win32-tester/package.json'),
-  ),
-);
-const virtualizedListPath = fs.realpathSync(
-  path.resolve(
-    require.resolve('@react-native-windows/virtualized-list/package.json'),
-    '..',
-  ),
-);
-
-module.exports = {
-  // WatchFolders is only needed due to the yarn workspace layout of node_modules, we need to watch the symlinked locations separately
-  watchFolders: [
-    // Include hoisted modules
-    path.resolve(__dirname, '../../../node_modules'),
-    rnwTesterPath,
-    rnWin32Path,
-    // Add virtualized-list dependency, whose unsymlinked representation is not in node_modules, only in our repo
-    virtualizedListPath,
-  ],
-
-  resolver: {
-    extraNodeModules: {
-      '@office-iss/react-native-win32': rnWin32Path,
-      'react-native-win32-tester': rnwTesterPath,
-      '@react-native-windows/virtualized-list': virtualizedListPath,
-    },
-  },
-
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
-};
-
 // Check that we have built our JS files before running the bundler, otherwise we'll get a harder to diagnose "Unable to resolve module" error
 if (
   !fs.existsSync(
@@ -58,3 +11,6 @@ if (
     '\nThis package must be built before running the bundler.  Did you mean to run "yarn build" first?\n',
   );
 }
+
+const {makeMetroConfig} = require('@rnw-scripts/metro-dev-config');
+module.exports = makeMetroConfig();