Create new arch module template: cpp-lib

.ado/jobs/cli-init-windows.yml

@@ -22,6 +22,16 @@ parameters:
             configuration: Debug
             platform: x86
             additionalRunArguments: --no-autolink
+          - Name: FabricLibX64Release
+            template: cpp-lib
+            configuration: Release
+            platform: x64
+            additionalRunArguments:
+          - Name: FabricLibX86Debug
+            template: cpp-lib
+            configuration: Debug
+            platform: x86
+            additionalRunArguments:
       - BuildEnvironment: Continuous
         Matrix:
           - Name: FabricX64Debug
@@ -44,6 +54,26 @@ parameters:
             configuration: Release
             platform: x86
             additionalRunArguments: --no-autolink
+          - Name: FabricLibX64Debug
+            template: cpp-lib
+            configuration: Debug
+            platform: x64
+            additionalRunArguments:
+          - Name: FabricLibX64Release
+            template: cpp-lib
+            configuration: ReleaseLib
+            platform: x64
+            additionalRunArguments:
+          - Name: FabricLibX86Debug
+            template: cpp-lib
+            configuration: Debug
+            platform: x86
+            additionalRunArguments:
+          - Name: FabricLibX86Release
+            template: cpp-lib
+            configuration: Release
+            platform: x86
+            additionalRunArguments:
 jobs:
   - ${{ each config in parameters.buildMatrix }}:
     - ${{ if eq(config.BuildEnvironment, parameters.buildEnvironment) }}:

.ado/templates/react-native-init-windows.yml

@@ -40,49 +40,70 @@ steps:
   - ${{ if endsWith(parameters.template, '-app') }}:
     - script: |
         npx --yes react-native@$(reactNativeDevDependency) init testcli --template react-native@$(reactNativeDevDependency)
-      displayName: Init new app project
+      displayName: Init new app project with react-native init
       workingDirectory: $(Agent.BuildDirectory)
 
   - ${{ if endsWith(parameters.template, '-lib') }}:
     - script: |
-        npx --yes create-react-native-module@0.20.2 --package-name "testcli" testcli
-      displayName: Init new lib project
+        npx --yes create-react-native-library@latest --slug testcli --description testcli --author-name "React-Native-Windows Bot" --author-email 53619745+rnbot@users.noreply.github.com --author-url http://example.com --repo-url http://example.com --languages java-objc --type module-new --react-native-version $(reactNativeDevDependency) testcli
+      displayName: Init new lib project with create-react-native-library
       workingDirectory: $(Agent.BuildDirectory)
 
-    - script: |
-        rmdir /s /q android
-      displayName: Remove broken android folder # See issue https://github.com/microsoft/react-native-windows/issues/12209
-      workingDirectory: $(Agent.BuildDirectory)\testcli
-
   - script: |
       call yarn install
-      call yarn upgrade react@$(reactDevDependency) --dev
-      call yarn upgrade react-native@$(reactNativeDevDependency) --dev
-    displayName: Update project react and react-native dev versions
-    workingDirectory: $(Agent.BuildDirectory)\testcli
-
-  - script: |
-      call yarn add react-native-windows@$(npmVersion)
-    displayName: yarn add react-native-windows@$(npmVersion)
+    displayName: yarn install
     workingDirectory: $(Agent.BuildDirectory)\testcli
     env:
-      npm_config_registry: http://localhost:4873
+      YARN_ENABLE_IMMUTABLE_INSTALLS: false
+
+  - ${{ if endsWith(parameters.template, '-app') }}:
+    - script: |
+        call yarn upgrade react@$(reactDevDependency) --dev
+        call yarn upgrade react-native@$(reactNativeDevDependency) --dev
+      displayName: Update project react and react-native dev versions
+      workingDirectory: $(Agent.BuildDirectory)\testcli
+
+    - script: |
+        call yarn add react-native-windows@$(npmVersion)
+      displayName: yarn add react-native-windows@$(npmVersion)
+      workingDirectory: $(Agent.BuildDirectory)\testcli
+      env:
+        npm_config_registry: http://localhost:4873
+
+  - ${{ if endsWith(parameters.template, '-lib') }}:
+    - script: |
+        call yarn config set npmRegistryServer http://localhost:4873
+        call yarn config set unsafeHttpWhitelist --json "[\"localhost\"]"
+        call yarn add react-native-windows@$(npmVersion) --dev
+        call yarn add react-native-windows@* --peer
+      displayName: yarn add react-native-windows@$(npmVersion)
+      workingDirectory: $(Agent.BuildDirectory)\testcli
+      env:
+        YARN_ENABLE_IMMUTABLE_INSTALLS: false
 
   - script: |
       call yarn react-native init-windows --template ${{ parameters.template }} --overwrite --logging ${{ parameters.additionalInitArguments }}
     displayName: Call react-native init-windows
     workingDirectory: $(Agent.BuildDirectory)\testcli
