Last active
November 22, 2017 03:19
-
-
Save exogen/11b78d7e5e09220b46850523d3689fb5 to your computer and use it in GitHub Desktop.
Show divergence from create-react-app as a diff.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/usr/bin/env bash | |
# | |
# Determine divergence from create-react-app! | |
# Use this if you've ejected from create-react-app and want to see how its | |
# latest output would differ in key areas (package.json, config, scripts). | |
# | |
# - Assumes you can run create-react-app, so make sure it's installed. | |
# - Only shows files you've modified or removed from create-react-app. | |
# - Runs $FORMAT_COMMAND below on the create-react-app directory so formatting | |
# differences don't show up. Use something like Prettier, eslint --fix, etc. | |
set -e # Fail on error. | |
set -x # Show what we're doing. | |
APP_DIR="$PWD" | |
ESLINT="$APP_DIR/node_modules/.bin/eslint" | |
FORMAT_COMMAND=( "$ESLINT" --config "$APP_DIR/.eslintrc.js" --fix . ) | |
# Make a new directory in which to run create-react-app. | |
NEW_APP_DIR="$(mktemp -d)/new-react-app" | |
# Note that we added /new-react-app onto the temp directory above. | |
# That's to ensure that create-react-app likes our directory. | |
mkdir -p "$NEW_APP_DIR" | |
# Run it! | |
create-react-app "$NEW_APP_DIR" | |
# Eject! | |
cd "$NEW_APP_DIR" | |
yes | head -n 1 | yarn run eject | |
# Remove files we don't care about diffing. This is easier than getting | |
# `git diff` to exclude them. | |
rm -rf .gitignore README* node_modules package-lock.json public src yarn.lock | |
# Run our local formatting config on the create-react-app output so that it's | |
# minimally different from ours. | |
"${FORMAT_COMMAND[@]}" | |
# Come back to our app so the remaining commands are based here. | |
cd "$APP_DIR" | |
# Make the new app's package.json look like ours, except for devDependencies | |
# and a few config fields, so that only those show up in the diff. | |
node -e " | |
const newPath = process.argv[1] + '/package.json'; | |
const thisApp = require('./package.json'); | |
const newApp = require(newPath); | |
thisApp.dependencies = newApp.dependencies; | |
thisApp.devDependencies = newApp.devDependencies; | |
thisApp.jest = newApp.jest; | |
thisApp.babel = newApp.babel; | |
thisApp.eslintConfig = newApp.eslintConfig; | |
require('fs').writeFileSync(newPath, JSON.stringify(thisApp, null, 2) + '\n'); | |
" "$NEW_APP_DIR" | |
# Show the diff! | |
git diff --no-index --diff-filter=MD --color "$NEW_APP_DIR" . 2>/dev/null | less -CFRX | |
set +x | |
echo | |
echo "For comparison, the new create-react-app output can be found in:" | |
echo " $NEW_APP_DIR" | |
echo |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment