feat(windows): add support for New Architecture

.github/workflows/build.yml

@@ -584,9 +584,11 @@ jobs:
         uses: ./.github/actions/yarn
         with:
           immutable: ${{ github.event_name != 'schedule' }}
-      - name: Build bundle and create solution
+      - name: Bundle JavaScript
         run: |
           yarn build:windows
+      - name: Generate Visual Studio solution
+        run: |
           yarn install-windows-test-app
         working-directory: example
       - name: Test `react-native config`
@@ -642,9 +644,11 @@ jobs:
         uses: ./.github/actions/init-test-app
         with:
           platform: ${{ matrix.template }}
-      - name: Build bundle and create solution
+      - name: Bundle JavaScript
         run: |
           yarn build:windows
+      - name: Generate Visual Studio solution
+        run: |
           if ("${{ matrix.template }}" -eq "all") { yarn install-windows-test-app }
           else { yarn install-windows-test-app --project-directory=. }
         working-directory: template-example

example/windows/ReactTestAppTests/ReactTestAppTests.vcxproj

@@ -59,11 +59,11 @@
     <Import Project="$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props" Condition="exists('$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props')" Label="LocalAppDataPlatform" />
   </ImportGroup>
   <PropertyGroup Label="UserMacros">
-    <ReactTestAppDir Condition="'$(ReactTestAppDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(SolutionDir), 'node_modules\react-native-test-app\package.json'))\node_modules\react-native-test-app\windows\ReactTestApp\</ReactTestAppDir>
-    <ReactTestAppProjectDir Condition="'$(ReactTestAppProjectDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(SolutionDir), 'node_modules\.generated\windows\ReactTestApp\ReactTestApp.vcxproj'))\node_modules\.generated\windows\ReactTestApp\</ReactTestAppProjectDir>
+    <ReactAppProjectDir Condition="'$(ReactAppProjectDir)'==''">$([MSBuild]::GetDirectoryNameOfFileAbove($(SolutionDir), 'node_modules\.generated\windows\UWP\ReactTestApp.vcxproj'))\node_modules\.generated\windows\UWP</ReactAppProjectDir>
+    <ReactAppSharedDir Condition="'$(ReactAppSharedDir)'==''">$([MSBuild]::GetDirectoryNameOfFileAbove($(SolutionDir), 'node_modules\react-native-test-app\package.json'))\node_modules\react-native-test-app\windows\Shared</ReactAppSharedDir>
   </PropertyGroup>
   <PropertyGroup>
-    <IncludePath>$(ReactTestAppDir);$(IncludePath)</IncludePath>
+    <IncludePath>$(ReactAppSharedDir);$(IncludePath)</IncludePath>
   </PropertyGroup>
   <ItemDefinitionGroup>
     <ClCompile>
@@ -78,7 +78,7 @@
     </ClCompile>
     <Link>
       <SubSystem>Windows</SubSystem>
-      <AdditionalLibraryDirectories>$(VCInstallDir)UnitTest\lib;%(AdditionalLibraryDirectories);$(ReactTestAppProjectDir)\$(Platform)\$(Configuration)</AdditionalLibraryDirectories>
+      <AdditionalLibraryDirectories>$(VCInstallDir)UnitTest\lib;%(AdditionalLibraryDirectories);$(ReactAppProjectDir)\$(Platform)\$(Configuration)</AdditionalLibraryDirectories>
       <AdditionalDependencies>%(AdditionalDependencies);Manifest.obj;pch.obj</AdditionalDependencies>
     </Link>
   </ItemDefinitionGroup>

package.json

@@ -50,8 +50,8 @@
     "test-app.gradle",
     "test_app.rb",
     "visionos",
