chore: extract Windows example (#2505)

# Summary

While upgrading `./example` app to `[email protected]` I've
encountered conflicts on `@react-native/gradle-plugin` caused by
`[email protected]` depending on
`@react-native/[email protected]`
This PR extracts Windows example to separate `./paper-windows-example`
so it won't conflict with RN updates in the future

.github/workflows/windows-build-test.yml

@@ -6,8 +6,10 @@ on:
       - 'windows/**'
       - 'src/fabric/**'
       - 'package.json'
-      - 'example/windows/**'
-      - 'example/package.json'
+      - 'paper-windows-example/windows/**'
+      - 'paper-windows-example/package.json'
+      - 'fabric-windows-example/windows/**'
+      - 'fabric-windows-example/package.json'
   push:
     branches:
       - main
@@ -17,7 +19,7 @@ jobs:
     runs-on: windows-2022
     strategy:
       matrix:
-        working-directory: [example, fabric-windows-example]
+        working-directory: [paper-windows-example, fabric-windows-example]
     concurrency:
       group: windows-${{ matrix.working-directory }}-${{ github.ref }}
       cancel-in-progress: true

example/package.json

@@ -25,8 +25,7 @@
     "react-native-safe-area-context": "^4.11.0",
     "react-native-screens": "^3.34.0",
     "react-native-svg": "link:../",
-    "react-native-view-shot": "4.0.0-alpha.2",
-    "react-native-windows": "0.74.9"
+    "react-native-view-shot": "4.0.0-alpha.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

paper-windows-example/.gitignore

@@ -0,0 +1,74 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+**/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+**/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

paper-windows-example/.watchmanconfig

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

paper-windows-example/app.json

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

paper-windows-example/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    '@babel/plugin-proposal-export-namespace-from',
+    'module:react-native-dotenv',
+    'react-native-reanimated/plugin',
+  ],
+};

paper-windows-example/index.js

@@ -0,0 +1,9 @@
+/**
+ * @format
+ */
+
+import { AppRegistry } from 'react-native';
+import App from '../apps';
+import { name as appName } from './app.json';
+
+AppRegistry.registerComponent(appName, () => App);

paper-windows-example/jest.config.js

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

paper-windows-example/metro.config.js

@@ -0,0 +1,65 @@
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const path = require('path');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
+const escape = require('escape-string-regexp');
+const pack = require('../package.json');
+
+const root = path.resolve(__dirname, '..');
+const projectNodeModules = path.join(__dirname, 'node_modules');
+
+const fs = require('fs');
+const rnwPath = fs.realpathSync(
+  path.resolve(require.resolve('react-native-windows/package.json'), '..')
+);
+
+const modules = [...Object.keys(pack.peerDependencies), 'react-native-windows'];
+
+const config = {
+  projectRoot: __dirname,
+  watchFolders: [root],
+
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we exclude them at the root, and alias them to the versions in example's node_modules
+  resolver: {
+    blockList: exclusionList(
+      modules.map(
+        (m) =>
+          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
+      ),
+      // This stops "react-native run-windows" from causing the metro server to
+      // crash if its already running
+      new RegExp(
+        `${path.join(__dirname, 'windows').replace(/[/\\]+/g, '/')}.*`
+      ),
+      new RegExp(`${path.join(__dirname, 'macos').replace(/[/\\]+/g, '/')}.*`),
+      // This prevents "react-native 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/
+    ),
+    nodeModulesPaths: [projectNodeModules, path.join(__dirname, '../../')],
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+  },
+
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+      },
+    }),
+    // This fixes the 'missing-asset-registry-path` error (see https://github.com/microsoft/react-native-windows/issues/11437)
+    assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
+  },
+};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);

