diff --git a/README.md b/README.md index eba8c8c..392cabb 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,7 @@ Note: returned value of `require` function is mutable. so you can mutate that be ## Snippets -You can use [snippets](snippets/cra-2.x.x.md) if you want. +You can use [snippets](snippets/cra-4.x.x.md) if you want. snippets: @@ -91,7 +91,7 @@ Also, you can find complete examples at [monkey-react-scripts-example] repo The `.babelrc` file is enabled for tests if you have `webpack.monkey.js` file. also, you can enable `.babelrc` for build and start: -- edit `webpack.monkey.js` like this (copy `findRule`, `findBabelRule` from [snippets](snippets/cra-2.x.x.md)): +- edit `webpack.monkey.js` like this (copy `findRule`, `findBabelRule` from [snippets](snippets/cra-4.x.x.md)): ```js function findRule(webpackConfig, callback) { @@ -219,6 +219,9 @@ you can find more detail in [this file][css-patch] | 1.x.x | 0.1.0 | | 2.0.0 - 2.1.1 | 0.1.2 | | 2.1.2 | 0.1.4 | +| 3.0.0 | 0.2.0 | +| 4.0.0 | 0.3.0 | +| 5.0.0 | 5.0.0-0 | ## Thanks diff --git a/bin/monkey-react-scripts.js b/bin/monkey-react-scripts.js index 2ced6f6..7996e86 100755 --- a/bin/monkey-react-scripts.js +++ b/bin/monkey-react-scripts.js @@ -1,46 +1,47 @@ #!/usr/bin/env node 'use strict'; +// Makes the script crash on unhandled rejections instead of silently +// ignoring them. In the future, promise rejections that are not handled will +// terminate the Node.js process with a non-zero exit code. +process.on('unhandledRejection', err => { + throw err; +}); + const spawn = require('react-dev-utils/crossSpawn'); const args = process.argv.slice(2); const scriptIndex = args.findIndex( - x => x === 'build' || x === 'eject' || x === 'start' || x === 'test' + x => x === 'build' || x === 'eject' || x === 'start' || x === 'test' ); const script = scriptIndex === -1 ? args[0] : args[scriptIndex]; const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : []; -switch (script) { - case 'build': - case 'start': - case 'test': { - const result = spawn.sync( - 'node', - nodeArgs - .concat(require.resolve('../scripts/' + script)) - .concat(args.slice(scriptIndex + 1)), - {stdio: 'inherit'} - ); - if (result.signal) { - if (result.signal === 'SIGKILL') { - console.log( - 'The build failed because the process exited too early. ' + - 'This probably means the system ran out of memory or someone called ' + - '`kill -9` on the process.' - ); - } else if (result.signal === 'SIGTERM') { - console.log( - 'The build failed because the process exited too early. ' + - 'Someone might have called `kill` or `killall`, or the system could ' + - 'be shutting down.' - ); - } - process.exit(1); +if (['build', 'start', 'test'].includes(script)) { + const result = spawn.sync( + process.execPath, + nodeArgs + .concat(require.resolve('../scripts/' + script)) + .concat(args.slice(scriptIndex + 1)), + { stdio: 'inherit' } + ); + if (result.signal) { + if (result.signal === 'SIGKILL') { + console.log( + 'The build failed because the process exited too early. ' + + 'This probably means the system ran out of memory or someone called ' + + '`kill -9` on the process.' + ); + } else if (result.signal === 'SIGTERM') { + console.log( + 'The build failed because the process exited too early. ' + + 'Someone might have called `kill` or `killall`, or the system could ' + + 'be shutting down.' + ); } - process.exit(result.status); - break; + process.exit(1); } - default: - console.log('Unknown script "' + script + '".'); - break; + process.exit(result.status); +} else { + console.log('Unknown script "' + script + '".'); } diff --git a/package.json b/package.json index 59d2be8..0842bd3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "monkey-react-scripts", - "version": "0.2.0", + "version": "5.0.0-0", "description": "Monkey react script runner", "main": "index.js", "repository": "git@github.com:monkey-patches/monkey-react-scripts.git", @@ -14,9 +14,6 @@ "monkey-react-scripts": "./bin/monkey-react-scripts.js" }, "peerDependencies": { - "react-scripts": ">=1.0.0" - }, - "dependencies": { - "react-dev-utils": "^5.0.0" + "react-scripts": ">=5.0.0" } } diff --git a/scripts/test.js b/scripts/test.js index 6b658ff..5ff792e 100644 --- a/scripts/test.js +++ b/scripts/test.js @@ -16,13 +16,36 @@ const webpackMonkeyPath = path.resolve(appPath, 'webpack.monkey.js'); require('react-scripts/config/jest/babelTransform.js') if (fs.existsSync(webpackMonkeyPath)) { - console.log(chalk.yellow('WARNING! .babelrc file is enabled!')); - const babelJest = require('babel-jest'); - patchModule('react-scripts/config/jest/babelTransform.js', babelJest.createTransformer({ - presets: [require.resolve('babel-preset-react-app')], - babelrc: true, - configFile: false, - })); + console.log(chalk.yellow('WARNING! .babelrc file is enabled!')); + const babelJest = require('babel-jest').default; + + const hasJsxRuntime = (() => { + if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') { + return false; + } + + try { + require.resolve('react/jsx-runtime'); + return true; + } catch (e) { + return false; + } + })(); + + const babelTransform = babelJest.createTransformer({ + presets: [ + [ + require.resolve('babel-preset-react-app'), + { + runtime: hasJsxRuntime ? 'automatic' : 'classic', + }, + ], + ], + babelrc: true, + configFile: false, + }); + + patchModule('react-scripts/config/jest/babelTransform.js', babelTransform); } require('react-scripts/scripts/test'); \ No newline at end of file diff --git a/snippets/README.md b/snippets/README.md index 80b572f..05cfe48 100644 --- a/snippets/README.md +++ b/snippets/README.md @@ -4,3 +4,6 @@ You need know what happen in monkey brain. So Snippets is better than helpers - [snippets for cra@0.9.x](cra-0.9.x.md) - [snippets for cra@1.x.x](cra-1.x.x.md) +- [snippets for cra@2.x.x](cra-2.x.x.md) +- [snippets for cra@3.x.x](cra-3.x.x.md) +- [snippets for cra@4.x.x](cra-4.x.x.md) diff --git a/snippets/cra-3.x.x.md b/snippets/cra-3.x.x.md new file mode 100644 index 0000000..b8a6d10 --- /dev/null +++ b/snippets/cra-3.x.x.md @@ -0,0 +1,35 @@ +# Code snippets for create-react-app 1.x.x +useful codes you can copy and use in webpack.monkey.js file. + +In real project I copy some of them in other file and use require function: + +## webpack plugin + +Add webpack plugin +```js +function addPlugin(webpackConfig, plugin) { + webpackConfig.plugins.push(plugin); +} +``` +## Find Rule + +```js +function findRule(webpackConfig, callback) { + const rules = webpackConfig.module.rules[2].oneOf; + const index = rules.findIndex(callback); + if (index === -1) throw Error('Loader not found'); + return rules[index] +} +``` + +## find Babel rule +requirement: `findRule` +```js +function findBabelRule(webpackConfig, plugins) { + // find babel rule + const babelRule = findRule(webpackConfig, (rule) => { + return ('' + rule.test === '' + /\.(js|jsx)$/) + }); + return babelRule; +} +``` diff --git a/snippets/cra-4.x.x.md b/snippets/cra-4.x.x.md new file mode 100644 index 0000000..277b70f --- /dev/null +++ b/snippets/cra-4.x.x.md @@ -0,0 +1,35 @@ +# Code snippets for create-react-app 1.x.x +useful codes you can copy and use in webpack.monkey.js file. + +In real project I copy some of them in other file and use require function: + +## webpack plugin + +Add webpack plugin +```js +function addPlugin(webpackConfig, plugin) { + webpackConfig.plugins.push(plugin); +} +``` +## Find Rule + +```js +function findRule(webpackConfig, callback) { + const rules = webpackConfig.module.rules[1].oneOf; + const index = rules.findIndex(callback); + if (index === -1) throw Error('Loader not found'); + return rules[index] +} +``` + +## find Babel rule +requirement: `findRule` +```js +function findBabelRule(webpackConfig, plugins) { + // find babel rule + const babelRule = findRule(webpackConfig, (rule) => { + return ('' + rule.test === '' + /\.(js|jsx)$/) + }); + return babelRule; +} +```