NativeModuleSample based on cpp-lib template (#991)

## Description

This PR intends to replace the existing sample at
`NativeModuleSample\cppwinrt` with a new `NativeModuleSample\cpp-lib`,
based on the `cpp-lib` template exposed in RNW 0.76.0.

Features of this new sample includes:
* Built-in support for supporting both New and Old Architecture app
projects
* Two example apps (one Old Arch, one New Arch) to showcase the E2E
works
* Upgrade from JS to TS
* Faster native builds thanks to building against the NuGet packages

### Why
The old sample is based on the Old Architecture, UWP-based C++ library
template. That template is not the target of active development, while
the new template is the new standard for RNW >= 0.76.0.

## Screenshots
| Old Arch Example | New Arch Example |
|:-:|:-:|
|
![image](https://github.com/user-attachments/assets/a9d55b72-efeb-4703-9f41-a20c7c699152)
|
![image](https://github.com/user-attachments/assets/125a5b57-09f2-41e3-911c-4c3293928fb2)
|

.github/workflows/ci.yml

@@ -37,7 +37,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        sampleName: ['NativeModuleSample\cppwinrt', 'NativeModuleSample\csharp']
+        sampleName: ['NativeModuleSample\cpp-lib', 'NativeModuleSample\cppwinrt', 'NativeModuleSample\csharp']
         configuration: ['Debug', 'Release']
         platform: ['x86', 'x64', 'ARM64']
     uses: ./.github/workflows/template-buildsample.yml

.github/workflows/pr.yml

@@ -66,7 +66,7 @@ jobs:
     strategy:
       fail-fast: true
       matrix:
-        sampleName: ['NativeModuleSample\cppwinrt', 'NativeModuleSample\csharp']
+        sampleName: ['NativeModuleSample\cpp-lib', 'NativeModuleSample\cppwinrt', 'NativeModuleSample\csharp']
         configuration: ['Debug', 'Release']
         platform: ['x86']
     uses: ./.github/workflows/template-buildsample.yml

samples/NativeModuleSample/cpp-lib/.editorconfig

@@ -0,0 +1,15 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+
+indent_style = space
+indent_size = 2
+
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

samples/NativeModuleSample/cpp-lib/.gitattributes

@@ -0,0 +1,3 @@
+*.pbxproj -text
+# specific for windows script files
+*.bat text eol=crlf

samples/NativeModuleSample/cpp-lib/.gitignore

@@ -0,0 +1,82 @@
+# OSX
+#
+.DS_Store
+
+# XDE
+.expo/
+
+# VSCode
+.vscode/
+jsconfig.json
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+.classpath
+.cxx
+.gradle
+.idea
+.project
+.settings
+local.properties
+android.iml
+
+# Cocoapods
+#
+example/ios/Pods
+
+# Ruby
+example/vendor/
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Expo
+.expo/
+
+# Turborepo
+.turbo/
+
+# generated by bob
+lib/
+
+# React Native Codegen
+ios/generated
+android/generated

samples/NativeModuleSample/cpp-lib/.nvmrc

@@ -0,0 +1 @@
+v18

samples/NativeModuleSample/cpp-lib/.watchmanconfig

@@ -0,0 +1 @@
+{}

samples/NativeModuleSample/cpp-lib/.yarnrc.yml

@@ -0,0 +1,10 @@
+nodeLinker: node-modules
+nmHoistingLimits: workspaces
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+
+yarnPath: .yarn/releases/yarn-3.6.1.cjs

samples/NativeModuleSample/cpp-lib/NuGet.config

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <packageSources>
+    <clear />
+    <add key="react-native" value="https://pkgs.dev.azure.com/ms/react-native/_packaging/react-native-public/nuget/v3/index.json" />
+    <add key="Nuget.org" value="https://api.nuget.org/v3/index.json" />
+  </packageSources>
+  <disabledPackageSources>
+    <clear />
+  </disabledPackageSources>  
+</configuration>

samples/NativeModuleSample/cpp-lib/README.md

@@ -0,0 +1,34 @@
+# Native Module C++ Sample - React Native for Windows
+
+See [../README.md](../README.md) for more details of this sample.
+
+>**Note: Don't build your own projects directly out of this sample. When you publish a native module (as source), you'll want to create a new project with the correct metadata. This will also make sure that you're using unique identifiers in your project files to avoid conflicts with other native modules.**
+
+### Setup
+
+First, make sure you've met the [React Native Windows System Requirements](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies).
+
+Then, install the module's dependencies with yarn and build the TypeScript:
+
+```cmd
+yarn install
+yarn prepare
+```
+
+### Run
+
+To run the example app (targeting the New Architecture) and see that the module works:
+
+```cmd
+yarn example windows
+```
+
+Alternatively, to run the old example app (targeting the Old Architecture) and see that the module works:
+
+```
+yarn example-old windows
+```
+
+### Upgrade
+
+**TODO**

samples/NativeModuleSample/cpp-lib/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    ['module:react-native-builder-bob/babel-preset', { modules: 'commonjs' }],
+  ],
+};

samples/NativeModuleSample/cpp-lib/example-old/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

samples/NativeModuleSample/cpp-lib/example-old/.watchmanconfig

@@ -0,0 +1 @@
+{}

samples/NativeModuleSample/cpp-lib/example-old/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "NativeModuleSampleExampleOld",
+  "displayName": "NativeModuleSampleExampleOld"
+}