-    env:
-      npm_config_registry: http://localhost:4873
 
-  - ${{ if endsWith(parameters.template, '-app') }}:
-    - powershell: |
-        $path = (Get-ChildItem -Filter "Package.appxmanifest" -File -Recurse).FullName;
-        [xml] $manifest = Get-Content $path
-        $manifest.Package.Identity.Name = 'ReactNative.InitTest'
-        $manifest.Save("$path")
-      displayName: Set AppX package name to "ReactNative.InitTest"
+  - ${{ if endsWith(parameters.template, '-lib') }}:
+    - script: |
+        call yarn install
+      displayName: yarn install again
+      workingDirectory: $(Agent.BuildDirectory)\testcli
+      env:
+        YARN_ENABLE_IMMUTABLE_INSTALLS: false
+
+  - powershell: |
+      $path = (Get-ChildItem -Filter "Package.appxmanifest" -File -Recurse).FullName;
+      [xml] $manifest = Get-Content $path
+      $manifest.Package.Identity.Name = 'ReactNative.InitTest'
+      $manifest.Save("$path")
+    displayName: Set AppX package name to "ReactNative.InitTest"
+    ${{ if endsWith(parameters.template, '-app') }}:
       workingDirectory: $(Agent.BuildDirectory)\testcli\windows
+    ${{ if endsWith(parameters.template, '-lib') }}:
+      workingDirectory: $(Agent.BuildDirectory)\testcli\example\windows
 
   # End npm test server
   - template: verdaccio-stop.yml
@@ -95,7 +116,10 @@ steps:
 
   - template: react-native-debug-info.yml
     parameters:
-      workingDirectory: $(Agent.BuildDirectory)\testcli
+      ${{ if endsWith(parameters.template, '-app') }}:
+        workingDirectory: $(Agent.BuildDirectory)\testcli
+      ${{ if endsWith(parameters.template, '-lib') }}:
+        workingDirectory: $(Agent.BuildDirectory)\testcli\example
 
   - template: ../templates/run-windows-with-certificates.yml
     parameters:
@@ -105,7 +129,10 @@ steps:
       buildPlatform: ${{ parameters.platform }}
       deployOption: ${{ parameters.additionalRunArguments }}
       buildLogDirectory: $(Build.BinariesDirectory)\${{ parameters.platform }}\${{ parameters.configuration }}\BuildLogs
-      workingDirectory: $(Agent.BuildDirectory)\testcli
+      ${{ if endsWith(parameters.template, '-app') }}:
+        workingDirectory: $(Agent.BuildDirectory)\testcli
+      ${{ if endsWith(parameters.template, '-lib') }}:
+        workingDirectory: $(Agent.BuildDirectory)\testcli\example
       restoreLockedMode: false # Allow new lockfile to be created
 
   - template: upload-build-logs.yml

change/react-native-windows-f2a1a001-7c49-48af-8a21-a5947fbec507.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Create new arch module template: cpp-lib",
+  "packageName": "react-native-windows",
+  "email": "jthysell@microsoft.com",
+  "dependentChangeType": "patch"
+}

vnext/PropertySheets/External/Microsoft.ReactNative.Composition.Common.props

@@ -16,5 +16,13 @@
     <UseHermes>true</UseHermes>
   </PropertyGroup>
 
+  <Target Name="EnsureUseWinUI3" BeforeTargets="PrepareForBuild" Condition="'$(UseWinUI3)' == 'false'">
+    <Warning Text="Property 'UseWinUI3' was set to 'false'. Projects built against Microsoft.ReactNative.Composition require UseWinUI3 and it will be set to true." />
+  </Target>
+
+  <PropertyGroup>
+    <UseWinUI3>true</UseWinUI3>
+  </PropertyGroup>
+
   <Import Project="$(MSBuildThisFileDirectory)Microsoft.ReactNative.Common.props" />
 </Project>

vnext/PropertySheets/External/Microsoft.ReactNative.Composition.CppLib.props

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright (c) Microsoft Corporation.
+  Licensed under the MIT License.
+
+  This file will be consumed by ALL C++ Win32 module projects (both inside
+  and outside of this repo) that build on top of Microsoft.ReactNative.
+  Do not make any changes here unless it applies to ALL such projects.
+-->
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <!--
+      Define SkipAddPriPayloadFilesToCopyToOutputDirectoryItems=true and GenerateLibraryLayout=false to avoid
+      conflicts with copying Microsoft.ReactNative XBF files by the native module DLLs and by Microsoft.ReactNative.
+    -->
+    <SkipAddPriPayloadFilesToCopyToOutputDirectoryItems>true</SkipAddPriPayloadFilesToCopyToOutputDirectoryItems>
+    <GenerateLibraryLayout>false</GenerateLibraryLayout>
+  </PropertyGroup>
+  <Import Project="$(MSBuildThisFileDirectory)Microsoft.ReactNative.Composition.Common.props" />
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\Codegen.props" />
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\NuGet.Cpp.props" />
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\WinUI.props" />
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\PackageVersionDefinitions.props" />
+</Project>

