Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[@react-native/community-cli-plugin] Added inference of watchFolders from NPM, Yarn and PNPM workspaces #41967

Draft
wants to merge 20 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
f0c1c39
Added inference of watchFolders from NPM/Yarn workspaces
kraenhansen Dec 17, 2023
5f08c43
Adding flow types
kraenhansen Dec 18, 2023
e18e31f
Apply suggestions from code review
kraenhansen Dec 27, 2023
626625c
Using micromatch and removed accessSync guard
kraenhansen Dec 27, 2023
4afbf76
Adding tests
kraenhansen Dec 27, 2023
f27979c
Fixed flow type
kraenhansen Dec 27, 2023
395b2d9
Moved code to the cli-plugin package
kraenhansen Dec 28, 2023
6c91b22
Using getWorkspaceRoot to supply watchFolders as a fallback
kraenhansen Dec 28, 2023
e4b8f9b
Provide the watchFolders override property only if project had no wat…
kraenhansen Dec 28, 2023
9f93c7b
Appending workspace root as watch folder only if not other folder tha…
kraenhansen Dec 28, 2023
43594bd
Adding support for an alternative way for Yarn to declare workspaces
kraenhansen Dec 29, 2023
8a734bf
Adding support for PNPM workspaces
kraenhansen Dec 29, 2023
2059ac2
Apply suggestions from code review
kraenhansen Jan 2, 2024
eca58a6
Turned test file to flow
kraenhansen Jan 2, 2024
257a412
Apply more suggestions from code review
kraenhansen Jan 2, 2024
60b6a83
Using more flow without comments
kraenhansen Jan 2, 2024
d63b235
Implemented a failing test
kraenhansen Feb 1, 2024
55fb330
Updated @react-native/metro-config return MetroConfig instead of Conf…
kraenhansen Feb 1, 2024
ab7816e
Provide a default "undefined" override for watchFolders
kraenhansen Feb 1, 2024
7fd9661
Infer workspace root only if watchFolders are not explicitly specified
kraenhansen Feb 1, 2024
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
4 changes: 3 additions & 1 deletion packages/community-cli-plugin/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,11 @@
"metro": "^0.80.3",
"metro-config": "^0.80.3",
"metro-core": "^0.80.3",
"micromatch": "^4.0.5",
"node-fetch": "^2.2.0",
"querystring": "^0.2.1",
"readline": "^1.3.0"
"readline": "^1.3.0",
"yaml": "^2.3.4"
},
"devDependencies": {
"metro-resolver": "^0.80.3"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
* @oncall react_native
*/

import {getWorkspaceRoot} from '../getWorkspaceRoot';
import {createTempPackage} from './temporary-package';
import fs from 'fs';
import path from 'path';

describe('getWorkspaceRoot', () => {
test('returns null if not in a workspace', () => {
const tempPackagePath = createTempPackage({
name: 'my-app',
});
expect(getWorkspaceRoot(tempPackagePath)).toBe(null);
});

test('supports an npm workspace', () => {
const tempWorkspaceRootPath = createTempPackage({
name: 'package-root',
workspaces: ['packages/my-app', 'packages/my-lib'],
});
const tempPackagePath = createTempPackage(
{
name: 'my-app',
},
path.join(tempWorkspaceRootPath, 'packages', 'my-app'),
);
expect(getWorkspaceRoot(tempPackagePath)).toBe(tempWorkspaceRootPath);
});

test('supports a yarn workspace', () => {
const tempWorkspaceRootPath = createTempPackage({
name: 'package-root',
workspaces: ['packages/*'],
});
const tempPackagePath = createTempPackage(
{
name: 'my-app',
},
path.join(tempWorkspaceRootPath, 'packages', 'my-app'),
);
expect(getWorkspaceRoot(tempPackagePath)).toBe(tempWorkspaceRootPath);
});

test('supports a yarn workspace (object style)', () => {
const tempWorkspaceRootPath = createTempPackage({
name: 'package-root',
workspaces: {
packages: ['packages/*'],
},
});
const tempPackagePath = createTempPackage(
{
name: 'my-app',
},
path.join(tempWorkspaceRootPath, 'packages', 'my-app'),
);
expect(getWorkspaceRoot(tempPackagePath)).toBe(tempWorkspaceRootPath);
});

test('supports a pnpm workspace', () => {
const tempWorkspaceRootPath = createTempPackage({
name: 'package-root',
});
// Create the pnpm workspace configuration (see https://pnpm.io/pnpm-workspace_yaml)
const workspacesConfig = 'packages: ["packages/*"]';
fs.writeFileSync(
path.join(tempWorkspaceRootPath, 'pnpm-workspace.yaml'),
workspacesConfig,
'utf8',
);
const tempPackagePath = createTempPackage(
{
name: 'my-app',
},
path.join(tempWorkspaceRootPath, 'packages', 'my-app'),
);
expect(getWorkspaceRoot(tempPackagePath)).toBe(tempWorkspaceRootPath);
});

test('supports a pnpm workspace exclusion', () => {
const tempWorkspaceRootPath = createTempPackage({
name: 'package-root',
});
// Create the pnpm workspace configuration (see https://pnpm.io/pnpm-workspace_yaml)
const workspacesConfig = 'packages: ["packages/*", "!packages/*-app"]';
fs.writeFileSync(
path.join(tempWorkspaceRootPath, 'pnpm-workspace.yaml'),
workspacesConfig,
'utf8',
);
const tempPackagePath = createTempPackage(
{
name: 'my-app',
},
path.join(tempWorkspaceRootPath, 'packages', 'my-app'),
);
expect(getWorkspaceRoot(tempPackagePath)).toBe(null);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
* @oncall react_native
*/

import loadMetroConfig from '../loadMetroConfig';
import {createTempPackage} from './temporary-package';
import fs from 'fs';
import path from 'path';

/**
* Resolves a package by its name and creates a symbolic link in a node_modules directory
*/
function createPackageLink(nodeModulesPath: string, packageName: string) {
// Resolve the packages path on disk
const destinationPath = path.dirname(require.resolve(packageName));
const packageScope = packageName.includes('/')
? packageName.split('/')[0]
: undefined;

// Create a parent directory for a @scoped package
if (typeof packageScope === 'string') {
fs.mkdirSync(path.join(nodeModulesPath, packageScope));
}

const sourcePath = path.join(nodeModulesPath, packageName);
fs.symlinkSync(destinationPath, sourcePath);
}

function createTempConfig(projectRoot: string, metroConfig: {...}) {
const content = `
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const config = ${JSON.stringify(metroConfig)};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);
`;
const configPath = path.join(projectRoot, 'metro.config.js');
fs.writeFileSync(configPath, content, 'utf8');

const nodeModulesPath = path.join(projectRoot, 'node_modules');
fs.mkdirSync(nodeModulesPath);
// Create a symbolic link to the '@react-native/metro-config' package used by the config
createPackageLink(nodeModulesPath, '@react-native/metro-config');
}

const configLoadingContext = {
reactNativePath: path.dirname(require.resolve('react-native/package.json')),
platforms: {
ios: {npmPackageName: 'temp-package'},
android: {npmPackageName: 'temp-package'},
},
};

describe('loadMetroConfig', () => {
test('loads an empty config', async () => {
const rootPath = createTempPackage({name: 'temp-app'});
createTempConfig(rootPath, {});

const loadedConfig = await loadMetroConfig({
root: rootPath,
...configLoadingContext,
});
expect(loadedConfig.projectRoot).toEqual(rootPath);
expect(loadedConfig.watchFolders).toEqual([rootPath]);
});

test('loads watch folders', async () => {
const rootPath = createTempPackage({
name: 'temp-app',
});
createTempConfig(rootPath, {
watchFolders: ['somewhere-else'],
});

const loadedConfig = await loadMetroConfig({
root: rootPath,
...configLoadingContext,
});
expect(loadedConfig.projectRoot).toEqual(rootPath);
expect(loadedConfig.watchFolders).toEqual([rootPath, 'somewhere-else']);
});

test('includes an npm workspace root if no watchFolders are defined', async () => {
const rootPath = createTempPackage({
name: 'temp-root',
workspaces: ['packages/temp-app'],
});
// Create a config inside a sub-package
const projectRoot = createTempPackage(
{
name: 'temp-app',
},
path.join(rootPath, 'packages', 'temp-app'),
);
createTempConfig(projectRoot, {});

const loadedConfig = await loadMetroConfig({
root: projectRoot,
...configLoadingContext,
});
expect(loadedConfig.projectRoot).toEqual(projectRoot);
expect(loadedConfig.watchFolders).toEqual([projectRoot, rootPath]);
});

test('does not resolve an npm workspace root if watchFolders are defined', async () => {
const rootPath = createTempPackage({
name: 'temp-root',
workspaces: ['packages/temp-app'],
});
// Create a config inside a sub-package
const projectRoot = createTempPackage(
{
name: 'temp-app',
},
path.join(rootPath, 'packages', 'temp-app'),
);
createTempConfig(projectRoot, {
watchFolders: [],
});

const loadedConfig = await loadMetroConfig({
root: projectRoot,
...configLoadingContext,
});
expect(loadedConfig.projectRoot).toEqual(projectRoot);
expect(loadedConfig.watchFolders).toEqual([projectRoot]);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
* @oncall react_native
*/

import fs from 'fs';
import os from 'os';
import path from 'path';

export function createTempPackage(
packageJson: {...},
packagePath: string = fs.mkdtempSync(
path.join(os.tmpdir(), 'rn-metro-config-test-'),
),
): string {
fs.mkdirSync(packagePath, {recursive: true});
if (typeof packageJson === 'object') {
fs.writeFileSync(
path.join(packagePath, 'package.json'),
JSON.stringify(packageJson),
'utf8',
);
}

// Wrapping path in realpath to resolve any symlinks introduced by mkdtemp
return fs.realpathSync(packagePath);
}
86 changes: 86 additions & 0 deletions packages/community-cli-plugin/src/utils/getWorkspaceRoot.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
* @format
* @oncall react_native
*/

import {logger} from '@react-native-community/cli-tools';
import fs from 'fs';
import micromatch from 'micromatch';
import path from 'path';
import yaml from 'yaml';

/**
* Get the workspace paths from the path of a potential workspace root.
*
* This supports:
* - [npm workspaces](https://docs.npmjs.com/cli/v10/using-npm/workspaces)
* - [yarn workspaces](https://yarnpkg.com/features/workspaces)
* - [pnpm workspaces](https://pnpm.io/workspaces)
*/
function getWorkspacePaths(packagePath: string): Array<string> {
try {
// Checking pnpm workspaces first
const pnpmWorkspacePath = path.resolve(packagePath, 'pnpm-workspace.yaml');
if (fs.existsSync(pnpmWorkspacePath)) {
const pnpmWorkspaceConfig = yaml.parse(
fs.readFileSync(pnpmWorkspacePath, 'utf8'),
);
if (
typeof pnpmWorkspaceConfig === 'object' &&
Array.isArray(pnpmWorkspaceConfig.packages)
) {
return pnpmWorkspaceConfig.packages;
}
}
// Falling back to npm / yarn workspaces
const packageJsonPath = path.resolve(packagePath, 'package.json');
const {workspaces} = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
if (Array.isArray(workspaces)) {
return workspaces;
} else if (
typeof workspaces === 'object' &&
Array.isArray(workspaces.packages)
) {
// An alternative way for yarn to declare workspace packages
return workspaces.packages;
}
} catch (err) {
if (err.code !== 'ENOENT') {
logger.debug(`Failed getting workspace root from ${packagePath}: ${err}`);
}
}
return [];
}

/**
* Resolves the root of an npm or yarn workspace, by traversing the file tree
* upwards from a `candidatePath` in the search for
* - a directory with a package.json
* - which has a `workspaces` array of strings
* - which (possibly via a glob) includes the project root
*/
export function getWorkspaceRoot(
projectRoot: string,
candidatePath: string = projectRoot,
): ?string {
const workspacePaths = getWorkspacePaths(candidatePath);
// If one of the workspaces match the project root, this is the workspace root
// Note: While npm workspaces doesn't currently support globs, yarn does, which is why we use micromatch
const relativePath = path.relative(candidatePath, projectRoot);
// Using this instead of `micromatch.isMatch` to enable excluding patterns
if (micromatch([relativePath], workspacePaths).length > 0) {
return candidatePath;
}
// Try one level up
const parentDir = path.dirname(candidatePath);
if (parentDir !== candidatePath) {
return getWorkspaceRoot(projectRoot, parentDir);
}
return null;
}
Loading
Loading