samples/NativeModuleSample/cpp-lib/example-old/babel.config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+const { getConfig } = require('react-native-builder-bob/babel-config');
+const pkg = require('../package.json');
+
+const root = path.resolve(__dirname, '..');
+
+module.exports = getConfig(
+  {
+    presets: ['module:@react-native/babel-preset'],
+  },
+  { root, pkg }
+);

samples/NativeModuleSample/cpp-lib/example-old/index.js

@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { AppRegistry } from 'react-native';
+import App from './src/App';
+import { name as appName } from './app.json';
+
+AppRegistry.registerComponent(appName, () => App);

samples/NativeModuleSample/cpp-lib/example-old/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: 'react-native',
+};

samples/NativeModuleSample/cpp-lib/example-old/metro.config.js

@@ -0,0 +1,67 @@
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const fs = require('fs');
+const path = require('path');
+const escape = require('escape-string-regexp');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
+const pack = require('../package.json');
+
+const root = path.resolve(__dirname, '..');
+const modules = Object.keys({ ...pack.peerDependencies });
+
+const rnwPath = fs.realpathSync(
+  path.resolve(require.resolve('react-native-windows/package.json'), '..'),
+);
+
+//
+
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {
+  watchFolders: [root,
+    //
+  ],
+
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we block them at the root, and alias them to the versions in example's node_modules
+  resolver: {
+    blacklistRE: exclusionList(
+      modules.map(
+        (m) =>
+          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
+      ).concat([
+        // This stops "npx @react-native-community/cli run-windows" from causing the metro server to crash if its already running
+        new RegExp(
+          `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,
+        ),
+        // This prevents "npx @react-native-community/cli run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
+        new RegExp(`${rnwPath}/build/.*`),
+        new RegExp(`${rnwPath}/target/.*`),
+        /.*\.ProjectImports\.zip/,
+      ])
+    ),
+
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    },
+    {
+      //
+    }
+    ),
+  },
+
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);

samples/NativeModuleSample/cpp-lib/example-old/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "native-module-sample-example-old",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "react-native start",
+    "windows": "npx @react-native-community/cli run-windows",
+    "test:windows": "jest --config jest.config.windows.js"
+  },
+  "dependencies": {
+    "react": "18.3.1",
+    "react-native": "0.76.0",
+    "react-native-windows": "0.76.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "15.0.0-alpha.2",
+    "@react-native-community/cli-platform-android": "15.0.0-alpha.2",
+    "@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
+    "@react-native/babel-preset": "0.76.0",
+    "@react-native/metro-config": "0.76.0",
+    "@react-native/typescript-config": "0.76.0",
+    "@rnx-kit/jest-preset": "^0.1.17",
+    "metro-config": "^0.81.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "react-native-windows": {
+    "init-windows": {
+      "name": "NativeModuleSampleExampleOld",
+      "namespace": "NativeModuleSampleExampleOld",
+      "template": "old/uwp-cpp-app"
+    }
+  }
+}

samples/NativeModuleSample/cpp-lib/example-old/react-native.config.js

@@ -0,0 +1,10 @@
+const path = require('path');
+const pkg = require('../package.json');
+
+module.exports = {
+  dependencies: {
+    [pkg.name]: {
+      root: path.join(__dirname, '..'),
+    },
+  },
+};