-    "windows/*.{mjs,props}",
-    "windows/ReactTestApp"
+    "windows",
+    "!.clang-format"
   ],
   "main": "scripts/configure-projects.js",
   "bin": {

scripts/configure-projects.js

@@ -10,6 +10,7 @@ const path = require("node:path");
 const {
   findNearest,
   getPackageVersion,
+  readTextFile,
   toVersionNumber,
   v,
 } = require("./helpers");
@@ -76,22 +77,15 @@ function iosProjectPath() {
 }
 
 /**
- * @param {string} sourceDir
+ * @param {string} solutionFile
  * @returns {ProjectParams["windows"]["project"]}
  */
-function windowsProjectPath(sourceDir) {
-  return {
-    projectFile: path.relative(
-      sourceDir,
-      path.join(
-        "node_modules",
-        ".generated",
-        "windows",
-        "ReactTestApp",
-        "ReactTestApp.vcxproj"
-      )
-    ),
-  };
+function windowsProjectPath(solutionFile, fs = nodefs) {
+  const sln = readTextFile(solutionFile, fs);
+  const m = sln.match(
+    /([^"]*?node_modules[/\\].generated[/\\]windows[/\\].*?\.vcxproj)/
+  );
+  return { projectFile: m ? m[1] : `(Failed to parse '${solutionFile}')` };
 }
 
 /**
@@ -132,10 +126,11 @@ function configureProjects({ android, ios, windows }, fs = nodefs) {
   }
 
   if (windows && fs.existsSync(windows.solutionFile)) {
+    const { sourceDir, solutionFile } = windows;
     config.windows = {
-      sourceDir: windows.sourceDir,
-      solutionFile: path.relative(windows.sourceDir, windows.solutionFile),
-      project: windowsProjectPath(path.resolve(projectRoot, windows.sourceDir)),
+      sourceDir,
+      solutionFile: path.relative(sourceDir, solutionFile),
+      project: windowsProjectPath(solutionFile, fs),
     };
   }
 

scripts/generate-manifest.mjs

@@ -38,8 +38,7 @@ function getLanguage(output) {
           indent: "    ",
           level: 1,
           header: [
-            "#ifndef REACTTESTAPP_MANIFEST_H_",
-            "#define REACTTESTAPP_MANIFEST_H_",
+            "#pragma once",
             "",
             "#include <any>",
             "#include <map>",
@@ -56,8 +55,6 @@ function getLanguage(output) {
             "",
             "}  // namespace ReactTestApp",
             "",
-            "#endif  // REACTTESTAPP_MANIFEST_H_",
-            "",
           ].join("\n"),
         },
         arrayProperty: (name, type, required) => {
@@ -234,7 +231,7 @@ function main() {
       "Manifest.kt"
     ),
     path.join(scriptsDir, "..", "ios", "ReactTestApp", "Manifest.swift"),
-    path.join(scriptsDir, "..", "windows", "ReactTestApp", "Manifest.h"),
+    path.join(scriptsDir, "..", "windows", "Shared", "Manifest.h"),
   ].forEach((output) => generate(schema, output).catch(console.error));
 }
 

scripts/helpers.js

@@ -105,23 +105,6 @@ function readJSONFile(path, fs = nodefs) {
   return JSON.parse(readTextFile(path, fs));
 }
 
-/**
- * Returns version string of specified module.
- * @param {string} module
- * @returns {string}
- */
-function getPackageVersion(module, startDir = process.cwd(), fs = nodefs) {
-  const options = { paths: [startDir] };
-  const manifestPath = require.resolve(`${module}/package.json`, options);
-  const mod = readJSONFile(manifestPath, fs);
-  const version = mod["version"];
-  if (typeof version !== "string") {
-    throw new Error(`Invalid version number: ${module}@${version}`);
-  }
-
-  return version;
-}
-
 /**
  * @template T
  * @param {string[]} dependencyChain
@@ -157,6 +140,33 @@ function v(major, minor, patch) {
   return major * 1000000 + minor * 1000 + patch;
 }
 
+/**
+ * Writes data to specified file path.
+ * @param {string} file
+ * @param {string} data
+ * @returns {Promise<void>}
+ */
+function writeTextFile(file, data, fs = nodefs.promises) {
+  return fs.writeFile(file, data, { encoding: "utf-8", mode: 0o644 });
+}
+
+/**
+ * Returns version string of specified module.
+ * @param {string} module
+ * @returns {string}
+ */
+function getPackageVersion(module, startDir = process.cwd(), fs = nodefs) {
+  const options = { paths: [startDir] };
+  const manifestPath = require.resolve(`${module}/package.json`, options);
+  const mod = readJSONFile(manifestPath, fs);
+  const version = mod["version"];
+  if (typeof version !== "string") {
+    throw new Error(`Invalid version number: ${module}@${version}`);
+  }
+
+  return version;
+}
+
 exports.findFile = findFile;
 exports.findNearest = findNearest;
 exports.getPackageVersion = getPackageVersion;
@@ -167,3 +177,4 @@ exports.readTextFile = readTextFile;
 exports.requireTransitive = requireTransitive;
 exports.toVersionNumber = toVersionNumber;
 exports.v = v;
+exports.writeTextFile = writeTextFile;

scripts/types.ts

@@ -86,6 +86,51 @@ type InferredOptionTypes<O> = { [key in keyof O]: InferredOptionType<O[key]> };
 
 export type Args<O> = InferredOptionTypes<O> & { _: string[] };
 
+/***********************
+ * windows/project.mjs *
+ ***********************/
+
+export type AppxBundle = {
+  appName: string;
+  appxManifest: string;
+  assetItems: string;
+  assetItemFilters: string;
+  assetFilters: string;
+  packageCertificate: string;
+  singleApp?: string;
+};
+
+export type MSBuildProjectOptions = {
+  autolink: boolean;
+  useFabric?: boolean;
+  useHermes?: boolean;
+  useNuGet: boolean;
+};
+
+export type MSBuildProjectParams = {
+  projDir: string;
+  projectFileName: string;
+  projectFiles: [string, Record<string, string>?][];
+  solutionTemplatePath: string;
+};
+
+export type ProjectInfo = {
+  version: string;
+  versionNumber: number;
+  bundle: AppxBundle;
+  hermesVersion: string | false | null;
+  nugetDependencies: [string, string][];
+  useExperimentalNuGet: boolean;
+  useFabric: boolean;
+  usePackageReferences: boolean;
+  xamlVersion: string;
+};
+
+export type MSBuildProjectConfigurator = (
+  info: ProjectInfo,
+  options: MSBuildProjectOptions
+) => MSBuildProjectParams;
+
 /************************
  * windows/test-app.mjs *
  ************************/

scripts/validate-manifest.js

@@ -71,6 +71,7 @@ function validateManifest(manifestPath, fs = nodefs) {
 /**
  * @param {("file" | "stdout")=} outputMode Whether to output to `file` or `stdout`
  * @param {string=} projectRoot Path to root of project
+ * @returns {number}
  */
 function validate(
   outputMode = "stdout",
@@ -81,7 +82,7 @@ function validate(
   const manifest = validateManifest(manifestPath, fs);
   if (typeof manifest === "number") {
     process.exitCode = manifest;
-    return;
+    return manifest;
   }
 
   const nodeModulesPath = findFile(NODE_MODULES, projectRoot, fs);
@@ -90,7 +91,7 @@ function validate(
       `Failed to find '${NODE_MODULES}'. Please make sure you've installed npm dependencies.`
     );
     process.exitCode = 2;
-    return;
+    return 2;
   }
 
   const copy = JSON.stringify(manifest);
@@ -103,15 +104,12 @@ function validate(
       .digest("hex");
     const cppHeader = [
       "// clang-format off",
-      "#ifndef REACTTESTAPP_APP_JSON_H_",
-      "#define REACTTESTAPP_APP_JSON_H_",
+      "#pragma once",
       "",
       `#define ReactTestApp_AppManifest "${escapedCopy}"`,
       `#define ReactTestApp_AppManifestChecksum "${checksum}"`,
       `#define ReactTestApp_AppManifestLength ${copy.length}`,
       "",
-      "#endif  // REACTTESTAPP_APP_JSON_H_",
-      "",
     ].join("\n");
     const manifestCopyDest = path.join(
       nodeModulesPath,
@@ -130,6 +128,8 @@ function validate(
   } else {
     console.log(escapedCopy);
   }
+
+  return 0;
 }
 
 exports.validate = validate;