diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 43fa12b9..6d1529cc 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -27,24 +27,16 @@ jobs: call-testcli: name: Test CLI (VS 2022) + needs: setupcheck strategy: fail-fast: false matrix: - rnwVersion: [ 'v0.73-stable', 'v0.72-stable', 'v0.71-stable'] # test *all* versions that use VS 2022. aka any RNW version >= min in package.json and >= 0.71 - useRnwNuGet: [false, true] # test building with both RNW source and RNW NuGet - include: - - rnwVersion: 'v0.73-stable' - rnVersion: '0.73-stable' - - rnwVersion: 'v0.72-stable' - rnVersion: '0.72-stable' - - rnwVersion: 'v0.71-stable' - rnVersion: '0.71-stable' + rnwVersion: ['latest', 'v0.76-stable', 'v0.75-stable', 'v0.72-stable'] # test *key* versions that use VS 2022. aka any RNW version >= 0.72 used by supported partners and/or Active/Maintenance from https://microsoft.github.io/react-native-windows/support uses: ./.github/workflows/template-testcli.yml with: vmImage: windows-2022 rnwVersion: ${{ matrix.rnwVersion }} - useRnwNuGet: ${{ matrix.useRnwNuGet }} - rnVersion: ${{ matrix.rnVersion }} + useRnwWindowsInit: ${{ matrix.rnwVersion == 'v0.72-stable' }} call-buildnpmpackage: name: Build NPM Package diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 42fb4cac..c282e70a 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -9,7 +9,7 @@ jobs: name: Setup Check runs-on: windows-2022 steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: yarn install run: yarn install @@ -42,19 +42,12 @@ jobs: strategy: fail-fast: true matrix: - rnwVersion: ['v0.73-stable', 'v0.72-stable'] # test *key* versions that use VS 2022. aka any RNW version >= 0.71 used by supported partners and/or Active/Maintenance from https://microsoft.github.io/react-native-windows/support - useRnwNuGet: [false, true] # test building with both RNW source and RNW NuGet - include: - - rnwVersion: 'v0.73-stable' - rnVersion: '0.73-stable' - - rnwVersion: 'v0.72-stable' - rnVersion: '0.72-stable' + rnwVersion: ['latest', 'v0.76-stable', 'v0.75-stable', 'v0.72-stable'] # test *key* versions that use VS 2022. aka any RNW version >= 0.72 used by supported partners and/or Active/Maintenance from https://microsoft.github.io/react-native-windows/support uses: ./.github/workflows/template-testcli.yml with: vmImage: windows-2022 rnwVersion: ${{ matrix.rnwVersion }} - useRnwNuGet: ${{ matrix.useRnwNuGet }} - rnVersion: ${{ matrix.rnVersion }} + useRnwWindowsInit: ${{ matrix.rnwVersion == 'v0.72-stable' }} call-buildnpmpackage: name: Build NPM Package @@ -82,4 +75,4 @@ jobs: runs-on: ubuntu-latest needs: [setupcheck, call-runcodegen, call-testcli, call-buildnpmpackage, call-buildrnx] steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index ec9b4a8f..0d6b9af6 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -17,10 +17,10 @@ jobs: needs: call-runcodegen steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Use Node.js - uses: actions/setup-node@v1 + uses: actions/setup-node@v4 with: node-version: 18 registry-url: https://registry.npmjs.org/ @@ -38,7 +38,7 @@ jobs: working-directory: package - name: upload npm logs - uses: actions/upload-artifact@v3 + uses: actions/upload-artifact@v4 with: name: npm-logs path: /home/runner/.npm/_logs diff --git a/.github/workflows/template-buildexample.yml b/.github/workflows/template-buildexample.yml index ed944633..ae01e030 100644 --- a/.github/workflows/template-buildexample.yml +++ b/.github/workflows/template-buildexample.yml @@ -21,7 +21,7 @@ jobs: name: Build ${{ inputs.exampleName }} runs-on: ${{ inputs.vmImage }} steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: yarn install run: yarn install @@ -55,7 +55,7 @@ jobs: working-directory: ${{ inputs.exampleName }} - name: Upload appx - uses: actions/upload-artifact@v3 + uses: actions/upload-artifact@v4 with: name: ${{ inputs.exampleName }} appx path: ${{ inputs.exampleName }}\windows\AppPackages\${{ inputs.exampleName }}\${{ inputs.exampleName }}_1.0.0.0_x64_Debug_Test diff --git a/.github/workflows/template-buildnpmpackage.yml b/.github/workflows/template-buildnpmpackage.yml index fad8a09a..94d66cd2 100644 --- a/.github/workflows/template-buildnpmpackage.yml +++ b/.github/workflows/template-buildnpmpackage.yml @@ -13,7 +13,7 @@ jobs: name: Build NPM Package runs-on: ${{ inputs.vmImage }} steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: yarn install run: yarn install @@ -26,7 +26,7 @@ jobs: working-directory: package - name: Upload npm package - uses: actions/upload-artifact@v3 + uses: actions/upload-artifact@v4 with: name: RNX npm package path: package\*.tgz diff --git a/.github/workflows/template-buildrnx.yml b/.github/workflows/template-buildrnx.yml index c9850fb4..184eb289 100644 --- a/.github/workflows/template-buildrnx.yml +++ b/.github/workflows/template-buildrnx.yml @@ -21,10 +21,10 @@ jobs: name: Build RNX ${{ inputs.configuration }} ${{ inputs.platform }} runs-on: ${{ inputs.vmImage }} steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: setup-msbuild - uses: microsoft/setup-msbuild@v1 + uses: microsoft/setup-msbuild@v2 - name: yarn install run: yarn install @@ -33,21 +33,11 @@ jobs: run: yarn build - name: build ReactNativeXaml.sln - run: msbuild /restore /p:RestorePackagesConfig=true package\windows\ReactNativeXaml.sln /p:configuration=${{ inputs.configuration }} /p:platform=${{ inputs.platform }} + run: msbuild /restore /p:RestoreLockedMode=true /p:RestorePackagesConfig=true package\windows\ReactNativeXaml.sln /p:configuration=${{ inputs.configuration }} /p:platform=${{ inputs.platform }} - name: Upload build output - uses: actions/upload-artifact@v3 + uses: actions/upload-artifact@v4 with: name: RNX ${{ inputs.configuration }} ${{ inputs.platform }} Build Output path: package\windows\${{ inputs.platform }}\${{ inputs.configuration }}\ReactNativeXaml\*.* if-no-files-found: error - - - if: ${{ inputs.configuration == 'Release' && inputs.platform == 'x64' }} - name: Validate size (Release x64 only) - shell: powershell - run: | - $size = (gci package\windows\x64\Release\ReactNativeXaml\ReactNativeXaml.dll).Length - $size - if ($size -gt 1.5MB) { - throw "DLL is bigger than 1.5MB" - } diff --git a/.github/workflows/template-runcodegen.yml b/.github/workflows/template-runcodegen.yml index b44252a9..14947611 100644 --- a/.github/workflows/template-runcodegen.yml +++ b/.github/workflows/template-runcodegen.yml @@ -18,7 +18,7 @@ jobs: git config --global core.autocrlf false git config --global core.filemode false - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: yarn install run: yarn install @@ -26,7 +26,7 @@ jobs: - uses: nuget/setup-nuget@v1 - name: NuGet restore - run: nuget restore package\windows\ReactNativeXaml.sln + run: nuget restore -LockedMode package\windows\ReactNativeXaml.sln - name: run CodeGen run: yarn codegen diff --git a/.github/workflows/template-testcli.yml b/.github/workflows/template-testcli.yml index 7a7e3b7a..c84062f5 100644 --- a/.github/workflows/template-testcli.yml +++ b/.github/workflows/template-testcli.yml @@ -11,21 +11,17 @@ on: required: false default: 'latest' type: string - useRnwNuGet: + useRnwWindowsInit: required: false default: false type: boolean - rnVersion: - required: false - default: 'latest' - type: string jobs: testcli: - name: New RNW@${{ inputs.rnwVersion }} App from ${{ inputs.useRnwNuGet && 'NuGet' || 'Source' }} + name: New RNW@${{ inputs.rnwVersion }} App runs-on: ${{ inputs.vmImage }} steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: yarn install run: yarn install @@ -37,24 +33,47 @@ jobs: run: yarn link working-directory: package - - name: create react-native@${{ inputs.rnVersion }} app - run: npx @react-native-community/cli init testrnx --version ${{ inputs.rnVersion }} --skip-install --install-pods false --verbose --skip-git-init true + - name: determine RN versions + run: | + $rnwVersion = & npm show react-native-windows@${{ inputs.rnwVersion }} version + echo "RNW_VERSION=$rnwVersion" | Out-File -FilePath $Env:GITHUB_ENV -Encoding utf8 -Append + $rnVersion = & npm show react-native-windows@$rnwVersion peerDependencies.react-native + echo "RN_VERSION=$rnVersion" | Out-File -FilePath $Env:GITHUB_ENV -Encoding utf8 -Append + Write-Host "Using react-native-windows@$rnwVersion with react-native@$rnVersion" + + - name: create react-native app + run: | + Write-Host "Using react-native@$Env:RN_VERSION" + npx @react-native-community/cli init testrnx --version $Env:RN_VERSION --skip-install --install-pods false --verbose --skip-git-init true working-directory: ../ - name: yarn install run: yarn install working-directory: ../testrnx - - name: add Windows (RNW via ${{ inputs.useRnwNuGet && 'NuGet' || 'Source' }}) - run: npx react-native-windows-init --overwrite ${{ inputs.useRnwNuGet && '--experimentalNuGetDependency true' || '' }} + - name: react-native-windows-init + if: ${{ inputs.useRnwWindowsInit }} + run: | + Write-Host "Using react-native-windows@$Env:RNW_VERSION" + npx --yes react-native-windows-init --overwrite --verbose --version $Env:RNW_VERSION + yarn install working-directory: ../testrnx - - name: link react-native-xaml - run: yarn link react-native-xaml + - name: react-native init-windows + if: ${{ !inputs.useRnwWindowsInit }} + run: | + Write-Host "Using react-native-windows@$Env:RNW_VERSION" + yarn add react-native-windows@$Env:RNW_VERSION + yarn install + npx @react-native-community/cli@latest init-windows --overwrite --logging + yarn install working-directory: ../testrnx - name: add react-native-xaml - run: yarn add react-native-xaml + run: | + yarn add react-native-xaml + yarn link react-native-xaml + yarn install working-directory: ../testrnx - name: autolink @@ -64,7 +83,3 @@ jobs: - name: build app run: npx @react-native-community/cli run-windows --no-launch --no-deploy --no-packager --logging working-directory: ../testrnx - - - name: test app - run: yarn test - working-directory: ../testrnx diff --git a/change/react-native-xaml-ae47b51e-39d3-4b8b-8816-3a2b003ce391.json b/change/react-native-xaml-ae47b51e-39d3-4b8b-8816-3a2b003ce391.json new file mode 100644 index 00000000..e4496356 --- /dev/null +++ b/change/react-native-xaml-ae47b51e-39d3-4b8b-8816-3a2b003ce391.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Upgrade RNX to target RNW 0.77", + "packageName": "react-native-xaml", + "email": "jthysell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/example/metro.config.js b/example/metro.config.js index da105bf0..dfacc45e 100644 --- a/example/metro.config.js +++ b/example/metro.config.js @@ -1,13 +1,14 @@ -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); +const MetroConfig = require('@rnx-kit/metro-config'); const fs = require('fs'); const path = require('path'); -const exclusionList = require('metro-config/src/defaults/exclusionList'); const rnwPath = fs.realpathSync( path.resolve(require.resolve('react-native-windows/package.json'), '..'), ); +// + /** * Metro configuration * https://facebook.github.io/metro/docs/configuration @@ -16,22 +17,19 @@ const rnwPath = fs.realpathSync( */ const config = { + // resolver: { - blockList: exclusionList([ - // This stops "react-native run-windows" from causing the metro server to crash if its already running + blockList: MetroConfig.exclusionList([ + // 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 "react-native run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild + // 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: { - 'react-native-xaml': fs.realpathSync( - path.dirname(require.resolve('react-native-xaml/package.json')), - ), - }, + // }, transformer: { getTransformOptions: async () => ({ @@ -40,9 +38,8 @@ const config = { inlineRequires: true, }, }), - // This fixes the 'missing-asset-registry-path` error (see https://github.com/microsoft/react-native-windows/issues/11437) - assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry', }, + projectRoot: __dirname, }; -module.exports = mergeConfig(getDefaultConfig(__dirname), config); \ No newline at end of file +module.exports = MetroConfig.makeMetroConfig(config); diff --git a/example/package.json b/example/package.json index 60728530..f3d5dc2b 100644 --- a/example/package.json +++ b/example/package.json @@ -6,31 +6,35 @@ "lint": "eslint .", "start": "react-native start", "test": "jest", - "windows": "react-native run-windows" + "windows": "npx @react-native-community/cli run-windows" }, "dependencies": { - "react": "18.2.0", - "react-native": "0.73.11", - "react-native-windows": "0.73.21", + "react": "18.3.1", + "react-native": "0.77.0", + "react-native-windows": "0.77.2", "react-native-xaml": "*" }, "devDependencies": { - "@babel/core": "^7.20.0", - "@babel/preset-env": "^7.20.0", - "@babel/runtime": "^7.20.0", - "@react-native/babel-preset": "^0.73.21", - "@react-native/eslint-config": "^0.73.2", - "@react-native/metro-config": "^0.73.5", - "@react-native/typescript-config": "^0.73.1", + "@babel/core": "^7.25.2", + "@babel/preset-env": "^7.25.3", + "@babel/runtime": "^7.25.0", + "@react-native-community/cli": "15.0.1", + "@react-native-community/cli-platform-android": "15.0.1", + "@react-native-community/cli-platform-ios": "15.0.1", + "@react-native/babel-preset": "0.77.0", + "@react-native/eslint-config": "0.77.0", + "@react-native/metro-config": "0.77.0", + "@react-native/typescript-config": "0.77.0", + "@rnx-kit/metro-config": "^1.3.5", + "@types/jest": "^29.5.13", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", - "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", - "react-test-renderer": "18.2.0", + "react-test-renderer": "18.3.1", "typescript": "5.0.4", - "metro-config": "^0.80.2" + "metro-config": "^0.81.1" }, "engines": { "node": ">=18" diff --git a/example/windows/ExperimentalFeatures.props b/example/windows/ExperimentalFeatures.props index e0afadec..b0384433 100644 --- a/example/windows/ExperimentalFeatures.props +++ b/example/windows/ExperimentalFeatures.props @@ -33,9 +33,6 @@ --> false - - npx @react-native-community/cli codegen-windows - true diff --git a/example/windows/example/App.cpp b/example/windows/example/App.cpp index 826f1160..2a0403b4 100644 --- a/example/windows/example/App.cpp +++ b/example/windows/example/App.cpp @@ -22,17 +22,17 @@ App::App() noexcept { #if BUNDLE JavaScriptBundleFile(L"index.windows"); - InstanceSettings().UseWebDebugger(false); InstanceSettings().UseFastRefresh(false); #else JavaScriptBundleFile(L"index"); - InstanceSettings().UseWebDebugger(true); InstanceSettings().UseFastRefresh(true); #endif #if _DEBUG + InstanceSettings().UseDirectDebugger(true); InstanceSettings().UseDeveloperSupport(true); #else + InstanceSettings().UseDirectDebugger(false); InstanceSettings().UseDeveloperSupport(false); #endif diff --git a/example/windows/example/AutolinkedNativeModules.g.cpp b/example/windows/example/AutolinkedNativeModules.g.cpp index 9be35450..f3141bc6 100644 --- a/example/windows/example/AutolinkedNativeModules.g.cpp +++ b/example/windows/example/AutolinkedNativeModules.g.cpp @@ -1,4 +1,4 @@ -// AutolinkedNativeModules.g.cpp contents generated by "react-native autolink-windows" +// AutolinkedNativeModules.g.cpp contents generated by "npx @react-native-community/cli autolink-windows" // clang-format off #include "pch.h" #include "AutolinkedNativeModules.g.h" diff --git a/example/windows/example/AutolinkedNativeModules.g.h b/example/windows/example/AutolinkedNativeModules.g.h index f28bb8be..a3da81dd 100644 --- a/example/windows/example/AutolinkedNativeModules.g.h +++ b/example/windows/example/AutolinkedNativeModules.g.h @@ -1,4 +1,4 @@ -// AutolinkedNativeModules.g.h contents generated by "react-native autolink-windows" +// AutolinkedNativeModules.g.h contents generated by "npx @react-native-community/cli autolink-windows" // clang-format off #pragma once diff --git a/example/windows/example/AutolinkedNativeModules.g.props b/example/windows/example/AutolinkedNativeModules.g.props index aba33fd9..0dd8b33c 100644 --- a/example/windows/example/AutolinkedNativeModules.g.props +++ b/example/windows/example/AutolinkedNativeModules.g.props @@ -1,6 +1,6 @@ - + diff --git a/example/windows/example/AutolinkedNativeModules.g.targets b/example/windows/example/AutolinkedNativeModules.g.targets index 3dc5639a..9d04682d 100644 --- a/example/windows/example/AutolinkedNativeModules.g.targets +++ b/example/windows/example/AutolinkedNativeModules.g.targets @@ -1,6 +1,6 @@ - + diff --git a/example/windows/example/packages.lock.json b/example/windows/example/packages.lock.json index 6e859593..98d5779e 100644 --- a/example/windows/example/packages.lock.json +++ b/example/windows/example/packages.lock.json @@ -4,9 +4,9 @@ "native,Version=v0.0": { "Microsoft.JavaScript.Hermes": { "type": "Direct", - "requested": "[0.1.27, )", - "resolved": "0.1.27", - "contentHash": "o4YBxD3yVaDfB7ccauyIIcUL3Q+k2C7dv3F9ODkMzUIL/lZBe44BiB2qdw/jchBD3ByUaC/kK3Lm/SW59V1A/w==" + "requested": "[0.1.23, )", + "resolved": "0.1.23", + "contentHash": "cA9t1GjY4Yo0JD1AfA//e1lOwk48hLANfuX6GXrikmEBNZVr2TIX5ONJt5tqCnpZyLz6xGiPDgTfFNKbSfb21g==" }, "Microsoft.UI.Xaml": { "type": "Direct", @@ -19,9 +19,9 @@ }, "Microsoft.Windows.CppWinRT": { "type": "Direct", - "requested": "[2.0.211028.7, )", - "resolved": "2.0.211028.7", - "contentHash": "JBGI0c3WLoU6aYJRy9Qo0MLDQfObEp+d4nrhR95iyzf7+HOgjRunHDp/6eGFREd7xq3OI1mll9ecJrMfzBvlyg==" + "requested": "[2.0.230706.1, )", + "resolved": "2.0.230706.1", + "contentHash": "l0D7oCw/5X+xIKHqZTi62TtV+1qeSz7KVluNFdrJ9hXsst4ghvqQ/Yhura7JqRdZWBXAuDS0G0KwALptdoxweQ==" }, "boost": { "type": "Transitive", @@ -59,7 +59,7 @@ "dependencies": { "Common": "[1.0.0, )", "Folly": "[1.0.0, )", - "Microsoft.JavaScript.Hermes": "[0.1.27, )", + "Microsoft.JavaScript.Hermes": "[0.1.23, )", "Microsoft.UI.Xaml": "[2.8.0, )", "ReactCommon": "[1.0.0, )", "boost": "[1.83.0, )" diff --git a/examplenuget/App.tsx b/examplenuget/App.tsx index c2886fd0..851b8cba 100644 --- a/examplenuget/App.tsx +++ b/examplenuget/App.tsx @@ -6,11 +6,11 @@ * @flow strict-local */ -import React, {useRef} from 'react'; +import React from 'react'; import type {PropsWithChildren} from 'react'; +import {useState} from 'react'; import { - findNodeHandle, SafeAreaView, ScrollView, StatusBar, @@ -20,19 +20,6 @@ import { View, } from 'react-native'; -import { - TextBox, - MenuFlyout, - MenuFlyoutItem, - TextBlock, - WinUI, - MediaPlayerElement, - Button, - ContentDialogState, - ContentDialog, - ContentDialogButton, - ContentDialogResult, -} from 'react-native-xaml'; import { Colors, DebugInstructions, @@ -41,6 +28,39 @@ import { ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; +import { + HyperlinkButton, + Border, + TextBlock, + StackPanel, + Button, + ComboBox, + ComboBoxItem, + NativeXamlControl, + MenuFlyoutItem, + TextBox, + // BlankUserControl, + ClickMode, + MenuFlyout, + RichTextBlock, + Run, + Italic, + LineBreak, + Hyperlink, + NavigationView, + NavigationViewItem, + NavigationViewItemHeader, + FontIcon, + WinUI, + HorizontalAlignment, + Visibility, + WinUIEnums, + SplitView, + SplitViewPriority, + SplitViewPanePlacement, + Grid, +} from 'react-native-xaml'; + type SectionProps = PropsWithChildren<{ title: string; }>; @@ -69,7 +89,7 @@ function Section({children, title}: SectionProps): JSX.Element { ); -}; +} function App(): JSX.Element { const isDarkMode = useColorScheme() === 'dark'; @@ -78,43 +98,153 @@ function App(): JSX.Element { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; - const menu = useRef(null); - const _tbRef = React.useRef(null); - const _mpRef = React.useRef(null); - const [x, setX] = React.useState("100"); - - const [showState, setShowState] = React.useState(ContentDialogState.Hidden); - - + const [count, setCount] = useState(0); + const [isOpen, setIsOpen] = useState(false); + const [option, setOption] = useState(''); + const [visible, setVisible] = useState(Visibility.Visible); return ( -
+ + { + setVisible(Visibility.Collapsed); + }} + severity={WinUIEnums.InfoBarSeverity.Success} + horizontalAlignment={HorizontalAlignment.Center} + /> + + + Welcome to React Native XAML + + + { + setIsOpen(false); + }} + width={800} + height={300} + paneBackground="red" + panePlacement={SplitViewPanePlacement.Left}> + + + + + + - { - if (e.nativeEvent.args) { - setX(e.nativeEvent.args.newText); - } +