From 813ba195184977425b27e83156d36d1f152dab17 Mon Sep 17 00:00:00 2001 From: Jon Thysell Date: Tue, 18 Jun 2024 12:16:59 -0700 Subject: [PATCH] Enable devMode with react-native init-windows old/* templates (#13362) ## Description The `init-windows` CLI command can be used to create apps with the old arch templates, but "devMode" (i.e. using your local, linked RNW repo instead of the package from NPM) didn't work. This PR fixes that functionality so `init-windows` can become the new method. ### Type of Change - Bug fix (non-breaking change which fixes an issue) ### Why We want `init-windows` to be the default method for creating new RNW projects, but it still needs to support the old templates for now, and this was the last "missing" feature. ### What Switched the old templates to using the same `metro.config.js` file that the new templates use (with devMode template variable) and also piping through the correct value for that variable. ## Screenshots N/A ## Testing Verified I could create a new (old) app locally with linked RNW and it recognized and implemented devMode correctly, so that the app could launch. ## Changelog Should this change be included in the release notes: yes Enabled detecting devMode with `react-native init-window`s and the old/* templates --- ...-71dd315f-09df-4544-b24b-bbd0176c4069.json | 7 +++ ...-a6820d65-30e4-4680-9f68-0647449a79ba.json | 7 +++ .../cli/src/generator-windows/index.ts | 9 +-- vnext/template/metro.config.js | 15 ++++- vnext/template/metro.devMode.config.js | 56 ------------------- vnext/templates/old/generateWrapper.js | 5 +- 6 files changed, 34 insertions(+), 65 deletions(-) create mode 100644 change/@react-native-windows-cli-71dd315f-09df-4544-b24b-bbd0176c4069.json create mode 100644 change/react-native-windows-a6820d65-30e4-4680-9f68-0647449a79ba.json delete mode 100644 vnext/template/metro.devMode.config.js diff --git a/change/@react-native-windows-cli-71dd315f-09df-4544-b24b-bbd0176c4069.json b/change/@react-native-windows-cli-71dd315f-09df-4544-b24b-bbd0176c4069.json new file mode 100644 index 00000000000..a67d7095e77 --- /dev/null +++ b/change/@react-native-windows-cli-71dd315f-09df-4544-b24b-bbd0176c4069.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Enable devMode with react-native init-windows old/* templates", + "packageName": "@react-native-windows/cli", + "email": "jthysell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/react-native-windows-a6820d65-30e4-4680-9f68-0647449a79ba.json b/change/react-native-windows-a6820d65-30e4-4680-9f68-0647449a79ba.json new file mode 100644 index 00000000000..b046eaa0fbe --- /dev/null +++ b/change/react-native-windows-a6820d65-30e4-4680-9f68-0647449a79ba.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Enable devMode with react-native init-windows old/* templates", + "packageName": "react-native-windows", + "email": "jthysell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/@react-native-windows/cli/src/generator-windows/index.ts b/packages/@react-native-windows/cli/src/generator-windows/index.ts index 8f8214e1b28..c0e2ac8751b 100644 --- a/packages/@react-native-windows/cli/src/generator-windows/index.ts +++ b/packages/@react-native-windows/cli/src/generator-windows/index.ts @@ -203,6 +203,8 @@ export async function copyProjectTemplateAndReplace( packageGuid: packageGuid, currentUser: currentUser, + devMode: options.useDevMode, + useExperimentalNuget: options.experimentalNuGetDependency, nuGetTestFeed: options.nuGetTestFeed, nuGetADOFeed: nugetVersion.startsWith('0.0.0-'), @@ -230,12 +232,7 @@ export async function copyProjectTemplateAndReplace( ? [ // app common mappings { - from: path.join( - srcRootPath, - options.useDevMode - ? 'metro.devMode.config.js' - : 'metro.config.js', - ), + from: path.join(srcRootPath, 'metro.config.js'), to: 'metro.config.js', }, { diff --git a/vnext/template/metro.config.js b/vnext/template/metro.config.js index 155cc81b72e..686d4a9eda7 100644 --- a/vnext/template/metro.config.js +++ b/vnext/template/metro.config.js @@ -8,6 +8,11 @@ const rnwPath = fs.realpathSync( path.resolve(require.resolve('react-native-windows/package.json'), '..'), ); +//{{#devMode}} [devMode +const rnwRootNodeModules = path.resolve(rnwPath, '..', 'node_modules'); +const rnwPackages = path.resolve(rnwPath, '..', 'packages'); +// devMode]{{/devMode}} + /** * Metro configuration * https://facebook.github.io/metro/docs/configuration @@ -16,6 +21,9 @@ const rnwPath = fs.realpathSync( */ const config = { + //{{#devMode}} [devMode + watchFolders: [rnwPath, rnwRootNodeModules, rnwPackages], + // devMode]{{/devMode}} resolver: { blockList: exclusionList([ // This stops "react-native run-windows" from causing the metro server to crash if its already running @@ -27,6 +35,11 @@ const config = { new RegExp(`${rnwPath}/target/.*`), /.*\.ProjectImports\.zip/, ]), + //{{#devMode}} [devMode + extraNodeModules: { + 'react-native-windows': rnwPath, + }, + // devMode]{{/devMode}} }, transformer: { getTransformOptions: async () => ({ @@ -35,8 +48,6 @@ 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', }, }; diff --git a/vnext/template/metro.devMode.config.js b/vnext/template/metro.devMode.config.js deleted file mode 100644 index 903bb117085..00000000000 --- a/vnext/template/metro.devMode.config.js +++ /dev/null @@ -1,56 +0,0 @@ -const {getDefaultConfig, mergeConfig} = require('@react-native/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'), '..'), -); - -// [devMode -const rnwRootNodeModules = path.resolve(rnwPath, '..', 'node_modules'); -const rnwPackages = path.resolve(rnwPath, '..', 'packages'); -// devMode] - -/** - * Metro configuration - * https://facebook.github.io/metro/docs/configuration - * - * @type {import('metro-config').MetroConfig} - */ - -const config = { - // [devMode - watchFolders: [rnwPath, rnwRootNodeModules, rnwPackages], - // devMode] - resolver: { - blockList: exclusionList([ - // This stops "react-native 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 - new RegExp(`${rnwPath}/build/.*`), - new RegExp(`${rnwPath}/target/.*`), - /.*\.ProjectImports\.zip/, - ]), - // [devMode - extraNodeModules: { - 'react-native-windows': rnwPath, - }, - // devMode] - }, - transformer: { - getTransformOptions: async () => ({ - transform: { - experimentalImportSupport: false, - 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', - }, -}; - -module.exports = mergeConfig(getDefaultConfig(__dirname), config); diff --git a/vnext/templates/old/generateWrapper.js b/vnext/templates/old/generateWrapper.js index 8772289f094..9b9e8d7184a 100644 --- a/vnext/templates/old/generateWrapper.js +++ b/vnext/templates/old/generateWrapper.js @@ -7,6 +7,7 @@ */ const generateWindows = require('../../generate'); +const templateUtils = require('../templateUtils'); function makeGenerateWindowsWrapper( language = 'cpp', @@ -33,6 +34,8 @@ function makeGenerateWindowsWrapper( const postInstall = async (config = {}, options = {}) => { const experimentalFeatures = config?.project?.windows?.experimentalFeatures; + const rnwInfo = templateUtils.getRnwInfo(config, options); + const generateOptions = { overwrite: !!options.overwrite, language, @@ -41,7 +44,7 @@ function makeGenerateWindowsWrapper( experimentalFeatures?.UseExperimentalNuget ?? false, useWinUI3: experimentalFeatures?.UseWinUI3 ?? false, useHermes: experimentalFeatures?.UseHermes ?? true, - useDevMode: false, + useDevMode: rnwInfo.devMode, verbose: !!options.logging, telemetry: !!options.telemetry, };