vnext/PropertySheets/External/Microsoft.ReactNative.Composition.CppLib.targets

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright (c) Microsoft Corporation.
+  Licensed under the MIT License.
+
+  This file will be consumed by C++ ALL Win32 module projects (both inside
+  and outside of this repo) that build on top of Microsoft.ReactNative.
+  Do not make any changes here unless it applies to ALL such projects.
+-->
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <!-- Starting with the base of the UWP Cpp targets for now (until we need to start differentiating). -->
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.targets" />
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\Codegen.targets" />
+
+  <ItemGroup>
+    <PackageReference Include="boost" Version="1.76.0.0" />
+    <PackageReference Include="Microsoft.VCRTForwarders.140" Version="1.0.2-rc" />
+  </ItemGroup>
+
+</Project>

vnext/templates/cpp-app/template.config.js

@@ -20,12 +20,7 @@ const templateUtils = require('../templateUtils');
 async function preInstall(config = {}, options = {}) {}
 
 async function getFileMappings(config = {}, options = {}) {
-  const rnwPath = path.dirname(
-    require.resolve('react-native-windows', [config.root]),
-  );
-  const rnwVersion = require(path.join(rnwPath, 'package.json')).version;
-
-  const devMode = existsSync(path.join(rnwPath, 'src'));
+  const {rnwVersion, devMode} = templateUtils.getRnwInfo(config, options);
 
   const projectName =
     config?.project?.windows?.project?.projectName ?? options?.name ?? 'MyApp';
@@ -38,6 +33,10 @@ async function getFileMappings(config = {}, options = {}) {
   const packageGuid = uuid.v4();
   const currentUser = username.sync(); // Gets the current username depending on the platform.
 
+  const appJsonPath = path.join(config?.root ?? process.cwd(), 'app.json');
+  const mainComponentName =
+    (existsSync(appJsonPath) ? require(appJsonPath).name : null) ?? projectName;
+
   const cppNugetPackages = [];
 
   const replacements = {
@@ -50,7 +49,7 @@ async function getFileMappings(config = {}, options = {}) {
 
     rnwVersion: rnwVersion,
 
-    mainComponentName: projectName, // TODO: replace with app.json name
+    mainComponentName,
 
     // Visual Studio is very picky about the casing of the guids for projects, project references and the solution
     // https://www.bing.com/search?q=visual+studio+project+guid+casing&cvid=311a5ad7f9fc41089507b24600d23ee7&FORM=ANAB01&PC=U531
@@ -61,7 +60,7 @@ async function getFileMappings(config = {}, options = {}) {
     // packaging and signing variables:
     packageGuidLower: `{${packageGuid.toLowerCase()}}`,
     packageGuidUpper: `{${packageGuid.toUpperCase()}}`,
-    currentUser: currentUser,
+    currentUser,
 
     devMode,
 

vnext/templates/cpp-app/windows/ExperimentalFeatures.props

@@ -3,7 +3,7 @@
 
   <PropertyGroup Label="Microsoft.ReactNative Experimental Features">
     <UseFabric>true</UseFabric>
-    <UseWinUI3>false</UseWinUI3>
+    <UseWinUI3>true</UseWinUI3>
 
     <ReactExperimentalFeaturesSet>true</ReactExperimentalFeaturesSet>
   </PropertyGroup>

vnext/templates/cpp-app/windows/MyApp/AutolinkedNativeModules.g.cpp

@@ -0,0 +1,13 @@
+// AutolinkedNativeModules.g.cpp contents generated by "react-native autolink-windows"
+// clang-format off
+#include "pch.h"
+#include "AutolinkedNativeModules.g.h"{{ &autolinkCppIncludes }}
+
+namespace winrt::Microsoft::ReactNative
+{
+
+void RegisterAutolinkedNativeModulePackages(winrt::Windows::Foundation::Collections::IVector<winrt::Microsoft::ReactNative::IReactPackageProvider> const& packageProviders)
+{ {{ &autolinkCppPackageProviders }}
+}
+
+}

vnext/templates/cpp-app/windows/MyApp/AutolinkedNativeModules.g.h

@@ -0,0 +1,10 @@
+// AutolinkedNativeModules.g.h contents generated by "react-native autolink-windows"
+// clang-format off
+#pragma once
+
+namespace winrt::Microsoft::ReactNative
+{
+
+void RegisterAutolinkedNativeModulePackages(winrt::Windows::Foundation::Collections::IVector<winrt::Microsoft::ReactNative::IReactPackageProvider> const& packageProviders);
+
+}