From b0c2356785ea534007c56b2b04c7110d4a30546e Mon Sep 17 00:00:00 2001
From: Luna <lunaris.ruan@gmail.com>
Date: Tue, 10 May 2022 16:59:51 -0400
Subject: [PATCH] add transform react version pragma for devtools
---
.../src/__tests__/setupEnv.js | 24 ++++
.../transform-react-version-pragma-test.js | 127 ++++++++++++++++++
.../babel/transform-react-version-pragma.js | 107 +++++++++++++++
scripts/jest/devtools/preprocessor.js | 9 ++
scripts/jest/preprocessor.js | 4 +
5 files changed, 271 insertions(+)
create mode 100644 packages/react-devtools-shared/src/__tests__/transform-react-version-pragma-test.js
create mode 100644 scripts/babel/transform-react-version-pragma.js
create mode 100644 scripts/jest/devtools/preprocessor.js
diff --git a/packages/react-devtools-shared/src/__tests__/setupEnv.js b/packages/react-devtools-shared/src/__tests__/setupEnv.js
index e8b0fa74c8116..59725ad5dea40 100644
--- a/packages/react-devtools-shared/src/__tests__/setupEnv.js
+++ b/packages/react-devtools-shared/src/__tests__/setupEnv.js
@@ -1,5 +1,8 @@
'use strict';
+const semver = require('semver');
+const ReactVersion = require('../../../shared/ReactVersion');
+
const {
DARK_MODE_DIMMED_WARNING_COLOR,
DARK_MODE_DIMMED_ERROR_COLOR,
@@ -24,3 +27,24 @@ global.process.env.DARK_MODE_DIMMED_LOG_COLOR = DARK_MODE_DIMMED_LOG_COLOR;
global.process.env.LIGHT_MODE_DIMMED_WARNING_COLOR = LIGHT_MODE_DIMMED_WARNING_COLOR;
global.process.env.LIGHT_MODE_DIMMED_ERROR_COLOR = LIGHT_MODE_DIMMED_ERROR_COLOR;
global.process.env.LIGHT_MODE_DIMMED_LOG_COLOR = LIGHT_MODE_DIMMED_LOG_COLOR;
+
+global._test_react_version = (range, testName, callback) => {
+ const trimmedRange = range.replaceAll(' ', '');
+ const reactVersion = process.env.REACT_VERSION || ReactVersion;
+ const shouldPass = semver.satisfies(reactVersion, trimmedRange);
+
+ if (shouldPass) {
+ test(testName, callback);
+ }
+};
+
+global._test_react_version_focus = (range, testName, callback) => {
+ const trimmedRange = range.replaceAll(' ', '');
+ const reactVersion = process.env.REACT_VERSION || ReactVersion;
+ const shouldPass = semver.satisfies(reactVersion, trimmedRange);
+
+ if (shouldPass) {
+ // eslint-disable-next-line jest/no-focused-tests
+ test.only(testName, callback);
+ }
+};
diff --git a/packages/react-devtools-shared/src/__tests__/transform-react-version-pragma-test.js b/packages/react-devtools-shared/src/__tests__/transform-react-version-pragma-test.js
new file mode 100644
index 0000000000000..7160aea7353b4
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/transform-react-version-pragma-test.js
@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+const semver = require('semver');
+
+let shouldPass;
+let isFocused;
+describe('transform-react-version-pragma', () => {
+ // eslint-disable-next-line no-unused-vars
+ const _test_react_version = (range, testName, cb) => {
+ test(testName, (...args) => {
+ shouldPass = semver.satisfies('18.0.0', range);
+ return cb(...args);
+ });
+ };
+
+ // eslint-disable-next-line no-unused-vars
+ const _test_react_version_focus = (range, testName, cb) => {
+ test(testName, (...args) => {
+ shouldPass = semver.satisfies('18.0.0', range);
+ isFocused = true;
+ return cb(...args);
+ });
+ };
+
+ beforeEach(() => {
+ shouldPass = null;
+ isFocused = false;
+ });
+
+ // @reactVersion >= 17.9
+ test('reactVersion flag is on >=', () => {
+ expect(shouldPass).toBe(true);
+ });
+
+ // @reactVersion >= 18.1
+ test('reactVersion flag is off >=', () => {
+ expect(shouldPass).toBe(false);
+ });
+
+ // @reactVersion <= 18.1
+ test('reactVersion flag is on <=', () => {
+ expect(shouldPass).toBe(true);
+ });
+
+ // @reactVersion <= 17.9
+ test('reactVersion flag is off <=', () => {
+ expect(shouldPass).toBe(false);
+ });
+
+ // @reactVersion > 17.9
+ test('reactVersion flag is on >', () => {
+ expect(shouldPass).toBe(true);
+ });
+
+ // @reactVersion > 18.1
+ test('reactVersion flag is off >', () => {
+ expect(shouldPass).toBe(false);
+ });
+
+ // @reactVersion < 18.1
+ test('reactVersion flag is on <', () => {
+ expect(shouldPass).toBe(true);
+ });
+
+ // @reactVersion < 17.0.0
+ test('reactVersion flag is off <', () => {
+ expect(shouldPass).toBe(false);
+ });
+
+ // @reactVersion = 18.0
+ test('reactVersion flag is on =', () => {
+ expect(shouldPass).toBe(true);
+ });
+
+ // @reactVersion = 18.1
+ test('reactVersion flag is off =', () => {
+ expect(shouldPass).toBe(false);
+ });
+
+ /* eslint-disable jest/no-focused-tests */
+
+ // @reactVersion >= 18.1
+ fit('reactVersion fit', () => {
+ expect(shouldPass).toBe(false);
+ expect(isFocused).toBe(true);
+ });
+
+ // @reactVersion <= 18.1
+ test.only('reactVersion test.only', () => {
+ expect(shouldPass).toBe(true);
+ expect(isFocused).toBe(true);
+ });
+
+ // @reactVersion <= 18.1
+ // @reactVersion <= 17.1
+ test('reactVersion multiple pragmas fail', () => {
+ expect(shouldPass).toBe(false);
+ expect(isFocused).toBe(false);
+ });
+
+ // @reactVersion <= 18.1
+ // @reactVersion >= 17.1
+ test('reactVersion multiple pragmas pass', () => {
+ expect(shouldPass).toBe(true);
+ expect(isFocused).toBe(false);
+ });
+
+ // @reactVersion <= 18.1
+ // @reactVersion <= 17.1
+ test.only('reactVersion focused multiple pragmas fail', () => {
+ expect(shouldPass).toBe(false);
+ expect(isFocused).toBe(true);
+ });
+
+ // @reactVersion <= 18.1
+ // @reactVersion >= 17.1
+ test.only('reactVersion focused multiple pragmas pass', () => {
+ expect(shouldPass).toBe(true);
+ expect(isFocused).toBe(true);
+ });
+});
diff --git a/scripts/babel/transform-react-version-pragma.js b/scripts/babel/transform-react-version-pragma.js
new file mode 100644
index 0000000000000..ddf7f31ec502d
--- /dev/null
+++ b/scripts/babel/transform-react-version-pragma.js
@@ -0,0 +1,107 @@
+'use strict';
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+const GATE_VERSION_STR = '@reactVersion ';
+
+function transform(babel) {
+ const {types: t} = babel;
+
+ // Runs tests conditionally based on the version of react (semver range) we are running
+ // Input:
+ // @reactVersion >= 17.0
+ // test('some test', () => {/*...*/})
+ //
+ // Output:
+ // @reactVersion >= 17.0
+ // _test_react_version('>= 17.0', 'some test', () => {/*...*/});
+ //
+ // See info about semver ranges here:
+ // https://www.npmjs.com/package/semver
+ function buildGateVersionCondition(comments) {
+ let conditions = null;
+ for (const line of comments) {
+ const commentStr = line.value.trim();
+ if (commentStr.startsWith(GATE_VERSION_STR)) {
+ const condition = t.stringLiteral(
+ commentStr.slice(GATE_VERSION_STR.length)
+ );
+ if (conditions === null) {
+ conditions = [condition];
+ } else {
+ conditions.push(condition);
+ }
+ }
+ }
+
+ if (conditions !== null) {
+ let condition = conditions[0];
+ for (let i = 1; i < conditions.length; i++) {
+ const right = conditions[i];
+ condition = t.logicalExpression('&&', condition, right);
+ }
+ return condition;
+ } else {
+ return null;
+ }
+ }
+
+ return {
+ name: 'transform-react-version-pragma',
+ visitor: {
+ ExpressionStatement(path) {
+ const statement = path.node;
+ const expression = statement.expression;
+ if (expression.type === 'CallExpression') {
+ const callee = expression.callee;
+ switch (callee.type) {
+ case 'Identifier': {
+ if (
+ callee.name === 'test' ||
+ callee.name === 'it' ||
+ callee.name === 'fit'
+ ) {
+ const comments = statement.leadingComments;
+ if (comments !== undefined) {
+ const condition = buildGateVersionCondition(comments);
+ if (condition !== null) {
+ callee.name =
+ callee.name === 'fit'
+ ? '_test_react_version_focus'
+ : '_test_react_version';
+ expression.arguments = [condition, ...expression.arguments];
+ }
+ }
+ }
+ break;
+ }
+ case 'MemberExpression': {
+ if (
+ callee.object.type === 'Identifier' &&
+ (callee.object.name === 'test' ||
+ callee.object.name === 'it') &&
+ callee.property.type === 'Identifier' &&
+ callee.property.name === 'only'
+ ) {
+ const comments = statement.leadingComments;
+ if (comments !== undefined) {
+ const condition = buildGateVersionCondition(comments);
+ if (condition !== null) {
+ statement.expression = t.callExpression(
+ t.identifier('_test_react_version_focus'),
+ [condition, ...expression.arguments]
+ );
+ }
+ }
+ }
+ break;
+ }
+ }
+ }
+ return;
+ },
+ },
+ };
+}
+
+module.exports = transform;
diff --git a/scripts/jest/devtools/preprocessor.js b/scripts/jest/devtools/preprocessor.js
new file mode 100644
index 0000000000000..836f02c4bd66c
--- /dev/null
+++ b/scripts/jest/devtools/preprocessor.js
@@ -0,0 +1,9 @@
+'use strict';
+
+const pathToTransformReactVersionPragma = require.resolve(
+ '../../babel/transform-react-version-pragma'
+);
+
+module.exports = {
+ devtoolsPlugins: [pathToTransformReactVersionPragma],
+};
diff --git a/scripts/jest/preprocessor.js b/scripts/jest/preprocessor.js
index d7a5a2cdab6da..773496bd1dabb 100644
--- a/scripts/jest/preprocessor.js
+++ b/scripts/jest/preprocessor.js
@@ -7,6 +7,7 @@ const coffee = require('coffee-script');
const tsPreprocessor = require('./typescript/preprocessor');
const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction');
+const {devtoolsPlugins} = require('./devtools/preprocessor.js');
const pathToBabel = path.join(
require.resolve('@babel/core'),
@@ -82,6 +83,9 @@ module.exports = {
const plugins = (isTestFile ? testOnlyPlugins : sourceOnlyPlugins).concat(
babelOptions.plugins
);
+ if (isTestFile && isInDevToolsPackages) {
+ plugins.push(...devtoolsPlugins);
+ }
return babel.transform(
src,
Object.assign(