Merge pull request #4 from fs-webdev/develop

initial release for frontierMaster

Author: joeycozza

.travis.yml

@@ -1,35 +1,20 @@
----
-dist: trusty
 language: node_js
 node_js:
-  - 8
   - 10
-cache:
-  yarn: true
-  directories:
-    - .npm
 before_install:
-  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --nightly
-  - export PATH="$HOME/.yarn/bin:$PATH"
-install: true
-script:
-  - 'if [ $TEST_SUITE = "simple" ]; then tasks/e2e-simple.sh; fi'
-  - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi'
-  - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi'
-  - 'if [ $TEST_SUITE = "kitchensink-eject" ]; then tasks/e2e-kitchensink-eject.sh; fi'
-  - 'if [ $TEST_SUITE = "old-node" ]; then tasks/e2e-old-node.sh; fi'
-  - 'if [ $TEST_SUITE = "behavior" ]; then tasks/e2e-behavior.sh; fi'
-env:
-  matrix:
-    - TEST_SUITE=simple
-    - TEST_SUITE=installs
-    - TEST_SUITE=kitchensink
-    - TEST_SUITE=kitchensink-eject
-    - TEST_SUITE=behavior
-matrix:
-  include:
-    - os: osx
-      node_js: 8
-      env: TEST_SUITE=behavior
-    - node_js: 6
-      env: TEST_SUITE=old-node
+  - echo -e "machine github.com\n  login $CI_USER_TOKEN" >> ~/.netrc
+install:
+  - "npm i"
+  - "cd packages/react-scripts && npm i"
+  - "cd ../../"
+before_deploy:
+  - "cd packages && tar -zcf react-scripts-$TRAVIS_TAG.tgz react-scripts"
+deploy:
+  provider: releases
+  skip_cleanup: true
+  api_key:
+    secure: ndsLlqyGuhr1aCeLJcQ+5Dph8qFbhd8wno1z+hVz5PsCN8GYZr1tukGZ4xXGs76o2XCpxDrEIxceywrjEHfkMJtDU04WbB0w5oF6bHalgGEqIuARC2QlFdzwzeeG5WWYO1jnTWL4VbvHPQzt1CxGgqW9gX1sEdgqE89AW72KoPD3BQQm6W4NmwwCsDDgi3xnTpDys055ryvPZZOJ1FZ010wFa9TOgQ183ApFcpqPWVxJuZemU5i7RRfkAgKDM5nrgLRYkDg2Xo8txPmVp9aHgPOwYgtTmEORnDDi9HkvU/4tBUh7t5p319p9ayAlt3eVJfgJ31qkrNJGFNu03pAYSGA7OPMJ76llFJygcYS7qaqIAiijRKLrI8bBm187N+cbKl8KUsc8GNBdKPBwNdQAS6+/Zn5QqSvgOTVGGKl1rRx20SYoPVQQvLchHUy+slh5xzrSmRLmZOyd7yi+SiB9sx49X/aJWNIBUAdrFo3aa9wSEwplEZ6geidzSUPQWPwF1UBKGCvYFyTnewHXSrBHx4erlmjhvx17UG8CCK9cn12Gkp1OsxFXd4Y0bIB/Jj1rICyQMDNcvOHMfDy/M4J0kPc3DuI7nLCRF21Ak8flUMGYkBZExvrqmtB+5NtQCy6LQ/IUVf+lP1TEcfultynhH+9mI0sWg2ikNN/zH1Cfxug=
+  file: packages/react-scripts-$TRAVIS_TAG.tgz
+  on:
+    repo: fs-webdev/create-react-app
+    tags: true

CHANGELOG-FRONTIER.md

@@ -0,0 +1,16 @@
+## 1.0.0
+Forked Create React [email protected]
+
+#### :rocket: New Feature
+
+- Got travis to automatically make the tar file and upload it to the github release when a new tag is made (and pushed)
+- Added a way to get User Input if they want their react app to have support for Polymer or Redux
+- Added new jest configuration option `transformIgnorePatterns`
+
+#### :nail_care: Enhancement
+
+- Changed the React Template to say "Frontier" instead of "React" in the App.js template
+
+#### :memo: Documentation
+
+- Added a README-FRONTIER.md and a CHANGELOG-FRONTIER.md

README-FRONTIER.md

@@ -0,0 +1,12 @@
+## How to test your local copy of react-scripts
+
+- We found that creating a new react-app through this command could utilize your local react-scripts
+  - You'll just need to change the path to your react-scripts version.
+  - `npx create-react-app polyer-cra-test --scripts-version file:create-react-app/packages/react-scripts`
+
+## How to make a Release
+
+- When the "develop" branch is ready to merge into frontierMaster for a release, make a PR and be sure to squash all the commits into a single commit.
+- Create a tag on frontierMaster named `${SemverVersionOfFacebooksRelease}-frontier-${SemverVersionOfFrontiersRelease}`
+- Push that newly created tag up to github with `git push origin ${nameOfTagFromAbove}`
+- Travis will automatically catch that new tag, and create a tar file of react-scripts and upload it to the corresponding release on github.

