From b0c2356785ea534007c56b2b04c7110d4a30546e Mon Sep 17 00:00:00 2001 From: Luna 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(