diff --git a/package.json b/package.json index 97e13dd1180..3d129d0945f 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ }, "lint-staged": { "*.{js,md,css,html}": [ - "prettier --trailing-comma es5 --single-quote --write", + "prettier --print-width 100 es5 --single-quote --write", "git add" ], "yarn.lock": [ diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 6f517ff4f4d..c74deaf6bd8 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -313,7 +313,13 @@ module.exports = function(webpackEnv) { eslintPath: require.resolve('eslint'), // @remove-on-eject-begin baseConfig: { - extends: [require.resolve('eslint-config-react-app')], + extends: [ + //in order to keep backwards compatability for people currently using eslint-config-frontier + //with their old polymer projects, we have to point to the recommended file instead of index.js + require + .resolve('eslint-config-frontier') + .replace('index.js', 'recommended.js'), + ], settings: { react: { version: '999.999.999' } }, }, ignore: false, diff --git a/packages/react-scripts/gitTagForkedStyle.js b/packages/react-scripts/gitTagForkedStyle.js deleted file mode 100644 index d5953ce37ef..00000000000 --- a/packages/react-scripts/gitTagForkedStyle.js +++ /dev/null @@ -1,6 +0,0 @@ -const { version, upstreamVersion } = require('./package'); -const osUtils = require('./scripts/utils/osUtils'); - -const command = 'git'; -const args = ['tag', `v${version}-upstream-${upstreamVersion}`]; -osUtils.runExternalCommandSync(command, args); diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 77f774f4284..ce8d350b838 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -8,9 +8,6 @@ "engines": { "node": ">=6" }, - "scripts": { - "postversion": "node gitTagForkedStyle.js" - }, "bugs": { "url": "https://github.com/fs-webdev/create-react-app/issues" }, diff --git a/packages/react-scripts/scripts/utils/frontierInit.js b/packages/react-scripts/scripts/utils/frontierInit.js index 52a2fb3e905..01b5c3c8f44 100644 --- a/packages/react-scripts/scripts/utils/frontierInit.js +++ b/packages/react-scripts/scripts/utils/frontierInit.js @@ -45,9 +45,6 @@ function installFrontierDependencies(appPath, answers, useYarn, ownPath) { if (additionalFeatures.includes('polymer')) { configurePolymer(appPath, useYarn); } - if (additionalFeatures.includes('redux')) { - configureRedux(appPath, useYarn, ownPath); - } if (additionalFeatures.includes('electric-flow')) { configureEF(appPath, useYarn, ownPath); } @@ -60,25 +57,35 @@ function installFrontierDependencies(appPath, answers, useYarn, ownPath) { ]; const defaultDevModules = [ + 'eslint@5.6.0', + 'fs-webdev/eslint-config-frontier#settingUpRecommendedReactConfig', 'react-styleguidist@9.0.0-beta4', 'webpack@4.19.1', ]; installModulesSync(defaultModules, useYarn); installModulesSync(defaultDevModules, useYarn, true); - addStyleguidistScriptsToPackageJson(appPath); -} -function addStyleguidistScriptsToPackageJson(appPath) { - //we read the package.json using fs instead of require() because require() uses the - //cached result from earlier, even though the package.json has been updated previously. - const appPackage = JSON.parse( + alterPackageJsonFile(appPath, appPackage => { + const packageJson = { ...appPackage }; + const additionalScripts = { + styleguide: 'styleguidist server --open', + 'styleguide:build': 'styleguidist build', + lint: 'eslint src/', + 'lint:fix': 'eslint src/ --fix', + }; + packageJson.scripts = { ...packageJson.scripts, ...additionalScripts }; + packageJson.eslintConfig = { + extends: ['frontier/recommended'], + }; + return packageJson; + }); +} +function alterPackageJsonFile(appPath, extendFunction) { + let appPackage = JSON.parse( fs.readFileSync(path.join(appPath, 'package.json'), 'UTF8') ); - - appPackage.scripts.styleguide = 'styleguidist server --open'; - appPackage.scripts['styleguide:build'] = 'styleguidist build'; - + appPackage = extendFunction(appPackage); fs.writeFileSync( path.join(appPath, 'package.json'), JSON.stringify(appPackage, null, 2) + os.EOL @@ -86,33 +93,23 @@ function addStyleguidistScriptsToPackageJson(appPath) { } function configurePolymer(appPath, useYarn) { - //we read the package.json using fs instead of require() because require() uses the - //cached result from earlier, even though the package.json has been updated previously. - const appPackage = JSON.parse( - fs.readFileSync(path.join(appPath, 'package.json'), 'UTF8') - ); - appPackage.vendorCopy = [ - { - from: - 'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js', - to: 'public/vendor/custom-elements-es5-adapter.js', - }, - { - from: - 'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js', - to: 'public/vendor/webcomponents-bundle.js', - }, - ]; - - const { postinstall } = appPackage.scripts; - appPackage.scripts.postinstall = postinstall - ? `${postinstall} && ` - : '' + 'vendor-copy'; - - fs.writeFileSync( - path.join(appPath, 'package.json'), - JSON.stringify(appPackage, null, 2) + os.EOL - ); + alterPackageJsonFile(appPath, appPackage => { + const packageJson = { ...appPackage }; + packageJson.vendorCopy = [ + { + from: + 'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js', + to: 'public/vendor/custom-elements-es5-adapter.js', + }, + { + from: + 'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js', + to: 'public/vendor/webcomponents-bundle.js', + }, + ]; + packageJson.scripts.postinstall = 'vendor-copy'; + return packageJson; + }); const polymerModules = [ 'vendor-copy@2.0.0', @@ -137,19 +134,6 @@ function injectPolymerCode(appPath) { fs.writeFileSync(indexPath, indexHtml); } -function configureRedux(appPath, useYarn, ownPath) { - const reduxModules = [ - 'redux@4.0.0', - 'react-redux@5.0.7', - 'redux-logger@3.0.6', - 'redux-thunk@2.3.0', - ]; - installModulesSync(reduxModules, useYarn); - - const templatePath = path.join(ownPath, 'template-redux'); - fs.copySync(templatePath, appPath, { overwrite: true }); -} - function configureEF(appPath, useYarn, ownPath) { // TODO - modify package.json to make sure name is correct for blueprint // TODO - use blueprint.yml as a template diff --git a/packages/react-scripts/template/.env b/packages/react-scripts/template/.env new file mode 100644 index 00000000000..93740cd04a4 --- /dev/null +++ b/packages/react-scripts/template/.env @@ -0,0 +1,2 @@ +#dont worry about using newer versions of libraries than react-scripts +SKIP_PREFLIGHT_CHECK=true diff --git a/packages/react-scripts/template/src/components/App.jsx b/packages/react-scripts/template/src/components/App.jsx index e347894b031..8e60245cab1 100644 --- a/packages/react-scripts/template/src/components/App.jsx +++ b/packages/react-scripts/template/src/components/App.jsx @@ -1,9 +1,8 @@ -import React, { Component } from 'react'; +import React from 'react'; import logo from './logo.svg'; import styles from './App.module.css'; -class App extends Component { - render() { +function App() { return (