paper-windows-example/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "PaperWindowsExample",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "lint": "eslint .",
+    "windows": "react-native run-windows",
+    "start": "react-native start",
+    "test": "jest",
+    "tsc": "tsc --noEmit",
+    "postinstall": "patch-package"
+  },
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "0.74.2",
+    "react-native-reanimated": "3.15.4",
+    "react-native-svg": "link:../",
+    "react-native-view-shot": "4.0.0-alpha.2",
+    "react-native-windows": "0.74.9"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
+    "@react-native/babel-preset": "0.74.84",
+    "@react-native/eslint-config": "0.74.84",
+    "@react-native/metro-config": "0.74.84",
+    "@react-native/typescript-config": "0.74.84",
+    "@types/react": "^18.2.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.6.3",
+    "babel-loader": "^9.1.2",
+    "eslint": "^8.19.0",
+    "file-loader": "^6.2.0",
+    "jest": "^29.6.3",
+    "metro-config": "^0.80.9",
+    "patch-package": "^8.0.0",
+    "postinstall-postinstall": "^2.1.0",
+    "prettier": "2.8.8",
+    "react-native-dotenv": "^3.4.11",
+    "react-test-renderer": "18.2.0",
+    "typescript": "5.0.4"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

paper-windows-example/patches/react-native-view-shot+4.0.0-alpha.2.patch

@@ -0,0 +1,51 @@
+diff --git a/node_modules/react-native-view-shot/ios/RNViewShot.m b/node_modules/react-native-view-shot/ios/RNViewShot.m
+index bd55b92..6a20e9d 100644
+--- a/node_modules/react-native-view-shot/ios/RNViewShot.m
++++ b/node_modules/react-native-view-shot/ios/RNViewShot.m
+@@ -106,7 +106,7 @@ - (dispatch_queue_t)methodQueue
+       scrollView.frame = CGRectMake(0, 0, scrollView.contentSize.width, scrollView.contentSize.height);
+     }
+
+-    UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:size];
++    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
+
+     if (renderInContext) {
+       // this comes with some trade-offs such as inability to capture gradients or scrollview's content in full but it works for large views
+@@ -117,8 +117,8 @@ - (dispatch_queue_t)methodQueue
+       // this doesn't work for large views and reports incorrect success even though the image is blank
+       success = [rendered drawViewHierarchyInRect:(CGRect){CGPointZero, size} afterScreenUpdates:YES];
+     }
+-
+-    UIImage *image = [renderer imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) {}];
++    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
++    UIGraphicsEndImageContext();
+
+     if (snapshotContentContainer) {
+       // Restore scroll & frame
+@@ -152,11 +152,11 @@ - (dispatch_queue_t)methodQueue
+       NSString *res = nil;
+       if ([result isEqualToString:@"base64"]) {
+         // Return as a base64 raw string
+-        res = [data base64EncodedStringWithOptions: 0];
++        res = [data base64EncodedStringWithOptions: NSDataBase64EncodingEndLineWithLineFeed];
+       }
+       else if ([result isEqualToString:@"data-uri"]) {
+         // Return as a base64 data uri string
+-        NSString *base64 = [data base64EncodedStringWithOptions: 0];
++        NSString *base64 = [data base64EncodedStringWithOptions: NSDataBase64EncodingEndLineWithLineFeed];
+         NSString *imageFormat = ([format isEqualToString:@"jpg"]) ? @"jpeg" : format;
+         res = [NSString stringWithFormat:@"data:image/%@;base64,%@", imageFormat, base64];
+       }
+diff --git a/node_modules/react-native-view-shot/src/specs/NativeRNViewShot.ts b/node_modules/react-native-view-shot/src/specs/NativeRNViewShot.ts
+index a6f4c00..1e9e6ce 100644
+--- a/node_modules/react-native-view-shot/src/specs/NativeRNViewShot.ts
++++ b/node_modules/react-native-view-shot/src/specs/NativeRNViewShot.ts
+@@ -2,7 +2,7 @@ import type { TurboModule } from 'react-native';
+ import { TurboModuleRegistry } from 'react-native';
+
+ export interface Spec extends TurboModule {
+-  releaseCapture: () => string;
++  releaseCapture: (uri: string) => void;
+   captureRef: (tag: number, options: Object) => Promise<string>
+   captureScreen: (options: Object) => Promise<string>;
+ }