package.json

@@ -9,7 +9,7 @@
     "create-react-app": "node tasks/cra.js",
     "e2e": "tasks/e2e-simple.sh",
     "e2e:docker": "tasks/local-test.sh",
-    "postinstall": "cd packages/react-error-overlay/ && yarn build:prod",
+    "postinstall": "echo \"cd packages/react-error-overlay/ && yarn build:prod\"",
     "publish": "tasks/publish.sh",
     "start": "cd packages/react-scripts && node bin/react-scripts.js start",
     "screencast": "node ./tasks/screencast.js",

packages/react-scripts/package.json

@@ -1,14 +1,15 @@
 {
   "name": "react-scripts",
   "version": "2.1.1",
+  "frontierVersion": "1.0.0",
   "description": "Configuration and scripts for Create React App.",
-  "repository": "facebook/create-react-app",
+  "repository": "joeycozza/create-react-app",
   "license": "MIT",
   "engines": {
     "node": ">=6"
   },
   "bugs": {
-    "url": "https://github.com/facebook/create-react-app/issues"
+    "url": "https://github.com/joeycozza/create-react-app/issues"
   },
   "files": [
     "bin",
@@ -30,11 +31,11 @@
     "babel-eslint": "9.0.0",
     "babel-jest": "23.6.0",
     "babel-loader": "8.0.4",
-    "babel-plugin-named-asset-import": "^0.2.3",
-    "babel-preset-react-app": "^6.1.0",
+    "babel-plugin-named-asset-import": "^0.2.2",
+    "babel-preset-react-app": "^6.0.0",
     "bfj": "6.1.1",
     "case-sensitive-paths-webpack-plugin": "2.1.2",
-    "chalk": "2.4.1",
+    "chalk": "^2.4.1",
     "css-loader": "1.0.0",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
@@ -47,9 +48,11 @@
     "eslint-plugin-react": "7.11.1",
     "file-loader": "2.0.0",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
+    "fs-cli-goodies": "github:fs-webdev/fs-cli-goodies",
     "fs-extra": "7.0.0",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",
+    "inquirer": "^6.2.0",
     "jest": "23.6.0",
     "jest-pnp-resolver": "1.0.1",
     "jest-resolve": "23.6.0",
@@ -61,7 +64,7 @@
     "postcss-preset-env": "6.0.6",
     "postcss-safe-parser": "4.0.1",
     "react-app-polyfill": "^0.1.3",
-    "react-dev-utils": "^6.1.1",
+    "react-dev-utils": "^6.1.0",
     "resolve": "1.8.1",
     "sass-loader": "7.1.0",
     "style-loader": "0.23.0",

packages/react-scripts/scripts/init.js

@@ -22,6 +22,7 @@ const spawn = require('react-dev-utils/crossSpawn');
 const { defaultBrowsers } = require('react-dev-utils/browsersHelper');
 const os = require('os');
 const verifyTypeScriptSetup = require('./utils/verifyTypeScriptSetup');
+const frontierInit = require('./utils/frontierInit');
 
 function isInGitRepository() {
   try {
@@ -75,13 +76,14 @@ function tryGitInit(appPath) {
   }
 }
 
-module.exports = function(
+module.exports = async function(
   appPath,
   appName,
   verbose,
   originalDirectory,
   template
 ) {
+  const answers = await frontierInit.promptForConfig(appPath);
   const ownPath = path.dirname(
     require.resolve(path.join(__dirname, '..', 'package.json'))
   );
@@ -114,6 +116,8 @@ module.exports = function(
     JSON.stringify(appPackage, null, 2) + os.EOL
   );
 
+  frontierInit.packageJsonWritten();
+
   const readmeExists = fs.existsSync(path.join(appPath, 'README.md'));
   if (readmeExists) {
     fs.renameSync(
@@ -195,6 +199,8 @@ module.exports = function(
     }
   }
 
+  frontierInit.installFrontierDependencies(appPath, answers, useYarn, ownPath);
+
   if (useTypeScript) {
     verifyTypeScriptSetup();
   }
@@ -217,6 +223,8 @@ module.exports = function(
   // Change displayed command to yarn instead of yarnpkg
   const displayedCommand = useYarn ? 'yarn' : 'npm';
 
+  frontierInit.cleanupFrontierCode(appPath);
+
   console.log();
   console.log(`Success! Created ${appName} at ${appPath}`);
   console.log('Inside that directory, you can run several commands:');

packages/react-scripts/scripts/utils/createJestConfig.js

@@ -81,6 +81,7 @@ module.exports = (resolve, rootDir, isEjecting) => {
     'resetModules',
     'snapshotSerializers',
     'watchPathIgnorePatterns',
+    'transformIgnorePatterns'
   ];
   if (overrides) {
     supportedKeys.forEach(key => {

packages/react-scripts/scripts/utils/frontierInit.js

@@ -0,0 +1,144 @@
+'use strict';
+
+const fs = require('fs-extra');
+const os = require('os');
+const path = require('path');
+const fsCli = require('fs-cli-goodies');
+const inquirer = require('inquirer');
+const osUtils = require('./osUtils');
+
+module.exports = {
+  installFrontierDependencies,
+  promptForConfig,
+  packageJsonWritten,
+  cleanupFrontierCode,
+};
+
+async function promptForConfig() {
+  console.log(fsCli.fsLogo('Frontier React Scripts'));
+  const questions = [
+    {
+      type: 'checkbox',
+      name: 'additionalFeatures',
+      message: 'What additional features does your app require',
+      choices: [
+        {
+          value: 'polymer',
+          name: 'Using a shared Polymer Component?',
+        },
+        {
+          name: 'Redux',
+          value: 'redux',
+        },
+      ],
+    },
+  ];
+  const answers = await inquirer.prompt(questions);
+  return answers;
+}
+
+function packageJsonWritten() {}
+
+function installFrontierDependencies(appPath, answers, useYarn, ownPath) {
+  const { additionalFeatures } = answers;
+
+  if (additionalFeatures.includes('polymer')) {
+    configurePolymer(appPath, useYarn);
+  }
+  if (additionalFeatures.includes('redux')) {
+    configureRedux(appPath, useYarn, ownPath);
+  }
+  injectPolymerCode(appPath);
+
+  const defaultModules = [
+    '[email protected]',
+    '[email protected]',
+  ];
+  installModulesSync(defaultModules, useYarn);
+}
+
+function configurePolymer(appPath, useYarn) {
+  const appPackage = require(path.join(appPath, 'package.json'));
+  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
+  );
+
+  const polymerModules = [
+    '[email protected]',
+    '@webcomponents/[email protected]',
+  ];
+  installModulesSync(polymerModules, useYarn, true);
+}
+
+function injectPolymerCode(appPath) {
+  const indexPath = path.join(appPath, 'public/index.html');
+  const polymerCode = `
+    <script src="%PUBLIC_URL%/vendor/webcomponents-bundle.js"></script>
+    <script src="%PUBLIC_URL%/vendor/custom-elements-es5-adapter.js"></script>
+ `;
+
+  let indexHtml = fs.readFileSync(indexPath, 'UTF8');
+  indexHtml = indexHtml.replace(
+    '<!--FRONTIER WEBCOMPONENT LOADER CODE FRONTIER -->',
+    polymerCode
+  );
+  fs.writeFileSync(indexPath, indexHtml);
+}
+
+function configureRedux(appPath, useYarn, ownPath) {
+  const reduxModules = [
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+  ];
+  installModulesSync(reduxModules, useYarn);
+
+  const templatePath = path.join(ownPath, 'template-redux');
+  fs.copySync(templatePath, appPath, { overwrite: true });
+}
+
+function cleanupFrontierCode(appPath) {}
+
+function installModulesSync(modules, useYarn, saveDev = false) {
+  const { command, args } = buildInstallCommandAndArgs(useYarn, saveDev);
+  osUtils.runExternalCommandSync(command, args.concat(modules));
+}
+
+function buildInstallCommandAndArgs(useYarn, saveDev = false) {
+  let command;
+  let args;
+  if (useYarn) {
+    command = 'yarnpkg';
+    args = ['add'];
+    if (saveDev) {
+      args.push('--dev');
+    }
+  } else {
+    command = 'npm';
+    args = ['install', '--save'];
+    if (saveDev) {
+      args[1] = '--save-dev';
+    }
+  }
+  return { command, args };
+}

packages/react-scripts/scripts/utils/osUtils.js

@@ -0,0 +1,15 @@
+'use strict';
+
+const spawn = require('react-dev-utils/crossSpawn');
+
+module.exports = {
+  runExternalCommandSync,
+};
+
+function runExternalCommandSync(command, args) {
+  const proc = spawn.sync(command, args, { stdio: 'inherit' });
+  if (proc.status !== 0) {
+    console.error(`\`${command} ${args.join(' ')}\` failed`);
+    return;
+  }
+}

packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js

@@ -94,7 +94,7 @@ function verifyTypeScriptSetup() {
       suggested: 'es5',
     },
     allowJs: { suggested: true },
-    skipLibCheck: { suggested: false },
+    skipLibCheck: { suggested: true },
     esModuleInterop: { suggested: true },
     allowSyntheticDefaultImports: { suggested: true },
     strict: { suggested: true },