Object proxy stub

packages/react-scripts/.babelrc

@@ -1,3 +1,7 @@
 {
-  "presets": ["react-app"]
-}
+  "presets": [
+    "latest",
+    "react",
+    "stage-1"
+  ]
+}

packages/react-scripts/config/jest/CSSStub.js

@@ -10,4 +10,10 @@
  */
 // @remove-on-eject-end
 
-module.exports = {};
+/*
+* ZEAL: Stub style imports with identity proxy to allow testing of
+* dynamic styles etc
+*/
+const idenityObjProxy = require('identity-obj-proxy');
+
+module.exports = idenityObjProxy;

packages/react-scripts/config/jest/transform.js

@@ -9,5 +9,9 @@
 const babelJest = require('babel-jest');
 
 module.exports = babelJest.createTransformer({
-  presets: [require.resolve('babel-preset-react-app')]
+  presets: [
+    require.resolve('babel-preset-latest'),
+    require.resolve('babel-preset-react'),
+    require.resolve('babel-preset-stage-1')
+  ]
 });

packages/react-scripts/config/paths.js

@@ -38,12 +38,12 @@ var nodePaths = (process.env.NODE_PATH || '')
 // config after eject: we're in ./config/
 module.exports = {
   appBuild: resolveApp('build'),
-  appPublic: resolveApp('public'),
-  appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveApp('src/index.js'),
+  appPublic: resolveApp('client/public'),
+  appHtml: resolveApp('client/public/index.html'),
+  appIndexJs: resolveApp('client/index.js'),
   appPackageJson: resolveApp('package.json'),
-  appSrc: resolveApp('src'),
-  testsSetup: resolveApp('src/setupTests.js'),
+  appSrc: resolveApp('client'),
+  testsSetup: resolveApp('client/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),
   ownNodeModules: resolveApp('node_modules'),
   nodePaths: nodePaths
@@ -57,12 +57,12 @@ function resolveOwn(relativePath) {
 // config before eject: we're in ./node_modules/react-scripts/config/
 module.exports = {
   appBuild: resolveApp('build'),
-  appPublic: resolveApp('public'),
-  appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveApp('src/index.js'),
+  appPublic: resolveApp('client/public'),
+  appHtml: resolveApp('client/public/index.html'),
+  appIndexJs: resolveApp('client/index.js'),
   appPackageJson: resolveApp('package.json'),
-  appSrc: resolveApp('src'),
-  testsSetup: resolveApp('src/setupTests.js'),
+  appSrc: resolveApp('client'),
+  testsSetup: resolveApp('client/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),
   // this is empty with npm3 but node resolution searches higher anyway:
   ownNodeModules: resolveOwn('../node_modules'),
@@ -74,12 +74,12 @@ module.exports = {
 if (__dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1) {
   module.exports = {
     appBuild: resolveOwn('../../../build'),
-    appPublic: resolveOwn('../template/public'),
-    appHtml: resolveOwn('../template/public/index.html'),
-    appIndexJs: resolveOwn('../template/src/index.js'),
+    appPublic: resolveOwn('../template/client/public'),
+    appHtml: resolveOwn('../template/client/public/index.html'),
+    appIndexJs: resolveOwn('../template/client/index.js'),
     appPackageJson: resolveOwn('../package.json'),
-    appSrc: resolveOwn('../template/src'),
-    testsSetup: resolveOwn('../template/src/setupTests.js'),
+    appSrc: resolveOwn('../template/client'),
+    testsSetup: resolveOwn('../template/client/setupTests.js'),
     appNodeModules: resolveOwn('../node_modules'),
     ownNodeModules: resolveOwn('../node_modules'),
     nodePaths: nodePaths

packages/react-scripts/config/webpack.config.dev.js

@@ -22,7 +22,14 @@ var paths = require('./paths');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // In development, we always serve from the root. This makes config easier.
-var publicPath = '/';
+// ZEAL: Setting publicPath in the start script and passing it in. Since we are
+// mounting this app on various backends, the dev server port will be different
+// from the port on window location. Because of this, we need the full public
+// path, not just the relative path. Elements of the full path can be dynamic,
+// but are all known in the start script, making it the best place to define the
+// public path.
+// var publicPath = '/';
+
 // `publicUrl` is just like `publicPath`, but we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
@@ -33,7 +40,9 @@ var env = getClientEnvironment(publicUrl);
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
-module.exports = {
+// ZEAL: Converted to a function to allow injecting the publicPath.
+module.exports = function(publicPath) {
+  return {
   // This makes the bundle appear split into separate modules in the devtools.
   // We don't use source maps here because they can be confusing:
   // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875
@@ -51,9 +60,12 @@ module.exports = {
     // Note: instead of the default WebpackDevServer client, we use a custom one
     // to bring better experience for Create React App users. You can replace
     // the line below with these two lines if you prefer the stock client:
-    // require.resolve('webpack-dev-server/client') + '?/',
-    // require.resolve('webpack/hot/dev-server'),
-    require.resolve('react-dev-utils/webpackHotDevClient'),
+    // ZEAL: Opted to use the default client because the custom one gets the
+    // port off window location, which will be different from the dev server
+    // when the app is served from a different back end.
+    require.resolve('webpack-dev-server/client') + '?' + publicPath,
+    require.resolve('webpack/hot/dev-server'),
+    // require.resolve('react-dev-utils/webpackHotDevClient'),
     // We ship a few polyfills by default:
     require.resolve('./polyfills'),
     // Finally, this is your app's code:
@@ -119,7 +131,11 @@ module.exports = {
         query: {
           // @remove-on-eject-begin
           babelrc: false,
-          presets: [require.resolve('babel-preset-react-app')],
+          presets: [
+            require.resolve('babel-preset-latest'),
+            require.resolve('babel-preset-react'),
+            require.resolve('babel-preset-stage-1')
+          ],
           // @remove-on-eject-end
           // This is a feature of `babel-loader` for webpack (not Babel itself).
           // It enables caching results in ./node_modules/.cache/react-scripts/
@@ -135,9 +151,18 @@ module.exports = {
       // "style" loader turns CSS into JS modules that inject <style> tags.
       // In production, we use a plugin to extract that CSS to a file, but
       // in development "style" loader enables hot editing of CSS.
+      // ZEAL: Add support for CSS Modules and SASS
       {
         test: /\.css$/,
-        loader: 'style!css?importLoaders=1!postcss'
+        loader: 'style!css?importLoaders=1&modules=1!postcss'
+      },
+      {
+        test: /\.scss$/,
+        loaders: [
+          'style',
+          'css?modules&importLoaders=1' +
+            '&localIdentName=[path][local]__[hash:base64:5]!sass'
+        ]
       },
       // JSON is not enabled by default in Webpack but both Node and Browserify
       // allow it implicitly so we also enable it.
@@ -221,4 +246,4 @@ module.exports = {
     net: 'empty',
     tls: 'empty'
   }
-};
+}};

packages/react-scripts/config/webpack.config.prod.js

@@ -124,7 +124,11 @@ module.exports = {
         // @remove-on-eject-begin
         query: {
           babelrc: false,
-          presets: [require.resolve('babel-preset-react-app')],
+          presets: [
+            require.resolve('babel-preset-latest'),
+            require.resolve('babel-preset-react'),
+            require.resolve('babel-preset-stage-1')
+          ],
         },
         // @remove-on-eject-end
       },

packages/react-scripts/package.json

@@ -1,14 +1,14 @@
 {
-  "name": "react-scripts",
-  "version": "0.7.0",
+  "name": "@zeal/react-scripts",
+  "version": "0.1.5",
   "description": "Configuration and scripts for Create React App.",
-  "repository": "facebookincubator/create-react-app",
+  "repository": "codingzeal/create-react-app",
   "license": "BSD-3-Clause",
   "engines": {
     "node": ">=4"
   },
   "bugs": {
-    "url": "https://github.com/facebookincubator/create-react-app/issues"
+    "url": "https://github.com/codingzeal/create-react-app/issues"
   },
   "files": [
     ".babelrc",
@@ -28,7 +28,9 @@
     "babel-eslint": "7.0.0",
     "babel-jest": "16.0.0",
     "babel-loader": "6.2.5",
-    "babel-preset-react-app": "^1.0.0",
+    "babel-preset-latest": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-1": "^6.16.0",
     "case-sensitive-paths-webpack-plugin": "1.1.4",
     "chalk": "1.1.3",
     "connect-history-api-fallback": "1.3.0",
@@ -51,15 +53,18 @@
     "gzip-size": "3.0.0",
     "html-webpack-plugin": "2.24.0",
     "http-proxy-middleware": "0.17.2",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "16.0.2",
     "json-loader": "0.5.4",
+    "node-sass": "^3.13.0",
     "object-assign": "4.1.0",
     "path-exists": "2.1.0",
     "postcss-loader": "1.0.0",
     "promise": "7.1.1",
     "react-dev-utils": "^0.3.0",
     "recursive-readdir": "2.1.0",
     "rimraf": "2.5.4",
+    "sass-loader": "^4.0.2",
     "strip-ansi": "3.0.1",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",
@@ -69,57 +74,10 @@
     "whatwg-fetch": "1.0.0"
   },
   "devDependencies": {
-    "bundle-deps": "1.0.0",
     "react": "^15.3.0",
     "react-dom": "^15.3.0"
   },
   "optionalDependencies": {
     "fsevents": "1.0.14"
-  },
-  "bundledDependencies": [
-    "autoprefixer",
-    "babel-core",
-    "babel-eslint",
-    "babel-jest",
-    "babel-loader",
-    "babel-preset-react-app",
-    "case-sensitive-paths-webpack-plugin",
-    "chalk",
-    "connect-history-api-fallback",
-    "cross-spawn",
-    "css-loader",
-    "detect-port",
-    "dotenv",
-    "eslint",
-    "eslint-config-react-app",
-    "eslint-loader",
-    "eslint-plugin-flowtype",
-    "eslint-plugin-import",
-    "eslint-plugin-jsx-a11y",
-    "eslint-plugin-react",
-    "extract-text-webpack-plugin",
-    "file-loader",
-    "filesize",
-    "find-cache-dir",
-    "fs-extra",
-    "gzip-size",
-    "html-webpack-plugin",
-    "http-proxy-middleware",
-    "jest",
-    "json-loader",
-    "object-assign",
-    "path-exists",
-    "postcss-loader",
-    "promise",
-    "react-dev-utils",
-    "recursive-readdir",
-    "rimraf",
-    "strip-ansi",
-    "style-loader",
-    "url-loader",
-    "webpack",
-    "webpack-dev-server",
-    "webpack-manifest-plugin",
-    "whatwg-fetch"
-  ]
+  }
 }

packages/react-scripts/scripts/start.js

@@ -57,7 +57,9 @@ if (isSmokeTest) {
 function setupCompiler(host, port, protocol) {
   // "Compiler" is a low-level interface to Webpack.
   // It lets us listen to some events and provide our own custom messages.
-  compiler = webpack(config, handleCompile);
+  // ZEAL: Injecting the publicPath into the config since it needs to be fully
+  // qualified now. More notes in the config regarding publicPath.
+  compiler = webpack(config(publicPath(host, port, protocol)), handleCompile);
 
   // "invalid" event fires when you have changed a file, and Webpack is
   // recompiling a bundle. WebpackDevServer takes care to pause serving the
@@ -221,7 +223,9 @@ function runDevServer(host, port, protocol) {
     hot: true,
     // It is important to tell WebpackDevServer to use the same "root" path
     // as we specified in the config. In development, we always serve from /.
-    publicPath: config.output.publicPath,
+    // ZEAL: The public path is now being injected into the config with this
+    // function, so no need to reach into the config to get it anymore.
+    publicPath: publicPath(host, port, protocol),
     // WebpackDevServer is noisy by default so we emit custom message instead
     // by listening to the compiler events with `compiler.plugin` calls above.
     quiet: true,
@@ -246,11 +250,13 @@ function runDevServer(host, port, protocol) {
 
     clearConsole();
     console.log(chalk.cyan('Starting the development server...'));
-    console.log();
-    openBrowser(protocol + '://' + host + ':' + port + '/');
   });
 }
 
+function publicPath(host, port, protocol) {
+  return protocol + '://' + host + ':' + port + '/'
+}
+
 function run(port) {
   var protocol = process.env.HTTPS === 'true' ? "https" : "http";
   var host = process.env.HOST || 'localhost';

tasks/cra.sh

@@ -61,7 +61,9 @@ cp package.json package.json.orig
 
 # Like bundle-deps, this script modifies packages/react-scripts/package.json,
 # copying own dependencies (those in the `packages` dir) to bundledDependencies
-node $root_path/tasks/bundle-own-deps.js
+# ZEAL: Disabled because https://github.com/npm/npm/issues/12834, it will be
+# removed soon: https://github.com/facebookincubator/create-react-app/pull/1068
+# node $root_path/tasks/bundle-own-deps.js
 
 # Finally, pack react-scripts
 scripts_path=$root_path/packages/react-scripts/`npm pack`

tasks/release.sh

@@ -54,7 +54,9 @@ npm dedupe
 rm -rf node_modules/fsevents
 
 # This modifies package.json to copy all dependencies to bundledDependencies
-node ./node_modules/.bin/bundle-deps
+# ZEAL: Disabled because https://github.com/npm/npm/issues/12834, it will be
+# removed soon: https://github.com/facebookincubator/create-react-app/pull/1068
+# node ./node_modules/.bin/bundle-deps
 
 cd $root_path
 # Go!