react-native-windows 0.68.1 → 0.69.0-preview.1

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

@@ -3,76 +3,6 @@
  */
 const fs = require('fs');
 const path = require('path');
-const rnwPath = __dirname;
-const {resolve} = require('metro-resolver');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
-
-const virtualizedListPath = fs.realpathSync(
-  path.resolve(
-    require.resolve('@react-native-windows/virtualized-list/package.json'),
-    '..',
-  ),
-);
-
-function reactNativePlatformResolver(platformImplementations) {
-  return (context, _realModuleName, platform, moduleName) => {
-    let backupResolveRequest = context.resolveRequest;
-    delete context.resolveRequest;
-
-    try {
-      let modifiedModuleName = moduleName;
-      if (platformImplementations[platform]) {
-        if (moduleName === 'react-native') {
-          modifiedModuleName = platformImplementations[platform];
-        } else if (moduleName.startsWith('react-native/')) {
-          modifiedModuleName = `${
-            platformImplementations[platform]
-          }/${modifiedModuleName.slice('react-native/'.length)}`;
-        }
-      }
-      let result = resolve(context, modifiedModuleName, platform);
-      return result;
-    } catch (e) {
-      throw e;
-    } finally {
-      context.resolveRequest = backupResolveRequest;
-    }
-  };
-}
-
-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'),
-    // Add virtualized-list dependency, whose unsymlinked representation is not in node_modules, only in our repo
-    virtualizedListPath,
-  ],
-
-  resolver: {
-    resolveRequest: reactNativePlatformResolver({
-      windows: 'react-native-windows',
-    }),
-    extraNodeModules: {
-      // Redirect react-native-windows to this folder
-      'react-native-windows': rnwPath,
-      '@react-native-windows/virtualized-list': virtualizedListPath,
-    },
-    blockList: exclusionList([
-      // Avoid error EBUSY: resource busy or locked, open '...\vnext\msbuild.ProjectImports.zip' when building 'vnext\Microsoft.ReactNative.sln' with '/bl'
-      /.*\.ProjectImports\.zip/,
-    ]),
-  },
-
-  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 (
@@ -87,3 +17,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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-windows",
-  "version": "0.68.1",
+  "version": "0.69.0-preview.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,74 +23,75 @@
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@jest/create-cache-key-function": "^27.0.1",
-    "@react-native-community/cli": "^7.0.3",
-    "@react-native-community/cli-platform-android": "^7.0.1",
-    "@react-native-community/cli-platform-ios": "^7.0.1",
-    "@react-native-windows/cli": "0.68.1",
-    "@react-native-windows/virtualized-list": "0.68.0",
+    "@react-native-community/cli": "^8.0.0-alpha.4",
+    "@react-native-community/cli-platform-android": "^8.0.0-alpha.3",
+    "@react-native-community/cli-platform-ios": "^8.0.0-alpha.3",
+    "@react-native-windows/cli": "0.69.0-preview.1",
+    "@react-native-windows/virtualized-list": "0.69.0-preview.1",
     "@react-native/assets": "1.0.0",
     "@react-native/normalize-color": "2.0.0",
     "@react-native/polyfills": "2.0.0",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "base64-js": "^1.1.2",
-    "deprecated-react-native-prop-types": "^2.3.0",
     "event-target-shim": "^5.0.1",
     "hermes-engine": "~0.11.0",
     "invariant": "^2.2.4",
     "jsc-android": "^250230.2.1",
-    "metro-react-native-babel-transformer": "0.67.0",
-    "metro-runtime": "0.67.0",
-    "metro-source-map": "0.67.0",
+    "memoize-one": "^5.0.0",
+    "metro-react-native-babel-transformer": "0.70.1",
+    "metro-runtime": "0.70.1",
+    "metro-source-map": "0.70.1",
     "nullthrows": "^1.1.1",
     "pretty-format": "^26.5.2",
     "promise": "^8.0.3",
-    "react-devtools-core": "^4.23.0",
-    "react-native-codegen": "^0.0.13",
-    "react-native-gradle-plugin": "^0.0.5",
+    "react-devtools-core": "4.24.0",
+    "react-native-codegen": "^0.0.15",
+    "react-native-gradle-plugin": "^0.0.7",
     "react-refresh": "^0.4.0",
     "react-shallow-renderer": "16.14.1",
     "regenerator-runtime": "^0.13.2",
-    "scheduler": "^0.20.2",
+    "scheduler": "^0.21.0",
     "source-map-support": "^0.5.19",
     "stacktrace-parser": "^0.1.3",
-    "use-subscription": "^1.0.0",
+    "use-subscription": ">=1.0.0 <1.6.0",
     "whatwg-fetch": "^3.0.0",
     "ws": "^6.1.4"
   },
   "devDependencies": {
-    "@react-native-windows/codegen": "0.68.0",
-    "@rnw-scripts/eslint-config": "1.1.10",
-    "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.0.4",
+    "@react-native-windows/codegen": "0.69.0-preview.1",
+    "@rnw-scripts/eslint-config": "1.1.12",
+    "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.0.6",
+    "@rnw-scripts/metro-dev-config": "0.0.0",
     "@rnx-kit/jest-preset": "^0.1.0",
     "@types/node": "^14.14.22",
-    "@types/react": "^17.0.21",
-    "@types/react-native": "^0.66.0",
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.66.17",
     "eslint": "^7.32.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "flow-bin": "^0.170.0",
+    "flow-bin": "^0.176.3",
     "jscodeshift": "^0.13.1",
     "just-scripts": "^1.3.3",
     "metro-config": "^0.67.0",
     "prettier": "^2.4.1",
-    "react": "17.0.2",
-    "react-native": "^0.68.0",
-    "react-native-platform-override": "^1.6.4",
+    "react": "18.0.0",
+    "react-native": "0.69.0-rc.0",
+    "react-native-platform-override": "^1.6.11",
     "react-refresh": "^0.4.0",
     "react-shallow-renderer": "16.14.1",
     "typescript": "^4.4.4"
   },
   "peerDependencies": {
-    "react": "17.0.2",
-    "react-native": "^0.68.0"
+    "react": "18.0.0",
+    "react-native": "0.69.0-rc.0"
   },
   "beachball": {
-    "defaultNpmTag": "latest",
+    "defaultNpmTag": "preview",
     "gitTags": true,
     "disallowedChangeTypes": [
       "major",
       "minor",
-      "prerelease"
+      "patch"
     ]
   },
   "files": [

package/react-native.config.js

@@ -1,18 +1,52 @@
-// @ts-check
-require('source-map-support').install();
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @ts check
+ * @format
+ */
 
 const cli = require('@react-native-windows/cli');
 
 module.exports = {
   // **** This section defined commands and options on how to provide the Windows platform to external applications
-  commands: cli.commands,
+  commands: cli.commands.map(command => ({
+    ...command,
+    func: lazyInstallSourcemaps(command.func),
+  })),
   platforms: {
     windows: {
       linkConfig: () => null,
-      projectConfig: cli.projectConfig,
-      dependencyConfig: cli.dependencyConfig,
+      projectConfig: lazyInstallSourcemaps(cli.projectConfig),
+      dependencyConfig: lazyInstallSourcemaps(cli.dependencyConfig),
       npmPackageName: 'react-native-windows',
     },
   },
-  healthChecks: cli.getHealthChecks()
+  get healthChecks() {
+    return cli.getHealthChecks();
+  },
 };
+
+// We ship compiled JavaScript to end-users running the CLI. We use
+// "source-map-support" to install a sourcemap-aware exception handler, so that
+// stack traces shown to end-users (and included in our issues), resolve
+// correctly to the TS sources. Resolution is only done when an exception occurs,
+// but there is some initial overhead to installing the exception handler.
+//
+// We want to do this before our code is hooked, to ensure the handler is
+// installed, but doing this as part of global initialization adds a cost to
+// anyone who depends on `react-native-windows`, and parses their
+// `react-native.config`, regardless of whether they call the functions. We
+// delay installing the support from require-time, to function invocation time,
+// which should catch most cases without the penalty.
+let sourcemapSupportInstalled = false;
+function lazyInstallSourcemaps(fn) {
+  return (...args) => {
+    if (!sourcemapSupportInstalled) {
+      require('source-map-support').install();
+      sourcemapSupportInstalled = true;
+    }
+
+    return fn(...args);
+  };
+}

package/rntypes/index.d.ts

@@ -31,7 +31,6 @@
 //                 Dominique Richard <https://github.com/doumart>
 //                 Mohamed Shaban <https://github.com/drmas>
 //                 Jérémy Barbet <https://github.com/jeremybarbet>
-//                 Christian Ost <https://github.com/ca057>
 //                 David Sheldrick <https://github.com/ds300>
 //                 Natsathorn Yuthakovit <https://github.com/natsathorn>
 //                 ConnectDotz <https://github.com/connectdotz>
@@ -41,6 +40,7 @@
 //                 Arafat Zahan <https://github.com/kuasha420>
 //                 Pedro Hernández <https://github.com/phvillegas>
 //                 Sebastian Silbermann <https://github.com/eps1lon>
+//                 Zihan Chen <https://github.com/ZihanChen-MSFT>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.0
 
@@ -3220,12 +3220,6 @@ export interface RefreshControlPropsAndroid extends ViewProps {
      * Size of the refresh indicator, see RefreshControl.SIZE.
      */
     size?: number | undefined;
-
-    /**
-     * Progress view top offset
-     * @platform android
-     */
-    progressViewOffset?: number | undefined;
 }
 
 export interface RefreshControlProps extends RefreshControlPropsIOS, RefreshControlPropsAndroid {
@@ -3238,6 +3232,11 @@ export interface RefreshControlProps extends RefreshControlPropsIOS, RefreshCont
      * Whether the view should be indicating an active refresh.
      */
     refreshing: boolean;
+
+    /**
+     * Progress view top offset
+     */
+    progressViewOffset?: number | undefined;
 }
 
 /**
@@ -9159,6 +9158,19 @@ export interface ImageStoreStatic {
     getBase64ForTag(uri: string, success: (base64ImageData: string) => void, failure: (error: any) => void): void;
 }
 
+//
+// Turbo Module
+//
+
+export interface TurboModule {
+    getConstants?(): {}
+}
+
+export const TurboModuleRegistry: {
+    get<T extends TurboModule>(name: string): T | null;
+    getEnforcing<T extends TurboModule>(name: string): T;
+}
+
 //
 // Interfacing with Native Modules
 // https://reactnative.dev/docs/native-modules-ios

package/stubs/glog/logging.h

@@ -74,7 +74,7 @@ typedef int LogSeverity;
 inline void FlushLogFiles(LogSeverity min_severity) {}
 
 #define google GlogStub
-static const int INFO = 1;
+static const int GLOG_INFO = 1;
 
 #endif
 

package/template/cpp-app/src/App.h

@@ -4,11 +4,7 @@
 
 #include <CppWinRTIncludes.h>
 
-#ifdef USE_WINUI3
-namespace activation = winrt::Microsoft::UI::Xaml;
-#else
 namespace activation = winrt::Windows::ApplicationModel::Activation;
-#endif
 
 namespace winrt::{{ namespaceCpp }}::implementation
 {

package/template/cs-app/src/App.xaml.cs

@@ -1,12 +1,7 @@
 using Microsoft.ReactNative;
-#if USE_WINUI3
-using Microsoft.UI.Xaml;
-using Microsoft.UI.Xaml.Controls;
-#else
 using Windows.ApplicationModel.Activation;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
-#endif
 
 namespace {{ namespace }}
 {

package/template/cs-app/src/MainPage.xaml.cs

@@ -6,7 +6,6 @@ using System.Linq;
 using System.Runtime.InteropServices.WindowsRuntime;
 using Windows.Foundation;
 using Windows.Foundation.Collections;
-#if !USE_WINUI3
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Controls.Primitives;
@@ -14,15 +13,7 @@ using Windows.UI.Xaml.Data;
 using Windows.UI.Xaml.Input;
 using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Navigation;
-#else
-using Microsoft.UI.Xaml;
-using Microsoft.UI.Xaml.Controls;
-using Microsoft.UI.Xaml.Controls.Primitives;
-using Microsoft.UI.Xaml.Data;
-using Microsoft.UI.Xaml.Input;
-using Microsoft.UI.Xaml.Media;
-using Microsoft.UI.Xaml.Navigation;
-#endif
+
 
 // The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
 

package/template/cs-app-WinAppSDK/MyApp/App.xaml

@@ -0,0 +1,16 @@
+<rnw:ReactApplication
+    x:Class="{{ namespace }}.App"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:{{ namespace }}"
+    xmlns:rnw="using:Microsoft.ReactNative">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+                <!-- Other merged dictionaries here -->
+            </ResourceDictionary.MergedDictionaries>
+            <!-- Other app resources here -->
+        </ResourceDictionary>
+    </Application.Resources>
+</rnw:ReactApplication>

package/template/cs-app-WinAppSDK/MyApp/App.xaml.cs

@@ -0,0 +1,70 @@
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Microsoft.UI.Xaml.Shapes;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.ApplicationModel;
+using Windows.ApplicationModel.Activation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+namespace {{ namespace }}
+{
+    /// <summary>
+    /// Provides application-specific behavior to supplement the default Application class.
+    /// </summary>
+    public partial class App : Microsoft.ReactNative.ReactApplication
+  {
+    /// <summary>
+    /// Initializes the singleton application object.  This is the first line of authored code
+    /// executed, and as such is the logical equivalent of main() or WinMain().
+    /// </summary>
+    public App()
+    {
+#if BUNDLE
+            JavaScriptBundleFile = "index.windows";
+            InstanceSettings.UseWebDebugger = false;
+            InstanceSettings.UseFastRefresh = false;
+#else
+      JavaScriptBundleFile = "index";
+      InstanceSettings.UseWebDebugger = true;
+      InstanceSettings.UseFastRefresh = true;
+#endif
+
+#if DEBUG
+            InstanceSettings.UseDeveloperSupport = true;
+#else
+      InstanceSettings.UseDeveloperSupport = false;
+#endif
+      //https://github.com/microsoft/react-native-windows/issues/9139
+      //Microsoft.ReactNative.AutolinkedNativeModules.RegisterAutolinkedNativeModulePackages(PackageProviders); // Includes any autolinked modules
+
+      //PackageProviders.Add(new Microsoft.ReactNative.Managed.ReactPackageProvider());
+
+      this.InitializeComponent();
+    }
+
+    /// <summary>
+    /// Invoked when the application is launched normally by the end user.  Other entry points
+    /// will be used such as when the application is launched to open a specific file.
+    /// </summary>
+    /// <param name="args">Details about the launch request and process.</param>
+    protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
+    {
+      m_window = new MainWindow();
+      m_window.Title = "React Native for Windows - Windows App SDK";
+
+      m_window.Activate();
+    }
+
+    private Window m_window;
+  }
+}

package/template/cs-app-WinAppSDK/MyApp/MainWindow.xaml

@@ -0,0 +1,14 @@
+<Window
+    x:Class="{{ namespace }}.MainWindow"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:{{ namespace }}"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:rnw="using:Microsoft.ReactNative"
+    mc:Ignorable="d">
+
+    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Stretch">
+        <rnw:ReactRootView x:Name="reactRootView" MinWidth="800" MinHeight="600" ComponentName="{{ mainComponentName }}" Background="Red" />
+    </StackPanel>
+</Window>

package/template/cs-app-WinAppSDK/MyApp/MainWindow.xaml.cs

@@ -0,0 +1,38 @@
+using Microsoft.ReactNative;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+namespace {{ namespace }}
+{
+    /// <summary>
+    /// An empty window that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class MainWindow : Window
+  {
+    public MainWindow()
+    {
+      this.InitializeComponent();
+      reactRootView.Loaded += ReactRootView_Loaded;
+    }
+
+    private async void ReactRootView_Loaded(object sender, RoutedEventArgs e)
+    {
+      var app = Application.Current as App;
+      XamlUIService.SetXamlRoot(app.Host.InstanceSettings.Properties, this.Content.XamlRoot);
+      reactRootView.ReactNativeHost = app.Host;
+      await app.Host.LoadInstance();
+    }
+  }
+}